tsai
/
vue-vben-admin
mirror of https://github.com/vbenjs/vue-vben-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

perf: improve the dark theme

pull/3993/head
vince 2 years ago
parent
f95d9aa609
commit
cf16c7bdde
12 changed files with 123 additions and 198 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      internal/tailwind-config/src/index.ts
  2. 5
      packages/@core/hooks/src/use-namespace.ts
  3. 15
      packages/@core/shared/constants/src/global.ts
  4. 74
      packages/@core/shared/design/src/design-tokens/dark/index.css
  5. 126
      packages/@core/shared/design/src/design-tokens/default/index.css
  6. 11
      packages/@core/shared/design/src/scss/base.scss
  7. 44
      packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
  8. 9
      packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
  9. 9
      packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
  10. 11
      packages/@core/ui-kit/menu-ui/src/components/menu.vue
  11. 3
      packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
  12. 4
      packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue

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, '') : '';

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

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

Write Preview
Loading…
Cancel
Save