@veltra/styles 1.13.3 → 1.14.0

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

@@ -15,9 +15,18 @@ export declare const componentCssVarsLightDecls: string[];
 export declare const componentCssVarsDarkDecls: string[];
 /** 侧栏外观变体：dark 深底浅字 / light 浅底深字 */
 export type NavSidebarVariant = 'dark' | 'light';
-/** 某主题系列 + 侧栏变体下的 nav 外观 token（键为 `--u-nav-*`） */
+/** 侧栏实际底色色调：dark 深底 / light 浅底 */
+export type NavSurfaceTone = 'dark' | 'light';
+/**
+ * 某主题系列 + 菜单变体下侧栏的实际底色色调。
+ * 深色系列主题的两个变体都是深底（light 变体只是比内容区提亮一档）。
+ */
+export declare function navSurfaceTone(series: 'light' | 'dark', variant: NavSidebarVariant): NavSurfaceTone;
+/** 某主题系列 + 侧栏变体下的 nav token（外观 + 表面装饰，键为 `--u-nav-*`） */
 export declare function navSidebarTokens(series: 'light' | 'dark', variant: NavSidebarVariant): Record<string, string>;
-/** 解析某主题系列 + 侧栏变体下的 nav 外观 token 声明列表 */
+/** 某主题系列 + 侧栏变体下的 nav 表面装饰 token（键为 `--u-nav-surface-*`） */
+export declare function navSurfaceTokens(series: 'light' | 'dark', variant: NavSidebarVariant): Record<string, string>;
+/** 解析某主题系列 + 侧栏变体下的 nav token 声明列表 */
 export declare function resolveNavSidebarDecls(series: 'light' | 'dark', variant: NavSidebarVariant): string[];
 //#endregion
 //# sourceMappingURL=component-css-vars.d.ts.map

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

@@ -181,6 +181,49 @@ function recordToDeclList(record) {
 }
 const componentCssVarsLightDecls = recordToDeclList(componentCssVarsLight);
 const componentCssVarsDarkDecls = recordToDeclList(componentCssVarsDark);
