From 85659d977ac501a13886c1c7098763935af416e2 Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 15 Jul 2023 17:02:00 +0800 Subject: ... --- FrontEnd/src/views/common/AppBar.css | 15 +- FrontEnd/src/views/common/AppBar.tsx | 24 +- FrontEnd/src/views/common/alert/alert.css | 10 +- FrontEnd/src/views/common/button/Button.css | 52 ++-- FrontEnd/src/views/common/button/FlatButton.css | 31 ++- FrontEnd/src/views/common/button/IconButton.css | 2 +- FrontEnd/src/views/common/index.css | 14 +- FrontEnd/src/views/common/menu/Menu.css | 6 +- FrontEnd/src/views/common/theme-color.css | 319 +++++++----------------- FrontEnd/src/views/common/theme.css | 31 +++ 10 files changed, 206 insertions(+), 298 deletions(-) (limited to 'FrontEnd/src') diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css index 3ec4fa36..272a99ad 100644 --- a/FrontEnd/src/views/common/AppBar.css +++ b/FrontEnd/src/views/common/AppBar.css @@ -16,16 +16,18 @@ } .app-bar a { - color: var(--cru-primary-t1-color); + color: var(--cru-primary-on-color); text-decoration: none; margin: 0 1em; transition: color 1s; } + .app-bar a:hover { - color: var(--cru-primary-t-color); + color: var(--cru-primary-on-color); } + .app-bar a.active { - color: var(--cru-primary-t-color); + color: var(--cru-primary-on-color); } .app-bar-brand { @@ -65,22 +67,27 @@ background-color: var(--cru-primary-color); flex-direction: column; } + .small-screen .app-bar-main-area.app-bar-collapse { transform: scale(1, 0); } + .small-screen .app-bar-main-area a { text-align: left; padding: 0.5em 0.5em; } + .small-screen .app-bar-link-area { flex-direction: column; align-items: stretch; } + .small-screen .app-bar-user-area { flex-direction: column; align-items: stretch; margin-left: unset; } + .small-screen .app-bar-avatar { align-self: flex-end; } @@ -92,4 +99,4 @@ color: var(--cru-primary-t-color); cursor: pointer; user-select: none; -} +} \ No newline at end of file diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx index 278c70fd..444d903e 100644 --- a/FrontEnd/src/views/common/AppBar.tsx +++ b/FrontEnd/src/views/common/AppBar.tsx @@ -1,9 +1,9 @@ import * as React from "react"; import classnames from "classnames"; -import { useTranslation } from "react-i18next"; import { Link, NavLink } from "react-router-dom"; import { useMediaQuery } from "react-responsive"; +import { useC } from "./common"; import { useUser } from "@/services/user"; import TimelineLogo from "./TimelineLogo"; @@ -11,8 +11,8 @@ import UserAvatar from "./user/UserAvatar"; import "./AppBar.css"; -const AppBar: React.FC = () => { - const { t } = useTranslation(); +export default function AppBar() { + const c = useC(); const user = useUser(); const hasAdministrationPermission = user && user.hasAdministrationPermission; @@ -26,7 +26,7 @@ const AppBar: React.FC = () => { const createLink = ( link: string, label: React.ReactNode, - className?: string + className?: string, ): React.ReactNode => ( {
- {createLink("/settings", t("nav.settings"))} - {createLink("/about", t("nav.about"))} + {createLink("/settings", c("nav.settings"))} + {createLink("/about", c("nav.about"))} {hasAdministrationPermission && - createLink("/admin", t("nav.administration"))} + createLink("/admin", c("nav.administration"))}
@@ -69,13 +69,11 @@ const AppBar: React.FC = () => { username={user.username} className="cru-avatar small cru-round cursor-pointer ml-auto" />, - "app-bar-avatar" + "app-bar-avatar", ) - : createLink("/login", t("nav.login"))} + : createLink("/login", c("nav.login"))}
); -}; - -export default AppBar; +} diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/views/common/alert/alert.css index 83e1af28..54c2b87f 100644 --- a/FrontEnd/src/views/common/alert/alert.css +++ b/FrontEnd/src/views/common/alert/alert.css @@ -5,9 +5,9 @@ .cru-alert { border-radius: 5px; - border: var(--cru-theme-color) 1px solid; - color: var(--cru-theme-t-color); - background-color: var(--cru-theme-b1-color); + border: var(--cru-key-color) 1px solid; + color: var(--cru-key-t-color); + background-color: var(--cru-key-b1-color); display: flex; overflow: hidden; @@ -25,9 +25,9 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--cru-theme-t-color); + background-color: var(--cru-key-t-color); } .cru-alert-close-button { - color: var(--cru-theme-color); + color: var(--cru-key-color); } diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index 0df22ebe..dacea3e1 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -1,46 +1,52 @@ -.cru-button:not(.outline) { - color: var(--cru-light-color); - cursor: pointer; - padding: 0.2em 0.5em; - border-radius: 0.2em; - border: none; +.cru-button { + font-size: 1rem; + padding: 0.4em 0.8em; transition: all 0.5s; - background-color: var(--cru-theme-color); + border-radius: 0.2em; + border: 1px solid; + cursor: pointer; +} + +.cru-button:not(.outline) { + color: var(--cru-key-on-color); + background-color: var(--cru-key-color); + border-color: var(--cru-key-color); } .cru-button:not(.outline):hover { - background-color: var(--cru-theme-d1-color); + filter: brightness(var(--cru-hover-darkness)); +} + +.cru-button:not(.outline):focus { + filter: brightness(var(--cru-focus-darkness)); } .cru-button:not(.outline):active { - background-color: var(--cru-theme-d2-color); + filter: brightness(var(--cru-press-darkness)); } .cru-button:not(.outline):disabled { - background-color: var(--cru-disabled-color); + background-color: var(--cru-surface-on-color); cursor: auto; } + .cru-button.outline { - color: var(--cru-theme-color); - border: var(--cru-theme-color) 1px solid; - cursor: pointer; - padding: 0.2em 0.5em; - border-radius: 0.2em; - transition: all 0.6s; - background-color: var(--cru-background-color); + color: var(--cru-key-color); + border: var(--cru-key-color) 1px solid; + background-color: var(--cru-surface-color); } .cru-button.outline:hover { - color: var(--cru-theme-d1-color); - border-color: var(--cru-theme-d1-color); - background-color: var(--cru-background-color); + filter: brightness(var(--cru-hover-brightness)); +} + +.cru-button.outline:focus { + filter: brightness(var(--cru-focus-brightness)); } .cru-button.outline:active { - color: var(--cru-theme-l2-color); - border-color: var(--cru-theme-l2-color); - background-color: var(--cru-background-1-color); + filter: brightness(var(--cru-press-brightness)); } .cru-button.outline:disabled { diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css index 01eabca9..f9a7d772 100644 --- a/FrontEnd/src/views/common/button/FlatButton.css +++ b/FrontEnd/src/views/common/button/FlatButton.css @@ -1,18 +1,27 @@ .cru-flat-button { - cursor: pointer; - padding: 0.2em 0.5em; + font-size: 1rem; + padding: 0.4em 0.8em; + transition: all 0.5s; border-radius: 0.2em; - border: none; - background-color: transparent; - transition: all 0.6s; - color: var(--cru-theme-color); + background-color: var(--cru-surface-color); + border: 1px none; + color: var(--cru-key-color); + cursor: pointer; } -.cru-flat-button.disabled { - color: var(--cru-disabled-color); - cursor: default; +.cru-flat-button:hover { + filter: brightness(var(--cru-hover-darkness)); } -.cru-flat-button:hover:not(.disabled) { - background-color: #e9ecef; +.cru-flat-button:focus { + filter: brightness(var(--cru-focus-darkness)); } + +.cru-flat-button:active { + filter: brightness(var(--cru-press-darkness)); +} + +.cru-flat-button.disabled { + color: var(--cru-disabled-color); + cursor: auto; +} \ No newline at end of file diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css index 45fb103c..25c5f84c 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-theme-color); + color: var(--cru-key-color); font-size: 1.4rem; background: none; border: none; diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 9d69997b..bd556a81 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -6,10 +6,18 @@ margin-block: 0; } +*::before { + box-sizing: border-box; +} + +*::after { + box-sizing: border-box; +} + body { - background: var(--cru-bg-color); - color: var(--cru-text-color); - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: var(--cru-default-font-family); + background: var(--cru-surface-color); + color: var(--cru-surface-on-color); } diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css index c3fa82c4..93c229f0 100644 --- a/FrontEnd/src/views/common/menu/Menu.css +++ b/FrontEnd/src/views/common/menu/Menu.css @@ -7,12 +7,12 @@ padding: 0.5em 1.5em; cursor: pointer; transition: all 0.5s; - color: var(--cru-theme-color); + color: var(--cru-key-color); } .cru-menu-item:hover { - color: var(--cru-theme-t-color); - background-color: var(--cru-theme-color); + color: var(--cru-key-t-color); + background-color: var(--cru-key-color); } .cru-menu-item-icon { diff --git a/FrontEnd/src/views/common/theme-color.css b/FrontEnd/src/views/common/theme-color.css index 9dfa1d9a..7cb9a8f8 100644 --- a/FrontEnd/src/views/common/theme-color.css +++ b/FrontEnd/src/views/common/theme-color.css @@ -1,260 +1,109 @@ /* Generated by theme-generator.ts */ :root { - --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 55%); - --cru-primary-l2-color: hsl(210 100% 60%); - --cru-primary-l3-color: hsl(210 100% 65%); - --cru-primary-d1-color: hsl(210 100% 45%); - --cru-primary-d2-color: hsl(210 100% 40%); - --cru-primary-d3-color: hsl(210 100% 35%); - --cru-primary-f1-color: hsl(210 100% 55%); - --cru-primary-f2-color: hsl(210 100% 60%); - --cru-primary-f3-color: hsl(210 100% 65%); - --cru-primary-b1-color: hsl(210 100% 45%); - --cru-primary-b2-color: hsl(210 100% 40%); - --cru-primary-b3-color: hsl(210 100% 35%); - --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 55%); - --cru-secondary-l2-color: hsl(40 100% 60%); - --cru-secondary-l3-color: hsl(40 100% 65%); - --cru-secondary-d1-color: hsl(40 100% 45%); - --cru-secondary-d2-color: hsl(40 100% 40%); - --cru-secondary-d3-color: hsl(40 100% 35%); - --cru-secondary-f1-color: hsl(40 100% 55%); - --cru-secondary-f2-color: hsl(40 100% 60%); - --cru-secondary-f3-color: hsl(40 100% 65%); - --cru-secondary-b1-color: hsl(40 100% 45%); - --cru-secondary-b2-color: hsl(40 100% 40%); - --cru-secondary-b3-color: hsl(40 100% 35%); - --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 55%); - --cru-tertiary-l2-color: hsl(160 100% 60%); - --cru-tertiary-l3-color: hsl(160 100% 65%); - --cru-tertiary-d1-color: hsl(160 100% 45%); - --cru-tertiary-d2-color: hsl(160 100% 40%); - --cru-tertiary-d3-color: hsl(160 100% 35%); - --cru-tertiary-f1-color: hsl(160 100% 55%); - --cru-tertiary-f2-color: hsl(160 100% 60%); - --cru-tertiary-f3-color: hsl(160 100% 65%); - --cru-tertiary-b1-color: hsl(160 100% 45%); - --cru-tertiary-b2-color: hsl(160 100% 40%); - --cru-tertiary-b3-color: hsl(160 100% 35%); - --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 55%); - --cru-danger-l2-color: hsl(0 100% 60%); - --cru-danger-l3-color: hsl(0 100% 65%); - --cru-danger-d1-color: hsl(0 100% 45%); - --cru-danger-d2-color: hsl(0 100% 40%); - --cru-danger-d3-color: hsl(0 100% 35%); - --cru-danger-f1-color: hsl(0 100% 55%); - --cru-danger-f2-color: hsl(0 100% 60%); - --cru-danger-f3-color: hsl(0 100% 65%); - --cru-danger-b1-color: hsl(0 100% 45%); - --cru-danger-b2-color: hsl(0 100% 40%); - --cru-danger-b3-color: hsl(0 100% 35%); - --cru-success-color: hsl(120 60% 50%); - --cru-success-l1-color: hsl(120 60% 55%); - --cru-success-l2-color: hsl(120 60% 60%); - --cru-success-l3-color: hsl(120 60% 65%); - --cru-success-d1-color: hsl(120 60% 45%); - --cru-success-d2-color: hsl(120 60% 40%); - --cru-success-d3-color: hsl(120 60% 35%); - --cru-success-f1-color: hsl(120 60% 55%); - --cru-success-f2-color: hsl(120 60% 60%); - --cru-success-f3-color: hsl(120 60% 65%); - --cru-success-b1-color: hsl(120 60% 45%); - --cru-success-b2-color: hsl(120 60% 40%); - --cru-success-b3-color: hsl(120 60% 35%); - --cru-text-color: hsl(0 0% 0%); - --cru-text-1-color: hsl(0 0% 5%); - --cru-text-2-color: hsl(0 0% 10%); - --cru-text-3-color: hsl(0 0% 15%); - --cru-bg-color: hsl(0 0% 100%); - --cru-bg-1-color: hsl(0 0% 95%); - --cru-bg-2-color: hsl(0 0% 90%); - --cru-bg-3-color: hsl(0 0% 85%); - --cru-light-color: hsl(0 0% 100%); - --cru-light-1-color: hsl(0 0% 95%); - --cru-light-2-color: hsl(0 0% 90%); - --cru-light-3-color: hsl(0 0% 85%); - --cru-dark-color: hsl(0 0% 0%); - --cru-dark-1-color: hsl(0 0% 5%); - --cru-dark-2-color: hsl(0 0% 10%); - --cru-dark-3-color: hsl(0 0% 15%); - --cru-disabled-color: hsl(0 0% 75%); - --cru-disabled-1-color: hsl(0 0% 70%); - --cru-disabled-2-color: hsl(0 0% 65%); - --cru-disabled-3-color: hsl(0 0% 60%); + --cru-primary-color: hsl(210 100% 40%); + --cru-primary-on-color: hsl(210 100% 100%); + --cru-primary-container-color: hsl(210 100% 90%); + --cru-primary-on-container-color: hsl(210 100% 10%); + --cru-secondary-color: hsl(40 100% 40%); + --cru-secondary-on-color: hsl(40 100% 100%); + --cru-secondary-container-color: hsl(40 100% 90%); + --cru-secondary-on-container-color: hsl(40 100% 10%); + --cru-tertiary-color: hsl(160 100% 40%); + --cru-tertiary-on-color: hsl(160 100% 100%); + --cru-tertiary-container-color: hsl(160 100% 90%); + --cru-tertiary-on-container-color: hsl(160 100% 10%); + --cru-danger-color: hsl(0 100% 40%); + --cru-danger-on-color: hsl(0 100% 100%); + --cru-danger-container-color: hsl(0 100% 90%); + --cru-danger-on-container-color: hsl(0 100% 10%); + --cru-success-color: hsl(120 60% 40%); + --cru-success-on-color: hsl(120 60% 100%); + --cru-success-container-color: hsl(120 60% 90%); + --cru-success-on-container-color: hsl(120 60% 10%); + --cru-surface-dim-color: hsl(0 0% 87%); + --cru-surface-color: hsl(0 0% 98%); + --cru-surface-bright-color: hsl(0 0% 98%); + --cru-surface-container-lowest-color: hsl(0 0% 100%); + --cru-surface-container-low-color: hsl(0 0% 96%); + --cru-surface-container-color: hsl(0 0% 94%); + --cru-surface-container-high-color: hsl(0 0% 92%); + --cru-surface-container-highest-color: hsl(0 0% 90%); + --cru-surface-on-color: hsl(0 0% 10%); + --cru-surface-on-variant-color: hsl(0 0% 30%); + --cru-surface-outline-color: hsl(0 0% 50%); + --cru-surface-outline-variant-color: hsl(0 0% 80%); } @media (prefers-color-scheme: dark) { :root { - --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 55%); - --cru-primary-l2-color: hsl(210 100% 60%); - --cru-primary-l3-color: hsl(210 100% 65%); - --cru-primary-d1-color: hsl(210 100% 45%); - --cru-primary-d2-color: hsl(210 100% 40%); - --cru-primary-d3-color: hsl(210 100% 35%); - --cru-primary-f1-color: hsl(210 100% 45%); - --cru-primary-f2-color: hsl(210 100% 40%); - --cru-primary-f3-color: hsl(210 100% 35%); - --cru-primary-b1-color: hsl(210 100% 55%); - --cru-primary-b2-color: hsl(210 100% 60%); - --cru-primary-b3-color: hsl(210 100% 65%); - --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 55%); - --cru-secondary-l2-color: hsl(40 100% 60%); - --cru-secondary-l3-color: hsl(40 100% 65%); - --cru-secondary-d1-color: hsl(40 100% 45%); - --cru-secondary-d2-color: hsl(40 100% 40%); - --cru-secondary-d3-color: hsl(40 100% 35%); - --cru-secondary-f1-color: hsl(40 100% 45%); - --cru-secondary-f2-color: hsl(40 100% 40%); - --cru-secondary-f3-color: hsl(40 100% 35%); - --cru-secondary-b1-color: hsl(40 100% 55%); - --cru-secondary-b2-color: hsl(40 100% 60%); - --cru-secondary-b3-color: hsl(40 100% 65%); - --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 55%); - --cru-tertiary-l2-color: hsl(160 100% 60%); - --cru-tertiary-l3-color: hsl(160 100% 65%); - --cru-tertiary-d1-color: hsl(160 100% 45%); - --cru-tertiary-d2-color: hsl(160 100% 40%); - --cru-tertiary-d3-color: hsl(160 100% 35%); - --cru-tertiary-f1-color: hsl(160 100% 45%); - --cru-tertiary-f2-color: hsl(160 100% 40%); - --cru-tertiary-f3-color: hsl(160 100% 35%); - --cru-tertiary-b1-color: hsl(160 100% 55%); - --cru-tertiary-b2-color: hsl(160 100% 60%); - --cru-tertiary-b3-color: hsl(160 100% 65%); - --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 55%); - --cru-danger-l2-color: hsl(0 100% 60%); - --cru-danger-l3-color: hsl(0 100% 65%); - --cru-danger-d1-color: hsl(0 100% 45%); - --cru-danger-d2-color: hsl(0 100% 40%); - --cru-danger-d3-color: hsl(0 100% 35%); - --cru-danger-f1-color: hsl(0 100% 45%); - --cru-danger-f2-color: hsl(0 100% 40%); - --cru-danger-f3-color: hsl(0 100% 35%); - --cru-danger-b1-color: hsl(0 100% 55%); - --cru-danger-b2-color: hsl(0 100% 60%); - --cru-danger-b3-color: hsl(0 100% 65%); - --cru-success-color: hsl(120 60% 50%); - --cru-success-l1-color: hsl(120 60% 55%); - --cru-success-l2-color: hsl(120 60% 60%); - --cru-success-l3-color: hsl(120 60% 65%); - --cru-success-d1-color: hsl(120 60% 45%); - --cru-success-d2-color: hsl(120 60% 40%); - --cru-success-d3-color: hsl(120 60% 35%); - --cru-success-f1-color: hsl(120 60% 45%); - --cru-success-f2-color: hsl(120 60% 40%); - --cru-success-f3-color: hsl(120 60% 35%); - --cru-success-b1-color: hsl(120 60% 55%); - --cru-success-b2-color: hsl(120 60% 60%); - --cru-success-b3-color: hsl(120 60% 65%); - --cru-text-color: hsl(0 0% 100%); - --cru-text-1-color: hsl(0 0% 95%); - --cru-text-2-color: hsl(0 0% 90%); - --cru-text-3-color: hsl(0 0% 85%); - --cru-bg-color: hsl(0 0% 0%); - --cru-bg-1-color: hsl(0 0% 5%); - --cru-bg-2-color: hsl(0 0% 10%); - --cru-bg-3-color: hsl(0 0% 15%); - --cru-light-color: hsl(0 0% 100%); - --cru-light-1-color: hsl(0 0% 95%); - --cru-light-2-color: hsl(0 0% 90%); - --cru-light-3-color: hsl(0 0% 85%); - --cru-dark-color: hsl(0 0% 0%); - --cru-dark-1-color: hsl(0 0% 5%); - --cru-dark-2-color: hsl(0 0% 10%); - --cru-dark-3-color: hsl(0 0% 15%); - --cru-disabled-color: hsl(0 0% 25%); - --cru-disabled-1-color: hsl(0 0% 30%); - --cru-disabled-2-color: hsl(0 0% 35%); - --cru-disabled-3-color: hsl(0 0% 40%); + --cru-primary-color: hsl(210 100% 80%); + --cru-primary-on-color: hsl(210 100% 20%); + --cru-primary-container-color: hsl(210 100% 30%); + --cru-primary-on-container-color: hsl(210 100% 90%); + --cru-secondary-color: hsl(40 100% 80%); + --cru-secondary-on-color: hsl(40 100% 20%); + --cru-secondary-container-color: hsl(40 100% 30%); + --cru-secondary-on-container-color: hsl(40 100% 90%); + --cru-tertiary-color: hsl(160 100% 80%); + --cru-tertiary-on-color: hsl(160 100% 20%); + --cru-tertiary-container-color: hsl(160 100% 30%); + --cru-tertiary-on-container-color: hsl(160 100% 90%); + --cru-danger-color: hsl(0 100% 80%); + --cru-danger-on-color: hsl(0 100% 20%); + --cru-danger-container-color: hsl(0 100% 30%); + --cru-danger-on-container-color: hsl(0 100% 90%); + --cru-success-color: hsl(120 60% 80%); + --cru-success-on-color: hsl(120 60% 20%); + --cru-success-container-color: hsl(120 60% 30%); + --cru-success-on-container-color: hsl(120 60% 90%); + --cru-surface-dim-color: hsl(0 0% 6%); + --cru-surface-color: hsl(0 0% 6%); + --cru-surface-bright-color: hsl(0 0% 24%); + --cru-surface-container-lowest-color: hsl(0 0% 4%); + --cru-surface-container-low-color: hsl(0 0% 10%); + --cru-surface-container-color: hsl(0 0% 12%); + --cru-surface-container-high-color: hsl(0 0% 17%); + --cru-surface-container-highest-color: hsl(0 0% 22%); + --cru-surface-on-color: hsl(0 0% 90%); + --cru-surface-on-variant-color: hsl(0 0% 80%); + --cru-surface-outline-color: hsl(0 0% 60%); + --cru-surface-outline-variant-color: hsl(0 0% 30%); } } .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-key-color: var(--cru-primary-color); + --cru-key-on-color: var(--cru-primary-on-color); + --cru-key-container-color: var(--cru-primary-container-color); + --cru-key-on-container-color: var(--cru-primary-on-container-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-key-color: var(--cru-secondary-color); + --cru-key-on-color: var(--cru-secondary-on-color); + --cru-key-container-color: var(--cru-secondary-container-color); + --cru-key-on-container-color: var(--cru-secondary-on-container-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-key-color: var(--cru-tertiary-color); + --cru-key-on-color: var(--cru-tertiary-on-color); + --cru-key-container-color: var(--cru-tertiary-container-color); + --cru-key-on-container-color: var(--cru-tertiary-on-container-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-key-color: var(--cru-danger-color); + --cru-key-on-color: var(--cru-danger-on-color); + --cru-key-container-color: var(--cru-danger-container-color); + --cru-key-on-container-color: var(--cru-danger-on-container-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); + --cru-key-color: var(--cru-success-color); + --cru-key-on-color: var(--cru-success-on-color); + --cru-key-container-color: var(--cru-success-container-color); + --cru-key-on-container-color: var(--cru-success-on-container-color); } diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css index 28c16627..6cbc06b4 100644 --- a/FrontEnd/src/views/common/theme.css +++ b/FrontEnd/src/views/common/theme.css @@ -1,5 +1,36 @@ @import "./theme-color.css"; :root { + --cru-hover-lightness-change: 4%; + --cru-focus-lightness-change: 10%; + --cru-press-lightness-change: 10%; + --cru-drag-lightness-change: 15%; + + --cru-hover-darkness: calc(100% - var(--cru-hover-lightness-change)); + --cru-focus-darkness: calc(100% - var(--cru-focus-lightness-change)); + --cru-press-darkness: calc(100% - var(--cru-press-lightness-change)); + --cru-drag-darkness: calc(100% - var(--cru-drag-lightness-change)); + --cru-hover-brightness: calc(100% + var(--cru-hover-lightness-change)); + --cru-focus-brightness: calc(100% + var(--cru-focus-lightness-change)); + --cru-press-brightness: calc(100% + var(--cru-press-lightness-change)); + --cru-drag-brightness: calc(100% + var(--cru-drag-lightness-change)); +} + +/* +:hover { + filter: brightness(var(--cru-hover-darkness)); +} + +:focus { + filter: brightness(var(--cru-focus-darkness)); +} + +:active { + filter: brightness(var(--cru-press-darkness)); +} +*/ + +:root { + --cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --cru-card-border-radius: 8px; } \ No newline at end of file -- cgit v1.2.3