...

4 files changed, 30 insertions, 52 deletions

diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 14b019b9..4e755dba 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -5,60 +5,59 @@
   border-radius: 0.2em;

   border: 1px solid;

   cursor: pointer;

-  background-color: var(--cru-surface-color);

 }

 

 .cru-button:not(.outline) {

-  color: var(--cru-key-on-color);

-  background-color: var(--cru-key-color);

-  border-color: var(--cru-key-color);

+  color: var(--cru--push-button-text-color);

+  background-color: var(--cru-button-normal-color);

+  border-color: var(--cru-button-normal-color);

 }

 

 .cru-button:not(.outline):hover {

-  background-color: var(--cru-key-1-color);

-  border-color: var(--cru-key-1-color);

+  background-color: var(--cru-button-hover-color);

+  border-color: var(--cru-button-hover-color);

 }

 

 .cru-button:not(.outline):focus {

-  background-color: var(--cru-key-1-color);

-  border-color: var(--cru-key-1-color);

+  background-color: var(--cru-button-focus-color);

+  border-color: var(--cru-button-focus-color);

 }

 

 .cru-button:not(.outline):active {

-  background-color: var(--cru-key-2-color);

-  border-color: var(--cru-key-2-color);

+  background-color: var(--cru-button-active-color);

+  border-color: var(--cru-button-active-color);

 }

 

 .cru-button:not(.outline):disabled {

-  background-color: var(--cru-surface-on-color);

-  border-color: var(--cru-surface-on-color);

+  color: var(--cru-push-button-disabled-text-color);

+  background-color: var(--cru-push-button-disabled-color);

+  border-color: var(--cru-push-button-disabled-color);

   cursor: auto;

 }

 

 

 .cru-button.outline {

-  color: var(--cru-key-color);

-  border-color: var(--cru-key-color);

+  color: var(--cru-button-normal-color);

+  border-color: var(--cru-button-normal-color);

 }

 

 .cru-button.outline:hover {

-  color: var(--cru-key-1-color);

-  border-color: var(--cru-key-1-color);

+  color: var(--cru-button-hover-color);

+  border-color: var(--cru-button-hover-color);

 }

 

 .cru-button.outline:focus {

-  color: var(--cru-key-1-color);

-  border-color: var(--cru-key-1-color);

+  color: var(--cru-button-focus-color);

+  border-color: var(--cru-button-focus-color);

 }

 

 .cru-button.outline:active {

-  color: var(--cru-key-2-color);

-  border-color: var(--cru-key-2-color);

+  color: var(--cru-button-active-color);

+  border-color: var(--cru-button-active-color);

 }

 

 .cru-button.outline:not(.cru-loading-button):disabled {

-  color: var(--cru-surface-on-color);

-  border-color: var(--cru-surface-on-color);

-  background-color: white;

+  color: var(--cru-button-disabled-color);

+  border-color: var(--cru-button-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 e01023c0..02d00ee5 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,7 +33,7 @@ export default function Button(props: ButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        color && `cru-${color}`,
+        color && `cru-${color}-button`,
         "cru-button",
         outline && "outline",
         className,
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css
index a1ac67f7..09f29415 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-key-color);
+  color: var(--cru-button-normal-color);
   font-size: 1.4rem;
   background: none;
   border: none;
@@ -9,43 +9,22 @@
 }
 
 .cru-icon-button:hover {
-  color: var(--cru-key-1-color);
+  color: var(--cru-button-hover-color);
 }
 
 .cru-icon-button:focus {
-  color: var(--cru-key-1-color);
+  color: var(--cru-button-focus-color);
 }
 
 .cru-icon-button:active {
-  color: var(--cru-key-2-color);
+  color: var(--cru-button-active-color);
 }
 
 .cru-flat-button:disabled {
-  color: var(--cru-surface-on-color);
+  color: var(--cru-button-disabled-color);
   cursor: auto;
 }
 
 .cru-icon-button.large {
   font-size: 1.6rem;
 }
-
-.cru-icon-button.on-surface {
-  color: var(--cru-surface-color);
-}
-
-.cru-icon-button.on-surface:hover {
-  color: var(--cru-surface-1-color);
-}
-
-.cru-icon-button.on-surface:focus {
-  color: var(--cru-surface-1-color);
-}
-
-.cru-icon-button.on-surface:active {
-  color: var(--cru-surface-2-color);
-}
-
-.cru-flat-button.on-surface:disabled {
-  color: var(--cru-surface-on-color);
-  cursor: auto;
-}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 2d7e86e5..d3a8b240 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 | "on-surface";
+  color?: ThemeColor;
   large?: boolean;
 }
 
@@ -20,7 +20,7 @@ export default function IconButton(props: IconButtonProps) {
         "cru-icon-button",
         large && "large",
         "bi-" + icon,
-        color && (color === "on-surface" ? "on-surface" : `cru-${color}`),
+        color && `cru-button-${color}`,
         className,
       )}
       {...otherProps}