...

8 files changed, 259 insertions, 232 deletions

diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/views/common/alert/alert.css
index fc15e3cb..83e1af28 100644
--- a/FrontEnd/src/views/common/alert/alert.css
+++ b/FrontEnd/src/views/common/alert/alert.css
@@ -7,7 +7,7 @@
   border-radius: 5px;

   border: var(--cru-theme-color) 1px solid;

   color: var(--cru-theme-t-color);

-  background-color: var(--cru-theme-r1-color);

+  background-color: var(--cru-theme-b1-color);

 

   display: flex;

   overflow: hidden;

diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index c34176f6..406d70d2 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,5 +1,5 @@
 .cru-button:not(.outline) {

-  color: var(--cru-theme-t-color);

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

   cursor: pointer;

   padding: 0.2em 0.5em;

   border-radius: 0.2em;

@@ -17,7 +17,7 @@
 }

 

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

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

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

   cursor: auto;

 }

 

@@ -44,8 +44,8 @@
 }

 

 .cru-button.outline:disabled {

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

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

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

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

   background-color: white;

   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 be605328..53f41bc1 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -1,13 +1,12 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { I18nText, useC } from "@/common";
-import { PaletteColorType } from "@/palette";
+import { I18nText, useC, ThemeColor } from "@/common";
 
 import "./Button.css";
 
 interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
-  color?: PaletteColorType;
+  color?: ThemeColor;
   text?: I18nText;
   outline?: boolean;
   buttonRef?: Ref<HTMLButtonElement> | null;
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 49912b68..a5354670 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,13 +1,12 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { I18nText, useC } from "@/common";
-import { PaletteColorType } from "@/palette";
+import { I18nText, useC, ThemeColor } from "@/common";
 
 import "./FlatButton.css";
 
 interface FlatButtonProps extends ComponentPropsWithoutRef<"button"> {
-  color?: PaletteColorType;
+  color?: ThemeColor;
   text?: I18nText;
   buttonRef?: Ref<HTMLButtonElement> | null;
 }
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 652a8b09..0ff9541a 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -1,13 +1,13 @@
 import { ComponentPropsWithoutRef } from "react";
 import classNames from "classnames";
 
-import { PaletteColorType } from "@/palette";
+import { ThemeColor } from "@/common";
 
 import "./IconButton.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: PaletteColorType;
+  color?: ThemeColor;
   large?: boolean;
 }
 
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index fceaec27..c4cafc0c 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -2,13 +2,12 @@ import * as React from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
+import { convertI18nText, I18nText, ThemeColor } from "@/common";
 
 import Spinner from "../Spinner";
 
 interface LoadingButtonProps extends React.ComponentPropsWithoutRef<"button"> {
-  color?: PaletteColorType;
+  color?: ThemeColor;
   text?: I18nText;
   loading?: boolean;
 }
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 111a3ec0..06f2556b 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,218 +1,4 @@
-:root {

-  --cru-background-color: #f8f9fa;

-  --cru-background-1-color: #e9ecef;

-  --cru-background-2-color: #dee2e6;

-

-  --cru-disable-color: #ced4da;

-

-  /*

-  --cru-primary-color: rgb(0, 123, 255);

-  --cru-primary-l1-color: rgb(26, 136, 255);

-  --cru-primary-l2-color: rgb(51, 149, 255);

-  --cru-primary-l3-color: rgb(77, 163, 255);

-  --cru-primary-d1-color: rgb(0, 111, 230);

-  --cru-primary-d2-color: rgb(0, 98, 204);

-  --cru-primary-d3-color: rgb(0, 86, 179);

-  --cru-primary-f1-color: rgb(0, 111, 230);

-  --cru-primary-f2-color: rgb(0, 98, 204);

-  --cru-primary-f3-color: rgb(0, 86, 179);

-  --cru-primary-r1-color: rgb(26, 136, 255);

-  --cru-primary-r2-color: rgb(51, 149, 255);

-  --cru-primary-r3-color: rgb(77, 163, 255);

-  --cru-primary-t-color: rgb(255, 255, 255);

-  --cru-primary-t1-color: rgb(230, 230, 230);

-  --cru-primary-t2-color: rgb(204, 204, 204);

-  --cru-primary-t3-color: rgb(179, 179, 179);

-  --cru-primary-enhance-color: rgb(77, 163, 255);

-  --cru-primary-enhance-l1-color: rgb(94, 172, 255);

-  --cru-primary-enhance-l2-color: rgb(112, 181, 255);

-  --cru-primary-enhance-l3-color: rgb(130, 190, 255);

-  --cru-primary-enhance-d1-color: rgb(43, 145, 255);

-  --cru-primary-enhance-d2-color: rgb(10, 128, 255);

-  --cru-primary-enhance-d3-color: rgb(0, 112, 232);

-  --cru-primary-enhance-f1-color: rgb(94, 172, 255);

-  --cru-primary-enhance-f2-color: rgb(112, 181, 255);

-  --cru-primary-enhance-f3-color: rgb(130, 190, 255);

-  --cru-primary-enhance-r1-color: rgb(43, 145, 255);

-  --cru-primary-enhance-r2-color: rgb(10, 128, 255);

-  --cru-primary-enhance-r3-color: rgb(0, 112, 232);

-  --cru-primary-enhance-t-color: rgb(0, 0, 0);

-  --cru-primary-enhance-t1-color: rgb(26, 26, 26);

-  --cru-primary-enhance-t2-color: rgb(51, 51, 51);

-  --cru-primary-enhance-t3-color: rgb(77, 77, 77);

-  --cru-secondary-color: rgb(128, 128, 128);

-  --cru-secondary-l1-color: rgb(141, 141, 141);

-  --cru-secondary-l2-color: rgb(153, 153, 153);

-  --cru-secondary-l3-color: rgb(166, 166, 166);

-  --cru-secondary-d1-color: rgb(115, 115, 115);

-  --cru-secondary-d2-color: rgb(102, 102, 102);

-  --cru-secondary-d3-color: rgb(90, 90, 90);

-  --cru-secondary-f1-color: rgb(115, 115, 115);

-  --cru-secondary-f2-color: rgb(102, 102, 102);

-  --cru-secondary-f3-color: rgb(90, 90, 90);

-  --cru-secondary-r1-color: rgb(141, 141, 141);

-  --cru-secondary-r2-color: rgb(153, 153, 153);

-  --cru-secondary-r3-color: rgb(166, 166, 166);

-  --cru-secondary-t-color: rgb(255, 255, 255);

-  --cru-secondary-t1-color: rgb(230, 230, 230);

-  --cru-secondary-t2-color: rgb(204, 204, 204);

-  --cru-secondary-t3-color: rgb(179, 179, 179);

-  --cru-danger-color: rgb(255, 0, 0);

-  --cru-danger-l1-color: rgb(255, 26, 26);

-  --cru-danger-l2-color: rgb(255, 51, 51);

-  --cru-danger-l3-color: rgb(255, 77, 77);

-  --cru-danger-d1-color: rgb(230, 0, 0);

-  --cru-danger-d2-color: rgb(204, 0, 0);

-  --cru-danger-d3-color: rgb(179, 0, 0);

-  --cru-danger-f1-color: rgb(230, 0, 0);

-  --cru-danger-f2-color: rgb(204, 0, 0);

-  --cru-danger-f3-color: rgb(179, 0, 0);

-  --cru-danger-r1-color: rgb(255, 26, 26);

-  --cru-danger-r2-color: rgb(255, 51, 51);

-  --cru-danger-r3-color: rgb(255, 77, 77);

-  --cru-danger-t-color: rgb(255, 255, 255);

-  --cru-danger-t1-color: rgb(230, 230, 230);

-  --cru-danger-t2-color: rgb(204, 204, 204);

-  --cru-danger-t3-color: rgb(179, 179, 179);

-  --cru-success-color: rgb(0, 128, 0);

-  --cru-success-l1-color: rgb(0, 166, 0);

-  --cru-success-l2-color: rgb(0, 204, 0);

-  --cru-success-l3-color: rgb(0, 243, 0);

-  --cru-success-d1-color: rgb(0, 115, 0);

-  --cru-success-d2-color: rgb(0, 102, 0);

-  --cru-success-d3-color: rgb(0, 90, 0);

-  --cru-success-f1-color: rgb(0, 115, 0);

-  --cru-success-f2-color: rgb(0, 102, 0);

-  --cru-success-f3-color: rgb(0, 90, 0);

-  --cru-success-r1-color: rgb(0, 166, 0);

-  --cru-success-r2-color: rgb(0, 204, 0);

-  --cru-success-r3-color: rgb(0, 243, 0);

-  --cru-success-t-color: rgb(255, 255, 255);

-  --cru-success-t1-color: rgb(230, 230, 230);

-  --cru-success-t2-color: rgb(204, 204, 204);

-  --cru-success-t3-color: rgb(179, 179, 179);

-  */

-}

