@veltra/styles 1.1.15 → 1.1.18

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.
Files changed (76) hide show
  1. package/README.md +42 -0
  2. package/dist/_functions.scss +6 -5
  3. package/dist/_mixins.scss +6 -5
  4. package/dist/_vars.scss +1 -16
  5. package/dist/normalize/index.js +1 -0
  6. package/dist/{normalize2.css → normalize/normalize.css} +0 -17
  7. package/dist/theme/component-css-vars.js +1 -1
  8. package/dist/theme/component-css-vars.js.map +1 -1
  9. package/dist/theme/helper.js +1 -8
  10. package/dist/theme/helper.js.map +1 -1
  11. package/dist/theme/index.d.ts +7 -9
  12. package/dist/theme/index.js +7 -9
  13. package/dist/{load-theme.d.ts → theme/load-theme.d.ts} +2 -2
  14. package/dist/{load-theme.js → theme/load-theme.js} +4 -4
  15. package/dist/theme/load-theme.js.map +1 -0
  16. package/dist/theme/presets/dark.d.ts +6 -0
  17. package/dist/theme/{dark.js → presets/dark.js} +1 -1
  18. package/dist/theme/presets/dark.js.map +1 -0
  19. package/dist/theme/{glass.d.ts → presets/glass.d.ts} +2 -3
  20. package/dist/theme/{glass.js → presets/glass.js} +1 -1
  21. package/dist/theme/presets/glass.js.map +1 -0
  22. package/dist/theme/{hero.d.ts → presets/hero.d.ts} +2 -3
  23. package/dist/theme/{hero.js → presets/hero.js} +1 -1
  24. package/dist/theme/presets/hero.js.map +1 -0
  25. package/dist/theme/presets/light.d.ts +7 -0
  26. package/dist/theme/{light.js → presets/light.js} +3 -3
  27. package/dist/theme/presets/light.js.map +1 -0
  28. package/dist/theme/{shadcn.d.ts → presets/shadcn.d.ts} +2 -3
  29. package/dist/theme/{shadcn.js → presets/shadcn.js} +1 -1
  30. package/dist/theme/presets/shadcn.js.map +1 -0
  31. package/dist/theme/ui-theme.js.map +1 -1
  32. package/dist/transitions/fade.css +9 -0
  33. package/dist/transitions/index.js +4 -0
  34. package/dist/transitions/slide.css +18 -0
  35. package/dist/transitions/spring.css +34 -0
  36. package/dist/transitions/zoom-in.css +57 -0
  37. package/package.json +11 -36
  38. package/src/_functions.scss +6 -5
  39. package/src/_mixins.scss +6 -5
  40. package/src/_vars.scss +1 -16
  41. package/{dist → src/normalize}/normalize.scss +2 -4
  42. package/src/theme/__test__/ui-theme.test.ts +1 -1
  43. package/src/theme/index.ts +6 -15
  44. package/src/{load-theme.ts → theme/load-theme.ts} +2 -3
  45. package/src/theme/presets/index.ts +5 -0
  46. package/src/theme/{light.ts → presets/light.ts} +2 -2
  47. package/dist/index.js +0 -0
  48. package/dist/load-theme.js.map +0 -1
  49. package/dist/normalize.js +0 -1
  50. package/dist/theme/component-css-vars.d.ts +0 -16
  51. package/dist/theme/dark.d.ts +0 -7
  52. package/dist/theme/dark.js.map +0 -1
  53. package/dist/theme/glass.js.map +0 -1
  54. package/dist/theme/helper.d.ts +0 -22
  55. package/dist/theme/hero.js.map +0 -1
  56. package/dist/theme/light.d.ts +0 -7
  57. package/dist/theme/light.js.map +0 -1
  58. package/dist/theme/shadcn.js.map +0 -1
  59. package/src/index.ts +0 -2
  60. package/src/normalize.scss +0 -63
  61. /package/dist/{index.d.ts → normalize/index.d.ts} +0 -0
  62. /package/dist/{anime → transitions}/fade.scss +0 -0
  63. /package/dist/{normalize.d.ts → transitions/index.d.ts} +0 -0
  64. /package/dist/{anime → transitions}/slide.scss +0 -0
  65. /package/dist/{anime → transitions}/spring.scss +0 -0
  66. /package/dist/{anime → transitions}/zoom-in.scss +0 -0
  67. /package/src/{normalize.ts → normalize/index.ts} +0 -0
  68. /package/src/theme/{dark.ts → presets/dark.ts} +0 -0
  69. /package/src/theme/{glass.ts → presets/glass.ts} +0 -0
  70. /package/src/theme/{hero.ts → presets/hero.ts} +0 -0
  71. /package/src/theme/{shadcn.ts → presets/shadcn.ts} +0 -0
  72. /package/src/{anime → transitions}/fade.scss +0 -0
  73. /package/src/{anime → transitions}/index.ts +0 -0
  74. /package/src/{anime → transitions}/slide.scss +0 -0
  75. /package/src/{anime → transitions}/spring.scss +0 -0
  76. /package/src/{anime → transitions}/zoom-in.scss +0 -0