+/**
+* 某主题系列 + 菜单变体下侧栏的实际底色色调。
+* 深色系列主题的两个变体都是深底（light 变体只是比内容区提亮一档）。
+*/
+function navSurfaceTone(series, variant) {
+	return series === "dark" || variant === "dark" ? "dark" : "light";
+}
+/** 深底侧栏的表面装饰 token */
+const navSurfaceDarkTone = {
+	"--u-nav-surface-overlay": `radial-gradient(120% 70% at 0% 0%, ${T("color", "primary", "a", "16")}, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3))`,
+	"--u-nav-surface-hairline": "rgba(255, 255, 255, 0.07)",
+	"--u-nav-surface-chip-bg": "rgba(255, 255, 255, 0.055)",
+	"--u-nav-surface-chip-border": "rgba(255, 255, 255, 0.08)",
+	"--u-nav-surface-chip-hover-bg": "rgba(255, 255, 255, 0.09)",
+	"--u-nav-surface-mark-ring": "rgba(255, 255, 255, 0.14)",
+	"--u-nav-surface-active-gradient": `linear-gradient(90deg, ${T("color", "primary", "a", "35")}, ${T("color", "primary", "a", "5")})`,
+	"--u-nav-surface-active-ring": T("color", "primary", "a", "16"),
+	"--u-nav-surface-accent": T("color", "primary", "light", "5"),
+	"--u-nav-surface-scrollbar": "rgba(255, 255, 255, 0.22)",
+	"--u-nav-surface-scrollbar-hover": "rgba(255, 255, 255, 0.4)"
+};
+/** 浅底侧栏的表面装饰 token */
+const navSurfaceLightTone = {
+	"--u-nav-surface-overlay": `radial-gradient(120% 70% at 0% 0%, ${T("color", "primary", "a", "8")}, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.02))`,
+	"--u-nav-surface-hairline": T("border", "color"),
+	"--u-nav-surface-chip-bg": "rgba(15, 23, 42, 0.04)",
+	"--u-nav-surface-chip-border": T("border", "color"),
+	"--u-nav-surface-chip-hover-bg": "rgba(15, 23, 42, 0.07)",
+	"--u-nav-surface-mark-ring": "rgba(15, 23, 42, 0.1)",
+	"--u-nav-surface-active-gradient": `linear-gradient(90deg, ${T("color", "primary", "a", "16")}, ${T("color", "primary", "a", "4")})`,
+	"--u-nav-surface-active-ring": T("color", "primary", "a", "8"),
+	"--u-nav-surface-accent": T("color", "primary"),
+	"--u-nav-surface-scrollbar": T("text-color", "assist", "a", "40"),
+	"--u-nav-surface-scrollbar-hover": T("text-color", "assist", "a", "60")
+};
+/** 给内置外观 token 补上与其实际底色色调匹配的表面装饰 token */
+function withNavSurface(appearance, series, variant) {
+	const surface = navSurfaceTone(series, variant) === "dark" ? navSurfaceDarkTone : navSurfaceLightTone;
+	return {
+		...appearance,
+		...surface
+	};
+}
 /** 深侧栏 · 浅色主题下：深底（text-color.title）+ 浅前景，与浅色内容区拉开区分度 */
 const navSidebarDarkInLight = {
 	"--u-nav-bg-color": T("text-color", "title"),
@@ -194,14 +237,14 @@ const navSidebarDarkInLight = {
 	"--u-nav-sub-border-color": "rgba(255, 255, 255, 0.15)",
 	"--u-nav-rail-bg": "rgba(0, 0, 0, 0.2)"
 };
-/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景 */
+/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景；选中文字加深，保证 13px 正文的对比度 */
 const navSidebarLightInLight = {
 	"--u-nav-bg-color": T("bg-color", "middle"),
 	"--u-nav-color": T("text-color", "title"),
 	"--u-nav-hover-bg": T("text-color", "title", "a", "8"),
 	"--u-nav-hover-color": T("text-color", "title"),
 	"--u-nav-active-bg": T("color", "primary", "a", "10"),
-	"--u-nav-active-color": T("color", "primary", "dark", "1"),
+	"--u-nav-active-color": T("color", "primary", "dark", "3"),
 	"--u-nav-strong-color": T("text-color", "title"),
 	"--u-nav-second-color": T("text-color", "second"),
 	"--u-nav-sub-border-color": T("border", "color", "a", "52"),
@@ -220,14 +263,14 @@ const navSidebarDarkInDark = {
 	"--u-nav-sub-border-color": T("border", "color", "a", "52"),
 	"--u-nav-rail-bg": T("bg-color", "bottom")
 };
-/** 浅侧栏 · 深色主题下：提亮侧栏（与深色内容区反向对比） */
+/** 浅侧栏 · 深色主题下：提亮侧栏（与深色内容区反向对比）；表面仍是深底，选中文字用白色保证对比度 */
 const navSidebarLightInDark = {
 	"--u-nav-bg-color": T("bg-color", "top"),
 	"--u-nav-color": T("text-color", "title"),
 	"--u-nav-hover-bg": T("text-color", "title", "a", "8"),
 	"--u-nav-hover-color": T("text-color", "title"),
 	"--u-nav-active-bg": T("color", "primary", "a", "22"),
-	"--u-nav-active-color": T("color", "primary"),
+	"--u-nav-active-color": T("text-color", "white"),
 	"--u-nav-strong-color": T("text-color", "title"),
 	"--u-nav-second-color": T("text-color", "second"),
 	"--u-nav-sub-border-color": T("border", "color", "a", "52"),
@@ -235,23 +278,27 @@ const navSidebarLightInDark = {
 };
 const navSidebarCssVars = {
 	light: {
-		dark: navSidebarDarkInLight,
-		light: navSidebarLightInLight
+		dark: withNavSurface(navSidebarDarkInLight, "light", "dark"),
+		light: withNavSurface(navSidebarLightInLight, "light", "light")
 	},
 	dark: {
-		dark: navSidebarDarkInDark,
-		light: navSidebarLightInDark
+		dark: withNavSurface(navSidebarDarkInDark, "dark", "dark"),
+		light: withNavSurface(navSidebarLightInDark, "dark", "light")
 	}
 };
-/** 某主题系列 + 侧栏变体下的 nav 外观 token（键为 `--u-nav-*`） */
+/** 某主题系列 + 侧栏变体下的 nav token（外观 + 表面装饰，键为 `--u-nav-*`） */
 function navSidebarTokens(series, variant) {
 	return { ...navSidebarCssVars[series][variant] };
 }
-/** 解析某主题系列 + 侧栏变体下的 nav 外观 token 声明列表 */
+/** 某主题系列 + 侧栏变体下的 nav 表面装饰 token（键为 `--u-nav-surface-*`） */
+function navSurfaceTokens(series, variant) {
+	return { ...navSurfaceTone(series, variant) === "dark" ? navSurfaceDarkTone : navSurfaceLightTone };
+}
+/** 解析某主题系列 + 侧栏变体下的 nav token 声明列表 */
 function resolveNavSidebarDecls(series, variant) {
 	return recordToDeclList(navSidebarCssVars[series][variant]);
 }
 //#endregion
-export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, resolveNavSidebarDecls, themeTokenVar };
+export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, navSurfaceTokens, navSurfaceTone, resolveNavSidebarDecls, themeTokenVar };
 
 //# sourceMappingURL=component-css-vars.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component-css-vars.js","names":[],"sources":["../../src/theme/component-css-vars.ts"],"sourcesContent":["/**\n * 桌面组件级 `--u-*` token，随 `UITheme.render()` 按主题系列（light/dark）注入 `html`。\n * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。\n * nav 系列：外观（底色/前景）不在此列表，由 `navSidebarCssVars` 按主题 `nav.variant`\n * （dark 深底浅字 / light 浅底深字，默认 dark）与 `nav` 覆盖项注入，见 `ui-theme.ts`。\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-focus-ring': `0 0 0 3px ${T('color', 'primary', 'a', '28')}`,\n  '--u-focus-ring-danger': `0 0 0 3px ${T('color', 'danger', 'a', '28')}`,\n  '--u-table-border-color': T('border', 'color'),\n  '--u-table-header-bg': T('bg-color', 'hover'),\n  '--u-table-header-color': T('text-color', 'title'),\n  '--u-table-stripe-bg': T('bg-color', 'middle'),\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  // ─── Nav 系列（nav / dual-nav / group-nav）尺寸与资源类；外观见文件底部 navSidebarCssVars ───\n  '--u-nav-height-small': '32px',\n  '--u-nav-height-default': '36px',\n  '--u-nav-height-large': '40px',\n  '--u-nav-bg-image': 'none',\n  '--u-nav-rail-width': '56px',\n  '--u-nav-rail-labeled-width': '72px',\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  '--u-drawer-size': '320px',\n\n  // ─── Button (default & plain states) ───\n  '--u-button-default-bg': T('bg-color', 'top'),\n  '--u-button-default-border': T('border', 'color'),\n  '--u-button-default-color': T('text-color', 'main'),\n  '--u-button-default-hover-bg': T('bg-color', 'hover'),\n  '--u-button-default-hover-border': T('border', 'color'),\n  '--u-button-primary-plain-bg': T('color', 'primary', 'light', '9'),\n  '--u-button-primary-plain-shadow': T('color', 'primary', 'light', '5'),\n  '--u-button-success-plain-bg': T('color', 'success', 'light', '9'),\n  '--u-button-success-plain-shadow': T('color', 'success', 'light', '5'),\n  '--u-button-warning-plain-bg': T('color', 'warning', 'light', '9'),\n  '--u-button-warning-plain-shadow': T('color', 'warning', 'light', '5'),\n  '--u-button-danger-plain-bg': T('color', 'danger', 'light', '9'),\n  '--u-button-danger-plain-shadow': T('color', 'danger', 'light', '5'),\n  '--u-button-info-plain-bg': T('color', 'info', 'light', '9'),\n  '--u-button-info-plain-shadow': T('color', 'info', 'light', '5'),\n\n  // ─── Tree selection ───\n  '--u-tree-node-selected-bg': T('color', 'primary', 'light', '9'),\n  '--u-tree-node-selected-color': T('color', 'primary'),\n\n  // ─── Cascade option active ───\n  '--u-cascade-node-active-bg': T('color', 'primary', 'light', '9'),\n  '--u-cascade-node-active-color': T('color', 'primary'),\n\n  // ─── Select option ───\n  '--u-select-option-hover-bg': T('bg-color', 'hover'),\n  '--u-select-option-hover-color': T('text-color', 'title'),\n  '--u-select-option-selected-bg': T('color', 'primary', 'light', '9'),\n  '--u-select-option-selected-color': T('color', 'primary'),\n\n  // ─── Auto Complete option ───\n  '--u-auto-complete-option-hover-bg': T('bg-color', 'hover'),\n  '--u-auto-complete-option-hover-color': T('text-color', 'title'),\n  '--u-auto-complete-option-selected-bg': T('color', 'primary', 'light', '9'),\n  '--u-auto-complete-option-selected-color': T('color', 'primary'),\n\n  // ─── Contextmenu item ───\n  '--u-contextmenu-item-hover-bg': T('bg-color', 'hover'),\n  '--u-contextmenu-item-hover-color': T('text-color', 'title'),\n  '--u-contextmenu-item-height-small': '24px',\n  '--u-contextmenu-item-height-default': '28px',\n  '--u-contextmenu-item-height-large': '32px',\n\n  // ─── Expression Editor Chip ───\n  '--u-expression-editor-chip-bg': T('color', 'primary', 'light', '9'),\n  '--u-expression-editor-chip-color': T('color', 'primary'),\n\n  // ─── Paginator active buttons ───\n  '--u-paginator-btn-hover-bg': T('color', 'primary', 'light', '9'),\n  '--u-paginator-btn-hover-color': T('text-color', 'title'),\n  '--u-paginator-btn-active-bg': T('color', 'primary', 'light', '9'),\n  '--u-paginator-btn-active-color': T('color', 'primary'),\n\n  // ─── Tabs List background ───\n  '--u-tabs-bar-bg': T('bg-color', 'hover'),\n  '--u-tabs-active-bg': T('bg-color', 'top'),\n\n  // ─── Tag Component Colors ───\n  '--u-tag-primary-bg': T('color', 'primary', 'light', '9'),\n  '--u-tag-primary-color': T('color', 'primary'),\n  '--u-tag-primary-border': T('color', 'primary'),\n  '--u-tag-success-bg': T('color', 'success', 'light', '9'),\n  '--u-tag-success-color': T('color', 'success'),\n  '--u-tag-success-border': T('color', 'success'),\n  '--u-tag-warning-bg': T('color', 'warning', 'light', '9'),\n  '--u-tag-warning-color': T('color', 'warning'),\n  '--u-tag-warning-border': T('color', 'warning'),\n  '--u-tag-danger-bg': T('color', 'danger', 'light', '9'),\n  '--u-tag-danger-color': T('color', 'danger'),\n  '--u-tag-danger-border': T('color', 'danger'),\n  '--u-tag-info-bg': T('color', 'info', 'light', '9'),\n  '--u-tag-info-color': T('color', 'info'),\n  '--u-tag-info-border': T('color', 'info'),\n\n  // ─── File Picker Colors ───\n  '--u-file-picker-hover-bg': T('color', 'primary', 'light', '9'),\n  '--u-card-header-bg': 'rgba(0, 0, 0, 0.015)',\n  '--u-card-action-bg': 'rgba(0, 0, 0, 0.015)',\n  '--u-card-padding-small': '8px',\n  '--u-card-padding-default': '12px',\n  '--u-card-padding-large': '16px',\n  '--u-card-radius': T('radius', 'large')\n}\n\n/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */\nexport const componentCssVarsDark: Record<string, string> = {\n  ...componentCssVarsLight,\n  '--u-focus-ring': `0 0 0 3px ${T('color', 'primary', 'a', '35')}`,\n  '--u-focus-ring-danger': `0 0 0 3px ${T('color', 'danger', 'a', '35')}`,\n  '--u-table-border-color': T('border', 'color'),\n  '--u-table-header-bg': T('bg-color', 'hover'),\n  '--u-table-header-color': T('text-color', 'main'),\n  '--u-table-stripe-bg': T('bg-color', 'middle'),\n  '--u-table-stripe-color': T('text-color', 'main'),\n  '--u-table-hover-bg': T('text-color', 'title', 'a', '5'),\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-radio-border': '#595959',\n  '--u-checkbox-border': '#595959',\n\n  // ─── Button (plain & text colors in dark mode) ───\n  '--u-button-primary-plain-bg': T('color', 'primary', 'dark', '9'),\n  '--u-button-primary-plain-shadow': T('color', 'primary', 'dark', '7'),\n  '--u-button-success-plain-bg': T('color', 'success', 'dark', '9'),\n  '--u-button-success-plain-shadow': T('color', 'success', 'dark', '7'),\n  '--u-button-warning-plain-bg': T('color', 'warning', 'dark', '9'),\n  '--u-button-warning-plain-shadow': T('color', 'warning', 'dark', '7'),\n  '--u-button-danger-plain-bg': T('color', 'danger', 'dark', '9'),\n  '--u-button-danger-plain-shadow': T('color', 'danger', 'dark', '7'),\n  '--u-button-info-plain-bg': T('color', 'info', 'dark', '9'),\n  '--u-button-info-plain-shadow': T('color', 'info', 'dark', '7'),\n\n  // ─── Tree selection ───\n  '--u-tree-node-selected-bg': T('color', 'primary', 'dark', '9'),\n  '--u-tree-node-selected-color': T('color', 'primary'),\n\n  // ─── Cascade option active ───\n  '--u-cascade-node-active-bg': T('color', 'primary', 'dark', '9'),\n  '--u-cascade-node-active-color': T('color', 'primary'),\n\n  // ─── Select option ───\n  '--u-select-option-hover-bg': T('bg-color', 'hover'),\n  '--u-select-option-hover-color': T('text-color', 'title'),\n  '--u-select-option-selected-bg': T('color', 'primary', 'dark', '9'),\n  '--u-select-option-selected-color': T('color', 'primary'),\n\n  // ─── Auto Complete option ───\n  '--u-auto-complete-option-hover-bg': T('bg-color', 'hover'),\n  '--u-auto-complete-option-hover-color': T('text-color', 'title'),\n  '--u-auto-complete-option-selected-bg': T('color', 'primary', 'dark', '9'),\n  '--u-auto-complete-option-selected-color': T('color', 'primary'),\n\n  // ─── Contextmenu item ───\n  '--u-contextmenu-item-hover-bg': T('bg-color', 'hover'),\n  '--u-contextmenu-item-hover-color': T('text-color', 'title'),\n  '--u-contextmenu-item-height-small': '24px',\n  '--u-contextmenu-item-height-default': '28px',\n  '--u-contextmenu-item-height-large': '32px',\n\n  // ─── Expression Editor Chip ───\n  '--u-expression-editor-chip-bg': T('color', 'primary', 'dark', '9'),\n  '--u-expression-editor-chip-color': T('color', 'primary'),\n\n  // ─── Paginator active buttons ───\n  '--u-paginator-btn-hover-bg': T('color', 'primary', 'dark', '9'),\n  '--u-paginator-btn-hover-color': T('color', 'primary'),\n  '--u-paginator-btn-active-bg': T('color', 'primary', 'dark', '9'),\n  '--u-paginator-btn-active-color': T('color', 'primary'),\n\n  // ─── Tabs List background (improved dark contrast) ───\n  '--u-tabs-bar-bg': T('bg-color', 'bottom'),\n  '--u-tabs-active-bg': T('bg-color', 'top'),\n\n  // ─── Tag Component Colors ───\n  '--u-tag-primary-bg': T('color', 'primary', 'dark', '9'),\n  '--u-tag-primary-color': T('color', 'primary'),\n  '--u-tag-primary-border': T('color', 'primary'),\n  '--u-tag-success-bg': T('color', 'success', 'dark', '9'),\n  '--u-tag-success-color': T('color', 'success'),\n  '--u-tag-success-border': T('color', 'success'),\n  '--u-tag-warning-bg': T('color', 'warning', 'dark', '9'),\n  '--u-tag-warning-color': T('color', 'warning'),\n  '--u-tag-warning-border': T('color', 'warning'),\n  '--u-tag-danger-bg': T('color', 'danger', 'dark', '9'),\n  '--u-tag-danger-color': T('color', 'danger'),\n  '--u-tag-danger-border': T('color', 'danger'),\n  '--u-tag-info-bg': T('color', 'info', 'dark', '9'),\n  '--u-tag-info-color': T('color', 'info'),\n  '--u-tag-info-border': T('color', 'info'),\n\n  // ─── File Picker Colors ───\n  '--u-file-picker-hover-bg': T('color', 'primary', 'dark', '9'),\n  '--u-card-header-bg': 'rgba(255, 255, 255, 0.015)',\n  '--u-card-action-bg': 'rgba(255, 255, 255, 0.015)'\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\n// ─── Nav 侧栏外观：深/浅变体 × 明/暗主题系列 ───\n// 由 UITheme 按主题 `nav.variant`（默认 dark）选择注入，主题 `nav` 的其余键可逐项覆盖。\n\n/** 侧栏外观变体：dark 深底浅字 / light 浅底深字 */\nexport type NavSidebarVariant = 'dark' | 'light'\n\n/** 深侧栏 · 浅色主题下：深底（text-color.title）+ 浅前景，与浅色内容区拉开区分度 */\nconst navSidebarDarkInLight: Record<string, string> = {\n  '--u-nav-bg-color': T('text-color', 'title'),\n  '--u-nav-color': 'rgba(255, 255, 255, 0.72)',\n  '--u-nav-hover-bg': 'rgba(255, 255, 255, 0.08)',\n  '--u-nav-hover-color': T('text-color', 'white'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '22'),\n  '--u-nav-active-color': T('text-color', 'white'),\n  '--u-nav-strong-color': T('text-color', 'white'),\n  '--u-nav-second-color': 'rgba(255, 255, 255, 0.45)',\n  '--u-nav-sub-border-color': 'rgba(255, 255, 255, 0.15)',\n  '--u-nav-rail-bg': 'rgba(0, 0, 0, 0.2)'\n}\n\n/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景 */\nconst navSidebarLightInLight: Record<string, string> = {\n  '--u-nav-bg-color': T('bg-color', 'middle'),\n  '--u-nav-color': T('text-color', 'title'),\n  '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '10'),\n  '--u-nav-active-color': T('color', 'primary', 'dark', '1'),\n  '--u-nav-strong-color': T('text-color', 'title'),\n  '--u-nav-second-color': T('text-color', 'second'),\n  '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),\n  '--u-nav-rail-bg': T('bg-color', 'bottom')\n}\n\n/** 深侧栏 · 深色主题下：比内容区 top 深一档 */\nconst navSidebarDarkInDark: Record<string, string> = {\n  '--u-nav-bg-color': T('bg-color', 'middle'),\n  '--u-nav-color': T('text-color', 'main'),\n  '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '16'),\n  '--u-nav-active-color': T('text-color', 'white'),\n  '--u-nav-strong-color': T('text-color', 'title'),\n  '--u-nav-second-color': T('text-color', 'second'),\n  '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),\n  '--u-nav-rail-bg': T('bg-color', 'bottom')\n}\n\n/** 浅侧栏 · 深色主题下：提亮侧栏（与深色内容区反向对比） */\nconst navSidebarLightInDark: Record<string, string> = {\n  '--u-nav-bg-color': T('bg-color', 'top'),\n  '--u-nav-color': T('text-color', 'title'),\n  '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '22'),\n  '--u-nav-active-color': T('color', 'primary'),\n  '--u-nav-strong-color': T('text-color', 'title'),\n  '--u-nav-second-color': T('text-color', 'second'),\n  '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),\n  '--u-nav-rail-bg': T('bg-color', 'middle')\n}\n\nconst navSidebarCssVars: Record<\n  'light' | 'dark',\n  Record<NavSidebarVariant, Record<string, string>>\n> = {\n  light: { dark: navSidebarDarkInLight, light: navSidebarLightInLight },\n  dark: { dark: navSidebarDarkInDark, light: navSidebarLightInDark }\n}\n\n/** 某主题系列 + 侧栏变体下的 nav 外观 token（键为 `--u-nav-*`） */\nexport function navSidebarTokens(\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): Record<string, string> {\n  return { ...navSidebarCssVars[series][variant] }\n}\n\n/** 解析某主题系列 + 侧栏变体下的 nav 外观 token 声明列表 */\nexport function resolveNavSidebarDecls(\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): string[] {\n  return recordToDeclList(navSidebarCssVars[series][variant])\n}\n"],"mappings":"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"}
+{"version":3,"file":"component-css-vars.js","names":[],"sources":["../../src/theme/component-css-vars.ts"],"sourcesContent":["/**\n * 桌面组件级 `--u-*` token，随 `UITheme.render()` 按主题系列（light/dark）注入 `html`。\n * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。\n * nav 系列：外观（底色/前景）不在此列表，由 `navSidebarCssVars` 按主题 `nav.variant`\n * （dark 深底浅字 / light 浅底深字，默认 dark）与 `nav` 覆盖项注入，见 `ui-theme.ts`。\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-focus-ring': `0 0 0 3px ${T('color', 'primary', 'a', '28')}`,\n  '--u-focus-ring-danger': `0 0 0 3px ${T('color', 'danger', 'a', '28')}`,\n  '--u-table-border-color': T('border', 'color'),\n  '--u-table-header-bg': T('bg-color', 'hover'),\n  '--u-table-header-color': T('text-color', 'title'),\n  '--u-table-stripe-bg': T('bg-color', 'middle'),\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  // ─── Nav 系列（nav / dual-nav / group-nav）尺寸与资源类；外观见文件底部 navSidebarCssVars ───\n  '--u-nav-height-small': '32px',\n  '--u-nav-height-default': '36px',\n  '--u-nav-height-large': '40px',\n  '--u-nav-bg-image': 'none',\n  '--u-nav-rail-width': '56px',\n  '--u-nav-rail-labeled-width': '72px',\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  '--u-drawer-size': '320px',\n\n  // ─── Button (default & plain states) ───\n  '--u-button-default-bg': T('bg-color', 'top'),\n  '--u-button-default-border': T('border', 'color'),\n  '--u-button-default-color': T('text-color', 'main'),\n  '--u-button-default-hover-bg': T('bg-color', 'hover'),\n  '--u-button-default-hover-border': T('border', 'color'),\n  '--u-button-primary-plain-bg': T('color', 'primary', 'light', '9'),\n  '--u-button-primary-plain-shadow': T('color', 'primary', 'light', '5'),\n  '--u-button-success-plain-bg': T('color', 'success', 'light', '9'),\n  '--u-button-success-plain-shadow': T('color', 'success', 'light', '5'),\n  '--u-button-warning-plain-bg': T('color', 'warning', 'light', '9'),\n  '--u-button-warning-plain-shadow': T('color', 'warning', 'light', '5'),\n  '--u-button-danger-plain-bg': T('color', 'danger', 'light', '9'),\n  '--u-button-danger-plain-shadow': T('color', 'danger', 'light', '5'),\n  '--u-button-info-plain-bg': T('color', 'info', 'light', '9'),\n  '--u-button-info-plain-shadow': T('color', 'info', 'light', '5'),\n\n  // ─── Tree selection ───\n  '--u-tree-node-selected-bg': T('color', 'primary', 'light', '9'),\n  '--u-tree-node-selected-color': T('color', 'primary'),\n\n  // ─── Cascade option active ───\n  '--u-cascade-node-active-bg': T('color', 'primary', 'light', '9'),\n  '--u-cascade-node-active-color': T('color', 'primary'),\n\n  // ─── Select option ───\n  '--u-select-option-hover-bg': T('bg-color', 'hover'),\n  '--u-select-option-hover-color': T('text-color', 'title'),\n  '--u-select-option-selected-bg': T('color', 'primary', 'light', '9'),\n  '--u-select-option-selected-color': T('color', 'primary'),\n\n  // ─── Auto Complete option ───\n  '--u-auto-complete-option-hover-bg': T('bg-color', 'hover'),\n  '--u-auto-complete-option-hover-color': T('text-color', 'title'),\n  '--u-auto-complete-option-selected-bg': T('color', 'primary', 'light', '9'),\n  '--u-auto-complete-option-selected-color': T('color', 'primary'),\n\n  // ─── Contextmenu item ───\n  '--u-contextmenu-item-hover-bg': T('bg-color', 'hover'),\n  '--u-contextmenu-item-hover-color': T('text-color', 'title'),\n  '--u-contextmenu-item-height-small': '24px',\n  '--u-contextmenu-item-height-default': '28px',\n  '--u-contextmenu-item-height-large': '32px',\n\n  // ─── Expression Editor Chip ───\n  '--u-expression-editor-chip-bg': T('color', 'primary', 'light', '9'),\n  '--u-expression-editor-chip-color': T('color', 'primary'),\n\n  // ─── Paginator active buttons ───\n  '--u-paginator-btn-hover-bg': T('color', 'primary', 'light', '9'),\n  '--u-paginator-btn-hover-color': T('text-color', 'title'),\n  '--u-paginator-btn-active-bg': T('color', 'primary', 'light', '9'),\n  '--u-paginator-btn-active-color': T('color', 'primary'),\n\n  // ─── Tabs List background ───\n  '--u-tabs-bar-bg': T('bg-color', 'hover'),\n  '--u-tabs-active-bg': T('bg-color', 'top'),\n\n  // ─── Tag Component Colors ───\n  '--u-tag-primary-bg': T('color', 'primary', 'light', '9'),\n  '--u-tag-primary-color': T('color', 'primary'),\n  '--u-tag-primary-border': T('color', 'primary'),\n  '--u-tag-success-bg': T('color', 'success', 'light', '9'),\n  '--u-tag-success-color': T('color', 'success'),\n  '--u-tag-success-border': T('color', 'success'),\n  '--u-tag-warning-bg': T('color', 'warning', 'light', '9'),\n  '--u-tag-warning-color': T('color', 'warning'),\n  '--u-tag-warning-border': T('color', 'warning'),\n  '--u-tag-danger-bg': T('color', 'danger', 'light', '9'),\n  '--u-tag-danger-color': T('color', 'danger'),\n  '--u-tag-danger-border': T('color', 'danger'),\n  '--u-tag-info-bg': T('color', 'info', 'light', '9'),\n  '--u-tag-info-color': T('color', 'info'),\n  '--u-tag-info-border': T('color', 'info'),\n\n  // ─── File Picker Colors ───\n  '--u-file-picker-hover-bg': T('color', 'primary', 'light', '9'),\n  '--u-card-header-bg': 'rgba(0, 0, 0, 0.015)',\n  '--u-card-action-bg': 'rgba(0, 0, 0, 0.015)',\n  '--u-card-padding-small': '8px',\n  '--u-card-padding-default': '12px',\n  '--u-card-padding-large': '16px',\n  '--u-card-radius': T('radius', 'large')\n}\n\n/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */\nexport const componentCssVarsDark: Record<string, string> = {\n  ...componentCssVarsLight,\n  '--u-focus-ring': `0 0 0 3px ${T('color', 'primary', 'a', '35')}`,\n  '--u-focus-ring-danger': `0 0 0 3px ${T('color', 'danger', 'a', '35')}`,\n  '--u-table-border-color': T('border', 'color'),\n  '--u-table-header-bg': T('bg-color', 'hover'),\n  '--u-table-header-color': T('text-color', 'main'),\n  '--u-table-stripe-bg': T('bg-color', 'middle'),\n  '--u-table-stripe-color': T('text-color', 'main'),\n  '--u-table-hover-bg': T('text-color', 'title', 'a', '5'),\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-radio-border': '#595959',\n  '--u-checkbox-border': '#595959',\n\n  // ─── Button (plain & text colors in dark mode) ───\n  '--u-button-primary-plain-bg': T('color', 'primary', 'dark', '9'),\n  '--u-button-primary-plain-shadow': T('color', 'primary', 'dark', '7'),\n  '--u-button-success-plain-bg': T('color', 'success', 'dark', '9'),\n  '--u-button-success-plain-shadow': T('color', 'success', 'dark', '7'),\n  '--u-button-warning-plain-bg': T('color', 'warning', 'dark', '9'),\n  '--u-button-warning-plain-shadow': T('color', 'warning', 'dark', '7'),\n  '--u-button-danger-plain-bg': T('color', 'danger', 'dark', '9'),\n  '--u-button-danger-plain-shadow': T('color', 'danger', 'dark', '7'),\n  '--u-button-info-plain-bg': T('color', 'info', 'dark', '9'),\n  '--u-button-info-plain-shadow': T('color', 'info', 'dark', '7'),\n\n  // ─── Tree selection ───\n  '--u-tree-node-selected-bg': T('color', 'primary', 'dark', '9'),\n  '--u-tree-node-selected-color': T('color', 'primary'),\n\n  // ─── Cascade option active ───\n  '--u-cascade-node-active-bg': T('color', 'primary', 'dark', '9'),\n  '--u-cascade-node-active-color': T('color', 'primary'),\n\n  // ─── Select option ───\n  '--u-select-option-hover-bg': T('bg-color', 'hover'),\n  '--u-select-option-hover-color': T('text-color', 'title'),\n  '--u-select-option-selected-bg': T('color', 'primary', 'dark', '9'),\n  '--u-select-option-selected-color': T('color', 'primary'),\n\n  // ─── Auto Complete option ───\n  '--u-auto-complete-option-hover-bg': T('bg-color', 'hover'),\n  '--u-auto-complete-option-hover-color': T('text-color', 'title'),\n  '--u-auto-complete-option-selected-bg': T('color', 'primary', 'dark', '9'),\n  '--u-auto-complete-option-selected-color': T('color', 'primary'),\n\n  // ─── Contextmenu item ───\n  '--u-contextmenu-item-hover-bg': T('bg-color', 'hover'),\n  '--u-contextmenu-item-hover-color': T('text-color', 'title'),\n  '--u-contextmenu-item-height-small': '24px',\n  '--u-contextmenu-item-height-default': '28px',\n  '--u-contextmenu-item-height-large': '32px',\n\n  // ─── Expression Editor Chip ───\n  '--u-expression-editor-chip-bg': T('color', 'primary', 'dark', '9'),\n  '--u-expression-editor-chip-color': T('color', 'primary'),\n\n  // ─── Paginator active buttons ───\n  '--u-paginator-btn-hover-bg': T('color', 'primary', 'dark', '9'),\n  '--u-paginator-btn-hover-color': T('color', 'primary'),\n  '--u-paginator-btn-active-bg': T('color', 'primary', 'dark', '9'),\n  '--u-paginator-btn-active-color': T('color', 'primary'),\n\n  // ─── Tabs List background (improved dark contrast) ───\n  '--u-tabs-bar-bg': T('bg-color', 'bottom'),\n  '--u-tabs-active-bg': T('bg-color', 'top'),\n\n  // ─── Tag Component Colors ───\n  '--u-tag-primary-bg': T('color', 'primary', 'dark', '9'),\n  '--u-tag-primary-color': T('color', 'primary'),\n  '--u-tag-primary-border': T('color', 'primary'),\n  '--u-tag-success-bg': T('color', 'success', 'dark', '9'),\n  '--u-tag-success-color': T('color', 'success'),\n  '--u-tag-success-border': T('color', 'success'),\n  '--u-tag-warning-bg': T('color', 'warning', 'dark', '9'),\n  '--u-tag-warning-color': T('color', 'warning'),\n  '--u-tag-warning-border': T('color', 'warning'),\n  '--u-tag-danger-bg': T('color', 'danger', 'dark', '9'),\n  '--u-tag-danger-color': T('color', 'danger'),\n  '--u-tag-danger-border': T('color', 'danger'),\n  '--u-tag-info-bg': T('color', 'info', 'dark', '9'),\n  '--u-tag-info-color': T('color', 'info'),\n  '--u-tag-info-border': T('color', 'info'),\n\n  // ─── File Picker Colors ───\n  '--u-file-picker-hover-bg': T('color', 'primary', 'dark', '9'),\n  '--u-card-header-bg': 'rgba(255, 255, 255, 0.015)',\n  '--u-card-action-bg': 'rgba(255, 255, 255, 0.015)'\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\n// ─── Nav 侧栏外观：深/浅变体 × 明/暗主题系列 ───\n// 由 UITheme 按主题 `nav.variant`（默认 dark）选择注入，主题 `nav` 的其余键可逐项覆盖。\n// 同时注入实际底色色调（surface tone）与一组 `--u-nav-surface-*` 装饰 token：\n// 深色系列的任何变体、浅色系列的 dark 变体都是深底，应用壳绘制侧栏容器\n// （叠层渐变、分隔线、chip、品牌标记环、选中态、滚动条）可直接消费，无需写 [data-theme] 分支。\n\n/** 侧栏外观变体：dark 深底浅字 / light 浅底深字 */\nexport type NavSidebarVariant = 'dark' | 'light'\n\n/** 侧栏实际底色色调：dark 深底 / light 浅底 */\nexport type NavSurfaceTone = 'dark' | 'light'\n\n/**\n * 某主题系列 + 菜单变体下侧栏的实际底色色调。\n * 深色系列主题的两个变体都是深底（light 变体只是比内容区提亮一档）。\n */\nexport function navSurfaceTone(\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): NavSurfaceTone {\n  return series === 'dark' || variant === 'dark' ? 'dark' : 'light'\n}\n\n/** 深底侧栏的表面装饰 token */\nconst navSurfaceDarkTone: Record<string, string> = {\n  '--u-nav-surface-overlay': `radial-gradient(120% 70% at 0% 0%, ${T('color', 'primary', 'a', '16')}, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3))`,\n  '--u-nav-surface-hairline': 'rgba(255, 255, 255, 0.07)',\n  '--u-nav-surface-chip-bg': 'rgba(255, 255, 255, 0.055)',\n  '--u-nav-surface-chip-border': 'rgba(255, 255, 255, 0.08)',\n  '--u-nav-surface-chip-hover-bg': 'rgba(255, 255, 255, 0.09)',\n  '--u-nav-surface-mark-ring': 'rgba(255, 255, 255, 0.14)',\n  '--u-nav-surface-active-gradient': `linear-gradient(90deg, ${T('color', 'primary', 'a', '35')}, ${T('color', 'primary', 'a', '5')})`,\n  '--u-nav-surface-active-ring': T('color', 'primary', 'a', '16'),\n  '--u-nav-surface-accent': T('color', 'primary', 'light', '5'),\n  '--u-nav-surface-scrollbar': 'rgba(255, 255, 255, 0.22)',\n  '--u-nav-surface-scrollbar-hover': 'rgba(255, 255, 255, 0.4)'\n}\n\n/** 浅底侧栏的表面装饰 token */\nconst navSurfaceLightTone: Record<string, string> = {\n  '--u-nav-surface-overlay': `radial-gradient(120% 70% at 0% 0%, ${T('color', 'primary', 'a', '8')}, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.02))`,\n  '--u-nav-surface-hairline': T('border', 'color'),\n  '--u-nav-surface-chip-bg': 'rgba(15, 23, 42, 0.04)',\n  '--u-nav-surface-chip-border': T('border', 'color'),\n  '--u-nav-surface-chip-hover-bg': 'rgba(15, 23, 42, 0.07)',\n  '--u-nav-surface-mark-ring': 'rgba(15, 23, 42, 0.1)',\n  '--u-nav-surface-active-gradient': `linear-gradient(90deg, ${T('color', 'primary', 'a', '16')}, ${T('color', 'primary', 'a', '4')})`,\n  '--u-nav-surface-active-ring': T('color', 'primary', 'a', '8'),\n  '--u-nav-surface-accent': T('color', 'primary'),\n  '--u-nav-surface-scrollbar': T('text-color', 'assist', 'a', '40'),\n  '--u-nav-surface-scrollbar-hover': T('text-color', 'assist', 'a', '60')\n}\n\n/** 给内置外观 token 补上与其实际底色色调匹配的表面装饰 token */\nfunction withNavSurface(\n  appearance: Record<string, string>,\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): Record<string, string> {\n  const surface =\n    navSurfaceTone(series, variant) === 'dark' ? navSurfaceDarkTone : navSurfaceLightTone\n  return { ...appearance, ...surface }\n}\n\n/** 深侧栏 · 浅色主题下：深底（text-color.title）+ 浅前景，与浅色内容区拉开区分度 */\nconst navSidebarDarkInLight: Record<string, string> = {\n  '--u-nav-bg-color': T('text-color', 'title'),\n  '--u-nav-color': 'rgba(255, 255, 255, 0.72)',\n  '--u-nav-hover-bg': 'rgba(255, 255, 255, 0.08)',\n  '--u-nav-hover-color': T('text-color', 'white'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '22'),\n  '--u-nav-active-color': T('text-color', 'white'),\n  '--u-nav-strong-color': T('text-color', 'white'),\n  '--u-nav-second-color': 'rgba(255, 255, 255, 0.45)',\n  '--u-nav-sub-border-color': 'rgba(255, 255, 255, 0.15)',\n  '--u-nav-rail-bg': 'rgba(0, 0, 0, 0.2)'\n}\n\n/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景；选中文字加深，保证 13px 正文的对比度 */\nconst navSidebarLightInLight: Record<string, string> = {\n  '--u-nav-bg-color': T('bg-color', 'middle'),\n  '--u-nav-color': T('text-color', 'title'),\n  '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '10'),\n  '--u-nav-active-color': T('color', 'primary', 'dark', '3'),\n  '--u-nav-strong-color': T('text-color', 'title'),\n  '--u-nav-second-color': T('text-color', 'second'),\n  '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),\n  '--u-nav-rail-bg': T('bg-color', 'bottom')\n}\n\n/** 深侧栏 · 深色主题下：比内容区 top 深一档 */\nconst navSidebarDarkInDark: Record<string, string> = {\n  '--u-nav-bg-color': T('bg-color', 'middle'),\n  '--u-nav-color': T('text-color', 'main'),\n  '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '16'),\n  '--u-nav-active-color': T('text-color', 'white'),\n  '--u-nav-strong-color': T('text-color', 'title'),\n  '--u-nav-second-color': T('text-color', 'second'),\n  '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),\n  '--u-nav-rail-bg': T('bg-color', 'bottom')\n}\n\n/** 浅侧栏 · 深色主题下：提亮侧栏（与深色内容区反向对比）；表面仍是深底，选中文字用白色保证对比度 */\nconst navSidebarLightInDark: Record<string, string> = {\n  '--u-nav-bg-color': T('bg-color', 'top'),\n  '--u-nav-color': T('text-color', 'title'),\n  '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': T('color', 'primary', 'a', '22'),\n  '--u-nav-active-color': T('text-color', 'white'),\n  '--u-nav-strong-color': T('text-color', 'title'),\n  '--u-nav-second-color': T('text-color', 'second'),\n  '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),\n  '--u-nav-rail-bg': T('bg-color', 'middle')\n}\n\nconst navSidebarCssVars: Record<\n  'light' | 'dark',\n  Record<NavSidebarVariant, Record<string, string>>\n> = {\n  light: {\n    dark: withNavSurface(navSidebarDarkInLight, 'light', 'dark'),\n    light: withNavSurface(navSidebarLightInLight, 'light', 'light')\n  },\n  dark: {\n    dark: withNavSurface(navSidebarDarkInDark, 'dark', 'dark'),\n    light: withNavSurface(navSidebarLightInDark, 'dark', 'light')\n  }\n}\n\n/** 某主题系列 + 侧栏变体下的 nav token（外观 + 表面装饰，键为 `--u-nav-*`） */\nexport function navSidebarTokens(\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): Record<string, string> {\n  return { ...navSidebarCssVars[series][variant] }\n}\n\n/** 某主题系列 + 侧栏变体下的 nav 表面装饰 token（键为 `--u-nav-surface-*`） */\nexport function navSurfaceTokens(\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): Record<string, string> {\n  const surface =\n    navSurfaceTone(series, variant) === 'dark' ? navSurfaceDarkTone : navSurfaceLightTone\n  return { ...surface }\n}\n\n/** 解析某主题系列 + 侧栏变体下的 nav token 声明列表 */\nexport function resolveNavSidebarDecls(\n  series: 'light' | 'dark',\n  variant: NavSidebarVariant\n): string[] {\n  return recordToDeclList(navSidebarCssVars[series][variant])\n}\n"],"mappings":"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"}

package/dist/theme/index.d.ts

@@ -1,5 +1,5 @@
 import { RGBColor, Theme } from "./type.js";
-import { NavSidebarVariant, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, resolveNavSidebarDecls, themeTokenVar } from "./component-css-vars.js";
+import { NavSidebarVariant, NavSurfaceTone, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, navSurfaceTokens, navSurfaceTone, resolveNavSidebarDecls, themeTokenVar } from "./component-css-vars.js";
 import { ThemeSeries, UITheme, UIThemeOptions } from "./ui-theme.js";
 import { lightTheme } from "./presets/light.js";
 import { darkTheme } from "./presets/dark.js";
@@ -13,4 +13,4 @@ import { neonTheme } from "./presets/neon.js";
 import "./presets/index.js";
 import { currentTheme, loadTheme } from "./load-theme.js";
 import { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, isHexColor, mixColor, mixColorWithAlpha } from "./helper.js";
-export { HEXToRGB, NavSidebarVariant, type RGBColor, type Theme, ThemeSeries, UITheme, UIThemeOptions, ancientTheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassTheme, heroTheme, hexRgbOnly, hexWithAlpha, isHexColor, lightTheme, loadTheme, midnightTheme, mixColor, mixColorWithAlpha, navSidebarTokens, neonTheme, oceanTheme, resolveNavSidebarDecls, sakuraTheme, themeTokenVar };
+export { HEXToRGB, NavSidebarVariant, NavSurfaceTone, type RGBColor, type Theme, ThemeSeries, UITheme, UIThemeOptions, ancientTheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassTheme, heroTheme, hexRgbOnly, hexWithAlpha, isHexColor, lightTheme, loadTheme, midnightTheme, mixColor, mixColorWithAlpha, navSidebarTokens, navSurfaceTokens, navSurfaceTone, neonTheme, oceanTheme, resolveNavSidebarDecls, sakuraTheme, themeTokenVar };

package/dist/theme/index.js

@@ -1,4 +1,4 @@
-import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, resolveNavSidebarDecls, themeTokenVar } from "./component-css-vars.js";
+import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, navSurfaceTokens, navSurfaceTone, resolveNavSidebarDecls, themeTokenVar } from "./component-css-vars.js";
 import { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, isHexColor, mixColor, mixColorWithAlpha } from "./helper.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./presets/light.js";
