yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: improve the dark theme

pull/48/MERGE
vince 2024-07-15 23:59:22 +08:00
parent f95d9aa609
commit cf16c7bdde
12 changed files with 124 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
internal/tailwind-config/src/index.ts
View File

@ -27,8 +27,6 @@ packages.forEach((pkg) => {
const shadcnUiColors = { const shadcnUiColors = {
accent: { accent: {
DEFAULT: 'hsl(var(--accent))', DEFAULT: 'hsl(var(--accent))',
dark: 'hsl(var(--accent-dark))',
'dark-hover': 'hsl(var(--accent-dark-hover))',
foreground: 'hsl(var(--accent-foreground))', foreground: 'hsl(var(--accent-foreground))',
hover: 'hsl(var(--accent-hover))', hover: 'hsl(var(--accent-hover))',
}, },
@ -38,7 +36,6 @@ const shadcnUiColors = {
}, },
border: { border: {
DEFAULT: 'hsl(var(--border))', DEFAULT: 'hsl(var(--border))',
dark: 'hsl(var(--border-dark))',
}, },
card: { card: {
DEFAULT: 'hsl(var(--card))', DEFAULT: 'hsl(var(--card))',
@ -51,7 +48,6 @@ const shadcnUiColors = {
foreground: { foreground: {
DEFAULT: 'hsl(var(--foreground))', DEFAULT: 'hsl(var(--foreground))',
dark: 'hsl(var(--foreground-dark))',
}, },
input: { input: {
@ -99,6 +95,10 @@ const customColors = {
...createColorsPalette('red'), ...createColorsPalette('red'),
foreground: 'hsl(var(--destructive-foreground))', foreground: 'hsl(var(--destructive-foreground))',
}, },
sidebar: {
DEFAULT: 'hsl(var(--sidebar))',
deep: 'hsl(var(--sidebar-deep))',
},
success: { success: {
...createColorsPalette('success'), ...createColorsPalette('success'),
DEFAULT: 'hsl(var(--success))', DEFAULT: 'hsl(var(--success))',
@ -120,7 +120,7 @@ export default {
path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}'), path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}'),
), ),
], ],
darkMode: 'class', darkMode: 'selector',
plugins: [ plugins: [
animate, animate,
formsPlugin, formsPlugin,

5
packages/@core/hooks/src/use-namespace.ts
View File

@ -1,8 +1,9 @@
import { DEFAULT_NAMESPACE } from '@vben-core/constants';
/** /**
* @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts
*/ */
export const defaultNamespace = 'vben';
const statePrefix = 'is-'; const statePrefix = 'is-';
const _bem = ( const _bem = (
@ -35,7 +36,7 @@ const is: {
}; };
const useNamespace = (block: string) => { const useNamespace = (block: string) => {
const namespace = defaultNamespace; const namespace = DEFAULT_NAMESPACE;
const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', ''); const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', '');
const e = (element?: string) => const e = (element?: string) =>
element ? _bem(namespace, block, '', element, '') : ''; element ? _bem(namespace, block, '', element, '') : '';

17
packages/@core/shared/constants/src/global.ts
View File

@ -1,15 +1,12 @@
// --vben-content-client-height
/**
* @zh_CN CSS 变量前缀
* @en_US CSS variable prefix
*/
const CSS_VARIABLE_PREFIX = '--vben';
/** /**
* @zh_CN 布局内容高度 css变量 * @zh_CN 布局内容高度 css变量
* @en_US Layout content height * @en_US Layout content height
*/ */
const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `${CSS_VARIABLE_PREFIX}-content-height`; const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;
export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, CSS_VARIABLE_PREFIX }; /**
* @zh_CN 默认命名空间
*/
const DEFAULT_NAMESPACE = 'vben';
export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, DEFAULT_NAMESPACE };

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

@ -1,6 +1,6 @@
:root.dark, .dark,
:root.dark[data-theme='custom'], .dark[data-theme='custom'],
:root.dark[data-theme='default'] { .dark[data-theme='default'] {
/* Default background color of <body />...etc */ /* Default background color of <body />...etc */
--background: 222.34deg 10.43% 12.27%; --background: 222.34deg 10.43% 12.27%;
@ -85,10 +85,14 @@
/* =============component & UI============= */ /* =============component & UI============= */
--sidebar: 222.34deg 10.43% 12.27%;
--sidebar-deep: 220deg 13.06% 9%;
color-scheme: dark; color-scheme: dark;
} }
:root.dark[data-theme='violet'] { .dark[data-theme='violet'],
[data-theme='violet'] .dark {
--background: 224 71.4% 4.1%; --background: 224 71.4% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 210 20% 98%; --foreground: 210 20% 98%;
@ -108,9 +112,12 @@
--border: 215 27.9% 16.9%; --border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%; --input: 215 27.9% 16.9%;
--ring: 263.4 70% 50.4%; --ring: 263.4 70% 50.4%;
--sidebar: 224 71.4% 4.1%;
--sidebar-deep: 224 71.4% 4.1%;
} }
:root.dark[data-theme='pink'] { .dark[data-theme='pink'],
[data-theme='pink'] .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 0 0% 95%; --foreground: 0 0% 95%;
@ -130,9 +137,12 @@
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
--ring: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
} }
:root.dark[data-theme='rose'] { .dark[data-theme='rose'],
[data-theme='rose'] .dark {
--background: 0 0% 3.9%; --background: 0 0% 3.9%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
@ -152,9 +162,12 @@
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
--input: 0 0% 14.9%; --input: 0 0% 14.9%;
--ring: 0 72.2% 50.6%; --ring: 0 72.2% 50.6%;
--sidebar: 0 0% 3.9%;
--sidebar-deep: 0 0% 3.9%;
} }
:root.dark[data-theme='sky-blue'] { .dark[data-theme='sky-blue'],
[data-theme='sky-blue'] .dark {
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
@ -174,9 +187,12 @@
--border: 217.2 32.6% 17.5%; --border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%; --ring: 224.3 76.3% 48%;
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
} }
:root.dark[data-theme='deep-blue'] { .dark[data-theme='deep-blue'],
[data-theme='deep-blue'] .dark {
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
@ -196,9 +212,12 @@
--border: 217.2 32.6% 17.5%; --border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%; --ring: 224.3 76.3% 48%;
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
} }
:root.dark[data-theme='green'] { .dark[data-theme='green'],
[data-theme='green'] .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 0 0% 95%; --foreground: 0 0% 95%;
@ -218,9 +237,12 @@
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
--ring: 142.4 71.8% 29.2%; --ring: 142.4 71.8% 29.2%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
} }
:root.dark[data-theme='deep-green'] { .dark[data-theme='deep-green'],
[data-theme='deep-green'] .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 0 0% 95%; --foreground: 0 0% 95%;
@ -240,9 +262,12 @@
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
--ring: 142.4 71.8% 29.2%; --ring: 142.4 71.8% 29.2%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
} }
:root.dark[data-theme='orange'] { .dark[data-theme='orange'],
[data-theme='orange'] .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 60 9.1% 97.8%; --foreground: 60 9.1% 97.8%;
@ -262,9 +287,12 @@
--border: 12 6.5% 15.1%; --border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%; --input: 12 6.5% 15.1%;
--ring: 20.5 90.2% 48.2%; --ring: 20.5 90.2% 48.2%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
} }
:root.dark[data-theme='yellow'] { .dark[data-theme='yellow'],
[data-theme='yellow'] .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 60 9.1% 97.8%; --foreground: 60 9.1% 97.8%;
@ -284,9 +312,12 @@
--border: 12 6.5% 15.1%; --border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%; --input: 12 6.5% 15.1%;
--ring: 35.5 91.7% 32.9%; --ring: 35.5 91.7% 32.9%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
} }
:root.dark[data-theme='zinc'] { .dark[data-theme='zinc'],
[data-theme='zinc'] .dark {
--background: 240 10% 3.9%; --background: 240 10% 3.9%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
@ -306,9 +337,12 @@
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%; --ring: 240 4.9% 83.9%;
--sidebar: 240 10% 3.9%;
--sidebar-deep: 240 10% 3.9%;
} }
:root.dark[data-theme='neutral'] { .dark[data-theme='neutral'],
[data-theme='neutral'] .dark {
--background: 0 0% 3.9%; --background: 0 0% 3.9%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
@ -328,9 +362,12 @@
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
--input: 0 0% 14.9%; --input: 0 0% 14.9%;
--ring: 0 0% 83.1%; --ring: 0 0% 83.1%;
--sidebar: 0 0% 3.9%;
--sidebar-deep: 0 0% 3.9%;
} }
:root.dark[data-theme='slate'] { .dark[data-theme='slate'],
[data-theme='slate'] .dark {
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
@ -350,9 +387,12 @@
--border: 217.2 32.6% 17.5%; --border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9; --ring: 212.7 26.8% 83.9;
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
} }
:root.dark[data-theme='gray'] { .dark[data-theme='gray'],
[data-theme='gray'] .dark {
--background: 224 71.4% 4.1%; --background: 224 71.4% 4.1%;
--background-content: var(--background); --background-content: var(--background);
--foreground: 210 20% 98%; --foreground: 210 20% 98%;
@ -372,4 +412,6 @@
--border: 215 27.9% 16.9%; --border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%; --input: 215 27.9% 16.9%;
--ring: 216 12.2% 83.9%; --ring: 216 12.2% 83.9%;
--sidebar: 224 71.4% 4.1%;
--sidebar-deep: 224 71.4% 4.1%;
} }

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

@ -1,8 +1,8 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root { :root {
--font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI', --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
'Segoe UI Symbol'; 'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;
/* Default background color of <body />...etc */ /* Default background color of <body />...etc */
--background: 0 0 100%; --background: 0 0 100%;
@ -85,27 +85,17 @@
/* 登录背景色 */ /* 登录背景色 */
--authentication: 231deg 61% 44%; --authentication: 231deg 61% 44%;
/* 用于浅色主题下一些暗色主题的颜色 */
--accent-dark-hover: 0deg 0% 100% / 12%;
--foreground-dark: 220 13% 91%;
--accent-dark: 0deg 0% 100% / 8%;
--border-dark: 240 3.7% 15.9%;
/* =============component & UI============= */ /* =============component & UI============= */
/* menu */ /* menu */
--menu: 0deg 0% 100%; --sidebar: 0 0% 100%;
--menu-deep: 210 11.11% 96.47%; --sidebar-deep: 210 11.11% 96.47%;
/* menu-dark */
--menu-dark: 222.34deg 10.43% 12.27%;
--menu-dark-deep: 220deg 13.06% 9%;
accent-color: var(--primary); accent-color: var(--primary);
color-scheme: light; color-scheme: light;
} }
:root[data-theme='violet'] { [data-theme='violet'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%; --foreground: 224 71.4% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -124,15 +114,9 @@
--border: 220 13% 91%; --border: 220 13% 91%;
--input: 220 13% 91%; --input: 220 13% 91%;
--ring: 262.1 83.3% 57.8%; --ring: 262.1 83.3% 57.8%;
/* menu-dark */
--menu-dark: 224 71.4% 4.1%;
--menu-dark-deep: 224 71.4% 4.1%;
--border-dark: 215 27.9% 16.9%;
--foreground-dark: 210 20% 98%;
} }
:root[data-theme='pink'] { [data-theme='pink'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -151,15 +135,9 @@
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%;
/* menu-dark */
--menu-dark: 20 14.3% 4.1%;
--menu-dark-deep: 20 14.3% 4.1%;
--border-dark: 240 3.7% 15.9%;
--foreground-dark: 0 0% 95%;
} }
:root[data-theme='rose'] { [data-theme='rose'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -178,15 +156,9 @@
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%;
/* menu-dark */
--menu-dark: 0 0% 3.9%;
--menu-dark-deep: 0 0% 3.9%;
--border-dark: 0 0% 14.9%;
--foreground-dark: 0 0% 98%;
} }
:root[data-theme='sky-blue'] { [data-theme='sky-blue'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -205,15 +177,9 @@
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%; --ring: 221.2 83.2% 53.3%;
/* menu-dark */
--menu-dark: 222.2 84% 4.9%;
--menu-dark-deep: 222.2 84% 4.9%;
--border-dark: 217.2 32.6% 17.5%;
--foreground-dark: 210 40% 98%;
} }
:root[data-theme='deep-blue'] { [data-theme='deep-blue'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -232,15 +198,9 @@
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%; --ring: 221.2 83.2% 53.3%;
/* menu-dark */
--menu-dark: 222.2 84% 4.9%;
--menu-dark-deep: 222.2 84% 4.9%;
--border-dark: 217.2 32.6% 17.5%;
--foreground-dark: 210 40% 98%;
} }
:root[data-theme='green'] { [data-theme='green'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -259,15 +219,9 @@
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 142.1 76.2% 36.3%; --ring: 142.1 76.2% 36.3%;
/* menu-dark */
--menu-dark: 20 14.3% 4.1%;
--menu-dark-deep: 20 14.3% 4.1%;
--border-dark: 240 3.7% 15.9%;
--foreground-dark: 0 0% 95%;
} }
:root[data-theme='deep-green'] { [data-theme='deep-green'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -286,15 +240,9 @@
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 142.1 76.2% 36.3%; --ring: 142.1 76.2% 36.3%;
/* menu-dark */
--menu-dark: 20 14.3% 4.1%;
--menu-dark-deep: 20 14.3% 4.1%;
--border-dark: 240 3.7% 15.9%;
--foreground-dark: 0 0% 95%;
} }
:root[data-theme='orange'] { [data-theme='orange'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%; --foreground: 20 14.3% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -313,15 +261,9 @@
--border: 20 5.9% 90%; --border: 20 5.9% 90%;
--input: 20 5.9% 90%; --input: 20 5.9% 90%;
--ring: 24.6 95% 53.1%; --ring: 24.6 95% 53.1%;
/* menu-dark */
--menu-dark: 20 14.3% 4.1%;
--menu-dark-deep: 20 14.3% 4.1%;
--border-dark: 12 6.5% 15.1%;
--foreground-dark: 60 9.1% 97.8%;
} }
:root[data-theme='yellow'] { [data-theme='yellow'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%; --foreground: 20 14.3% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -340,15 +282,9 @@
--border: 20 5.9% 90%; --border: 20 5.9% 90%;
--input: 20 5.9% 90%; --input: 20 5.9% 90%;
--ring: 20 14.3% 4.1%; --ring: 20 14.3% 4.1%;
/* menu-dark */
--menu-dark: 20 14.3% 4.1%;
--menu-dark-deep: 20 14.3% 4.1%;
--border-dark: 12 6.5% 15.1%;
--foreground-dark: 60 9.1% 97.8%;
} }
:root[data-theme='zinc'] { [data-theme='zinc'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -367,15 +303,9 @@
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 240 5.9% 10%; --ring: 240 5.9% 10%;
/* menu-dark */
--menu-dark: 240 10% 3.9%;
--menu-dark-deep: 240 10% 3.9%;
--border-dark: 240 3.7% 15.9%;
--foreground-dark: 0 0% 98%;
} }
:root[data-theme='neutral'] { [data-theme='neutral'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 0 0% 3.9%; --foreground: 0 0% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -394,15 +324,9 @@
--border: 0 0% 89.8%; --border: 0 0% 89.8%;
--input: 0 0% 89.8%; --input: 0 0% 89.8%;
--ring: 0 0% 3.9%; --ring: 0 0% 3.9%;
/* menu-dark */
--menu-dark: 0 0% 3.9%;
--menu-dark-deep: 0 0% 3.9%;
--border-dark: 0 0% 14.9%;
--foreground-dark: 0 0% 98%;
} }
:root[data-theme='slate'] { [data-theme='slate'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -421,15 +345,9 @@
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
/* menu-dark */
--menu-dark: 222.2 84% 4.9%;
--menu-dark-deep: 222.2 84% 4.9%;
--border-dark: 217.2 32.6% 17.5%;
--foreground-dark: 210 40% 98%;
} }
:root[data-theme='gray'] { [data-theme='gray'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%; --foreground: 224 71.4% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
@ -448,10 +366,4 @@
--border: 220 13% 91%; --border: 220 13% 91%;
--input: 220 13% 91%; --input: 220 13% 91%;
--ring: 224 71.4% 4.1%; --ring: 224 71.4% 4.1%;
/* menu-dark */
--menu-dark: 224 71.4% 4.1%;
--menu-dark-deep: 224 71.4% 4.1%;
--border-dark: 215 27.9% 16.9%;
--foreground-dark: 210 20% 98%;
} }

11
packages/@core/shared/design/src/scss/base.scss
View File

@ -27,8 +27,9 @@ html.grayscale-mode {
html { html {
@apply text-foreground bg-background; @apply text-foreground bg-background;
// font-size: 62.5%; font-size: 100%;
font-variation-settings: normal; font-variation-settings: normal;
line-height: 1.15;
text-size-adjust: 100%; text-size-adjust: 100%;
font-synthesis-weight: none; font-synthesis-weight: none;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -36,12 +37,16 @@ html {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
body {
min-height: 100vh;
}
a, a,
a:active, a:active,
a:hover, a:hover,
a:link, a:link,
a:visited { a:visited {
// color: inherit; /* color: inherit; */
text-decoration: none; text-decoration: none;
} }
@ -69,7 +74,7 @@ html.dark::view-transition-new(root) {
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
// color: hsl(var(--color-input-placeholder)) !important; /* color: hsl(var(--color-input-placeholder)) !important; */
opacity: 1; opacity: 1;
} }

44
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@ -107,13 +107,11 @@ const asideRef = shallowRef<HTMLDivElement | null>();
const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true)); const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
const isDark = computed(() => props.theme === 'dark');
const style = computed((): CSSProperties => { const style = computed((): CSSProperties => {
const { isSidebarMixed, paddingTop, zIndex } = props; const { isSidebarMixed, paddingTop, zIndex } = props;
return { return {
'--scroll-shadow': isDark.value ? 'var(--menu-dark)' : 'var(--menu)', '--scroll-shadow': 'var(--sidebar)',
...calcMenuWidthStyle(false), ...calcMenuWidthStyle(false),
paddingTop: `${paddingTop}px`, paddingTop: `${paddingTop}px`,
zIndex, zIndex,
@ -124,12 +122,7 @@ const style = computed((): CSSProperties => {
const extraStyle = computed((): CSSProperties => { const extraStyle = computed((): CSSProperties => {
const { extraWidth, show, width, zIndex } = props; const { extraWidth, show, width, zIndex } = props;
const backgroundColor = isDark.value
? 'hsl(var(--menu-dark))'
: 'hsl(var(--menu))';
return { return {
backgroundColor,
left: `${width}px`, left: `${width}px`,
width: extraVisible.value && show ? `${extraWidth}px` : 0, width: extraVisible.value && show ? `${extraWidth}px` : 0,
zIndex, zIndex,
@ -175,7 +168,6 @@ const headerStyle = computed((): CSSProperties => {
const extraContentStyle = computed((): CSSProperties => { const extraContentStyle = computed((): CSSProperties => {
const { collapseHeight, headerHeight } = props; const { collapseHeight, headerHeight } = props;
return { return {
color: 'red',
height: `calc(100% - ${headerHeight + collapseHeight}px)`, height: `calc(100% - ${headerHeight + collapseHeight}px)`,
}; };
}); });
@ -203,21 +195,8 @@ function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
widthValue = `${collapseWidth}px`; widthValue = `${collapseWidth}px`;
} }
let backgroundColor = '';
if (isDark.value) {
backgroundColor = isSidebarMixed
? 'hsl(var(--menu-dark-deep))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixed
? 'hsl(var(--menu-deep))'
: 'hsl(var(--menu))';
}
return { return {
...(widthValue === '0px' ? { overflow: 'hidden' } : {}), ...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
backgroundColor,
flex: `0 0 ${widthValue}`, flex: `0 0 ${widthValue}`,
marginLeft: show ? 0 : `-${widthValue}`, marginLeft: show ? 0 : `-${widthValue}`,
maxWidth: widthValue, maxWidth: widthValue,
@ -252,20 +231,26 @@ function handleMouseleave() {
<template> <template>
<div <div
v-if="domVisible" v-if="domVisible"
:class="theme"
:style="hiddenSideStyle" :style="hiddenSideStyle"
class="h-full transition-all duration-200" class="h-full transition-all duration-200"
></div> ></div>
<aside <aside
:data-theme="theme" :class="[
theme,
{
'bg-sidebar-deep': isSidebarMixed,
'bg-sidebar': !isSidebarMixed,
},
]"
:style="style" :style="style"
class="data-[theme=dark]:border-border-dark border-border fixed left-0 top-0 h-full border-r transition-all duration-200" class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave"
> >
<SidebarFixedButton <SidebarFixedButton
v-if="!collapse && !isSidebarMixed" v-if="!collapse && !isSidebarMixed"
v-model:expand-on-hover="expandOnHover" v-model:expand-on-hover="expandOnHover"
:theme="theme"
/> />
<div v-if="slots.logo" :style="headerStyle"> <div v-if="slots.logo" :style="headerStyle">
<slot name="logo"></slot> <slot name="logo"></slot>
@ -278,33 +263,28 @@ function handleMouseleave() {
<SidebarCollapseButton <SidebarCollapseButton
v-if="showCollapseButton && !isSidebarMixed" v-if="showCollapseButton && !isSidebarMixed"
v-model:collapsed="collapse" v-model:collapsed="collapse"
:theme="theme"
/> />
<div <div
v-if="isSidebarMixed" v-if="isSidebarMixed"
ref="asideRef" ref="asideRef"
:data-theme="theme"
:style="extraStyle" :style="extraStyle"
class="data-[theme=dark]:border-border-dark border-border fixed top-0 h-full overflow-hidden border-x transition-all duration-200" class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
> >
<SidebarCollapseButton <SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover" v-if="isSidebarMixed && expandOnHover"
v-model:collapsed="extraCollapse" v-model:collapsed="extraCollapse"
:theme="theme"
/> />
<SidebarFixedButton <SidebarFixedButton
v-if="!extraCollapse" v-if="!extraCollapse"
v-model:expand-on-hover="expandOnHover" v-model:expand-on-hover="expandOnHover"
:theme="theme"
/> />
<div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2"> <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
<slot name="extra-title"></slot> <slot name="extra-title"></slot>
</div> </div>
<VbenScrollbar <VbenScrollbar
:data-theme="theme"
:style="extraContentStyle" :style="extraContentStyle"
class="data-[theme=dark]:border-border-dark border-border border-t py-2" class="border-border border-t py-2"
shadow shadow
> >
<slot name="extra"></slot> <slot name="extra"></slot>

9
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@ -1,12 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons'; import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
interface Props {
theme: string;
}
defineProps<Props>();
const collapsed = defineModel<boolean>('collapsed'); const collapsed = defineModel<boolean>('collapsed');
function handleCollapsed() { function handleCollapsed() {
@ -16,8 +10,7 @@ function handleCollapsed() {
<template> <template>
<div <div
:data-theme="theme" class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click.stop="handleCollapsed" @click.stop="handleCollapsed"
> >
<MdiMenuClose v-if="collapsed" /> <MdiMenuClose v-if="collapsed" />

9
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@ -1,12 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { MdiPin, MdiPinOff } from '@vben-core/icons'; import { MdiPin, MdiPinOff } from '@vben-core/icons';
interface Props {
theme: string;
}
defineProps<Props>();
const expandOnHover = defineModel<boolean>('expandOnHover'); const expandOnHover = defineModel<boolean>('expandOnHover');
function toggleFixed() { function toggleFixed() {
@ -16,8 +10,7 @@ function toggleFixed() {
<template> <template>
<div <div
:data-theme="theme" class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click="toggleFixed" @click="toggleFixed"
> >
<MdiPinOff v-if="!expandOnHover" /> <MdiPinOff v-if="!expandOnHover" />

11
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@ -322,6 +322,7 @@ function removeMenuItem(item: MenuItemRegistered) {
<ul <ul
ref="menu" ref="menu"
:class="[ :class="[
theme,
b(), b(),
is(mode, true), is(mode, true),
is(theme, true), is(theme, true),
@ -427,7 +428,7 @@ $namespace: vben;
--menu-item-padding-x: 12px; --menu-item-padding-x: 12px;
--menu-item-popup-padding-y: 20px; --menu-item-popup-padding-y: 20px;
--menu-item-popup-padding-x: 12px; --menu-item-popup-padding-x: 12px;
--menu-item-margin-y: 4px; --menu-item-margin-y: 3px;
--menu-item-margin-x: 0px; --menu-item-margin-x: 0px;
--menu-item-collapse-padding-y: 25px; --menu-item-collapse-padding-y: 25px;
--menu-item-collapse-padding-x: 0px; --menu-item-collapse-padding-x: 0px;
@ -443,14 +444,14 @@ $namespace: vben;
--menu-background-color: hsl(var(--menu-dark)); --menu-background-color: hsl(var(--menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark)); // --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color); --menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground-dark) / 80%); --menu-item-color: hsl(var(--foreground) / 80%);
--menu-item-hover-color: hsl(var(--primary-foreground)); --menu-item-hover-color: hsl(var(--primary-foreground));
--menu-item-hover-background-color: hsl(var(--menu-dark-background)); --menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--foreground-dark)); --menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background)); --menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-color: hsl(var(--foreground-dark)); --menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background)); --menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--foreground-dark)); --menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: transparent; --menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color); --menu-submenu-background-color: var(--menu-background-color);
} }

3
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@ -38,6 +38,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
<template> <template>
<ul <ul
:class="[ :class="[
theme,
b(), b(),
is('collapse', collapse), is('collapse', collapse),
is(theme, true), is(theme, true),
@ -77,7 +78,7 @@ $namespace: vben;
&.is-dark { &.is-dark {
.#{$namespace}-normal-menu__item { .#{$namespace}-normal-menu__item {
color: hsl(var(--foreground-dark) / 80%); color: hsl(var(--foreground) / 80%);
&:not(.is-active):hover { &:not(.is-active):hover {
color: hsl(var(--primary-foreground)); color: hsl(var(--primary-foreground));

4
packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
View File

@ -51,7 +51,7 @@ const logoClass = computed(() => {
</script> </script>
<template> <template>
<div :class="logoClass" class="group flex h-full items-center text-lg"> <div :class="logoClass" class="flex h-full items-center text-lg">
<a <a
:class="$attrs.class" :class="$attrs.class"
:href="href" :href="href"
@ -66,7 +66,7 @@ const logoClass = computed(() => {
/> />
<span <span
v-if="!collapse" v-if="!collapse"
class="text-primary group-[.dark]:text-foreground-dark truncate text-nowrap" class="text-primary dark:text-foreground truncate text-nowrap"
> >
{{ text }} {{ text }}
</span> </span>