-

-.cru-primary {

-  --cru-theme-color: var(--cru-primary-color);

-  --cru-theme-l1-color: var(--cru-primary-l1-color);

-  --cru-theme-l2-color: var(--cru-primary-l2-color);

-  --cru-theme-l3-color: var(--cru-primary-l3-color);

-  --cru-theme-d1-color: var(--cru-primary-d1-color);

-  --cru-theme-d2-color: var(--cru-primary-d2-color);

-  --cru-theme-d3-color: var(--cru-primary-d3-color);

-  --cru-theme-f1-color: var(--cru-primary-f1-color);

-  --cru-theme-f2-color: var(--cru-primary-f2-color);

-  --cru-theme-f3-color: var(--cru-primary-f3-color);

-  --cru-theme-r1-color: var(--cru-primary-r1-color);

-  --cru-theme-r2-color: var(--cru-primary-r2-color);

-  --cru-theme-r3-color: var(--cru-primary-r3-color);

-  --cru-theme-t-color: var(--cru-primary-t-color);

-  --cru-theme-t1-color: var(--cru-primary-t1-color);

-  --cru-theme-t2-color: var(--cru-primary-t2-color);

-  --cru-theme-t3-color: var(--cru-primary-t3-color);

-}

-

-.cru-primary-enhance {

-  --cru-theme-color: var(--cru-primary-enhance-color);

-  --cru-theme-l1-color: var(--cru-primary-enhance-l1-color);

-  --cru-theme-l2-color: var(--cru-primary-enhance-l2-color);

-  --cru-theme-l3-color: var(--cru-primary-enhance-l3-color);

-  --cru-theme-d1-color: var(--cru-primary-enhance-d1-color);

-  --cru-theme-d2-color: var(--cru-primary-enhance-d2-color);

-  --cru-theme-d3-color: var(--cru-primary-enhance-d3-color);

-  --cru-theme-f1-color: var(--cru-primary-enhance-f1-color);

-  --cru-theme-f2-color: var(--cru-primary-enhance-f2-color);

-  --cru-theme-f3-color: var(--cru-primary-enhance-f3-color);

-  --cru-theme-r1-color: var(--cru-primary-enhance-r1-color);

-  --cru-theme-r2-color: var(--cru-primary-enhance-r2-color);

-  --cru-theme-r3-color: var(--cru-primary-enhance-r3-color);

-  --cru-theme-t-color: var(--cru-primary-enhance-t-color);

-  --cru-theme-t1-color: var(--cru-primary-enhance-t1-color);

-  --cru-theme-t2-color: var(--cru-primary-enhance-t2-color);

-  --cru-theme-t3-color: var(--cru-primary-enhance-t3-color);

-}

