perf: improve overall theme color matching

2024-07-15 23:53:58 +08:00
parent caf1fc4375
commit f95d9aa609
39 changed files with 525 additions and 843 deletions
--- a/packages/@core/shared/constants/src/global.ts
+++ b/packages/@core/shared/constants/src/global.ts
@@ -0,0 +1,15 @@
+// --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`;
+
+export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, CSS_VARIABLE_PREFIX };
--- a/packages/@core/shared/constants/src/index.ts
+++ b/packages/@core/shared/constants/src/index.ts
@@ -1,22 +1,2 @@
-/**
- * @zh_CN GITHUB 仓库地址
- */
-const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
-
-/**
- * @zh_CN 文档地址
- */
-const VBEN_DOC_URL = 'https://doc.vben.pro';
-
-/**
- * @zh_CN Vben Logo
- */
-const VBEN_LOGO_URL =
-  'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.3/source/logo-v1.webp';
-
-/**
- * @zh_CN Vben Admin 首页地址
- */
-const VBEN_PREVIEW_URL = 'https://vben.pro';
-
-export { VBEN_DOC_URL, VBEN_GITHUB_URL, VBEN_LOGO_URL, VBEN_PREVIEW_URL };
+export * from './global';
+export * from './vben';
--- a/packages/@core/shared/constants/src/vben.ts
+++ b/packages/@core/shared/constants/src/vben.ts
@@ -0,0 +1,22 @@
+/**
+ * @zh_CN GITHUB 仓库地址
+ */
+const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
+
+/**
+ * @zh_CN 文档地址
+ */
+const VBEN_DOC_URL = 'https://doc.vben.pro';
+
+/**
+ * @zh_CN Vben Logo
+ */
+const VBEN_LOGO_URL =
+  'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.3/source/logo-v1.webp';
+
+/**
+ * @zh_CN Vben Admin 首页地址
+ */
+const VBEN_PREVIEW_URL = 'https://vben.pro';
+
+export { VBEN_DOC_URL, VBEN_GITHUB_URL, VBEN_LOGO_URL, VBEN_PREVIEW_URL };
--- a/packages/@core/shared/design/src/design-tokens/dark/index.css
+++ b/packages/@core/shared/design/src/design-tokens/dark/index.css
@@ -56,7 +56,7 @@
  --heavy-foreground: var(--accent-foreground);

  /* Default border color */
