From c833176b638eeb1cdc8b30d4aef632a25ede3777 Mon Sep 17 00:00:00 2001 From: crupest Date: Fri, 14 Jul 2023 23:01:33 +0800 Subject: ... --- FrontEnd/src/views/common/alert/alert.css | 2 +- FrontEnd/src/views/common/button/Button.css | 10 +- FrontEnd/src/views/common/button/Button.tsx | 5 +- FrontEnd/src/views/common/button/FlatButton.tsx | 5 +- FrontEnd/src/views/common/button/IconButton.tsx | 4 +- FrontEnd/src/views/common/button/LoadingButton.tsx | 5 +- FrontEnd/src/views/common/index.css | 216 +----------------- FrontEnd/src/views/common/theme.css | 244 +++++++++++++++++++++ 8 files changed, 259 insertions(+), 232 deletions(-) create mode 100644 FrontEnd/src/views/common/theme.css (limited to 'FrontEnd/src/views/common') 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 | 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 | 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); +} + -- cgit v1.2.3