@veltra/styles 1.0.7 → 1.0.9

package/dist/theme/component-css-vars.d.ts

@@ -0,0 +1,16 @@
+//#region src/theme/component-css-vars.d.ts
+/**
+ * 桌面组件级 `--u-*` token，与内置主题一起在 `UITheme.injectBuiltInThemes` 中注入 `html`。
+ * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。
+ */
+/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */
+declare function themeTokenVar(basename: string, ...nodes: Array<string | number>): string;
+/** 亮色（及与暗色相同的尺寸类）下组件 token */
+declare const componentCssVarsLight: Record<string, string>;
+/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */
+declare const componentCssVarsDark: Record<string, string>;
+declare const componentCssVarsLightDecls: string[];
+declare const componentCssVarsDarkDecls: string[];
+//#endregion
+export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar };
+//# sourceMappingURL=component-css-vars.d.ts.map

package/dist/theme/component-css-vars.js

@@ -0,0 +1,77 @@
+//#region src/theme/component-css-vars.ts
+/**
+* 桌面组件级 `--u-*` token，与内置主题一起在 `UITheme.injectBuiltInThemes` 中注入 `html`。
+* 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。
+*/
+/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */
+function themeTokenVar(basename, ...nodes) {
+	return `var(--u-${basename}${nodes.length ? `-${nodes.map(String).join("-")}` : ""})`;
+}
+const T = themeTokenVar;
+/** 亮色（及与暗色相同的尺寸类）下组件 token */
+const componentCssVarsLight = {
+	"--u-table-border-color": "#e9e9e9",
+	"--u-table-header-bg": "#f4f5f7",
+	"--u-table-header-color": T("text-color", "title"),
+	"--u-table-stripe-bg": "#f8fafc",
+	"--u-table-stripe-color": "inherit",
+	"--u-table-hover-bg": T("bg-color", "hover"),
+	"--u-table-hover-color": "inherit",
+	"--u-table-current-bg": T("bg-color", "hover"),
+	"--u-table-current-color": "inherit",
+	"--u-table-checked-bg": T("color", "primary", "light-9"),
+	"--u-table-checked-color": "inherit",
+	"--u-menu-color": "#0f172a",
+	"--u-menu-hover-bg": "rgba(148, 163, 184, 0.12)",
+	"--u-menu-hover-color": T("text-color", "title"),
+	"--u-menu-active-bg": "rgba(59, 130, 246, 0.12)",
+	"--u-menu-active-color": T("color", "primary", "dark", "1"),
+	"--u-menu-height-small": "32px",
+	"--u-menu-height-default": "36px",
+	"--u-menu-height-large": "40px",
+	"--u-menu-bg-color": T("bg-color", "top"),
+	"--u-menu-bg-blur": "none",
+	"--u-menu-bg-saturate": "none",
+	"--u-menu-bg-image": "none",
+	"--u-tag-small": "20px",
+	"--u-tag-default": "24px",
+	"--u-tag-large": "28px",
+	"--u-switch-height-small": "18px",
+	"--u-switch-height-default": "20px",
+	"--u-switch-height-large": "24px",
+	"--u-breadcrumb-small": "20px",
+	"--u-breadcrumb-default": "22px",
+	"--u-breadcrumb-large": "24px"
+};
+/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */
+const componentCssVarsDark = {
+	...componentCssVarsLight,
+	"--u-table-border-color": "#404040",
+	"--u-table-header-bg": "#2a2a2a",
+	"--u-table-header-color": T("text-color", "main"),
+	"--u-table-stripe-bg": "#2a2a2a",
+	"--u-table-stripe-color": T("text-color", "main"),
+	"--u-table-hover-bg": "#333333",
+	"--u-table-hover-color": T("text-color", "title"),
+	"--u-table-current-bg": T("bg-color", "hover"),
+	"--u-table-current-color": "inherit",
+	"--u-table-checked-bg": T("color", "primary", "dark", "1"),
+	"--u-table-checked-color": "inherit",
+	"--u-menu-color": T("text-color", "main"),
+	"--u-menu-hover-bg": "rgba(148, 163, 184, 0.14)",
+	"--u-menu-hover-color": T("text-color", "title"),
+	"--u-menu-active-bg": "rgba(96, 165, 250, 0.2)",
+	"--u-menu-active-color": T("text-color", "white"),
+	"--u-menu-bg-color": T("bg-color", "middle"),
+	"--u-radio-border": "#595959",
+	"--u-checkbox-border": "#595959"
+};
+function recordToDeclList(record) {
+	return Object.entries(record).map(([k, v]) => `${k}: ${v}`);
+}
+const componentCssVarsLightDecls = recordToDeclList(componentCssVarsLight);
+const componentCssVarsDarkDecls = recordToDeclList(componentCssVarsDark);
+//#endregion
+export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar };
+
+//# sourceMappingURL=component-css-vars.js.map