package/README.md ADDED
@@ -0,0 +1,42 @@
1
+ # 样式系统
2
+
3
+ 样式系统主要包含以下内内容:
4
+
5
+ - 规范化样式
6
+ - 预设的 Vue3 过渡样式
7
+ - 主题系统
8
+ - scss 工具
9
+
10
+ ## 规范化样式
11
+
12
+ 通常在 `main.ts` 中导入 `normalize` 样式:
13
+
14
+ ```ts
15
+ import '@veltra/styles/normalize'
16
+ ```
17
+
18
+ ## 预设的 Vue3 过渡样式
19
+
20
+ ### 全部导入
21
+
22
+ 可以在 `main.ts` 中全局导入:
23
+
24
+ ```ts
25
+ import '@veltra/styles/transitions'
26
+ ```
27
+
28
+ ### 单独导入
29
+
30
+ 如果对体积有严格要求,不想导入未使用的过渡效果,可以在局部使用以下导入的方式
31
+
32
+
33
+ ```ts
34
+ import '@veltra/styles/transitions/fade.css'
35
+ ```
36
+
37
+ ## scss 工具
38
+
39
+ 本包提供了一些常用的 `scss` 工具,包括常用的 `mixins` 与 常用的 `functions`, 你还可以通过覆盖变量 $namespace 来使用当前库的同一套工具体系,只不过是命名空间不一样。
40
+
41
+
42
+ ## 主题加载以及切换
@@ -1,5 +1,6 @@
1
- @use 'vars';
1
+ @forward 'vars';
2
2
  @use 'sass:list';
3
+ @use 'vars' as *;
3
4
 
4
5
  // 使用单个变量(全局主题 token,`--u-*`)
5
6
  @function use-var($basename, $nodes...) {
@@ -9,16 +10,16 @@
9
10
  $suffix: $suffix + '-' + $node;
10
11
  }
11
12
 
