@veltra/styles 1.6.6 → 1.7.1

package/README.md

@@ -38,3 +38,25 @@ import '@veltra/styles/transitions/fade.css'
 本包提供了一些常用的 `scss` 工具，包括常用的 `mixins` 与 常用的 `functions`, 你还可以通过覆盖变量 $namespace 来使用当前库的同一套工具体系，只不过是命名空间不一样。
 
 ## 主题加载以及切换
+
+从 `@veltra/styles/theme` 导入预设主题，在入口（SSR 则在 `onMounted`）调用 `loadTheme`：
+
+```ts
+import { loadTheme, lightTheme, heroTheme, glassTheme } from '@veltra/styles/theme'
+
+loadTheme() // 默认 lightTheme
+loadTheme(heroTheme) // 应用指定预设
+```
+
+预设主题按系列组织，应用主题即确定明暗（`html[data-theme]` 同步写入）：
+
+- 浅色系：`lightTheme`、`heroTheme`、`ancientTheme`
+- 深色系：`darkTheme`、`glassTheme`
+
+基于预设派生自定义主题：
+
+```ts
+loadTheme(lightTheme.new({ color: { primary: '#ff6600' } }))
+```
+
+深色派生需声明系列：`lightTheme.new({...}, { series: 'dark' })`。

package/dist/_mixins.scss

@@ -146,17 +146,11 @@ $namespace: 'u' !default;
   @return var(--#{$namespace}-breakpoint-#{$point});
 }
 