package/dist/theme/component-css-vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-css-vars.js","names":[],"sources":["../../src/theme/component-css-vars.ts"],"sourcesContent":["/**\n * 桌面组件级 `--u-*` token，与内置主题一起在 `UITheme.injectBuiltInThemes` 中注入 `html`。\n * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。\n */\n\n/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */\nexport function themeTokenVar(basename: string, ...nodes: Array<string | number>): string {\n  const suffix = nodes.length ? `-${nodes.map(String).join('-')}` : ''\n  return `var(--u-${basename}${suffix})`\n}\n\nconst T = themeTokenVar\n\n/** 亮色（及与暗色相同的尺寸类）下组件 token */\nexport const componentCssVarsLight: Record<string, string> = {\n  '--u-table-border-color': '#e9e9e9',\n  '--u-table-header-bg': '#f4f5f7',\n  '--u-table-header-color': T('text-color', 'title'),\n  '--u-table-stripe-bg': '#f8fafc',\n  '--u-table-stripe-color': 'inherit',\n  '--u-table-hover-bg': T('bg-color', 'hover'),\n  '--u-table-hover-color': 'inherit',\n  '--u-table-current-bg': T('bg-color', 'hover'),\n  '--u-table-current-color': 'inherit',\n  '--u-table-checked-bg': T('color', 'primary', 'light-9'),\n  '--u-table-checked-color': 'inherit',\n  '--u-menu-color': '#0f172a',\n  '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.12)',\n  '--u-menu-hover-color': T('text-color', 'title'),\n  '--u-menu-active-bg': 'rgba(59, 130, 246, 0.12)',\n  '--u-menu-active-color': T('color', 'primary', 'dark', '1'),\n  '--u-menu-height-small': '32px',\n  '--u-menu-height-default': '36px',\n  '--u-menu-height-large': '40px',\n  '--u-menu-bg-color': T('bg-color', 'top'),\n  '--u-menu-bg-blur': 'none',\n  '--u-menu-bg-saturate': 'none',\n  '--u-menu-bg-image': 'none',\n  '--u-tag-small': '20px',\n  '--u-tag-default': '24px',\n  '--u-tag-large': '28px',\n  '--u-switch-height-small': '18px',\n  '--u-switch-height-default': '20px',\n  '--u-switch-height-large': '24px',\n  '--u-breadcrumb-small': '20px',\n  '--u-breadcrumb-default': '22px',\n  '--u-breadcrumb-large': '24px'\n}\n\n/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */\nexport const componentCssVarsDark: Record<string, string> = {\n  ...componentCssVarsLight,\n  '--u-table-border-color': '#404040',\n  '--u-table-header-bg': '#2a2a2a',\n  '--u-table-header-color': T('text-color', 'main'),\n  '--u-table-stripe-bg': '#2a2a2a',\n  '--u-table-stripe-color': T('text-color', 'main'),\n  '--u-table-hover-bg': '#333333',\n  '--u-table-hover-color': T('text-color', 'title'),\n  '--u-table-current-bg': T('bg-color', 'hover'),\n  '--u-table-current-color': 'inherit',\n  '--u-table-checked-bg': T('color', 'primary', 'dark', '1'),\n  '--u-table-checked-color': 'inherit',\n  '--u-menu-color': T('text-color', 'main'),\n  '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.14)',\n  '--u-menu-hover-color': T('text-color', 'title'),\n  '--u-menu-active-bg': 'rgba(96, 165, 250, 0.2)',\n  '--u-menu-active-color': T('text-color', 'white'),\n  '--u-menu-bg-color': T('bg-color', 'middle'),\n  '--u-radio-border': '#595959',\n  '--u-checkbox-border': '#595959'\n}\n\nfunction recordToDeclList(record: Record<string, string>): string[] {\n  return Object.entries(record).map(([k, v]) => `${k}: ${v}`)\n}\n\nexport const componentCssVarsLightDecls: string[] = recordToDeclList(componentCssVarsLight)\n\nexport const componentCssVarsDarkDecls: string[] = recordToDeclList(componentCssVarsDark)\n"],"mappings":";;;;;;AAMA,SAAgB,cAAc,UAAkB,GAAG,OAAuC;AAExF,QAAO,WAAW,WADH,MAAM,SAAS,IAAI,MAAM,IAAI,OAAO,CAAC,KAAK,IAAI,KAAK,GAC9B;;AAGtC,MAAM,IAAI;;AAGV,MAAa,wBAAgD;CAC3D,0BAA0B;CAC1B,uBAAuB;CACvB,0BAA0B,EAAE,cAAc,QAAQ;CAClD,uBAAuB;CACvB,0BAA0B;CAC1B,sBAAsB,EAAE,YAAY,QAAQ;CAC5C,yBAAyB;CACzB,wBAAwB,EAAE,YAAY,QAAQ;CAC9C,2BAA2B;CAC3B,wBAAwB,EAAE,SAAS,WAAW,UAAU;CACxD,2BAA2B;CAC3B,kBAAkB;CAClB,qBAAqB;CACrB,wBAAwB,EAAE,cAAc,QAAQ;CAChD,sBAAsB;CACtB,yBAAyB,EAAE,SAAS,WAAW,QAAQ,IAAI;CAC3D,yBAAyB;CACzB,2BAA2B;CAC3B,yBAAyB;CACzB,qBAAqB,EAAE,YAAY,MAAM;CACzC,oBAAoB;CACpB,wBAAwB;CACxB,qBAAqB;CACrB,iBAAiB;CACjB,mBAAmB;CACnB,iBAAiB;CACjB,2BAA2B;CAC3B,6BAA6B;CAC7B,2BAA2B;CAC3B,wBAAwB;CACxB,0BAA0B;CAC1B,wBAAwB;CACzB;;AAGD,MAAa,uBAA+C;CAC1D,GAAG;CACH,0BAA0B;CAC1B,uBAAuB;CACvB,0BAA0B,EAAE,cAAc,OAAO;CACjD,uBAAuB;CACvB,0BAA0B,EAAE,cAAc,OAAO;CACjD,sBAAsB;CACtB,yBAAyB,EAAE,cAAc,QAAQ;CACjD,wBAAwB,EAAE,YAAY,QAAQ;CAC9C,2BAA2B;CAC3B,wBAAwB,EAAE,SAAS,WAAW,QAAQ,IAAI;CAC1D,2BAA2B;CAC3B,kBAAkB,EAAE,cAAc,OAAO;CACzC,qBAAqB;CACrB,wBAAwB,EAAE,cAAc,QAAQ;CAChD,sBAAsB;CACtB,yBAAyB,EAAE,cAAc,QAAQ;CACjD,qBAAqB,EAAE,YAAY,SAAS;CAC5C,oBAAoB;CACpB,uBAAuB;CACxB;AAED,SAAS,iBAAiB,QAA0C;AAClE,QAAO,OAAO,QAAQ,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI;;AAG7D,MAAa,6BAAuC,iBAAiB,sBAAsB;AAE3F,MAAa,4BAAsC,iBAAiB,qBAAqB"}

