@zl-ui-kit/theme 0.5.0 → 0.5.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 (10) hide show
  1. package/dist/index.d.ts +10 -2
  2. package/dist/index.js +4 -3
  3. package/package.json +3 -3
  4. package/src/generated/theme-blue.css +51 -40
  5. package/src/generated/theme-dark.css +61 -50
  6. package/src/generated/theme-light.css +51 -40
  7. package/src/generated/theme-red-dark.css +61 -50
  8. package/src/generated/theme-red-light.css +51 -40
  9. package/src/generated/themes.css +275 -220
  10. package/src/runtime/colors.ts +13 -4
package/dist/index.d.ts CHANGED
@@ -80,7 +80,15 @@ interface ElColorShades {
80
80
  'light-9': string;
81
81
  'dark-2': string;
82
82
  }
83
- /** EP 主色色阶：light-n = mix(白, 主色, n*10%)；dark-2 = mix(黑, 主色, 20%) */
84
- declare function generateElShades(hex: string): ElColorShades;
83
+ /**
84
+ * EP 主色色阶：**light-n 中 n 越大越"靠背景"** ——
85
+ * 浅色主题往白走（light-9 ≈ 混 90% 白），深色主题往黑走（light-9 ≈ 混 90% 黑）；
86
+ * dark-2 则相反：浅色下更深（混黑），深色下更浅（混白）。
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 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
91
+ */
92
+ declare function generateElShades(hex: string, isDark?: boolean): ElColorShades;
85
93
 
86
94
  export { COLOR_TYPES, type ColorType, type DefineThemeColors, type DefineThemeOptions, type SetThemeOptions, THEMES, type ThemeName, type UseThemeReturn, defineTheme, enableThemePersistence, generateElShades, getTheme, getThemes, mix, onThemeChange, setTheme, themesData, useTheme };
package/dist/index.js CHANGED
@@ -1156,12 +1156,13 @@ function mix(color1, color2, weight) {
1156
1156
  const w = weight / 100;
1157
1157
  return toHex([c1[0] * (1 - w) + c2[0] * w, c1[1] * (1 - w) + c2[1] * w, c1[2] * (1 - w) + c2[2] * w]);
1158
1158
  }
1159
- function generateElShades(hex) {
1159
+ function generateElShades(hex, isDark = false) {
1160
1160
  const shades = {};
1161
+ const toBg = isDark ? "#000000" : "#ffffff";
1161
1162
  for (let i = 1; i <= 9; i++) {
1162
- shades[`light-${i}`] = mix("#ffffff", hex, i * 10);
1163
+ shades[`light-${i}`] = mix(toBg, hex, (10 - i) * 10);
1163
1164
  }
1164
- shades["dark-2"] = mix("#000000", hex, 20);
1165
+ shades["dark-2"] = mix(isDark ? "#ffffff" : "#000000", hex, 20);
1165
1166
  return shades;
1166
1167
  }
1167
1168
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/theme",
3
- "version": "0.5.0",
3
+ "version": "0.5.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",
@@ -41,8 +41,8 @@
41
41
  "cross-env": "^7.0.3",
42
42
  "tsup": "^8.3.5",
43
43
  "typescript": "^5.7.3",
44
- "@jichuang/eslint-config": "1.0.0",
45
- "@jichuang/tsconfig": "1.0.0"
44
+ "@jichuang/tsconfig": "1.0.0",
45
+ "@jichuang/eslint-config": "1.0.0"
46
46
  },