-  --border: 215 27.9% 16.9%;
+  --border: 240 3.7% 15.9%;

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input: 0deg 0% 100% / 10%;
@@ -90,6 +90,7 @@

 :root.dark[data-theme='violet'] {
  --background: 224 71.4% 4.1%;
+  --background-content: var(--background);
  --foreground: 210 20% 98%;
  --card: 224 71.4% 4.1%;
  --card-foreground: 210 20% 98%;
@@ -111,6 +112,7 @@

 :root.dark[data-theme='pink'] {
  --background: 20 14.3% 4.1%;
+  --background-content: var(--background);
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
@@ -132,6 +134,7 @@

 :root.dark[data-theme='rose'] {
  --background: 0 0% 3.9%;
+  --background-content: var(--background);
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
@@ -153,6 +156,7 @@

 :root.dark[data-theme='sky-blue'] {
  --background: 222.2 84% 4.9%;
+  --background-content: var(--background);
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
@@ -174,6 +178,7 @@

 :root.dark[data-theme='deep-blue'] {
  --background: 222.2 84% 4.9%;
+  --background-content: var(--background);
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
@@ -195,6 +200,7 @@

 :root.dark[data-theme='green'] {
  --background: 20 14.3% 4.1%;
+  --background-content: var(--background);
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
@@ -216,6 +222,7 @@

 :root.dark[data-theme='deep-green'] {
  --background: 20 14.3% 4.1%;
+  --background-content: var(--background);
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
@@ -237,6 +244,7 @@

 :root.dark[data-theme='orange'] {
  --background: 20 14.3% 4.1%;
+  --background-content: var(--background);
  --foreground: 60 9.1% 97.8%;
  --card: 20 14.3% 4.1%;
  --card-foreground: 60 9.1% 97.8%;
@@ -258,6 +266,7 @@

 :root.dark[data-theme='yellow'] {
  --background: 20 14.3% 4.1%;
+  --background-content: var(--background);
  --foreground: 60 9.1% 97.8%;
  --card: 20 14.3% 4.1%;
  --card-foreground: 60 9.1% 97.8%;
@@ -279,6 +288,7 @@

 :root.dark[data-theme='zinc'] {
  --background: 240 10% 3.9%;
+  --background-content: var(--background);
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
@@ -300,6 +310,7 @@

 :root.dark[data-theme='neutral'] {
  --background: 0 0% 3.9%;
+  --background-content: var(--background);
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
@@ -321,6 +332,7 @@

 :root.dark[data-theme='slate'] {
  --background: 222.2 84% 4.9%;
+  --background-content: var(--background);
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
@@ -342,6 +354,7 @@

 :root.dark[data-theme='gray'] {
  --background: 224 71.4% 4.1%;
+  --background-content: var(--background);
  --foreground: 210 20% 98%;
  --card: 224 71.4% 4.1%;
  --card-foreground: 210 20% 98%;
--- a/packages/@core/shared/design/src/design-tokens/default/index.css
+++ b/packages/@core/shared/design/src/design-tokens/default/index.css
@@ -86,20 +86,20 @@
  --authentication: 231deg 61% 44%;

  /* 用于浅色主题下一些暗色主题的颜色 */
-  --dark-foreground: 220 13% 91%;
-  --dark-border: 0deg 0% 100% / 10%;
-  --dark-accent: 0deg 0% 100% / 8%;
-  --dark-accent-hover: 0deg 0% 100% / 12%;
+  --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: 0deg 0% 95%;
+  --menu-deep: 210 11.11% 96.47%;

  /* menu-dark */
  --menu-dark: 222.34deg 10.43% 12.27%;
-  --menu-dark-deep: 223deg 11% 10%;
+  --menu-dark-deep: 220deg 13.06% 9%;

  accent-color: var(--primary);
  color-scheme: light;
@@ -124,6 +124,12 @@
  --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'] {
@@ -145,6 +151,12 @@
  --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'] {
@@ -166,6 +178,12 @@
  --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'] {
@@ -187,6 +205,12 @@
  --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'] {
@@ -208,6 +232,12 @@
  --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'] {
@@ -229,6 +259,12 @@
  --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'] {
@@ -250,6 +286,12 @@
  --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'] {
@@ -271,6 +313,12 @@
  --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'] {
@@ -292,6 +340,12 @@
  --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'] {
@@ -313,6 +367,12 @@
  --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'] {
@@ -334,6 +394,12 @@
  --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'] {
@@ -355,6 +421,12 @@
  --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'] {
@@ -376,4 +448,10 @@
  --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%;
 }
--- a/packages/@core/shared/hooks/build.config.ts
+++ b/packages/@core/shared/hooks/build.config.ts
@@ -1,7 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-  clean: true,
-  declaration: true,
-  entries: ['src/index'],
-});
--- a/packages/@core/shared/hooks/package.json
+++ b/packages/@core/shared/hooks/package.json
@@ -1,45 +0,0 @@
-{
-  "name": "@vben-core/hooks",
-  "version": "5.0.0",
-  "homepage": "https://github.com/vbenjs/vue-vben-admin",
-  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/hooks"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm unbuild",
-    "stub": "pnpm unbuild --stub"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
-    }
-  },
-  "dependencies": {
-    "radix-vue": "^1.9.1",
-    "sortablejs": "^1.15.2"
-  },
-  "devDependencies": {
-    "@types/sortablejs": "^1.15.8"
-  }
-}
--- a/packages/@core/shared/hooks/src/index.ts
+++ b/packages/@core/shared/hooks/src/index.ts
@@ -1,8 +0,0 @@
-export * from './use-namespace';
-export * from './use-sortable';
-export {
-  useEmitAsProps,
-  useForwardExpose,
-  useForwardProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
--- a/packages/@core/shared/hooks/src/use-namespace.ts
+++ b/packages/@core/shared/hooks/src/use-namespace.ts
@@ -1,105 +0,0 @@
-/**
- * @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 = (
-  namespace: string,
-  block: string,
-  blockSuffix: string,
-  element: string,
-  modifier: string,
-) => {
-  let cls = `${namespace}-${block}`;
-  if (blockSuffix) {
-    cls += `-${blockSuffix}`;
-  }
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-};
-
-const is: {
-  (name: string): string;
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  (name: string, state: boolean | undefined): string;
-} = (name: string, ...args: [] | [boolean | undefined]) => {
-  const state = args.length > 0 ? args[0] : true;
-  return name && state ? `${statePrefix}${name}` : '';
-};
-
-const useNamespace = (block: string) => {
-  const namespace = defaultNamespace;
-  const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', '');
-  const e = (element?: string) =>
-    element ? _bem(namespace, block, '', element, '') : '';
-  const m = (modifier?: string) =>
-    modifier ? _bem(namespace, block, '', '', modifier) : '';
-  const be = (blockSuffix?: string, element?: string) =>
-    blockSuffix && element
-      ? _bem(namespace, block, blockSuffix, element, '')
-      : '';
-  const em = (element?: string, modifier?: string) =>
-    element && modifier ? _bem(namespace, block, '', element, modifier) : '';
-  const bm = (blockSuffix?: string, modifier?: string) =>
-    blockSuffix && modifier
-      ? _bem(namespace, block, blockSuffix, '', modifier)
-      : '';
-  const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
-    blockSuffix && element && modifier
-      ? _bem(namespace, block, blockSuffix, element, modifier)
-      : '';
-
-  // for css var
-  // --el-xxx: value;
-  const cssVar = (object: Record<string, string>) => {
-    const styles: Record<string, string> = {};
-    for (const key in object) {
-      if (object[key]) {
-        styles[`--${namespace}-${key}`] = object[key];
-      }
-    }
-    return styles;
-  };
-  // with block
-  const cssVarBlock = (object: Record<string, string>) => {
-    const styles: Record<string, string> = {};
-    for (const key in object) {
-      if (object[key]) {
-        styles[`--${namespace}-${block}-${key}`] = object[key];
-      }
-    }
-    return styles;
-  };
-
-  const cssVarName = (name: string) => `--${namespace}-${name}`;
-  const cssVarBlockName = (name: string) => `--${namespace}-${block}-${name}`;
-
-  return {
-    b,
-    be,
-    bem,
-    bm,
-    // css
-    cssVar,
-    cssVarBlock,
-    cssVarBlockName,
-    cssVarName,
-    e,
-    em,
-    is,
-    m,
-    namespace,
-  };
-};
-
-type UseNamespaceReturn = ReturnType<typeof useNamespace>;
-
-export type { UseNamespaceReturn };
-export { useNamespace };
--- a/packages/@core/shared/hooks/src/use-sortable.test.ts
+++ b/packages/@core/shared/hooks/src/use-sortable.test.ts
@@ -1,49 +0,0 @@
-import type { SortableOptions } from 'sortablejs';
-
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { useSortable } from './use-sortable';
-
-describe('useSortable', () => {
-  beforeEach(() => {
-    vi.mock('sortablejs/modular/sortable.complete.esm.js', () => ({
-      default: {
-        create: vi.fn(),
-      },
-    }));
-  });
-  it('should call Sortable.create with the correct options', async () => {
-    // Create a mock element
-    const mockElement = document.createElement('div') as HTMLDivElement;
-
-    // Define custom options
-    const customOptions: SortableOptions = {
-      group: 'test-group',
-      sort: false,
-    };
-
-    // Use the useSortable function
-    const { initializeSortable } = useSortable(mockElement, customOptions);
-
-    // Initialize sortable
-    await initializeSortable();
-
-    // Import sortablejs to access the mocked create function
-    const Sortable = await import(
-      // @ts-expect-error - This is a dynamic import
-      'sortablejs/modular/sortable.complete.esm.js'
-    );
-
-    // Verify that Sortable.create was called with the correct parameters
-    expect(Sortable.default.create).toHaveBeenCalledTimes(1);
-    expect(Sortable.default.create).toHaveBeenCalledWith(
-      mockElement,
-      expect.objectContaining({
-        animation: 100,
-        delay: 400,
-        delayOnTouchOnly: true,
-        ...customOptions,
-      }),
-    );
-  });
-});
--- a/packages/@core/shared/hooks/src/use-sortable.ts
+++ b/packages/@core/shared/hooks/src/use-sortable.ts
@@ -1,36 +0,0 @@
-import type { SortableOptions } from 'sortablejs';
-import type Sortable from 'sortablejs';
-
-function useSortable<T extends HTMLElement>(
-  sortableContainer: T,
-  options: SortableOptions = {},
-) {
-  const initializeSortable = async () => {
-    const Sortable = await import(
-      // @ts-expect-error - This is a dynamic import
-      'sortablejs/modular/sortable.complete.esm.js'
-    );
-    // const { AutoScroll } = await import(
-    //   // @ts-expect-error - This is a dynamic import
-    //   'sortablejs/modular/sortable.core.esm.js'
-    // );
-
-    // Sortable?.default?.mount?.(AutoScroll);
-
-    const sortable = Sortable?.default?.create?.(sortableContainer, {
-      animation: 100,
-      delay: 400,
-      delayOnTouchOnly: true,
-      ...options,
-    });
-    return sortable as Sortable;
-  };
-
-  return {
-    initializeSortable,
-  };
-}
-
-export { useSortable };
-
-export type { Sortable };
--- a/packages/@core/shared/hooks/tsconfig.json
+++ b/packages/@core/shared/hooks/tsconfig.json
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}