12
- @return var(--u-#{$basename}#{$suffix});
13
+ @return var(--#{$namespace}-#{$basename}#{$suffix});
13
14
  }
14
15
 
15
16
  // 组件级 token:`var(--u-{component}-{property}[, fallback])`
16
17
  @function component-var($component, $property, $fallback: null) {
17
18
  @if $fallback == null {
18
- @return var(--u-#{$component}-#{$property});
19
+ @return var(--#{$namespace}-#{$component}-#{$property});
19
20
  }
20
21
 
21
- @return var(--u-#{$component}-#{$property}, #{$fallback});
22
+ @return var(--#{$namespace}-#{$component}-#{$property}, #{$fallback});
22
23
  }
23
24
 
24
25
  // 使用多个变量
@@ -36,7 +37,7 @@
36
37
 
37
38
  // bem的函数
38
39
  @function bem($b, $e: null, $m: null) {
39
- $b: '.' + vars.$namespace + $b;
40
+ $b: '.' + $namespace + '-' + $b;
40
41
  @if ($e != null) {
41
42
  $b: $b + '__' + $e;
42
43
  }
package/dist/_mixins.scss CHANGED
@@ -1,6 +1,7 @@
1
- @use 'vars';
1
+ @forward 'vars';
2
2
  @use 'sass:list';
3
3
  @use 'sass:map';
4
+ @use 'vars' as *;
4
5
  @use 'functions' as fn;
5
6
 
6
7
  /** flex布局 */
@@ -12,7 +13,7 @@
12
13
  }
13
14
 
14
15
  @mixin size {
15
- @each $size in vars.$sizes {
16
+ @each $size in $sizes {
16
17
  &--#{$size} {
17
18
  @content ($size);
18
19
  }
@@ -21,7 +22,7 @@
21
22
 
22
23
  @mixin b($blocks...) {
23
24
  @each $block in $blocks {
24
- .#{vars.$namespace}#{$block} {
25
+ .#{$namespace}-#{$block} {
25
26
  @content;
26
27
  }
27
28
  }
@@ -87,7 +88,7 @@
87
88
  }
88
89
 
89
90
  @mixin bem($b, $e: null, $m: null) {
90
- $b: '.' + vars.$namespace + $b;
91
+ $b: '.' + $namespace + '-' + $b;
91
92
 
92
93
  @if ($e != null) {
93
94
  @each $ei in $e {
@@ -142,7 +143,7 @@
142
143
  }
143
144
 
144
145
  @function breakpoint($point) {
145
- @return var(--u-breakpoint-#{$point});
146
+ @return var(--#{$namespace}-breakpoint-#{$point});
146
147
  }
147
148
 
148
149
  /** 暗色:data-theme 与系统偏好,与 UITheme.injectBuiltInThemes 选择器策略一致 */
package/dist/_vars.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:map';
2
2
 
3
- $namespace: 'u-';
3
+ $namespace: 'u' !default;
4
4
 
5
5
  // 与全局 CSS 变量对齐的语义化别名(便于 SCSS 中直接引用)
6
6
  $color-primary: var(--u-color-primary);
@@ -9,21 +9,6 @@ $border-color: var(--u-border-color);
9
9
  $border-muted-color: var(--u-border-muted-color);
10
10
  $bg-color-top: var(--u-bg-color-top);
11
11
 
12
- // 定义size映射的函数, 保证尺寸的统一性, size-vars(small, default, large)
13
- // 例子:
14
- // size-vars((height: 24px), (height: 32px), (height: 40px))
15
- // 生成:
16
- // (small: (height: 24px), default: (height: 32px), large: (height: 40px))
17
- @function size-vars($sizes...) {
18
- $size-types: (small, default, large);
19
- $size-result: ();
20
-
21
- @for $i from 1 through length($size-types) {
22
- $size-result: map.merge($size-result, (#{nth($size-types, $i)}: nth($sizes, $i)));
23
- }
24
- @return $size-result;
25
- }
26
-
27
12
  $sizes: (small, default, large);
28
13
 
29
14
  // 颜色类别
@@ -0,0 +1 @@
1
+ import "./normalize.css";
@@ -1,20 +1,3 @@
1
- @charset "UTF-8";
2
- /** flex布局 */
3
- /**
4
- * 设置css变量
5
- * 参数1:变量前缀
6
- * 参数2: 一个由值组成的列表或者由key, value组成的map
7
- * css-var(height, (
8
- * large: 40px
9
- * default: 32px
10
- * small: 24px
11
- * ))
12
- * 生成的css变量:
13
- * --u-height-large: 40px;
14
- * --u-height-default: 32px;
15
- * --u-height-small: 24px;
16
- */
17
- /** 暗色:data-theme 与系统偏好,与 UITheme.injectBuiltInThemes 选择器策略一致 */
18
1
  html {
19
2
  font-family: var(--u-font-family);
20
3
  font-weight: normal;
@@ -158,6 +158,6 @@ function recordToDeclList(record) {
158
158
  const componentCssVarsLightDecls = recordToDeclList(componentCssVarsLight);
159
159
  const componentCssVarsDarkDecls = recordToDeclList(componentCssVarsDark);
160
160
  //#endregion
161
- export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar };
161
+ export { componentCssVarsDarkDecls, componentCssVarsLightDecls };
162
162
 
163
163
  //# sourceMappingURL=component-css-vars.js.map
@@ -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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"}
@@ -44,14 +44,7 @@ function mixColor(color1, color2, ratio) {
44
44
  function defineBySize(variable) {
45
45
  return variable;
46
46
  }
47
- /**
48
- * 引用全局主题 CSS 变量(`--u-*` 命名空间)
49
- * @param prop - 与 Theme 结构对应的连字符路径,如 `text-color-title`、`bg-color-hover`
50
- */
51
- function cssVar(prop) {
52
- return `var(--u-${prop})`;
53
- }
54
47
  //#endregion
55
- export { HEXToRGB, cssVar, defineBySize, mixColor };
48
+ export { defineBySize, mixColor };
56
49
 
57
50
  //# sourceMappingURL=helper.js.map
@@ -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,GAAG;CACjC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;AAEzB,KAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;GAAI;AACnD,QAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;;AAGzC,KAAI,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;AACjC,KAAI,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;AACjC,KAAI,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;AAEjC,QAAO;EAAC;EAAG;EAAG;EAAE;;;;;;;;;AAUlB,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;AAC1F,KAAI,QAAQ,EAAG,OAAM,IAAI,MAAM,gBAAgB;CAC/C,MAAM,YAAY,SAAS,OAAO;CAClC,MAAM,YAAY,SAAS,OAAO;CAElC,MAAM,cAAc,IAAI;AAExB,QACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,MAAM,CAAC,SAAS,GAAG;AAC5E,SAAO,IAAI,WAAW,IAAI,MAAM,MAAM;GACtC,CACD,KAAK,GAAG;;AAIf,SAAgB,aACd,UAC+C;AAC/C,QAAO;;;;;;AAOT,SAAgB,OAAO,MAAsB;AAC3C,QAAO,WAAW,KAAK"}
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,GAAG;CACjC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;CAEzB,IAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;GAAI;EACnD,MAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;;CAGzC,IAAI,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;CACjC,IAAI,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;CACjC,IAAI,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;CAEjC,OAAO;EAAC;EAAG;EAAG;EAAE;;;;;;;;;AAUlB,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;CAC1F,IAAI,QAAQ,GAAG,MAAM,IAAI,MAAM,gBAAgB;CAC/C,MAAM,YAAY,SAAS,OAAO;CAClC,MAAM,YAAY,SAAS,OAAO;CAElC,MAAM,cAAc,IAAI;CAExB,OACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,MAAM,CAAC,SAAS,GAAG;EAC5E,OAAO,IAAI,WAAW,IAAI,MAAM,MAAM;GACtC,CACD,KAAK,GAAG;;AAIf,SAAgB,aACd,UAC+C;CAC/C,OAAO"}
@@ -1,11 +1,9 @@
1
- import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar } from "./component-css-vars.js";
2
1
  import { RGBColor, Theme } from "./type.js";
3
2
  import { UITheme } from "./ui-theme.js";
4
- import { lightTheme } from "./light.js";
5
- import { darkTheme } from "./dark.js";
6
- import { shadcnDarkTheme, shadcnLightTheme } from "./shadcn.js";
7
- import { heroDarkTheme, heroLightTheme } from "./hero.js";
8
- import { glassDarkTheme, glassLightTheme } from "./glass.js";
9
- import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
10
- import { currentTheme, loadTheme, setTheme } from "../load-theme.js";
11
- export { HEXToRGB, RGBColor, Theme, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme, themeTokenVar };
3
+ import { lightTheme } from "./presets/light.js";
4
+ import { darkTheme } from "./presets/dark.js";
5
+ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
6
+ import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
7
+ import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
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 };
@@ -1,10 +1,8 @@
1
- import { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, themeTokenVar } from "./component-css-vars.js";
2
- import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
3
1
  import { UITheme } from "./ui-theme.js";
4
- import { lightTheme } from "./light.js";
5
- import { darkTheme } from "./dark.js";
6
- import { shadcnDarkTheme, shadcnLightTheme } from "./shadcn.js";
7
- import { heroDarkTheme, heroLightTheme } from "./hero.js";
8
- import { glassDarkTheme, glassLightTheme } from "./glass.js";
9
- import { currentTheme, loadTheme, setTheme } from "../load-theme.js";
10
- export { HEXToRGB, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme, themeTokenVar };
2
+ import { lightTheme } from "./presets/light.js";
3
+ import { darkTheme } from "./presets/dark.js";
4
+ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
5
+ import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
6
+ import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
7
+ import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
8
+ export { UITheme, currentTheme, darkTheme, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, setTheme, shadcnDarkTheme, shadcnLightTheme };
@@ -1,7 +1,7 @@
1
- import { UITheme } from "./theme/ui-theme.js";
1
+ import { UITheme } from "./ui-theme.js";
2
2
  import { ShallowRef } from "vue";
3
3
 
4
- //#region src/load-theme.d.ts
4
+ //#region src/theme/load-theme.d.ts
5
5
  declare const currentTheme: ShallowRef<UITheme | undefined>;
6
6
  declare function setTheme(mode: 'light' | 'dark' | 'auto'): void;
7
7
  /**
@@ -1,9 +1,9 @@
1
- import { UITheme } from "./theme/ui-theme.js";
2
- import { lightTheme } from "./theme/light.js";
3
- import { darkTheme } from "./theme/dark.js";
1
+ import { UITheme } from "./ui-theme.js";
2
+ import { lightTheme } from "./presets/light.js";
3
+ import { darkTheme } from "./presets/dark.js";
4
4
  import { shallowRef } from "vue";
5
5
  import { useConfig } from "@veltra/compositions";
6
- //#region src/load-theme.ts
6
+ //#region src/theme/load-theme.ts
7
7
  const currentTheme = shallowRef();
8
8
  function setTheme(mode) {
9
9
  UITheme.setTheme(mode);
@@ -0,0 +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,YAAqB;AAElF,SAAgB,SAAS,MAAuC;CAC9D,QAAQ,SAAS,KAAK;;;;;;;;;;AAWxB,SAAgB,UAAU,OAAuB;CAC/C,aAAa,QAAQ,SAAS;CAE9B,MAAM,EAAE,WAAW,WAAW;CAC9B,IAAI,OAAO,aAAa,aACtB,SAAS,gBAAgB,UAAU,IAAI,OAAO,KAAK;CAGrD,IAAI,OAAO,aAAa,aAAa;CAErC,IAAI,CAAC,OAAO;EACV,aAAa,QAAQ;EACrB,QAAQ,oBAAoB,YAAY,UAAU;EAClD;;CAGF,aAAa,QAAQ;CAErB,IAAI,UAAU,cAAc,UAAU,WAAW;EAC/C,QAAQ,oBAAoB,YAAY,UAAU;EAClD,QAAQ,SAAS,UAAU,YAAY,SAAS,QAAQ;QAExD,MAAM,QAAQ"}
@@ -0,0 +1,6 @@
1
+ import { UITheme } from "../ui-theme.js";
2
+ //#region src/theme/presets/dark.d.ts
3
+ declare const darkTheme: UITheme;
4
+ //#endregion
5
+ export { darkTheme };
6
+ //# sourceMappingURL=dark.d.ts.map
@@ -1,5 +1,5 @@
1
1
  import { lightTheme } from "./light.js";
2
- //#region src/theme/dark.ts
2
+ //#region src/theme/presets/dark.ts
3
3
  const darkTheme = lightTheme.new({
4
4
  color: {
5
5
  primary: "#4f8ff7",
@@ -0,0 +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;EACV;CAED,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAQ,UAAU;GAAQ;EAC3C;CAED,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CAED,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW;CAEnD,QAAQ;EAAE,OAAO;EAA4B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CAC9F,CAAC"}
@@ -1,6 +1,5 @@
1
- import { UITheme } from "./ui-theme.js";
2
-
3
- //#region src/theme/glass.d.ts
1
+ import { UITheme } from "../ui-theme.js";
2
+ //#region src/theme/presets/glass.d.ts
4
3
  declare const glassLightTheme: UITheme;
5
4
  declare const glassDarkTheme: UITheme;
6
5
  //#endregion
@@ -1,5 +1,5 @@
1
1
  import { lightTheme } from "./light.js";
2
- //#region src/theme/glass.ts
2
+ //#region src/theme/presets/glass.ts
3
3
  const glassLightTheme = lightTheme.new({
4
4
  color: {
5
5
  primary: "#3B82F6",
@@ -0,0 +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;EACV;CACD,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;EAC3D;CACD,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,OAAO;EACP,OAAO;EACR;CACD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;EAAQ;CAC1F,CAAC;AAEF,MAAa,iBAAiB,gBAAgB,IAAI;CAChD,OAAO;EAAE,UAAU;EAAW,SAAS;EAAW;CAClD,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;EAC3D;CACD,QAAQ;EAAE,OAAO;EAA6B,YAAY;EAA6B;CACvF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;EAAQ;CAC1F,CAAC"}
@@ -1,6 +1,5 @@
1
- import { UITheme } from "./ui-theme.js";
2
-
3
- //#region src/theme/hero.d.ts
1
+ import { UITheme } from "../ui-theme.js";
2
+ //#region src/theme/presets/hero.d.ts
4
3
  declare const heroLightTheme: UITheme;
5
4
  declare const heroDarkTheme: UITheme;
6
5
  //#endregion
@@ -1,5 +1,5 @@
1
1
  import { lightTheme } from "./light.js";
2
- //#region src/theme/hero.ts
2
+ //#region src/theme/presets/hero.ts
3
3
  const heroLightTheme = lightTheme.new({
4
4
  color: {
5
5
  primary: "#7828c8",
@@ -0,0 +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;EACV;CACD,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;EAAe;CACjE,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;EAAI;CAC5C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACT;CACD,QAAQ,EAAE,cAAc,WAAW;CACpC,CAAC;AAEF,MAAa,gBAAgB,eAAe,IAAI;CAC9C,OAAO;EAAE,SAAS;EAAW,UAAU;EAAW,SAAS;EAAW;CACtE,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACR,EACF;CACD,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAe;CACvD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACT;CACD,QAAQ,EAAE,cAAc,yBAAyB;CAClD,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { UITheme } from "../ui-theme.js";
2
+
3
+ //#region src/theme/presets/light.d.ts
4
+ declare const lightTheme: UITheme;
5
+ //#endregion
6
+ export { lightTheme };
7
+ //# sourceMappingURL=light.d.ts.map
@@ -1,6 +1,6 @@
1
- import { defineBySize } from "./helper.js";
2
- import { UITheme } from "./ui-theme.js";
3
- //#region src/theme/light.ts
1
+ import { defineBySize } from "../helper.js";
2
+ import { UITheme } from "../ui-theme.js";
3
+ //#region src/theme/presets/light.ts
4
4
  const lightTheme = new UITheme({
5
5
  color: {
6
6
  primary: "#1E88E5",
@@ -0,0 +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;EACV;CAED,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EAED,QAAQ;GAAE,MAAM;GAAQ,UAAU;GAAQ;EAC3C;CAED,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW,OAAO;EAAG,OAAO;EAAS;CAE7E,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CAED,QAAQ,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAG,CAAC;CAExD,yBAAyB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAE5E,eACE;CAEF,mBAAmB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAEtE,kBAAkB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAErE,oBAAoB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAEvE,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CAE9E,KAAK,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAI,CAAC;CAEtD,YAAY;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;EAAM,IAAI;EAAM;CAEpD,QAAQ,EAAE,cAAc,yBAAyB;CAClD,EACD,EAAE,UAAU,OAAO,CACpB"}
@@ -1,6 +1,5 @@
1
- import { UITheme } from "./ui-theme.js";
2
-
3
- //#region src/theme/shadcn.d.ts
1
+ import { UITheme } from "../ui-theme.js";
2
+ //#region src/theme/presets/shadcn.d.ts
4
3
  declare const shadcnLightTheme: UITheme;
5
4
  declare const shadcnDarkTheme: UITheme;
6
5
  //#endregion
@@ -1,5 +1,5 @@
1
1
  import { lightTheme } from "./light.js";
2
- //#region src/theme/shadcn.ts
2
+ //#region src/theme/presets/shadcn.ts
3
3
  const shadcnLightTheme = lightTheme.new({
4
4
  color: {
5
5
  primary: "#18181b",
@@ -0,0 +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;EACV;CACD,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACR,EACF;CACD,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW;CACnD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAG;CAC1C,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CACxF,QAAQ;EACN,sBAAsB;EACtB,oBAAoB;EACpB,uBAAuB;EACxB;CACF,CAAC;AAEF,MAAa,kBAAkB,iBAAiB,IAAI;CAClD,OAAO;EACL,SAAS;EACT,UAAU;EACV,SAAS;EACV;CACD,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACR,EACF;CACD,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW;CACnD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAsB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CACvF,QAAQ;EACN,sBAAsB;EACtB,oBAAoB;EACpB,uBAAuB;EACvB,uBAAuB;EACxB;CACD,UAAU,EAAE,OAAO,WAAW;CAC9B,KAAK,EAAE,sBAAsB,WAAW;CACzC,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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"}
@@ -0,0 +1,9 @@
1
+ .fade-enter-active,
2
+ .fade-leave-active {
3
+ transition: opacity 0.25s linear;
4
+ }
5
+
6
+ .fade-enter-from,
7
+ .fade-leave-to {
8
+ opacity: 0;
9
+ }
@@ -0,0 +1,4 @@
1
+ import "./fade.css";
2
+ import "./slide.css";
3
+ import "./spring.css";
4
+ import "./zoom-in.css";