-/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+/** 暗色：`UITheme.render()` 按主题系列写入 html[data-theme] */
 @mixin dark {
   html[data-theme='dark'] & {
     @content;
   }
-
-  @media (prefers-color-scheme: dark) {
-    html:not([data-theme='light']) & {
-      @content;
-    }
-  }
 }
 
 @mixin xs {

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

@@ -0,0 +1,24 @@
+//#region src/theme/component-css-vars.d.ts
+/**
+ * 桌面组件级 `--u-*` token，随 `UITheme.render()` 按主题系列（light/dark）注入 `html`。
+ * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。
+ * nav 系列：外观（底色/前景）不在此列表，由 `navSidebarCssVars` 按主题 `nav.variant`
+ * （dark 深底浅字 / light 浅底深字，默认 dark）与 `nav` 覆盖项注入，见 `ui-theme.ts`。
+ */
+/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */
+declare function themeTokenVar(basename: string, ...nodes: Array<string | number>): string;
+/** 亮色（及与暗色相同的尺寸类）下组件 token */
+declare const componentCssVarsLight: Record<string, string>;
+/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */
+declare const componentCssVarsDark: Record<string, string>;
+declare const componentCssVarsLightDecls: string[];
+declare const componentCssVarsDarkDecls: string[];
+/** 侧栏外观变体：dark 深底浅字 / light 浅底深字 */
+type NavSidebarVariant = 'dark' | 'light';
+/** 某主题系列 + 侧栏变体下的 nav 外观 token（键为 `--u-nav-*`） */
+declare function navSidebarTokens(series: 'light' | 'dark', variant: NavSidebarVariant): Record<string, string>;
+/** 解析某主题系列 + 侧栏变体下的 nav 外观 token 声明列表 */
+declare function resolveNavSidebarDecls(series: 'light' | 'dark', variant: NavSidebarVariant): string[];
+//#endregion
+export { NavSidebarVariant, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, resolveNavSidebarDecls, themeTokenVar };
+//# sourceMappingURL=component-css-vars.d.ts.map

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

@@ -1,7 +1,9 @@
 //#region src/theme/component-css-vars.ts
 /**
-* 桌面组件级 `--u-*` token，与内置主题一起在 `UITheme.injectBuiltInThemes` 中注入 `html`。
+* 桌面组件级 `--u-*` token，随 `UITheme.render()` 按主题系列（light/dark）注入 `html`。
 * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。
+* nav 系列：外观（底色/前景）不在此列表，由 `navSidebarCssVars` 按主题 `nav.variant`
+* （dark 深底浅字 / light 浅底深字，默认 dark）与 `nav` 覆盖项注入，见 `ui-theme.ts`。
 */
 /** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */
 function themeTokenVar(basename, ...nodes) {
@@ -22,15 +24,9 @@ const componentCssVarsLight = {
 	"--u-table-current-color": "inherit",
 	"--u-table-checked-bg": T("color", "primary", "light-9"),
 	"--u-table-checked-color": "inherit",
-	"--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-height-small": "32px",
 	"--u-nav-height-default": "36px",
 	"--u-nav-height-large": "40px",
-	"--u-nav-bg-color": T("bg-color", "top"),
 	"--u-nav-bg-image": "none",
 	"--u-nav-rail-width": "56px",
 	"--u-nav-rail-labeled-width": "72px",
@@ -108,12 +104,6 @@ const componentCssVarsDark = {
 	"--u-table-current-color": "inherit",
 	"--u-table-checked-bg": T("color", "primary", "dark", "1"),
 	"--u-table-checked-color": "inherit",
-	"--u-nav-color": T("text-color", "main"),
-	"--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", "16"),
-	"--u-nav-active-color": T("text-color", "white"),
-	"--u-nav-bg-color": T("bg-color", "middle"),
 	"--u-radio-border": "#595959",
 	"--u-checkbox-border": "#595959",
 	"--u-button-primary-plain-bg": T("color", "primary", "dark", "9"),
@@ -162,7 +152,77 @@ function recordToDeclList(record) {
 }
 const componentCssVarsLightDecls = recordToDeclList(componentCssVarsLight);
 const componentCssVarsDarkDecls = recordToDeclList(componentCssVarsDark);
+/** 深侧栏 · 浅色主题下：深底（text-color.title）+ 浅前景，与浅色内容区拉开区分度 */
+const navSidebarDarkInLight = {
+	"--u-nav-bg-color": T("text-color", "title"),
+	"--u-nav-color": "rgba(255, 255, 255, 0.72)",
+	"--u-nav-hover-bg": "rgba(255, 255, 255, 0.08)",
+	"--u-nav-hover-color": T("text-color", "white"),
+	"--u-nav-active-bg": T("color", "primary", "a", "22"),
+	"--u-nav-active-color": T("text-color", "white"),
+	"--u-nav-strong-color": T("text-color", "white"),
+	"--u-nav-second-color": "rgba(255, 255, 255, 0.45)",
+	"--u-nav-sub-border-color": "rgba(255, 255, 255, 0.15)",
+	"--u-nav-rail-bg": "rgba(0, 0, 0, 0.2)"
+};
+/** 浅侧栏 · 浅色主题下：比内容区 top 低一档的浅底 + 深前景 */
+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-strong-color": T("text-color", "title"),
+	"--u-nav-second-color": T("text-color", "second"),
+	"--u-nav-sub-border-color": T("border", "color", "a", "52"),
+	"--u-nav-rail-bg": T("bg-color", "bottom")
+};
+/** 深侧栏 · 深色主题下：比内容区 top 深一档 */
+const navSidebarDarkInDark = {
+	"--u-nav-bg-color": T("bg-color", "middle"),
+	"--u-nav-color": T("text-color", "main"),
+	"--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", "16"),
+	"--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"),
+	"--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-strong-color": T("text-color", "title"),
+	"--u-nav-second-color": T("text-color", "second"),
+	"--u-nav-sub-border-color": T("border", "color", "a", "52"),
+	"--u-nav-rail-bg": T("bg-color", "middle")
+};
+const navSidebarCssVars = {
+	light: {
+		dark: navSidebarDarkInLight,
+		light: navSidebarLightInLight
+	},
+	dark: {
+		dark: navSidebarDarkInDark,
+		light: navSidebarLightInDark
+	}
+};
+/** 某主题系列 + 侧栏变体下的 nav 外观 token（键为 `--u-nav-*`） */
+function navSidebarTokens(series, variant) {
+	return { ...navSidebarCssVars[series][variant] };
+}
+/** 解析某主题系列 + 侧栏变体下的 nav 外观 token 声明列表 */
+function resolveNavSidebarDecls(series, variant) {
+	return recordToDeclList(navSidebarCssVars[series][variant]);
+}
 //#endregion
