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

perf: optimize interface color matching

Browse Source
This commit is contained in:
vince
2024-07-15 23:22:00 +08:00
parent b12266bb90
commit caf1fc4375
27 changed files with 270 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,17 +2,20 @@
:root.dark[data-theme='custom'],
:root.dark[data-theme='default'] {
/* Default background color of <body />...etc */
--background: 220deg 13.04% 8%;
--background: 222.34deg 10.43% 12.27%;
/* 主体区域背景色 */
--background-content: 220deg 13.06% 9%;
--foreground: 220 13% 91%;
/* Background color for <Card /> */
--card: 222.86deg 8.43% 16.27%;
--card: 222.34deg 10.43% 12.27%;
/* --card: 222.2 84% 4.9%; */
--card-foreground: 210 40% 98%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 222.86deg 8.43% 16.27%;
--popover: 222.82deg 8.43% 16.27%;
--popover-foreground: 210 40% 98%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
@@ -53,7 +56,7 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 0deg 0% 100% / 10%;
--border: 215 27.9% 16.9%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;
@@ -63,20 +66,25 @@
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 基本圆角大小 */
--radius: 0.5rem;
/* ============= Custom ============= */
/* 遮罩颜色 */
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius: 0.5rem;
/* 主体内容背景色 */
--content: 240 11% 96%;
/* 登录背景色 */
--authentication: 220deg 13.06% 3.04%;
/* =============component & UI============= */
/* authentication */
--authentication: 240deg 11% 2%;
color-scheme: dark;
}

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

@@ -5,7 +5,10 @@
'Segoe UI Symbol';
/* Default background color of <body />...etc */
--background: 0 0% 100%;
--background: 0 0 100%;
/* 主体区域背景色 */
--background-content: 210 11.11% 96.47%;
--foreground: 210 6% 21%;
/* Background color for <Card /> */
@@ -55,7 +58,7 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 240 6% 90%;
--border: 240 5.9% 90%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%;
@@ -65,14 +68,22 @@
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* Border radius for card, input and buttons */
--radius: 0.5rem;
/* ============= custom ============= */
/* 遮罩颜色 */
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* Border radius for card, input and buttons */
--radius: 0.5rem;
/* 主体内容背景色 */
--content: 240 11% 96%;
/* 登录背景色 */
--authentication: 231deg 61% 44%;
/* 用于浅色主题下一些暗色主题的颜色 */
--dark-foreground: 220 13% 91%;
@@ -82,23 +93,20 @@
/* =============component & UI============= */
/* authentication */
--authentication: 231deg 61% 44%;
/* menu */
--menu: 0deg 0% 100%;
--menu-darken: 0deg 0% 95%;
--menu-deep: 0deg 0% 95%;
/* menu-dark */
--menu-dark: 225deg 12% 13%;
--menu-dark-darken: 223deg 11% 10%;
--menu-dark: 222.34deg 10.43% 12.27%;
--menu-dark-deep: 223deg 11% 10%;
accent-color: var(--primary);
color-scheme: light;
}
:root[data-theme='violet'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
@@ -119,7 +127,7 @@
}
:root[data-theme='pink'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
@@ -140,7 +148,7 @@
}
:root[data-theme='rose'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
@@ -161,7 +169,7 @@
}
:root[data-theme='sky-blue'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
@@ -182,7 +190,7 @@
}
:root[data-theme='deep-blue'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
@@ -203,7 +211,7 @@
}
:root[data-theme='green'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
@@ -224,7 +232,7 @@
}
:root[data-theme='deep-green'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
@@ -245,7 +253,7 @@
}
:root[data-theme='orange'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
@@ -266,7 +274,7 @@
}
:root[data-theme='yellow'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
@@ -287,7 +295,7 @@
}
:root[data-theme='zinc'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
@@ -308,7 +316,7 @@
}
:root[data-theme='neutral'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
@@ -329,7 +337,7 @@
}
:root[data-theme='slate'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
@@ -350,7 +358,7 @@
}
:root[data-theme='gray'] {
--background: 0 0% 100%;
/* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;

4
packages/@core/shared/toolkit/package.json
View File

@@ -36,14 +36,14 @@
}
},
"dependencies": {
"@ant-design/colors": "^7.1.0",
"@ctrl/tinycolor": "^4.1.0",
"@vue/shared": "^3.4.31",
"clsx": "^2.1.1",
"defu": "^6.1.4",
"lodash.clonedeep": "^4.5.0",
"nprogress": "^0.2.0",
"tailwind-merge": "^2.4.0"
"tailwind-merge": "^2.4.0",
"theme-colors": "^0.1.0"
},
"devDependencies": {
"@types/lodash.clonedeep": "^4.5.9",

30
packages/@core/shared/toolkit/src/colorful/generator.ts
View File

@@ -1,35 +1,34 @@
import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import { getColors } from 'theme-colors';
import { convertToHslCssVar } from './convert';
export * from '@ant-design/colors';
interface Opts {
backgroundColor?: string;
theme?: 'dark' | 'default';
}
interface ColorItem {
alias?: string;
color: string;
name: string;
}
function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
function generatorColorVariables(colorItems: ColorItem[]) {
const colorVariables: Record<string, string> = {};
colorItems.forEach(({ alias, color, name }) => {
if (color) {
const colors = generate(color, opts);
let mainColor = colors[5];
colors.forEach((colorValue, colorIndex) => {
const colorsMap = getColors(new TinyColor(color).toHexString());
let mainColor = colorsMap['500'];
const colorKeys = Object.keys(colorsMap);
colorKeys.forEach((key) => {
const colorValue = colorsMap[key];
const hslColor = convertToHslCssVar(colorValue);
colorVariables[`--${name}-${colorIndex + 1}00`] = hslColor;
colorVariables[`--${name}-${key}`] = hslColor;
if (alias) {
colorVariables[`--${alias}-${colorIndex + 1}00`] = hslColor;
colorVariables[`--${alias}-${key}`] = hslColor;
}
if (colorIndex === 5) {
if (key === '500') {
mainColor = hslColor;
}
});
@@ -38,7 +37,6 @@ function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
}
}
});
return colorVariables;
}