by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update css

Browse Source
This commit is contained in:
vben
2024-06-23 14:21:27 +08:00
parent 6f0c05dd50
commit 26b8c6ef27
49 changed files with 401 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/@core/shared/design-tokens/src/dark/index.css
View File

@@ -1,76 +1,68 @@
:root.dark {
/* 基础背景颜色颜色 */
/* Default background color of <body />...etc */
--background: 220deg 13.04% 8%;
--foreground: 220 13% 91%;
--color-background: 220deg 13.04% 8%;
/* Background color for <Card /> */
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
/* 基础文本颜色 */
--color-foreground: 220 13% 91%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 222.86deg 8.43% 16.27%;
--popover-foreground: 210 40% 98%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 220deg 6.82% 17.25%;
--muted-foreground: 215 20.2% 65.1%;
/* 主题颜色 */
--color-primary: 211 91% 39%;
--primary: 211 91% 39%;
--primary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-primary-foreground: 0 0 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 63% 31%;
--destructive-foreground: 0 0 98%;
/* Used for success actions such as <message> */
--success: 144 57% 58%;
--success-foreground: 0 0 98%;
/* Used for warning actions such as <message> */
--warning: 42 84% 61%;
--warning-foreground: 0 0 98%;
/* 颜色次要 */
--color-secondary: 240 5% 17%;
--secondary: 240 5% 17%;
--secondary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-secondary-foreground: 0 0 98%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 0deg 0% 100% / 8%;
--accent-hover: 0deg 0% 100% / 12%;
--accent-foreground: 0 0 98%;
/* 次要文本颜色 */
--color-secondary-desc: 210 12.16% 70.98%;
/* Darker color */
--heavy: 0deg 0% 100% / 12%;
--heavy-foreground: var(--accent-foreground);
/* 普通颜色 */
/* Default border color */
--border: 0deg 0% 100% / 10%;
/* --color-accent: 240 3.7% 15.9%; */
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;
--input-placeholder: 218deg 11% 65%;
--input-background: 0deg 0% 100% / 5%;
/* --color-accent: 220deg 7.32% 16.08%; */
--color-accent: 0deg 0% 100% / 8%;
--color-accent-hover: 0deg 0% 100% / 12%;
/* 普通颜色前景色，如按钮文本颜色 */
--color-accent-foreground: 0 0 98%;
/* 破坏性颜色 */
--color-destructive: 0 63% 31%;
/* 破坏性颜色 */
--color-destructive-foreground: 0 86% 97%;
--color-muted: 220deg 6.82% 17.25%;
--color-muted-foreground: 215 20.2% 65.1%;
--color-heavy: 0deg 0% 100% / 12%;
--color-heavy-foreground: var(--color-accent-foreground);
/* 基础边框色 */
--color-border: 0deg 0% 100% / 10%;
/* --color-popover: 240 4% 29%; */
--color-popover: 222.86deg 8.43% 16.27%;
--color-popover-foreground: 210 40% 98%;
--color-card: 222.2 84% 4.9%;
--color-card-foreground: 210 40% 98%;
/* 基础文本边框色 */
--color-input: 0deg 0% 100% / 10%;
/* input placeholder 颜色 */
--color-input-placeholder: 218deg 11% 65%;
/* 基础文本背景色 */
/* --color-input-background: 216deg 5.38% 18.24%; */
--color-input-background: 0deg 0% 100% / 5%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 遮罩颜色 */
--color-overlay: 0deg 0% 0% / 40%;
--color-ring: 222.2 84% 4.9%;
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius-base: 0.5rem;
--radius: 0.5rem;
color-scheme: dark;
}

116
packages/@core/shared/design-tokens/src/default/index.css
View File

@@ -1,86 +1,86 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root {
--color-background: 0 0 100%;
/* Default background color of <body />...etc */
--background: 0 0 100%;
--foreground: 210 6% 21%;
/* 基础文本颜色 */
--color-foreground: 210 6% 21%;
/* Background color for <Card /> */
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
/* 主题颜色 */
--color-primary: 211 91% 39%;
--primary: 211 91% 39%;
--primary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-primary-foreground: 0 0 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 78% 68%;
--destructive-foreground: 0 0 98%;
/* 颜色次要 */
--color-secondary: 240 5% 96%;
/* Used for success actions such as <message> */
--success: 144 57% 58%;
--success-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-secondary-foreground: 240 6% 10%;
/* Used for warning actions such as <message> */
--warning: 42 84% 61%;
--warning-foreground: 0 0 98%;
/* 次要文本颜色 */
--color-secondary-desc: 216.4 16.09% 34.12%;
/* Secondary colors for <Button /> */
--secondary: 240 5% 96%;
--secondary-foreground: 240 6% 10%;
/* 普通颜色 */
--color-accent: 240 5% 96%;
--color-accent-hover: 200deg 10% 90%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 240 5% 96%;
--accent-hover: 200deg 10% 90%;
--accent-foreground: 240 6% 10%;
/* 普通颜色前景色，如按钮文本颜色 */
--color-accent-foreground: 240 6% 10%;
/* Darker color */
--heavy: 192deg 9.43% 89.61%;
--heavy-foreground: var(--accent-foreground);
/* 破坏性颜色 */
--color-destructive: 0 77.78% 68.24%;
/* Default border color */
--border: 240 6% 90%;
/* 破坏性颜色 */
--color-destructive-foreground: 0 0 98%;
--color-muted: 210 40% 96.1%;
--color-muted-foreground: 215.4 16.3% 46.9%;
--color-heavy: 192deg 9.43% 89.61%;
--color-heavy-foreground: var(--color-accent-foreground);
--color-popover: 0 0% 100%;
--color-popover-foreground: 222.2 84% 4.9%;
--color-card: 0 0% 100%;
--color-card-foreground: 222.2 84% 4.9%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0 100%;
/* 基础边框色 */
--color-border: 240 6% 90%;
/* 基础文本边框色 */
--color-input: 240deg 5.88% 90%;
/* input placeholder 颜色 */
--color-input-placeholder: 217 10.6% 65%;
/* 基础文本背景色 */
--color-input-background: 0 0 100%;
--color-ring: 222.2 84% 4.9%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 遮罩颜色 */
--color-overlay: 0deg 0% 0% / 40%;
/* dark */
--color-dark-foreground: 220 13% 91%;
--color-dark-border: 0deg 0% 100% / 10%;
--color-dark-accent: 0deg 0% 100% / 8%;
--color-dark-accent-hover: 0deg 0% 100% / 12%;
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius-base: 0.5rem;
/* Border radius for card, input and buttons */
--radius: 0.5rem;
/* ======================================== */
/* 用于浅色主题下一些暗色主题的颜色 */
--dark-foreground: 220 13% 91%;
--dark-border: 0deg 0% 100% / 10%;
--dark-accent: 0deg 0% 100% / 8%;
--dark-accent-hover: 0deg 0% 100% / 12%;
/* =============component & UI============= */
/* ======================================== */
/* menu */
--color-menu-dark: 225deg 12% 13%;
--color-menu-dark-darken: 223deg 11% 10%;
--color-menu: 0deg 0% 100%;
--color-menu-darken: 0deg 0% 95%;
--menu: 0deg 0% 100%;
--menu-darken: 0deg 0% 95%;
accent-color: var(--color-primary);
/* menu-dark */
--menu-dark: 225deg 12% 13%;
--menu-dark-darken: 223deg 11% 10%;
accent-color: var(--primary);
color-scheme: light;
}