-export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar };
+export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, 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.injectBuiltInThemes` 中注入 `html`。\n * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。\n */\n\n/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */\nexport function themeTokenVar(basename: string, ...nodes: Array<string | number>): string {\n  const suffix = nodes.length ? `-${nodes.map(String).join('-')}` : ''\n  return `var(--u-${basename}${suffix})`\n}\n\nconst T = themeTokenVar\n\n/** 亮色（及与暗色相同的尺寸类）下组件 token */\nexport const componentCssVarsLight: Record<string, string> = {\n  '--u-focus-ring': `0 0 0 3px ${T('color', 'primary', '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  '--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-height-small': '32px',\n  '--u-nav-height-default': '36px',\n  '--u-nav-height-large': '40px',\n  '--u-nav-bg-color': T('bg-color', 'top'),\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\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  // ─── 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-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-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-bg-color': T('bg-color', 'middle'),\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  // ─── 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"],"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-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\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  // ─── 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-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  // ─── 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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"}

package/dist/theme/index.d.ts

@@ -1,11 +1,15 @@
 import { RGBColor, Theme } from "./type.js";
-import { UITheme } from "./ui-theme.js";
+import { NavSidebarVariant, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, 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";
-import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
-import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
-import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
-import { ancientLightTheme } from "./presets/ancient.js";
-import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
+import { heroTheme } from "./presets/hero.js";
+import { glassTheme } from "./presets/glass.js";
+import { ancientTheme } from "./presets/ancient.js";
+import { sakuraTheme } from "./presets/sakura.js";
+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";
 import { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, isHexColor, mixColor, mixColorWithAlpha } from "./helper.js";
-export { HEXToRGB, type RGBColor, type Theme, UITheme, ancientLightTheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, hexRgbOnly, hexWithAlpha, isHexColor, lightTheme, loadTheme, mixColor, mixColorWithAlpha, setTheme, shadcnDarkTheme, shadcnLightTheme };
+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 };

package/dist/theme/index.js

@@ -1,10 +1,14 @@
+import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, 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";
 import { darkTheme } from "./presets/dark.js";
-import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
-import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
-import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
-import { ancientLightTheme } from "./presets/ancient.js";
-import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
-export { HEXToRGB, UITheme, ancientLightTheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, hexRgbOnly, hexWithAlpha, isHexColor, lightTheme, loadTheme, mixColor, mixColorWithAlpha, setTheme, shadcnDarkTheme, shadcnLightTheme };
+import { heroTheme } from "./presets/hero.js";
+import { glassTheme } from "./presets/glass.js";
+import { ancientTheme } from "./presets/ancient.js";
+import { sakuraTheme } from "./presets/sakura.js";
+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 };

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

@@ -2,16 +2,15 @@ import { UITheme } from "./ui-theme.js";
 import { ShallowRef } from "vue";
 //#region src/theme/load-theme.d.ts
 declare const currentTheme: ShallowRef<UITheme | undefined>;
-declare function setTheme(mode: 'light' | 'dark' | 'auto'): void;
 /**
  * @description 加载主题, 如果你是 SSR 环境,
  * 请在 `onMounted` 中调用，否则你可以在
  * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。
  *
- * 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。
- * 传入自定义 `UITheme` 时使用单次 `html { }` 注入。
+ * 主题自带系列（`theme.series`），应用时会注入全局 token 与
+ * 同系列的组件级 token，并把 `html[data-theme]` 置为对应系列。
  */
 declare function loadTheme(theme?: UITheme): void;
 //#endregion
-export { currentTheme, loadTheme, setTheme };
+export { currentTheme, loadTheme };
 //# sourceMappingURL=load-theme.d.ts.map

package/dist/theme/load-theme.js

@@ -1,38 +1,31 @@
-import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./presets/light.js";
-import { darkTheme } from "./presets/dark.js";
 import { shallowRef } from "vue";
 import { useConfig } from "@veltra/compositions";
 //#region src/theme/load-theme.ts
 const currentTheme = shallowRef();
-function setTheme(mode) {
-	UITheme.setTheme(mode);
-}
+const SIZES = [
+	"small",
+	"default",
+	"large"
+];
 /**
 * @description 加载主题, 如果你是 SSR 环境,
 * 请在 `onMounted` 中调用，否则你可以在
 * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。
 *
-* 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。
-* 传入自定义 `UITheme` 时使用单次 `html { }` 注入。
+* 主题自带系列（`theme.series`），应用时会注入全局 token 与
+* 同系列的组件级 token，并把 `html[data-theme]` 置为对应系列。
 */
-function loadTheme(theme) {
-	currentTheme.value = theme ?? lightTheme;
-	const { config } = useConfig();
-	if (typeof document !== "undefined") document.documentElement.classList.add(config.size);
-	if (typeof document === "undefined") return;
-	if (!theme) {
-		currentTheme.value = lightTheme;
-		UITheme.injectBuiltInThemes(lightTheme, darkTheme);
-		return;
-	}
+function loadTheme(theme = lightTheme) {
 	currentTheme.value = theme;
-	if (theme === lightTheme || theme === darkTheme) {
-		UITheme.injectBuiltInThemes(lightTheme, darkTheme);
-		UITheme.setTheme(theme === darkTheme ? "dark" : "light");
-	} else theme.render();
+	if (typeof document === "undefined") return;
+	const { config } = useConfig();
+	const classList = document.documentElement.classList;
+	classList.remove(...SIZES.filter((s) => s !== config.size));
+	classList.add(config.size);
+	theme.render();
 }
 //#endregion
-export { currentTheme, loadTheme, setTheme };
+export { currentTheme, loadTheme };
 
 //# sourceMappingURL=load-theme.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"load-theme.js","names":[],"sources":["../../src/theme/load-theme.ts"],"sourcesContent":["import { useConfig } from '@veltra/compositions'\nimport { shallowRef, type ShallowRef } from 'vue'\n\nimport { lightTheme, darkTheme } from './presets'\nimport { UITheme } from './ui-theme'\n\nexport const currentTheme: ShallowRef<UITheme | undefined> = shallowRef<UITheme>()\n\nexport function setTheme(mode: 'light' | 'dark' | 'auto'): void {\n  UITheme.setTheme(mode)\n}\n\n/**\n * @description 加载主题, 如果你是 SSR 环境,\n * 请在 `onMounted` 中调用，否则你可以在\n * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。\n *\n * 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。\n * 传入自定义 `UITheme` 时使用单次 `html { }` 注入。\n */\nexport function loadTheme(theme?: UITheme): void {\n  currentTheme.value = theme ?? lightTheme\n\n  const { config } = useConfig()\n  if (typeof document !== 'undefined') {\n    document.documentElement.classList.add(config.size)\n  }\n\n  if (typeof document === 'undefined') return\n\n  if (!theme) {\n    currentTheme.value = lightTheme\n    UITheme.injectBuiltInThemes(lightTheme, darkTheme)\n    return\n  }\n\n  currentTheme.value = theme\n\n  if (theme === lightTheme || theme === darkTheme) {\n    UITheme.injectBuiltInThemes(lightTheme, darkTheme)\n    UITheme.setTheme(theme === darkTheme ? 'dark' : 'light')\n  } else {\n    theme.render()\n  }\n}\n"],"mappings":";;;;;;AAMA,MAAa,eAAgD,WAAoB;AAEjF,SAAgB,SAAS,MAAuC;CAC9D,QAAQ,SAAS,IAAI;AACvB;;;;;;;;;AAUA,SAAgB,UAAU,OAAuB;CAC/C,aAAa,QAAQ,SAAS;CAE9B,MAAM,EAAE,WAAW,UAAU;CAC7B,IAAI,OAAO,aAAa,aACtB,SAAS,gBAAgB,UAAU,IAAI,OAAO,IAAI;CAGpD,IAAI,OAAO,aAAa,aAAa;CAErC,IAAI,CAAC,OAAO;EACV,aAAa,QAAQ;EACrB,QAAQ,oBAAoB,YAAY,SAAS;EACjD;CACF;CAEA,aAAa,QAAQ;CAErB,IAAI,UAAU,cAAc,UAAU,WAAW;EAC/C,QAAQ,oBAAoB,YAAY,SAAS;EACjD,QAAQ,SAAS,UAAU,YAAY,SAAS,OAAO;CACzD,OACE,MAAM,OAAO;AAEjB"}
+{"version":3,"file":"load-theme.js","names":[],"sources":["../../src/theme/load-theme.ts"],"sourcesContent":["import { useConfig } from '@veltra/compositions'\nimport { shallowRef, type ShallowRef } from 'vue'\n\nimport { lightTheme } from './presets'\nimport type { UITheme } from './ui-theme'\n\nexport const currentTheme: ShallowRef<UITheme | undefined> = shallowRef<UITheme>()\n\nconst SIZES = ['small', 'default', 'large'] as const\n\n/**\n * @description 加载主题, 如果你是 SSR 环境,\n * 请在 `onMounted` 中调用，否则你可以在\n * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。\n *\n * 主题自带系列（`theme.series`），应用时会注入全局 token 与\n * 同系列的组件级 token，并把 `html[data-theme]` 置为对应系列。\n */\nexport function loadTheme(theme: UITheme = lightTheme): void {\n  currentTheme.value = theme\n\n  if (typeof document === 'undefined') return\n\n  const { config } = useConfig()\n  const classList = document.documentElement.classList\n  classList.remove(...SIZES.filter((s) => s !== config.size))\n  classList.add(config.size)\n\n  theme.render()\n}\n"],"mappings":";;;;AAMA,MAAa,eAAgD,WAAoB;AAEjF,MAAM,QAAQ;CAAC;CAAS;CAAW;AAAO;;;;;;;;;AAU1C,SAAgB,UAAU,QAAiB,YAAkB;CAC3D,aAAa,QAAQ;CAErB,IAAI,OAAO,aAAa,aAAa;CAErC,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,YAAY,SAAS,gBAAgB;CAC3C,UAAU,OAAO,GAAG,MAAM,QAAQ,MAAM,MAAM,OAAO,IAAI,CAAC;CAC1D,UAAU,IAAI,OAAO,IAAI;CAEzB,MAAM,OAAO;AACf"}

package/dist/theme/presets/ancient.d.ts

@@ -1,7 +1,8 @@
 import { UITheme } from "../ui-theme.js";
 import "../index.js";
 //#region src/theme/presets/ancient.d.ts
-declare const ancientLightTheme: UITheme;
+/** 古风（松烟绿 + 宣纸底），天生适合浅色 */
+declare const ancientTheme: UITheme;
 //#endregion
-export { ancientLightTheme };
+export { ancientTheme };
 //# sourceMappingURL=ancient.d.ts.map

package/dist/theme/presets/ancient.js

@@ -1,6 +1,8 @@
+import { mixColor } from "../helper.js";
 import { lightTheme } from "./light.js";
 //#region src/theme/presets/ancient.ts
-const ancientLightTheme = lightTheme.new({
+/** 古风（松烟绿 + 宣纸底），天生适合浅色 */
+const ancientTheme = lightTheme.new({
 	color: { primary: "#3d6b58" },
 	bg: { color: {
 		bottom: "#f1ede0",
@@ -31,9 +33,10 @@ const ancientLightTheme = lightTheme.new({
 		y: 4,
 		blur: 16,
 		spread: -2
-	}
+	},
+	nav: { "bg-color": mixColor("#2b2a26", "#3d6b58", .28) }
 });
 //#endregion
-export { ancientLightTheme };
+export { ancientTheme };
 
 //# sourceMappingURL=ancient.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ancient.js","names":[],"sources":["../../../src/theme/presets/ancient.ts"],"sourcesContent":["import { lightTheme } from './light'\nexport const ancientLightTheme = 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})\n"],"mappings":";;AACA,MAAa,oBAAoB,WAAW,IAAI;CAC9C,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;AAC9E,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    // 松烟墨侧栏：黛墨 + 松烟绿调和\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"}

package/dist/theme/presets/dark.js

@@ -46,7 +46,7 @@ const darkTheme = lightTheme.new({
 		sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
 		lg: "0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)"
 	}
-});
+}, { series: "dark" });
 //#endregion
 export { darkTheme };
 

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

@@ -1 +1 @@
-{"version":3,"file":"dark.js","names":[],"sources":["../../../src/theme/presets/dark.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const darkTheme = lightTheme.new({\n  color: {\n    primary: '#3b82f6',\n    success: '#22c55e',\n    warning: '#f59e0b',\n    danger: '#ef4444',\n    info: '#06b6d4',\n    disabled: '#27272a',\n    default: '#27272a'\n  },\n\n  bg: {\n    color: {\n      bottom: '#0c0c0e',\n      middle: '#141417',\n      top: '#1c1c21',\n      hover: '#26262c',\n      black: '#000000'\n    },\n    filter: { blur: 'none', saturate: 'none' }\n  },\n\n  'text-color': {\n    title: '#f4f4f5',\n    main: '#d4d4d8',\n    second: '#a1a1aa',\n    placeholder: '#71717a',\n    assist: '#52525b',\n    disabled: '#3f3f46',\n    white: '#ffffff'\n  },\n\n  border: { color: '#37373f', mutedColor: '#42424c' },\n\n  shadow: {\n    color: '#00000066',\n    x: 0,\n    y: 1,\n    blur: 3,\n    spread: 0,\n    emboss: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\n    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'\n  }\n})\n"],"mappings":";;AAEA,MAAa,YAAY,WAAW,IAAI;CACtC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CAEA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAO;CAC3C;CAEA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CAEA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAElD,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;AACF,CAAC"}
+{"version":3,"file":"dark.js","names":[],"sources":["../../../src/theme/presets/dark.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const darkTheme = lightTheme.new(\n  {\n    color: {\n      primary: '#3b82f6',\n      success: '#22c55e',\n      warning: '#f59e0b',\n      danger: '#ef4444',\n      info: '#06b6d4',\n      disabled: '#27272a',\n      default: '#27272a'\n    },\n\n    bg: {\n      color: {\n        bottom: '#0c0c0e',\n        middle: '#141417',\n        top: '#1c1c21',\n        hover: '#26262c',\n        black: '#000000'\n      },\n      filter: { blur: 'none', saturate: 'none' }\n    },\n\n    'text-color': {\n      title: '#f4f4f5',\n      main: '#d4d4d8',\n      second: '#a1a1aa',\n      placeholder: '#71717a',\n      assist: '#52525b',\n      disabled: '#3f3f46',\n      white: '#ffffff'\n    },\n\n    border: { color: '#37373f', mutedColor: '#42424c' },\n\n    shadow: {\n      color: '#00000066',\n      x: 0,\n      y: 1,\n      blur: 3,\n      spread: 0,\n      emboss: 'none',\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\n      lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'\n    }\n  },\n  { series: 'dark' }\n)\n"],"mappings":";;AAEA,MAAa,YAAY,WAAW,IAClC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CAEA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAO;CAC3C;CAEA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CAEA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAElD,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;AACF,GACA,EAAE,QAAQ,OAAO,CACnB"}

package/dist/theme/presets/glass.d.ts

@@ -1,8 +1,12 @@
 import { UITheme } from "../ui-theme.js";
 import "../index.js";
 //#region src/theme/presets/glass.d.ts
-declare const glassLightTheme: UITheme;
-declare const glassDarkTheme: UITheme;
+/**
+ * 玻璃拟态，天生适合深色（半透明背景 + 背景模糊在深色下层次最好）。
+ * 背景为 rgba() 时派生 token（kbd / batch-edit 混合色）无法自动推导，
+ * 需通过组件级扩展键显式声明。
+ */
+declare const glassTheme: UITheme;
 //#endregion
-export { glassDarkTheme, glassLightTheme };
+export { glassTheme };
 //# sourceMappingURL=glass.d.ts.map

package/dist/theme/presets/glass.js

@@ -1,54 +1,17 @@
 import { lightTheme } from "./light.js";
 //#region src/theme/presets/glass.ts
-const glassLightTheme = lightTheme.new({
+/**
+* 玻璃拟态，天生适合深色（半透明背景 + 背景模糊在深色下层次最好）。
+* 背景为 rgba() 时派生 token（kbd / batch-edit 混合色）无法自动推导，
+* 需通过组件级扩展键显式声明。
+*/
+const glassTheme = lightTheme.new({
 	color: {
 		primary: "#3B82F6",
 		success: "#10B981",
 		warning: "#F59E0B",
 		danger: "#EF4444",
 		info: "#06B6D4",
-		disabled: "#E5E7EB",
-		default: "#F3F4F6"
-	},
-	bg: {
-		color: {
-			bottom: "rgba(255, 255, 255, 0.45)",
-			middle: "rgba(255, 255, 255, 0.55)",
-			top: "rgba(255, 255, 255, 0.6)",
-			hover: "rgba(255, 255, 255, 0.75)",
-			black: "#000000"
-		},
-		filter: {
-			blur: "blur(24px)",
-			saturate: "saturate(180%)"
-		}
-	},
-	border: {
-		color: "rgba(15, 23, 42, 0.14)",
-		mutedColor: "rgba(15, 23, 42, 0.08)",
-		width: 1,
-		style: "solid"
-	},
-	"text-color": {
-		title: "#1E293B",
-		main: "#334155",
-		placeholder: "#94A3B8",
-		second: "#64748B",
-		assist: "#CBD5E1",
-		disabled: "#94A3B8",
-		white: "#FFFFFF"
-	},
-	shadow: {
-		color: "#00000014",
-		x: 0,
-		y: 4,
-		blur: 24,
-		spread: 0,
-		emboss: "none"
-	}
-});
-const glassDarkTheme = glassLightTheme.new({
-	color: {
 		disabled: "#374151",
 		default: "#1E293B"
 	},
@@ -67,7 +30,9 @@ const glassDarkTheme = glassLightTheme.new({
 	},
 	border: {
 		color: "rgba(255, 255, 255, 0.18)",
-		mutedColor: "rgba(255, 255, 255, 0.1)"
+		mutedColor: "rgba(255, 255, 255, 0.1)",
+		width: 1,
+		style: "solid"
 	},
 	"text-color": {
 		title: "#F8FAFC",
@@ -87,9 +52,15 @@ const glassDarkTheme = glassLightTheme.new({
 		emboss: "none",
 		sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
 		lg: "0 8px 24px 0 rgba(0, 0, 0, 0.55), 0 2px 6px 0 rgba(0, 0, 0, 0.35)"
-	}
-});
+	},
+	kbd: {
+		"inset-shadow": "rgba(0, 0, 0, 0.5)",
+		"border-shadow": "rgba(255, 255, 255, 0.09)",
+		"drop-shadow": "rgba(0, 0, 0, 0.6)"
+	},
+	"batch-edit": { "form-header-bg": "rgba(15, 23, 42, 0.8)" }
+}, { series: "dark" });
 //#endregion
-export { glassDarkTheme, glassLightTheme };
+export { glassTheme };
 
 //# sourceMappingURL=glass.js.map