@veltra/styles 1.2.22 → 1.2.23

package/dist/_functions.scss

@@ -3,6 +3,17 @@
 
 $namespace: 'u' !default;
 
+// 引用主题注入的 alpha token，如 color-a(color, 8, primary) → var(--u-color-primary-a-8)
+@function color-a($basename, $alpha, $nodes...) {
+  $suffix: '';
+
+  @each $node in $nodes {
+    $suffix: $suffix + '-' + $node;
+  }
+
+  @return var(--#{$namespace}-#{$basename}#{$suffix}-a-#{$alpha});
+}
+
 // 使用单个变量（全局主题 token，`--u-*`）
 @function use-var($basename, $nodes...) {
   $suffix: '';

package/dist/theme/helper.d.ts

@@ -11,6 +11,12 @@ declare function HEXToRGB(color: string): RGBColor;
  * @returns 混合结果的十六进制表示。
  */
 declare function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string;
+/** 将 `#RRGGBB` 转为指定不透明度百分比的 `rgba()`（等价于 color-mix N% + transparent） */
+declare function hexWithAlpha(hex: `#${string}`, alphaPercent: number): string;
+/** 别名：`ratio` 为 0–1 时不透明度（0.08 → 8%） */
+declare function mixColorWithAlpha(color: `#${string}`, ratio: number): string;
+/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */
+declare function hexRgbOnly(hex: string): `#${string}`;
 declare function defineBySize(variable: Record<'small' | 'default' | 'large', number>): Record<'small' | 'default' | 'large', number>;
 /**
  * 引用全局主题 CSS 变量（`--u-*` 命名空间）
@@ -18,5 +24,5 @@ declare function defineBySize(variable: Record<'small' | 'default' | 'large', nu
  */
 declare function cssVar(prop: string): string;
 //#endregion
-export { HEXToRGB, cssVar, defineBySize, mixColor };
+export { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, mixColor, mixColorWithAlpha };
 //# sourceMappingURL=helper.d.ts.map

package/dist/theme/helper.js

@@ -41,6 +41,21 @@ function mixColor(color1, color2, ratio) {
 		return hex.length === 1 ? "0" + hex : hex;
 	}).join("");
 }