47
47
  "repository": {
48
48
  "type": "git",
package/src/generated/theme-blue.css CHANGED
@@ -243,59 +243,70 @@ body[data-theme='blue'] {
243
243
  --zl-primary-10: #000d4d;
244
244
  --zl-link-10: #000d4d;
245
245
  --el-color-primary: #3261CE;
246
- --el-color-primary-light-1: #ebeffa;
247
- --el-color-primary-light-2: #d6dff5;
248
- --el-color-primary-light-3: #c2d0f0;
249
- --el-color-primary-light-4: #adc0eb;
246
+ --el-color-primary-light-1: #4771d3;
247
+ --el-color-primary-light-2: #5b81d8;
248
+ --el-color-primary-light-3: #7090dd;
249
+ --el-color-primary-light-4: #84a0e2;
250
250
  --el-color-primary-light-5: #99b0e7;
251
- --el-color-primary-light-6: #84a0e2;
252
- --el-color-primary-light-7: #7090dd;
253
- --el-color-primary-light-8: #5b81d8;
254
- --el-color-primary-light-9: #4771d3;
251
+ --el-color-primary-light-6: #adc0eb;
252
+ --el-color-primary-light-7: #c2d0f0;
253
+ --el-color-primary-light-8: #d6dff5;
254
+ --el-color-primary-light-9: #ebeffa;
255
255
  --el-color-primary-dark-2: #0a1329;
256
256
  --el-color-success: #55BC8A;
257
- --el-color-success-light-1: #eef8f3;
258
- --el-color-success-light-2: #ddf2e8;
259
- --el-color-success-light-3: #ccebdc;
260
- --el-color-success-light-4: #bbe4d0;
257
+ --el-color-success-light-1: #66c396;
258
+ --el-color-success-light-2: #77c9a1;
259
+ --el-color-success-light-3: #88d0ad;
260
+ --el-color-success-light-4: #99d7b9;
261
261
  --el-color-success-light-5: #aadec5;
262
- --el-color-success-light-6: #99d7b9;
263
- --el-color-success-light-7: #88d0ad;
264
- --el-color-success-light-8: #77c9a1;
265
- --el-color-success-light-9: #66c396;
262
+ --el-color-success-light-6: #bbe4d0;
263
+ --el-color-success-light-7: #ccebdc;
264
+ --el-color-success-light-8: #ddf2e8;
265
+ --el-color-success-light-9: #eef8f3;
266
266
  --el-color-success-dark-2: #11261c;
267
267
  --el-color-warning: #F5A623;
268
- --el-color-warning-light-1: #fef6e9;
269
- --el-color-warning-light-2: #fdedd3;
270
- --el-color-warning-light-3: #fce4bd;
271
- --el-color-warning-light-4: #fbdba7;
268
+ --el-color-warning-light-1: #f6af39;
269
+ --el-color-warning-light-2: #f7b84f;
270
+ --el-color-warning-light-3: #f8c165;
271
+ --el-color-warning-light-4: #f9ca7b;
272
272
  --el-color-warning-light-5: #fad391;
273
- --el-color-warning-light-6: #f9ca7b;
274
- --el-color-warning-light-7: #f8c165;
275
- --el-color-warning-light-8: #f7b84f;
276
- --el-color-warning-light-9: #f6af39;
273
+ --el-color-warning-light-6: #fbdba7;
274
+ --el-color-warning-light-7: #fce4bd;
275
+ --el-color-warning-light-8: #fdedd3;
276
+ --el-color-warning-light-9: #fef6e9;
277
277
  --el-color-warning-dark-2: #312107;
278
278
  --el-color-danger: #C3342F;
279
- --el-color-danger-light-1: #f9ebea;
280
- --el-color-danger-light-2: #f3d6d5;
281
- --el-color-danger-light-3: #edc2c1;
282
- --el-color-danger-light-4: #e7aeac;
279
+ --el-color-danger-light-1: #c94844;
280
+ --el-color-danger-light-2: #cf5d59;
281
+ --el-color-danger-light-3: #d5716d;
282
+ --el-color-danger-light-4: #db8582;
283
283
  --el-color-danger-light-5: #e19a97;
284
- --el-color-danger-light-6: #db8582;
285
- --el-color-danger-light-7: #d5716d;
286
- --el-color-danger-light-8: #cf5d59;
287
- --el-color-danger-light-9: #c94844;
284
+ --el-color-danger-light-6: #e7aeac;
285
+ --el-color-danger-light-7: #edc2c1;
286
+ --el-color-danger-light-8: #f3d6d5;
287
+ --el-color-danger-light-9: #f9ebea;
288
288
  --el-color-danger-dark-2: #270a09;
289
+ --el-color-error: #C3342F;
290
+ --el-color-error-light-1: #c94844;
291
+ --el-color-error-light-2: #cf5d59;
292
+ --el-color-error-light-3: #d5716d;
293
+ --el-color-error-light-4: #db8582;
294
+ --el-color-error-light-5: #e19a97;
295
+ --el-color-error-light-6: #e7aeac;
296
+ --el-color-error-light-7: #edc2c1;
297
+ --el-color-error-light-8: #f3d6d5;
298
+ --el-color-error-light-9: #f9ebea;
299
+ --el-color-error-dark-2: #270a09;
289
300
  --el-color-info: #79879C;
290
- --el-color-info-light-1: #f2f3f5;
291
- --el-color-info-light-2: #e4e7eb;
292
- --el-color-info-light-3: #d7dbe1;
293
- --el-color-info-light-4: #c9cfd7;
301
+ --el-color-info-light-1: #8693a6;
302
+ --el-color-info-light-2: #949fb0;
303
+ --el-color-info-light-3: #a1abba;
304
+ --el-color-info-light-4: #afb7c4;
294
305
  --el-color-info-light-5: #bcc3ce;
295
- --el-color-info-light-6: #afb7c4;
296
- --el-color-info-light-7: #a1abba;
297
- --el-color-info-light-8: #949fb0;
298
- --el-color-info-light-9: #8693a6;
306
+ --el-color-info-light-6: #c9cfd7;
307
+ --el-color-info-light-7: #d7dbe1;
308
+ --el-color-info-light-8: #e4e7eb;
309
+ --el-color-info-light-9: #f2f3f5;
299
310
  --el-color-info-dark-2: #181b1f;
300
311
  --el-text-color-primary: #242E43;
301
312
  --el-text-color-regular: #4D5E7D;
package/src/generated/theme-dark.css CHANGED
@@ -243,60 +243,71 @@ body[data-theme='dark'] {
243
243
  --zl-primary-10: #deedff;
244
244
  --zl-link-10: #deedff;
245
245
  --el-color-primary: #729DF4;
246
- --el-color-primary-light-1: #f1f5fe;
247
- --el-color-primary-light-2: #e3ebfd;
248
- --el-color-primary-light-3: #d5e2fc;
249
- --el-color-primary-light-4: #c7d8fb;
250
- --el-color-primary-light-5: #b9cefa;
251
- --el-color-primary-light-6: #aac4f8;
252
- --el-color-primary-light-7: #9cbaf7;
253
- --el-color-primary-light-8: #8eb1f6;
254
- --el-color-primary-light-9: #80a7f5;
255
- --el-color-primary-dark-2: #171f31;
246
+ --el-color-primary-light-1: #678ddc;
247
+ --el-color-primary-light-2: #5b7ec3;
248
+ --el-color-primary-light-3: #506eab;
249
+ --el-color-primary-light-4: #445e92;
250
+ --el-color-primary-light-5: #394f7a;
251
+ --el-color-primary-light-6: #2e3f62;
252
+ --el-color-primary-light-7: #222f49;
253
+ --el-color-primary-light-8: #171f31;
254
+ --el-color-primary-light-9: #0b1018;
255
+ --el-color-primary-dark-2: #e3ebfd;
256
256
  --el-color-success: #70C69A;
257
- --el-color-success-light-1: #f1f9f5;
258
- --el-color-success-light-2: #e2f4eb;
259
- --el-color-success-light-3: #d4eee1;
260
- --el-color-success-light-4: #c6e8d7;
261
- --el-color-success-light-5: #b8e3cd;
262
- --el-color-success-light-6: #a9ddc2;
263
- --el-color-success-light-7: #9bd7b8;
264
- --el-color-success-light-8: #8dd1ae;
265
- --el-color-success-light-9: #7ecca4;
266
- --el-color-success-dark-2: #16281f;
257
+ --el-color-success-light-1: #65b28b;
258
+ --el-color-success-light-2: #5a9e7b;
259
+ --el-color-success-light-3: #4e8b6c;
260
+ --el-color-success-light-4: #43775c;
261
+ --el-color-success-light-5: #38634d;
262
+ --el-color-success-light-6: #2d4f3e;
263
+ --el-color-success-light-7: #223b2e;
264
+ --el-color-success-light-8: #16281f;
265
+ --el-color-success-light-9: #0b140f;
266
+ --el-color-success-dark-2: #e2f4eb;
267
267
  --el-color-warning: #E7B962;
268
- --el-color-warning-light-1: #fdf8ef;
269
- --el-color-warning-light-2: #faf1e0;
270
- --el-color-warning-light-3: #f8ead0;
271
- --el-color-warning-light-4: #f5e3c0;
272
- --el-color-warning-light-5: #f3dcb1;
273
- --el-color-warning-light-6: #f1d5a1;
274
- --el-color-warning-light-7: #eece91;
275
- --el-color-warning-light-8: #ecc781;
276
- --el-color-warning-light-9: #e9c072;
277
- --el-color-warning-dark-2: #2e2514;
268
+ --el-color-warning-light-1: #d0a758;
269
+ --el-color-warning-light-2: #b9944e;
270
+ --el-color-warning-light-3: #a28245;
271
+ --el-color-warning-light-4: #8b6f3b;
272
+ --el-color-warning-light-5: #745d31;
273
+ --el-color-warning-light-6: #5c4a27;
274
+ --el-color-warning-light-7: #45381d;
275
+ --el-color-warning-light-8: #2e2514;
276
+ --el-color-warning-light-9: #17130a;
277
+ --el-color-warning-dark-2: #faf1e0;
278
278
  --el-color-danger: #CF5951;
279
- --el-color-danger-light-1: #faeeee;
280
- --el-color-danger-light-2: #f5dedc;
281
- --el-color-danger-light-3: #f1cdcb;
282
- --el-color-danger-light-4: #ecbdb9;
283
- --el-color-danger-light-5: #e7aca8;
284
- --el-color-danger-light-6: #e29b97;
285
- --el-color-danger-light-7: #dd8b85;
286
- --el-color-danger-light-8: #d97a74;
287
- --el-color-danger-light-9: #d46a62;
288
- --el-color-danger-dark-2: #291210;
279
+ --el-color-danger-light-1: #ba5049;
280
+ --el-color-danger-light-2: #a64741;
281
+ --el-color-danger-light-3: #913e39;
282
+ --el-color-danger-light-4: #7c3531;
283
+ --el-color-danger-light-5: #682d29;
284
+ --el-color-danger-light-6: #532420;
285
+ --el-color-danger-light-7: #3e1b18;
286
+ --el-color-danger-light-8: #291210;
287
+ --el-color-danger-light-9: #150908;
288
+ --el-color-danger-dark-2: #f5dedc;
289
+ --el-color-error: #CF5951;
290
+ --el-color-error-light-1: #ba5049;
291
+ --el-color-error-light-2: #a64741;
292
+ --el-color-error-light-3: #913e39;
293
+ --el-color-error-light-4: #7c3531;
294
+ --el-color-error-light-5: #682d29;
295
+ --el-color-error-light-6: #532420;
296
+ --el-color-error-light-7: #3e1b18;
297
+ --el-color-error-light-8: #291210;
298
+ --el-color-error-light-9: #150908;
299
+ --el-color-error-dark-2: #f5dedc;
289
300
  --el-color-info: #95A6BA;
290
- --el-color-info-light-1: #f4f6f8;
291
- --el-color-info-light-2: #eaedf1;
292
- --el-color-info-light-3: #dfe4ea;
293
- --el-color-info-light-4: #d5dbe3;
294
- --el-color-info-light-5: #cad3dd;
295
- --el-color-info-light-6: #bfcad6;
296
- --el-color-info-light-7: #b5c1cf;
297
- --el-color-info-light-8: #aab8c8;
298
- --el-color-info-light-9: #a0afc1;
299
- --el-color-info-dark-2: #1e2125;
301
+ --el-color-info-light-1: #8695a7;
302
+ --el-color-info-light-2: #778595;
303
+ --el-color-info-light-3: #687482;
304
+ --el-color-info-light-4: #596470;
305
+ --el-color-info-light-5: #4b535d;
306
+ --el-color-info-light-6: #3c424a;
307
+ --el-color-info-light-7: #2d3238;
308
+ --el-color-info-light-8: #1e2125;
309
+ --el-color-info-light-9: #0f1113;
310
+ --el-color-info-dark-2: #eaedf1;
300
311
  --el-text-color-primary: #FFFFFF;
301
312
  --el-text-color-regular: rgba(255,255,255,0.7);
302
313
  --el-text-color-secondary: rgba(255,255,255,0.5);
package/src/generated/theme-light.css CHANGED
@@ -243,59 +243,70 @@ body {
243
243
  --zl-primary-10: #000d4d;
244
244
  --zl-link-10: #000d4d;
245
245
  --el-color-primary: #3261CE;
246
- --el-color-primary-light-1: #ebeffa;
247
- --el-color-primary-light-2: #d6dff5;
248
- --el-color-primary-light-3: #c2d0f0;
249
- --el-color-primary-light-4: #adc0eb;
246
+ --el-color-primary-light-1: #4771d3;
247
+ --el-color-primary-light-2: #5b81d8;
248
+ --el-color-primary-light-3: #7090dd;
249
+ --el-color-primary-light-4: #84a0e2;
250
250
  --el-color-primary-light-5: #99b0e7;
251
- --el-color-primary-light-6: #84a0e2;
252
- --el-color-primary-light-7: #7090dd;
253
- --el-color-primary-light-8: #5b81d8;
254
- --el-color-primary-light-9: #4771d3;
251
+ --el-color-primary-light-6: #adc0eb;
252
+ --el-color-primary-light-7: #c2d0f0;
253
+ --el-color-primary-light-8: #d6dff5;
254
+ --el-color-primary-light-9: #ebeffa;
255
255
  --el-color-primary-dark-2: #0a1329;
256
256
  --el-color-success: #55BC8A;
257
- --el-color-success-light-1: #eef8f3;
258
- --el-color-success-light-2: #ddf2e8;
259
- --el-color-success-light-3: #ccebdc;
260
- --el-color-success-light-4: #bbe4d0;
257
+ --el-color-success-light-1: #66c396;
258
+ --el-color-success-light-2: #77c9a1;
259
+ --el-color-success-light-3: #88d0ad;
260
+ --el-color-success-light-4: #99d7b9;
261
261
  --el-color-success-light-5: #aadec5;
262
- --el-color-success-light-6: #99d7b9;
263
- --el-color-success-light-7: #88d0ad;
264
- --el-color-success-light-8: #77c9a1;
265
- --el-color-success-light-9: #66c396;
262
+ --el-color-success-light-6: #bbe4d0;
263
+ --el-color-success-light-7: #ccebdc;
264
+ --el-color-success-light-8: #ddf2e8;
265
+ --el-color-success-light-9: #eef8f3;
266
266
  --el-color-success-dark-2: #11261c;
267
267
  --el-color-warning: #F5A623;
268
- --el-color-warning-light-1: #fef6e9;
269
- --el-color-warning-light-2: #fdedd3;
270
- --el-color-warning-light-3: #fce4bd;
271
- --el-color-warning-light-4: #fbdba7;
268
+ --el-color-warning-light-1: #f6af39;
269
+ --el-color-warning-light-2: #f7b84f;
270
+ --el-color-warning-light-3: #f8c165;
271
+ --el-color-warning-light-4: #f9ca7b;
272
272
  --el-color-warning-light-5: #fad391;
273
- --el-color-warning-light-6: #f9ca7b;
274
- --el-color-warning-light-7: #f8c165;
275
- --el-color-warning-light-8: #f7b84f;
276
- --el-color-warning-light-9: #f6af39;
273
+ --el-color-warning-light-6: #fbdba7;
274
+ --el-color-warning-light-7: #fce4bd;
275
+ --el-color-warning-light-8: #fdedd3;
276
+ --el-color-warning-light-9: #fef6e9;
277
277
  --el-color-warning-dark-2: #312107;
278
278
  --el-color-danger: #C3342F;
279
- --el-color-danger-light-1: #f9ebea;
280
- --el-color-danger-light-2: #f3d6d5;
281
- --el-color-danger-light-3: #edc2c1;
282
- --el-color-danger-light-4: #e7aeac;
279
+ --el-color-danger-light-1: #c94844;
280
+ --el-color-danger-light-2: #cf5d59;
281
+ --el-color-danger-light-3: #d5716d;
282
+ --el-color-danger-light-4: #db8582;
283
283
  --el-color-danger-light-5: #e19a97;
284
- --el-color-danger-light-6: #db8582;
285
- --el-color-danger-light-7: #d5716d;
286
- --el-color-danger-light-8: #cf5d59;
287
- --el-color-danger-light-9: #c94844;
284
+ --el-color-danger-light-6: #e7aeac;
285
+ --el-color-danger-light-7: #edc2c1;
286
+ --el-color-danger-light-8: #f3d6d5;
287
+ --el-color-danger-light-9: #f9ebea;
288
288
  --el-color-danger-dark-2: #270a09;
289
+ --el-color-error: #C3342F;
290
+ --el-color-error-light-1: #c94844;
291
+ --el-color-error-light-2: #cf5d59;
292
+ --el-color-error-light-3: #d5716d;
293
+ --el-color-error-light-4: #db8582;
294
+ --el-color-error-light-5: #e19a97;
295
+ --el-color-error-light-6: #e7aeac;
296
+ --el-color-error-light-7: #edc2c1;
297
+ --el-color-error-light-8: #f3d6d5;
298
+ --el-color-error-light-9: #f9ebea;
299
+ --el-color-error-dark-2: #270a09;
289
300
  --el-color-info: #79879C;
290
- --el-color-info-light-1: #f2f3f5;
291
- --el-color-info-light-2: #e4e7eb;
292
- --el-color-info-light-3: #d7dbe1;
293
- --el-color-info-light-4: #c9cfd7;
301
+ --el-color-info-light-1: #8693a6;
302
+ --el-color-info-light-2: #949fb0;
303
+ --el-color-info-light-3: #a1abba;
304
+ --el-color-info-light-4: #afb7c4;
294
305
  --el-color-info-light-5: #bcc3ce;
295
- --el-color-info-light-6: #afb7c4;
296
- --el-color-info-light-7: #a1abba;
297
- --el-color-info-light-8: #949fb0;
298
- --el-color-info-light-9: #8693a6;
306
+ --el-color-info-light-6: #c9cfd7;
307
+ --el-color-info-light-7: #d7dbe1;
308
+ --el-color-info-light-8: #e4e7eb;
309
+ --el-color-info-light-9: #f2f3f5;
299
310
  --el-color-info-dark-2: #181b1f;
300
311
  --el-text-color-primary: #242E43;
301
312
  --el-text-color-regular: #4D5E7D;
package/src/generated/theme-red-dark.css CHANGED
@@ -243,60 +243,71 @@ body[data-theme='red-dark'] {
243
243
  --zl-primary-10: #ffe8e8;
244
244
  --zl-link-10: #ffe8e8;
245
245
  --el-color-primary: #EB233D;
246
- --el-color-primary-light-1: #fde9ec;
247
- --el-color-primary-light-2: #fbd3d8;
248
- --el-color-primary-light-3: #f9bdc5;
249
- --el-color-primary-light-4: #f7a7b1;
250
- --el-color-primary-light-5: #f5919e;
251
- --el-color-primary-light-6: #f37b8b;
252
- --el-color-primary-light-7: #f16577;
253
- --el-color-primary-light-8: #ef4f64;
254
- --el-color-primary-light-9: #ed3950;
255
- --el-color-primary-dark-2: #2f070c;
246
+ --el-color-primary-light-1: #d42037;
247
+ --el-color-primary-light-2: #bc1c31;
248
+ --el-color-primary-light-3: #a5192b;
249
+ --el-color-primary-light-4: #8d1525;
250
+ --el-color-primary-light-5: #76121f;
251
+ --el-color-primary-light-6: #5e0e18;
252
+ --el-color-primary-light-7: #470b12;
253
+ --el-color-primary-light-8: #2f070c;
254
+ --el-color-primary-light-9: #180406;
255
+ --el-color-primary-dark-2: #fbd3d8;
256
256
  --el-color-success: #70C69A;
257
- --el-color-success-light-1: #f1f9f5;
258
- --el-color-success-light-2: #e2f4eb;
259
- --el-color-success-light-3: #d4eee1;
260
- --el-color-success-light-4: #c6e8d7;
261
- --el-color-success-light-5: #b8e3cd;
262
- --el-color-success-light-6: #a9ddc2;
263
- --el-color-success-light-7: #9bd7b8;
264
- --el-color-success-light-8: #8dd1ae;
265
- --el-color-success-light-9: #7ecca4;
266
- --el-color-success-dark-2: #16281f;
257
+ --el-color-success-light-1: #65b28b;
258
+ --el-color-success-light-2: #5a9e7b;
259
+ --el-color-success-light-3: #4e8b6c;
260
+ --el-color-success-light-4: #43775c;
261
+ --el-color-success-light-5: #38634d;
262
+ --el-color-success-light-6: #2d4f3e;
263
+ --el-color-success-light-7: #223b2e;
264
+ --el-color-success-light-8: #16281f;
265
+ --el-color-success-light-9: #0b140f;
266
+ --el-color-success-dark-2: #e2f4eb;
267
267
  --el-color-warning: #E7B962;
268
- --el-color-warning-light-1: #fdf8ef;
269
- --el-color-warning-light-2: #faf1e0;
270
- --el-color-warning-light-3: #f8ead0;
271
- --el-color-warning-light-4: #f5e3c0;
272
- --el-color-warning-light-5: #f3dcb1;
273
- --el-color-warning-light-6: #f1d5a1;
274
- --el-color-warning-light-7: #eece91;
275
- --el-color-warning-light-8: #ecc781;
276
- --el-color-warning-light-9: #e9c072;
277
- --el-color-warning-dark-2: #2e2514;
268
+ --el-color-warning-light-1: #d0a758;
269
+ --el-color-warning-light-2: #b9944e;
270
+ --el-color-warning-light-3: #a28245;
271
+ --el-color-warning-light-4: #8b6f3b;
272
+ --el-color-warning-light-5: #745d31;
273
+ --el-color-warning-light-6: #5c4a27;
274
+ --el-color-warning-light-7: #45381d;
275
+ --el-color-warning-light-8: #2e2514;
276
+ --el-color-warning-light-9: #17130a;
277
+ --el-color-warning-dark-2: #faf1e0;
278
278
  --el-color-danger: #FF7926;
279
- --el-color-danger-light-1: #fff2e9;
280
- --el-color-danger-light-2: #ffe4d4;
281
- --el-color-danger-light-3: #ffd7be;
282
- --el-color-danger-light-4: #ffc9a8;
283
- --el-color-danger-light-5: #ffbc93;
284
- --el-color-danger-light-6: #ffaf7d;
285
- --el-color-danger-light-7: #ffa167;
286
- --el-color-danger-light-8: #ff9451;
287
- --el-color-danger-light-9: #ff863c;
288
- --el-color-danger-dark-2: #331808;
279
+ --el-color-danger-light-1: #e66d22;
280
+ --el-color-danger-light-2: #cc611e;
281
+ --el-color-danger-light-3: #b3551b;
282
+ --el-color-danger-light-4: #994917;
283
+ --el-color-danger-light-5: #803d13;
284
+ --el-color-danger-light-6: #66300f;
285
+ --el-color-danger-light-7: #4d240b;
286
+ --el-color-danger-light-8: #331808;
287
+ --el-color-danger-light-9: #1a0c04;
288
+ --el-color-danger-dark-2: #ffe4d4;
289
+ --el-color-error: #FF7926;
290
+ --el-color-error-light-1: #e66d22;
291
+ --el-color-error-light-2: #cc611e;
292
+ --el-color-error-light-3: #b3551b;
293
+ --el-color-error-light-4: #994917;
294
+ --el-color-error-light-5: #803d13;
295
+ --el-color-error-light-6: #66300f;
296
+ --el-color-error-light-7: #4d240b;
297
+ --el-color-error-light-8: #331808;
298
+ --el-color-error-light-9: #1a0c04;
299
+ --el-color-error-dark-2: #ffe4d4;
289
300
  --el-color-info: #95A6BA;
290
- --el-color-info-light-1: #f4f6f8;
291
- --el-color-info-light-2: #eaedf1;
292
- --el-color-info-light-3: #dfe4ea;
293
- --el-color-info-light-4: #d5dbe3;
294
- --el-color-info-light-5: #cad3dd;
295
- --el-color-info-light-6: #bfcad6;
296
- --el-color-info-light-7: #b5c1cf;
297
- --el-color-info-light-8: #aab8c8;
298
- --el-color-info-light-9: #a0afc1;
299
- --el-color-info-dark-2: #1e2125;
301
+ --el-color-info-light-1: #8695a7;
302
+ --el-color-info-light-2: #778595;
303
+ --el-color-info-light-3: #687482;
304
+ --el-color-info-light-4: #596470;
305
+ --el-color-info-light-5: #4b535d;
306
+ --el-color-info-light-6: #3c424a;
307
+ --el-color-info-light-7: #2d3238;
308
+ --el-color-info-light-8: #1e2125;
309
+ --el-color-info-light-9: #0f1113;
310
+ --el-color-info-dark-2: #eaedf1;
300
311
  --el-text-color-primary: #FFFFFF;
301
312
  --el-text-color-regular: rgba(255,255,255,0.7);
302
313
  --el-text-color-secondary: rgba(255,255,255,0.5);
package/src/generated/theme-red-light.css CHANGED
@@ -243,59 +243,70 @@ body[data-theme='red-light'] {
243
243
  --zl-primary-10: #4d0017;
244
244
  --zl-link-10: #4d0017;
245
245
  --el-color-primary: #E60027;
246
- --el-color-primary-light-1: #fde6e9;
247
- --el-color-primary-light-2: #faccd4;
248
- --el-color-primary-light-3: #f8b3be;
249
- --el-color-primary-light-4: #f599a9;
246
+ --el-color-primary-light-1: #e9193d;
247
+ --el-color-primary-light-2: #eb3352;
248
+ --el-color-primary-light-3: #ee4d68;
249
+ --el-color-primary-light-4: #f0667d;
250
250
  --el-color-primary-light-5: #f38093;
251
- --el-color-primary-light-6: #f0667d;
252
- --el-color-primary-light-7: #ee4d68;
253
- --el-color-primary-light-8: #eb3352;
254
- --el-color-primary-light-9: #e9193d;
251
+ --el-color-primary-light-6: #f599a9;
252
+ --el-color-primary-light-7: #f8b3be;
253
+ --el-color-primary-light-8: #faccd4;
254
+ --el-color-primary-light-9: #fde6e9;
255
255
  --el-color-primary-dark-2: #2e0008;
256
256
  --el-color-success: #55BC8A;
257
- --el-color-success-light-1: #eef8f3;
258
- --el-color-success-light-2: #ddf2e8;
259
- --el-color-success-light-3: #ccebdc;
260
- --el-color-success-light-4: #bbe4d0;
257
+ --el-color-success-light-1: #66c396;
258
+ --el-color-success-light-2: #77c9a1;
259
+ --el-color-success-light-3: #88d0ad;
260
+ --el-color-success-light-4: #99d7b9;
261
261
  --el-color-success-light-5: #aadec5;
262
- --el-color-success-light-6: #99d7b9;
263
- --el-color-success-light-7: #88d0ad;
264
- --el-color-success-light-8: #77c9a1;
265
- --el-color-success-light-9: #66c396;
262
+ --el-color-success-light-6: #bbe4d0;
263
+ --el-color-success-light-7: #ccebdc;
264
+ --el-color-success-light-8: #ddf2e8;
265
+ --el-color-success-light-9: #eef8f3;
266
266
  --el-color-success-dark-2: #11261c;
267
267
  --el-color-warning: #F5A623;
268
- --el-color-warning-light-1: #fef6e9;
269
- --el-color-warning-light-2: #fdedd3;
270
- --el-color-warning-light-3: #fce4bd;
271
- --el-color-warning-light-4: #fbdba7;
268
+ --el-color-warning-light-1: #f6af39;
269
+ --el-color-warning-light-2: #f7b84f;
270
+ --el-color-warning-light-3: #f8c165;
271
+ --el-color-warning-light-4: #f9ca7b;
272
272
  --el-color-warning-light-5: #fad391;
273
- --el-color-warning-light-6: #f9ca7b;
274
- --el-color-warning-light-7: #f8c165;
275
- --el-color-warning-light-8: #f7b84f;
276
- --el-color-warning-light-9: #f6af39;
273
+ --el-color-warning-light-6: #fbdba7;
274
+ --el-color-warning-light-7: #fce4bd;
275
+ --el-color-warning-light-8: #fdedd3;
276
+ --el-color-warning-light-9: #fef6e9;
277
277
  --el-color-warning-dark-2: #312107;
278
278
  --el-color-danger: #FF5900;
279
- --el-color-danger-light-1: #ffeee6;
280
- --el-color-danger-light-2: #ffdecc;
281
- --el-color-danger-light-3: #ffcdb3;
282
- --el-color-danger-light-4: #ffbd99;
279
+ --el-color-danger-light-1: #ff6a19;
280
+ --el-color-danger-light-2: #ff7a33;
281
+ --el-color-danger-light-3: #ff8b4d;
282
+ --el-color-danger-light-4: #ff9b66;
283
283
  --el-color-danger-light-5: #ffac80;
284
- --el-color-danger-light-6: #ff9b66;
285
- --el-color-danger-light-7: #ff8b4d;
286
- --el-color-danger-light-8: #ff7a33;
287
- --el-color-danger-light-9: #ff6a19;
284
+ --el-color-danger-light-6: #ffbd99;
285
+ --el-color-danger-light-7: #ffcdb3;
286
+ --el-color-danger-light-8: #ffdecc;
287
+ --el-color-danger-light-9: #ffeee6;
288
288
  --el-color-danger-dark-2: #331200;
289
+ --el-color-error: #FF5900;
290
+ --el-color-error-light-1: #ff6a19;
291
+ --el-color-error-light-2: #ff7a33;
292
+ --el-color-error-light-3: #ff8b4d;
293
+ --el-color-error-light-4: #ff9b66;
294
+ --el-color-error-light-5: #ffac80;
295
+ --el-color-error-light-6: #ffbd99;
296
+ --el-color-error-light-7: #ffcdb3;
297
+ --el-color-error-light-8: #ffdecc;
298
+ --el-color-error-light-9: #ffeee6;
299
+ --el-color-error-dark-2: #331200;
289
300
  --el-color-info: #79879C;
290
- --el-color-info-light-1: #f2f3f5;
291
- --el-color-info-light-2: #e4e7eb;
292
- --el-color-info-light-3: #d7dbe1;
293
- --el-color-info-light-4: #c9cfd7;
301
+ --el-color-info-light-1: #8693a6;
302
+ --el-color-info-light-2: #949fb0;
303
+ --el-color-info-light-3: #a1abba;
304
+ --el-color-info-light-4: #afb7c4;
294
305
  --el-color-info-light-5: #bcc3ce;
295
- --el-color-info-light-6: #afb7c4;
296
- --el-color-info-light-7: #a1abba;
297
- --el-color-info-light-8: #949fb0;
298
- --el-color-info-light-9: #8693a6;
306
+ --el-color-info-light-6: #c9cfd7;
307
+ --el-color-info-light-7: #d7dbe1;
308
+ --el-color-info-light-8: #e4e7eb;
309
+ --el-color-info-light-9: #f2f3f5;
299
310
  --el-color-info-dark-2: #181b1f;
300
311
  --el-text-color-primary: #242E43;
301
312
  --el-text-color-regular: #4D5E7D;
package/src/generated/themes.css CHANGED
@@ -243,59 +243,70 @@ body[data-theme='blue'] {
243
243
  --zl-primary-10: #000d4d;
244
244
  --zl-link-10: #000d4d;
245
245
  --el-color-primary: #3261CE;
246
- --el-color-primary-light-1: #ebeffa;
247
- --el-color-primary-light-2: #d6dff5;
248
- --el-color-primary-light-3: #c2d0f0;
249
- --el-color-primary-light-4: #adc0eb;
246
+ --el-color-primary-light-1: #4771d3;
247
+ --el-color-primary-light-2: #5b81d8;
248
+ --el-color-primary-light-3: #7090dd;
249
+ --el-color-primary-light-4: #84a0e2;
250
250
  --el-color-primary-light-5: #99b0e7;
251
- --el-color-primary-light-6: #84a0e2;
252
- --el-color-primary-light-7: #7090dd;
253
- --el-color-primary-light-8: #5b81d8;
254
- --el-color-primary-light-9: #4771d3;
251
+ --el-color-primary-light-6: #adc0eb;
252
+ --el-color-primary-light-7: #c2d0f0;
253
+ --el-color-primary-light-8: #d6dff5;
254
+ --el-color-primary-light-9: #ebeffa;
255
255
  --el-color-primary-dark-2: #0a1329;
256
256
  --el-color-success: #55BC8A;
257
- --el-color-success-light-1: #eef8f3;
258
- --el-color-success-light-2: #ddf2e8;
259
- --el-color-success-light-3: #ccebdc;
260
- --el-color-success-light-4: #bbe4d0;
257
+ --el-color-success-light-1: #66c396;
258
+ --el-color-success-light-2: #77c9a1;
259
+ --el-color-success-light-3: #88d0ad;
260
+ --el-color-success-light-4: #99d7b9;
261
261
  --el-color-success-light-5: #aadec5;
262
- --el-color-success-light-6: #99d7b9;
263
- --el-color-success-light-7: #88d0ad;
264
- --el-color-success-light-8: #77c9a1;
265
- --el-color-success-light-9: #66c396;
262
+ --el-color-success-light-6: #bbe4d0;
263
+ --el-color-success-light-7: #ccebdc;
264
+ --el-color-success-light-8: #ddf2e8;
265
+ --el-color-success-light-9: #eef8f3;
266
266
  --el-color-success-dark-2: #11261c;
267
267
  --el-color-warning: #F5A623;
268
- --el-color-warning-light-1: #fef6e9;
269
- --el-color-warning-light-2: #fdedd3;
270
- --el-color-warning-light-3: #fce4bd;
271
- --el-color-warning-light-4: #fbdba7;
268
+ --el-color-warning-light-1: #f6af39;
269
+ --el-color-warning-light-2: #f7b84f;
270
+ --el-color-warning-light-3: #f8c165;
271
+ --el-color-warning-light-4: #f9ca7b;
272
272
  --el-color-warning-light-5: #fad391;
273
- --el-color-warning-light-6: #f9ca7b;
274
- --el-color-warning-light-7: #f8c165;
275
- --el-color-warning-light-8: #f7b84f;
276
- --el-color-warning-light-9: #f6af39;
273
+ --el-color-warning-light-6: #fbdba7;
274
+ --el-color-warning-light-7: #fce4bd;
275
+ --el-color-warning-light-8: #fdedd3;
276
+ --el-color-warning-light-9: #fef6e9;
277
277
  --el-color-warning-dark-2: #312107;
278
278
  --el-color-danger: #C3342F;
279
- --el-color-danger-light-1: #f9ebea;
280
- --el-color-danger-light-2: #f3d6d5;
281
- --el-color-danger-light-3: #edc2c1;
282
- --el-color-danger-light-4: #e7aeac;
279
+ --el-color-danger-light-1: #c94844;
280
+ --el-color-danger-light-2: #cf5d59;
281
+ --el-color-danger-light-3: #d5716d;
282
+ --el-color-danger-light-4: #db8582;
283
283
  --el-color-danger-light-5: #e19a97;
284
- --el-color-danger-light-6: #db8582;
285
- --el-color-danger-light-7: #d5716d;
286
- --el-color-danger-light-8: #cf5d59;
287
- --el-color-danger-light-9: #c94844;
284
+ --el-color-danger-light-6: #e7aeac;
285
+ --el-color-danger-light-7: #edc2c1;
286
+ --el-color-danger-light-8: #f3d6d5;
287
+ --el-color-danger-light-9: #f9ebea;
288
288
  --el-color-danger-dark-2: #270a09;
289
+ --el-color-error: #C3342F;
290
+ --el-color-error-light-1: #c94844;
291
+ --el-color-error-light-2: #cf5d59;
292
+ --el-color-error-light-3: #d5716d;
293
+ --el-color-error-light-4: #db8582;
294
+ --el-color-error-light-5: #e19a97;
295
+ --el-color-error-light-6: #e7aeac;
296
+ --el-color-error-light-7: #edc2c1;
297
+ --el-color-error-light-8: #f3d6d5;
298
+ --el-color-error-light-9: #f9ebea;
299
+ --el-color-error-dark-2: #270a09;
289
300
  --el-color-info: #79879C;
290
- --el-color-info-light-1: #f2f3f5;
291
- --el-color-info-light-2: #e4e7eb;
292
- --el-color-info-light-3: #d7dbe1;
293
- --el-color-info-light-4: #c9cfd7;
301
+ --el-color-info-light-1: #8693a6;
302
+ --el-color-info-light-2: #949fb0;
303
+ --el-color-info-light-3: #a1abba;
304
+ --el-color-info-light-4: #afb7c4;
294
305
  --el-color-info-light-5: #bcc3ce;
295
- --el-color-info-light-6: #afb7c4;
296
- --el-color-info-light-7: #a1abba;
297
- --el-color-info-light-8: #949fb0;
298
- --el-color-info-light-9: #8693a6;
306
+ --el-color-info-light-6: #c9cfd7;
307
+ --el-color-info-light-7: #d7dbe1;
308
+ --el-color-info-light-8: #e4e7eb;
309
+ --el-color-info-light-9: #f2f3f5;
299
310
  --el-color-info-dark-2: #181b1f;
300
311
  --el-text-color-primary: #242E43;
301
312
  --el-text-color-regular: #4D5E7D;
@@ -574,60 +585,71 @@ body[data-theme='dark'] {
574
585
  --zl-primary-10: #deedff;
575
586
  --zl-link-10: #deedff;
576
587
  --el-color-primary: #729DF4;
577
- --el-color-primary-light-1: #f1f5fe;
578
- --el-color-primary-light-2: #e3ebfd;
579
- --el-color-primary-light-3: #d5e2fc;
580
- --el-color-primary-light-4: #c7d8fb;
581
- --el-color-primary-light-5: #b9cefa;
582
- --el-color-primary-light-6: #aac4f8;
583
- --el-color-primary-light-7: #9cbaf7;
584
- --el-color-primary-light-8: #8eb1f6;
585
- --el-color-primary-light-9: #80a7f5;
586
- --el-color-primary-dark-2: #171f31;
588
+ --el-color-primary-light-1: #678ddc;
589
+ --el-color-primary-light-2: #5b7ec3;
590
+ --el-color-primary-light-3: #506eab;
591
+ --el-color-primary-light-4: #445e92;
592
+ --el-color-primary-light-5: #394f7a;
593
+ --el-color-primary-light-6: #2e3f62;
594
+ --el-color-primary-light-7: #222f49;
595
+ --el-color-primary-light-8: #171f31;
596
+ --el-color-primary-light-9: #0b1018;
597
+ --el-color-primary-dark-2: #e3ebfd;
587
598
  --el-color-success: #70C69A;
588
- --el-color-success-light-1: #f1f9f5;
589
- --el-color-success-light-2: #e2f4eb;
590
- --el-color-success-light-3: #d4eee1;
591
- --el-color-success-light-4: #c6e8d7;
592
- --el-color-success-light-5: #b8e3cd;
593
- --el-color-success-light-6: #a9ddc2;
594
- --el-color-success-light-7: #9bd7b8;
595
- --el-color-success-light-8: #8dd1ae;
596
- --el-color-success-light-9: #7ecca4;
597
- --el-color-success-dark-2: #16281f;
599
+ --el-color-success-light-1: #65b28b;
600
+ --el-color-success-light-2: #5a9e7b;
601
+ --el-color-success-light-3: #4e8b6c;
602
+ --el-color-success-light-4: #43775c;
603
+ --el-color-success-light-5: #38634d;
604
+ --el-color-success-light-6: #2d4f3e;
605
+ --el-color-success-light-7: #223b2e;
606
+ --el-color-success-light-8: #16281f;
607
+ --el-color-success-light-9: #0b140f;
608
+ --el-color-success-dark-2: #e2f4eb;
598
609
  --el-color-warning: #E7B962;
599
- --el-color-warning-light-1: #fdf8ef;
600
- --el-color-warning-light-2: #faf1e0;
601
- --el-color-warning-light-3: #f8ead0;
602
- --el-color-warning-light-4: #f5e3c0;
603
- --el-color-warning-light-5: #f3dcb1;
604
- --el-color-warning-light-6: #f1d5a1;
605
- --el-color-warning-light-7: #eece91;
606
- --el-color-warning-light-8: #ecc781;
607
- --el-color-warning-light-9: #e9c072;
608
- --el-color-warning-dark-2: #2e2514;
610
+ --el-color-warning-light-1: #d0a758;
611
+ --el-color-warning-light-2: #b9944e;
612
+ --el-color-warning-light-3: #a28245;
613
+ --el-color-warning-light-4: #8b6f3b;
614
+ --el-color-warning-light-5: #745d31;
615
+ --el-color-warning-light-6: #5c4a27;
616
+ --el-color-warning-light-7: #45381d;
617
+ --el-color-warning-light-8: #2e2514;
618
+ --el-color-warning-light-9: #17130a;
619
+ --el-color-warning-dark-2: #faf1e0;
609
620
  --el-color-danger: #CF5951;
610
- --el-color-danger-light-1: #faeeee;
611
- --el-color-danger-light-2: #f5dedc;
612
- --el-color-danger-light-3: #f1cdcb;
613
- --el-color-danger-light-4: #ecbdb9;
614
- --el-color-danger-light-5: #e7aca8;
615
- --el-color-danger-light-6: #e29b97;
616
- --el-color-danger-light-7: #dd8b85;
617
- --el-color-danger-light-8: #d97a74;
618
- --el-color-danger-light-9: #d46a62;
619
- --el-color-danger-dark-2: #291210;
621
+ --el-color-danger-light-1: #ba5049;
622
+ --el-color-danger-light-2: #a64741;
623
+ --el-color-danger-light-3: #913e39;
624
+ --el-color-danger-light-4: #7c3531;
625
+ --el-color-danger-light-5: #682d29;
626
+ --el-color-danger-light-6: #532420;
627
+ --el-color-danger-light-7: #3e1b18;
628
+ --el-color-danger-light-8: #291210;
629
+ --el-color-danger-light-9: #150908;
630
+ --el-color-danger-dark-2: #f5dedc;
631
+ --el-color-error: #CF5951;
632
+ --el-color-error-light-1: #ba5049;
633
+ --el-color-error-light-2: #a64741;
634
+ --el-color-error-light-3: #913e39;
635
+ --el-color-error-light-4: #7c3531;
636
+ --el-color-error-light-5: #682d29;
637
+ --el-color-error-light-6: #532420;
638
+ --el-color-error-light-7: #3e1b18;
639
+ --el-color-error-light-8: #291210;
640
+ --el-color-error-light-9: #150908;
641
+ --el-color-error-dark-2: #f5dedc;
620
642
  --el-color-info: #95A6BA;
621
- --el-color-info-light-1: #f4f6f8;
622
- --el-color-info-light-2: #eaedf1;
623
- --el-color-info-light-3: #dfe4ea;
624
- --el-color-info-light-4: #d5dbe3;
625
- --el-color-info-light-5: #cad3dd;
626
- --el-color-info-light-6: #bfcad6;
627
- --el-color-info-light-7: #b5c1cf;
628
- --el-color-info-light-8: #aab8c8;
629
- --el-color-info-light-9: #a0afc1;
630
- --el-color-info-dark-2: #1e2125;
643
+ --el-color-info-light-1: #8695a7;
644
+ --el-color-info-light-2: #778595;
645
+ --el-color-info-light-3: #687482;
646
+ --el-color-info-light-4: #596470;
647
+ --el-color-info-light-5: #4b535d;
648
+ --el-color-info-light-6: #3c424a;
649
+ --el-color-info-light-7: #2d3238;
650
+ --el-color-info-light-8: #1e2125;
651
+ --el-color-info-light-9: #0f1113;
652
+ --el-color-info-dark-2: #eaedf1;
631
653
  --el-text-color-primary: #FFFFFF;
632
654
  --el-text-color-regular: rgba(255,255,255,0.7);
633
655
  --el-text-color-secondary: rgba(255,255,255,0.5);
@@ -905,59 +927,70 @@ body {
905
927
  --zl-primary-10: #000d4d;
906
928
  --zl-link-10: #000d4d;
907
929
  --el-color-primary: #3261CE;
908
- --el-color-primary-light-1: #ebeffa;
909
- --el-color-primary-light-2: #d6dff5;
910
- --el-color-primary-light-3: #c2d0f0;
911
- --el-color-primary-light-4: #adc0eb;
930
+ --el-color-primary-light-1: #4771d3;
931
+ --el-color-primary-light-2: #5b81d8;
932
+ --el-color-primary-light-3: #7090dd;
933
+ --el-color-primary-light-4: #84a0e2;
912
934
  --el-color-primary-light-5: #99b0e7;
913
- --el-color-primary-light-6: #84a0e2;
914
- --el-color-primary-light-7: #7090dd;
915
- --el-color-primary-light-8: #5b81d8;
916
- --el-color-primary-light-9: #4771d3;
935
+ --el-color-primary-light-6: #adc0eb;
936
+ --el-color-primary-light-7: #c2d0f0;
937
+ --el-color-primary-light-8: #d6dff5;
938
+ --el-color-primary-light-9: #ebeffa;
917
939
  --el-color-primary-dark-2: #0a1329;
918
940
  --el-color-success: #55BC8A;
919
- --el-color-success-light-1: #eef8f3;
920
- --el-color-success-light-2: #ddf2e8;
921
- --el-color-success-light-3: #ccebdc;
922
- --el-color-success-light-4: #bbe4d0;
941
+ --el-color-success-light-1: #66c396;
942
+ --el-color-success-light-2: #77c9a1;
943
+ --el-color-success-light-3: #88d0ad;
944
+ --el-color-success-light-4: #99d7b9;
923
945
  --el-color-success-light-5: #aadec5;
924
- --el-color-success-light-6: #99d7b9;
925
- --el-color-success-light-7: #88d0ad;
926
- --el-color-success-light-8: #77c9a1;
927
- --el-color-success-light-9: #66c396;
946
+ --el-color-success-light-6: #bbe4d0;
947
+ --el-color-success-light-7: #ccebdc;
948
+ --el-color-success-light-8: #ddf2e8;
949
+ --el-color-success-light-9: #eef8f3;
928
950
  --el-color-success-dark-2: #11261c;
929
951
  --el-color-warning: #F5A623;
930
- --el-color-warning-light-1: #fef6e9;
931
- --el-color-warning-light-2: #fdedd3;
932
- --el-color-warning-light-3: #fce4bd;
933
- --el-color-warning-light-4: #fbdba7;
952
+ --el-color-warning-light-1: #f6af39;
953
+ --el-color-warning-light-2: #f7b84f;
954
+ --el-color-warning-light-3: #f8c165;
955
+ --el-color-warning-light-4: #f9ca7b;
934
956
  --el-color-warning-light-5: #fad391;
935
- --el-color-warning-light-6: #f9ca7b;
936
- --el-color-warning-light-7: #f8c165;
937
- --el-color-warning-light-8: #f7b84f;
938
- --el-color-warning-light-9: #f6af39;
957
+ --el-color-warning-light-6: #fbdba7;
958
+ --el-color-warning-light-7: #fce4bd;
959
+ --el-color-warning-light-8: #fdedd3;
960
+ --el-color-warning-light-9: #fef6e9;
939
961
  --el-color-warning-dark-2: #312107;
940
962
  --el-color-danger: #C3342F;
941
- --el-color-danger-light-1: #f9ebea;
942
- --el-color-danger-light-2: #f3d6d5;
943
- --el-color-danger-light-3: #edc2c1;
944
- --el-color-danger-light-4: #e7aeac;
963
+ --el-color-danger-light-1: #c94844;
964
+ --el-color-danger-light-2: #cf5d59;
965
+ --el-color-danger-light-3: #d5716d;
966
+ --el-color-danger-light-4: #db8582;
945
967
  --el-color-danger-light-5: #e19a97;
946
- --el-color-danger-light-6: #db8582;
947
- --el-color-danger-light-7: #d5716d;
948
- --el-color-danger-light-8: #cf5d59;
949
- --el-color-danger-light-9: #c94844;
968
+ --el-color-danger-light-6: #e7aeac;
969
+ --el-color-danger-light-7: #edc2c1;
970
+ --el-color-danger-light-8: #f3d6d5;
971
+ --el-color-danger-light-9: #f9ebea;
950
972
  --el-color-danger-dark-2: #270a09;
973
+ --el-color-error: #C3342F;
974
+ --el-color-error-light-1: #c94844;
975
+ --el-color-error-light-2: #cf5d59;
976
+ --el-color-error-light-3: #d5716d;
977
+ --el-color-error-light-4: #db8582;
978
+ --el-color-error-light-5: #e19a97;
979
+ --el-color-error-light-6: #e7aeac;
980
+ --el-color-error-light-7: #edc2c1;
981
+ --el-color-error-light-8: #f3d6d5;
982
+ --el-color-error-light-9: #f9ebea;
983
+ --el-color-error-dark-2: #270a09;
951
984
  --el-color-info: #79879C;
952
- --el-color-info-light-1: #f2f3f5;
953
- --el-color-info-light-2: #e4e7eb;
954
- --el-color-info-light-3: #d7dbe1;
955
- --el-color-info-light-4: #c9cfd7;
985
+ --el-color-info-light-1: #8693a6;
986
+ --el-color-info-light-2: #949fb0;
987
+ --el-color-info-light-3: #a1abba;
988
+ --el-color-info-light-4: #afb7c4;
956
989
  --el-color-info-light-5: #bcc3ce;
957
- --el-color-info-light-6: #afb7c4;
958
- --el-color-info-light-7: #a1abba;
959
- --el-color-info-light-8: #949fb0;
960
- --el-color-info-light-9: #8693a6;
990
+ --el-color-info-light-6: #c9cfd7;
991
+ --el-color-info-light-7: #d7dbe1;
992
+ --el-color-info-light-8: #e4e7eb;
993
+ --el-color-info-light-9: #f2f3f5;
961
994
  --el-color-info-dark-2: #181b1f;
962
995
  --el-text-color-primary: #242E43;
963
996
  --el-text-color-regular: #4D5E7D;
@@ -1236,60 +1269,71 @@ body[data-theme='red-dark'] {
1236
1269
  --zl-primary-10: #ffe8e8;
1237
1270
  --zl-link-10: #ffe8e8;
1238
1271
  --el-color-primary: #EB233D;
1239
- --el-color-primary-light-1: #fde9ec;
1240
- --el-color-primary-light-2: #fbd3d8;
1241
- --el-color-primary-light-3: #f9bdc5;
1242
- --el-color-primary-light-4: #f7a7b1;
1243
- --el-color-primary-light-5: #f5919e;
1244
- --el-color-primary-light-6: #f37b8b;
1245
- --el-color-primary-light-7: #f16577;
1246
- --el-color-primary-light-8: #ef4f64;
1247
- --el-color-primary-light-9: #ed3950;
1248
- --el-color-primary-dark-2: #2f070c;
1272
+ --el-color-primary-light-1: #d42037;
1273
+ --el-color-primary-light-2: #bc1c31;
1274
+ --el-color-primary-light-3: #a5192b;
1275
+ --el-color-primary-light-4: #8d1525;
1276
+ --el-color-primary-light-5: #76121f;
1277
+ --el-color-primary-light-6: #5e0e18;
1278
+ --el-color-primary-light-7: #470b12;
1279
+ --el-color-primary-light-8: #2f070c;
1280
+ --el-color-primary-light-9: #180406;
1281
+ --el-color-primary-dark-2: #fbd3d8;
1249
1282
  --el-color-success: #70C69A;
1250
- --el-color-success-light-1: #f1f9f5;
1251
- --el-color-success-light-2: #e2f4eb;
1252
- --el-color-success-light-3: #d4eee1;
1253
- --el-color-success-light-4: #c6e8d7;
1254
- --el-color-success-light-5: #b8e3cd;
1255
- --el-color-success-light-6: #a9ddc2;
1256
- --el-color-success-light-7: #9bd7b8;
1257
- --el-color-success-light-8: #8dd1ae;
1258
- --el-color-success-light-9: #7ecca4;
1259
- --el-color-success-dark-2: #16281f;
1283
+ --el-color-success-light-1: #65b28b;
1284
+ --el-color-success-light-2: #5a9e7b;
1285
+ --el-color-success-light-3: #4e8b6c;
1286
+ --el-color-success-light-4: #43775c;
1287
+ --el-color-success-light-5: #38634d;
1288
+ --el-color-success-light-6: #2d4f3e;
1289
+ --el-color-success-light-7: #223b2e;
1290
+ --el-color-success-light-8: #16281f;
1291
+ --el-color-success-light-9: #0b140f;
1292
+ --el-color-success-dark-2: #e2f4eb;
1260
1293
  --el-color-warning: #E7B962;
1261
- --el-color-warning-light-1: #fdf8ef;
1262
- --el-color-warning-light-2: #faf1e0;
1263
- --el-color-warning-light-3: #f8ead0;
1264
- --el-color-warning-light-4: #f5e3c0;
1265
- --el-color-warning-light-5: #f3dcb1;
1266
- --el-color-warning-light-6: #f1d5a1;
1267
- --el-color-warning-light-7: #eece91;
1268
- --el-color-warning-light-8: #ecc781;
1269
- --el-color-warning-light-9: #e9c072;
1270
- --el-color-warning-dark-2: #2e2514;
1294
+ --el-color-warning-light-1: #d0a758;
1295
+ --el-color-warning-light-2: #b9944e;
1296
+ --el-color-warning-light-3: #a28245;
1297
+ --el-color-warning-light-4: #8b6f3b;
1298
+ --el-color-warning-light-5: #745d31;
1299
+ --el-color-warning-light-6: #5c4a27;
1300
+ --el-color-warning-light-7: #45381d;
1301
+ --el-color-warning-light-8: #2e2514;
1302
+ --el-color-warning-light-9: #17130a;
1303
+ --el-color-warning-dark-2: #faf1e0;
1271
1304
  --el-color-danger: #FF7926;
1272
- --el-color-danger-light-1: #fff2e9;
1273
- --el-color-danger-light-2: #ffe4d4;
1274
- --el-color-danger-light-3: #ffd7be;
1275
- --el-color-danger-light-4: #ffc9a8;
1276
- --el-color-danger-light-5: #ffbc93;
1277
- --el-color-danger-light-6: #ffaf7d;
1278
- --el-color-danger-light-7: #ffa167;
1279
- --el-color-danger-light-8: #ff9451;
1280
- --el-color-danger-light-9: #ff863c;
1281
- --el-color-danger-dark-2: #331808;
1305
+ --el-color-danger-light-1: #e66d22;
1306
+ --el-color-danger-light-2: #cc611e;
1307
+ --el-color-danger-light-3: #b3551b;
1308
+ --el-color-danger-light-4: #994917;
1309
+ --el-color-danger-light-5: #803d13;
1310
+ --el-color-danger-light-6: #66300f;
1311
+ --el-color-danger-light-7: #4d240b;
1312
+ --el-color-danger-light-8: #331808;
1313
+ --el-color-danger-light-9: #1a0c04;
1314
+ --el-color-danger-dark-2: #ffe4d4;
1315
+ --el-color-error: #FF7926;
1316
+ --el-color-error-light-1: #e66d22;
1317
+ --el-color-error-light-2: #cc611e;
1318
+ --el-color-error-light-3: #b3551b;
1319
+ --el-color-error-light-4: #994917;
1320
+ --el-color-error-light-5: #803d13;
1321
+ --el-color-error-light-6: #66300f;
1322
+ --el-color-error-light-7: #4d240b;
1323
+ --el-color-error-light-8: #331808;
1324
+ --el-color-error-light-9: #1a0c04;
1325
+ --el-color-error-dark-2: #ffe4d4;
1282
1326
  --el-color-info: #95A6BA;
1283
- --el-color-info-light-1: #f4f6f8;
1284
- --el-color-info-light-2: #eaedf1;
1285
- --el-color-info-light-3: #dfe4ea;
1286
- --el-color-info-light-4: #d5dbe3;
1287
- --el-color-info-light-5: #cad3dd;
1288
- --el-color-info-light-6: #bfcad6;
1289
- --el-color-info-light-7: #b5c1cf;
1290
- --el-color-info-light-8: #aab8c8;
1291
- --el-color-info-light-9: #a0afc1;
1292
- --el-color-info-dark-2: #1e2125;
1327
+ --el-color-info-light-1: #8695a7;
1328
+ --el-color-info-light-2: #778595;
1329
+ --el-color-info-light-3: #687482;
1330
+ --el-color-info-light-4: #596470;
1331
+ --el-color-info-light-5: #4b535d;
1332
+ --el-color-info-light-6: #3c424a;
1333
+ --el-color-info-light-7: #2d3238;
1334
+ --el-color-info-light-8: #1e2125;
1335
+ --el-color-info-light-9: #0f1113;
1336
+ --el-color-info-dark-2: #eaedf1;
1293
1337
  --el-text-color-primary: #FFFFFF;
1294
1338
  --el-text-color-regular: rgba(255,255,255,0.7);
1295
1339
  --el-text-color-secondary: rgba(255,255,255,0.5);
@@ -1567,59 +1611,70 @@ body[data-theme='red-light'] {
1567
1611
  --zl-primary-10: #4d0017;
1568
1612
  --zl-link-10: #4d0017;
1569
1613
  --el-color-primary: #E60027;
1570
- --el-color-primary-light-1: #fde6e9;
1571
- --el-color-primary-light-2: #faccd4;
1572
- --el-color-primary-light-3: #f8b3be;
1573
- --el-color-primary-light-4: #f599a9;
1614
+ --el-color-primary-light-1: #e9193d;
1615
+ --el-color-primary-light-2: #eb3352;
1616
+ --el-color-primary-light-3: #ee4d68;
1617
+ --el-color-primary-light-4: #f0667d;
1574
1618
  --el-color-primary-light-5: #f38093;
1575
- --el-color-primary-light-6: #f0667d;
1576
- --el-color-primary-light-7: #ee4d68;
1577
- --el-color-primary-light-8: #eb3352;
1578
- --el-color-primary-light-9: #e9193d;
1619
+ --el-color-primary-light-6: #f599a9;
1620
+ --el-color-primary-light-7: #f8b3be;
1621
+ --el-color-primary-light-8: #faccd4;
1622
+ --el-color-primary-light-9: #fde6e9;
1579
1623
  --el-color-primary-dark-2: #2e0008;
1580
1624
  --el-color-success: #55BC8A;
1581
- --el-color-success-light-1: #eef8f3;
1582
- --el-color-success-light-2: #ddf2e8;
1583
- --el-color-success-light-3: #ccebdc;
1584
- --el-color-success-light-4: #bbe4d0;
1625
+ --el-color-success-light-1: #66c396;
1626
+ --el-color-success-light-2: #77c9a1;
1627
+ --el-color-success-light-3: #88d0ad;
1628
+ --el-color-success-light-4: #99d7b9;
1585
1629
  --el-color-success-light-5: #aadec5;
1586
- --el-color-success-light-6: #99d7b9;
1587
- --el-color-success-light-7: #88d0ad;
1588
- --el-color-success-light-8: #77c9a1;
1589
- --el-color-success-light-9: #66c396;
1630
+ --el-color-success-light-6: #bbe4d0;
1631
+ --el-color-success-light-7: #ccebdc;
1632
+ --el-color-success-light-8: #ddf2e8;
1633
+ --el-color-success-light-9: #eef8f3;
1590
1634
  --el-color-success-dark-2: #11261c;
1591
1635
  --el-color-warning: #F5A623;
1592
- --el-color-warning-light-1: #fef6e9;
1593
- --el-color-warning-light-2: #fdedd3;
1594
- --el-color-warning-light-3: #fce4bd;
1595
- --el-color-warning-light-4: #fbdba7;
1636
+ --el-color-warning-light-1: #f6af39;
1637
+ --el-color-warning-light-2: #f7b84f;
1638
+ --el-color-warning-light-3: #f8c165;
1639
+ --el-color-warning-light-4: #f9ca7b;
1596
1640
  --el-color-warning-light-5: #fad391;
1597
- --el-color-warning-light-6: #f9ca7b;
1598
- --el-color-warning-light-7: #f8c165;
1599
- --el-color-warning-light-8: #f7b84f;
1600
- --el-color-warning-light-9: #f6af39;
1641
+ --el-color-warning-light-6: #fbdba7;
1642
+ --el-color-warning-light-7: #fce4bd;
1643
+ --el-color-warning-light-8: #fdedd3;
1644
+ --el-color-warning-light-9: #fef6e9;
1601
1645
  --el-color-warning-dark-2: #312107;
1602
1646
  --el-color-danger: #FF5900;
1603
- --el-color-danger-light-1: #ffeee6;
1604
- --el-color-danger-light-2: #ffdecc;
1605
- --el-color-danger-light-3: #ffcdb3;
1606
- --el-color-danger-light-4: #ffbd99;
1647
+ --el-color-danger-light-1: #ff6a19;
1648
+ --el-color-danger-light-2: #ff7a33;
1649
+ --el-color-danger-light-3: #ff8b4d;
1650
+ --el-color-danger-light-4: #ff9b66;
1607
1651
  --el-color-danger-light-5: #ffac80;
1608
- --el-color-danger-light-6: #ff9b66;
1609
- --el-color-danger-light-7: #ff8b4d;
1610
- --el-color-danger-light-8: #ff7a33;
1611
- --el-color-danger-light-9: #ff6a19;
1652
+ --el-color-danger-light-6: #ffbd99;
1653
+ --el-color-danger-light-7: #ffcdb3;
1654
+ --el-color-danger-light-8: #ffdecc;
1655
+ --el-color-danger-light-9: #ffeee6;
1612
1656
  --el-color-danger-dark-2: #331200;
1657
+ --el-color-error: #FF5900;
1658
+ --el-color-error-light-1: #ff6a19;
1659
+ --el-color-error-light-2: #ff7a33;
1660
+ --el-color-error-light-3: #ff8b4d;
1661
+ --el-color-error-light-4: #ff9b66;
1662
+ --el-color-error-light-5: #ffac80;
1663
+ --el-color-error-light-6: #ffbd99;
1664
+ --el-color-error-light-7: #ffcdb3;
1665
+ --el-color-error-light-8: #ffdecc;
1666
+ --el-color-error-light-9: #ffeee6;
1667
+ --el-color-error-dark-2: #331200;
1613
1668
  --el-color-info: #79879C;
1614
- --el-color-info-light-1: #f2f3f5;
1615
- --el-color-info-light-2: #e4e7eb;
1616
- --el-color-info-light-3: #d7dbe1;
1617
- --el-color-info-light-4: #c9cfd7;
1669
+ --el-color-info-light-1: #8693a6;
1670
+ --el-color-info-light-2: #949fb0;
1671
+ --el-color-info-light-3: #a1abba;
1672
+ --el-color-info-light-4: #afb7c4;
1618
1673
  --el-color-info-light-5: #bcc3ce;
1619
- --el-color-info-light-6: #afb7c4;
1620
- --el-color-info-light-7: #a1abba;
1621
- --el-color-info-light-8: #949fb0;
1622
- --el-color-info-light-9: #8693a6;
1674
+ --el-color-info-light-6: #c9cfd7;
1675
+ --el-color-info-light-7: #d7dbe1;
1676
+ --el-color-info-light-8: #e4e7eb;
1677
+ --el-color-info-light-9: #f2f3f5;
1623
1678
  --el-color-info-dark-2: #181b1f;
1624
1679
  --el-text-color-primary: #242E43;
1625
1680
  --el-text-color-regular: #4D5E7D;
package/src/runtime/colors.ts CHANGED
@@ -50,12 +50,21 @@ export interface ElColorShades {
50
50
  'dark-2': string
51
51
  }
52
52
 
53
- /** EP 主色色阶：light-n = mix(白, 主色, n*10%)；dark-2 = mix(黑, 主色, 20%) */
54
- export function generateElShades(hex: string): ElColorShades {
53
+ /**
54
+ * EP 主色色阶：**light-n 中 n 越大越"靠背景"** ——
55
+ * 浅色主题往白走（light-9 ≈ 混 90% 白），深色主题往黑走（light-9 ≈ 混 90% 黑）；
56
+ * dark-2 则相反：浅色下更深（混黑），深色下更浅（混白）。
57
+ *
58
+ * ⚠️ mix(c1, c2, w) 的 w 是"混入 c2 的比例"，与 light-n 的 n 方向相反，
59
+ * 故必须用 (10 - i) * 10。写成 i * 10 会颠倒色阶，导致 el-tag / el-message /
60
+ * el-alert 的 light-9 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
61
+ */
62
+ export function generateElShades(hex: string, isDark = false): ElColorShades {
55
63
  const shades = {} as ElColorShades
64
+ const toBg = isDark ? '#000000' : '#ffffff'
56
65
  for (let i = 1; i <= 9; i++) {
57
- shades[`light-${i}` as keyof ElColorShades] = mix('#ffffff', hex, i * 10)
66
+ shades[`light-${i}` as keyof ElColorShades] = mix(toBg, hex, (10 - i) * 10)
58
67
  }
59
- shades['dark-2'] = mix('#000000', hex, 20)
68
+ shades['dark-2'] = mix(isDark ? '#ffffff' : '#000000', hex, 20)
60
69
  return shades
61
70
  }