From 5590cc8fa1f458197c3083c00d78ee5653ad0192 Mon Sep 17 00:00:00 2001 From: vben Date: Sun, 28 Jul 2024 17:01:19 +0800 Subject: [PATCH] chore: update theme --- apps/web-antd/src/app.vue | 4 +- .../src/views/demos/nested/menu-1.vue | 5 +- .../src/views/demos/nested/menu-2-1.vue | 5 +- .../src/views/demos/nested/menu-3-1.vue | 5 +- .../src/views/demos/nested/menu-3-2-1.vue | 5 +- internal/tailwind-config/src/index.ts | 2 +- .../src/design-tokens/default/index.css | 7 +- packages/effects/hooks/src/index.ts | 1 + .../effects/hooks/src/use-design-tokens.ts | 78 +++++++++++++++++++ .../preferences/blocks/theme/builtin.vue | 7 +- pnpm-lock.yaml | 18 ++--- website/.vitepress/config.mts | 13 ++++ website/package.json | 2 +- website/src/guide/in-depth/theme.md | 14 ++-- website/src/guide/introduction/quick-start.md | 2 +- 15 files changed, 124 insertions(+), 44 deletions(-) create mode 100644 packages/effects/hooks/src/use-design-tokens.ts diff --git a/apps/web-antd/src/app.vue b/apps/web-antd/src/app.vue index 7ffe37b48..39f319cb0 100644 --- a/apps/web-antd/src/app.vue +++ b/apps/web-antd/src/app.vue @@ -2,6 +2,7 @@ import { computed } from 'vue'; import { GlobalProvider } from '@vben/common-ui'; +import { useDesignTokens } from '@vben/hooks'; import { preferences, usePreferences } from '@vben/preferences'; import { App, ConfigProvider, theme } from 'ant-design-vue'; @@ -11,6 +12,7 @@ import { antdLocale } from '#/locales'; defineOptions({ name: 'App' }); const { isDark } = usePreferences(); +const { antDesignTokens } = useDesignTokens(); const tokenTheme = computed(() => { const algorithm = isDark.value @@ -24,7 +26,7 @@ const tokenTheme = computed(() => { return { algorithm, - token: { colorPrimary: preferences.theme.colorPrimary }, + token: antDesignTokens.value, }; }); diff --git a/apps/web-antd/src/views/demos/nested/menu-1.vue b/apps/web-antd/src/views/demos/nested/menu-1.vue index d1b16748c..f394930f2 100644 --- a/apps/web-antd/src/views/demos/nested/menu-1.vue +++ b/apps/web-antd/src/views/demos/nested/menu-1.vue @@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui'; diff --git a/apps/web-antd/src/views/demos/nested/menu-2-1.vue b/apps/web-antd/src/views/demos/nested/menu-2-1.vue index d1b16748c..f394930f2 100644 --- a/apps/web-antd/src/views/demos/nested/menu-2-1.vue +++ b/apps/web-antd/src/views/demos/nested/menu-2-1.vue @@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui'; diff --git a/apps/web-antd/src/views/demos/nested/menu-3-1.vue b/apps/web-antd/src/views/demos/nested/menu-3-1.vue index d1b16748c..f394930f2 100644 --- a/apps/web-antd/src/views/demos/nested/menu-3-1.vue +++ b/apps/web-antd/src/views/demos/nested/menu-3-1.vue @@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui'; diff --git a/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue b/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue index d1b16748c..f394930f2 100644 --- a/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue +++ b/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue @@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui'; diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts index f6b2bae14..7402e9139 100644 --- a/internal/tailwind-config/src/index.ts +++ b/internal/tailwind-config/src/index.ts @@ -160,7 +160,7 @@ export default { }, fontFamily: { sans: [ - 'var(--font-geist-sans)', + 'var(--font-family)', // ...defaultTheme.fontFamily.sans ], }, 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 79e7e4aae..5b0c985d1 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,7 @@ :root { - --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; + --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, + 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Default background color of ...etc */ --background: 0 0% 100%; diff --git a/packages/effects/hooks/src/index.ts b/packages/effects/hooks/src/index.ts index a78cdb290..3c14661cb 100644 --- a/packages/effects/hooks/src/index.ts +++ b/packages/effects/hooks/src/index.ts @@ -1,6 +1,7 @@ export * from './unmount-global-loading'; export * from './use-app-config'; export * from './use-content-maximize'; +export * from './use-design-tokens'; export * from './use-refresh'; export * from './use-tabs'; export * from './use-watermark'; diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts new file mode 100644 index 000000000..eeaa14e3a --- /dev/null +++ b/packages/effects/hooks/src/use-design-tokens.ts @@ -0,0 +1,78 @@ +import { computed, ref, watch } from 'vue'; + +import { preferences } from '@vben/preferences'; + +export function useDesignTokens() { + const rootStyles = getComputedStyle(document.documentElement); + + const colorPrimary = ref(''); + const colorError = ref(''); + const colorSuccess = ref(''); + const colorWarning = ref(''); + const colorInfo = ref(''); + const colorBgBase = ref(''); + const colorTextBase = ref(''); + const colorBgContainer = ref(''); + const colorBgElevated = ref(''); + const colorBgLayout = ref(''); + const colorBgMask = ref(''); + const colorBorder = ref(''); + const borderRadius = ref(''); + + const getCssVariableValue = (variable: string, isColor: boolean = true) => { + const value = rootStyles.getPropertyValue(variable); + return isColor ? `hsl(${value})` : value; + }; + + watch( + () => preferences.theme, + () => { + colorInfo.value = colorPrimary.value = getCssVariableValue('--primary'); + colorError.value = getCssVariableValue('--destructive'); + colorWarning.value = getCssVariableValue('--warning'); + colorSuccess.value = getCssVariableValue('--success'); + colorBgBase.value = getCssVariableValue('--background'); + colorBgLayout.value = getCssVariableValue('--background-deep'); + colorBgMask.value = getCssVariableValue('--overlay'); + colorBorder.value = getCssVariableValue('--border'); + colorTextBase.value = getCssVariableValue('--foreground'); + colorBgElevated.value = getCssVariableValue('--popover'); + colorBgContainer.value = getCssVariableValue('--card'); + borderRadius.value = getCssVariableValue('--radius', false); + }, + { immediate: true }, + ); + + const antDesignTokens = computed(() => { + return { + borderRadius: borderRadius.value, + colorBgBase: colorBgBase.value, + colorBgContainer: colorBgContainer.value, + colorBgElevated: colorBgElevated.value, + colorBgLayout: colorBgLayout.value, + colorBgMask: colorBgMask.value, + colorBorder: colorBorder.value, + colorError: colorError.value, + colorInfo: colorInfo.value, + colorPrimary: colorPrimary.value, + colorSuccess: colorSuccess.value, + colorTextBase: colorTextBase.value, + colorWarning: colorWarning.value, + }; + }); + + return { + antDesignTokens, + borderRadius, + colorBgBase, + colorBgContainer, + colorBgElevated, + colorBorder, + colorError, + colorInfo, + colorPrimary, + colorSuccess, + colorTextBase, + colorWarning, + }; +} diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue index 54f0247e6..7181672a1 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue +++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue @@ -8,7 +8,6 @@ import { $t } from '@vben/locales'; import { BUILT_IN_THEME_PRESETS, type BuiltinThemePreset, - preferences, } from '@vben/preferences'; import { convertToHsl, TinyColor } from '@vben/utils'; @@ -29,9 +28,13 @@ const inputValue = computed(() => { const builtinThemePresets = computed(() => { return [ { - color: preferences.theme.colorPrimary, + color: 'hsl(231 98% 65%)', type: 'default', }, + // { + // color: 'hsl(231 98% 65%)', + // type: 'default', + // }, ...BUILT_IN_THEME_PRESETS, ]; }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 84d2149fe..b3341deda 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -711,12 +711,6 @@ importers: specifier: ^3.4.34 version: 3.4.34(typescript@5.5.4) - packages/effects/common-logic: - dependencies: - vue: - specifier: ^3.4.34 - version: 3.4.34(typescript@5.5.4) - packages/effects/common-ui: dependencies: '@vben-core/shadcn-ui': @@ -768,6 +762,9 @@ importers: '@vben/types': specifier: workspace:* version: link:../../types + '@vueuse/core': + specifier: ^10.11.0 + version: 10.11.0(vue@3.4.34(typescript@5.5.4)) vue: specifier: ^3.4.34 version: 3.4.34(typescript@5.5.4) @@ -3089,6 +3086,7 @@ packages: '@ls-lint/ls-lint@2.2.3': resolution: {integrity: sha512-ekM12jNm/7O2I/hsRv9HvYkRdfrHpiV1epVuI2NP+eTIcEgdIdKkKCs9KgQydu/8R5YXTov9aHdOgplmCHLupw==} + cpu: [x64, arm64, s390x] os: [darwin, linux, win32] hasBin: true @@ -3725,7 +3723,7 @@ packages: engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: '@typescript-eslint/parser': ^7.0.0 - eslint: ^8.56.0 + eslint: ^8.57.0 typescript: '*' peerDependenciesMeta: typescript: @@ -3772,7 +3770,7 @@ packages: resolution: {integrity: sha512-r+JFlm5NdB+JXc7aWWZ3fKSm1gn0pkswEwIYsrGPdsT2GjsRATAKXiNtp3vgAAO1xZhX8alIOEQnNMl3kbTgJw==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: - eslint: ^8.56.0 + eslint: ^9.7.0 '@typescript-eslint/visitor-keys@7.17.0': resolution: {integrity: sha512-RVGC9UhPOCsfCdI9pU++K4nD7to+jTcMIbXTSOcrLqUEW6gF2pU1UUbYJKc9cvcRSK1UDeMJ7pdMxf4bhMpV/A==} @@ -5248,7 +5246,7 @@ packages: resolution: {integrity: sha512-/UbPA+bYY7nIxcjL3kpcDY3UNdoLHFhyBFzHox2M0ypcUoueTn6woZUUmzzi5et/dXChksasYYFeKE2wshOrhg==} engines: {node: '>=16'} peerDependencies: - eslint: ^8.56.0 || ^9.0.0-0 + eslint: ^9.7.0 eslint-plugin-jsdoc@48.8.3: resolution: {integrity: sha512-AtIvwwW9D17MRkM0Z0y3/xZYaa9mdAvJrkY6fU/HNUwGbmMtHVvK4qRM9CDixGVtfNrQitb8c6zQtdh6cTOvLg==} @@ -5320,7 +5318,7 @@ packages: resolution: {integrity: sha512-n3AKiVpY2/uDcGrS3+QsYDkjPfaOrNrsfQxU9nt5nitd9KuvVXrfAvgCO9DYPSfap+Gqjw9EOrXIsBp5tlHZjA==} engines: {node: '>=18.18'} peerDependencies: - eslint: '>=8.56.0' + eslint: ^8.57.0 eslint-plugin-unused-imports@4.0.1: resolution: {integrity: sha512-rax76s05z64uQgG9YXsWFmXrgjkaK79AvfeAWiSxhPP6RVGxeRaj4+2u+wxxu/mDy2pmJoOy1QTOEALMia2xGQ==} diff --git a/website/.vitepress/config.mts b/website/.vitepress/config.mts index 68f4d8332..9321df7d2 100644 --- a/website/.vitepress/config.mts +++ b/website/.vitepress/config.mts @@ -304,5 +304,18 @@ function head(): HeadConfig[] { // src: 'https://cdn.tailwindcss.com', // }, // ], + [ + 'script', + {}, + ` + var _hmt = _hmt || []; + (function() { + var hm = document.createElement("script"); + hm.src = "https://hm.baidu.com/hm.js?2e443a834727c065877c01d89921545e"; + var s = document.getElementsByTagName("script")[0]; + s.parentNode.insertBefore(hm, s); + })(); + `, + ], ]; } diff --git a/website/package.json b/website/package.json index fcc48d078..45582e391 100644 --- a/website/package.json +++ b/website/package.json @@ -3,7 +3,7 @@ "version": "5.0.0", "private": true, "scripts": { - "docs:build": "vitepress build", + "build": "vitepress build", "docs:dev": "vitepress dev", "docs:preview": "vitepress preview" }, diff --git a/website/src/guide/in-depth/theme.md b/website/src/guide/in-depth/theme.md index f71b3da91..59bd16e3a 100644 --- a/website/src/guide/in-depth/theme.md +++ b/website/src/guide/in-depth/theme.md @@ -28,10 +28,9 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要 ```css :root { - --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; + --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, + 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Default background color of ...etc */ --background: 0 0% 100%; @@ -331,10 +330,9 @@ type BuiltinThemeType = ```css :root { - --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; + --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, + 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Default background color of ...etc */ --background: 0 0% 100%; diff --git a/website/src/guide/introduction/quick-start.md b/website/src/guide/introduction/quick-start.md index faaa03f02..7b785f31d 100644 --- a/website/src/guide/introduction/quick-start.md +++ b/website/src/guide/introduction/quick-start.md @@ -81,4 +81,4 @@ pnpm dev ``` -现在，你可以在浏览器访问 [http://localhost:5555](http://localhost:5555) 查看项目。 +现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。