-

-.cru-secondary {

-  --cru-theme-color: var(--cru-secondary-color);

-  --cru-theme-l1-color: var(--cru-secondary-l1-color);

-  --cru-theme-l2-color: var(--cru-secondary-l2-color);

-  --cru-theme-l3-color: var(--cru-secondary-l3-color);

-  --cru-theme-d1-color: var(--cru-secondary-d1-color);

-  --cru-theme-d2-color: var(--cru-secondary-d2-color);

-  --cru-theme-d3-color: var(--cru-secondary-d3-color);

-  --cru-theme-f1-color: var(--cru-secondary-f1-color);

-  --cru-theme-f2-color: var(--cru-secondary-f2-color);

-  --cru-theme-f3-color: var(--cru-secondary-f3-color);

-  --cru-theme-r1-color: var(--cru-secondary-r1-color);

-  --cru-theme-r2-color: var(--cru-secondary-r2-color);

-  --cru-theme-r3-color: var(--cru-secondary-r3-color);

-  --cru-theme-t-color: var(--cru-secondary-t-color);

-  --cru-theme-t1-color: var(--cru-secondary-t1-color);

-  --cru-theme-t2-color: var(--cru-secondary-t2-color);

-  --cru-theme-t3-color: var(--cru-secondary-t3-color);

-}