+/** 将 `#RRGGBB` 转为指定不透明度百分比的 `rgba()`（等价于 color-mix N% + transparent） */
+function hexWithAlpha(hex, alphaPercent) {
+	const [r, g, b] = HEXToRGB(hex);
+	return `rgba(${r}, ${g}, ${b}, ${Math.round(alphaPercent / 100 * 1e3) / 1e3})`;
+}
+/** 别名：`ratio` 为 0–1 时不透明度（0.08 → 8%） */
+function mixColorWithAlpha(color, ratio) {
+	return hexWithAlpha(color, ratio * 100);
+}
+/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */
+function hexRgbOnly(hex) {
+	const normalized = hex.replace(/^#/, "");
+	if (normalized.length === 8) return `#${normalized.slice(0, 6)}`;
+	return hex;
+}
 function defineBySize(variable) {
 	return variable;
 }
@@ -52,6 +67,6 @@ function cssVar(prop) {
 	return `var(--u-${prop})`;
 }
 //#endregion
-export { HEXToRGB, cssVar, defineBySize, mixColor };
+export { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, mixColor, mixColorWithAlpha };
 
 //# sourceMappingURL=helper.js.map

package/dist/theme/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","names":[],"sources":["../../src/theme/helper.ts"],"sourcesContent":["import type { RGBColor } from './type'\n\n/** 实现十六进制颜色转RGB颜色，包括透明度 */\nexport function HEXToRGB(color: string): RGBColor {\n  // 移除可能存在的 '#' 前缀\n  let hex = color.replace(/^#/, '')\n  let [r, g, b] = [0, 0, 0]\n\n  if (hex.length === 3) {\n    const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]\n    hex = `${r10}${r10}${g10}${g10}${b10}${b10}`\n  }\n\n  r = parseInt(hex.slice(0, 2), 16)\n  g = parseInt(hex.slice(2, 4), 16)\n  b = parseInt(hex.slice(4, 6), 16)\n\n  return [r, g, b]\n}\n\n/**\n * 混合两个颜色，并返回混合结果的十六进制表示。\n * @param color1 - 第一个颜色，格式为`#RRGGBB`。\n * @param color2 - 第二个颜色，格式为`#RRGGBB`。\n * @param ratio - 颜色混合的比例，取值范围为0到1。\n * @returns 混合结果的十六进制表示。\n */\nexport function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {\n  if (ratio > 1) throw new Error('ratio的值在0-1之间')\n  const color1RGB = HEXToRGB(color1)\n  const color2RGB = HEXToRGB(color2)\n\n  const color1Ratio = 1 - ratio\n\n  return (\n    '#' +\n    color1RGB\n      .map((n, i) => {\n        const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)\n        return hex.length === 1 ? '0' + hex : hex\n      })\n      .join('')\n  )\n}\n\nexport function defineBySize(\n  variable: Record<'small' | 'default' | 'large', number>\n): Record<'small' | 'default' | 'large', number> {\n  return variable\n}\n\n/**\n * 引用全局主题 CSS 变量（`--u-*` 命名空间）\n * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`\n */\nexport function cssVar(prop: string): string {\n  return `var(--u-${prop})`\n}\n"],"mappings":";;AAGA,SAAgB,SAAS,OAAyB;CAEhD,IAAI,MAAM,MAAM,QAAQ,MAAM,EAAE;CAChC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;CAAC;CAExB,IAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;EAAG;EAClD,MAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;CACzC;CAEA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAEhC,OAAO;EAAC;EAAG;EAAG;CAAC;AACjB;;;;;;;;AASA,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;CAC1F,IAAI,QAAQ,GAAG,MAAM,IAAI,MAAM,eAAe;CAC9C,MAAM,YAAY,SAAS,MAAM;CACjC,MAAM,YAAY,SAAS,MAAM;CAEjC,MAAM,cAAc,IAAI;CAExB,OACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,KAAK,CAAC,CAAC,SAAS,EAAE;EAC3E,OAAO,IAAI,WAAW,IAAI,MAAM,MAAM;CACxC,CAAC,CAAC,CACD,KAAK,EAAE;AAEd;AAEA,SAAgB,aACd,UAC+C;CAC/C,OAAO;AACT;;;;;AAMA,SAAgB,OAAO,MAAsB;CAC3C,OAAO,WAAW,KAAK;AACzB"}
+{"version":3,"file":"helper.js","names":[],"sources":["../../src/theme/helper.ts"],"sourcesContent":["import type { RGBColor } from './type'\n\n/** 实现十六进制颜色转RGB颜色，包括透明度 */\nexport function HEXToRGB(color: string): RGBColor {\n  // 移除可能存在的 '#' 前缀\n  let hex = color.replace(/^#/, '')\n  let [r, g, b] = [0, 0, 0]\n\n  if (hex.length === 3) {\n    const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]\n    hex = `${r10}${r10}${g10}${g10}${b10}${b10}`\n  }\n\n  r = parseInt(hex.slice(0, 2), 16)\n  g = parseInt(hex.slice(2, 4), 16)\n  b = parseInt(hex.slice(4, 6), 16)\n\n  return [r, g, b]\n}\n\n/**\n * 混合两个颜色，并返回混合结果的十六进制表示。\n * @param color1 - 第一个颜色，格式为`#RRGGBB`。\n * @param color2 - 第二个颜色，格式为`#RRGGBB`。\n * @param ratio - 颜色混合的比例，取值范围为0到1。\n * @returns 混合结果的十六进制表示。\n */\nexport function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {\n  if (ratio > 1) throw new Error('ratio的值在0-1之间')\n  const color1RGB = HEXToRGB(color1)\n  const color2RGB = HEXToRGB(color2)\n\n  const color1Ratio = 1 - ratio\n\n  return (\n    '#' +\n    color1RGB\n      .map((n, i) => {\n        const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)\n        return hex.length === 1 ? '0' + hex : hex\n      })\n      .join('')\n  )\n}\n\n/** 将 `#RRGGBB` 转为指定不透明度百分比的 `rgba()`（等价于 color-mix N% + transparent） */\nexport function hexWithAlpha(hex: `#${string}`, alphaPercent: number): string {\n  const [r, g, b] = HEXToRGB(hex)\n  const alpha = Math.round((alphaPercent / 100) * 1000) / 1000\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`\n}\n\n/** 别名：`ratio` 为 0–1 时不透明度（0.08 → 8%） */\nexport function mixColorWithAlpha(color: `#${string}`, ratio: number): string {\n  return hexWithAlpha(color, ratio * 100)\n}\n\n/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */\nexport function hexRgbOnly(hex: string): `#${string}` {\n  const normalized = hex.replace(/^#/, '')\n  if (normalized.length === 8) {\n    return `#${normalized.slice(0, 6)}` as `#${string}`\n  }\n  return hex as `#${string}`\n}\n\nexport function defineBySize(\n  variable: Record<'small' | 'default' | 'large', number>\n): Record<'small' | 'default' | 'large', number> {\n  return variable\n}\n\n/**\n * 引用全局主题 CSS 变量（`--u-*` 命名空间）\n * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`\n */\nexport function cssVar(prop: string): string {\n  return `var(--u-${prop})`\n}\n"],"mappings":";;AAGA,SAAgB,SAAS,OAAyB;CAEhD,IAAI,MAAM,MAAM,QAAQ,MAAM,EAAE;CAChC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;CAAC;CAExB,IAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;EAAG;EAClD,MAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;CACzC;CAEA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAEhC,OAAO;EAAC;EAAG;EAAG;CAAC;AACjB;;;;;;;;AASA,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;CAC1F,IAAI,QAAQ,GAAG,MAAM,IAAI,MAAM,eAAe;CAC9C,MAAM,YAAY,SAAS,MAAM;CACjC,MAAM,YAAY,SAAS,MAAM;CAEjC,MAAM,cAAc,IAAI;CAExB,OACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,KAAK,CAAC,CAAC,SAAS,EAAE;EAC3E,OAAO,IAAI,WAAW,IAAI,MAAM,MAAM;CACxC,CAAC,CAAC,CACD,KAAK,EAAE;AAEd;;AAGA,SAAgB,aAAa,KAAmB,cAA8B;CAC5E,MAAM,CAAC,GAAG,GAAG,KAAK,SAAS,GAAG;CAE9B,OAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IADf,KAAK,MAAO,eAAe,MAAO,GAAI,IAAI,IACjB;AACzC;;AAGA,SAAgB,kBAAkB,OAAqB,OAAuB;CAC5E,OAAO,aAAa,OAAO,QAAQ,GAAG;AACxC;;AAGA,SAAgB,WAAW,KAA2B;CACpD,MAAM,aAAa,IAAI,QAAQ,MAAM,EAAE;CACvC,IAAI,WAAW,WAAW,GACxB,OAAO,IAAI,WAAW,MAAM,GAAG,CAAC;CAElC,OAAO;AACT;AAEA,SAAgB,aACd,UAC+C;CAC/C,OAAO;AACT;;;;;AAMA,SAAgB,OAAO,MAAsB;CAC3C,OAAO,WAAW,KAAK;AACzB"}

package/dist/theme/index.d.ts

@@ -6,5 +6,5 @@ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
 import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
 import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
 import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
-import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
-export { HEXToRGB, type RGBColor, type Theme, UITheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme };
+import { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, mixColor, mixColorWithAlpha } from "./helper.js";
+export { HEXToRGB, type RGBColor, type Theme, UITheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, hexRgbOnly, hexWithAlpha, lightTheme, loadTheme, mixColor, mixColorWithAlpha, setTheme, shadcnDarkTheme, shadcnLightTheme };

package/dist/theme/index.js

@@ -1,4 +1,4 @@
-import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
+import { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, mixColor, mixColorWithAlpha } from "./helper.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./presets/light.js";
 import { darkTheme } from "./presets/dark.js";
@@ -6,4 +6,4 @@ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
 import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
 import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
 import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
-export { HEXToRGB, UITheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme };
+export { HEXToRGB, UITheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, hexRgbOnly, hexWithAlpha, lightTheme, loadTheme, mixColor, mixColorWithAlpha, setTheme, shadcnDarkTheme, shadcnLightTheme };

package/dist/theme/ui-theme.d.ts

@@ -16,6 +16,10 @@ declare class UITheme {
   private renderTypeColor;
   private renderShadow;
   private renderBGColorAlpha;
+  /** 语义色 / 边框 / 阴影 / 文本色的 alpha token（替代 color-mix + transparent） */
+  private renderAlphaTokens;
+  /** 组件级两色混合 token（collapse / batch-edit / kbd） */
+  private renderComponentMixTokens;
   private renderBGFilter;
   /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */
   themeToDeclarationList(theme: Theme): string[];

package/dist/theme/ui-theme.js

@@ -1,5 +1,5 @@
 import { componentCssVarsDarkDecls, componentCssVarsLightDecls } from "./component-css-vars.js";
-import { mixColor } from "./helper.js";
+import { hexRgbOnly, hexWithAlpha, mixColor } from "./helper.js";
 import { isObj, str } from "@cat-kit/core";
 import { withUnit } from "@veltra/utils";
 import { reactive, toRaw, watch } from "vue";
@@ -63,7 +63,78 @@ var UITheme = class UITheme {
 	}
 	renderBGColorAlpha(theme) {
 		const { color } = theme.bg;
-		return Object.keys(color).map((type) => `--u-bg-color-${type}-alpha: ${color[type]}aa`).join(";");
+		const alphas = [70];
+		const lines = Object.keys(color).map((type) => `--u-bg-color-${type}-alpha: ${color[type]}aa`);
+		for (const type of Object.keys(color)) {
+			const hex = color[type];
+			for (const a of alphas) lines.push(`--u-bg-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`);
+		}
+		return lines.join(";");
+	}
+	/** 语义色 / 边框 / 阴影 / 文本色的 alpha token（替代 color-mix + transparent） */
+	renderAlphaTokens(theme) {
+		const alphas = [
+			4,
+			5,
+			8,
+			10,
+			11,
+			16,
+			22,
+			28,
+			35,
+			40,
+			50,
+			52,
+			60,
+			70,
+			86
+		];
+		const lines = [];
+		for (const type of Object.keys(theme.color)) {
+			const hex = theme.color[type];
+			for (const a of alphas) lines.push(`--u-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`);
+		}
+		const borderHex = theme.border.color;
+		for (const a of alphas) lines.push(`--u-border-color-a-${a}: ${hexWithAlpha(borderHex, a)}`);
+		const shadowHex = hexRgbOnly(theme.shadow.color);
+		for (const a of alphas) lines.push(`--u-shadow-color-a-${a}: ${hexWithAlpha(shadowHex, a)}`);
+		const textColor = theme["text-color"];
+		for (const type of Object.keys(textColor)) {
+			const value = textColor[type];
+			if (typeof value === "string" && /^#[0-9a-fA-F]{6}$/.test(value)) {
+				const hex = value;
+				for (const a of alphas) lines.push(`--u-text-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`);
+			}
+		}
+		return lines.join(";");
+	}
+	/** 组件级两色混合 token（collapse / batch-edit / kbd） */
+	renderComponentMixTokens(theme) {
+		const hover = theme.bg.color.hover;
+		const top = theme.bg.color.top;
+		const black = theme.bg.color.black;
+		const primary = theme.color.primary;
+		const borderColor = theme.border.color;
+		const shadowColor = hexRgbOnly(theme.shadow.color);
+		const itemBg = mixColor(hover, top, .28);
+		const itemHoverBg = mixColor(primary, itemBg, .96);
+		const itemActiveBg = mixColor(primary, itemBg, .95);
+		const headerActiveBg = mixColor(primary, itemBg, .92);
+		const contentBg = mixColor(itemActiveBg, top, .58);
+		const formHeaderBg = mixColor(top, hover, .04);
+		const kbdInset = mixColor(top, black, .25);
+		return [
+			`--u-collapse-item-bg: ${itemBg}`,
+			`--u-collapse-item-hover-bg: ${itemHoverBg}`,
+			`--u-collapse-item-active-bg: ${itemActiveBg}`,
+			`--u-collapse-header-active-bg: ${headerActiveBg}`,
+			`--u-collapse-content-bg: ${contentBg}`,
+			`--u-batch-edit-form-header-bg: ${formHeaderBg}`,
+			`--u-kbd-inset-shadow: ${kbdInset}`,
+			`--u-kbd-border-shadow: ${hexWithAlpha(borderColor, 50)}`,
+			`--u-kbd-drop-shadow: ${hexWithAlpha(shadowColor, 60)}`
+		].join(";");
 	}
 	renderBGFilter(theme) {
 		const { filter } = theme.bg;
@@ -77,6 +148,8 @@ var UITheme = class UITheme {
 			this.renderTypeColor(theme),
 			this.renderShadow(theme),
 			this.renderBGColorAlpha(theme),
+			this.renderAlphaTokens(theme),
+			this.renderComponentMixTokens(theme),
 			this.renderBGFilter(theme),
 			this.renderBorder(theme)
 		];

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, 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\nexport class UITheme {\n  static themeID = 'ultra-ui-theme'\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 shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n      (key) => key !== 'mutedColor'\n    )\n    const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n    return [\n      `--u-border: ${border}`,\n      `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n    ].join(';')\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    const value = filter.blur === 'none' ? 'none' : `${filter.blur} ${filter.saturate}`\n    return `--u-bg-filter: ${value}`\n  }\n\n  /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */\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 declarationBlock(decls: string[]): string {\n    return decls.join(';')\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 isDark =\n      typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'\n    const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n    const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]\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\n    function deepMerge(target: any, source: any) {\n      if (typeof source !== 'object' || source === null) return\n      Object.keys(source).forEach((key) => {\n        const sourceVal = source[key]\n        if (typeof sourceVal === 'object' && sourceVal !== null && !Array.isArray(sourceVal)) {\n          if (typeof target[key] !== 'object' || target[key] === null) {\n            target[key] = {}\n          }\n          deepMerge(target[key], sourceVal)\n        } else {\n          target[key] = sourceVal\n        }\n      })\n    }\n\n    deepMerge(base, customTheme)\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, 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 { hexRgbOnly, hexWithAlpha, 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\nexport class UITheme {\n  static themeID = 'ultra-ui-theme'\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 shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n      (key) => key !== 'mutedColor'\n    )\n    const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n    return [\n      `--u-border: ${border}`,\n      `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n    ].join(';')\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    const alphas = [70]\n    const lines: string[] = Object.keys(color).map(\n      (type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`\n    )\n    for (const type of Object.keys(color)) {\n      const hex = color[type as keyof typeof color] as `#${string}`\n      for (const a of alphas) {\n        lines.push(`--u-bg-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`)\n      }\n    }\n    return lines.join(';')\n  }\n\n  /** 语义色 / 边框 / 阴影 / 文本色的 alpha token（替代 color-mix + transparent） */\n  private renderAlphaTokens(theme: Theme): string {\n    const alphas = [4, 5, 8, 10, 11, 16, 22, 28, 35, 40, 50, 52, 60, 70, 86]\n    const lines: string[] = []\n\n    for (const type of Object.keys(theme.color)) {\n      const hex = theme.color[type as keyof typeof theme.color] as `#${string}`\n      for (const a of alphas) {\n        lines.push(`--u-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`)\n      }\n    }\n\n    const borderHex = theme.border.color as `#${string}`\n    for (const a of alphas) {\n      lines.push(`--u-border-color-a-${a}: ${hexWithAlpha(borderHex, a)}`)\n    }\n\n    const shadowHex = hexRgbOnly(theme.shadow.color)\n    for (const a of alphas) {\n      lines.push(`--u-shadow-color-a-${a}: ${hexWithAlpha(shadowHex, a)}`)\n    }\n\n    const textColor = theme['text-color']\n    for (const type of Object.keys(textColor)) {\n      const value = textColor[type as keyof typeof textColor]\n      if (typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value)) {\n        const hex = value as `#${string}`\n        for (const a of alphas) {\n          lines.push(`--u-text-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`)\n        }\n      }\n    }\n\n    return lines.join(';')\n  }\n\n  /** 组件级两色混合 token（collapse / batch-edit / kbd） */\n  private renderComponentMixTokens(theme: Theme): string {\n    const hover = theme.bg.color.hover as `#${string}`\n    const top = theme.bg.color.top as `#${string}`\n    const black = theme.bg.color.black as `#${string}`\n    const primary = theme.color.primary as `#${string}`\n    const borderColor = theme.border.color as `#${string}`\n    const shadowColor = hexRgbOnly(theme.shadow.color)\n\n    const itemBg = mixColor(hover, top, 0.28)\n    const itemHoverBg = mixColor(primary, itemBg as `#${string}`, 0.96)\n    const itemActiveBg = mixColor(primary, itemBg as `#${string}`, 0.95)\n    const headerActiveBg = mixColor(primary, itemBg as `#${string}`, 0.92)\n    const contentBg = mixColor(itemActiveBg as `#${string}`, top, 0.58)\n\n    const formHeaderBg = mixColor(top, hover, 0.04)\n\n    const kbdInset = mixColor(top, black, 0.25)\n\n    const lines = [\n      `--u-collapse-item-bg: ${itemBg}`,\n      `--u-collapse-item-hover-bg: ${itemHoverBg}`,\n      `--u-collapse-item-active-bg: ${itemActiveBg}`,\n      `--u-collapse-header-active-bg: ${headerActiveBg}`,\n      `--u-collapse-content-bg: ${contentBg}`,\n      `--u-batch-edit-form-header-bg: ${formHeaderBg}`,\n      `--u-kbd-inset-shadow: ${kbdInset}`,\n      `--u-kbd-border-shadow: ${hexWithAlpha(borderColor, 50)}`,\n      `--u-kbd-drop-shadow: ${hexWithAlpha(shadowColor, 60)}`\n    ]\n\n    return lines.join(';')\n  }\n\n  private renderBGFilter(theme: Theme): string {\n    const { filter } = theme.bg\n    const value = filter.blur === 'none' ? 'none' : `${filter.blur} ${filter.saturate}`\n    return `--u-bg-filter: ${value}`\n  }\n\n  /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */\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.renderAlphaTokens(theme),\n      this.renderComponentMixTokens(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 declarationBlock(decls: string[]): string {\n    return decls.join(';')\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 isDark =\n      typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'\n    const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n    const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]\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\n    function deepMerge(target: any, source: any) {\n      if (typeof source !== 'object' || source === null) return\n      Object.keys(source).forEach((key) => {\n        const sourceVal = source[key]\n        if (typeof sourceVal === 'object' && sourceVal !== null && !Array.isArray(sourceVal)) {\n          if (typeof target[key] !== 'object' || target[key] === null) {\n            target[key] = {}\n          }\n          deepMerge(target[key], sourceVal)\n        } else {\n          target[key] = sourceVal\n        }\n      })\n    }\n\n    deepMerge(base, customTheme)\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.2.22",
+  "version": "1.2.23",
   "files": [
     "dist",
     "src"
@@ -36,8 +36,8 @@
   },
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
-    "@veltra/compositions": "1.2.22",
-    "@veltra/utils": "1.2.22",
+    "@veltra/compositions": "1.2.23",
+    "@veltra/utils": "1.2.23",
     "vue": ">=3.5.39"
   }
 }

package/src/_functions.scss

@@ -3,6 +3,17 @@
 
 $namespace: 'u' !default;
 
+// 引用主题注入的 alpha token，如 color-a(color, 8, primary) → var(--u-color-primary-a-8)
+@function color-a($basename, $alpha, $nodes...) {
+  $suffix: '';
+
+  @each $node in $nodes {
+    $suffix: $suffix + '-' + $node;
+  }
+
+  @return var(--#{$namespace}-#{$basename}#{$suffix}-a-#{$alpha});
+}
+
 // 使用单个变量（全局主题 token，`--u-*`）
 @function use-var($basename, $nodes...) {
   $suffix: '';

package/src/theme/__test__/ui-theme.test.ts

@@ -30,4 +30,18 @@ describe('UITheme', () => {
     expect(componentCssVarsLight['--u-collapse-title-color']).toBe('var(--u-text-color-main)')
     expect(componentCssVarsDark['--u-collapse-title-color']).toBe('var(--u-text-color-main)')
   })
+
+  it('renderAlphaTokens emits semantic color alpha vars', () => {
+    const decls = lightTheme.themeToDeclarationList(lightTheme.theme)
+    expect(decls.some((d) => d.startsWith('--u-color-primary-a-8:'))).toBe(true)
+    expect(decls.some((d) => d.startsWith('--u-border-color-a-52:'))).toBe(true)
+    expect(decls.some((d) => d.startsWith('--u-text-color-second-a-28:'))).toBe(true)
+  })
+
+  it('renderComponentMixTokens emits collapse and kbd vars', () => {
+    const decls = lightTheme.themeToDeclarationList(lightTheme.theme)
+    expect(decls.some((d) => d.startsWith('--u-collapse-item-bg:'))).toBe(true)
+    expect(decls.some((d) => d.startsWith('--u-kbd-inset-shadow:'))).toBe(true)
+    expect(decls.some((d) => d.startsWith('--u-batch-edit-form-header-bg:'))).toBe(true)
+  })
 })

package/src/theme/helper.ts

@@ -43,6 +43,27 @@ export function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: numb
   )
 }
 
+/** 将 `#RRGGBB` 转为指定不透明度百分比的 `rgba()`（等价于 color-mix N% + transparent） */
+export function hexWithAlpha(hex: `#${string}`, alphaPercent: number): string {
+  const [r, g, b] = HEXToRGB(hex)
+  const alpha = Math.round((alphaPercent / 100) * 1000) / 1000
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+/** 别名：`ratio` 为 0–1 时不透明度（0.08 → 8%） */
+export function mixColorWithAlpha(color: `#${string}`, ratio: number): string {
+  return hexWithAlpha(color, ratio * 100)
+}
+
+/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */
+export function hexRgbOnly(hex: string): `#${string}` {
+  const normalized = hex.replace(/^#/, '')
+  if (normalized.length === 8) {
+    return `#${normalized.slice(0, 6)}` as `#${string}`
+  }
+  return hex as `#${string}`
+}
+
 export function defineBySize(
   variable: Record<'small' | 'default' | 'large', number>
 ): Record<'small' | 'default' | 'large', number> {

package/src/theme/ui-theme.ts

@@ -3,7 +3,7 @@ import { withUnit } from '@veltra/utils'
 import { reactive, toRaw, watch } from 'vue'
 
 import { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'
-import { mixColor } from './helper'
+import { hexRgbOnly, hexWithAlpha, mixColor } from './helper'
 import type { Theme } from './type'
 
 type RecursivePartial<T> = {
@@ -111,9 +111,87 @@ export class UITheme {
 
   private renderBGColorAlpha(theme: Theme): string {
     const { color } = theme.bg
-    return Object.keys(color)
-      .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)
-      .join(';')
+    const alphas = [70]
+    const lines: string[] = Object.keys(color).map(
+      (type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`
+    )
+    for (const type of Object.keys(color)) {
+      const hex = color[type as keyof typeof color] as `#${string}`
+      for (const a of alphas) {
+        lines.push(`--u-bg-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`)
+      }
+    }
+    return lines.join(';')
+  }
+
+  /** 语义色 / 边框 / 阴影 / 文本色的 alpha token（替代 color-mix + transparent） */
+  private renderAlphaTokens(theme: Theme): string {
+    const alphas = [4, 5, 8, 10, 11, 16, 22, 28, 35, 40, 50, 52, 60, 70, 86]
+    const lines: string[] = []
+
+    for (const type of Object.keys(theme.color)) {
+      const hex = theme.color[type as keyof typeof theme.color] as `#${string}`
+      for (const a of alphas) {
+        lines.push(`--u-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`)
+      }
+    }
+
+    const borderHex = theme.border.color as `#${string}`
+    for (const a of alphas) {
+      lines.push(`--u-border-color-a-${a}: ${hexWithAlpha(borderHex, a)}`)
+    }
+
+    const shadowHex = hexRgbOnly(theme.shadow.color)
+    for (const a of alphas) {
+      lines.push(`--u-shadow-color-a-${a}: ${hexWithAlpha(shadowHex, a)}`)
+    }
+
+    const textColor = theme['text-color']
+    for (const type of Object.keys(textColor)) {
+      const value = textColor[type as keyof typeof textColor]
+      if (typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value)) {
+        const hex = value as `#${string}`
+        for (const a of alphas) {
+          lines.push(`--u-text-color-${type}-a-${a}: ${hexWithAlpha(hex, a)}`)
+        }
+      }
+    }
+
+    return lines.join(';')
+  }
+
+  /** 组件级两色混合 token（collapse / batch-edit / kbd） */
+  private renderComponentMixTokens(theme: Theme): string {
+    const hover = theme.bg.color.hover as `#${string}`
+    const top = theme.bg.color.top as `#${string}`
+    const black = theme.bg.color.black as `#${string}`
+    const primary = theme.color.primary as `#${string}`
+    const borderColor = theme.border.color as `#${string}`
+    const shadowColor = hexRgbOnly(theme.shadow.color)
+
+    const itemBg = mixColor(hover, top, 0.28)
+    const itemHoverBg = mixColor(primary, itemBg as `#${string}`, 0.96)
+    const itemActiveBg = mixColor(primary, itemBg as `#${string}`, 0.95)
+    const headerActiveBg = mixColor(primary, itemBg as `#${string}`, 0.92)
+    const contentBg = mixColor(itemActiveBg as `#${string}`, top, 0.58)
+
+    const formHeaderBg = mixColor(top, hover, 0.04)
+
+    const kbdInset = mixColor(top, black, 0.25)
+
+    const lines = [
+      `--u-collapse-item-bg: ${itemBg}`,
+      `--u-collapse-item-hover-bg: ${itemHoverBg}`,
+      `--u-collapse-item-active-bg: ${itemActiveBg}`,
+      `--u-collapse-header-active-bg: ${headerActiveBg}`,
+      `--u-collapse-content-bg: ${contentBg}`,
+      `--u-batch-edit-form-header-bg: ${formHeaderBg}`,
+      `--u-kbd-inset-shadow: ${kbdInset}`,
+      `--u-kbd-border-shadow: ${hexWithAlpha(borderColor, 50)}`,
+      `--u-kbd-drop-shadow: ${hexWithAlpha(shadowColor, 60)}`
+    ]
+
+    return lines.join(';')
   }
 
   private renderBGFilter(theme: Theme): string {
@@ -130,6 +208,8 @@ export class UITheme {
       this.renderTypeColor(theme),
       this.renderShadow(theme),
       this.renderBGColorAlpha(theme),
+      this.renderAlphaTokens(theme),
+      this.renderComponentMixTokens(theme),
       this.renderBGFilter(theme),
       this.renderBorder(theme)
     ]