6 files changed, 86 insertions, 110 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}
diff --git a/FrontEnd/src/views/common/common.ts b/FrontEnd/src/views/common/common.ts
index 4ad41edc..7af2643b 100644
--- a/FrontEnd/src/views/common/common.ts
+++ b/FrontEnd/src/views/common/common.ts
@@ -4,9 +4,8 @@ export { c, convertI18nText, useC } from "@/common";
 export const themeColors = [
   "primary",
   "secondary",
-  "tertiary",
   "danger",
-  "success",
+  "create",
 ] as const;
 
 export type ThemeColor = (typeof themeColors)[number];
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 47034d95..150f35cf 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -12,19 +12,10 @@
 
 /* theme colors */
 :root {
-  --cru-primary-color: #ffffff;
-  --cru-secondary-color: #ffffff;
-  --cru-create-color: #ffffff;
-  --cru-danger-color: #ffffff;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --cru-primary-color: #ffffff;
-    --cru-secondary-color: #ffffff;
-    --cru-create-color: #ffffff;
-    --cru-danger-color: #ffffff;
-  }
+  --cru-primary-color: hsl(210, 100%, 50%);
+  --cru-secondary-color: hsl(30, 100%, 50%);
+  --cru-create-color: hsl(120, 100%, 25%);
+  --cru-danger-color: hsl(0, 100%, 50%);
 }
 
 /* common colors */
@@ -37,58 +28,66 @@
 /* button colors */
 :root {
   --cru-button-primary-normal-color: var(--cru-primary-color);
-  --cru-button-primary-hover-color: #ffffff;
-  --cru-button-primary-focus-color: #ffffff;
-  --cru-button-primary-active-color: #ffffff;
+  --cru-button-primary-hover-color: hsl(210, 100%, 60%);
+  --cru-button-primary-focus-color: hsl(210, 100%, 60%);
+  --cru-button-primary-active-color: hsl(210, 100%, 70%);
   --cru-button-secondary-normal-color: var(--cru-secondary-color);
-  --cru-button-secondary-hover-color: #ffffff;
-  --cru-button-secondary-focus-color: #ffffff;
-  --cru-button-secondary-active-color: #ffffff;
+  --cru-button-secondary-hover-color: hsl(30, 100%, 60%);
+  --cru-button-secondary-focus-color: hsl(30, 100%, 60%);
+  --cru-button-secondary-active-color: hsl(30, 100%, 70%);
   --cru-button-create-normal-color: var(--cru-create-color);
-  --cru-button-create-hover-color: #ffffff;
-  --cru-button-create-focus-color: #ffffff;
-  --cru-button-create-active-color: #ffffff;
+  --cru-button-create-hover-color: hsl(120, 100%, 35%);
+  --cru-button-create-focus-color: hsl(120, 100%, 35%);
+  --cru-button-create-active-color: hsl(120, 100%, 35%);
   --cru-button-danger-normal-color: var(--cru-danger-color);
-  --cru-button-danger-hover-color: #ffffff;
-  --cru-button-danger-focus-color: #ffffff;
-  --cru-button-danger-active-color: #ffffff;
-  --cru-button-disabled-color: #ffffff;
+  --cru-button-danger-hover-color: hsl(0, 100%, 60%);
+  --cru-button-danger-focus-color: hsl(0, 100%, 60%);
+  --cru-button-danger-active-color: hsl(0, 100%, 70%);
+  --cru-button-disabled-color: hsl(0, 0, 80%);
   /* push button colors */
-  --push-button-text: #ffffff;
-  --push-button-disabled-text: #ffffff;
+  --cru-push-button-text-color: #ffffff;
+  --cru-push-button-disabled-text-color: hsl(0, 0, 80%);
   /* flat button colors */
-  --flat-button-background-normal: #ffffff;
-  --flat-button-background-hover: #ffffff;
-  --flat-button-background-focus: #ffffff;
-  --flat-button-background-active: #ffffff;
+  --cru-flat-button-background-normal-color: #ffffff;
+  --cru-flat-button-background-hover-color: hsl(0, 0, 90%);
+  --cru-flat-button-background-focus-color: hsl(0, 0, 90%);
+  --cru-flat-button-background-active-color: hsl(0, 0, 80%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --cru-button-primary-normal-color: var(--cru-primary-color);
-    --cru-button-primary-hover-color: #ffffff;
-    --cru-button-primary-focus-color: #ffffff;
-    --cru-button-primary-active-color: #ffffff;
-    --cru-button-secondary-normal-color: var(--cru-secondary-color);
-    --cru-button-secondary-hover-color: #ffffff;
-    --cru-button-secondary-focus-color: #ffffff;
-    --cru-button-secondary-active-color: #ffffff;
-    --cru-button-create-normal-color: var(--cru-create-color);
-    --cru-button-create-hover-color: #ffffff;
-    --cru-button-create-focus-color: #ffffff;
-    --cru-button-create-active-color: #ffffff;
-    --cru-button-danger-normal-color: var(--cru-danger-color);
-    --cru-button-danger-hover-color: #ffffff;
-    --cru-button-danger-focus-color: #ffffff;
-    --cru-button-danger-active-color: #ffffff;
-    --cru-button-disabled-color: #ffffff;
-    /* push button colors */
-    --push-button-text: #ffffff;
-    --push-button-disabled-text: #ffffff;
     /* flat button colors */
-    --flat-button-background-normal: #ffffff;
-    --flat-button-background-hover: #ffffff;
-    --flat-button-background-focus: #ffffff;
-    --flat-button-background-active: #ffffff;
+    --cru-flat-button-background-normal-color: #ffffff;
+    --cru-flat-button-background-hover-color: #ffffff;
+    --cru-flat-button-background-focus-color: #ffffff;
+    --cru-flat-button-background-active-color: #ffffff;
   }
 }
+
+.cru-button-primary {
+  --cru-button-normal-color: var(--cru-button-primary-normal-color);
+  --cru-button-hover-color: var(--cru-button-primary-hover-color);
+  --cru-button-focus-color: var(--cru-button-primary-focus-color);
+  --cru-button-active-color: var(--cru-button-primary-active-color);
+}
+
+.cru-button-secondary {
+  --cru-button-normal-color: var(--cru-button-secondary-normal-color);
+  --cru-button-hover-color: var(--cru-button-secondary-hover-color);
+  --cru-button-focus-color: var(--cru-button-secondary-focus-color);
+  --cru-button-active-color: var(--cru-button-secondary-active-color);
+}
+
+.cru-button-create {
+  --cru-button-normal-color: var(--cru-button-create-normal-color);
+  --cru-button-hover-color: var(--cru-button-create-hover-color);
+  --cru-button-focus-color: var(--cru-button-create-focus-color);
+  --cru-button-active-color: var(--cru-button-create-active-color);
+}
+
+.cru-button-danger {
+  --cru-button-normal-color: var(--cru-button-danger-normal-color);
+  --cru-button-hover-color: var(--cru-button-danger-hover-color);
+  --cru-button-focus-color: var(--cru-button-danger-focus-color);
+  --cru-button-active-color: var(--cru-button-danger-active-color);
+}