9 files changed, 61 insertions, 15 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index bd8d0986..2f2d4a1a 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -28,7 +28,7 @@
 
 .app-bar a {
   background-color: var(--cru-primary-color);
-  color: var(--cru-primary-on-color);
+  color: var(--cru-push-button-text-color);
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -37,15 +37,15 @@
 }
 
 .app-bar a:hover {
-  background-color: var(--cru-primary-1-color);
+  background-color: var(--cru-button-primary-hover-color);
 }
 
 .app-bar a:focus {
-  background-color: var(--cru-primary-1-color);
+  background-color: var(--cru-button-primary-focus-color);
 }
 
 .app-bar a:active {
-  background-color: var(--cru-primary-2-color);
+  background-color: var(--cru-button-primary-active-color);
 }
 
 .app-bar .app-bar-avatar img {
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index c677abd7..f391abc8 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,5 +1,6 @@
 .cru-card {
   border-radius: var(--cru-card-border-radius);
-  background-color: var(--cru-key-container-color);
+  border: 1px solid var(--cru-card-border-color);
+  background-color: var(--cru-card-background-color);
   transition: all 0.3s;
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index 381e58e7..e1af13a9 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -19,7 +19,7 @@ export default function Card({
   return (
     <div
       ref={containerRef}
-      className={classNames("cru-card", color && `cru-${color}`, className)}
+      className={classNames("cru-card", `cru-card-${color ?? "primary"}`, className)}
       {...otherProps}
     >
       {children}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 4e755dba..b5a4e2f5 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,7 +1,7 @@
 .cru-button {
   font-size: 1rem;
   padding: 0.4em 0.8em;
-  transition: all 0.5s;
+  transition: all 0.3s;
   border-radius: 0.2em;
   border: 1px solid;
   cursor: pointer;
@@ -39,6 +39,7 @@
 .cru-button.outline {
   color: var(--cru-button-normal-color);
   border-color: var(--cru-button-normal-color);
+  background-color: transparent;
 }
 
 .cru-button.outline:hover {
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 02d00ee5..573055cf 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,8 +33,8 @@ export default function Button(props: ButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        color && `cru-${color}-button`,
         "cru-button",
+        `cru-button-${color ?? "primary"}`,
         outline && "outline",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index d3a8b240..60050e0d 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -18,9 +18,9 @@ export default function IconButton(props: IconButtonProps) {
     <button
       className={classNames(
         "cru-icon-button",
+        `cru-button-${color ?? "primary"}`,
         large && "large",
         "bi-" + icon,
-        color && `cru-button-${color}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 441abbbd..43aca766 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -26,8 +26,8 @@ export default function LoadingButton(props: LoadingButtonProps) {
     <button
       disabled={disabled || loading}
       className={classNames(
-        color && `cru-${color}`,
         "cru-button outline cru-loading-button",
+        `cru-button-${color ?? "primary"}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 1f9b5086..a8f5e9a5 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -8,8 +8,8 @@
 
 body {
   font-family: var(--cru-default-font-family);
-  background: var(--cru-surface-color);
-  color: var(--cru-surface-on-color);
+  background: var(--cru-body-background-color);
+  color: var(--cru-text-primary-color);
   line-height: 1.2;
 }
 
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 150f35cf..c8819b19 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -20,9 +20,21 @@
 
 /* common colors */
 :root {
-  --cru-body-background-color: #ffffff;
-  --cru-text-primary-color: #ffffff;
-  --cru-text-secondary-color: #ffffff;
+  --cru-background-color: #ffffff;
+  --cru-text-primary-color: #000000;
+  --cru-text-secondary-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cru-background-color: #000000;
+    --cru-text-primary-color: #ffffff;
+    --cru-text-secondary-color: #ffffff;
+  }
+}
+
+:root {
+  --cru-body-background-color: var(--cru-background-color);
 }
 
 /* button colors */
@@ -91,3 +103,35 @@
   --cru-button-focus-color: var(--cru-button-danger-focus-color);
   --cru-button-active-color: var(--cru-button-danger-active-color);
 }
+
+/* Card colors */
+:root {
+  --cru-card-background-primary-color: hsl(210, 100%, 50%);
+  --cru-card-border-primary-color: hsl(210, 100%, 50%);
+  --cru-card-background-secondary-color: hsl(30, 100%, 50%);
+  --cru-card-border-secondary-color: hsl(30, 100%, 50%);
+  --cru-card-background-create-color: hsl(120, 100%, 25%);
+  --cru-card-border-create-color: hsl(120, 100%, 25%);
+  --cru-card-background-danger-color: hsl(0, 100%, 50%);
+  --cru-card-border-danger-color: hsl(0, 100%, 50%);
+}
+
+.cru-card-primary {
+  --cru-card-background-color: var(--cru-card-background-primary-color);
+  --cru-card-border-color: var(--cru-card-border-primary-color)
+}
+
+.cru-card-secondary {
+  --cru-card-background-color: var(--cru-card-background-secondary-color);
+  --cru-card-border-color: var(--cru-card-border-secondary-color)
+}
+
+.cru-card-create {
+  --cru-card-background-color: var(--cru-card-background-create-color);
+  --cru-card-border-color: var(--cru-card-border-create-color)
+}
+
+.cru-card-danger {
+  --cru-card-background-color: var(--cru-card-background-danger-color);
+  --cru-card-border-color: var(--cru-card-border-danger-color)
+}