package/dist/theme/index.d.ts

@@ -1,7 +1,8 @@
+import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar } from "./component-css-vars.js";
 import { RGBColor, Theme } from "./type.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./light.js";
 import { darkTheme } from "./dark.js";
 import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
 import { currentTheme, loadTheme, setTheme } from "../load-theme.js";
-export { HEXToRGB, RGBColor, Theme, UITheme, cssVar, currentTheme, darkTheme, defineBySize, lightTheme, loadTheme, mixColor, setTheme };
+export { HEXToRGB, RGBColor, Theme, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, lightTheme, loadTheme, mixColor, setTheme, themeTokenVar };

package/dist/theme/index.js

@@ -1,6 +1,7 @@
+import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar } from "./component-css-vars.js";
 import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./light.js";
 import { darkTheme } from "./dark.js";
 import { currentTheme, loadTheme, setTheme } from "../load-theme.js";
-export { HEXToRGB, UITheme, cssVar, currentTheme, darkTheme, defineBySize, lightTheme, loadTheme, mixColor, setTheme };
+export { HEXToRGB, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, lightTheme, loadTheme, mixColor, setTheme, themeTokenVar };

package/dist/theme/type.d.ts

@@ -3,7 +3,7 @@
  * RGB颜色[红,绿,蓝]
  */
 type RGBColor = [number, number, number];
