8 files changed, 38 insertions, 38 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index c6b180c4..1da70f0e 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -9,23 +9,23 @@
 
 .cru-button:not(.outline) {
   color: var(--cru-push-button-text-color);
-  background-color: var(--cru-button-normal-color);
-  border-color: var(--cru-button-normal-color);
+  background-color: var(--cru-clickable-normal-color);
+  border-color: var(--cru-clickable-normal-color);
 }
 
 .cru-button:not(.outline):hover {
-  background-color: var(--cru-button-hover-color);
-  border-color: var(--cru-button-hover-color);
+  background-color: var(--cru-clickable-hover-color);
+  border-color: var(--cru-clickable-hover-color);
 }
 
 .cru-button:not(.outline):focus {
-  background-color: var(--cru-button-focus-color);
-  border-color: var(--cru-button-focus-color);
+  background-color: var(--cru-clickable-focus-color);
+  border-color: var(--cru-clickable-focus-color);
 }
 
 .cru-button:not(.outline):active {
-  background-color: var(--cru-button-active-color);
-  border-color: var(--cru-button-active-color);
+  background-color: var(--cru-clickable-active-color);
+  border-color: var(--cru-clickable-active-color);
 }
 
 .cru-button:not(.outline):disabled {
@@ -37,28 +37,28 @@
 
 
 .cru-button.outline {
-  color: var(--cru-button-normal-color);
-  border-color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
+  border-color: var(--cru-clickable-normal-color);
   background-color: transparent;
 }
 
 .cru-button.outline:hover {
-  color: var(--cru-button-hover-color);
-  border-color: var(--cru-button-hover-color);
+  color: var(--cru-clickable-hover-color);
+  border-color: var(--cru-clickable-hover-color);
 }
 
 .cru-button.outline:focus {
-  color: var(--cru-button-focus-color);
-  border-color: var(--cru-button-focus-color);
+  color: var(--cru-clickable-focus-color);
+  border-color: var(--cru-clickable-focus-color);
 }
 
 .cru-button.outline:active {
-  color: var(--cru-button-active-color);
-  border-color: var(--cru-button-active-color);
+  color: var(--cru-clickable-active-color);
+  border-color: var(--cru-clickable-active-color);
 }
 
 .cru-button.outline:disabled {
-  color: var(--cru-button-disabled-color);
-  border-color: var(--cru-button-disabled-color);
+  color: var(--cru-clickable-disabled-color);
+  border-color: var(--cru-clickable-disabled-color);
   cursor: auto;
-}
-\ No newline at end of file
+}
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 573055cf..6c38e130 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -34,7 +34,7 @@ export default function Button(props: ButtonProps) {
       ref={buttonRef}
       className={classNames(
         "cru-button",
-        `cru-button-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "primary"}`,
         outline && "outline",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 7151f6de..2050946c 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -3,25 +3,25 @@
   padding: 0.4em 0.8em;
   transition: all 0.5s;
   border-radius: 0.2em;
-  background-color: var(--cru-flat-button-background-normal-color);
+  background-color: var(--cru-clickable-grayscale-normal-color);
   border: 1px none;
-  color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
   cursor: pointer;
 }
 
 .cru-flat-button:hover {
-  background-color: var(--cru-flat-button-background-hover-color);
+  background-color: var(--cru-clickable-grayscale-hover-color);
 }
 
 .cru-flat-button:focus {
-  background-color: var(--cru-flat-button-background-focus-color);
+  background-color: var(--cru-clickable-grayscale-focus-color);
 }
 
 .cru-flat-button:active {
-  background-color: var(--cru-flat-button-background-active-color);
+  background-color: var(--cru-clickable-grayscale-active-color);
 }
 
 .cru-flat-button:disabled {
-  color: var(--cru-button-disabled-color);
+  color: var(--cru-clickable-disabled-color);
   cursor: auto;
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 20ca7432..9f074dd6 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -24,8 +24,8 @@ export default function FlatButton(props: FlatButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        `cru-button-${color ?? "primary"}`,
         "cru-flat-button",
+        `cru-clickable-${color ?? "primary"}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css
index 09f29415..a3747201 100644
--- a/FrontEnd/src/views/common/button/IconButton.css
+++ b/FrontEnd/src/views/common/button/IconButton.css
@@ -1,5 +1,5 @@
 .cru-icon-button {
-  color: var(--cru-button-normal-color);
+  color: var(--cru-clickable-normal-color);
   font-size: 1.4rem;
   background: none;
   border: none;
@@ -9,19 +9,19 @@
 }
 
 .cru-icon-button:hover {
-  color: var(--cru-button-hover-color);
+  color: var(--cru-clickable-hover-color);
 }
 
 .cru-icon-button:focus {
-  color: var(--cru-button-focus-color);
+  color: var(--cru-clickable-focus-color);
 }
 
 .cru-icon-button:active {
-  color: var(--cru-button-active-color);
+  color: var(--cru-clickable-active-color);
 }
 
 .cru-flat-button:disabled {
-  color: var(--cru-button-disabled-color);
+  color: var(--cru-clickable-disabled-color);
   cursor: auto;
 }
 
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 126f4263..95c58887 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -7,7 +7,7 @@ import "./IconButton.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: ThemeColor;
+  color?: ThemeColor | "grayscale";
   large?: boolean;
   disabled?: boolean; // TODO: Not implemented
 }
@@ -19,7 +19,7 @@ export default function IconButton(props: IconButtonProps) {
     <button
       className={classNames(
         "cru-icon-button",
-        `cru-button-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "grayscale"}`,
         large && "large",
         "bi-" + icon,
         className,
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 2819168e..23fadd3d 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -8,6 +8,6 @@
 }
 
 .cru-loading-button-loading {
-  color: var(--cru-button-normal-color) !important;
-  border-color: var(--cru-button-normal-color) !important;
-}
+  color: var(--cru-clickable-normal-color) !important;
+  border-color: var(--cru-clickable-normal-color) !important;
+}
+\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 30b020cd..7e7d08e6 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -27,7 +27,7 @@ export default function LoadingButton(props: LoadingButtonProps) {
       disabled={disabled || loading}
       className={classNames(
         "cru-button outline cru-loading-button",
-        `cru-button-${color ?? "primary"}`,
+        `cru-clickable-${color ?? "primary"}`,
         loading && "cru-loading-button-loading",
         className,
       )}