@veltra/styles 1.3.10 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/theme/component-css-vars.js +0 -1
- package/dist/theme/component-css-vars.js.map +1 -1
- package/dist/theme/ui-theme.d.ts +1 -1
- package/dist/theme/ui-theme.js +1 -13
- package/dist/theme/ui-theme.js.map +1 -1
- package/package.json +3 -3
- package/src/theme/__test__/ui-theme.test.ts +2 -7
- package/src/theme/component-css-vars.ts +0 -1
- package/src/theme/ui-theme.ts +2 -14
|
@@ -34,7 +34,6 @@ const componentCssVarsLight = {
|
|
|
34
34
|
"--u-nav-bg-image": "none",
|
|
35
35
|
"--u-nav-rail-width": "56px",
|
|
36
36
|
"--u-nav-rail-labeled-width": "72px",
|
|
37
|
-
"--u-collapse-title-color": T("text-color", "main"),
|
|
38
37
|
"--u-tag-small": "20px",
|
|
39
38
|
"--u-tag-default": "24px",
|
|
40
39
|
"--u-tag-large": "28px",
|
|
@@ -1 +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-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 '--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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"}
|
|
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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"}
|
package/dist/theme/ui-theme.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ declare class UITheme {
|
|
|
17
17
|
private renderBGColorAlpha;
|
|
18
18
|
/** 语义色 / 边框 / 阴影 / 文本色的 alpha token(替代 color-mix + transparent) */
|
|
19
19
|
private renderAlphaTokens;
|
|
20
|
-
/** 组件级两色混合 token(
|
|
20
|
+
/** 组件级两色混合 token(batch-edit / kbd) */
|
|
21
21
|
private renderComponentMixTokens;
|
|
22
22
|
private renderBGFilter;
|
|
23
23
|
/** 主题变量声明列表,均为 `--u-` 前缀的 CSS 自定义属性 */
|
package/dist/theme/ui-theme.js
CHANGED
|
@@ -114,35 +114,23 @@ var UITheme = class UITheme {
|
|
|
114
114
|
}
|
|
115
115
|
return lines.join(";");
|
|
116
116
|
}
|
|
117
|
-
/** 组件级两色混合 token(
|
|
117
|
+
/** 组件级两色混合 token(batch-edit / kbd) */
|
|
118
118
|
renderComponentMixTokens(theme) {
|
|
119
119
|
const hover = theme.bg.color.hover;
|
|
120
120
|
const top = theme.bg.color.top;
|
|
121
121
|
const black = theme.bg.color.black;
|
|
122
|
-
const primary = theme.color.primary;
|
|
123
122
|
const borderColor = theme.border.color;
|
|
124
123
|
const shadowColor = hexRgbOnly(theme.shadow.color);
|
|
125
124
|
if (![
|
|
126
125
|
hover,
|
|
127
126
|
top,
|
|
128
127
|
black,
|
|
129
|
-
primary,
|
|
130
128
|
borderColor
|
|
131
129
|
].every(isHexColor)) return "";
|
|
132
|
-
const itemBg = mixColor(hover, top, .28);
|
|
133
|
-
const itemHoverBg = mixColor(primary, itemBg, .96);
|
|
134
|
-
const itemActiveBg = mixColor(primary, itemBg, .95);
|
|
135
|
-
const headerActiveBg = mixColor(primary, itemBg, .92);
|
|
136
|
-
const contentBg = mixColor(itemActiveBg, top, .58);
|
|
137
130
|
const formHeaderBg = mixColor(top, hover, .04);
|
|
138
131
|
const kbdInset = mixColor(top, black, .25);
|
|
139
132
|
const kbdDropShadow = isHexColor(shadowColor) ? hexWithAlpha(shadowColor, 60) : "rgba(0, 0, 0, 0.6)";
|
|
140
133
|
return [
|
|
141
|
-
`--u-collapse-item-bg: ${itemBg}`,
|
|
142
|
-
`--u-collapse-item-hover-bg: ${itemHoverBg}`,
|
|
143
|
-
`--u-collapse-item-active-bg: ${itemActiveBg}`,
|
|
144
|
-
`--u-collapse-header-active-bg: ${headerActiveBg}`,
|
|
145
|
-
`--u-collapse-content-bg: ${contentBg}`,
|
|
146
134
|
`--u-batch-edit-form-header-bg: ${formHeaderBg}`,
|
|
147
135
|
`--u-kbd-inset-shadow: ${kbdInset}`,
|
|
148
136
|
`--u-kbd-border-shadow: ${hexWithAlpha(borderColor, 50)}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'\nimport { 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\nexport class UITheme {\n static themeID = 'ultra-ui-theme'\n\n private static adoptedSheet: CSSStyleSheet | null = null\n\n readonly theme: Theme\n\n private readonly reactiveEnabled: boolean\n\n constructor(theme: Theme, options?: { reactive?: boolean }) {\n this.reactiveEnabled = options?.reactive !== false\n this.theme = reactive(theme) as Theme\n if (this.reactiveEnabled) {\n watch(this.theme, () => this.render(), { deep: true })\n }\n }\n\n static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n if (typeof document === 'undefined') return\n const el = document.documentElement\n if (mode === 'auto') {\n delete el.dataset.theme\n } else {\n el.dataset.theme = mode\n }\n }\n\n private renderBase(\n theme: Record<string, unknown>,\n themeRules: string[] = [],\n parentKey = '--u'\n ): string[] {\n Object.keys(theme).forEach((key) => {\n const value = theme[key]\n const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n } else {\n if (value || value === 0) {\n const v = withUnit(value as number | string, 'px')\n if (v !== undefined) {\n themeRules.push(`${varKey}: ${v}`)\n }\n }\n }\n })\n\n return themeRules\n }\n\n private renderBorder(theme: Theme): string {\n const shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n (key) => key !== 'mutedColor'\n )\n const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n return [\n `--u-border: ${border}`,\n `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n ].join(';')\n }\n\n private renderTypeColor(theme: Theme): string {\n const { color } = theme\n\n const types = Object.keys(color)\n const rates = [1, 3, 5, 7, 9]\n\n return types\n .map((type) => {\n const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n return rates\n .map((rate) => {\n const light = `--u-color-${type}-light-${rate}: ${mixColor(\n colorValue,\n '#fff',\n rate / 10\n )}`\n const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n colorValue,\n '#000',\n rate / 10\n )}`\n return `${light};${dark}`\n })\n .join(';')\n })\n .join(';')\n }\n\n private renderShadow(_theme: Theme): string {\n const shadow = ['x', 'y', 'blur', 'spread', 'color']\n .map((k) => `var(--u-shadow-${k})`)\n .join(' ')\n\n return `--u-shadow: ${shadow}`\n }\n\n private renderBGColorAlpha(theme: Theme): string {\n const { color } = theme.bg\n const alphas = [70]\n const lines: string[] = []\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(collapse / batch-edit / kbd) */\n private renderComponentMixTokens(theme: Theme): string {\n const hover = theme.bg.color.hover as `#${string}`\n const top = theme.bg.color.top as `#${string}`\n const black = theme.bg.color.black as `#${string}`\n const primary = theme.color.primary as `#${string}`\n const borderColor = theme.border.color as `#${string}`\n const shadowColor = hexRgbOnly(theme.shadow.color)\n\n // 依赖色含非 hex 值(如 glass 主题的 rgba())时整体跳过,避免生成 NaN 声明;\n // 组件侧 var() fallback 会接管,行为等同于此前的无效声明\n if (![hover, top, black, primary, borderColor].every(isHexColor)) return ''\n\n const itemBg = mixColor(hover, top, 0.28)\n const itemHoverBg = mixColor(primary, itemBg as `#${string}`, 0.96)\n const itemActiveBg = mixColor(primary, itemBg as `#${string}`, 0.95)\n const headerActiveBg = mixColor(primary, itemBg as `#${string}`, 0.92)\n const contentBg = mixColor(itemActiveBg as `#${string}`, top, 0.58)\n\n const formHeaderBg = mixColor(top, hover, 0.04)\n\n const kbdInset = mixColor(top, black, 0.25)\n const kbdDropShadow = isHexColor(shadowColor)\n ? hexWithAlpha(shadowColor, 60)\n : 'rgba(0, 0, 0, 0.6)'\n\n const lines = [\n `--u-collapse-item-bg: ${itemBg}`,\n `--u-collapse-item-hover-bg: ${itemHoverBg}`,\n `--u-collapse-item-active-bg: ${itemActiveBg}`,\n `--u-collapse-header-active-bg: ${headerActiveBg}`,\n `--u-collapse-content-bg: ${contentBg}`,\n `--u-batch-edit-form-header-bg: ${formHeaderBg}`,\n `--u-kbd-inset-shadow: ${kbdInset}`,\n `--u-kbd-border-shadow: ${hexWithAlpha(borderColor, 50)}`,\n `--u-kbd-drop-shadow: ${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 private static removeExistingStyleTag(doc: Document): void {\n const el = doc.getElementById(UITheme.themeID)\n if (el?.parentNode) {\n el.parentNode.removeChild(el)\n }\n }\n\n private static applyGlobalCSS(css: string): void {\n const doc = typeof document !== 'undefined' ? document : undefined\n if (!doc) return\n\n const canAdopt =\n typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n if (canAdopt) {\n UITheme.removeExistingStyleTag(doc)\n if (!UITheme.adoptedSheet) {\n UITheme.adoptedSheet = new CSSStyleSheet()\n doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n }\n UITheme.adoptedSheet.replaceSync(css)\n } else {\n if (UITheme.adoptedSheet) {\n UITheme.adoptedSheet = null\n }\n let style = doc.getElementById(UITheme.themeID)\n if (!style) {\n style = doc.createElement('style')\n style.id = UITheme.themeID\n doc.head.appendChild(style)\n }\n style.textContent = css\n }\n }\n\n /** 内置 light/dark:支持 data-theme 与 prefers-color-scheme */\n static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n const lightDecls = [\n ...light.themeToDeclarationList(toRaw(light.theme)),\n ...componentCssVarsLightDecls\n ]\n const darkDecls = [\n ...dark.themeToDeclarationList(toRaw(dark.theme)),\n ...componentCssVarsDarkDecls\n ]\n const lightBlock = UITheme.declarationBlock(lightDecls)\n const darkBlock = UITheme.declarationBlock(darkDecls)\n\n const css = [\n `html { ${lightBlock} }`,\n `@media (prefers-color-scheme: dark) {`,\n ` html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n `}`,\n `html[data-theme=\"light\"] { ${lightBlock} }`,\n `html[data-theme=\"dark\"] { ${darkBlock} }`\n ].join('\\n')\n\n UITheme.applyGlobalCSS(css)\n }\n\n render(): void {\n const isDark =\n typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'\n const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]\n const block = UITheme.declarationBlock(decls)\n const css = `html { ${block} }`\n UITheme.applyGlobalCSS(css)\n }\n\n new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n function delEmpty(obj: Record<string, unknown>) {\n Object.keys(obj).forEach((key) => {\n const value = obj[key]\n if (isObj(value)) {\n return delEmpty(value as Record<string, unknown>)\n }\n if (!value && value !== 0) {\n delete obj[key]\n }\n })\n }\n\n delEmpty(customTheme as Record<string, unknown>)\n\n const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n\n function deepMerge(target: any, source: any) {\n if (typeof source !== 'object' || source === null) return\n Object.keys(source).forEach((key) => {\n const sourceVal = source[key]\n if (typeof sourceVal === 'object' && sourceVal !== null && !Array.isArray(sourceVal)) {\n if (typeof target[key] !== 'object' || target[key] === null) {\n target[key] = {}\n }\n deepMerge(target[key], sourceVal)\n } else {\n target[key] = sourceVal\n }\n })\n }\n\n deepMerge(base, customTheme)\n return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'\nimport { 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\nexport class UITheme {\n static themeID = 'ultra-ui-theme'\n\n private static adoptedSheet: CSSStyleSheet | null = null\n\n readonly theme: Theme\n\n private readonly reactiveEnabled: boolean\n\n constructor(theme: Theme, options?: { reactive?: boolean }) {\n this.reactiveEnabled = options?.reactive !== false\n this.theme = reactive(theme) as Theme\n if (this.reactiveEnabled) {\n watch(this.theme, () => this.render(), { deep: true })\n }\n }\n\n static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n if (typeof document === 'undefined') return\n const el = document.documentElement\n if (mode === 'auto') {\n delete el.dataset.theme\n } else {\n el.dataset.theme = mode\n }\n }\n\n private renderBase(\n theme: Record<string, unknown>,\n themeRules: string[] = [],\n parentKey = '--u'\n ): string[] {\n Object.keys(theme).forEach((key) => {\n const value = theme[key]\n const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n } else {\n if (value || value === 0) {\n const v = withUnit(value as number | string, 'px')\n if (v !== undefined) {\n themeRules.push(`${varKey}: ${v}`)\n }\n }\n }\n })\n\n return themeRules\n }\n\n private renderBorder(theme: Theme): string {\n const shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n (key) => key !== 'mutedColor'\n )\n const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n return [\n `--u-border: ${border}`,\n `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n ].join(';')\n }\n\n private renderTypeColor(theme: Theme): string {\n const { color } = theme\n\n const types = Object.keys(color)\n const rates = [1, 3, 5, 7, 9]\n\n return types\n .map((type) => {\n const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n return rates\n .map((rate) => {\n const light = `--u-color-${type}-light-${rate}: ${mixColor(\n colorValue,\n '#fff',\n rate / 10\n )}`\n const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n colorValue,\n '#000',\n rate / 10\n )}`\n return `${light};${dark}`\n })\n .join(';')\n })\n .join(';')\n }\n\n private renderShadow(_theme: Theme): string {\n const shadow = ['x', 'y', 'blur', 'spread', 'color']\n .map((k) => `var(--u-shadow-${k})`)\n .join(' ')\n\n return `--u-shadow: ${shadow}`\n }\n\n private renderBGColorAlpha(theme: Theme): string {\n const { color } = theme.bg\n const alphas = [70]\n const lines: string[] = []\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 private static removeExistingStyleTag(doc: Document): void {\n const el = doc.getElementById(UITheme.themeID)\n if (el?.parentNode) {\n el.parentNode.removeChild(el)\n }\n }\n\n private static applyGlobalCSS(css: string): void {\n const doc = typeof document !== 'undefined' ? document : undefined\n if (!doc) return\n\n const canAdopt =\n typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n if (canAdopt) {\n UITheme.removeExistingStyleTag(doc)\n if (!UITheme.adoptedSheet) {\n UITheme.adoptedSheet = new CSSStyleSheet()\n doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n }\n UITheme.adoptedSheet.replaceSync(css)\n } else {\n if (UITheme.adoptedSheet) {\n UITheme.adoptedSheet = null\n }\n let style = doc.getElementById(UITheme.themeID)\n if (!style) {\n style = doc.createElement('style')\n style.id = UITheme.themeID\n doc.head.appendChild(style)\n }\n style.textContent = css\n }\n }\n\n /** 内置 light/dark:支持 data-theme 与 prefers-color-scheme */\n static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n const lightDecls = [\n ...light.themeToDeclarationList(toRaw(light.theme)),\n ...componentCssVarsLightDecls\n ]\n const darkDecls = [\n ...dark.themeToDeclarationList(toRaw(dark.theme)),\n ...componentCssVarsDarkDecls\n ]\n const lightBlock = UITheme.declarationBlock(lightDecls)\n const darkBlock = UITheme.declarationBlock(darkDecls)\n\n const css = [\n `html { ${lightBlock} }`,\n `@media (prefers-color-scheme: dark) {`,\n ` html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n `}`,\n `html[data-theme=\"light\"] { ${lightBlock} }`,\n `html[data-theme=\"dark\"] { ${darkBlock} }`\n ].join('\\n')\n\n UITheme.applyGlobalCSS(css)\n }\n\n render(): void {\n const isDark =\n typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'\n const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]\n const block = UITheme.declarationBlock(decls)\n const css = `html { ${block} }`\n UITheme.applyGlobalCSS(css)\n }\n\n new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n function delEmpty(obj: Record<string, unknown>) {\n Object.keys(obj).forEach((key) => {\n const value = obj[key]\n if (isObj(value)) {\n return delEmpty(value as Record<string, unknown>)\n }\n if (!value && value !== 0) {\n delete obj[key]\n }\n })\n }\n\n delEmpty(customTheme as Record<string, unknown>)\n\n const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n\n function deepMerge(target: any, source: any) {\n if (typeof source !== 'object' || source === null) return\n Object.keys(source).forEach((key) => {\n const sourceVal = source[key]\n if (typeof sourceVal === 'object' && sourceVal !== null && !Array.isArray(sourceVal)) {\n if (typeof target[key] !== 'object' || target[key] === null) {\n target[key] = {}\n }\n deepMerge(target[key], sourceVal)\n } else {\n target[key] = sourceVal\n }\n })\n }\n\n deepMerge(base, customTheme)\n return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n }\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/styles",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@cat-kit/core": ">=1.1.8",
|
|
39
|
-
"@veltra/compositions": "1.
|
|
40
|
-
"@veltra/utils": "1.
|
|
39
|
+
"@veltra/compositions": "1.4.0",
|
|
40
|
+
"@veltra/utils": "1.4.0",
|
|
41
41
|
"vue": ">=3.5.40"
|
|
42
42
|
}
|
|
43
43
|
}
|
|
@@ -32,11 +32,6 @@ describe('UITheme', () => {
|
|
|
32
32
|
expect(el.dataset.theme).toBeUndefined()
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
it('includes collapse component title color token in built-in component vars', () => {
|
|
36
|
-
expect(componentCssVarsLight['--u-collapse-title-color']).toBe('var(--u-text-color-main)')
|
|
37
|
-
expect(componentCssVarsDark['--u-collapse-title-color']).toBe('var(--u-text-color-main)')
|
|
38
|
-
})
|
|
39
|
-
|
|
40
35
|
it('renderAlphaTokens emits semantic color alpha vars', () => {
|
|
41
36
|
const decls = lightTheme.themeToDeclarationList(lightTheme.theme)
|
|
42
37
|
expect(decls.some((d) => d.startsWith('--u-color-primary-a-8:'))).toBe(true)
|
|
@@ -44,11 +39,11 @@ describe('UITheme', () => {
|
|
|
44
39
|
expect(decls.some((d) => d.startsWith('--u-text-color-second-a-28:'))).toBe(true)
|
|
45
40
|
})
|
|
46
41
|
|
|
47
|
-
it('renderComponentMixTokens emits
|
|
42
|
+
it('renderComponentMixTokens emits batch-edit and kbd vars', () => {
|
|
48
43
|
const decls = lightTheme.themeToDeclarationList(lightTheme.theme)
|
|
49
|
-
expect(decls.some((d) => d.startsWith('--u-collapse-item-bg:'))).toBe(true)
|
|
50
44
|
expect(decls.some((d) => d.startsWith('--u-kbd-inset-shadow:'))).toBe(true)
|
|
51
45
|
expect(decls.some((d) => d.startsWith('--u-batch-edit-form-header-bg:'))).toBe(true)
|
|
46
|
+
expect(decls.some((d) => d.startsWith('--u-collapse-item-bg:'))).toBe(false)
|
|
52
47
|
})
|
|
53
48
|
|
|
54
49
|
it('emits elevation and motion tokens', () => {
|
|
@@ -37,7 +37,6 @@ export const componentCssVarsLight: Record<string, string> = {
|
|
|
37
37
|
'--u-nav-bg-image': 'none',
|
|
38
38
|
'--u-nav-rail-width': '56px',
|
|
39
39
|
'--u-nav-rail-labeled-width': '72px',
|
|
40
|
-
'--u-collapse-title-color': T('text-color', 'main'),
|
|
41
40
|
'--u-tag-small': '20px',
|
|
42
41
|
'--u-tag-default': '24px',
|
|
43
42
|
'--u-tag-large': '28px',
|
package/src/theme/ui-theme.ts
CHANGED
|
@@ -169,24 +169,17 @@ export class UITheme {
|
|
|
169
169
|
return lines.join(';')
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
/** 组件级两色混合 token(
|
|
172
|
+
/** 组件级两色混合 token(batch-edit / kbd) */
|
|
173
173
|
private renderComponentMixTokens(theme: Theme): string {
|
|
174
174
|
const hover = theme.bg.color.hover as `#${string}`
|
|
175
175
|
const top = theme.bg.color.top as `#${string}`
|
|
176
176
|
const black = theme.bg.color.black as `#${string}`
|
|
177
|
-
const primary = theme.color.primary as `#${string}`
|
|
178
177
|
const borderColor = theme.border.color as `#${string}`
|
|
179
178
|
const shadowColor = hexRgbOnly(theme.shadow.color)
|
|
180
179
|
|
|
181
180
|
// 依赖色含非 hex 值(如 glass 主题的 rgba())时整体跳过,避免生成 NaN 声明;
|
|
182
181
|
// 组件侧 var() fallback 会接管,行为等同于此前的无效声明
|
|
183
|
-
if (![hover, top, black,
|
|
184
|
-
|
|
185
|
-
const itemBg = mixColor(hover, top, 0.28)
|
|
186
|
-
const itemHoverBg = mixColor(primary, itemBg as `#${string}`, 0.96)
|
|
187
|
-
const itemActiveBg = mixColor(primary, itemBg as `#${string}`, 0.95)
|
|
188
|
-
const headerActiveBg = mixColor(primary, itemBg as `#${string}`, 0.92)
|
|
189
|
-
const contentBg = mixColor(itemActiveBg as `#${string}`, top, 0.58)
|
|
182
|
+
if (![hover, top, black, borderColor].every(isHexColor)) return ''
|
|
190
183
|
|
|
191
184
|
const formHeaderBg = mixColor(top, hover, 0.04)
|
|
192
185
|
|
|
@@ -196,11 +189,6 @@ export class UITheme {
|
|
|
196
189
|
: 'rgba(0, 0, 0, 0.6)'
|
|
197
190
|
|
|
198
191
|
const lines = [
|
|
199
|
-
`--u-collapse-item-bg: ${itemBg}`,
|
|
200
|
-
`--u-collapse-item-hover-bg: ${itemHoverBg}`,
|
|
201
|
-
`--u-collapse-item-active-bg: ${itemActiveBg}`,
|
|
202
|
-
`--u-collapse-header-active-bg: ${headerActiveBg}`,
|
|
203
|
-
`--u-collapse-content-bg: ${contentBg}`,
|
|
204
192
|
`--u-batch-edit-form-header-bg: ${formHeaderBg}`,
|
|
205
193
|
`--u-kbd-inset-shadow: ${kbdInset}`,
|
|
206
194
|
`--u-kbd-border-shadow: ${hexWithAlpha(borderColor, 50)}`,
|