@zl-ui-kit/theme 0.13.0 → 0.14.1

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 (14) hide show
  1. package/README.md +32 -5
  2. package/dist/index.d.ts +10 -4
  3. package/dist/index.js +33 -31
  4. package/package.json +1 -1
  5. package/src/_json/light.json +10 -10
  6. package/src/generated/theme-blue.css +8 -6
  7. package/src/generated/theme-dark.css +8 -6
  8. package/src/generated/theme-light.css +68 -66
  9. package/src/generated/theme-red-dark.css +8 -6
  10. package/src/generated/theme-red-light.css +8 -6
  11. package/src/generated/themes-data.json +30 -30
  12. package/src/generated/themes.css +100 -90
  13. package/src/runtime/api.ts +9 -3
  14. package/src/runtime/colors.ts +11 -5
package/README.md CHANGED
@@ -7,16 +7,43 @@ ZL UI 主题引擎（决策 D7）：内置 5 套主题（light/dark/red-light/re
7
7
 
8
8
  ## 快速上手
9
9
 
10
+ **① 用默认主题：只引一个 CSS，不写任何主题代码。**
11
+
10
12
  ```ts
11
- import '@zl-ui-kit/theme/themes.css' // 或按需 '@zl-ui-kit/theme/light'
12
- import { setTheme, defineTheme, useTheme } from '@zl-ui-kit/theme'
13
+ // main.ts —— 顺序不能倒：EP 样式在前、主题在后，否则被 EP 自带默认值压掉
14
+ import 'element-plus/dist/index.css'
15
+ import '@zl-ui-kit/theme/themes.css' // 5 套全量；只要默认一套可换成 '@zl-ui-kit/theme/light'
16
+ ```
17
+
18
+ 引入即得到内置 `light`：主色 `#3056D3`、hover `#6e89e0`、按下 `#2645a9`、控件圆角 `4px`；
19
+ 业务组件（`--zl-*`）与 Element Plus 控件（`--el-*`）共用同一组变量。
13
20
 
14
- setTheme('dark')
21
+ **② 要覆盖默认主题：在宿主侧一个入口文件里于启动时调用。**
15
22
 
16
- defineTheme({ name: 'brand', base: 'light', colors: { primary: '#722ED1' }, apply: true })
23
+ ```ts
24
+ import { defineTheme, enableThemePersistence, setTheme, useTheme } from '@zl-ui-kit/theme'
25
+
26
+ setTheme('dark') // 切内置主题：light / dark / red-light / red-dark / blue
27
+ enableThemePersistence() // 可选：刷新后保持（storage: zl-theme）
28
+
29
+ // 整套自定义：以内置主题为基线，只声明要改的量，色阶自动派生
30
+ defineTheme({
31
+ name: 'brand',
32
+ base: 'light',
33
+ colors: { primary: '#722ED1' }, // → --zl-primary-1..10 与 --el-color-primary-light-*/dark-2
34
+ tokens: { 'radius-base': '2px' }, // → 同时写 --el-border-radius-base，EP 控件跟着变
35
+ apply: true,
36
+ })
37
+
38
+ // 组件内响应式读当前主题（theme 是只读 ref，切换仍走上面那个 setTheme）
39
+ const { theme } = useTheme()
17
40
  ```
18
41
 
19
- **自定义主题完整指南见 `@zl-ui-kit/components` 的 README §10 主题定制**（L1 变量直覆 / L2 运行时 defineTheme / L3 构建时生成）。
42
+ 页面里只引用语义变量（`var(--el-color-primary)` / `var(--zl-*)`），不要再写色值字面量，
43
+ 也不要把主题色“回写”到另一个变量上 —— 取色单源才能避免组件一个色系、控件另一个色系。
44
+
45
+ **默认与定制的完整选型（L1 变量直覆 / L2 运行时 defineTheme / L3 构建时生成）、色阶契约与不生效排查见
46
+ `@zl-ui-kit/components` 的 README §10 主题定制**；可运行的实时版（含「当前实际生效值」读数）见 playground `/theme` 页。
20
47
 
21
48
  ## 入口
22
49
 