-/** 仅含全局 token；组件级 token 由各组件 SCSS 以 `--u-{component}-*` 声明 */
+/** 仅含全局 token；组件级 `--u-*` 由 `theme/component-css-vars.ts` 随 `loadTheme` 注入 */
 type Theme = {
   /** 主题色 */color: {
     /** 主要颜色 */primary: string; /** 成功颜色 */

package/dist/theme/ui-theme.js

@@ -1,3 +1,4 @@
+import { componentCssVarsDarkDecls, componentCssVarsLightDecls } from "./component-css-vars.js";
 import { mixColor } from "./helper.js";
 import { isObj, o, str } from "@cat-kit/core";
 import { withUnit } from "@veltra/utils";
@@ -140,8 +141,8 @@ var UITheme = class UITheme {
 	}
 	/** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */
 	static injectBuiltInThemes(light, dark) {
-		const lightDecls = light.themeToDeclarationList(toRaw(light.theme));
-		const darkDecls = dark.themeToDeclarationList(toRaw(dark.theme));
+		const lightDecls = [...light.themeToDeclarationList(toRaw(light.theme)), ...componentCssVarsLightDecls];
+		const darkDecls = [...dark.themeToDeclarationList(toRaw(dark.theme)), ...componentCssVarsDarkDecls];
 		const lightBlock = UITheme.declarationBlock(lightDecls);
 		const darkBlock = UITheme.declarationBlock(darkDecls);
 		const css = [
@@ -155,7 +156,7 @@ var UITheme = class UITheme {
 		UITheme.applyGlobalCSS(css);
 	}
 	render() {
-		const decls = this.themeToDeclarationList(toRaw(this.theme));
+		const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentCssVarsLightDecls];
 		const css = `html { ${UITheme.declarationBlock(decls)} }`;
 		UITheme.applyGlobalCSS(css);
 	}

package/dist/theme/ui-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, o, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { mixColor } from './helper'\nimport type { Theme } from './type'\n\ntype RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]\n}\n\nfunction isDevEnv(): boolean {\n  try {\n    if (typeof import.meta !== 'undefined') {\n      const env = (import.meta as { env?: { DEV?: boolean } }).env\n      if (env?.DEV === true) return true\n    }\n  } catch {\n    /* ignore */\n  }\n  const proc = (globalThis as { process?: { env?: Record<string, string | undefined> } }).process\n  return typeof proc !== 'undefined' && proc.env?.NODE_ENV !== 'production'\n}\n\nexport class UITheme {\n  static themeID = 'ultra-ui-theme'\n\n  private static legacyDeprecationWarned = false\n\n  private static adoptedSheet: CSSStyleSheet | null = null\n\n  readonly theme: Theme\n\n  private readonly reactiveEnabled: boolean\n\n  constructor(theme: Theme, options?: { reactive?: boolean }) {\n    this.reactiveEnabled = options?.reactive !== false\n    this.theme = reactive(theme) as Theme\n    if (this.reactiveEnabled) {\n      watch(this.theme, () => this.render(), { deep: true })\n    }\n  }\n\n  static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n    if (typeof document === 'undefined') return\n    const el = document.documentElement\n    if (mode === 'auto') {\n      delete el.dataset.theme\n    } else {\n      el.dataset.theme = mode\n    }\n  }\n\n  private renderBase(\n    theme: Record<string, unknown>,\n    themeRules: string[] = [],\n    parentKey = '--u'\n  ): string[] {\n    Object.keys(theme).forEach((key) => {\n      const value = theme[key]\n      const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n        this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n      } else {\n        if (value || value === 0) {\n          const v = withUnit(value as number | string, 'px')\n          if (v !== undefined) {\n            themeRules.push(`${varKey}: ${v}`)\n          }\n        }\n      }\n    })\n\n    return themeRules\n  }\n\n  private renderBorder(theme: Theme): string {\n    const border = Object.keys(theme.border)\n      .map((key) => `var(--u-border-${key})`)\n      .join(' ')\n\n    return `--u-border: ${border}`\n  }\n\n  private renderTypeColor(theme: Theme): string {\n    const { color } = theme\n\n    const types = Object.keys(color)\n    const rates = [1, 3, 5, 7, 9]\n\n    return types\n      .map((type) => {\n        const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n        return rates\n          .map((rate) => {\n            const light = `--u-color-${type}-light-${rate}: ${mixColor(\n              colorValue,\n              '#fff',\n              rate / 10\n            )}`\n            const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n              colorValue,\n              '#000',\n              rate / 10\n            )}`\n            return `${light};${dark}`\n          })\n          .join(';')\n      })\n      .join(';')\n  }\n\n  private renderShadow(_theme: Theme): string {\n    const shadow = ['x', 'y', 'blur', 'spread', 'color']\n      .map((k) => `var(--u-shadow-${k})`)\n      .join(' ')\n\n    return `--u-shadow: ${shadow}`\n  }\n\n  private renderBGColorAlpha(theme: Theme): string {\n    const { color } = theme.bg\n    return Object.keys(color)\n      .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)\n      .join(';')\n  }\n\n  private renderBGFilter(theme: Theme): string {\n    const { filter } = theme.bg\n    return `--u-bg-filter: ${filter.blur} ${filter.saturate}`\n  }\n\n  /** 主题变量声明（不含 legacy 副本） */\n  themeToDeclarationList(theme: Theme): string[] {\n    const raw = theme as unknown as Record<string, unknown>\n    const lines: string[] = [...this.renderBase(raw)]\n    const chunks = [\n      this.renderTypeColor(theme),\n      this.renderShadow(theme),\n      this.renderBGColorAlpha(theme),\n      this.renderBGFilter(theme),\n      this.renderBorder(theme)\n    ]\n    for (const c of chunks) {\n      lines.push(\n        ...c\n          .split(';')\n          .map((s) => s.trim())\n          .filter(Boolean)\n      )\n    }\n    return lines\n  }\n\n  private static withLegacyDuplicates(decls: string[]): string {\n    const legacy: string[] = []\n    for (const decl of decls) {\n      const idx = decl.indexOf(':')\n      if (idx === -1) continue\n      const name = decl.slice(0, idx).trim()\n      const value = decl.slice(idx + 1).trim()\n      if (name.startsWith('--u-')) {\n        legacy.push(`--${name.slice(4)}: ${value}`)\n      }\n    }\n    return [...decls, ...legacy].join(';')\n  }\n\n  private static warnLegacyOnce(): void {\n    if (!isDevEnv() || UITheme.legacyDeprecationWarned) return\n    UITheme.legacyDeprecationWarned = true\n    console.warn(\n      '[@veltra/styles] Theme CSS variables now prefer the `--u-` namespace. ' +\n        'Unprefixed aliases (e.g. `--color-primary`) are deprecated and will be removed in a future major version.'\n    )\n  }\n\n  private static declarationBlock(decls: string[]): string {\n    const merged = UITheme.withLegacyDuplicates(decls)\n    UITheme.warnLegacyOnce()\n    return merged\n  }\n\n  private static removeExistingStyleTag(doc: Document): void {\n    const el = doc.getElementById(UITheme.themeID)\n    if (el?.parentNode) {\n      el.parentNode.removeChild(el)\n    }\n  }\n\n  private static applyGlobalCSS(css: string): void {\n    const doc = typeof document !== 'undefined' ? document : undefined\n    if (!doc) return\n\n    const canAdopt =\n      typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n    if (canAdopt) {\n      UITheme.removeExistingStyleTag(doc)\n      if (!UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = new CSSStyleSheet()\n        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n      }\n      UITheme.adoptedSheet.replaceSync(css)\n    } else {\n      if (UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = null\n      }\n      let style = doc.getElementById(UITheme.themeID)\n      if (!style) {\n        style = doc.createElement('style')\n        style.id = UITheme.themeID\n        doc.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n  }\n\n  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */\n  static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n    const lightDecls = light.themeToDeclarationList(toRaw(light.theme))\n    const darkDecls = dark.themeToDeclarationList(toRaw(dark.theme))\n    const lightBlock = UITheme.declarationBlock(lightDecls)\n    const darkBlock = UITheme.declarationBlock(darkDecls)\n\n    const css = [\n      `html { ${lightBlock} }`,\n      `@media (prefers-color-scheme: dark) {`,\n      `  html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n      `}`,\n      `html[data-theme=\"light\"] { ${lightBlock} }`,\n      `html[data-theme=\"dark\"] { ${darkBlock} }`\n    ].join('\\n')\n\n    UITheme.applyGlobalCSS(css)\n  }\n\n  render(): void {\n    const decls = this.themeToDeclarationList(toRaw(this.theme))\n    const block = UITheme.declarationBlock(decls)\n    const css = `html { ${block} }`\n    UITheme.applyGlobalCSS(css)\n  }\n\n  new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n    function delEmpty(obj: Record<string, unknown>) {\n      Object.keys(obj).forEach((key) => {\n        const value = obj[key]\n        if (isObj(value)) {\n          return delEmpty(value as Record<string, unknown>)\n        }\n        if (!value && value !== 0) {\n          delete obj[key]\n        }\n      })\n    }\n\n    delEmpty(customTheme as Record<string, unknown>)\n\n    const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n    o(base).deepExtend(customTheme as Record<string, any>)\n    return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, o, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'\nimport { mixColor } from './helper'\nimport type { Theme } from './type'\n\ntype RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]\n}\n\nfunction isDevEnv(): boolean {\n  try {\n    if (typeof import.meta !== 'undefined') {\n      const env = (import.meta as { env?: { DEV?: boolean } }).env\n      if (env?.DEV === true) return true\n    }\n  } catch {\n    /* ignore */\n  }\n  const proc = (globalThis as { process?: { env?: Record<string, string | undefined> } }).process\n  return typeof proc !== 'undefined' && proc.env?.NODE_ENV !== 'production'\n}\n\nexport class UITheme {\n  static themeID = 'ultra-ui-theme'\n\n  private static legacyDeprecationWarned = false\n\n  private static adoptedSheet: CSSStyleSheet | null = null\n\n  readonly theme: Theme\n\n  private readonly reactiveEnabled: boolean\n\n  constructor(theme: Theme, options?: { reactive?: boolean }) {\n    this.reactiveEnabled = options?.reactive !== false\n    this.theme = reactive(theme) as Theme\n    if (this.reactiveEnabled) {\n      watch(this.theme, () => this.render(), { deep: true })\n    }\n  }\n\n  static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n    if (typeof document === 'undefined') return\n    const el = document.documentElement\n    if (mode === 'auto') {\n      delete el.dataset.theme\n    } else {\n      el.dataset.theme = mode\n    }\n  }\n\n  private renderBase(\n    theme: Record<string, unknown>,\n    themeRules: string[] = [],\n    parentKey = '--u'\n  ): string[] {\n    Object.keys(theme).forEach((key) => {\n      const value = theme[key]\n      const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n        this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n      } else {\n        if (value || value === 0) {\n          const v = withUnit(value as number | string, 'px')\n          if (v !== undefined) {\n            themeRules.push(`${varKey}: ${v}`)\n          }\n        }\n      }\n    })\n\n    return themeRules\n  }\n\n  private renderBorder(theme: Theme): string {\n    const border = Object.keys(theme.border)\n      .map((key) => `var(--u-border-${key})`)\n      .join(' ')\n\n    return `--u-border: ${border}`\n  }\n\n  private renderTypeColor(theme: Theme): string {\n    const { color } = theme\n\n    const types = Object.keys(color)\n    const rates = [1, 3, 5, 7, 9]\n\n    return types\n      .map((type) => {\n        const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n        return rates\n          .map((rate) => {\n            const light = `--u-color-${type}-light-${rate}: ${mixColor(\n              colorValue,\n              '#fff',\n              rate / 10\n            )}`\n            const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n              colorValue,\n              '#000',\n              rate / 10\n            )}`\n            return `${light};${dark}`\n          })\n          .join(';')\n      })\n      .join(';')\n  }\n\n  private renderShadow(_theme: Theme): string {\n    const shadow = ['x', 'y', 'blur', 'spread', 'color']\n      .map((k) => `var(--u-shadow-${k})`)\n      .join(' ')\n\n    return `--u-shadow: ${shadow}`\n  }\n\n  private renderBGColorAlpha(theme: Theme): string {\n    const { color } = theme.bg\n    return Object.keys(color)\n      .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)\n      .join(';')\n  }\n\n  private renderBGFilter(theme: Theme): string {\n    const { filter } = theme.bg\n    return `--u-bg-filter: ${filter.blur} ${filter.saturate}`\n  }\n\n  /** 主题变量声明（不含 legacy 副本） */\n  themeToDeclarationList(theme: Theme): string[] {\n    const raw = theme as unknown as Record<string, unknown>\n    const lines: string[] = [...this.renderBase(raw)]\n    const chunks = [\n      this.renderTypeColor(theme),\n      this.renderShadow(theme),\n      this.renderBGColorAlpha(theme),\n      this.renderBGFilter(theme),\n      this.renderBorder(theme)\n    ]\n    for (const c of chunks) {\n      lines.push(\n        ...c\n          .split(';')\n          .map((s) => s.trim())\n          .filter(Boolean)\n      )\n    }\n    return lines\n  }\n\n  private static withLegacyDuplicates(decls: string[]): string {\n    const legacy: string[] = []\n    for (const decl of decls) {\n      const idx = decl.indexOf(':')\n      if (idx === -1) continue\n      const name = decl.slice(0, idx).trim()\n      const value = decl.slice(idx + 1).trim()\n      if (name.startsWith('--u-')) {\n        legacy.push(`--${name.slice(4)}: ${value}`)\n      }\n    }\n    return [...decls, ...legacy].join(';')\n  }\n\n  private static warnLegacyOnce(): void {\n    if (!isDevEnv() || UITheme.legacyDeprecationWarned) return\n    UITheme.legacyDeprecationWarned = true\n    console.warn(\n      '[@veltra/styles] Theme CSS variables now prefer the `--u-` namespace. ' +\n        'Unprefixed aliases (e.g. `--color-primary`) are deprecated and will be removed in a future major version.'\n    )\n  }\n\n  private static declarationBlock(decls: string[]): string {\n    const merged = UITheme.withLegacyDuplicates(decls)\n    UITheme.warnLegacyOnce()\n    return merged\n  }\n\n  private static removeExistingStyleTag(doc: Document): void {\n    const el = doc.getElementById(UITheme.themeID)\n    if (el?.parentNode) {\n      el.parentNode.removeChild(el)\n    }\n  }\n\n  private static applyGlobalCSS(css: string): void {\n    const doc = typeof document !== 'undefined' ? document : undefined\n    if (!doc) return\n\n    const canAdopt =\n      typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n    if (canAdopt) {\n      UITheme.removeExistingStyleTag(doc)\n      if (!UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = new CSSStyleSheet()\n        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n      }\n      UITheme.adoptedSheet.replaceSync(css)\n    } else {\n      if (UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = null\n      }\n      let style = doc.getElementById(UITheme.themeID)\n      if (!style) {\n        style = doc.createElement('style')\n        style.id = UITheme.themeID\n        doc.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n  }\n\n  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */\n  static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n    const lightDecls = [\n      ...light.themeToDeclarationList(toRaw(light.theme)),\n      ...componentCssVarsLightDecls\n    ]\n    const darkDecls = [\n      ...dark.themeToDeclarationList(toRaw(dark.theme)),\n      ...componentCssVarsDarkDecls\n    ]\n    const lightBlock = UITheme.declarationBlock(lightDecls)\n    const darkBlock = UITheme.declarationBlock(darkDecls)\n\n    const css = [\n      `html { ${lightBlock} }`,\n      `@media (prefers-color-scheme: dark) {`,\n      `  html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n      `}`,\n      `html[data-theme=\"light\"] { ${lightBlock} }`,\n      `html[data-theme=\"dark\"] { ${darkBlock} }`\n    ].join('\\n')\n\n    UITheme.applyGlobalCSS(css)\n  }\n\n  render(): void {\n    const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentCssVarsLightDecls]\n    const block = UITheme.declarationBlock(decls)\n    const css = `html { ${block} }`\n    UITheme.applyGlobalCSS(css)\n  }\n\n  new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n    function delEmpty(obj: Record<string, unknown>) {\n      Object.keys(obj).forEach((key) => {\n        const value = obj[key]\n        if (isObj(value)) {\n          return delEmpty(value as Record<string, unknown>)\n        }\n        if (!value && value !== 0) {\n          delete obj[key]\n        }\n      })\n    }\n\n    delEmpty(customTheme as Record<string, unknown>)\n\n    const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n    o(base).deepExtend(customTheme as Record<string, any>)\n    return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "files": [
     "dist",
     "src"
@@ -59,16 +59,11 @@
     "check-types": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@cat-kit/core": "^1.0.1",
-    "@veltra/compositions": "1.0.7",
-    "@veltra/utils": "1.0.7"
-  },
-  "devDependencies": {
-    "@tsdown/css": "^0.21.7",
-    "sass-embedded": "^1.99.0",
-    "tsdown": "^0.21.7"
+    "@cat-kit/core": "^1.1.1",
+    "@veltra/compositions": "1.0.9",
+    "@veltra/utils": "1.0.9"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.33"
   }
 }

