diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts index 620e2552..0cbe5745 100644 --- a/internal/tailwind-config/src/index.ts +++ b/internal/tailwind-config/src/index.ts @@ -27,8 +27,6 @@ packages.forEach((pkg) => { const shadcnUiColors = { accent: { DEFAULT: 'hsl(var(--accent))', - dark: 'hsl(var(--accent-dark))', - 'dark-hover': 'hsl(var(--accent-dark-hover))', foreground: 'hsl(var(--accent-foreground))', hover: 'hsl(var(--accent-hover))', }, @@ -38,7 +36,6 @@ const shadcnUiColors = { }, border: { DEFAULT: 'hsl(var(--border))', - dark: 'hsl(var(--border-dark))', }, card: { DEFAULT: 'hsl(var(--card))', @@ -51,7 +48,6 @@ const shadcnUiColors = { foreground: { DEFAULT: 'hsl(var(--foreground))', - dark: 'hsl(var(--foreground-dark))', }, input: { @@ -99,6 +95,10 @@ const customColors = { ...createColorsPalette('red'), foreground: 'hsl(var(--destructive-foreground))', }, + sidebar: { + DEFAULT: 'hsl(var(--sidebar))', + deep: 'hsl(var(--sidebar-deep))', + }, success: { ...createColorsPalette('success'), DEFAULT: 'hsl(var(--success))', @@ -120,7 +120,7 @@ export default { path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}'), ), ], - darkMode: 'class', + darkMode: 'selector', plugins: [ animate, formsPlugin, diff --git a/packages/@core/hooks/src/use-namespace.ts b/packages/@core/hooks/src/use-namespace.ts index 14c2ab2d..dcef60d0 100644 --- a/packages/@core/hooks/src/use-namespace.ts +++ b/packages/@core/hooks/src/use-namespace.ts @@ -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 */ -export const defaultNamespace = 'vben'; const statePrefix = 'is-'; const _bem = ( @@ -35,7 +36,7 @@ const is: { }; const useNamespace = (block: string) => { - const namespace = defaultNamespace; + const namespace = DEFAULT_NAMESPACE; const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', ''); const e = (element?: string) => element ? _bem(namespace, block, '', element, '') : ''; diff --git a/packages/@core/shared/constants/src/global.ts b/packages/@core/shared/constants/src/global.ts index 402b962d..e2d5ba93 100644 --- a/packages/@core/shared/constants/src/global.ts +++ b/packages/@core/shared/constants/src/global.ts @@ -1,15 +1,12 @@ -// --vben-content-client-height - -/** - * @zh_CN CSS 变量前缀 - * @en_US CSS variable prefix - */ -const CSS_VARIABLE_PREFIX = '--vben'; - /** * @zh_CN 布局内容高度 css变量 * @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 }; diff --git a/packages/@core/shared/design/src/design-tokens/dark/index.css b/packages/@core/shared/design/src/design-tokens/dark/index.css index 824d5570..ac395c97 100644 --- a/packages/@core/shared/design/src/design-tokens/dark/index.css +++ b/packages/@core/shared/design/src/design-tokens/dark/index.css @@ -1,6 +1,6 @@ -:root.dark, -:root.dark[data-theme='custom'], -:root.dark[data-theme='default'] { +.dark, +.dark[data-theme='custom'], +.dark[data-theme='default'] { /* Default background color of ...etc */ --background: 222.34deg 10.43% 12.27%; @@ -85,10 +85,14 @@ /* =============component & UI============= */ + --sidebar: 222.34deg 10.43% 12.27%; + --sidebar-deep: 220deg 13.06% 9%; + color-scheme: dark; } -:root.dark[data-theme='violet'] { +.dark[data-theme='violet'], +[data-theme='violet'] .dark { --background: 224 71.4% 4.1%; --background-content: var(--background); --foreground: 210 20% 98%; @@ -108,9 +112,12 @@ --border: 215 27.9% 16.9%; --input: 215 27.9% 16.9%; --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-content: var(--background); --foreground: 0 0% 95%; @@ -130,9 +137,12 @@ --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --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-content: var(--background); --foreground: 0 0% 98%; @@ -152,9 +162,12 @@ --border: 0 0% 14.9%; --input: 0 0% 14.9%; --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-content: var(--background); --foreground: 210 40% 98%; @@ -174,9 +187,12 @@ --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --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-content: var(--background); --foreground: 210 40% 98%; @@ -196,9 +212,12 @@ --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --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-content: var(--background); --foreground: 0 0% 95%; @@ -218,9 +237,12 @@ --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --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-content: var(--background); --foreground: 0 0% 95%; @@ -240,9 +262,12 @@ --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --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-content: var(--background); --foreground: 60 9.1% 97.8%; @@ -262,9 +287,12 @@ --border: 12 6.5% 15.1%; --input: 12 6.5% 15.1%; --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-content: var(--background); --foreground: 60 9.1% 97.8%; @@ -284,9 +312,12 @@ --border: 12 6.5% 15.1%; --input: 12 6.5% 15.1%; --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-content: var(--background); --foreground: 0 0% 98%; @@ -306,9 +337,12 @@ --border: 240 3.7% 15.9%; --input: 240 3.7% 15.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-content: var(--background); --foreground: 0 0% 98%; @@ -328,9 +362,12 @@ --border: 0 0% 14.9%; --input: 0 0% 14.9%; --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-content: var(--background); --foreground: 210 40% 98%; @@ -350,9 +387,12 @@ --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --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-content: var(--background); --foreground: 210 20% 98%; @@ -372,4 +412,6 @@ --border: 215 27.9% 16.9%; --input: 215 27.9% 16.9%; --ring: 216 12.2% 83.9%; + --sidebar: 224 71.4% 4.1%; + --sidebar-deep: 224 71.4% 4.1%; } diff --git a/packages/@core/shared/design/src/design-tokens/default/index.css b/packages/@core/shared/design/src/design-tokens/default/index.css index 442af6c5..e6d38f51 100644 --- a/packages/@core/shared/design/src/design-tokens/default/index.css +++ b/packages/@core/shared/design/src/design-tokens/default/index.css @@ -1,8 +1,8 @@ -/* https://gavin-yyc.github.io/colorconvert/ */ :root { - --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI', - roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol'; + --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont, + 'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui', + 'microsoft yahei', arial, 'hiragino sans', 'apple color emoji', + 'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif; /* Default background color of ...etc */ --background: 0 0 100%; @@ -85,27 +85,17 @@ /* 登录背景色 */ --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============= */ /* menu */ - --menu: 0deg 0% 100%; - --menu-deep: 210 11.11% 96.47%; - - /* menu-dark */ - --menu-dark: 222.34deg 10.43% 12.27%; - --menu-dark-deep: 220deg 13.06% 9%; + --sidebar: 0 0% 100%; + --sidebar-deep: 210 11.11% 96.47%; accent-color: var(--primary); color-scheme: light; } -:root[data-theme='violet'] { +[data-theme='violet'] { /* --background: 0 0% 100%; */ --foreground: 224 71.4% 4.1%; --card: 0 0% 100%; @@ -124,15 +114,9 @@ --border: 220 13% 91%; --input: 220 13% 91%; --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%; */ --foreground: 240 10% 3.9%; --card: 0 0% 100%; @@ -151,15 +135,9 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --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%; */ --foreground: 240 10% 3.9%; --card: 0 0% 100%; @@ -178,15 +156,9 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --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%; */ --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; @@ -205,15 +177,9 @@ --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --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%; */ --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; @@ -232,15 +198,9 @@ --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --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%; */ --foreground: 240 10% 3.9%; --card: 0 0% 100%; @@ -259,15 +219,9 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --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%; */ --foreground: 240 10% 3.9%; --card: 0 0% 100%; @@ -286,15 +240,9 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --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%; */ --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; @@ -313,15 +261,9 @@ --border: 20 5.9% 90%; --input: 20 5.9% 90%; --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%; */ --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; @@ -340,15 +282,9 @@ --border: 20 5.9% 90%; --input: 20 5.9% 90%; --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%; */ --foreground: 240 10% 3.9%; --card: 0 0% 100%; @@ -367,15 +303,9 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --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%; */ --foreground: 0 0% 3.9%; --card: 0 0% 100%; @@ -394,15 +324,9 @@ --border: 0 0% 89.8%; --input: 0 0% 89.8%; --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%; */ --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; @@ -421,15 +345,9 @@ --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --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%; */ --foreground: 224 71.4% 4.1%; --card: 0 0% 100%; @@ -448,10 +366,4 @@ --border: 220 13% 91%; --input: 220 13% 91%; --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%; } diff --git a/packages/@core/shared/design/src/scss/base.scss b/packages/@core/shared/design/src/scss/base.scss index 710ef63a..8844bcee 100644 --- a/packages/@core/shared/design/src/scss/base.scss +++ b/packages/@core/shared/design/src/scss/base.scss @@ -27,8 +27,9 @@ html.grayscale-mode { html { @apply text-foreground bg-background; - // font-size: 62.5%; + font-size: 100%; font-variation-settings: normal; + line-height: 1.15; text-size-adjust: 100%; font-synthesis-weight: none; scroll-behavior: smooth; @@ -36,12 +37,16 @@ html { -webkit-tap-highlight-color: transparent; } +body { + min-height: 100vh; +} + a, a:active, a:hover, a:link, a:visited { - // color: inherit; + /* color: inherit; */ text-decoration: none; } @@ -69,7 +74,7 @@ html.dark::view-transition-new(root) { input::placeholder, textarea::placeholder { - // color: hsl(var(--color-input-placeholder)) !important; + /* color: hsl(var(--color-input-placeholder)) !important; */ opacity: 1; } diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue index ec048f04..fed214ce 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue +++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue @@ -107,13 +107,11 @@ const asideRef = shallowRef(); const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true)); -const isDark = computed(() => props.theme === 'dark'); - const style = computed((): CSSProperties => { const { isSidebarMixed, paddingTop, zIndex } = props; return { - '--scroll-shadow': isDark.value ? 'var(--menu-dark)' : 'var(--menu)', + '--scroll-shadow': 'var(--sidebar)', ...calcMenuWidthStyle(false), paddingTop: `${paddingTop}px`, zIndex, @@ -124,12 +122,7 @@ const style = computed((): CSSProperties => { const extraStyle = computed((): CSSProperties => { const { extraWidth, show, width, zIndex } = props; - const backgroundColor = isDark.value - ? 'hsl(var(--menu-dark))' - : 'hsl(var(--menu))'; - return { - backgroundColor, left: `${width}px`, width: extraVisible.value && show ? `${extraWidth}px` : 0, zIndex, @@ -175,7 +168,6 @@ const headerStyle = computed((): CSSProperties => { const extraContentStyle = computed((): CSSProperties => { const { collapseHeight, headerHeight } = props; return { - color: 'red', height: `calc(100% - ${headerHeight + collapseHeight}px)`, }; }); @@ -203,21 +195,8 @@ function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties { 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 { ...(widthValue === '0px' ? { overflow: 'hidden' } : {}), - backgroundColor, flex: `0 0 ${widthValue}`, marginLeft: show ? 0 : `-${widthValue}`, maxWidth: widthValue, @@ -252,20 +231,26 @@ function handleMouseleave() {