package/dist/index.d.ts CHANGED
@@ -83,11 +83,17 @@ interface ElColorShades {
83
83
  /**
84
84
  * EP 主色色阶：**light-n 中 n 越大越"靠背景"** ——
85
85
  * 浅色主题往白走（light-9 ≈ 混 90% 白），深色主题往黑走（light-9 ≈ 混 90% 黑）；
86
- * dark-2 则相反：浅色下更深（混黑），深色下更浅（混白）。
86
+ * dark-2 则相反：浅色下更深（混 20% 黑），深色下更浅（混 20% 白）。
87
87
  *
88
- * ⚠️ mix(c1, c2, w) 的 w 是"混入 c2 的比例"，与 light-n 的 n 方向相反，
89
- * 故必须用 (10 - i) * 10。写成 i * 10 会颠倒色阶，导致 el-tag / el-message /
90
- * el-alert 的 light-9 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
88
+ * ⚠️ mix(c1, c2, w) 的 w 是"混入 c2 的比例"，与 SCSS 内置 mix（权重作用于**第一个**颜色）
89
+ * 相反，因此两处的实参顺序都不能照抄 EP scss 的写法：
90
+ * - light-n：把背景放 c1、主色放 c2，权重用 (10 - i) * 10；写成 i * 10 会颠倒色阶，
91
+ * 导致 el-tag / el-message / el-alert 的 light-9 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
92
+ * - dark-2：把主色放 c1、背景放 c2，权重直接用 20；反写成 `mix('#000000', hex, 20)`
93
+ * 得到的是"80% 黑 + 20% 主色"的近黑色，EP 用它做 `--el-button-active-bg-color` 等
94
+ * 26 处按下态，按钮点下去会变成黑色块。
95
+ *
96
+ * 锚点：EP 默认主色 #409eff 必须派生出 dark-2 = #337ecc、light-3 = #79bbff。
91
97
  */
92
98
  declare function generateElShades(hex: string, isDark?: boolean): ElColorShades;
93
99
 
package/dist/index.js CHANGED
@@ -551,26 +551,26 @@ var themes_data_default = {
551
551
  "color-lime-7": "#6FA036",
552
552
  "color-lime-8": "#51841E",
553
553
  "color-lime-9": "#37680C",
554
- "color-modo-1": "#EFF5FE",
555
- "color-link-1": "#EFF5FE",
556
- "color-modo-10": "#183462",
557
- "color-link-10": "#183462",
558
- "color-modo-2": "#CCDFFD",
559
- "color-link-2": "#CCDFFD",
560
- "color-modo-3": "#A7C7FB",
561
- "color-link-3": "#A7C7FB",
562
- "color-modo-4": "#82AFF9",
563
- "color-link-4": "#82AFF9",
564
- "color-modo-5": "#5E99F8",
565
- "color-link-5": "#5E99F8",
566
- "color-modo-6": "#3B82F6",
567
- "color-link-6": "#3B82F6",
568
- "color-modo-7": "#306BCA",
569
- "color-link-7": "#306BCA",
570
- "color-modo-8": "#2858A7",
571
- "color-link-8": "#2858A7",
572
- "color-modo-9": "#204685",
573
- "color-link-9": "#204685",
554
+ "color-modo-1": "#ECF0FB",
555
+ "color-link-1": "#ECF0FB",
556
+ "color-modo-10": "#132254",
557
+ "color-link-10": "#132254",
558
+ "color-modo-2": "#C9D3F4",
559
+ "color-link-2": "#C9D3F4",
560
+ "color-modo-3": "#A2B3EB",
561
+ "color-link-3": "#A2B3EB",
562
+ "color-modo-4": "#7B93E3",
563
+ "color-link-4": "#7B93E3",
564
+ "color-modo-5": "#5574DB",
565
+ "color-link-5": "#5574DB",
566
+ "color-modo-6": "#3056D3",
567
+ "color-link-6": "#3056D3",
568
+ "color-modo-7": "#2746AD",
569
+ "color-link-7": "#2746AD",
570
+ "color-modo-8": "#213A8F",
571
+ "color-link-8": "#213A8F",
572
+ "color-modo-9": "#1A2E72",
573
+ "color-link-9": "#1A2E72",
574
574
  "color-magenta-1": "#FFE8F4",
575
575
  "color-magenta-10": "#4D0034",
576
576
  "color-magenta-2": "#F6C6E0",
@@ -617,16 +617,16 @@ var themes_data_default = {
617
617
  "color-pinkpurple-7": "#8727B0",
618
618
  "color-pinkpurple-8": "#66158F",
619
619
  "color-pinkpurple-9": "#48086E",
620
- "color-primary-1": "#EFF5FE",
621
- "color-primary-10": "#183462",
622
- "color-primary-2": "#CCDFFD",
623
- "color-primary-3": "#A7C7FB",
624
- "color-primary-4": "#82AFF9",
625
- "color-primary-5": "#5E99F8",
626
- "color-primary-6": "#3B82F6",
627
- "color-primary-7": "#306BCA",
628
- "color-primary-8": "#2858A7",
629
- "color-primary-9": "#204685",
620
+ "color-primary-1": "#ECF0FB",
621
+ "color-primary-10": "#132254",
622
+ "color-primary-2": "#C9D3F4",
623
+ "color-primary-3": "#A2B3EB",
624
+ "color-primary-4": "#7B93E3",
625
+ "color-primary-5": "#5574DB",
626
+ "color-primary-6": "#3056D3",
627
+ "color-primary-7": "#2746AD",
628
+ "color-primary-8": "#213A8F",
629
+ "color-primary-9": "#1A2E72",
630
630
  "color-purple-1": "#F3E8FF",
631
631
  "color-purple-10": "#0E004D",
632
632
  "color-purple-2": "#D9C4F3",
@@ -1165,7 +1165,7 @@ function generateElShades(hex, isDark = false) {
1165
1165
  for (let i = 1; i <= 9; i++) {
1166
1166
  shades[`light-${i}`] = mix(toBg, hex, (10 - i) * 10);
1167
1167
  }
1168
- shades["dark-2"] = mix(isDark ? "#ffffff" : "#000000", hex, 20);
1168
+ shades["dark-2"] = mix(hex, isDark ? "#ffffff" : "#000000", 20);
1169
1169
  return shades;
1170
1170
  }
1171
1171
 
@@ -1250,6 +1250,8 @@ function buildCssVars(resolved, themeName, baseName = themeName) {
1250
1250
  decls.push(`--el-color-black: ${isDark ? "#ffffff" : "#000000"};`);
1251
1251
  decls.push(`--el-mask-color: rgb(0, 0, 0, ${isDark ? "0.8" : "0.5"});`);
1252
1252
  decls.push(`color-scheme: ${isDark ? "dark" : "light"};`);
1253
+ decls.push(`--el-border-radius-base: ${get("radius-base")};`);
1254
+ decls.push(`--el-border-radius-small: ${get("radius-small")};`);
1253
1255
  const isPlainBase = baseName === "light" || baseName === "dark";
1254
1256
  decls.push(`--zl-menu-hover-bg: ${isPlainBase ? "var(--zl-fill-2)" : "rgba(255, 255, 255, 0.2)"};`);
1255
1257
  decls.push(`--zl-menu-text-color: ${isPlainBase ? "var(--zl-text-1)" : "var(--zl-white)"};`);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/theme",
3
- "version": "0.13.0",
3
+ "version": "0.14.1",
4
4
  "type": "module",
5
5
  "description": "ZL UI 主题引擎：内置 5 套主题（light/dark/red-light/red-dark/blue），--zl-* 业务变量 + --el-* Element Plus 变量三层体系，支持运行时自定义主题（defineTheme/setTheme）",
6
6
  "license": "MIT",
package/src/_json/light.json CHANGED
@@ -105,16 +105,16 @@
105
105
  "color-magenta-8": "#901C71",
106
106
  "color-magenta-9": "#6E0B57",
107
107
  "color-mask-bg": "rgba(36, 46, 67, 0.6)",
108
- "color-modo-1": "#EFF5FE",
109
- "color-modo-10": "#183462",
110
- "color-modo-2": "#CCDFFD",
111
- "color-modo-3": "#A7C7FB",
112
- "color-modo-4": "#82AFF9",
113
- "color-modo-5": "#5E99F8",
114
- "color-modo-6": "#3B82F6",
115
- "color-modo-7": "#306BCA",
116
- "color-modo-8": "#2858A7",
117
- "color-modo-9": "#204685",
108
+ "color-modo-1": "#ECF0FB",
109
+ "color-modo-10": "#132254",
110
+ "color-modo-2": "#C9D3F4",
111
+ "color-modo-3": "#A2B3EB",
112
+ "color-modo-4": "#7B93E3",
113
+ "color-modo-5": "#5574DB",
114
+ "color-modo-6": "#3056D3",
115
+ "color-modo-7": "#2746AD",
116
+ "color-modo-8": "#213A8F",
117
+ "color-modo-9": "#1A2E72",
118
118
  "color-neutral-1": "var(--color-gray-1)",
119
119
  "color-neutral-10": "var(--color-gray-10)",
120
120
  "color-neutral-2": "var(--color-gray-2)",
package/src/generated/theme-blue.css CHANGED
@@ -252,7 +252,7 @@ body[data-theme='blue'] {
252
252
  --el-color-primary-light-7: #c4dafc;
253
253
  --el-color-primary-light-8: #d8e6fd;
254
254
  --el-color-primary-light-9: #ebf3fe;
255
- --el-color-primary-dark-2: #0c1a31;
255
+ --el-color-primary-dark-2: #2f68c5;
256
256
  --el-color-success: #55BC8A;
257
257
  --el-color-success-light-1: #66c396;
258
258
  --el-color-success-light-2: #77c9a1;
@@ -263,7 +263,7 @@ body[data-theme='blue'] {
263
263
  --el-color-success-light-7: #ccebdc;
264
264
  --el-color-success-light-8: #ddf2e8;
265
265
  --el-color-success-light-9: #eef8f3;
266
- --el-color-success-dark-2: #11261c;
266
+ --el-color-success-dark-2: #44966e;
267
267
  --el-color-warning: #F5A623;
268
268
  --el-color-warning-light-1: #f6af39;
269
269
  --el-color-warning-light-2: #f7b84f;
@@ -274,7 +274,7 @@ body[data-theme='blue'] {
274
274
  --el-color-warning-light-7: #fce4bd;
275
275
  --el-color-warning-light-8: #fdedd3;
276
276
  --el-color-warning-light-9: #fef6e9;
277
- --el-color-warning-dark-2: #312107;
277
+ --el-color-warning-dark-2: #c4851c;
278
278
  --el-color-danger: #C3342F;
279
279
  --el-color-danger-light-1: #c94844;
280
280
  --el-color-danger-light-2: #cf5d59;
@@ -285,7 +285,7 @@ body[data-theme='blue'] {
285
285
  --el-color-danger-light-7: #edc2c1;
286
286
  --el-color-danger-light-8: #f3d6d5;
287
287
  --el-color-danger-light-9: #f9ebea;
288
- --el-color-danger-dark-2: #270a09;
288
+ --el-color-danger-dark-2: #9c2a26;
289
289
  --el-color-error: #C3342F;
290
290
  --el-color-error-light-1: #c94844;
291
291
  --el-color-error-light-2: #cf5d59;
@@ -296,7 +296,7 @@ body[data-theme='blue'] {
296
296
  --el-color-error-light-7: #edc2c1;
297
297
  --el-color-error-light-8: #f3d6d5;
298
298
  --el-color-error-light-9: #f9ebea;
299
- --el-color-error-dark-2: #270a09;
299
+ --el-color-error-dark-2: #9c2a26;
300
300
  --el-color-info: #79879C;
301
301
  --el-color-info-light-1: #8693a6;
302
302
  --el-color-info-light-2: #949fb0;
@@ -307,7 +307,7 @@ body[data-theme='blue'] {
307
307
  --el-color-info-light-7: #d7dbe1;
308
308
  --el-color-info-light-8: #e4e7eb;
309
309
  --el-color-info-light-9: #f2f3f5;
310
- --el-color-info-dark-2: #181b1f;
310
+ --el-color-info-dark-2: #616c7d;
311
311
  --el-text-color-primary: #242E43;
312
312
  --el-text-color-regular: #4D5E7D;
313
313
  --el-text-color-secondary: #79879C;
@@ -332,6 +332,8 @@ body[data-theme='blue'] {
332
332
  --el-color-black: #000000;
333
333
  --el-mask-color: rgb(0, 0, 0, 0.5);
334
334
  color-scheme: light;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
335
337
  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
336
338
  --zl-menu-text-color: var(--zl-white);
337
339
  --zl-menu-trigger-arrow-color: #306bca;
package/src/generated/theme-dark.css CHANGED
@@ -252,7 +252,7 @@ body[data-theme='dark'] {
252
252
  --el-color-primary-light-7: #222f49;
253
253
  --el-color-primary-light-8: #171f31;
254
254
  --el-color-primary-light-9: #0b1018;
255
- --el-color-primary-dark-2: #e3ebfd;
255
+ --el-color-primary-dark-2: #8eb1f6;
256
256
  --el-color-success: #70C69A;
257
257
  --el-color-success-light-1: #65b28b;
258
258
  --el-color-success-light-2: #5a9e7b;
@@ -263,7 +263,7 @@ body[data-theme='dark'] {
263
263
  --el-color-success-light-7: #223b2e;
264
264
  --el-color-success-light-8: #16281f;
265
265
  --el-color-success-light-9: #0b140f;
266
- --el-color-success-dark-2: #e2f4eb;
266
+ --el-color-success-dark-2: #8dd1ae;
267
267
  --el-color-warning: #E7B962;
268
268
  --el-color-warning-light-1: #d0a758;
269
269
  --el-color-warning-light-2: #b9944e;
@@ -274,7 +274,7 @@ body[data-theme='dark'] {
274
274
  --el-color-warning-light-7: #45381d;
275
275
  --el-color-warning-light-8: #2e2514;
276
276
  --el-color-warning-light-9: #17130a;
277
- --el-color-warning-dark-2: #faf1e0;
277
+ --el-color-warning-dark-2: #ecc781;
278
278
  --el-color-danger: #CF5951;
279
279
  --el-color-danger-light-1: #ba5049;
280
280
  --el-color-danger-light-2: #a64741;
@@ -285,7 +285,7 @@ body[data-theme='dark'] {
285
285
  --el-color-danger-light-7: #3e1b18;
286
286
  --el-color-danger-light-8: #291210;
287
287
  --el-color-danger-light-9: #150908;
288
- --el-color-danger-dark-2: #f5dedc;
288
+ --el-color-danger-dark-2: #d97a74;
289
289
  --el-color-error: #CF5951;
290
290
  --el-color-error-light-1: #ba5049;
291
291
  --el-color-error-light-2: #a64741;
@@ -296,7 +296,7 @@ body[data-theme='dark'] {
296
296
  --el-color-error-light-7: #3e1b18;
297
297
  --el-color-error-light-8: #291210;
298
298
  --el-color-error-light-9: #150908;
299
- --el-color-error-dark-2: #f5dedc;
299
+ --el-color-error-dark-2: #d97a74;
300
300
  --el-color-info: #95A6BA;
301
301
  --el-color-info-light-1: #8695a7;
302
302
  --el-color-info-light-2: #778595;
@@ -307,7 +307,7 @@ body[data-theme='dark'] {
307
307
  --el-color-info-light-7: #2d3238;
308
308
  --el-color-info-light-8: #1e2125;
309
309
  --el-color-info-light-9: #0f1113;
310
- --el-color-info-dark-2: #eaedf1;
310
+ --el-color-info-dark-2: #aab8c8;
311
311
  --el-text-color-primary: #FFFFFF;
312
312
  --el-text-color-regular: rgba(255,255,255,0.7);
313
313
  --el-text-color-secondary: rgba(255,255,255,0.5);
@@ -332,6 +332,8 @@ body[data-theme='dark'] {
332
332
  --el-color-black: #ffffff;
333
333
  --el-mask-color: rgb(0, 0, 0, 0.8);
334
334
  color-scheme: dark;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
335
337
  --zl-menu-hover-bg: var(--zl-fill-2);
336
338
  --zl-menu-text-color: var(--zl-text-1);
337
339
  --zl-menu-trigger-arrow-color: #253044;
package/src/generated/theme-light.css CHANGED
@@ -99,26 +99,26 @@ body {
99
99
  --zl-lime-7: #6fa036;
100
100
  --zl-lime-8: #51841e;
101
101
  --zl-lime-9: #37680c;
102
- --zl-modo-1: #eff5fe;
103
- --zl-link-1: #eff5fe;
104
- --zl-modo-10: #183462;
105
- --zl-link-10: #183462;
106
- --zl-modo-2: #ccdffd;
107
- --zl-link-2: #ccdffd;
108
- --zl-modo-3: #a7c7fb;
109
- --zl-link-3: #a7c7fb;
110
- --zl-modo-4: #82aff9;
111
- --zl-link-4: #82aff9;
112
- --zl-modo-5: #5e99f8;
113
- --zl-link-5: #5e99f8;
114
- --zl-modo-6: #3b82f6;
115
- --zl-link-6: #3b82f6;
116
- --zl-modo-7: #306bca;
117
- --zl-link-7: #306bca;
118
- --zl-modo-8: #2858a7;
119
- --zl-link-8: #2858a7;
120
- --zl-modo-9: #204685;
121
- --zl-link-9: #204685;
102
+ --zl-modo-1: #ecf0fb;
103
+ --zl-link-1: #ecf0fb;
104
+ --zl-modo-10: #132254;
105
+ --zl-link-10: #132254;
106
+ --zl-modo-2: #c9d3f4;
107
+ --zl-link-2: #c9d3f4;
108
+ --zl-modo-3: #a2b3eb;
109
+ --zl-link-3: #a2b3eb;
110
+ --zl-modo-4: #7b93e3;
111
+ --zl-link-4: #7b93e3;
112
+ --zl-modo-5: #5574db;
113
+ --zl-link-5: #5574db;
114
+ --zl-modo-6: #3056d3;
115
+ --zl-link-6: #3056d3;
116
+ --zl-modo-7: #2746ad;
117
+ --zl-link-7: #2746ad;
118
+ --zl-modo-8: #213a8f;
119
+ --zl-link-8: #213a8f;
120
+ --zl-modo-9: #1a2e72;
121
+ --zl-link-9: #1a2e72;
122
122
  --zl-magenta-1: #ffe8f4;
123
123
  --zl-magenta-10: #4d0034;
124
124
  --zl-magenta-2: #f6c6e0;
@@ -165,16 +165,16 @@ body {
165
165
  --zl-pinkpurple-7: #8727b0;
166
166
  --zl-pinkpurple-8: #66158f;
167
167
  --zl-pinkpurple-9: #48086e;
168
- --zl-primary-1: #eff5fe;
169
- --zl-primary-10: #183462;
170
- --zl-primary-2: #ccdffd;
171
- --zl-primary-3: #a7c7fb;
172
- --zl-primary-4: #82aff9;
173
- --zl-primary-5: #5e99f8;
174
- --zl-primary-6: #3b82f6;
175
- --zl-primary-7: #306bca;
176
- --zl-primary-8: #2858a7;
177
- --zl-primary-9: #204685;
168
+ --zl-primary-1: #ecf0fb;
169
+ --zl-primary-10: #132254;
170
+ --zl-primary-2: #c9d3f4;
171
+ --zl-primary-3: #a2b3eb;
172
+ --zl-primary-4: #7b93e3;
173
+ --zl-primary-5: #5574db;
174
+ --zl-primary-6: #3056d3;
175
+ --zl-primary-7: #2746ad;
176
+ --zl-primary-8: #213a8f;
177
+ --zl-primary-9: #1a2e72;
178
178
  --zl-purple-1: #f3e8ff;
179
179
  --zl-purple-10: #0e004d;
180
180
  --zl-purple-2: #d9c4f3;
@@ -222,37 +222,37 @@ body {
222
222
  --zl-yellow-7: #c7be41;
223
223
  --zl-yellow-8: #9e9222;
224
224
  --zl-yellow-9: #75670d;
225
- --zl-primary-1: #eff5fe;
226
- --zl-link-1: #eff5fe;
227
- --zl-primary-2: #ccdffd;
228
- --zl-link-2: #ccdffd;
229
- --zl-primary-3: #a7c7fb;
230
- --zl-link-3: #a7c7fb;
231
- --zl-primary-4: #82aff9;
232
- --zl-link-4: #82aff9;
233
- --zl-primary-5: #5e99f8;
234
- --zl-link-5: #5e99f8;
235
- --zl-primary-6: #3b82f6;
236
- --zl-link-6: #3b82f6;
237
- --zl-primary-7: #306bca;
238
- --zl-link-7: #306bca;
239
- --zl-primary-8: #2858a7;
240
- --zl-link-8: #2858a7;
241
- --zl-primary-9: #204685;
242
- --zl-link-9: #204685;
243
- --zl-primary-10: #183462;
244
- --zl-link-10: #183462;
245
- --el-color-primary: #3B82F6;
246
- --el-color-primary-light-1: #4f8ff7;
247
- --el-color-primary-light-2: #629bf8;
248
- --el-color-primary-light-3: #76a8f9;
249
- --el-color-primary-light-4: #89b4fa;
250
- --el-color-primary-light-5: #9dc1fb;
251
- --el-color-primary-light-6: #b1cdfb;
252
- --el-color-primary-light-7: #c4dafc;
253
- --el-color-primary-light-8: #d8e6fd;
254
- --el-color-primary-light-9: #ebf3fe;
255
- --el-color-primary-dark-2: #0c1a31;
225
+ --zl-primary-1: #ecf0fb;
226
+ --zl-link-1: #ecf0fb;
227
+ --zl-primary-2: #c9d3f4;
228
+ --zl-link-2: #c9d3f4;
229
+ --zl-primary-3: #a2b3eb;
230
+ --zl-link-3: #a2b3eb;
231
+ --zl-primary-4: #7b93e3;
232
+ --zl-link-4: #7b93e3;
233
+ --zl-primary-5: #5574db;
234
+ --zl-link-5: #5574db;
235
+ --zl-primary-6: #3056d3;
236
+ --zl-link-6: #3056d3;
237
+ --zl-primary-7: #2746ad;
238
+ --zl-link-7: #2746ad;
239
+ --zl-primary-8: #213a8f;
240
+ --zl-link-8: #213a8f;
241
+ --zl-primary-9: #1a2e72;
242
+ --zl-link-9: #1a2e72;
243
+ --zl-primary-10: #132254;
244
+ --zl-link-10: #132254;
245
+ --el-color-primary: #3056D3;
246
+ --el-color-primary-light-1: #4567d7;
247
+ --el-color-primary-light-2: #5978dc;
248
+ --el-color-primary-light-3: #6e89e0;
249
+ --el-color-primary-light-4: #839ae5;
250
+ --el-color-primary-light-5: #98abe9;
251
+ --el-color-primary-light-6: #acbbed;
252
+ --el-color-primary-light-7: #c1ccf2;
253
+ --el-color-primary-light-8: #d6ddf6;
254
+ --el-color-primary-light-9: #eaeefb;
255
+ --el-color-primary-dark-2: #2645a9;
256
256
  --el-color-success: #55BC8A;
257
257
  --el-color-success-light-1: #66c396;
258
258
  --el-color-success-light-2: #77c9a1;
@@ -263,7 +263,7 @@ body {
263
263
  --el-color-success-light-7: #ccebdc;
264
264
  --el-color-success-light-8: #ddf2e8;
265
265
  --el-color-success-light-9: #eef8f3;
266
- --el-color-success-dark-2: #11261c;
266
+ --el-color-success-dark-2: #44966e;
267
267
  --el-color-warning: #F5A623;
268
268
  --el-color-warning-light-1: #f6af39;
269
269
  --el-color-warning-light-2: #f7b84f;
@@ -274,7 +274,7 @@ body {
274
274
  --el-color-warning-light-7: #fce4bd;
275
275
  --el-color-warning-light-8: #fdedd3;
276
276
  --el-color-warning-light-9: #fef6e9;
277
- --el-color-warning-dark-2: #312107;
277
+ --el-color-warning-dark-2: #c4851c;
278
278
  --el-color-danger: #C3342F;
279
279
  --el-color-danger-light-1: #c94844;
280
280
  --el-color-danger-light-2: #cf5d59;
@@ -285,7 +285,7 @@ body {
285
285
  --el-color-danger-light-7: #edc2c1;
286
286
  --el-color-danger-light-8: #f3d6d5;
287
287
  --el-color-danger-light-9: #f9ebea;
288
- --el-color-danger-dark-2: #270a09;
288
+ --el-color-danger-dark-2: #9c2a26;
289
289
  --el-color-error: #C3342F;
290
290
  --el-color-error-light-1: #c94844;
291
291
  --el-color-error-light-2: #cf5d59;
@@ -296,7 +296,7 @@ body {
296
296
  --el-color-error-light-7: #edc2c1;
297
297
  --el-color-error-light-8: #f3d6d5;
298
298
  --el-color-error-light-9: #f9ebea;
299
- --el-color-error-dark-2: #270a09;
299
+ --el-color-error-dark-2: #9c2a26;
300
300
  --el-color-info: #79879C;
301
301
  --el-color-info-light-1: #8693a6;
302
302
  --el-color-info-light-2: #949fb0;
@@ -307,7 +307,7 @@ body {
307
307
  --el-color-info-light-7: #d7dbe1;
308
308
  --el-color-info-light-8: #e4e7eb;
309
309
  --el-color-info-light-9: #f2f3f5;
310
- --el-color-info-dark-2: #181b1f;
310
+ --el-color-info-dark-2: #616c7d;
311
311
  --el-text-color-primary: #242E43;
312
312
  --el-text-color-regular: #4D5E7D;
313
313
  --el-text-color-secondary: #79879C;
@@ -332,6 +332,8 @@ body {
332
332
  --el-color-black: #000000;
333
333
  --el-mask-color: rgb(0, 0, 0, 0.5);
334
334
  color-scheme: light;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
335
337
  --zl-menu-hover-bg: var(--zl-fill-2);
336
338
  --zl-menu-text-color: var(--zl-text-1);
337
339
  --zl-menu-trigger-arrow-color: #f6fafc;
package/src/generated/theme-red-dark.css CHANGED
@@ -252,7 +252,7 @@ body[data-theme='red-dark'] {
252
252
  --el-color-primary-light-7: #470b12;
253
253
  --el-color-primary-light-8: #2f070c;
254
254
  --el-color-primary-light-9: #180406;
255
- --el-color-primary-dark-2: #fbd3d8;
255
+ --el-color-primary-dark-2: #ef4f64;
256
256
  --el-color-success: #70C69A;
257
257
  --el-color-success-light-1: #65b28b;
258
258
  --el-color-success-light-2: #5a9e7b;
@@ -263,7 +263,7 @@ body[data-theme='red-dark'] {
263
263
  --el-color-success-light-7: #223b2e;
264
264
  --el-color-success-light-8: #16281f;
265
265
  --el-color-success-light-9: #0b140f;
266
- --el-color-success-dark-2: #e2f4eb;
266
+ --el-color-success-dark-2: #8dd1ae;
267
267
  --el-color-warning: #E7B962;
268
268
  --el-color-warning-light-1: #d0a758;
269
269
  --el-color-warning-light-2: #b9944e;
@@ -274,7 +274,7 @@ body[data-theme='red-dark'] {
274
274
  --el-color-warning-light-7: #45381d;
275
275
  --el-color-warning-light-8: #2e2514;
276
276
  --el-color-warning-light-9: #17130a;
277
- --el-color-warning-dark-2: #faf1e0;
277
+ --el-color-warning-dark-2: #ecc781;
278
278
  --el-color-danger: #FF7926;
279
279
  --el-color-danger-light-1: #e66d22;
280
280
  --el-color-danger-light-2: #cc611e;
@@ -285,7 +285,7 @@ body[data-theme='red-dark'] {
285
285
  --el-color-danger-light-7: #4d240b;
286
286
  --el-color-danger-light-8: #331808;
287
287
  --el-color-danger-light-9: #1a0c04;
288
- --el-color-danger-dark-2: #ffe4d4;
288
+ --el-color-danger-dark-2: #ff9451;
289
289
  --el-color-error: #FF7926;
290
290
  --el-color-error-light-1: #e66d22;
291
291
  --el-color-error-light-2: #cc611e;
@@ -296,7 +296,7 @@ body[data-theme='red-dark'] {
296
296
  --el-color-error-light-7: #4d240b;
297
297
  --el-color-error-light-8: #331808;
298
298
  --el-color-error-light-9: #1a0c04;
299
- --el-color-error-dark-2: #ffe4d4;
299
+ --el-color-error-dark-2: #ff9451;
300
300
  --el-color-info: #95A6BA;
301
301
  --el-color-info-light-1: #8695a7;
302
302
  --el-color-info-light-2: #778595;
@@ -307,7 +307,7 @@ body[data-theme='red-dark'] {
307
307
  --el-color-info-light-7: #2d3238;
308
308
  --el-color-info-light-8: #1e2125;
309
309
  --el-color-info-light-9: #0f1113;
310
- --el-color-info-dark-2: #eaedf1;
310
+ --el-color-info-dark-2: #aab8c8;
311
311
  --el-text-color-primary: #FFFFFF;
312
312
  --el-text-color-regular: rgba(255,255,255,0.7);
313
313
  --el-text-color-secondary: rgba(255,255,255,0.5);
@@ -332,6 +332,8 @@ body[data-theme='red-dark'] {
332
332
  --el-color-black: #ffffff;
333
333
  --el-mask-color: rgb(0, 0, 0, 0.8);
334
334
  color-scheme: dark;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
335
337
  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
336
338
  --zl-menu-text-color: var(--zl-white);
337
339
  --zl-menu-trigger-arrow-color: #263247;
package/src/generated/theme-red-light.css CHANGED
@@ -252,7 +252,7 @@ body[data-theme='red-light'] {
252
252
  --el-color-primary-light-7: #f8b3be;
253
253
  --el-color-primary-light-8: #faccd4;
254
254
  --el-color-primary-light-9: #fde6e9;
255
- --el-color-primary-dark-2: #2e0008;
255
+ --el-color-primary-dark-2: #b8001f;
256
256
  --el-color-success: #55BC8A;
257
257
  --el-color-success-light-1: #66c396;
258
258
  --el-color-success-light-2: #77c9a1;
@@ -263,7 +263,7 @@ body[data-theme='red-light'] {
263
263
  --el-color-success-light-7: #ccebdc;
264
264
  --el-color-success-light-8: #ddf2e8;
265
265
  --el-color-success-light-9: #eef8f3;
266
- --el-color-success-dark-2: #11261c;
266
+ --el-color-success-dark-2: #44966e;
267
267
  --el-color-warning: #F5A623;
268
268
  --el-color-warning-light-1: #f6af39;
269
269
  --el-color-warning-light-2: #f7b84f;
@@ -274,7 +274,7 @@ body[data-theme='red-light'] {
274
274
  --el-color-warning-light-7: #fce4bd;
275
275
  --el-color-warning-light-8: #fdedd3;
276
276
  --el-color-warning-light-9: #fef6e9;
277
- --el-color-warning-dark-2: #312107;
277
+ --el-color-warning-dark-2: #c4851c;
278
278
  --el-color-danger: #FF5900;
279
279
  --el-color-danger-light-1: #ff6a19;
280
280
  --el-color-danger-light-2: #ff7a33;
@@ -285,7 +285,7 @@ body[data-theme='red-light'] {
285
285
  --el-color-danger-light-7: #ffcdb3;
286
286
  --el-color-danger-light-8: #ffdecc;
287
287
  --el-color-danger-light-9: #ffeee6;
288
- --el-color-danger-dark-2: #331200;
288
+ --el-color-danger-dark-2: #cc4700;
289
289
  --el-color-error: #FF5900;
290
290
  --el-color-error-light-1: #ff6a19;
291
291
  --el-color-error-light-2: #ff7a33;
@@ -296,7 +296,7 @@ body[data-theme='red-light'] {
296
296
  --el-color-error-light-7: #ffcdb3;
297
297
  --el-color-error-light-8: #ffdecc;
298
298
  --el-color-error-light-9: #ffeee6;
299
- --el-color-error-dark-2: #331200;
299
+ --el-color-error-dark-2: #cc4700;
300
300
  --el-color-info: #79879C;
301
301
  --el-color-info-light-1: #8693a6;
302
302
  --el-color-info-light-2: #949fb0;
@@ -307,7 +307,7 @@ body[data-theme='red-light'] {
307
307
  --el-color-info-light-7: #d7dbe1;
308
308
  --el-color-info-light-8: #e4e7eb;
309
309
  --el-color-info-light-9: #f2f3f5;
310
- --el-color-info-dark-2: #181b1f;
310
+ --el-color-info-dark-2: #616c7d;
311
311
  --el-text-color-primary: #242E43;
312
312
  --el-text-color-regular: #4D5E7D;
313
313
  --el-text-color-secondary: #79879C;
@@ -332,6 +332,8 @@ body[data-theme='red-light'] {
332
332
  --el-color-black: #000000;
333
333
  --el-mask-color: rgb(0, 0, 0, 0.5);
334
334
  color-scheme: light;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
335
337
  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
336
338
  --zl-menu-text-color: var(--zl-white);
337
339
  --zl-menu-trigger-arrow-color: #a51e1e;
package/src/generated/themes-data.json CHANGED
@@ -547,26 +547,26 @@
547
547
  "color-lime-7": "#6FA036",
548
548
  "color-lime-8": "#51841E",
549
549
  "color-lime-9": "#37680C",
550
- "color-modo-1": "#EFF5FE",
551
- "color-link-1": "#EFF5FE",
552
- "color-modo-10": "#183462",
553
- "color-link-10": "#183462",
554
- "color-modo-2": "#CCDFFD",
555
- "color-link-2": "#CCDFFD",
556
- "color-modo-3": "#A7C7FB",
557
- "color-link-3": "#A7C7FB",
558
- "color-modo-4": "#82AFF9",
559
- "color-link-4": "#82AFF9",
560
- "color-modo-5": "#5E99F8",
561
- "color-link-5": "#5E99F8",
562
- "color-modo-6": "#3B82F6",
563
- "color-link-6": "#3B82F6",
564
- "color-modo-7": "#306BCA",
565
- "color-link-7": "#306BCA",
566
- "color-modo-8": "#2858A7",
567
- "color-link-8": "#2858A7",
568
- "color-modo-9": "#204685",
569
- "color-link-9": "#204685",
550
+ "color-modo-1": "#ECF0FB",
551
+ "color-link-1": "#ECF0FB",
552
+ "color-modo-10": "#132254",
553
+ "color-link-10": "#132254",
554
+ "color-modo-2": "#C9D3F4",
555
+ "color-link-2": "#C9D3F4",
556
+ "color-modo-3": "#A2B3EB",
557
+ "color-link-3": "#A2B3EB",
558
+ "color-modo-4": "#7B93E3",
559
+ "color-link-4": "#7B93E3",
560
+ "color-modo-5": "#5574DB",
561
+ "color-link-5": "#5574DB",
562
+ "color-modo-6": "#3056D3",
563
+ "color-link-6": "#3056D3",
564
+ "color-modo-7": "#2746AD",
565
+ "color-link-7": "#2746AD",
566
+ "color-modo-8": "#213A8F",
567
+ "color-link-8": "#213A8F",
568
+ "color-modo-9": "#1A2E72",
569
+ "color-link-9": "#1A2E72",
570
570
  "color-magenta-1": "#FFE8F4",
571
571
  "color-magenta-10": "#4D0034",
572
572
  "color-magenta-2": "#F6C6E0",
@@ -613,16 +613,16 @@
613
613
  "color-pinkpurple-7": "#8727B0",
614
614
  "color-pinkpurple-8": "#66158F",
615
615
  "color-pinkpurple-9": "#48086E",
616
- "color-primary-1": "#EFF5FE",
617
- "color-primary-10": "#183462",
618
- "color-primary-2": "#CCDFFD",
619
- "color-primary-3": "#A7C7FB",
620
- "color-primary-4": "#82AFF9",
621
- "color-primary-5": "#5E99F8",
622
- "color-primary-6": "#3B82F6",
623
- "color-primary-7": "#306BCA",
624
- "color-primary-8": "#2858A7",
625
- "color-primary-9": "#204685",
616
+ "color-primary-1": "#ECF0FB",
617
+ "color-primary-10": "#132254",
618
+ "color-primary-2": "#C9D3F4",
619
+ "color-primary-3": "#A2B3EB",
620
+ "color-primary-4": "#7B93E3",
621
+ "color-primary-5": "#5574DB",
622
+ "color-primary-6": "#3056D3",
623
+ "color-primary-7": "#2746AD",
624
+ "color-primary-8": "#213A8F",
625
+ "color-primary-9": "#1A2E72",
626
626
  "color-purple-1": "#F3E8FF",
627
627
  "color-purple-10": "#0E004D",
628
628
  "color-purple-2": "#D9C4F3",
package/src/generated/themes.css CHANGED
@@ -252,7 +252,7 @@ body[data-theme='blue'] {
252
252
  --el-color-primary-light-7: #c4dafc;
253
253
  --el-color-primary-light-8: #d8e6fd;
254
254
  --el-color-primary-light-9: #ebf3fe;
255
- --el-color-primary-dark-2: #0c1a31;
255
+ --el-color-primary-dark-2: #2f68c5;
256
256
  --el-color-success: #55BC8A;
257
257
  --el-color-success-light-1: #66c396;
258
258
  --el-color-success-light-2: #77c9a1;
@@ -263,7 +263,7 @@ body[data-theme='blue'] {
263
263
  --el-color-success-light-7: #ccebdc;
264
264
  --el-color-success-light-8: #ddf2e8;
265
265
  --el-color-success-light-9: #eef8f3;
266
- --el-color-success-dark-2: #11261c;
266
+ --el-color-success-dark-2: #44966e;
267
267
  --el-color-warning: #F5A623;
268
268
  --el-color-warning-light-1: #f6af39;
269
269
  --el-color-warning-light-2: #f7b84f;
@@ -274,7 +274,7 @@ body[data-theme='blue'] {
274
274
  --el-color-warning-light-7: #fce4bd;
275
275
  --el-color-warning-light-8: #fdedd3;
276
276
  --el-color-warning-light-9: #fef6e9;
277
- --el-color-warning-dark-2: #312107;
277
+ --el-color-warning-dark-2: #c4851c;
278
278
  --el-color-danger: #C3342F;
279
279
  --el-color-danger-light-1: #c94844;
280
280
  --el-color-danger-light-2: #cf5d59;
@@ -285,7 +285,7 @@ body[data-theme='blue'] {
285
285
  --el-color-danger-light-7: #edc2c1;
286
286
  --el-color-danger-light-8: #f3d6d5;
287
287
  --el-color-danger-light-9: #f9ebea;
288
- --el-color-danger-dark-2: #270a09;
288
+ --el-color-danger-dark-2: #9c2a26;
289
289
  --el-color-error: #C3342F;
290
290
  --el-color-error-light-1: #c94844;
291
291
  --el-color-error-light-2: #cf5d59;
@@ -296,7 +296,7 @@ body[data-theme='blue'] {
296
296
  --el-color-error-light-7: #edc2c1;
297
297
  --el-color-error-light-8: #f3d6d5;
298
298
  --el-color-error-light-9: #f9ebea;
299
- --el-color-error-dark-2: #270a09;
299
+ --el-color-error-dark-2: #9c2a26;
300
300
  --el-color-info: #79879C;
301
301
  --el-color-info-light-1: #8693a6;
302
302
  --el-color-info-light-2: #949fb0;
@@ -307,7 +307,7 @@ body[data-theme='blue'] {
307
307
  --el-color-info-light-7: #d7dbe1;
308
308
  --el-color-info-light-8: #e4e7eb;
309
309
  --el-color-info-light-9: #f2f3f5;
310
- --el-color-info-dark-2: #181b1f;
310
+ --el-color-info-dark-2: #616c7d;
311
311
  --el-text-color-primary: #242E43;
312
312
  --el-text-color-regular: #4D5E7D;
313
313
  --el-text-color-secondary: #79879C;
@@ -332,6 +332,8 @@ body[data-theme='blue'] {
332
332
  --el-color-black: #000000;
333
333
  --el-mask-color: rgb(0, 0, 0, 0.5);
334
334
  color-scheme: light;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
335
337
  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
336
338
  --zl-menu-text-color: var(--zl-white);
337
339
  --zl-menu-trigger-arrow-color: #306bca;
@@ -602,7 +604,7 @@ body[data-theme='dark'] {
602
604
  --el-color-primary-light-7: #222f49;
603
605
  --el-color-primary-light-8: #171f31;
604
606
  --el-color-primary-light-9: #0b1018;
605
- --el-color-primary-dark-2: #e3ebfd;
607
+ --el-color-primary-dark-2: #8eb1f6;
606
608
  --el-color-success: #70C69A;
607
609
  --el-color-success-light-1: #65b28b;
608
610
  --el-color-success-light-2: #5a9e7b;
@@ -613,7 +615,7 @@ body[data-theme='dark'] {
613
615
  --el-color-success-light-7: #223b2e;
614
616
  --el-color-success-light-8: #16281f;
615
617
  --el-color-success-light-9: #0b140f;
616
- --el-color-success-dark-2: #e2f4eb;
618
+ --el-color-success-dark-2: #8dd1ae;
617
619
  --el-color-warning: #E7B962;
618
620
  --el-color-warning-light-1: #d0a758;
619
621
  --el-color-warning-light-2: #b9944e;
@@ -624,7 +626,7 @@ body[data-theme='dark'] {
624
626
  --el-color-warning-light-7: #45381d;
625
627
  --el-color-warning-light-8: #2e2514;
626
628
  --el-color-warning-light-9: #17130a;
627
- --el-color-warning-dark-2: #faf1e0;
629
+ --el-color-warning-dark-2: #ecc781;
628
630
  --el-color-danger: #CF5951;
629
631
  --el-color-danger-light-1: #ba5049;
630
632
  --el-color-danger-light-2: #a64741;
@@ -635,7 +637,7 @@ body[data-theme='dark'] {
635
637
  --el-color-danger-light-7: #3e1b18;
636
638
  --el-color-danger-light-8: #291210;
637
639
  --el-color-danger-light-9: #150908;
638
- --el-color-danger-dark-2: #f5dedc;
640
+ --el-color-danger-dark-2: #d97a74;
639
641
  --el-color-error: #CF5951;
640
642
  --el-color-error-light-1: #ba5049;
641
643
  --el-color-error-light-2: #a64741;
@@ -646,7 +648,7 @@ body[data-theme='dark'] {
646
648
  --el-color-error-light-7: #3e1b18;
647
649
  --el-color-error-light-8: #291210;
648
650
  --el-color-error-light-9: #150908;
649
- --el-color-error-dark-2: #f5dedc;
651
+ --el-color-error-dark-2: #d97a74;
650
652
  --el-color-info: #95A6BA;
651
653
  --el-color-info-light-1: #8695a7;
652
654
  --el-color-info-light-2: #778595;
@@ -657,7 +659,7 @@ body[data-theme='dark'] {
657
659
  --el-color-info-light-7: #2d3238;
658
660
  --el-color-info-light-8: #1e2125;
659
661
  --el-color-info-light-9: #0f1113;
660
- --el-color-info-dark-2: #eaedf1;
662
+ --el-color-info-dark-2: #aab8c8;
661
663
  --el-text-color-primary: #FFFFFF;
662
664
  --el-text-color-regular: rgba(255,255,255,0.7);
663
665
  --el-text-color-secondary: rgba(255,255,255,0.5);
@@ -682,6 +684,8 @@ body[data-theme='dark'] {
682
684
  --el-color-black: #ffffff;
683
685
  --el-mask-color: rgb(0, 0, 0, 0.8);
684
686
  color-scheme: dark;
687
+ --el-border-radius-base: 4px;
688
+ --el-border-radius-small: 2px;
685
689
  --zl-menu-hover-bg: var(--zl-fill-2);
686
690
  --zl-menu-text-color: var(--zl-text-1);
687
691
  --zl-menu-trigger-arrow-color: #253044;
@@ -799,26 +803,26 @@ body {
799
803
  --zl-lime-7: #6fa036;
800
804
  --zl-lime-8: #51841e;
801
805
  --zl-lime-9: #37680c;
802
- --zl-modo-1: #eff5fe;
803
- --zl-link-1: #eff5fe;
804
- --zl-modo-10: #183462;
805
- --zl-link-10: #183462;
806
- --zl-modo-2: #ccdffd;
807
- --zl-link-2: #ccdffd;
808
- --zl-modo-3: #a7c7fb;
809
- --zl-link-3: #a7c7fb;
810
- --zl-modo-4: #82aff9;
811
- --zl-link-4: #82aff9;
812
- --zl-modo-5: #5e99f8;
813
- --zl-link-5: #5e99f8;
814
- --zl-modo-6: #3b82f6;
815
- --zl-link-6: #3b82f6;
816
- --zl-modo-7: #306bca;
817
- --zl-link-7: #306bca;
818
- --zl-modo-8: #2858a7;
819
- --zl-link-8: #2858a7;
820
- --zl-modo-9: #204685;
821
- --zl-link-9: #204685;
806
+ --zl-modo-1: #ecf0fb;
807
+ --zl-link-1: #ecf0fb;
808
+ --zl-modo-10: #132254;
809
+ --zl-link-10: #132254;
810
+ --zl-modo-2: #c9d3f4;
811
+ --zl-link-2: #c9d3f4;
812
+ --zl-modo-3: #a2b3eb;
813
+ --zl-link-3: #a2b3eb;
814
+ --zl-modo-4: #7b93e3;
815
+ --zl-link-4: #7b93e3;
816
+ --zl-modo-5: #5574db;
817
+ --zl-link-5: #5574db;
818
+ --zl-modo-6: #3056d3;
819
+ --zl-link-6: #3056d3;
820
+ --zl-modo-7: #2746ad;
821
+ --zl-link-7: #2746ad;
822
+ --zl-modo-8: #213a8f;
823
+ --zl-link-8: #213a8f;
824
+ --zl-modo-9: #1a2e72;
825
+ --zl-link-9: #1a2e72;
822
826
  --zl-magenta-1: #ffe8f4;
823
827
  --zl-magenta-10: #4d0034;
824
828
  --zl-magenta-2: #f6c6e0;
@@ -865,16 +869,16 @@ body {
865
869
  --zl-pinkpurple-7: #8727b0;
866
870
  --zl-pinkpurple-8: #66158f;
867
871
  --zl-pinkpurple-9: #48086e;
868
- --zl-primary-1: #eff5fe;
869
- --zl-primary-10: #183462;
870
- --zl-primary-2: #ccdffd;
871
- --zl-primary-3: #a7c7fb;
872
- --zl-primary-4: #82aff9;
873
- --zl-primary-5: #5e99f8;
874
- --zl-primary-6: #3b82f6;
875
- --zl-primary-7: #306bca;
876
- --zl-primary-8: #2858a7;
877
- --zl-primary-9: #204685;
872
+ --zl-primary-1: #ecf0fb;
873
+ --zl-primary-10: #132254;
874
+ --zl-primary-2: #c9d3f4;
875
+ --zl-primary-3: #a2b3eb;
876
+ --zl-primary-4: #7b93e3;
877
+ --zl-primary-5: #5574db;
878
+ --zl-primary-6: #3056d3;
879
+ --zl-primary-7: #2746ad;
880
+ --zl-primary-8: #213a8f;
881
+ --zl-primary-9: #1a2e72;
878
882
  --zl-purple-1: #f3e8ff;
879
883
  --zl-purple-10: #0e004d;
880
884
  --zl-purple-2: #d9c4f3;
@@ -922,37 +926,37 @@ body {
922
926
  --zl-yellow-7: #c7be41;
923
927
  --zl-yellow-8: #9e9222;
924
928
  --zl-yellow-9: #75670d;
925
- --zl-primary-1: #eff5fe;
926
- --zl-link-1: #eff5fe;
927
- --zl-primary-2: #ccdffd;
928
- --zl-link-2: #ccdffd;
929
- --zl-primary-3: #a7c7fb;
930
- --zl-link-3: #a7c7fb;
931
- --zl-primary-4: #82aff9;
932
- --zl-link-4: #82aff9;
933
- --zl-primary-5: #5e99f8;
934
- --zl-link-5: #5e99f8;
935
- --zl-primary-6: #3b82f6;
936
- --zl-link-6: #3b82f6;
937
- --zl-primary-7: #306bca;
938
- --zl-link-7: #306bca;
939
- --zl-primary-8: #2858a7;
940
- --zl-link-8: #2858a7;
941
- --zl-primary-9: #204685;
942
- --zl-link-9: #204685;
943
- --zl-primary-10: #183462;
944
- --zl-link-10: #183462;
945
- --el-color-primary: #3B82F6;
946
- --el-color-primary-light-1: #4f8ff7;
947
- --el-color-primary-light-2: #629bf8;
948
- --el-color-primary-light-3: #76a8f9;
949
- --el-color-primary-light-4: #89b4fa;
950
- --el-color-primary-light-5: #9dc1fb;
951
- --el-color-primary-light-6: #b1cdfb;
952
- --el-color-primary-light-7: #c4dafc;
953
- --el-color-primary-light-8: #d8e6fd;
954
- --el-color-primary-light-9: #ebf3fe;
955
- --el-color-primary-dark-2: #0c1a31;
929
+ --zl-primary-1: #ecf0fb;
930
+ --zl-link-1: #ecf0fb;
931
+ --zl-primary-2: #c9d3f4;
932
+ --zl-link-2: #c9d3f4;
933
+ --zl-primary-3: #a2b3eb;
934
+ --zl-link-3: #a2b3eb;
935
+ --zl-primary-4: #7b93e3;
936
+ --zl-link-4: #7b93e3;
937
+ --zl-primary-5: #5574db;
938
+ --zl-link-5: #5574db;
939
+ --zl-primary-6: #3056d3;
940
+ --zl-link-6: #3056d3;
941
+ --zl-primary-7: #2746ad;
942
+ --zl-link-7: #2746ad;
943
+ --zl-primary-8: #213a8f;
944
+ --zl-link-8: #213a8f;
945
+ --zl-primary-9: #1a2e72;
946
+ --zl-link-9: #1a2e72;
947
+ --zl-primary-10: #132254;
948
+ --zl-link-10: #132254;
949
+ --el-color-primary: #3056D3;
950
+ --el-color-primary-light-1: #4567d7;
951
+ --el-color-primary-light-2: #5978dc;
952
+ --el-color-primary-light-3: #6e89e0;
953
+ --el-color-primary-light-4: #839ae5;
954
+ --el-color-primary-light-5: #98abe9;
955
+ --el-color-primary-light-6: #acbbed;
956
+ --el-color-primary-light-7: #c1ccf2;
957
+ --el-color-primary-light-8: #d6ddf6;
958
+ --el-color-primary-light-9: #eaeefb;
959
+ --el-color-primary-dark-2: #2645a9;
956
960
  --el-color-success: #55BC8A;
957
961
  --el-color-success-light-1: #66c396;
958
962
  --el-color-success-light-2: #77c9a1;
@@ -963,7 +967,7 @@ body {
963
967
  --el-color-success-light-7: #ccebdc;
964
968
  --el-color-success-light-8: #ddf2e8;
965
969
  --el-color-success-light-9: #eef8f3;
966
- --el-color-success-dark-2: #11261c;
970
+ --el-color-success-dark-2: #44966e;
967
971
  --el-color-warning: #F5A623;
968
972
  --el-color-warning-light-1: #f6af39;
969
973
  --el-color-warning-light-2: #f7b84f;
@@ -974,7 +978,7 @@ body {
974
978
  --el-color-warning-light-7: #fce4bd;
975
979
  --el-color-warning-light-8: #fdedd3;
976
980
  --el-color-warning-light-9: #fef6e9;
977
- --el-color-warning-dark-2: #312107;
981
+ --el-color-warning-dark-2: #c4851c;
978
982
  --el-color-danger: #C3342F;
979
983
  --el-color-danger-light-1: #c94844;
980
984
  --el-color-danger-light-2: #cf5d59;
@@ -985,7 +989,7 @@ body {
985
989
  --el-color-danger-light-7: #edc2c1;
986
990
  --el-color-danger-light-8: #f3d6d5;
987
991
  --el-color-danger-light-9: #f9ebea;
988
- --el-color-danger-dark-2: #270a09;
992
+ --el-color-danger-dark-2: #9c2a26;
989
993
  --el-color-error: #C3342F;
990
994
  --el-color-error-light-1: #c94844;
991
995
  --el-color-error-light-2: #cf5d59;
@@ -996,7 +1000,7 @@ body {
996
1000
  --el-color-error-light-7: #edc2c1;
997
1001
  --el-color-error-light-8: #f3d6d5;
998
1002
  --el-color-error-light-9: #f9ebea;
999
- --el-color-error-dark-2: #270a09;
1003
+ --el-color-error-dark-2: #9c2a26;
1000
1004
  --el-color-info: #79879C;
1001
1005
  --el-color-info-light-1: #8693a6;
1002
1006
  --el-color-info-light-2: #949fb0;
@@ -1007,7 +1011,7 @@ body {
1007
1011
  --el-color-info-light-7: #d7dbe1;
1008
1012
  --el-color-info-light-8: #e4e7eb;
1009
1013
  --el-color-info-light-9: #f2f3f5;
1010
- --el-color-info-dark-2: #181b1f;
1014
+ --el-color-info-dark-2: #616c7d;
1011
1015
  --el-text-color-primary: #242E43;
1012
1016
  --el-text-color-regular: #4D5E7D;
1013
1017
  --el-text-color-secondary: #79879C;
@@ -1032,6 +1036,8 @@ body {
1032
1036
  --el-color-black: #000000;
1033
1037
  --el-mask-color: rgb(0, 0, 0, 0.5);
1034
1038
  color-scheme: light;
1039
+ --el-border-radius-base: 4px;
1040
+ --el-border-radius-small: 2px;
1035
1041
  --zl-menu-hover-bg: var(--zl-fill-2);
1036
1042
  --zl-menu-text-color: var(--zl-text-1);
1037
1043
  --zl-menu-trigger-arrow-color: #f6fafc;
@@ -1302,7 +1308,7 @@ body[data-theme='red-dark'] {
1302
1308
  --el-color-primary-light-7: #470b12;
1303
1309
  --el-color-primary-light-8: #2f070c;
1304
1310
  --el-color-primary-light-9: #180406;
1305
- --el-color-primary-dark-2: #fbd3d8;
1311
+ --el-color-primary-dark-2: #ef4f64;
1306
1312
  --el-color-success: #70C69A;
1307
1313
  --el-color-success-light-1: #65b28b;
1308
1314
  --el-color-success-light-2: #5a9e7b;
@@ -1313,7 +1319,7 @@ body[data-theme='red-dark'] {
1313
1319
  --el-color-success-light-7: #223b2e;
1314
1320
  --el-color-success-light-8: #16281f;
1315
1321
  --el-color-success-light-9: #0b140f;
1316
- --el-color-success-dark-2: #e2f4eb;
1322
+ --el-color-success-dark-2: #8dd1ae;
1317
1323
  --el-color-warning: #E7B962;
1318
1324
  --el-color-warning-light-1: #d0a758;
1319
1325
  --el-color-warning-light-2: #b9944e;
@@ -1324,7 +1330,7 @@ body[data-theme='red-dark'] {
1324
1330
  --el-color-warning-light-7: #45381d;
1325
1331
  --el-color-warning-light-8: #2e2514;
1326
1332
  --el-color-warning-light-9: #17130a;
1327
- --el-color-warning-dark-2: #faf1e0;
1333
+ --el-color-warning-dark-2: #ecc781;
1328
1334
  --el-color-danger: #FF7926;
1329
1335
  --el-color-danger-light-1: #e66d22;
1330
1336
  --el-color-danger-light-2: #cc611e;
@@ -1335,7 +1341,7 @@ body[data-theme='red-dark'] {
1335
1341
  --el-color-danger-light-7: #4d240b;
1336
1342
  --el-color-danger-light-8: #331808;
1337
1343
  --el-color-danger-light-9: #1a0c04;
1338
- --el-color-danger-dark-2: #ffe4d4;
1344
+ --el-color-danger-dark-2: #ff9451;
1339
1345
  --el-color-error: #FF7926;
1340
1346
  --el-color-error-light-1: #e66d22;
1341
1347
  --el-color-error-light-2: #cc611e;
@@ -1346,7 +1352,7 @@ body[data-theme='red-dark'] {
1346
1352
  --el-color-error-light-7: #4d240b;
1347
1353
  --el-color-error-light-8: #331808;
1348
1354
  --el-color-error-light-9: #1a0c04;
1349
- --el-color-error-dark-2: #ffe4d4;
1355
+ --el-color-error-dark-2: #ff9451;
1350
1356
  --el-color-info: #95A6BA;
1351
1357
  --el-color-info-light-1: #8695a7;
1352
1358
  --el-color-info-light-2: #778595;
@@ -1357,7 +1363,7 @@ body[data-theme='red-dark'] {
1357
1363
  --el-color-info-light-7: #2d3238;
1358
1364
  --el-color-info-light-8: #1e2125;
1359
1365
  --el-color-info-light-9: #0f1113;
1360
- --el-color-info-dark-2: #eaedf1;
1366
+ --el-color-info-dark-2: #aab8c8;
1361
1367
  --el-text-color-primary: #FFFFFF;
1362
1368
  --el-text-color-regular: rgba(255,255,255,0.7);
1363
1369
  --el-text-color-secondary: rgba(255,255,255,0.5);
@@ -1382,6 +1388,8 @@ body[data-theme='red-dark'] {
1382
1388
  --el-color-black: #ffffff;
1383
1389
  --el-mask-color: rgb(0, 0, 0, 0.8);
1384
1390
  color-scheme: dark;
1391
+ --el-border-radius-base: 4px;
1392
+ --el-border-radius-small: 2px;
1385
1393
  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
1386
1394
  --zl-menu-text-color: var(--zl-white);
1387
1395
  --zl-menu-trigger-arrow-color: #263247;
@@ -1652,7 +1660,7 @@ body[data-theme='red-light'] {
1652
1660
  --el-color-primary-light-7: #f8b3be;
1653
1661
  --el-color-primary-light-8: #faccd4;
1654
1662
  --el-color-primary-light-9: #fde6e9;
1655
- --el-color-primary-dark-2: #2e0008;
1663
+ --el-color-primary-dark-2: #b8001f;
1656
1664
  --el-color-success: #55BC8A;
1657
1665
  --el-color-success-light-1: #66c396;
1658
1666
  --el-color-success-light-2: #77c9a1;
@@ -1663,7 +1671,7 @@ body[data-theme='red-light'] {
1663
1671
  --el-color-success-light-7: #ccebdc;
1664
1672
  --el-color-success-light-8: #ddf2e8;
1665
1673
  --el-color-success-light-9: #eef8f3;
1666
- --el-color-success-dark-2: #11261c;
1674
+ --el-color-success-dark-2: #44966e;
1667
1675
  --el-color-warning: #F5A623;
1668
1676
  --el-color-warning-light-1: #f6af39;
1669
1677
  --el-color-warning-light-2: #f7b84f;
@@ -1674,7 +1682,7 @@ body[data-theme='red-light'] {
1674
1682
  --el-color-warning-light-7: #fce4bd;
1675
1683
  --el-color-warning-light-8: #fdedd3;
1676
1684
  --el-color-warning-light-9: #fef6e9;
1677
- --el-color-warning-dark-2: #312107;
1685
+ --el-color-warning-dark-2: #c4851c;
1678
1686
  --el-color-danger: #FF5900;
1679
1687
  --el-color-danger-light-1: #ff6a19;
1680
1688
  --el-color-danger-light-2: #ff7a33;
@@ -1685,7 +1693,7 @@ body[data-theme='red-light'] {
1685
1693
  --el-color-danger-light-7: #ffcdb3;
1686
1694
  --el-color-danger-light-8: #ffdecc;
1687
1695
  --el-color-danger-light-9: #ffeee6;
1688
- --el-color-danger-dark-2: #331200;
1696
+ --el-color-danger-dark-2: #cc4700;
1689
1697
  --el-color-error: #FF5900;
1690
1698
  --el-color-error-light-1: #ff6a19;
1691
1699
  --el-color-error-light-2: #ff7a33;
@@ -1696,7 +1704,7 @@ body[data-theme='red-light'] {
1696
1704
  --el-color-error-light-7: #ffcdb3;
1697
1705
  --el-color-error-light-8: #ffdecc;
1698
1706
  --el-color-error-light-9: #ffeee6;
1699
- --el-color-error-dark-2: #331200;
1707
+ --el-color-error-dark-2: #cc4700;
1700
1708
  --el-color-info: #79879C;
1701
1709
  --el-color-info-light-1: #8693a6;
1702
1710
  --el-color-info-light-2: #949fb0;
@@ -1707,7 +1715,7 @@ body[data-theme='red-light'] {
1707
1715
  --el-color-info-light-7: #d7dbe1;
1708
1716
  --el-color-info-light-8: #e4e7eb;
1709
1717
  --el-color-info-light-9: #f2f3f5;
1710
- --el-color-info-dark-2: #181b1f;
1718
+ --el-color-info-dark-2: #616c7d;
1711
1719
  --el-text-color-primary: #242E43;
1712
1720
  --el-text-color-regular: #4D5E7D;
1713
1721
  --el-text-color-secondary: #79879C;
@@ -1732,6 +1740,8 @@ body[data-theme='red-light'] {
1732
1740
  --el-color-black: #000000;
1733
1741
  --el-mask-color: rgb(0, 0, 0, 0.5);
1734
1742
  color-scheme: light;
1743
+ --el-border-radius-base: 4px;
1744
+ --el-border-radius-small: 2px;
1735
1745
  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
1736
1746
  --zl-menu-text-color: var(--zl-white);
1737
1747
  --zl-menu-trigger-arrow-color: #a51e1e;
package/src/runtime/api.ts CHANGED
@@ -130,6 +130,11 @@ function buildCssVars(resolved: Record<string, string>, themeName: string, baseN
130
130
  decls.push(`--el-color-black: ${isDark ? '#ffffff' : '#000000'};`)
131
131
  decls.push(`--el-mask-color: rgb(0, 0, 0, ${isDark ? '0.8' : '0.5'});`)
132
132
  decls.push(`color-scheme: ${isDark ? 'dark' : 'light'};`)
133
+ // EP 圆角 ← 形状 token（与内置主题产物同构）：`defineTheme({ tokens: { 'radius-base': ... } })`
134
+ // 即可同时驱动 kit 组件与 Element Plus 控件，宿主不必再用 CSS 选择器抢优先级。
135
+ // 基线 radius-base 4px / radius-small 2px 与 EP 默认值相同，内置主题零视觉变化。
136
+ decls.push(`--el-border-radius-base: ${get('radius-base')};`)
137
+ decls.push(`--el-border-radius-small: ${get('radius-small')};`)
133
138
 
134
139
  // 布局 / 菜单资产变量：内置主题由 scripts/themegen.mjs 产出，运行时主题必须同构，
135
140
  // 否则 defineTheme 造出的主题会把侧栏与菜单底色整块丢掉（退化成透明）。
@@ -177,9 +182,10 @@ export function defineTheme(options: DefineThemeOptions): void {
177
182
  resolved[`color-${key.replace(/^color-/, '')}`] = value
178
183
  }
179
184
 
180
- // 形状 / 字体 token：与内置主题同构产出。组件里写的是 `var(--zl-radius-large, 6px)`
181
- // 这类带兜底的形式，此前这些 token 从未产出，等于「值被兜底写死、宿主改不了」。
182
- // 用 `??=` 播种：`tokens: { 'radius-large': '10px' }` 这类覆盖仍然生效。
185
+ // 形状 / 字体 token：与内置主题同构产出（值表与 scripts/themegen.mjs 的 SHAPE_TOKENS 一致，
186
+ // 两边漂移会让 `defineTheme` 造出的主题与内置主题观感不同）。
187
+ // 组件里写的是 `var(--zl-radius-large, 6px)` 这类带兜底的形式，此前这些 token 从未产出，
188
+ // 等于「值被兜底写死、宿主改不了」。用 `??=` 播种：`tokens: { 'radius-large': '10px' }` 这类覆盖仍然生效。
183
189
  const shapeTokens: Record<string, string> = {
184
190
  'radius-small': '2px',
185
191
  'radius-base': '4px',
package/src/runtime/colors.ts CHANGED
@@ -59,11 +59,17 @@ export interface ElColorShades {
59
59
  /**
60
60
  * EP 主色色阶：**light-n 中 n 越大越"靠背景"** ——
61
61
  * 浅色主题往白走（light-9 ≈ 混 90% 白），深色主题往黑走（light-9 ≈ 混 90% 黑）；
62
- * dark-2 则相反：浅色下更深（混黑），深色下更浅（混白）。
62
+ * dark-2 则相反：浅色下更深（混 20% 黑），深色下更浅（混 20% 白）。
63
63
  *
64
- * ⚠️ mix(c1, c2, w) 的 w 是"混入 c2 的比例"，与 light-n 的 n 方向相反，
65
- * 故必须用 (10 - i) * 10。写成 i * 10 会颠倒色阶，导致 el-tag / el-message /
66
- * el-alert 的 light-9 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
64
+ * ⚠️ mix(c1, c2, w) 的 w 是"混入 c2 的比例"，与 SCSS 内置 mix（权重作用于**第一个**颜色）
65
+ * 相反，因此两处的实参顺序都不能照抄 EP scss 的写法：
66
+ * - light-n：把背景放 c1、主色放 c2，权重用 (10 - i) * 10；写成 i * 10 会颠倒色阶，
67
+ * 导致 el-tag / el-message / el-alert 的 light-9 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
68
+ * - dark-2：把主色放 c1、背景放 c2，权重直接用 20；反写成 `mix('#000000', hex, 20)`
69
+ * 得到的是"80% 黑 + 20% 主色"的近黑色，EP 用它做 `--el-button-active-bg-color` 等
70
+ * 26 处按下态，按钮点下去会变成黑色块。
71
+ *
72
+ * 锚点：EP 默认主色 #409eff 必须派生出 dark-2 = #337ecc、light-3 = #79bbff。
67
73
  */
68
74
  export function generateElShades(hex: string, isDark = false): ElColorShades {
69
75
  const shades = {} as ElColorShades
@@ -71,6 +77,6 @@ export function generateElShades(hex: string, isDark = false): ElColorShades {
71
77
  for (let i = 1; i <= 9; i++) {
72
78
  shades[`light-${i}` as keyof ElColorShades] = mix(toBg, hex, (10 - i) * 10)
73
79
  }
74
- shades['dark-2'] = mix(isDark ? '#ffffff' : '#000000', hex, 20)
80
+ shades['dark-2'] = mix(hex, isDark ? '#ffffff' : '#000000', 20)
75
81
  return shades
76
82
  }