-

-.cru-success {

-  --cru-theme-color: var(--cru-success-color);

-  --cru-theme-l1-color: var(--cru-success-l1-color);

-  --cru-theme-l2-color: var(--cru-success-l2-color);

-  --cru-theme-l3-color: var(--cru-success-l3-color);

-  --cru-theme-d1-color: var(--cru-success-d1-color);

-  --cru-theme-d2-color: var(--cru-success-d2-color);

-  --cru-theme-d3-color: var(--cru-success-d3-color);

-  --cru-theme-f1-color: var(--cru-success-f1-color);

-  --cru-theme-f2-color: var(--cru-success-f2-color);

-  --cru-theme-f3-color: var(--cru-success-f3-color);

-  --cru-theme-r1-color: var(--cru-success-r1-color);

-  --cru-theme-r2-color: var(--cru-success-r2-color);

-  --cru-theme-r3-color: var(--cru-success-r3-color);

-  --cru-theme-t-color: var(--cru-success-t-color);

-  --cru-theme-t1-color: var(--cru-success-t1-color);

-  --cru-theme-t2-color: var(--cru-success-t2-color);

-  --cru-theme-t3-color: var(--cru-success-t3-color);

-}

-

-.cru-danger {

-  --cru-theme-color: var(--cru-danger-color);

-  --cru-theme-l1-color: var(--cru-danger-l1-color);

-  --cru-theme-l2-color: var(--cru-danger-l2-color);

-  --cru-theme-l3-color: var(--cru-danger-l3-color);

-  --cru-theme-d1-color: var(--cru-danger-d1-color);

-  --cru-theme-d2-color: var(--cru-danger-d2-color);

-  --cru-theme-d3-color: var(--cru-danger-d3-color);

-  --cru-theme-f1-color: var(--cru-danger-f1-color);

-  --cru-theme-f2-color: var(--cru-danger-f2-color);

-  --cru-theme-f3-color: var(--cru-danger-f3-color);

-  --cru-theme-r1-color: var(--cru-danger-r1-color);

-  --cru-theme-r2-color: var(--cru-danger-r2-color);

-  --cru-theme-r3-color: var(--cru-danger-r3-color);

-  --cru-theme-t-color: var(--cru-danger-t-color);

-  --cru-theme-t1-color: var(--cru-danger-t1-color);

-  --cru-theme-t2-color: var(--cru-danger-t2-color);

-  --cru-theme-t3-color: var(--cru-danger-t3-color);

-}

-

-.cru-color-primary {

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

-}

-

-.cru-color-primary-enhance {

-  color: var(--cru-primary-enhance-color);

-}

-

-.cru-color-secondary {

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

-}

-

-.cru-color-success {

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

-}