@@ -11,4 +11,4 @@ import { oceanTheme } from "./presets/ocean.js";
 import { midnightTheme } from "./presets/midnight.js";
 import { neonTheme } from "./presets/neon.js";
 import { currentTheme, loadTheme } from "./load-theme.js";
-export { HEXToRGB, UITheme, ancientTheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassTheme, heroTheme, hexRgbOnly, hexWithAlpha, isHexColor, lightTheme, loadTheme, midnightTheme, mixColor, mixColorWithAlpha, navSidebarTokens, neonTheme, oceanTheme, resolveNavSidebarDecls, sakuraTheme, themeTokenVar };
+export { HEXToRGB, UITheme, ancientTheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassTheme, heroTheme, hexRgbOnly, hexWithAlpha, isHexColor, lightTheme, loadTheme, midnightTheme, mixColor, mixColorWithAlpha, navSidebarTokens, navSurfaceTokens, navSurfaceTone, neonTheme, oceanTheme, resolveNavSidebarDecls, sakuraTheme, themeTokenVar };

package/dist/theme/presets/ancient.js

@@ -34,7 +34,7 @@ const ancientTheme = lightTheme.new({
 		blur: 16,
 		spread: -2
 	},
-	nav: { "bg-color": mixColor("#2b2a26", "#3d6b58", .28) }
+	nav: { variants: { dark: { "bg-color": mixColor("#2b2a26", "#3d6b58", .28) } } }
 });
 //#endregion
 export { ancientTheme };

