@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.
- package/README.md +42 -0
- package/dist/_functions.scss +6 -5
- package/dist/_mixins.scss +6 -5
- package/dist/_vars.scss +1 -16
- package/dist/normalize/index.js +1 -0
- package/dist/{normalize2.css → normalize/normalize.css} +0 -17
- package/dist/theme/component-css-vars.js +1 -1
- package/dist/theme/component-css-vars.js.map +1 -1
- package/dist/theme/helper.js +1 -8
- package/dist/theme/helper.js.map +1 -1
- package/dist/theme/index.d.ts +7 -9
- package/dist/theme/index.js +7 -9
- package/dist/{load-theme.d.ts → theme/load-theme.d.ts} +2 -2
- package/dist/{load-theme.js → theme/load-theme.js} +4 -4
- package/dist/theme/load-theme.js.map +1 -0
- package/dist/theme/presets/dark.d.ts +6 -0
- package/dist/theme/{dark.js → presets/dark.js} +1 -1
- package/dist/theme/presets/dark.js.map +1 -0
- package/dist/theme/{glass.d.ts → presets/glass.d.ts} +2 -3
- package/dist/theme/{glass.js → presets/glass.js} +1 -1
- package/dist/theme/presets/glass.js.map +1 -0
- package/dist/theme/{hero.d.ts → presets/hero.d.ts} +2 -3
- package/dist/theme/{hero.js → presets/hero.js} +1 -1
- package/dist/theme/presets/hero.js.map +1 -0
- package/dist/theme/presets/light.d.ts +7 -0
- package/dist/theme/{light.js → presets/light.js} +3 -3
- package/dist/theme/presets/light.js.map +1 -0
- package/dist/theme/{shadcn.d.ts → presets/shadcn.d.ts} +2 -3
- package/dist/theme/{shadcn.js → presets/shadcn.js} +1 -1
- package/dist/theme/presets/shadcn.js.map +1 -0
- package/dist/theme/ui-theme.js.map +1 -1
- package/dist/transitions/fade.css +9 -0
- package/dist/transitions/index.js +4 -0
- package/dist/transitions/slide.css +18 -0
- package/dist/transitions/spring.css +34 -0
- package/dist/transitions/zoom-in.css +57 -0
- package/package.json +11 -36
- package/src/_functions.scss +6 -5
- package/src/_mixins.scss +6 -5
- package/src/_vars.scss +1 -16
- package/{dist → src/normalize}/normalize.scss +2 -4
- package/src/theme/__test__/ui-theme.test.ts +1 -1
- package/src/theme/index.ts +6 -15
- package/src/{load-theme.ts → theme/load-theme.ts} +2 -3
- package/src/theme/presets/index.ts +5 -0
- package/src/theme/{light.ts → presets/light.ts} +2 -2
- package/dist/index.js +0 -0
- package/dist/load-theme.js.map +0 -1
- package/dist/normalize.js +0 -1
- package/dist/theme/component-css-vars.d.ts +0 -16
- package/dist/theme/dark.d.ts +0 -7
- package/dist/theme/dark.js.map +0 -1
- package/dist/theme/glass.js.map +0 -1
- package/dist/theme/helper.d.ts +0 -22
- package/dist/theme/hero.js.map +0 -1
- package/dist/theme/light.d.ts +0 -7
- package/dist/theme/light.js.map +0 -1
- package/dist/theme/shadcn.js.map +0 -1
- package/src/index.ts +0 -2
- package/src/normalize.scss +0 -63
- /package/dist/{index.d.ts → normalize/index.d.ts} +0 -0
- /package/dist/{anime → transitions}/fade.scss +0 -0
- /package/dist/{normalize.d.ts → transitions/index.d.ts} +0 -0
- /package/dist/{anime → transitions}/slide.scss +0 -0
- /package/dist/{anime → transitions}/spring.scss +0 -0
- /package/dist/{anime → transitions}/zoom-in.scss +0 -0
- /package/src/{normalize.ts → normalize/index.ts} +0 -0
- /package/src/theme/{dark.ts → presets/dark.ts} +0 -0
- /package/src/theme/{glass.ts → presets/glass.ts} +0 -0
- /package/src/theme/{hero.ts → presets/hero.ts} +0 -0
- /package/src/theme/{shadcn.ts → presets/shadcn.ts} +0 -0
- /package/src/{anime → transitions}/fade.scss +0 -0
- /package/src/{anime → transitions}/index.ts +0 -0
- /package/src/{anime → transitions}/slide.scss +0 -0
- /package/src/{anime → transitions}/spring.scss +0 -0
- /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
|
+
## 主题加载以及切换
|
package/dist/_functions.scss
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
@
|
|
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(
|
|
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(
|
|
19
|
+
@return var(--#{$namespace}-#{$component}-#{$property});
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
@return var(
|
|
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: '.' +
|
|
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
|
-
@
|
|
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
|
|
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
|
-
.#{
|
|
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: '.' +
|
|
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(
|
|
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 {
|
|
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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"}
|
package/dist/theme/helper.js
CHANGED
|
@@ -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 {
|
|
48
|
+
export { defineBySize, mixColor };
|
|
56
49
|
|
|
57
50
|
//# sourceMappingURL=helper.js.map
|
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,GAAG;CACjC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;
|
|
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"}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -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 {
|
|
7
|
-
import {
|
|
8
|
-
import { glassDarkTheme, glassLightTheme } from "./glass.js";
|
|
9
|
-
import {
|
|
10
|
-
|
|
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 };
|
package/dist/theme/index.js
CHANGED
|
@@ -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 {
|
|
7
|
-
import {
|
|
8
|
-
import { glassDarkTheme, glassLightTheme } from "./glass.js";
|
|
9
|
-
import { currentTheme, loadTheme, setTheme } from "
|
|
10
|
-
export {
|
|
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 "./
|
|
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 "./
|
|
2
|
-
import { lightTheme } from "./
|
|
3
|
-
import { darkTheme } from "./
|
|
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 @@
|
|
|
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"}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineBySize } from "
|
|
2
|
-
import { UITheme } from "
|
|
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"}
|
|
@@ -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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"}
|