@veltra/styles 1.2.31 → 1.2.33

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

@@ -32,6 +32,7 @@ const componentCssVarsLight = {
 	"--u-nav-bg-color": T("bg-color", "top"),
 	"--u-nav-bg-image": "none",
 	"--u-nav-rail-width": "56px",
+	"--u-nav-rail-labeled-width": "72px",
 	"--u-collapse-title-color": T("text-color", "main"),
 	"--u-tag-small": "20px",
 	"--u-tag-default": "24px",

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-table-border-color': '#e9e9e9',\n  '--u-table-header-bg': '#f4f5f7',\n  '--u-table-header-color': T('text-color', 'title'),\n  '--u-table-stripe-bg': '#f8fafc',\n  '--u-table-stripe-color': 'inherit',\n  '--u-table-hover-bg': T('bg-color', 'hover'),\n  '--u-table-hover-color': 'inherit',\n  '--u-table-current-bg': T('bg-color', 'hover'),\n  '--u-table-current-color': 'inherit',\n  '--u-table-checked-bg': T('color', 'primary', 'light-9'),\n  '--u-table-checked-color': 'inherit',\n  '--u-nav-color': '#0f172a',\n  '--u-nav-hover-bg': 'rgba(148, 163, 184, 0.12)',\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': 'rgba(59, 130, 246, 0.12)',\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-collapse-title-color': T('text-color', 'main'),\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}\n\n/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */\nexport const componentCssVarsDark: Record<string, string> = {\n  ...componentCssVarsLight,\n  '--u-table-border-color': '#404040',\n  '--u-table-header-bg': '#2a2a2a',\n  '--u-table-header-color': T('text-color', 'main'),\n  '--u-table-stripe-bg': '#2a2a2a',\n  '--u-table-stripe-color': T('text-color', 'main'),\n  '--u-table-hover-bg': '#333333',\n  '--u-table-hover-color': T('text-color', 'title'),\n  '--u-table-current-bg': T('bg-color', 'hover'),\n  '--u-table-current-color': 'inherit',\n  '--u-table-checked-bg': T('color', 'primary', 'dark', '1'),\n  '--u-table-checked-color': 'inherit',\n  '--u-nav-color': T('text-color', 'main'),\n  '--u-nav-hover-bg': 'rgba(148, 163, 184, 0.14)',\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': 'rgba(96, 165, 250, 0.2)',\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.injectBuiltInThemes` 中注入 `html`。\n * 修改此处即可在 TS 侧统一调整组件外观，无需在各组件 `style.scss` 重复声明。\n */\n\n/** 与 SCSS `fn.use-var($basename, $nodes...)` 输出一致 */\nexport function themeTokenVar(basename: string, ...nodes: Array<string | number>): string {\n  const suffix = nodes.length ? `-${nodes.map(String).join('-')}` : ''\n  return `var(--u-${basename}${suffix})`\n}\n\nconst T = themeTokenVar\n\n/** 亮色（及与暗色相同的尺寸类）下组件 token */\nexport const componentCssVarsLight: Record<string, string> = {\n  '--u-table-border-color': '#e9e9e9',\n  '--u-table-header-bg': '#f4f5f7',\n  '--u-table-header-color': T('text-color', 'title'),\n  '--u-table-stripe-bg': '#f8fafc',\n  '--u-table-stripe-color': 'inherit',\n  '--u-table-hover-bg': T('bg-color', 'hover'),\n  '--u-table-hover-color': 'inherit',\n  '--u-table-current-bg': T('bg-color', 'hover'),\n  '--u-table-current-color': 'inherit',\n  '--u-table-checked-bg': T('color', 'primary', 'light-9'),\n  '--u-table-checked-color': 'inherit',\n  '--u-nav-color': '#0f172a',\n  '--u-nav-hover-bg': 'rgba(148, 163, 184, 0.12)',\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': 'rgba(59, 130, 246, 0.12)',\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-collapse-title-color': T('text-color', 'main'),\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}\n\n/** 暗色下组件 token（含与亮色相同的尺寸项，保证暗色 html 块自洽） */\nexport const componentCssVarsDark: Record<string, string> = {\n  ...componentCssVarsLight,\n  '--u-table-border-color': '#404040',\n  '--u-table-header-bg': '#2a2a2a',\n  '--u-table-header-color': T('text-color', 'main'),\n  '--u-table-stripe-bg': '#2a2a2a',\n  '--u-table-stripe-color': T('text-color', 'main'),\n  '--u-table-hover-bg': '#333333',\n  '--u-table-hover-color': T('text-color', 'title'),\n  '--u-table-current-bg': T('bg-color', 'hover'),\n  '--u-table-current-color': 'inherit',\n  '--u-table-checked-bg': T('color', 'primary', 'dark', '1'),\n  '--u-table-checked-color': 'inherit',\n  '--u-nav-color': T('text-color', 'main'),\n  '--u-nav-hover-bg': 'rgba(148, 163, 184, 0.14)',\n  '--u-nav-hover-color': T('text-color', 'title'),\n  '--u-nav-active-bg': 'rgba(96, 165, 250, 0.2)',\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.2.31",
+  "version": "1.2.33",
   "files": [
     "dist",
     "src"
@@ -36,8 +36,8 @@
   },
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
-    "@veltra/compositions": "1.2.31",
-    "@veltra/utils": "1.2.31",
+    "@veltra/compositions": "1.2.33",
+    "@veltra/utils": "1.2.33",
     "vue": ">=3.5.39"
   }
 }

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

@@ -35,6 +35,7 @@ export const componentCssVarsLight: Record<string, string> = {
   '--u-nav-bg-color': T('bg-color', 'top'),
   '--u-nav-bg-image': 'none',
   '--u-nav-rail-width': '56px',
+  '--u-nav-rail-labeled-width': '72px',
   '--u-collapse-title-color': T('text-color', 'main'),
   '--u-tag-small': '20px',
   '--u-tag-default': '24px',