package/dist/theme/presets/ancient.js.map

@@ -1 +1 @@
-{"version":3,"file":"ancient.js","names":[],"sources":["../../../src/theme/presets/ancient.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 古风（松烟绿 + 宣纸底），天生适合浅色 */\nexport const ancientTheme = lightTheme.new({\n  color: {\n    primary: '#3d6b58' // 松烟绿\n  },\n  bg: {\n    color: {\n      bottom: '#f1ede0', // 宣纸底\n      middle: '#f7f4ea',\n      top: '#fdfbf4',\n      hover: '#e9e2cf'\n    }\n  },\n  'text-color': {\n    title: '#2b2a26', // 黛墨\n    main: '#403c34',\n    second: '#7a7264',\n    assist: '#a89f8c',\n    placeholder: '#a89f8c'\n  },\n  border: { width: 1, color: '#e4dcc8', mutedColor: '#d2c8ac' },\n  radius: { small: 4, default: 8, large: 12 },\n  shadow: { color: 'rgba(64, 54, 32, 0.14)', x: 0, y: 4, blur: 16, spread: -2 },\n  nav: {\n    // 松烟墨侧栏：黛墨 + 松烟绿调和\n    'bg-color': mixColor('#2b2a26', '#3d6b58', 0.28)\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,eAAe,WAAW,IAAI;CACzC,OAAO,EACL,SAAS,UACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;CACT,EACF;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;CACf;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG;CAC1C,QAAQ;EAAE,OAAO;EAA0B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;CAAG;CAC5E,KAAK,EAEH,YAAY,SAAS,WAAW,WAAW,GAAI,EACjD;AACF,CAAC"}
+{"version":3,"file":"ancient.js","names":[],"sources":["../../../src/theme/presets/ancient.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 古风（松烟绿 + 宣纸底），天生适合浅色 */\nexport const ancientTheme = lightTheme.new({\n  color: {\n    primary: '#3d6b58' // 松烟绿\n  },\n  bg: {\n    color: {\n      bottom: '#f1ede0', // 宣纸底\n      middle: '#f7f4ea',\n      top: '#fdfbf4',\n      hover: '#e9e2cf'\n    }\n  },\n  'text-color': {\n    title: '#2b2a26', // 黛墨\n    main: '#403c34',\n    second: '#7a7264',\n    assist: '#a89f8c',\n    placeholder: '#a89f8c'\n  },\n  border: { width: 1, color: '#e4dcc8', mutedColor: '#d2c8ac' },\n  radius: { small: 4, default: 8, large: 12 },\n  shadow: { color: 'rgba(64, 54, 32, 0.14)', x: 0, y: 4, blur: 16, spread: -2 },\n  nav: {\n    // 松烟墨侧栏（深变体）：黛墨 + 松烟绿调和；浅变体回落到主题宣纸底（bg middle）\n    variants: { dark: { 'bg-color': mixColor('#2b2a26', '#3d6b58', 0.28) } }\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,eAAe,WAAW,IAAI;CACzC,OAAO,EACL,SAAS,UACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;CACT,EACF;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;CACf;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG;CAC1C,QAAQ;EAAE,OAAO;EAA0B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;CAAG;CAC5E,KAAK,EAEH,UAAU,EAAE,MAAM,EAAE,YAAY,SAAS,WAAW,WAAW,GAAI,EAAE,EAAE,EACzE;AACF,CAAC"}

package/dist/theme/presets/ocean.js

@@ -49,7 +49,7 @@ const oceanTheme = lightTheme.new({
 		fast: "0.12s",
 		ease: "cubic-bezier(0.22, 1, 0.36, 1)"
 	},
-	nav: { "bg-color": mixColor("#16302e", "#0d9488", .25) }
+	nav: { variants: { dark: { "bg-color": mixColor("#16302e", "#0d9488", .25) } } }
 });
 //#endregion
 export { oceanTheme };

package/dist/theme/presets/ocean.js.map

@@ -1 +1 @@
-{"version":3,"file":"ocean.js","names":[],"sources":["../../../src/theme/presets/ocean.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 海盐（松石青 + 冷白底，利落的快缓动），天生适合浅色 */\nexport const oceanTheme = lightTheme.new({\n  color: {\n    primary: '#0d9488', // 松石青\n    success: '#16a34a',\n    warning: '#d97706',\n    danger: '#dc2626',\n    info: '#0284c7',\n    disabled: '#eff6f5',\n    default: '#eff6f5'\n  },\n  bg: { color: { bottom: '#eef6f5', middle: '#f5fafa', top: '#ffffff', hover: '#e0efee' } },\n  'text-color': {\n    title: '#16302e', // 深礁\n    main: '#2f4a48',\n    second: '#5b7875',\n    assist: '#c3d6d4',\n    placeholder: '#7fa19e',\n    disabled: '#a3bab7'\n  },\n  border: { width: 1, color: '#c2dedb', mutedColor: '#8fbcb7' },\n  radius: { small: 6, default: 10, large: 14 },\n  shadow: {\n    color: 'rgba(21, 94, 89, 0.12)',\n    x: 0,\n    y: 2,\n    blur: 10,\n    spread: -1,\n    sm: '0 1px 2px 0 rgba(21, 94, 89, 0.08)',\n    lg: '0 8px 24px 0 rgba(21, 94, 89, 0.12), 0 2px 6px 0 rgba(21, 94, 89, 0.06)'\n  },\n  transition: { fast: '0.12s', ease: 'cubic-bezier(0.22, 1, 0.36, 1)' },\n  nav: {\n    // 深海礁侧栏：深礁 + 松石青调和\n    'bg-color': mixColor('#16302e', '#0d9488', 0.25)\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,aAAa,WAAW,IAAI;CACvC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EAAE,OAAO;EAAE,QAAQ;EAAW,QAAQ;EAAW,KAAK;EAAW,OAAO;CAAU,EAAE;CACxF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;CACZ;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAC3C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY;EAAE,MAAM;EAAS,MAAM;CAAiC;CACpE,KAAK,EAEH,YAAY,SAAS,WAAW,WAAW,GAAI,EACjD;AACF,CAAC"}
+{"version":3,"file":"ocean.js","names":[],"sources":["../../../src/theme/presets/ocean.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 海盐（松石青 + 冷白底，利落的快缓动），天生适合浅色 */\nexport const oceanTheme = lightTheme.new({\n  color: {\n    primary: '#0d9488', // 松石青\n    success: '#16a34a',\n    warning: '#d97706',\n    danger: '#dc2626',\n    info: '#0284c7',\n    disabled: '#eff6f5',\n    default: '#eff6f5'\n  },\n  bg: { color: { bottom: '#eef6f5', middle: '#f5fafa', top: '#ffffff', hover: '#e0efee' } },\n  'text-color': {\n    title: '#16302e', // 深礁\n    main: '#2f4a48',\n    second: '#5b7875',\n    assist: '#c3d6d4',\n    placeholder: '#7fa19e',\n    disabled: '#a3bab7'\n  },\n  border: { width: 1, color: '#c2dedb', mutedColor: '#8fbcb7' },\n  radius: { small: 6, default: 10, large: 14 },\n  shadow: {\n    color: 'rgba(21, 94, 89, 0.12)',\n    x: 0,\n    y: 2,\n    blur: 10,\n    spread: -1,\n    sm: '0 1px 2px 0 rgba(21, 94, 89, 0.08)',\n    lg: '0 8px 24px 0 rgba(21, 94, 89, 0.12), 0 2px 6px 0 rgba(21, 94, 89, 0.06)'\n  },\n  transition: { fast: '0.12s', ease: 'cubic-bezier(0.22, 1, 0.36, 1)' },\n  nav: {\n    // 深海礁侧栏（深变体）：深礁 + 松石青调和；浅变体回落到主题雾白底（bg middle）\n    variants: { dark: { 'bg-color': mixColor('#16302e', '#0d9488', 0.25) } }\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,aAAa,WAAW,IAAI;CACvC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EAAE,OAAO;EAAE,QAAQ;EAAW,QAAQ;EAAW,KAAK;EAAW,OAAO;CAAU,EAAE;CACxF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;CACZ;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAC3C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY;EAAE,MAAM;EAAS,MAAM;CAAiC;CACpE,KAAK,EAEH,UAAU,EAAE,MAAM,EAAE,YAAY,SAAS,WAAW,WAAW,GAAI,EAAE,EAAE,EACzE;AACF,CAAC"}

package/dist/theme/presets/sakura.js

@@ -51,7 +51,7 @@ const sakuraTheme = lightTheme.new({
 		lg: "0 8px 24px 0 rgba(173, 58, 105, 0.14), 0 2px 6px 0 rgba(173, 58, 105, 0.08)"
 	},
 	transition: { easeOut: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
-	nav: { "bg-color": mixColor("#43272f", "#e64980", .22) }
+	nav: { variants: { dark: { "bg-color": mixColor("#43272f", "#e64980", .22) } } }
 });
 //#endregion
 export { sakuraTheme };

package/dist/theme/presets/sakura.js.map

@@ -1 +1 @@
-{"version":3,"file":"sakura.js","names":[],"sources":["../../../src/theme/presets/sakura.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 樱花（柔粉 + 花瓣底，大圆角、弹性缓动），天生适合浅色 */\nexport const sakuraTheme = lightTheme.new({\n  color: {\n    primary: '#e64980', // 樱粉\n    success: '#2f9e6e',\n    warning: '#e8890c',\n    danger: '#e03131',\n    info: '#7c6cf0',\n    disabled: '#faf0f3',\n    default: '#faf0f3'\n  },\n  bg: { color: { bottom: '#fdf1f5', middle: '#fef6f9', top: '#ffffff', hover: '#fbe4ec' } },\n  'text-color': {\n    title: '#43272f', // 樱墨\n    main: '#5f3d46',\n    second: '#92616d',\n    assist: '#dcc0c7',\n    placeholder: '#b58694',\n    disabled: '#c4a0aa'\n  },\n  border: { width: 1, color: '#f0c3d4', mutedColor: '#e09db6' },\n  radius: { small: 8, default: 12, large: 16 },\n  // 更宽松的表单控件，配合大圆角的柔和感\n  'form-component-height': { small: 26, default: 34, large: 42 },\n  shadow: {\n    color: 'rgba(173, 58, 105, 0.12)',\n    x: 0,\n    y: 4,\n    blur: 14,\n    spread: -2,\n    sm: '0 1px 2px 0 rgba(173, 58, 105, 0.08)',\n    lg: '0 8px 24px 0 rgba(173, 58, 105, 0.14), 0 2px 6px 0 rgba(173, 58, 105, 0.08)'\n  },\n  transition: { easeOut: 'cubic-bezier(0.34, 1.56, 0.64, 1)' },\n  nav: {\n    // 深酒红侧栏：樱墨 + 樱粉调和\n    'bg-color': mixColor('#43272f', '#e64980', 0.22)\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,cAAc,WAAW,IAAI;CACxC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EAAE,OAAO;EAAE,QAAQ;EAAW,QAAQ;EAAW,KAAK;EAAW,OAAO;CAAU,EAAE;CACxF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;CACZ;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAE3C,yBAAyB;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG;CAC7D,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY,EAAE,SAAS,oCAAoC;CAC3D,KAAK,EAEH,YAAY,SAAS,WAAW,WAAW,GAAI,EACjD;AACF,CAAC"}
+{"version":3,"file":"sakura.js","names":[],"sources":["../../../src/theme/presets/sakura.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 樱花（柔粉 + 花瓣底，大圆角、弹性缓动），天生适合浅色 */\nexport const sakuraTheme = lightTheme.new({\n  color: {\n    primary: '#e64980', // 樱粉\n    success: '#2f9e6e',\n    warning: '#e8890c',\n    danger: '#e03131',\n    info: '#7c6cf0',\n    disabled: '#faf0f3',\n    default: '#faf0f3'\n  },\n  bg: { color: { bottom: '#fdf1f5', middle: '#fef6f9', top: '#ffffff', hover: '#fbe4ec' } },\n  'text-color': {\n    title: '#43272f', // 樱墨\n    main: '#5f3d46',\n    second: '#92616d',\n    assist: '#dcc0c7',\n    placeholder: '#b58694',\n    disabled: '#c4a0aa'\n  },\n  border: { width: 1, color: '#f0c3d4', mutedColor: '#e09db6' },\n  radius: { small: 8, default: 12, large: 16 },\n  // 更宽松的表单控件，配合大圆角的柔和感\n  'form-component-height': { small: 26, default: 34, large: 42 },\n  shadow: {\n    color: 'rgba(173, 58, 105, 0.12)',\n    x: 0,\n    y: 4,\n    blur: 14,\n    spread: -2,\n    sm: '0 1px 2px 0 rgba(173, 58, 105, 0.08)',\n    lg: '0 8px 24px 0 rgba(173, 58, 105, 0.14), 0 2px 6px 0 rgba(173, 58, 105, 0.08)'\n  },\n  transition: { easeOut: 'cubic-bezier(0.34, 1.56, 0.64, 1)' },\n  nav: {\n    // 深酒红侧栏（深变体）：樱墨 + 樱粉调和；浅变体回落到主题樱粉底（bg middle）\n    variants: { dark: { 'bg-color': mixColor('#43272f', '#e64980', 0.22) } }\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,cAAc,WAAW,IAAI;CACxC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EAAE,OAAO;EAAE,QAAQ;EAAW,QAAQ;EAAW,KAAK;EAAW,OAAO;CAAU,EAAE;CACxF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;CACZ;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAE3C,yBAAyB;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG;CAC7D,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY,EAAE,SAAS,oCAAoC;CAC3D,KAAK,EAEH,UAAU,EAAE,MAAM,EAAE,YAAY,SAAS,WAAW,WAAW,GAAI,EAAE,EAAE,EACzE;AACF,CAAC"}

package/dist/theme/type.d.ts

@@ -178,12 +178,18 @@ export type Theme = {
   };
   /**
    * 侧栏导航（nav / dual-nav / group-nav）组件级变量。
-   * variant 选择深/浅侧栏外观，其余键覆盖同名 `--u-nav-*` token
-   * （如 `'bg-color'` → `--u-nav-bg-color`），覆盖优先级高于 variant 内置值。
+   * `variant` 选择默认深/浅侧栏外观；顶层其余字符串键对所有变体生效并覆盖同名
+   * `--u-nav-*` token（如 `'bg-color'` → `--u-nav-bg-color`）；
+   * `variants` 可为两个变体分别定制外观，只在该变体生效且优先级最高。
    */
   nav?: {
-    /** 侧栏外观：dark 深底浅字 / light 浅底深字，默认 dark */
+    /** 侧栏默认外观：dark 深底浅字 / light 浅底深字，默认 dark */
     variant?: 'dark' | 'light';
+    /**
+     * 按变体定制的外观覆盖，键同 nav 顶层（如 `'bg-color'`）。
+     * 未声明的变体回落到内置「主题系列 × 变体」token。
+     */
+    variants?: Partial<Record<'dark' | 'light', Record<string, string>>>;
     [key: string]: any;
   };
   /** 折叠面板组件级变量 */

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

@@ -1,4 +1,5 @@
 import { Theme } from "./type.js";
+import { NavSidebarVariant } from "./component-css-vars.js";
 //#region src/theme/ui-theme.d.ts
 type RecursivePartial<T> = { [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]; };
 /** 主题系列：浅色或深色。决定组件级 token 与 html[data-theme] */
@@ -30,14 +31,41 @@ export declare class UITheme {
   /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */
   themeToDeclarationList(theme: Theme): string[];
   private static declarationBlock;
+  /** 主题的默认菜单变体（未声明时为 dark） */
+  private navSidebarVariant;
   /**
-   * nav 侧栏外观声明：按主题 `nav.variant`（默认 dark）取内置深/浅侧栏 token，
+   * 主题 nav 覆盖声明：顶层字符串键对所有变体生效；
+   * `nav.variants[variant]` 只对该变体生效，追加在最后（同规则后者生效）。
+   */
+  private navOverrideDecls;
+  /** 指定系列 + 变体的 nav 声明（内置 token + 主题覆盖），供 html 级与容器级注入共用 */
+  private navSeriesDecls;
+  /**
+   * nav 侧栏外观声明：默认按主题 `nav.variant` 取内置深/浅侧栏 token，
    * 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+   * @param variant 显式指定变体（容器级/预览取色用），不传取主题默认变体
+   */
+  navSidebarDecls(theme: Theme, variant?: NavSidebarVariant): string[];
+  /**
+   * 派生指定菜单变体的主题。变体专属外观由 `nav.variants` 声明，
+   * 切换时不再需要手动展开 `navSidebarTokens` 覆盖预设个性色。
    */
-  navSidebarDecls(theme: Theme): string[];
+  withNavVariant(variant: NavSidebarVariant): UITheme;
+  private static toVariableMap;
+  /** 把 token 值里的 `var(--u-*)` 递归解析成具体色值（供主题预览/取色） */
+  private static resolveVarValue;
+  /**
+   * 解析当前主题某菜单变体的具体色值（键为去掉 `--u-nav-` 前缀的 token 名，
+   * 如 `'bg-color'`、`'active-color'`、`'surface-hairline'`）。
+   * 用于主题选择器预览等「主题未加载到 DOM 也要取色」的场景。
+   */
+  navSidebarColors(variant?: NavSidebarVariant): Record<string, string>;
   private static removeExistingStyleTag;
   private static applyGlobalCSS;
-  /** 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，并写入 html[data-theme] */
+  /**
+   * 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，写入 html[data-theme]；
+   * 同时注入容器级菜单变体规则（`[data-nav-variant]`）与实际底色色调 `html[data-nav-surface]`。
+   */
   render(): void;
   new(customTheme?: RecursivePartial<Theme>, options?: {
     series?: ThemeSeries;

package/dist/theme/ui-theme.js

@@ -1,4 +1,4 @@
-import { componentCssVarsDarkDecls, componentCssVarsLightDecls, resolveNavSidebarDecls } from "./component-css-vars.js";
+import { componentCssVarsDarkDecls, componentCssVarsLightDecls, navSurfaceTone, resolveNavSidebarDecls } from "./component-css-vars.js";
 import { hexRgbOnly, hexWithAlpha, isHexColor, mixColor } from "./helper.js";
 import { isObj, str } from "@cat-kit/core";
 import { withUnit } from "@veltra/utils";
@@ -158,16 +158,79 @@ var UITheme = class UITheme {
 	static declarationBlock(decls) {
 		return decls.join(";");
 	}
+	/** 主题的默认菜单变体（未声明时为 dark） */
+	navSidebarVariant(theme) {
+		return theme.nav?.variant === "light" ? "light" : "dark";
+	}
 	/**
-	* nav 侧栏外观声明：按主题 `nav.variant`（默认 dark）取内置深/浅侧栏 token，
-	* 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+	* 主题 nav 覆盖声明：顶层字符串键对所有变体生效；
+	* `nav.variants[variant]` 只对该变体生效，追加在最后（同规则后者生效）。
 	*/
-	navSidebarDecls(theme) {
+	navOverrideDecls(theme, variant) {
 		const nav = theme.nav ?? {};
-		const variant = nav.variant === "light" ? "light" : "dark";
-		const decls = resolveNavSidebarDecls(this.series, variant);
-		const overrides = Object.keys(nav).filter((key) => key !== "variant" && typeof nav[key] === "string" && nav[key]).map((key) => `--u-nav-${str(key).kebabCase()}: ${nav[key]}`);
-		return [...decls, ...overrides];
+		const toDecls = (record) => Object.keys(record ?? {}).filter((key) => typeof record[key] === "string" && record[key]).map((key) => `--u-nav-${str(key).kebabCase()}: ${record[key]}`);
+		const topLevel = { ...nav };
+		delete topLevel.variant;
+		delete topLevel.variants;
+		return [...toDecls(topLevel), ...toDecls(nav.variants?.[variant])];
+	}
+	/** 指定系列 + 变体的 nav 声明（内置 token + 主题覆盖），供 html 级与容器级注入共用 */
+	navSeriesDecls(theme, series, variant) {
+		return [...resolveNavSidebarDecls(series, variant), ...this.navOverrideDecls(theme, variant)];
+	}
+	/**
+	* nav 侧栏外观声明：默认按主题 `nav.variant` 取内置深/浅侧栏 token，
+	* 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+	* @param variant 显式指定变体（容器级/预览取色用），不传取主题默认变体
+	*/
+	navSidebarDecls(theme, variant) {
+		return this.navSeriesDecls(theme, this.series, variant ?? this.navSidebarVariant(theme));
+	}
+	/**
+	* 派生指定菜单变体的主题。变体专属外观由 `nav.variants` 声明，
+	* 切换时不再需要手动展开 `navSidebarTokens` 覆盖预设个性色。
+	*/
+	withNavVariant(variant) {
+		return this.new({ nav: { variant } });
+	}
+	static toVariableMap(decls) {
+		const map = /* @__PURE__ */ new Map();
+		for (const decl of decls) {
+			const index = decl.indexOf(":");
+			if (index < 0) continue;
+			map.set(decl.slice(0, index).trim(), decl.slice(index + 1).trim());
+		}
+		return map;
+	}
+	/** 把 token 值里的 `var(--u-*)` 递归解析成具体色值（供主题预览/取色） */
+	static resolveVarValue(value, ...maps) {
+		let resolved = value;
+		for (let depth = 0; depth < 6 && resolved.includes("var(--u-"); depth += 1) {
+			const next = resolved.replace(/var\((--u-[\w-]+)\)/g, (raw, name) => {
+				for (const map of maps) {
+					const hit = map.get(name);
+					if (hit !== void 0) return hit;
+				}
+				return raw;
+			});
+			if (next === resolved) break;
+			resolved = next;
+		}
+		return resolved;
+	}
+	/**
+	* 解析当前主题某菜单变体的具体色值（键为去掉 `--u-nav-` 前缀的 token 名，
+	* 如 `'bg-color'`、`'active-color'`、`'surface-hairline'`）。
+	* 用于主题选择器预览等「主题未加载到 DOM 也要取色」的场景。
+	*/
+	navSidebarColors(variant) {
+		const raw = toRaw(this.theme);
+		const target = variant ?? this.navSidebarVariant(raw);
+		const themeVars = UITheme.toVariableMap(this.themeToDeclarationList(raw));
+		const navVars = UITheme.toVariableMap(this.navSeriesDecls(raw, this.series, target));
+		const colors = {};
+		for (const [name, value] of navVars) colors[name.replace(/^--u-nav-/, "")] = UITheme.resolveVarValue(value, themeVars, navVars);
+		return colors;
 	}
 	static removeExistingStyleTag(doc) {
 		const el = doc.getElementById(UITheme.themeID);
@@ -194,18 +257,28 @@ var UITheme = class UITheme {
 			style.textContent = css;
 		}
 	}
-	/** 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，并写入 html[data-theme] */
+	/**
+	* 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，写入 html[data-theme]；
+	* 同时注入容器级菜单变体规则（`[data-nav-variant]`）与实际底色色调 `html[data-nav-surface]`。
+	*/
 	render() {
 		const componentDecls = this.series === "dark" ? componentCssVarsDarkDecls : componentCssVarsLightDecls;
 		const raw = toRaw(this.theme);
+		const activeVariant = this.navSidebarVariant(raw);
 		const decls = [
 			...this.themeToDeclarationList(raw),
 			...componentDecls,
-			...this.navSidebarDecls(raw)
+			...this.navSeriesDecls(raw, this.series, activeVariant)
 		];
-		const css = `html { ${UITheme.declarationBlock(decls)} }`;
-		UITheme.applyGlobalCSS(css);
-		if (typeof document !== "undefined") document.documentElement.dataset.theme = this.series;
+		const block = UITheme.declarationBlock(decls);
+		const variantRules = ["light", "dark"].flatMap((series) => ["dark", "light"].map((variant) => {
+			return `html[data-theme="${series}"] [data-nav-variant="${variant}"] { ${UITheme.declarationBlock(this.navSeriesDecls(raw, series, variant))} }`;
+		}));
+		UITheme.applyGlobalCSS([`html { ${block} }`, ...variantRules].join("\n"));
+		if (typeof document !== "undefined") {
+			document.documentElement.dataset.theme = this.series;
+			document.documentElement.dataset.navSurface = navSurfaceTone(this.series, activeVariant);
+		}
 	}
 	new(customTheme = {}, options) {
 		function delEmpty(obj) {

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 {\n  componentCssVarsDarkDecls,\n  componentCssVarsLightDecls,\n  resolveNavSidebarDecls,\n  type NavSidebarVariant\n} from './component-css-vars'\nimport { hexRgbOnly, hexWithAlpha, isHexColor, 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\n/** 主题系列：浅色或深色。决定组件级 token 与 html[data-theme] */\nexport type ThemeSeries = 'light' | 'dark'\n\nexport interface UIThemeOptions {\n  /** 主题变更时是否自动重渲染，默认 true */\n  reactive?: boolean\n  /** 主题所属系列，默认 'light' */\n  series?: ThemeSeries\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  /** 主题所属系列：浅色 / 深色 */\n  series: ThemeSeries\n\n  private readonly reactiveEnabled: boolean\n\n  constructor(theme: Theme, options?: UIThemeOptions) {\n    this.reactiveEnabled = options?.reactive !== false\n    this.series = options?.series ?? 'light'\n    this.theme = reactive(theme) as Theme\n    if (this.reactiveEnabled) {\n      watch(this.theme, () => this.render(), { deep: true })\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      // nav 由 navSidebarDecls 按 variant + 覆盖项单独注入（须晚于组件级 token 才生效）\n      if (parentKey === '--u' && key === 'nav') return\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[] = []\n    for (const type of Object.keys(color)) {\n      const value = color[type as keyof typeof color]\n      // 非 hex 颜色（如 glass 主题的 rgba()）无法推导 alpha token，跳过避免生成 NaN 声明\n      if (typeof value !== 'string' || !isHexColor(value)) continue\n      const hex = value as `#${string}`\n      lines.push(`--u-bg-color-${type}-alpha: ${hex}aa`)\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 value = theme.color[type as keyof typeof theme.color]\n      if (typeof value !== 'string' || !isHexColor(value)) continue\n      const hex = value 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    if (isHexColor(borderHex)) {\n      for (const a of alphas) {\n        lines.push(`--u-border-color-a-${a}: ${hexWithAlpha(borderHex, a)}`)\n      }\n    }\n\n    const shadowHex = hexRgbOnly(theme.shadow.color)\n    // 阴影色非 hex（如 rgba()）时无法推导 alpha token，跳过避免生成 NaN 声明\n    if (isHexColor(shadowHex)) {\n      for (const a of alphas) {\n        lines.push(`--u-shadow-color-a-${a}: ${hexWithAlpha(shadowHex, a)}`)\n      }\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' && isHexColor(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（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 borderColor = theme.border.color as `#${string}`\n    const shadowColor = hexRgbOnly(theme.shadow.color)\n\n    // 依赖色含非 hex 值（如 glass 主题的 rgba()）时整体跳过，避免生成 NaN 声明；\n    // 组件侧 var() fallback 会接管，行为等同于此前的无效声明\n    if (![hover, top, black, borderColor].every(isHexColor)) return ''\n\n    const formHeaderBg = mixColor(top, hover, 0.04)\n\n    const kbdInset = mixColor(top, black, 0.25)\n    const kbdDropShadow = isHexColor(shadowColor)\n      ? hexWithAlpha(shadowColor, 60)\n      : 'rgba(0, 0, 0, 0.6)'\n\n    const lines = [\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: ${kbdDropShadow}`\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  /**\n   * nav 侧栏外观声明：按主题 `nav.variant`（默认 dark）取内置深/浅侧栏 token，\n   * 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。\n   */\n  navSidebarDecls(theme: Theme): string[] {\n    const nav = theme.nav ?? {}\n    const variant: NavSidebarVariant = nav.variant === 'light' ? 'light' : 'dark'\n    const decls = resolveNavSidebarDecls(this.series, variant)\n    const overrides = Object.keys(nav)\n      .filter((key) => key !== 'variant' && typeof nav[key] === 'string' && nav[key])\n      .map((key) => `--u-nav-${str(key).kebabCase()}: ${nav[key]}`)\n    return [...decls, ...overrides]\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  /** 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，并写入 html[data-theme] */\n  render(): void {\n    const componentDecls =\n      this.series === 'dark' ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n    const raw = toRaw(this.theme)\n    const decls = [\n      ...this.themeToDeclarationList(raw),\n      ...componentDecls,\n      ...this.navSidebarDecls(raw)\n    ]\n    const block = UITheme.declarationBlock(decls)\n    const css = `html { ${block} }`\n    UITheme.applyGlobalCSS(css)\n    if (typeof document !== 'undefined') {\n      document.documentElement.dataset.theme = this.series\n    }\n  }\n\n  new(customTheme: RecursivePartial<Theme> = {}, options?: { series?: ThemeSeries }): 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, {\n      reactive: this.reactiveEnabled,\n      series: options?.series ?? this.series\n    })\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 {\n  componentCssVarsDarkDecls,\n  componentCssVarsLightDecls,\n  navSurfaceTone,\n  resolveNavSidebarDecls,\n  type NavSidebarVariant\n} from './component-css-vars'\nimport { hexRgbOnly, hexWithAlpha, isHexColor, 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\n/** 主题系列：浅色或深色。决定组件级 token 与 html[data-theme] */\nexport type ThemeSeries = 'light' | 'dark'\n\nexport interface UIThemeOptions {\n  /** 主题变更时是否自动重渲染，默认 true */\n  reactive?: boolean\n  /** 主题所属系列，默认 'light' */\n  series?: ThemeSeries\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  /** 主题所属系列：浅色 / 深色 */\n  series: ThemeSeries\n\n  private readonly reactiveEnabled: boolean\n\n  constructor(theme: Theme, options?: UIThemeOptions) {\n    this.reactiveEnabled = options?.reactive !== false\n    this.series = options?.series ?? 'light'\n    this.theme = reactive(theme) as Theme\n    if (this.reactiveEnabled) {\n      watch(this.theme, () => this.render(), { deep: true })\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      // nav 由 navSidebarDecls 按 variant + 覆盖项单独注入（须晚于组件级 token 才生效）\n      if (parentKey === '--u' && key === 'nav') return\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[] = []\n    for (const type of Object.keys(color)) {\n      const value = color[type as keyof typeof color]\n      // 非 hex 颜色（如 glass 主题的 rgba()）无法推导 alpha token，跳过避免生成 NaN 声明\n      if (typeof value !== 'string' || !isHexColor(value)) continue\n      const hex = value as `#${string}`\n      lines.push(`--u-bg-color-${type}-alpha: ${hex}aa`)\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 value = theme.color[type as keyof typeof theme.color]\n      if (typeof value !== 'string' || !isHexColor(value)) continue\n      const hex = value 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    if (isHexColor(borderHex)) {\n      for (const a of alphas) {\n        lines.push(`--u-border-color-a-${a}: ${hexWithAlpha(borderHex, a)}`)\n      }\n    }\n\n    const shadowHex = hexRgbOnly(theme.shadow.color)\n    // 阴影色非 hex（如 rgba()）时无法推导 alpha token，跳过避免生成 NaN 声明\n    if (isHexColor(shadowHex)) {\n      for (const a of alphas) {\n        lines.push(`--u-shadow-color-a-${a}: ${hexWithAlpha(shadowHex, a)}`)\n      }\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' && isHexColor(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（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 borderColor = theme.border.color as `#${string}`\n    const shadowColor = hexRgbOnly(theme.shadow.color)\n\n    // 依赖色含非 hex 值（如 glass 主题的 rgba()）时整体跳过，避免生成 NaN 声明；\n    // 组件侧 var() fallback 会接管，行为等同于此前的无效声明\n    if (![hover, top, black, borderColor].every(isHexColor)) return ''\n\n    const formHeaderBg = mixColor(top, hover, 0.04)\n\n    const kbdInset = mixColor(top, black, 0.25)\n    const kbdDropShadow = isHexColor(shadowColor)\n      ? hexWithAlpha(shadowColor, 60)\n      : 'rgba(0, 0, 0, 0.6)'\n\n    const lines = [\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: ${kbdDropShadow}`\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  /** 主题的默认菜单变体（未声明时为 dark） */\n  private navSidebarVariant(theme: Theme): NavSidebarVariant {\n    return theme.nav?.variant === 'light' ? 'light' : 'dark'\n  }\n\n  /**\n   * 主题 nav 覆盖声明：顶层字符串键对所有变体生效；\n   * `nav.variants[variant]` 只对该变体生效，追加在最后（同规则后者生效）。\n   */\n  private navOverrideDecls(theme: Theme, variant: NavSidebarVariant): string[] {\n    const nav = theme.nav ?? {}\n    const toDecls = (record: Record<string, any> | undefined) =>\n      Object.keys(record ?? {})\n        .filter((key) => typeof record![key] === 'string' && record![key])\n        .map((key) => `--u-nav-${str(key).kebabCase()}: ${record![key]}`)\n\n    const topLevel: Record<string, any> = { ...nav }\n    delete topLevel.variant\n    delete topLevel.variants\n\n    return [...toDecls(topLevel), ...toDecls(nav.variants?.[variant])]\n  }\n\n  /** 指定系列 + 变体的 nav 声明（内置 token + 主题覆盖），供 html 级与容器级注入共用 */\n  private navSeriesDecls(theme: Theme, series: ThemeSeries, variant: NavSidebarVariant): string[] {\n    return [...resolveNavSidebarDecls(series, variant), ...this.navOverrideDecls(theme, variant)]\n  }\n\n  /**\n   * nav 侧栏外观声明：默认按主题 `nav.variant` 取内置深/浅侧栏 token，\n   * 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。\n   * @param variant 显式指定变体（容器级/预览取色用），不传取主题默认变体\n   */\n  navSidebarDecls(theme: Theme, variant?: NavSidebarVariant): string[] {\n    return this.navSeriesDecls(theme, this.series, variant ?? this.navSidebarVariant(theme))\n  }\n\n  /**\n   * 派生指定菜单变体的主题。变体专属外观由 `nav.variants` 声明，\n   * 切换时不再需要手动展开 `navSidebarTokens` 覆盖预设个性色。\n   */\n  withNavVariant(variant: NavSidebarVariant): UITheme {\n    return this.new({ nav: { variant } })\n  }\n\n  private static toVariableMap(decls: string[]): Map<string, string> {\n    const map = new Map<string, string>()\n    for (const decl of decls) {\n      const index = decl.indexOf(':')\n      if (index < 0) continue\n      map.set(decl.slice(0, index).trim(), decl.slice(index + 1).trim())\n    }\n    return map\n  }\n\n  /** 把 token 值里的 `var(--u-*)` 递归解析成具体色值（供主题预览/取色） */\n  private static resolveVarValue(value: string, ...maps: Array<Map<string, string>>): string {\n    let resolved = value\n    // token 引用链通常只有一层（nav → 语义 token），限制次数避免异常数据死循环\n    for (let depth = 0; depth < 6 && resolved.includes('var(--u-'); depth += 1) {\n      const next = resolved.replace(/var\\((--u-[\\w-]+)\\)/g, (raw, name: string) => {\n        for (const map of maps) {\n          const hit = map.get(name)\n          if (hit !== undefined) return hit\n        }\n        return raw\n      })\n      if (next === resolved) break\n      resolved = next\n    }\n    return resolved\n  }\n\n  /**\n   * 解析当前主题某菜单变体的具体色值（键为去掉 `--u-nav-` 前缀的 token 名，\n   * 如 `'bg-color'`、`'active-color'`、`'surface-hairline'`）。\n   * 用于主题选择器预览等「主题未加载到 DOM 也要取色」的场景。\n   */\n  navSidebarColors(variant?: NavSidebarVariant): Record<string, string> {\n    const raw = toRaw(this.theme) as Theme\n    const target = variant ?? this.navSidebarVariant(raw)\n    const themeVars = UITheme.toVariableMap(this.themeToDeclarationList(raw))\n    const navVars = UITheme.toVariableMap(this.navSeriesDecls(raw, this.series, target))\n    const colors: Record<string, string> = {}\n    for (const [name, value] of navVars) {\n      colors[name.replace(/^--u-nav-/, '')] = UITheme.resolveVarValue(value, themeVars, navVars)\n    }\n    return colors\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  /**\n   * 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，写入 html[data-theme]；\n   * 同时注入容器级菜单变体规则（`[data-nav-variant]`）与实际底色色调 `html[data-nav-surface]`。\n   */\n  render(): void {\n    const componentDecls =\n      this.series === 'dark' ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n    const raw = toRaw(this.theme)\n    const activeVariant = this.navSidebarVariant(raw)\n    const decls = [\n      ...this.themeToDeclarationList(raw),\n      ...componentDecls,\n      ...this.navSeriesDecls(raw, this.series, activeVariant)\n    ]\n    const block = UITheme.declarationBlock(decls)\n    // 容器级变体：同一主题下任意子树加 data-nav-variant 即可切换菜单深浅，无需重建主题\n    const variantRules = (['light', 'dark'] as const).flatMap((series) =>\n      (['dark', 'light'] as const).map((variant) => {\n        const variantBlock = UITheme.declarationBlock(this.navSeriesDecls(raw, series, variant))\n        return `html[data-theme=\"${series}\"] [data-nav-variant=\"${variant}\"] { ${variantBlock} }`\n      })\n    )\n    UITheme.applyGlobalCSS([`html { ${block} }`, ...variantRules].join('\\n'))\n    if (typeof document !== 'undefined') {\n      document.documentElement.dataset.theme = this.series\n      document.documentElement.dataset.navSurface = navSurfaceTone(this.series, activeVariant)\n    }\n  }\n\n  new(customTheme: RecursivePartial<Theme> = {}, options?: { series?: ThemeSeries }): 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, {\n      reactive: this.reactiveEnabled,\n      series: options?.series ?? this.series\n    })\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

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

@@ -2,7 +2,13 @@
 
 import { describe, expect, it } from 'vite-plus/test'
 
-import { componentCssVarsDark, componentCssVarsLight } from '../component-css-vars'
+import {
+  componentCssVarsDark,
+  componentCssVarsLight,
+  navSidebarTokens,
+  navSurfaceTokens,
+  navSurfaceTone
+} from '../component-css-vars'
 import {
   ancientTheme,
   darkTheme,
@@ -170,4 +176,97 @@ describe('UITheme', () => {
       }
     }
   })
+
+  it('nav.variants overrides apply only to their own variant', () => {
+    const t = ancientTheme.new({ nav: { variants: { light: { 'bg-color': '#f1ede0' } } } })
+    // 深变体（预设自带松烟墨）不受 light 变体覆盖影响
+    const darkDecls = t.navSidebarDecls(t.theme)
+    expect(darkDecls).toContain('--u-nav-bg-color: #303c34')
+    expect(darkDecls).not.toContain('--u-nav-bg-color: #f1ede0')
+    // 浅变体使用 variants.light 覆盖
+    const lightDecls = t.navSidebarDecls(t.theme, 'light')
+    expect(lightDecls).toContain('--u-nav-bg-color: #f1ede0')
+    expect(lightDecls).not.toContain('--u-nav-bg-color: #303c34')
+  })
+
+  it('nav top-level overrides still apply to every variant and lose to variants', () => {
+    const t = lightTheme.new({
+      nav: { 'hover-bg': '#111111', variants: { light: { 'hover-bg': '#222222' } } }
+    })
+    expect(t.navSidebarDecls(t.theme)).toContain('--u-nav-hover-bg: #111111')
+    const lightDecls = t.navSidebarDecls(t.theme, 'light')
+    expect(lightDecls).toContain('--u-nav-hover-bg: #111111')
+    expect(lightDecls).toContain('--u-nav-hover-bg: #222222')
+  })
+
+  it('withNavVariant derives a theme with the requested menu variant', () => {
+    const lightVariant = lightTheme.withNavVariant('light')
+    const lightDecls = lightVariant.navSidebarDecls(lightVariant.theme)
+    expect(lightDecls).toContain('--u-nav-bg-color: var(--u-bg-color-middle)')
+    // 浅底选中文字用更深的 primary，保证 13px 正文对比度
+    expect(lightDecls).toContain('--u-nav-active-color: var(--u-color-primary-dark-3)')
+    // hero 默认 light 变体，派生 dark 变体后回落到深墨侧栏
+    const heroDark = heroTheme.withNavVariant('dark')
+    expect(heroDark.navSidebarDecls(heroDark.theme)).toContain(
+      '--u-nav-bg-color: var(--u-text-color-title)'
+    )
+  })
+
+  it('nav surface tone reflects the real surface luminance', () => {
+    expect(navSurfaceTone('light', 'dark')).toBe('dark')
+    expect(navSurfaceTone('light', 'light')).toBe('light')
+    expect(navSurfaceTone('dark', 'dark')).toBe('dark')
+    // 深色系列的 light 变体只是提亮一档，表面仍是深底
+    expect(navSurfaceTone('dark', 'light')).toBe('dark')
+  })
+
+  it('nav tokens carry surface decoration tokens matching the surface tone', () => {
+    expect(navSidebarTokens('light', 'dark')['--u-nav-surface-hairline']).toBe(
+      'rgba(255, 255, 255, 0.07)'
+    )
+    expect(navSidebarTokens('light', 'light')['--u-nav-surface-hairline']).toBe(
+      'var(--u-border-color)'
+    )
+    // dark 系列的 light 变体表面仍是深底，装饰沿用深底那套
+    expect(navSidebarTokens('dark', 'light')['--u-nav-surface-hairline']).toBe(
+      'rgba(255, 255, 255, 0.07)'
+    )
+    expect(navSurfaceTokens('light', 'light')['--u-nav-surface-accent']).toBe(
+      'var(--u-color-primary)'
+    )
+  })
+
+  it('render emits container-level variant rules and html surface tone', () => {
+    if (typeof document === 'undefined') return
+    lightTheme.render()
+    const adopted = [...document.adoptedStyleSheets]
+      .flatMap((sheet) => sheet.cssRules.map((rule) => rule.cssText))
+      .join('\n')
+    const fallback = document.getElementById('ultra-ui-theme')?.textContent ?? ''
+    const css = adopted || fallback
+    expect(css).toContain('html[data-theme="light"] [data-nav-variant="dark"]')
+    expect(css).toContain('html[data-theme="dark"] [data-nav-variant="light"]')
+    // lightTheme 默认 dark 菜单：html 级实际底色色调为深底
+    expect(document.documentElement.dataset.navSurface).toBe('dark')
+    darkTheme.render()
+    expect(document.documentElement.dataset.navSurface).toBe('dark')
+  })
+
+  it('navSidebarColors resolves concrete colors for theme previews', () => {
+    const lightColors = lightTheme.navSidebarColors()
+    expect(lightColors['bg-color']).toBe('#18181b')
+    expect(lightColors['color']).toBe('rgba(255, 255, 255, 0.72)')
+    expect(lightColors['surface-hairline']).toBe('rgba(255, 255, 255, 0.07)')
+
+    const lightMenu = lightTheme.navSidebarColors('light')
+    expect(lightMenu['bg-color']).toBe('#fafafa')
+    expect(lightMenu['color']).toBe('#18181b')
+    expect(lightMenu['active-color']).toMatch(/^#[0-9a-f]{6}$/i)
+
+    // 预设个性侧栏色按变体隔离
+    expect(ancientTheme.navSidebarColors()['bg-color']).toBe('#303c34')
+    expect(ancientTheme.navSidebarColors('light')['bg-color']).toBe('#f7f4ea')
+    expect(heroTheme.navSidebarColors()['bg-color']).toBe('#fafafa')
+    expect(heroTheme.navSidebarColors('dark')['bg-color']).toBe('#11181C')
+  })
 })

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

@@ -236,10 +236,68 @@ export const componentCssVarsDarkDecls: string[] = recordToDeclList(componentCss
 
 // ─── Nav 侧栏外观：深/浅变体 × 明/暗主题系列 ───
 // 由 UITheme 按主题 `nav.variant`（默认 dark）选择注入，主题 `nav` 的其余键可逐项覆盖。
+// 同时注入实际底色色调（surface tone）与一组 `--u-nav-surface-*` 装饰 token：
+// 深色系列的任何变体、浅色系列的 dark 变体都是深底，应用壳绘制侧栏容器
+// （叠层渐变、分隔线、chip、品牌标记环、选中态、滚动条）可直接消费，无需写 [data-theme] 分支。
 
 /** 侧栏外观变体：dark 深底浅字 / light 浅底深字 */
 export type NavSidebarVariant = 'dark' | 'light'
 
+/** 侧栏实际底色色调：dark 深底 / light 浅底 */
+export type NavSurfaceTone = 'dark' | 'light'
+
+/**
+ * 某主题系列 + 菜单变体下侧栏的实际底色色调。
+ * 深色系列主题的两个变体都是深底（light 变体只是比内容区提亮一档）。
+ */
+export function navSurfaceTone(
+  series: 'light' | 'dark',
+  variant: NavSidebarVariant
+): NavSurfaceTone {
+  return series === 'dark' || variant === 'dark' ? 'dark' : 'light'
+}
+
+/** 深底侧栏的表面装饰 token */
+const navSurfaceDarkTone: Record<string, string> = {
+  '--u-nav-surface-overlay': `radial-gradient(120% 70% at 0% 0%, ${T('color', 'primary', 'a', '16')}, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3))`,
+  '--u-nav-surface-hairline': 'rgba(255, 255, 255, 0.07)',
+  '--u-nav-surface-chip-bg': 'rgba(255, 255, 255, 0.055)',
+  '--u-nav-surface-chip-border': 'rgba(255, 255, 255, 0.08)',
+  '--u-nav-surface-chip-hover-bg': 'rgba(255, 255, 255, 0.09)',
+  '--u-nav-surface-mark-ring': 'rgba(255, 255, 255, 0.14)',
+  '--u-nav-surface-active-gradient': `linear-gradient(90deg, ${T('color', 'primary', 'a', '35')}, ${T('color', 'primary', 'a', '5')})`,
+  '--u-nav-surface-active-ring': T('color', 'primary', 'a', '16'),
+  '--u-nav-surface-accent': T('color', 'primary', 'light', '5'),
+  '--u-nav-surface-scrollbar': 'rgba(255, 255, 255, 0.22)',
+  '--u-nav-surface-scrollbar-hover': 'rgba(255, 255, 255, 0.4)'
+}
+
+/** 浅底侧栏的表面装饰 token */
+const navSurfaceLightTone: Record<string, string> = {
+  '--u-nav-surface-overlay': `radial-gradient(120% 70% at 0% 0%, ${T('color', 'primary', 'a', '8')}, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.02))`,
+  '--u-nav-surface-hairline': T('border', 'color'),
+  '--u-nav-surface-chip-bg': 'rgba(15, 23, 42, 0.04)',
+  '--u-nav-surface-chip-border': T('border', 'color'),
+  '--u-nav-surface-chip-hover-bg': 'rgba(15, 23, 42, 0.07)',
+  '--u-nav-surface-mark-ring': 'rgba(15, 23, 42, 0.1)',
+  '--u-nav-surface-active-gradient': `linear-gradient(90deg, ${T('color', 'primary', 'a', '16')}, ${T('color', 'primary', 'a', '4')})`,
+  '--u-nav-surface-active-ring': T('color', 'primary', 'a', '8'),
+  '--u-nav-surface-accent': T('color', 'primary'),
+  '--u-nav-surface-scrollbar': T('text-color', 'assist', 'a', '40'),
+  '--u-nav-surface-scrollbar-hover': T('text-color', 'assist', 'a', '60')
+}
+
+/** 给内置外观 token 补上与其实际底色色调匹配的表面装饰 token */
+function withNavSurface(
+  appearance: Record<string, string>,
+  series: 'light' | 'dark',
+  variant: NavSidebarVariant
+): Record<string, string> {
+  const surface =
+    navSurfaceTone(series, variant) === 'dark' ? navSurfaceDarkTone : navSurfaceLightTone
+  return { ...appearance, ...surface }
+}
+
 /** 深侧栏 · 浅色主题下：深底（text-color.title）+ 浅前景，与浅色内容区拉开区分度 */
 const navSidebarDarkInLight: Record<string, string> = {
   '--u-nav-bg-color': T('text-color', 'title'),
@@ -254,14 +312,14 @@ const navSidebarDarkInLight: Record<string, string> = {
   '--u-nav-rail-bg': 'rgba(0, 0, 0, 0.2)'
 }
 
-/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景 */
+/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景；选中文字加深，保证 13px 正文的对比度 */
 const navSidebarLightInLight: Record<string, string> = {
   '--u-nav-bg-color': T('bg-color', 'middle'),
   '--u-nav-color': T('text-color', 'title'),
   '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),
   '--u-nav-hover-color': T('text-color', 'title'),
   '--u-nav-active-bg': T('color', 'primary', 'a', '10'),
-  '--u-nav-active-color': T('color', 'primary', 'dark', '1'),
+  '--u-nav-active-color': T('color', 'primary', 'dark', '3'),
   '--u-nav-strong-color': T('text-color', 'title'),
   '--u-nav-second-color': T('text-color', 'second'),
   '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),
@@ -282,14 +340,14 @@ const navSidebarDarkInDark: Record<string, string> = {
   '--u-nav-rail-bg': T('bg-color', 'bottom')
 }
 
-/** 浅侧栏 · 深色主题下：提亮侧栏（与深色内容区反向对比） */
+/** 浅侧栏 · 深色主题下：提亮侧栏（与深色内容区反向对比）；表面仍是深底，选中文字用白色保证对比度 */
 const navSidebarLightInDark: Record<string, string> = {
   '--u-nav-bg-color': T('bg-color', 'top'),
   '--u-nav-color': T('text-color', 'title'),
   '--u-nav-hover-bg': T('text-color', 'title', 'a', '8'),
   '--u-nav-hover-color': T('text-color', 'title'),
   '--u-nav-active-bg': T('color', 'primary', 'a', '22'),
-  '--u-nav-active-color': T('color', 'primary'),
+  '--u-nav-active-color': T('text-color', 'white'),
   '--u-nav-strong-color': T('text-color', 'title'),
   '--u-nav-second-color': T('text-color', 'second'),
   '--u-nav-sub-border-color': T('border', 'color', 'a', '52'),
@@ -300,11 +358,17 @@ const navSidebarCssVars: Record<
   'light' | 'dark',
   Record<NavSidebarVariant, Record<string, string>>
 > = {
-  light: { dark: navSidebarDarkInLight, light: navSidebarLightInLight },
-  dark: { dark: navSidebarDarkInDark, light: navSidebarLightInDark }
+  light: {
+    dark: withNavSurface(navSidebarDarkInLight, 'light', 'dark'),
+    light: withNavSurface(navSidebarLightInLight, 'light', 'light')
+  },
+  dark: {
+    dark: withNavSurface(navSidebarDarkInDark, 'dark', 'dark'),
+    light: withNavSurface(navSidebarLightInDark, 'dark', 'light')
+  }
 }
 
-/** 某主题系列 + 侧栏变体下的 nav 外观 token（键为 `--u-nav-*`） */
+/** 某主题系列 + 侧栏变体下的 nav token（外观 + 表面装饰，键为 `--u-nav-*`） */
 export function navSidebarTokens(
   series: 'light' | 'dark',
   variant: NavSidebarVariant
@@ -312,7 +376,17 @@ export function navSidebarTokens(
   return { ...navSidebarCssVars[series][variant] }
 }
 
-/** 解析某主题系列 + 侧栏变体下的 nav 外观 token 声明列表 */
+/** 某主题系列 + 侧栏变体下的 nav 表面装饰 token（键为 `--u-nav-surface-*`） */
+export function navSurfaceTokens(
+  series: 'light' | 'dark',
+  variant: NavSidebarVariant
+): Record<string, string> {
+  const surface =
+    navSurfaceTone(series, variant) === 'dark' ? navSurfaceDarkTone : navSurfaceLightTone
+  return { ...surface }
+}
+
+/** 解析某主题系列 + 侧栏变体下的 nav token 声明列表 */
 export function resolveNavSidebarDecls(
   series: 'light' | 'dark',
   variant: NavSidebarVariant

package/src/theme/presets/ancient.ts

@@ -25,7 +25,7 @@ export const ancientTheme = lightTheme.new({
   radius: { small: 4, default: 8, large: 12 },
   shadow: { color: 'rgba(64, 54, 32, 0.14)', x: 0, y: 4, blur: 16, spread: -2 },
   nav: {
-    // 松烟墨侧栏：黛墨 + 松烟绿调和
-    'bg-color': mixColor('#2b2a26', '#3d6b58', 0.28)
+    // 松烟墨侧栏（深变体）：黛墨 + 松烟绿调和；浅变体回落到主题宣纸底（bg middle）
+    variants: { dark: { 'bg-color': mixColor('#2b2a26', '#3d6b58', 0.28) } }
   }
 })

package/src/theme/presets/ocean.ts

@@ -34,7 +34,7 @@ export const oceanTheme = lightTheme.new({
   },
   transition: { fast: '0.12s', ease: 'cubic-bezier(0.22, 1, 0.36, 1)' },
   nav: {
-    // 深海礁侧栏：深礁 + 松石青调和
-    'bg-color': mixColor('#16302e', '#0d9488', 0.25)
+    // 深海礁侧栏（深变体）：深礁 + 松石青调和；浅变体回落到主题雾白底（bg middle）
+    variants: { dark: { 'bg-color': mixColor('#16302e', '#0d9488', 0.25) } }
   }
 })

package/src/theme/presets/sakura.ts

@@ -36,7 +36,7 @@ export const sakuraTheme = lightTheme.new({
   },
   transition: { easeOut: 'cubic-bezier(0.34, 1.56, 0.64, 1)' },
   nav: {
-    // 深酒红侧栏：樱墨 + 樱粉调和
-    'bg-color': mixColor('#43272f', '#e64980', 0.22)
+    // 深酒红侧栏（深变体）：樱墨 + 樱粉调和；浅变体回落到主题樱粉底（bg middle）
+    variants: { dark: { 'bg-color': mixColor('#43272f', '#e64980', 0.22) } }
   }
 })

package/src/theme/type.ts

@@ -182,12 +182,18 @@ export type Theme = {
   }
   /**
    * 侧栏导航（nav / dual-nav / group-nav）组件级变量。
-   * variant 选择深/浅侧栏外观，其余键覆盖同名 `--u-nav-*` token
-   * （如 `'bg-color'` → `--u-nav-bg-color`），覆盖优先级高于 variant 内置值。
+   * `variant` 选择默认深/浅侧栏外观；顶层其余字符串键对所有变体生效并覆盖同名
+   * `--u-nav-*` token（如 `'bg-color'` → `--u-nav-bg-color`）；
+   * `variants` 可为两个变体分别定制外观，只在该变体生效且优先级最高。
    */
   nav?: {
-    /** 侧栏外观：dark 深底浅字 / light 浅底深字，默认 dark */
+    /** 侧栏默认外观：dark 深底浅字 / light 浅底深字，默认 dark */
     variant?: 'dark' | 'light'
+    /**
+     * 按变体定制的外观覆盖，键同 nav 顶层（如 `'bg-color'`）。
+     * 未声明的变体回落到内置「主题系列 × 变体」token。
+     */
+    variants?: Partial<Record<'dark' | 'light', Record<string, string>>>
     [key: string]: any
   }
   /** 折叠面板组件级变量 */

package/src/theme/ui-theme.ts

@@ -5,6 +5,7 @@ import { reactive, toRaw, watch } from 'vue'
 import {
   componentCssVarsDarkDecls,
   componentCssVarsLightDecls,
+  navSurfaceTone,
   resolveNavSidebarDecls,
   type NavSidebarVariant
 } from './component-css-vars'
@@ -243,18 +244,94 @@ export class UITheme {
     return decls.join(';')
   }
 
+  /** 主题的默认菜单变体（未声明时为 dark） */
+  private navSidebarVariant(theme: Theme): NavSidebarVariant {
+    return theme.nav?.variant === 'light' ? 'light' : 'dark'
+  }
+
   /**
-   * nav 侧栏外观声明：按主题 `nav.variant`（默认 dark）取内置深/浅侧栏 token，
-   * 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+   * 主题 nav 覆盖声明：顶层字符串键对所有变体生效；
+   * `nav.variants[variant]` 只对该变体生效，追加在最后（同规则后者生效）。
    */
-  navSidebarDecls(theme: Theme): string[] {
+  private navOverrideDecls(theme: Theme, variant: NavSidebarVariant): string[] {
     const nav = theme.nav ?? {}
-    const variant: NavSidebarVariant = nav.variant === 'light' ? 'light' : 'dark'
-    const decls = resolveNavSidebarDecls(this.series, variant)
-    const overrides = Object.keys(nav)
-      .filter((key) => key !== 'variant' && typeof nav[key] === 'string' && nav[key])
-      .map((key) => `--u-nav-${str(key).kebabCase()}: ${nav[key]}`)
-    return [...decls, ...overrides]
+    const toDecls = (record: Record<string, any> | undefined) =>
+      Object.keys(record ?? {})
+        .filter((key) => typeof record![key] === 'string' && record![key])
+        .map((key) => `--u-nav-${str(key).kebabCase()}: ${record![key]}`)
+
+    const topLevel: Record<string, any> = { ...nav }
+    delete topLevel.variant
+    delete topLevel.variants
+
+    return [...toDecls(topLevel), ...toDecls(nav.variants?.[variant])]
+  }
+
+  /** 指定系列 + 变体的 nav 声明（内置 token + 主题覆盖），供 html 级与容器级注入共用 */
+  private navSeriesDecls(theme: Theme, series: ThemeSeries, variant: NavSidebarVariant): string[] {
+    return [...resolveNavSidebarDecls(series, variant), ...this.navOverrideDecls(theme, variant)]
+  }
+
+  /**
+   * nav 侧栏外观声明：默认按主题 `nav.variant` 取内置深/浅侧栏 token，
+   * 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+   * @param variant 显式指定变体（容器级/预览取色用），不传取主题默认变体
+   */
+  navSidebarDecls(theme: Theme, variant?: NavSidebarVariant): string[] {
+    return this.navSeriesDecls(theme, this.series, variant ?? this.navSidebarVariant(theme))
+  }
+
+  /**
+   * 派生指定菜单变体的主题。变体专属外观由 `nav.variants` 声明，
+   * 切换时不再需要手动展开 `navSidebarTokens` 覆盖预设个性色。
+   */
+  withNavVariant(variant: NavSidebarVariant): UITheme {
+    return this.new({ nav: { variant } })
+  }
+
+  private static toVariableMap(decls: string[]): Map<string, string> {
+    const map = new Map<string, string>()
+    for (const decl of decls) {
+      const index = decl.indexOf(':')
+      if (index < 0) continue
+      map.set(decl.slice(0, index).trim(), decl.slice(index + 1).trim())
+    }
+    return map
+  }
+
+  /** 把 token 值里的 `var(--u-*)` 递归解析成具体色值（供主题预览/取色） */
+  private static resolveVarValue(value: string, ...maps: Array<Map<string, string>>): string {
+    let resolved = value
+    // token 引用链通常只有一层（nav → 语义 token），限制次数避免异常数据死循环
+    for (let depth = 0; depth < 6 && resolved.includes('var(--u-'); depth += 1) {
+      const next = resolved.replace(/var\((--u-[\w-]+)\)/g, (raw, name: string) => {
+        for (const map of maps) {
+          const hit = map.get(name)
+          if (hit !== undefined) return hit
+        }
+        return raw
+      })
+      if (next === resolved) break
+      resolved = next
+    }
+    return resolved
+  }
+
+  /**
+   * 解析当前主题某菜单变体的具体色值（键为去掉 `--u-nav-` 前缀的 token 名，
+   * 如 `'bg-color'`、`'active-color'`、`'surface-hairline'`）。
+   * 用于主题选择器预览等「主题未加载到 DOM 也要取色」的场景。
+   */
+  navSidebarColors(variant?: NavSidebarVariant): Record<string, string> {
+    const raw = toRaw(this.theme) as Theme
+    const target = variant ?? this.navSidebarVariant(raw)
+    const themeVars = UITheme.toVariableMap(this.themeToDeclarationList(raw))
+    const navVars = UITheme.toVariableMap(this.navSeriesDecls(raw, this.series, target))
+    const colors: Record<string, string> = {}
+    for (const [name, value] of navVars) {
+      colors[name.replace(/^--u-nav-/, '')] = UITheme.resolveVarValue(value, themeVars, navVars)
+    }
+    return colors
   }
 
   private static removeExistingStyleTag(doc: Document): void {
@@ -292,21 +369,32 @@ export class UITheme {
     }
   }
 
-  /** 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，并写入 html[data-theme] */
+  /**
+   * 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，写入 html[data-theme]；
+   * 同时注入容器级菜单变体规则（`[data-nav-variant]`）与实际底色色调 `html[data-nav-surface]`。
+   */
   render(): void {
     const componentDecls =
       this.series === 'dark' ? componentCssVarsDarkDecls : componentCssVarsLightDecls
     const raw = toRaw(this.theme)
+    const activeVariant = this.navSidebarVariant(raw)
     const decls = [
       ...this.themeToDeclarationList(raw),
       ...componentDecls,
-      ...this.navSidebarDecls(raw)
+      ...this.navSeriesDecls(raw, this.series, activeVariant)
     ]
     const block = UITheme.declarationBlock(decls)
-    const css = `html { ${block} }`
-    UITheme.applyGlobalCSS(css)
+    // 容器级变体：同一主题下任意子树加 data-nav-variant 即可切换菜单深浅，无需重建主题
+    const variantRules = (['light', 'dark'] as const).flatMap((series) =>
+      (['dark', 'light'] as const).map((variant) => {
+        const variantBlock = UITheme.declarationBlock(this.navSeriesDecls(raw, series, variant))
+        return `html[data-theme="${series}"] [data-nav-variant="${variant}"] { ${variantBlock} }`
+      })
+    )
+    UITheme.applyGlobalCSS([`html { ${block} }`, ...variantRules].join('\n'))
     if (typeof document !== 'undefined') {
       document.documentElement.dataset.theme = this.series
+      document.documentElement.dataset.navSurface = navSurfaceTone(this.series, activeVariant)
     }
   }