aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/common
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/common')
-rw-r--r--FrontEnd/src/views/common/alert/alert.css2
-rw-r--r--FrontEnd/src/views/common/button/Button.css10
-rw-r--r--FrontEnd/src/views/common/button/Button.tsx5
-rw-r--r--FrontEnd/src/views/common/button/FlatButton.tsx5
-rw-r--r--FrontEnd/src/views/common/button/IconButton.tsx4
-rw-r--r--FrontEnd/src/views/common/button/LoadingButton.tsx5
-rw-r--r--FrontEnd/src/views/common/index.css216
-rw-r--r--FrontEnd/src/views/common/theme.css244
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);
+}
+