package/src/theme/component-css-vars.ts

@@ -0,0 +1,80 @@
+/**
+ * 桌面组件级 `--u-*` token，与内置主题一起在 `UITheme.injectBuiltInThemes` 中注入 `html`。
+ * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。
+ */
+
+/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */
+export function themeTokenVar(basename: string, ...nodes: Array<string | number>): string {
+  const suffix = nodes.length ? `-${nodes.map(String).join('-')}` : ''
+  return `var(--u-${basename}${suffix})`
+}
+
+const T = themeTokenVar
+
+/** 亮色（及与暗色相同的尺寸类）下组件 token */
+export const componentCssVarsLight: Record<string, string> = {
+  '--u-table-border-color': '#e9e9e9',
+  '--u-table-header-bg': '#f4f5f7',
+  '--u-table-header-color': T('text-color', 'title'),
+  '--u-table-stripe-bg': '#f8fafc',
+  '--u-table-stripe-color': 'inherit',
+  '--u-table-hover-bg': T('bg-color', 'hover'),
+  '--u-table-hover-color': 'inherit',
+  '--u-table-current-bg': T('bg-color', 'hover'),
+  '--u-table-current-color': 'inherit',
+  '--u-table-checked-bg': T('color', 'primary', 'light-9'),
+  '--u-table-checked-color': 'inherit',
+  '--u-menu-color': '#0f172a',
+  '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.12)',
+  '--u-menu-hover-color': T('text-color', 'title'),
+  '--u-menu-active-bg': 'rgba(59, 130, 246, 0.12)',
+  '--u-menu-active-color': T('color', 'primary', 'dark', '1'),
+  '--u-menu-height-small': '32px',
+  '--u-menu-height-default': '36px',
+  '--u-menu-height-large': '40px',
+  '--u-menu-bg-color': T('bg-color', 'top'),
+  '--u-menu-bg-blur': 'none',
+  '--u-menu-bg-saturate': 'none',
+  '--u-menu-bg-image': 'none',
+  '--u-tag-small': '20px',
+  '--u-tag-default': '24px',
+  '--u-tag-large': '28px',
+  '--u-switch-height-small': '18px',
+  '--u-switch-height-default': '20px',
+  '--u-switch-height-large': '24px',
+  '--u-breadcrumb-small': '20px',
+  '--u-breadcrumb-default': '22px',
+  '--u-breadcrumb-large': '24px'
+}
+
+/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */
+export const componentCssVarsDark: Record<string, string> = {
+  ...componentCssVarsLight,
+  '--u-table-border-color': '#404040',
+  '--u-table-header-bg': '#2a2a2a',
+  '--u-table-header-color': T('text-color', 'main'),
+  '--u-table-stripe-bg': '#2a2a2a',
+  '--u-table-stripe-color': T('text-color', 'main'),
+  '--u-table-hover-bg': '#333333',
+  '--u-table-hover-color': T('text-color', 'title'),
+  '--u-table-current-bg': T('bg-color', 'hover'),
+  '--u-table-current-color': 'inherit',
+  '--u-table-checked-bg': T('color', 'primary', 'dark', '1'),
+  '--u-table-checked-color': 'inherit',
+  '--u-menu-color': T('text-color', 'main'),
+  '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.14)',
+  '--u-menu-hover-color': T('text-color', 'title'),
+  '--u-menu-active-bg': 'rgba(96, 165, 250, 0.2)',
+  '--u-menu-active-color': T('text-color', 'white'),
+  '--u-menu-bg-color': T('bg-color', 'middle'),
+  '--u-radio-border': '#595959',
+  '--u-checkbox-border': '#595959'
+}
+
+function recordToDeclList(record: Record<string, string>): string[] {
+  return Object.entries(record).map(([k, v]) => `${k}: ${v}`)
+}
+
+export const componentCssVarsLightDecls: string[] = recordToDeclList(componentCssVarsLight)
+
+export const componentCssVarsDarkDecls: string[] = recordToDeclList(componentCssVarsDark)

