@veltra/styles 1.1.28 → 1.1.30
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.map +1 -1
- package/dist/theme/helper.js.map +1 -1
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/load-theme.js.map +1 -1
- package/dist/theme/presets/dark.js.map +1 -1
- package/dist/theme/presets/glass.js.map +1 -1
- package/dist/theme/presets/hero.js.map +1 -1
- package/dist/theme/presets/light.js.map +1 -1
- package/dist/theme/presets/shadcn.js.map +1 -1
- package/dist/theme/ui-theme.js.map +1 -1
- package/package.json +4 -4
|
@@ -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-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-menu-color': '#0f172a',\n '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.12)',\n '--u-menu-hover-color': T('text-color', 'title'),\n '--u-menu-active-bg': 'rgba(59, 130, 246, 0.12)',\n '--u-menu-active-color': T('color', 'primary', 'dark', '1'),\n '--u-menu-height-small': '32px',\n '--u-menu-height-default': '36px',\n '--u-menu-height-large': '40px',\n '--u-menu-bg-color': T('bg-color', 'top'),\n '--u-menu-bg-blur': 'none',\n '--u-menu-bg-saturate': 'none',\n '--u-menu-bg-image': 'none',\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-menu-color': T('text-color', 'main'),\n '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.14)',\n '--u-menu-hover-color': T('text-color', 'title'),\n '--u-menu-active-bg': 'rgba(96, 165, 250, 0.2)',\n '--u-menu-active-color': T('text-color', 'white'),\n '--u-menu-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-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-menu-color': '#0f172a',\n '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.12)',\n '--u-menu-hover-color': T('text-color', 'title'),\n '--u-menu-active-bg': 'rgba(59, 130, 246, 0.12)',\n '--u-menu-active-color': T('color', 'primary', 'dark', '1'),\n '--u-menu-height-small': '32px',\n '--u-menu-height-default': '36px',\n '--u-menu-height-large': '40px',\n '--u-menu-bg-color': T('bg-color', 'top'),\n '--u-menu-bg-blur': 'none',\n '--u-menu-bg-saturate': 'none',\n '--u-menu-bg-image': 'none',\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-menu-color': T('text-color', 'main'),\n '--u-menu-hover-bg': 'rgba(148, 163, 184, 0.14)',\n '--u-menu-hover-color': T('text-color', 'title'),\n '--u-menu-active-bg': 'rgba(96, 165, 250, 0.2)',\n '--u-menu-active-color': T('text-color', 'white'),\n '--u-menu-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/helper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helper.js","names":[],"sources":["../../src/theme/helper.ts"],"sourcesContent":["import type { RGBColor } from './type'\n\n/** 实现十六进制颜色转RGB颜色，包括透明度 */\nexport function HEXToRGB(color: string): RGBColor {\n // 移除可能存在的 '#' 前缀\n let hex = color.replace(/^#/, '')\n let [r, g, b] = [0, 0, 0]\n\n if (hex.length === 3) {\n const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]\n hex = `${r10}${r10}${g10}${g10}${b10}${b10}`\n }\n\n r = parseInt(hex.slice(0, 2), 16)\n g = parseInt(hex.slice(2, 4), 16)\n b = parseInt(hex.slice(4, 6), 16)\n\n return [r, g, b]\n}\n\n/**\n * 混合两个颜色，并返回混合结果的十六进制表示。\n * @param color1 - 第一个颜色，格式为`#RRGGBB`。\n * @param color2 - 第二个颜色，格式为`#RRGGBB`。\n * @param ratio - 颜色混合的比例，取值范围为0到1。\n * @returns 混合结果的十六进制表示。\n */\nexport function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {\n if (ratio > 1) throw new Error('ratio的值在0-1之间')\n const color1RGB = HEXToRGB(color1)\n const color2RGB = HEXToRGB(color2)\n\n const color1Ratio = 1 - ratio\n\n return (\n '#' +\n color1RGB\n .map((n, i) => {\n const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)\n return hex.length === 1 ? '0' + hex : hex\n })\n .join('')\n )\n}\n\nexport function defineBySize(\n variable: Record<'small' | 'default' | 'large', number>\n): Record<'small' | 'default' | 'large', number> {\n return variable\n}\n\n/**\n * 引用全局主题 CSS 变量（`--u-*` 命名空间）\n * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`\n */\nexport function cssVar(prop: string): string {\n return `var(--u-${prop})`\n}\n"],"mappings":";;AAGA,SAAgB,SAAS,OAAyB;CAEhD,IAAI,MAAM,MAAM,QAAQ,MAAM,
|
|
1
|
+
{"version":3,"file":"helper.js","names":[],"sources":["../../src/theme/helper.ts"],"sourcesContent":["import type { RGBColor } from './type'\n\n/** 实现十六进制颜色转RGB颜色，包括透明度 */\nexport function HEXToRGB(color: string): RGBColor {\n // 移除可能存在的 '#' 前缀\n let hex = color.replace(/^#/, '')\n let [r, g, b] = [0, 0, 0]\n\n if (hex.length === 3) {\n const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]\n hex = `${r10}${r10}${g10}${g10}${b10}${b10}`\n }\n\n r = parseInt(hex.slice(0, 2), 16)\n g = parseInt(hex.slice(2, 4), 16)\n b = parseInt(hex.slice(4, 6), 16)\n\n return [r, g, b]\n}\n\n/**\n * 混合两个颜色，并返回混合结果的十六进制表示。\n * @param color1 - 第一个颜色，格式为`#RRGGBB`。\n * @param color2 - 第二个颜色，格式为`#RRGGBB`。\n * @param ratio - 颜色混合的比例，取值范围为0到1。\n * @returns 混合结果的十六进制表示。\n */\nexport function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {\n if (ratio > 1) throw new Error('ratio的值在0-1之间')\n const color1RGB = HEXToRGB(color1)\n const color2RGB = HEXToRGB(color2)\n\n const color1Ratio = 1 - ratio\n\n return (\n '#' +\n color1RGB\n .map((n, i) => {\n const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)\n return hex.length === 1 ? '0' + hex : hex\n })\n .join('')\n )\n}\n\nexport function defineBySize(\n variable: Record<'small' | 'default' | 'large', number>\n): Record<'small' | 'default' | 'large', number> {\n return variable\n}\n\n/**\n * 引用全局主题 CSS 变量（`--u-*` 命名空间）\n * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`\n */\nexport function cssVar(prop: string): string {\n return `var(--u-${prop})`\n}\n"],"mappings":";;AAGA,SAAgB,SAAS,OAAyB;CAEhD,IAAI,MAAM,MAAM,QAAQ,MAAM,EAAE;CAChC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;CAAC;CAExB,IAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;EAAG;EAClD,MAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;CACzC;CAEA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAEhC,OAAO;EAAC;EAAG;EAAG;CAAC;AACjB;;;;;;;;AASA,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;CAC1F,IAAI,QAAQ,GAAG,MAAM,IAAI,MAAM,eAAe;CAC9C,MAAM,YAAY,SAAS,MAAM;CACjC,MAAM,YAAY,SAAS,MAAM;CAEjC,MAAM,cAAc,IAAI;CAExB,OACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,KAAK,EAAE,SAAS,EAAE;EAC3E,OAAO,IAAI,WAAW,IAAI,MAAM,MAAM;CACxC,CAAC,EACA,KAAK,EAAE;AAEd;AAEA,SAAgB,aACd,UAC+C;CAC/C,OAAO;AACT"}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
|
|
|
6
6
|
import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
|
|
7
7
|
import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
|
|
8
8
|
import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
|
|
9
|
-
export { RGBColor, Theme, UITheme, currentTheme, darkTheme, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, setTheme, shadcnDarkTheme, shadcnLightTheme };
|
|
9
|
+
export { type RGBColor, type Theme, UITheme, currentTheme, darkTheme, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, setTheme, shadcnDarkTheme, shadcnLightTheme };
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1 +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: '#4f8ff7',\n success: '#52c41a',\n warning: '#faad14',\n danger: '#ff4d4f',\n info: '#13c2c2',\n disabled: '#212020',\n default: '#595959'\n },\n\n bg: {\n color: {\n bottom: '#0f0f0f',\n middle: '#1a1a1a',\n top: '#262626',\n hover: '#303030',\n black: '#000000'\n },\n filter: { blur: 'none', saturate: 'none' }\n },\n\n 'text-color': {\n title: '#f0f0f0',\n main: '#d9d9d9',\n second: '#a6a6a6',\n placeholder: '#737373',\n assist: '#595959',\n disabled: '#434343',\n white: '#ffffff'\n },\n\n border: { color: '#404040', mutedColor: '#404040' },\n\n shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0, emboss: 'none' }\n})\n"],"mappings":";;AAEA,MAAa,YAAY,WAAW,IAAI;CACtC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;
|
|
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: '#4f8ff7',\n success: '#52c41a',\n warning: '#faad14',\n danger: '#ff4d4f',\n info: '#13c2c2',\n disabled: '#212020',\n default: '#595959'\n },\n\n bg: {\n color: {\n bottom: '#0f0f0f',\n middle: '#1a1a1a',\n top: '#262626',\n hover: '#303030',\n black: '#000000'\n },\n filter: { blur: 'none', saturate: 'none' }\n },\n\n 'text-color': {\n title: '#f0f0f0',\n main: '#d9d9d9',\n second: '#a6a6a6',\n placeholder: '#737373',\n assist: '#595959',\n disabled: '#434343',\n white: '#ffffff'\n },\n\n border: { color: '#404040', mutedColor: '#404040' },\n\n shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0, emboss: 'none' }\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;EAAE,OAAO;EAA4B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;CAAO;AAC9F,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glass.js","names":[],"sources":["../../../src/theme/presets/glass.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const glassLightTheme = lightTheme.new({\n color: {\n primary: '#3B82F6',\n success: '#10B981',\n warning: '#F59E0B',\n danger: '#EF4444',\n info: '#06B6D4',\n disabled: '#E5E7EB',\n default: '#F3F4F6'\n },\n bg: {\n color: {\n bottom: 'rgba(255, 255, 255, 0.45)',\n middle: 'rgba(255, 255, 255, 0.55)',\n top: 'rgba(255, 255, 255, 0.6)',\n hover: 'rgba(255, 255, 255, 0.75)',\n black: '#000000'\n },\n filter: { blur: 'blur(24px)', saturate: 'saturate(180%)' }\n },\n border: {\n color: 'rgba(255, 255, 255, 0.5)',\n mutedColor: 'rgba(255, 255, 255, 0.5)',\n width: 1,\n style: 'solid'\n },\n 'text-color': {\n title: '#1E293B',\n main: '#334155',\n placeholder: '#94A3B8',\n second: '#64748B',\n assist: '#CBD5E1',\n disabled: '#94A3B8',\n white: '#FFFFFF'\n },\n shadow: { color: 'rgba(0, 0, 0, 0.08)', x: 0, y: 4, blur: 24, spread: 0, emboss: 'none' }\n})\n\nexport const glassDarkTheme = glassLightTheme.new({\n color: { disabled: '#374151', default: '#1E293B' },\n bg: {\n color: {\n bottom: 'rgba(15, 23, 42, 0.6)',\n middle: 'rgba(15, 23, 42, 0.7)',\n top: 'rgba(15, 23, 42, 0.75)',\n hover: 'rgba(30, 41, 59, 0.85)',\n black: '#000000'\n },\n filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }\n },\n border: { color: 'rgba(255, 255, 255, 0.12)', mutedColor: 'rgba(255, 255, 255, 0.12)' },\n 'text-color': {\n title: '#F8FAFC',\n main: '#F1F5F9',\n second: '#94A3B8',\n placeholder: '#64748B',\n assist: '#64748B',\n disabled: '#475569',\n white: '#ffffff'\n },\n shadow: { color: 'rgba(0, 0, 0, 0.35)', x: 0, y: 4, blur: 32, spread: 0, emboss: 'none' }\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,WAAW,IAAI;CAC5C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;
|
|
1
|
+
{"version":3,"file":"glass.js","names":[],"sources":["../../../src/theme/presets/glass.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const glassLightTheme = lightTheme.new({\n color: {\n primary: '#3B82F6',\n success: '#10B981',\n warning: '#F59E0B',\n danger: '#EF4444',\n info: '#06B6D4',\n disabled: '#E5E7EB',\n default: '#F3F4F6'\n },\n bg: {\n color: {\n bottom: 'rgba(255, 255, 255, 0.45)',\n middle: 'rgba(255, 255, 255, 0.55)',\n top: 'rgba(255, 255, 255, 0.6)',\n hover: 'rgba(255, 255, 255, 0.75)',\n black: '#000000'\n },\n filter: { blur: 'blur(24px)', saturate: 'saturate(180%)' }\n },\n border: {\n color: 'rgba(255, 255, 255, 0.5)',\n mutedColor: 'rgba(255, 255, 255, 0.5)',\n width: 1,\n style: 'solid'\n },\n 'text-color': {\n title: '#1E293B',\n main: '#334155',\n placeholder: '#94A3B8',\n second: '#64748B',\n assist: '#CBD5E1',\n disabled: '#94A3B8',\n white: '#FFFFFF'\n },\n shadow: { color: 'rgba(0, 0, 0, 0.08)', x: 0, y: 4, blur: 24, spread: 0, emboss: 'none' }\n})\n\nexport const glassDarkTheme = glassLightTheme.new({\n color: { disabled: '#374151', default: '#1E293B' },\n bg: {\n color: {\n bottom: 'rgba(15, 23, 42, 0.6)',\n middle: 'rgba(15, 23, 42, 0.7)',\n top: 'rgba(15, 23, 42, 0.75)',\n hover: 'rgba(30, 41, 59, 0.85)',\n black: '#000000'\n },\n filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }\n },\n border: { color: 'rgba(255, 255, 255, 0.12)', mutedColor: 'rgba(255, 255, 255, 0.12)' },\n 'text-color': {\n title: '#F8FAFC',\n main: '#F1F5F9',\n second: '#94A3B8',\n placeholder: '#64748B',\n assist: '#64748B',\n disabled: '#475569',\n white: '#ffffff'\n },\n shadow: { color: 'rgba(0, 0, 0, 0.35)', x: 0, y: 4, blur: 32, spread: 0, emboss: 'none' }\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,WAAW,IAAI;CAC5C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAc,UAAU;EAAiB;CAC3D;CACA,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,OAAO;EACP,OAAO;CACT;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;CAAO;AAC1F,CAAC;AAED,MAAa,iBAAiB,gBAAgB,IAAI;CAChD,OAAO;EAAE,UAAU;EAAW,SAAS;CAAU;CACjD,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAc,UAAU;EAAiB;CAC3D;CACA,QAAQ;EAAE,OAAO;EAA6B,YAAY;CAA4B;CACtF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;CAAO;AAC1F,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.js","names":[],"sources":["../../../src/theme/presets/hero.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const heroLightTheme = lightTheme.new({\n color: {\n primary: '#7828c8', // purple\n success: '#17c964',\n warning: '#f5a524',\n danger: '#f31260',\n info: '#006fee',\n disabled: '#f4f4f5',\n default: '#f4f4f5'\n },\n border: { width: 2, color: '#dcdfe6', mutedColor: 'transparent' },\n 'text-color': {\n title: '#11181C',\n main: '#11181C',\n second: '#71717A',\n placeholder: '#A1A1AA',\n assist: '#A1A1AA',\n disabled: '#A1A1AA',\n white: '#FFFFFF'\n },\n radius: { small: 8, default: 12, large: 14 },\n shadow: {\n color: 'rgba(0, 0, 0, 0.08)',\n x: 0,\n y: 4,\n blur: 14,\n spread: 0,\n emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f'\n },\n button: { 'default-bg': '#ebebec' }\n})\n\nexport const heroDarkTheme = heroLightTheme.new({\n color: { primary: '#9353d3', disabled: '#27272a', default: '#27272a' },\n bg: {\n color: {\n bottom: '#000000',\n middle: '#18181b',\n top: '#27272a',\n hover: '#3f3f46',\n black: '#000000'\n }\n },\n border: { color: '#3f3f46', mutedColor: 'transparent' },\n 'text-color': {\n title: '#ECEDEE',\n main: '#ECEDEE',\n second: '#A1A1AA',\n placeholder: '#71717A',\n assist: '#71717A',\n disabled: '#71717A',\n white: '#FFFFFF'\n },\n shadow: {\n color: 'rgba(0, 0, 0, 0.2)',\n x: 0,\n y: 4,\n blur: 14,\n spread: 0,\n emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f'\n },\n button: { 'default-bg': 'var(--u-bg-color-top)' }\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,WAAW,IAAI;CAC3C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;
|
|
1
|
+
{"version":3,"file":"hero.js","names":[],"sources":["../../../src/theme/presets/hero.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const heroLightTheme = lightTheme.new({\n color: {\n primary: '#7828c8', // purple\n success: '#17c964',\n warning: '#f5a524',\n danger: '#f31260',\n info: '#006fee',\n disabled: '#f4f4f5',\n default: '#f4f4f5'\n },\n border: { width: 2, color: '#dcdfe6', mutedColor: 'transparent' },\n 'text-color': {\n title: '#11181C',\n main: '#11181C',\n second: '#71717A',\n placeholder: '#A1A1AA',\n assist: '#A1A1AA',\n disabled: '#A1A1AA',\n white: '#FFFFFF'\n },\n radius: { small: 8, default: 12, large: 14 },\n shadow: {\n color: 'rgba(0, 0, 0, 0.08)',\n x: 0,\n y: 4,\n blur: 14,\n spread: 0,\n emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f'\n },\n button: { 'default-bg': '#ebebec' }\n})\n\nexport const heroDarkTheme = heroLightTheme.new({\n color: { primary: '#9353d3', disabled: '#27272a', default: '#27272a' },\n bg: {\n color: {\n bottom: '#000000',\n middle: '#18181b',\n top: '#27272a',\n hover: '#3f3f46',\n black: '#000000'\n }\n },\n border: { color: '#3f3f46', mutedColor: 'transparent' },\n 'text-color': {\n title: '#ECEDEE',\n main: '#ECEDEE',\n second: '#A1A1AA',\n placeholder: '#71717A',\n assist: '#71717A',\n disabled: '#71717A',\n white: '#FFFFFF'\n },\n shadow: {\n color: 'rgba(0, 0, 0, 0.2)',\n x: 0,\n y: 4,\n blur: 14,\n spread: 0,\n emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f'\n },\n button: { 'default-bg': 'var(--u-bg-color-top)' }\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,WAAW,IAAI;CAC3C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAc;CAChE,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAC3C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;CACV;CACA,QAAQ,EAAE,cAAc,UAAU;AACpC,CAAC;AAED,MAAa,gBAAgB,eAAe,IAAI;CAC9C,OAAO;EAAE,SAAS;EAAW,UAAU;EAAW,SAAS;CAAU;CACrE,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;CACT,EACF;CACA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAc;CACtD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;CACV;CACA,QAAQ,EAAE,cAAc,wBAAwB;AAClD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"light.js","names":[],"sources":["../../../src/theme/presets/light.ts"],"sourcesContent":["import { defineBySize } from '../helper'\nimport { UITheme } from '../ui-theme'\n\nexport const lightTheme: UITheme = new UITheme(\n {\n color: {\n primary: '#1E88E5',\n success: '#2ba471',\n warning: '#e37318',\n danger: '#d54941',\n info: '#009688',\n disabled: '#f5f7fa',\n default: '#f1f5f9'\n },\n\n bg: {\n color: {\n bottom: '#f5f5f5',\n middle: '#fafafa',\n top: '#ffffff',\n hover: '#f5f7fa',\n black: '#000000'\n },\n\n filter: { blur: 'none', saturate: 'none' }\n },\n\n border: { color: '#dcdfe6', mutedColor: '#dcdfe6', width: 1, style: 'solid' },\n\n 'text-color': {\n title: '#303133',\n main: '#606266',\n placeholder: '#a8abb2',\n second: '#979797',\n assist: '#c0c4cc',\n disabled: '#a8abb2',\n white: '#fff'\n },\n\n radius: defineBySize({ small: 4, default: 6, large: 8 }),\n\n 'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),\n\n 'font-family':\n 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif',\n\n 'font-size-title': defineBySize({ small: 16, default: 16, large: 18 }),\n\n 'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),\n\n 'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),\n\n shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1, emboss: 'none' },\n\n gap: defineBySize({ small: 6, default: 8, large: 12 }),\n\n breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 },\n\n button: { 'default-bg': 'var(--u-bg-color-top)' }\n },\n { reactive: false }\n)\n"],"mappings":";;;AAGA,MAAa,aAAsB,IAAI,QACrC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;
|
|
1
|
+
{"version":3,"file":"light.js","names":[],"sources":["../../../src/theme/presets/light.ts"],"sourcesContent":["import { defineBySize } from '../helper'\nimport { UITheme } from '../ui-theme'\n\nexport const lightTheme: UITheme = new UITheme(\n {\n color: {\n primary: '#1E88E5',\n success: '#2ba471',\n warning: '#e37318',\n danger: '#d54941',\n info: '#009688',\n disabled: '#f5f7fa',\n default: '#f1f5f9'\n },\n\n bg: {\n color: {\n bottom: '#f5f5f5',\n middle: '#fafafa',\n top: '#ffffff',\n hover: '#f5f7fa',\n black: '#000000'\n },\n\n filter: { blur: 'none', saturate: 'none' }\n },\n\n border: { color: '#dcdfe6', mutedColor: '#dcdfe6', width: 1, style: 'solid' },\n\n 'text-color': {\n title: '#303133',\n main: '#606266',\n placeholder: '#a8abb2',\n second: '#979797',\n assist: '#c0c4cc',\n disabled: '#a8abb2',\n white: '#fff'\n },\n\n radius: defineBySize({ small: 4, default: 6, large: 8 }),\n\n 'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),\n\n 'font-family':\n 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif',\n\n 'font-size-title': defineBySize({ small: 16, default: 16, large: 18 }),\n\n 'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),\n\n 'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),\n\n shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1, emboss: 'none' },\n\n gap: defineBySize({ small: 6, default: 8, large: 12 }),\n\n breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 },\n\n button: { 'default-bg': 'var(--u-bg-color-top)' }\n },\n { reactive: false }\n)\n"],"mappings":";;;AAGA,MAAa,aAAsB,IAAI,QACrC;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;EAEA,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAO;CAC3C;CAEA,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW,OAAO;EAAG,OAAO;CAAQ;CAE5E,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CAEA,QAAQ,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAE,CAAC;CAEvD,yBAAyB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAE3E,eACE;CAEF,mBAAmB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAErE,kBAAkB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAEpE,oBAAoB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAEtE,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;CAAO;CAE7E,KAAK,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG,CAAC;CAErD,YAAY;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;EAAM,IAAI;CAAK;CAEnD,QAAQ,EAAE,cAAc,wBAAwB;AAClD,GACA,EAAE,UAAU,MAAM,CACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadcn.js","names":[],"sources":["../../../src/theme/presets/shadcn.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const shadcnLightTheme = lightTheme.new({\n color: {\n primary: '#18181b', // zinc-900\n success: '#22c55e',\n warning: '#f59e0b',\n danger: '#ef4444',\n info: '#3b82f6',\n disabled: '#f4f4f5',\n default: '#fafafa'\n },\n bg: {\n color: {\n bottom: '#f4f4f5',\n middle: '#fafafa',\n top: '#ffffff',\n hover: '#f4f4f5',\n black: '#000000'\n }\n },\n border: { color: '#e4e4e7', mutedColor: '#e4e4e7' },\n 'text-color': {\n title: '#09090b',\n main: '#09090b',\n second: '#71717a',\n placeholder: '#a1a1aa',\n assist: '#a1a1aa',\n disabled: '#a1a1aa',\n white: '#ffffff'\n },\n radius: { small: 4, default: 6, large: 8 },\n shadow: { color: 'rgba(0, 0, 0, 0.05)', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' },\n button: {\n 'primary-text-color': '#ffffff',\n 'primary-hover-bg': '#27272a',\n 'primary-hover-color': '#ffffff'\n }\n})\n\nexport const shadcnDarkTheme = shadcnLightTheme.new({\n color: {\n primary: '#fafafa', // zinc-50\n disabled: '#27272a',\n default: '#18181b'\n },\n bg: {\n color: {\n bottom: '#09090b',\n middle: '#18181b',\n top: '#27272a',\n hover: '#27272a',\n black: '#000000'\n }\n },\n border: { color: '#3f3f46', mutedColor: '#27272a' },\n 'text-color': {\n title: '#fafafa',\n main: '#fafafa',\n second: '#a1a1aa',\n placeholder: '#71717a',\n assist: '#71717a',\n disabled: '#71717a',\n white: '#ffffff'\n },\n shadow: { color: 'rgba(0, 0, 0, 0.4)', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' },\n button: {\n 'primary-text-color': '#000000',\n 'primary-hover-bg': '#e4e4e7',\n 'primary-hover-color': '#000000',\n 'primary-plain-color': '#fafafa'\n },\n checkbox: { color: '#000000' },\n tag: { 'primary-dark-color': '#000000' }\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,WAAW,IAAI;CAC7C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;
|
|
1
|
+
{"version":3,"file":"shadcn.js","names":[],"sources":["../../../src/theme/presets/shadcn.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const shadcnLightTheme = lightTheme.new({\n color: {\n primary: '#18181b', // zinc-900\n success: '#22c55e',\n warning: '#f59e0b',\n danger: '#ef4444',\n info: '#3b82f6',\n disabled: '#f4f4f5',\n default: '#fafafa'\n },\n bg: {\n color: {\n bottom: '#f4f4f5',\n middle: '#fafafa',\n top: '#ffffff',\n hover: '#f4f4f5',\n black: '#000000'\n }\n },\n border: { color: '#e4e4e7', mutedColor: '#e4e4e7' },\n 'text-color': {\n title: '#09090b',\n main: '#09090b',\n second: '#71717a',\n placeholder: '#a1a1aa',\n assist: '#a1a1aa',\n disabled: '#a1a1aa',\n white: '#ffffff'\n },\n radius: { small: 4, default: 6, large: 8 },\n shadow: { color: 'rgba(0, 0, 0, 0.05)', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' },\n button: {\n 'primary-text-color': '#ffffff',\n 'primary-hover-bg': '#27272a',\n 'primary-hover-color': '#ffffff'\n }\n})\n\nexport const shadcnDarkTheme = shadcnLightTheme.new({\n color: {\n primary: '#fafafa', // zinc-50\n disabled: '#27272a',\n default: '#18181b'\n },\n bg: {\n color: {\n bottom: '#09090b',\n middle: '#18181b',\n top: '#27272a',\n hover: '#27272a',\n black: '#000000'\n }\n },\n border: { color: '#3f3f46', mutedColor: '#27272a' },\n 'text-color': {\n title: '#fafafa',\n main: '#fafafa',\n second: '#a1a1aa',\n placeholder: '#71717a',\n assist: '#71717a',\n disabled: '#71717a',\n white: '#ffffff'\n },\n shadow: { color: 'rgba(0, 0, 0, 0.4)', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' },\n button: {\n 'primary-text-color': '#000000',\n 'primary-hover-bg': '#e4e4e7',\n 'primary-hover-color': '#000000',\n 'primary-plain-color': '#fafafa'\n },\n checkbox: { color: '#000000' },\n tag: { 'primary-dark-color': '#000000' }\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,WAAW,IAAI;CAC7C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;CACT,EACF;CACA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAClD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAE;CACzC,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;CAAO;CACvF,QAAQ;EACN,sBAAsB;EACtB,oBAAoB;EACpB,uBAAuB;CACzB;AACF,CAAC;AAED,MAAa,kBAAkB,iBAAiB,IAAI;CAClD,OAAO;EACL,SAAS;EACT,UAAU;EACV,SAAS;CACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;CACT,EACF;CACA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAClD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAsB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;CAAO;CACtF,QAAQ;EACN,sBAAsB;EACtB,oBAAoB;EACpB,uBAAuB;EACvB,uBAAuB;CACzB;CACA,UAAU,EAAE,OAAO,UAAU;CAC7B,KAAK,EAAE,sBAAsB,UAAU;AACzC,CAAC"}
|
|
@@ -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 { mixColor } from './helper'\nimport type { Theme } from './type'\n\ntype RecursivePartial<T> = {\n [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]\n}\n\nexport class UITheme {\n static themeID = 'ultra-ui-theme'\n\n private static adoptedSheet: CSSStyleSheet | null = null\n\n readonly theme: Theme\n\n private readonly reactiveEnabled: boolean\n\n constructor(theme: Theme, options?: { reactive?: boolean }) {\n this.reactiveEnabled = options?.reactive !== false\n this.theme = reactive(theme) as Theme\n if (this.reactiveEnabled) {\n watch(this.theme, () => this.render(), { deep: true })\n }\n }\n\n static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n if (typeof document === 'undefined') return\n const el = document.documentElement\n if (mode === 'auto') {\n delete el.dataset.theme\n } else {\n el.dataset.theme = mode\n }\n }\n\n private renderBase(\n theme: Record<string, unknown>,\n themeRules: string[] = [],\n parentKey = '--u'\n ): string[] {\n Object.keys(theme).forEach((key) => {\n const value = theme[key]\n const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n } else {\n if (value || value === 0) {\n const v = withUnit(value as number | string, 'px')\n if (v !== undefined) {\n themeRules.push(`${varKey}: ${v}`)\n }\n }\n }\n })\n\n return themeRules\n }\n\n private renderBorder(theme: Theme): string {\n const shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n (key) => key !== 'mutedColor'\n )\n const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n return [\n `--u-border: ${border}`,\n `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n ].join(';')\n }\n\n private renderTypeColor(theme: Theme): string {\n const { color } = theme\n\n const types = Object.keys(color)\n const rates = [1, 3, 5, 7, 9]\n\n return types\n .map((type) => {\n const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n return rates\n .map((rate) => {\n const light = `--u-color-${type}-light-${rate}: ${mixColor(\n colorValue,\n '#fff',\n rate / 10\n )}`\n const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n colorValue,\n '#000',\n rate / 10\n )}`\n return `${light};${dark}`\n })\n .join(';')\n })\n .join(';')\n }\n\n private renderShadow(_theme: Theme): string {\n const shadow = ['x', 'y', 'blur', 'spread', 'color']\n .map((k) => `var(--u-shadow-${k})`)\n .join(' ')\n\n return `--u-shadow: ${shadow}`\n }\n\n private renderBGColorAlpha(theme: Theme): string {\n const { color } = theme.bg\n return Object.keys(color)\n .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)\n .join(';')\n }\n\n private renderBGFilter(theme: Theme): string {\n const { filter } = theme.bg\n const value = filter.blur === 'none' ? 'none' : `${filter.blur} ${filter.saturate}`\n return `--u-bg-filter: ${value}`\n }\n\n /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */\n themeToDeclarationList(theme: Theme): string[] {\n const raw = theme as unknown as Record<string, unknown>\n const lines: string[] = [...this.renderBase(raw)]\n const chunks = [\n this.renderTypeColor(theme),\n this.renderShadow(theme),\n this.renderBGColorAlpha(theme),\n this.renderBGFilter(theme),\n this.renderBorder(theme)\n ]\n for (const c of chunks) {\n lines.push(\n ...c\n .split(';')\n .map((s) => s.trim())\n .filter(Boolean)\n )\n }\n return lines\n }\n\n private static declarationBlock(decls: string[]): string {\n return decls.join(';')\n }\n\n private static removeExistingStyleTag(doc: Document): void {\n const el = doc.getElementById(UITheme.themeID)\n if (el?.parentNode) {\n el.parentNode.removeChild(el)\n }\n }\n\n private static applyGlobalCSS(css: string): void {\n const doc = typeof document !== 'undefined' ? document : undefined\n if (!doc) return\n\n const canAdopt =\n typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n if (canAdopt) {\n UITheme.removeExistingStyleTag(doc)\n if (!UITheme.adoptedSheet) {\n UITheme.adoptedSheet = new CSSStyleSheet()\n doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n }\n UITheme.adoptedSheet.replaceSync(css)\n } else {\n if (UITheme.adoptedSheet) {\n UITheme.adoptedSheet = null\n }\n let style = doc.getElementById(UITheme.themeID)\n if (!style) {\n style = doc.createElement('style')\n style.id = UITheme.themeID\n doc.head.appendChild(style)\n }\n style.textContent = css\n }\n }\n\n /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */\n static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n const lightDecls = [\n ...light.themeToDeclarationList(toRaw(light.theme)),\n ...componentCssVarsLightDecls\n ]\n const darkDecls = [\n ...dark.themeToDeclarationList(toRaw(dark.theme)),\n ...componentCssVarsDarkDecls\n ]\n const lightBlock = UITheme.declarationBlock(lightDecls)\n const darkBlock = UITheme.declarationBlock(darkDecls)\n\n const css = [\n `html { ${lightBlock} }`,\n `@media (prefers-color-scheme: dark) {`,\n ` html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n `}`,\n `html[data-theme=\"light\"] { ${lightBlock} }`,\n `html[data-theme=\"dark\"] { ${darkBlock} }`\n ].join('\\n')\n\n UITheme.applyGlobalCSS(css)\n }\n\n render(): void {\n const isDark =\n typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'\n const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]\n const block = UITheme.declarationBlock(decls)\n const css = `html { ${block} }`\n UITheme.applyGlobalCSS(css)\n }\n\n new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n function delEmpty(obj: Record<string, unknown>) {\n Object.keys(obj).forEach((key) => {\n const value = obj[key]\n if (isObj(value)) {\n return delEmpty(value as Record<string, unknown>)\n }\n if (!value && value !== 0) {\n delete obj[key]\n }\n })\n }\n\n delEmpty(customTheme as Record<string, unknown>)\n\n const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n\n function deepMerge(target: any, source: any) {\n if (typeof source !== 'object' || source === null) return\n Object.keys(source).forEach((key) => {\n const sourceVal = source[key]\n if (typeof sourceVal === 'object' && sourceVal !== null && !Array.isArray(sourceVal)) {\n if (typeof target[key] !== 'object' || target[key] === null) {\n target[key] = {}\n }\n deepMerge(target[key], sourceVal)\n } else {\n target[key] = sourceVal\n }\n })\n }\n\n deepMerge(base, customTheme)\n return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'\nimport { mixColor } from './helper'\nimport type { Theme } from './type'\n\ntype RecursivePartial<T> = {\n [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]\n}\n\nexport class UITheme {\n static themeID = 'ultra-ui-theme'\n\n private static adoptedSheet: CSSStyleSheet | null = null\n\n readonly theme: Theme\n\n private readonly reactiveEnabled: boolean\n\n constructor(theme: Theme, options?: { reactive?: boolean }) {\n this.reactiveEnabled = options?.reactive !== false\n this.theme = reactive(theme) as Theme\n if (this.reactiveEnabled) {\n watch(this.theme, () => this.render(), { deep: true })\n }\n }\n\n static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n if (typeof document === 'undefined') return\n const el = document.documentElement\n if (mode === 'auto') {\n delete el.dataset.theme\n } else {\n el.dataset.theme = mode\n }\n }\n\n private renderBase(\n theme: Record<string, unknown>,\n themeRules: string[] = [],\n parentKey = '--u'\n ): string[] {\n Object.keys(theme).forEach((key) => {\n const value = theme[key]\n const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n } else {\n if (value || value === 0) {\n const v = withUnit(value as number | string, 'px')\n if (v !== undefined) {\n themeRules.push(`${varKey}: ${v}`)\n }\n }\n }\n })\n\n return themeRules\n }\n\n private renderBorder(theme: Theme): string {\n const shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n (key) => key !== 'mutedColor'\n )\n const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n return [\n `--u-border: ${border}`,\n `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n ].join(';')\n }\n\n private renderTypeColor(theme: Theme): string {\n const { color } = theme\n\n const types = Object.keys(color)\n const rates = [1, 3, 5, 7, 9]\n\n return types\n .map((type) => {\n const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n return rates\n .map((rate) => {\n const light = `--u-color-${type}-light-${rate}: ${mixColor(\n colorValue,\n '#fff',\n rate / 10\n )}`\n const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n colorValue,\n '#000',\n rate / 10\n )}`\n return `${light};${dark}`\n })\n .join(';')\n })\n .join(';')\n }\n\n private renderShadow(_theme: Theme): string {\n const shadow = ['x', 'y', 'blur', 'spread', 'color']\n .map((k) => `var(--u-shadow-${k})`)\n .join(' ')\n\n return `--u-shadow: ${shadow}`\n }\n\n private renderBGColorAlpha(theme: Theme): string {\n const { color } = theme.bg\n return Object.keys(color)\n .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)\n .join(';')\n }\n\n private renderBGFilter(theme: Theme): string {\n const { filter } = theme.bg\n const value = filter.blur === 'none' ? 'none' : `${filter.blur} ${filter.saturate}`\n return `--u-bg-filter: ${value}`\n }\n\n /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */\n themeToDeclarationList(theme: Theme): string[] {\n const raw = theme as unknown as Record<string, unknown>\n const lines: string[] = [...this.renderBase(raw)]\n const chunks = [\n this.renderTypeColor(theme),\n this.renderShadow(theme),\n this.renderBGColorAlpha(theme),\n this.renderBGFilter(theme),\n this.renderBorder(theme)\n ]\n for (const c of chunks) {\n lines.push(\n ...c\n .split(';')\n .map((s) => s.trim())\n .filter(Boolean)\n )\n }\n return lines\n }\n\n private static declarationBlock(decls: string[]): string {\n return decls.join(';')\n }\n\n private static removeExistingStyleTag(doc: Document): void {\n const el = doc.getElementById(UITheme.themeID)\n if (el?.parentNode) {\n el.parentNode.removeChild(el)\n }\n }\n\n private static applyGlobalCSS(css: string): void {\n const doc = typeof document !== 'undefined' ? document : undefined\n if (!doc) return\n\n const canAdopt =\n typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n if (canAdopt) {\n UITheme.removeExistingStyleTag(doc)\n if (!UITheme.adoptedSheet) {\n UITheme.adoptedSheet = new CSSStyleSheet()\n doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n }\n UITheme.adoptedSheet.replaceSync(css)\n } else {\n if (UITheme.adoptedSheet) {\n UITheme.adoptedSheet = null\n }\n let style = doc.getElementById(UITheme.themeID)\n if (!style) {\n style = doc.createElement('style')\n style.id = UITheme.themeID\n doc.head.appendChild(style)\n }\n style.textContent = css\n }\n }\n\n /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */\n static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n const lightDecls = [\n ...light.themeToDeclarationList(toRaw(light.theme)),\n ...componentCssVarsLightDecls\n ]\n const darkDecls = [\n ...dark.themeToDeclarationList(toRaw(dark.theme)),\n ...componentCssVarsDarkDecls\n ]\n const lightBlock = UITheme.declarationBlock(lightDecls)\n const darkBlock = UITheme.declarationBlock(darkDecls)\n\n const css = [\n `html { ${lightBlock} }`,\n `@media (prefers-color-scheme: dark) {`,\n ` html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n `}`,\n `html[data-theme=\"light\"] { ${lightBlock} }`,\n `html[data-theme=\"dark\"] { ${darkBlock} }`\n ].join('\\n')\n\n UITheme.applyGlobalCSS(css)\n }\n\n render(): void {\n const isDark =\n typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'\n const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls\n const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]\n const block = UITheme.declarationBlock(decls)\n const css = `html { ${block} }`\n UITheme.applyGlobalCSS(css)\n }\n\n new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n function delEmpty(obj: Record<string, unknown>) {\n Object.keys(obj).forEach((key) => {\n const value = obj[key]\n if (isObj(value)) {\n return delEmpty(value as Record<string, unknown>)\n }\n if (!value && value !== 0) {\n delete obj[key]\n }\n })\n }\n\n delEmpty(customTheme as Record<string, unknown>)\n\n const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n\n function deepMerge(target: any, source: any) {\n if (typeof source !== 'object' || source === null) return\n Object.keys(source).forEach((key) => {\n const sourceVal = source[key]\n if (typeof sourceVal === 'object' && sourceVal !== null && !Array.isArray(sourceVal)) {\n if (typeof target[key] !== 'object' || target[key] === null) {\n target[key] = {}\n }\n deepMerge(target[key], sourceVal)\n } else {\n target[key] = sourceVal\n }\n })\n }\n\n deepMerge(base, customTheme)\n return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n }\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/styles",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.30",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"build": "vp pack"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@cat-kit/core": ">=1.1.
|
|
42
|
-
"@veltra/compositions": "1.1.
|
|
43
|
-
"@veltra/utils": "1.1.
|
|
41
|
+
"@cat-kit/core": ">=1.1.6",
|
|
42
|
+
"@veltra/compositions": "1.1.30",
|
|
43
|
+
"@veltra/utils": "1.1.30",
|
|
44
44
|
"vue": ">=3.5.0"
|
|
45
45
|
}
|
|
46
46
|
}
|