-

-.cru-color-danger {

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

-}

+@import "./theme.css";

 

 .cru-text-center {

   text-align: center;

diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
new file mode 100644
index 00000000..816bd3d1
--- /dev/null
+++ b/FrontEnd/src/views/common/theme.css
@@ -0,0 +1,244 @@
+/* Generated by theme-generator.ts */
+
+:root {
+  --cru-primary-color: hsl(210 100% 50%);
+  --cru-primary-l1-color: hsl(210 100% 60%);
+  --cru-primary-l2-color: hsl(210 100% 70%);
+  --cru-primary-l3-color: hsl(210 100% 80%);
+  --cru-primary-d1-color: hsl(210 100% 40%);
+  --cru-primary-d2-color: hsl(210 100% 30%);
+  --cru-primary-d3-color: hsl(210 100% 20%);
+  --cru-primary-f1-color: hsl(210 100% 60%);
+  --cru-primary-f2-color: hsl(210 100% 70%);
+  --cru-primary-f3-color: hsl(210 100% 80%);
+  --cru-primary-b1-color: hsl(210 100% 40%);
+  --cru-primary-b2-color: hsl(210 100% 30%);
+  --cru-primary-b3-color: hsl(210 100% 20%);
+  --cru-secondary-color: hsl(40 100% 50%);
+  --cru-secondary-l1-color: hsl(40 100% 60%);
+  --cru-secondary-l2-color: hsl(40 100% 70%);
+  --cru-secondary-l3-color: hsl(40 100% 80%);
+  --cru-secondary-d1-color: hsl(40 100% 40%);
+  --cru-secondary-d2-color: hsl(40 100% 30%);
+  --cru-secondary-d3-color: hsl(40 100% 20%);
+  --cru-secondary-f1-color: hsl(40 100% 60%);
+  --cru-secondary-f2-color: hsl(40 100% 70%);
+  --cru-secondary-f3-color: hsl(40 100% 80%);
+  --cru-secondary-b1-color: hsl(40 100% 40%);
+  --cru-secondary-b2-color: hsl(40 100% 30%);
+  --cru-secondary-b3-color: hsl(40 100% 20%);
+  --cru-tertiary-color: hsl(160 100% 50%);
+  --cru-tertiary-l1-color: hsl(160 100% 60%);
+  --cru-tertiary-l2-color: hsl(160 100% 70%);
+  --cru-tertiary-l3-color: hsl(160 100% 80%);
+  --cru-tertiary-d1-color: hsl(160 100% 40%);
+  --cru-tertiary-d2-color: hsl(160 100% 30%);
+  --cru-tertiary-d3-color: hsl(160 100% 20%);
+  --cru-tertiary-f1-color: hsl(160 100% 60%);
+  --cru-tertiary-f2-color: hsl(160 100% 70%);
+  --cru-tertiary-f3-color: hsl(160 100% 80%);
+  --cru-tertiary-b1-color: hsl(160 100% 40%);
+  --cru-tertiary-b2-color: hsl(160 100% 30%);
+  --cru-tertiary-b3-color: hsl(160 100% 20%);
+  --cru-danger-color: hsl(0 100% 50%);
+  --cru-danger-l1-color: hsl(0 100% 60%);
+  --cru-danger-l2-color: hsl(0 100% 70%);
+  --cru-danger-l3-color: hsl(0 100% 80%);
+  --cru-danger-d1-color: hsl(0 100% 40%);
+  --cru-danger-d2-color: hsl(0 100% 30%);
+  --cru-danger-d3-color: hsl(0 100% 20%);
+  --cru-danger-f1-color: hsl(0 100% 60%);
+  --cru-danger-f2-color: hsl(0 100% 70%);
+  --cru-danger-f3-color: hsl(0 100% 80%);
+  --cru-danger-b1-color: hsl(0 100% 40%);
+  --cru-danger-b2-color: hsl(0 100% 30%);
+  --cru-danger-b3-color: hsl(0 100% 20%);
+  --cru-success-color: hsl(120 100% 50%);
+  --cru-success-l1-color: hsl(120 100% 60%);
+  --cru-success-l2-color: hsl(120 100% 70%);
+  --cru-success-l3-color: hsl(120 100% 80%);
+  --cru-success-d1-color: hsl(120 100% 40%);
+  --cru-success-d2-color: hsl(120 100% 30%);
+  --cru-success-d3-color: hsl(120 100% 20%);
+  --cru-success-f1-color: hsl(120 100% 60%);
+  --cru-success-f2-color: hsl(120 100% 70%);
+  --cru-success-f3-color: hsl(120 100% 80%);
+  --cru-success-b1-color: hsl(120 100% 40%);
+  --cru-success-b2-color: hsl(120 100% 30%);
+  --cru-success-b3-color: hsl(120 100% 20%);
+  --cru-text-color: hsl(0 0% 0%);
+  --cru-text-1-color: hsl(0 0% 10%);
+  --cru-text-2-color: hsl(0 0% 20%);
+  --cru-text-3-color: hsl(0 0% 30%);
+  --cru-bg-color: hsl(0 0% 100%);
+  --cru-bg-1-color: hsl(0 0% 90%);
+  --cru-bg-2-color: hsl(0 0% 80%);
+  --cru-bg-3-color: hsl(0 0% 70%);
+  --cru-disabled-color: hsl(0 0% 75%);
+  --cru-disabled-1-color: hsl(0 0% 65%);
+  --cru-disabled-2-color: hsl(0 0% 55%);
+  --cru-disabled-3-color: hsl(0 0% 45%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cru-primary-color: hsl(210 100% 50%);
+    --cru-primary-l1-color: hsl(210 100% 60%);
+    --cru-primary-l2-color: hsl(210 100% 70%);
+    --cru-primary-l3-color: hsl(210 100% 80%);
+    --cru-primary-d1-color: hsl(210 100% 40%);
+    --cru-primary-d2-color: hsl(210 100% 30%);
+    --cru-primary-d3-color: hsl(210 100% 20%);
+    --cru-primary-f1-color: hsl(210 100% 40%);
+    --cru-primary-f2-color: hsl(210 100% 30%);
+    --cru-primary-f3-color: hsl(210 100% 20%);
+    --cru-primary-b1-color: hsl(210 100% 60%);
+    --cru-primary-b2-color: hsl(210 100% 70%);
+    --cru-primary-b3-color: hsl(210 100% 80%);
+    --cru-secondary-color: hsl(40 100% 50%);
+    --cru-secondary-l1-color: hsl(40 100% 60%);
+    --cru-secondary-l2-color: hsl(40 100% 70%);
+    --cru-secondary-l3-color: hsl(40 100% 80%);
+    --cru-secondary-d1-color: hsl(40 100% 40%);
+    --cru-secondary-d2-color: hsl(40 100% 30%);
+    --cru-secondary-d3-color: hsl(40 100% 20%);
+    --cru-secondary-f1-color: hsl(40 100% 40%);
+    --cru-secondary-f2-color: hsl(40 100% 30%);
+    --cru-secondary-f3-color: hsl(40 100% 20%);
+    --cru-secondary-b1-color: hsl(40 100% 60%);
+    --cru-secondary-b2-color: hsl(40 100% 70%);
+    --cru-secondary-b3-color: hsl(40 100% 80%);
+    --cru-tertiary-color: hsl(160 100% 50%);
+    --cru-tertiary-l1-color: hsl(160 100% 60%);
+    --cru-tertiary-l2-color: hsl(160 100% 70%);
+    --cru-tertiary-l3-color: hsl(160 100% 80%);
+    --cru-tertiary-d1-color: hsl(160 100% 40%);
+    --cru-tertiary-d2-color: hsl(160 100% 30%);
+    --cru-tertiary-d3-color: hsl(160 100% 20%);
+    --cru-tertiary-f1-color: hsl(160 100% 40%);
+    --cru-tertiary-f2-color: hsl(160 100% 30%);
+    --cru-tertiary-f3-color: hsl(160 100% 20%);
+    --cru-tertiary-b1-color: hsl(160 100% 60%);
+    --cru-tertiary-b2-color: hsl(160 100% 70%);
+    --cru-tertiary-b3-color: hsl(160 100% 80%);
+    --cru-danger-color: hsl(0 100% 50%);
+    --cru-danger-l1-color: hsl(0 100% 60%);
+    --cru-danger-l2-color: hsl(0 100% 70%);
+    --cru-danger-l3-color: hsl(0 100% 80%);
+    --cru-danger-d1-color: hsl(0 100% 40%);
+    --cru-danger-d2-color: hsl(0 100% 30%);
+    --cru-danger-d3-color: hsl(0 100% 20%);
+    --cru-danger-f1-color: hsl(0 100% 40%);
+    --cru-danger-f2-color: hsl(0 100% 30%);
+    --cru-danger-f3-color: hsl(0 100% 20%);
+    --cru-danger-b1-color: hsl(0 100% 60%);
+    --cru-danger-b2-color: hsl(0 100% 70%);
+    --cru-danger-b3-color: hsl(0 100% 80%);
+    --cru-success-color: hsl(120 100% 50%);
+    --cru-success-l1-color: hsl(120 100% 60%);
+    --cru-success-l2-color: hsl(120 100% 70%);
+    --cru-success-l3-color: hsl(120 100% 80%);
+    --cru-success-d1-color: hsl(120 100% 40%);
+    --cru-success-d2-color: hsl(120 100% 30%);
+    --cru-success-d3-color: hsl(120 100% 20%);
+    --cru-success-f1-color: hsl(120 100% 40%);
+    --cru-success-f2-color: hsl(120 100% 30%);
+    --cru-success-f3-color: hsl(120 100% 20%);
+    --cru-success-b1-color: hsl(120 100% 60%);
+    --cru-success-b2-color: hsl(120 100% 70%);
+    --cru-success-b3-color: hsl(120 100% 80%);
+    --cru-text-color: hsl(0 0% 100%);
+    --cru-text-1-color: hsl(0 0% 90%);
+    --cru-text-2-color: hsl(0 0% 80%);
+    --cru-text-3-color: hsl(0 0% 70%);
+    --cru-bg-color: hsl(0 0% 0%);
+    --cru-bg-1-color: hsl(0 0% 10%);
+    --cru-bg-2-color: hsl(0 0% 20%);
+    --cru-bg-3-color: hsl(0 0% 30%);
+    --cru-disabled-color: hsl(0 0% 25%);
+    --cru-disabled-1-color: hsl(0 0% 35%);
+    --cru-disabled-2-color: hsl(0 0% 45%);
+    --cru-disabled-3-color: hsl(0 0% 55%);
+  }
+}
+
+.cru-primary {
+  --cru-theme-color: var(--cru-primary-color);
+  --cru-theme-l1-color: var(--cru-primary-l1-color);
+  --cru-theme-l2-color: var(--cru-primary-l2-color);
+  --cru-theme-l3-color: var(--cru-primary-l3-color);
+  --cru-theme-d1-color: var(--cru-primary-d1-color);
+  --cru-theme-d2-color: var(--cru-primary-d2-color);
+  --cru-theme-d3-color: var(--cru-primary-d3-color);
+  --cru-theme-f1-color: var(--cru-primary-f1-color);
+  --cru-theme-f2-color: var(--cru-primary-f2-color);
+  --cru-theme-f3-color: var(--cru-primary-f3-color);
+  --cru-theme-b1-color: var(--cru-primary-b1-color);
+  --cru-theme-b2-color: var(--cru-primary-b2-color);
+  --cru-theme-b3-color: var(--cru-primary-b3-color);
+}
+
+.cru-secondary {
+  --cru-theme-color: var(--cru-secondary-color);
+  --cru-theme-l1-color: var(--cru-secondary-l1-color);
+  --cru-theme-l2-color: var(--cru-secondary-l2-color);
+  --cru-theme-l3-color: var(--cru-secondary-l3-color);
+  --cru-theme-d1-color: var(--cru-secondary-d1-color);
+  --cru-theme-d2-color: var(--cru-secondary-d2-color);
+  --cru-theme-d3-color: var(--cru-secondary-d3-color);
+  --cru-theme-f1-color: var(--cru-secondary-f1-color);
+  --cru-theme-f2-color: var(--cru-secondary-f2-color);
+  --cru-theme-f3-color: var(--cru-secondary-f3-color);
+  --cru-theme-b1-color: var(--cru-secondary-b1-color);
+  --cru-theme-b2-color: var(--cru-secondary-b2-color);
+  --cru-theme-b3-color: var(--cru-secondary-b3-color);
+}
+
+.cru-tertiary {
+  --cru-theme-color: var(--cru-tertiary-color);
+  --cru-theme-l1-color: var(--cru-tertiary-l1-color);
+  --cru-theme-l2-color: var(--cru-tertiary-l2-color);
+  --cru-theme-l3-color: var(--cru-tertiary-l3-color);
+  --cru-theme-d1-color: var(--cru-tertiary-d1-color);
+  --cru-theme-d2-color: var(--cru-tertiary-d2-color);
+  --cru-theme-d3-color: var(--cru-tertiary-d3-color);
+  --cru-theme-f1-color: var(--cru-tertiary-f1-color);
+  --cru-theme-f2-color: var(--cru-tertiary-f2-color);
+  --cru-theme-f3-color: var(--cru-tertiary-f3-color);
+  --cru-theme-b1-color: var(--cru-tertiary-b1-color);
+  --cru-theme-b2-color: var(--cru-tertiary-b2-color);
+  --cru-theme-b3-color: var(--cru-tertiary-b3-color);
+}
+
+.cru-danger {
+  --cru-theme-color: var(--cru-danger-color);
+  --cru-theme-l1-color: var(--cru-danger-l1-color);
+  --cru-theme-l2-color: var(--cru-danger-l2-color);
+  --cru-theme-l3-color: var(--cru-danger-l3-color);
+  --cru-theme-d1-color: var(--cru-danger-d1-color);
+  --cru-theme-d2-color: var(--cru-danger-d2-color);
+  --cru-theme-d3-color: var(--cru-danger-d3-color);
+  --cru-theme-f1-color: var(--cru-danger-f1-color);
+  --cru-theme-f2-color: var(--cru-danger-f2-color);
+  --cru-theme-f3-color: var(--cru-danger-f3-color);
+  --cru-theme-b1-color: var(--cru-danger-b1-color);
+  --cru-theme-b2-color: var(--cru-danger-b2-color);
+  --cru-theme-b3-color: var(--cru-danger-b3-color);
+}
+
+.cru-success {
+  --cru-theme-color: var(--cru-success-color);
+  --cru-theme-l1-color: var(--cru-success-l1-color);
+  --cru-theme-l2-color: var(--cru-success-l2-color);
+  --cru-theme-l3-color: var(--cru-success-l3-color);
+  --cru-theme-d1-color: var(--cru-success-d1-color);
+  --cru-theme-d2-color: var(--cru-success-d2-color);
+  --cru-theme-d3-color: var(--cru-success-d3-color);
+  --cru-theme-f1-color: var(--cru-success-f1-color);
+  --cru-theme-f2-color: var(--cru-success-f2-color);
+  --cru-theme-f3-color: var(--cru-success-f3-color);
+  --cru-theme-b1-color: var(--cru-success-b1-color);
+  --cru-theme-b2-color: var(--cru-success-b2-color);
+  --cru-theme-b3-color: var(--cru-success-b3-color);
+}
+