package/src/theme/index.ts

@@ -1,3 +1,10 @@
+export {
+  componentCssVarsDark,
+  componentCssVarsDarkDecls,
+  componentCssVarsLight,
+  componentCssVarsLightDecls,
+  themeTokenVar
+} from './component-css-vars'
 export { UITheme } from './ui-theme'
 export { lightTheme } from './light'
 export { darkTheme } from './dark'

package/src/theme/type.ts

@@ -3,7 +3,7 @@
  */
 export type RGBColor = [number, number, number]
 
-/** 仅含全局 token；组件级 token 由各组件 SCSS 以 `--u-{component}-*` 声明 */
+/** 仅含全局 token；组件级 `--u-*` 由 `theme/component-css-vars.ts` 随 `loadTheme` 注入 */
 export type Theme = {
   /** 主题色 */
   color: {

package/src/theme/ui-theme.ts

@@ -2,6 +2,7 @@ import { isObj, o, str } from '@cat-kit/core'
 import { withUnit } from '@veltra/utils'
 import { reactive, toRaw, watch } from 'vue'
 
+import { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'
 import { mixColor } from './helper'
 import type { Theme } from './type'
 
@@ -219,8 +220,14 @@ export class UITheme {
 
   /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */
   static injectBuiltInThemes(light: UITheme, dark: UITheme): void {
-    const lightDecls = light.themeToDeclarationList(toRaw(light.theme))
-    const darkDecls = dark.themeToDeclarationList(toRaw(dark.theme))
+    const lightDecls = [
+      ...light.themeToDeclarationList(toRaw(light.theme)),
+      ...componentCssVarsLightDecls
+    ]
+    const darkDecls = [
+      ...dark.themeToDeclarationList(toRaw(dark.theme)),
+      ...componentCssVarsDarkDecls
+    ]
     const lightBlock = UITheme.declarationBlock(lightDecls)
     const darkBlock = UITheme.declarationBlock(darkDecls)
 
@@ -237,7 +244,7 @@ export class UITheme {
   }
 
   render(): void {
-    const decls = this.themeToDeclarationList(toRaw(this.theme))
+    const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentCssVarsLightDecls]
     const block = UITheme.declarationBlock(decls)
     const css = `html { ${block} }`
     UITheme.applyGlobalCSS(css)