chore: update theme

2024-07-28 17:01:19 +08:00 · 2024-07-28 17:01:19 +08:00 · 5590cc8fa1
parent 376fd17a61
commit 5590cc8fa1
15 changed files with 124 additions and 44 deletions
--- 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,
  };
 });
 </script>
--- 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';
 </script>

 <template>
-  <div>
-    <Fallback status="coming-soon" />
-    <input />
-  </div>
+  <Fallback status="coming-soon" />
 </template>
--- 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';
 </script>

 <template>
-  <div>
-    <Fallback status="coming-soon" />
-    <input />
-  </div>
+  <Fallback status="coming-soon" />
 </template>
--- 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';
 </script>

 <template>
-  <div>
-    <Fallback status="coming-soon" />
-    <input />
-  </div>
+  <Fallback status="coming-soon" />
 </template>
--- 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';
 </script>

 <template>
-  <div>
-    <Fallback status="coming-soon" />
-    <input />
-  </div>
+  <Fallback status="coming-soon" />
 </template>
--- 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
        ],
      },
--- 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 <body />...etc */
  --background: 0 0% 100%;
--- 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';
--- a/packages/effects/hooks/src/use-design-tokens.ts
+++ 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<any>('');
+
+  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,
+  };
+}
--- 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,
  ];
 });
--- 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==}
--- 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);
+      })();
+      `,
+    ],
  ];
 }
--- 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"
  },
--- 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 <body />...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 <body />...etc */
  --background: 0 0% 100%;
--- 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` 查看项目。