@zl-ui-kit/theme 0.5.0 → 0.6.0

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 (12) hide show
  1. package/README.md +7 -7
  2. package/dist/index.d.ts +10 -2
  3. package/dist/index.js +31 -13
  4. package/package.json +1 -1
  5. package/src/generated/theme-blue.css +51 -40
  6. package/src/generated/theme-dark.css +61 -50
  7. package/src/generated/theme-light.css +51 -40
  8. package/src/generated/theme-red-dark.css +61 -50
  9. package/src/generated/theme-red-light.css +51 -40
  10. package/src/generated/themes.css +275 -220
  11. package/src/runtime/api.ts +27 -17
  12. package/src/runtime/colors.ts +23 -8
package/README.md CHANGED
@@ -8,7 +8,7 @@ ZL UI 主题引擎（决策 D7）：内置 5 套主题（light/dark/red-light/re
8
8
  ## 快速上手
9
9
 
10
10
  ```ts
11
- import '@zl-ui-kit/theme/themes.css' // 或按需 '@zl-ui-kit/theme/light'
11
+ import '@zl-ui-kit/theme/themes.css' // 或按需 '@zl-ui-kit/theme/light'
12
12
  import { setTheme, defineTheme, useTheme } from '@zl-ui-kit/theme'
13
13
 
14
14
  setTheme('dark')
@@ -20,12 +20,12 @@ defineTheme({ name: 'brand', base: 'light', colors: { primary: '#722ED1' }, appl
20
20
 
21
21
  ## 入口
22
22
 
23
- | 入口 | 内容 |
24
- | --- | --- |
25
- | `.` | 运行时 API（defineTheme/setTheme/useTheme/mix/generateElShades）+ 常量 |
26
- | `/light` `/dark` `/red-light` `/red-dark` `/blue` `/themes.css` | 每主题/合集预编译 CSS（变量 + reset + overrides） |
27
- | `/scss`（及 `/scss/*.scss`） | SCSS 工具（colorForEach/colorGradient/theme mixin/mapGet） |
28
- | `/assets/*` | 主题背景图 |
23
+ | 入口 | 内容 |
24
+ | --------------------------------------------------------------- | ---------------------------------------------------------------------- |
25
+ | `.` | 运行时 API（defineTheme/setTheme/useTheme/mix/generateElShades）+ 常量 |
26
+ | `/light` `/dark` `/red-light` `/red-dark` `/blue` `/themes.css` | 每主题/合集预编译 CSS（变量 + reset + overrides） |
27
+ | `/scss`（及 `/scss/*.scss`） | SCSS 工具（colorForEach/colorGradient/theme mixin/mapGet） |
28
+ | `/assets/*` | 主题背景图 |
29
29
 
30
30
  ## 本地调试
31
31
 
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
@@ -1132,7 +1132,11 @@ function parseColor(str) {
1132
1132
  let hex = s.slice(1);
1133
1133
  if (hex.length === 3)
1134
1134
  hex = hex.split("").map((c) => c + c).join("");
1135
- return [Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16)];
1135
+ return [
1136
+ Number.parseInt(hex.slice(0, 2), 16),
1137
+ Number.parseInt(hex.slice(2, 4), 16),
1138
+ Number.parseInt(hex.slice(4, 6), 16)
1139
+ ];
1136
1140
  }
1137
1141
  const m = s.match(/rgba?\(([^)]+)\)/);
1138
1142
  if (m) {
@@ -1151,17 +1155,17 @@ function toHex([r, g, b]) {
1151
1155
  function mix(color1, color2, weight) {
1152
1156
  const c1 = parseColor(color1);
1153
1157
  const c2 = parseColor(color2);
1154
- if (!c1 || !c2)
1155
- return color1;
1158
+ if (!c1 || !c2) return color1;
1156
1159
  const w = weight / 100;
1157
1160
  return toHex([c1[0] * (1 - w) + c2[0] * w, c1[1] * (1 - w) + c2[1] * w, c1[2] * (1 - w) + c2[2] * w]);
1158
1161
  }
1159
- function generateElShades(hex) {
1162
+ function generateElShades(hex, isDark = false) {
1160
1163
  const shades = {};
1164
+ const toBg = isDark ? "#000000" : "#ffffff";
1161
1165
  for (let i = 1; i <= 9; i++) {
1162
- shades[`light-${i}`] = mix("#ffffff", hex, i * 10);
1166
+ shades[`light-${i}`] = mix(toBg, hex, (10 - i) * 10);
1163
1167
  }
1164
- shades["dark-2"] = mix("#000000", hex, 20);
1168
+ shades["dark-2"] = mix(isDark ? "#ffffff" : "#000000", hex, 20);
1165
1169
  return shades;
1166
1170
  }
1167
1171
 
@@ -1206,13 +1210,28 @@ function buildCssVars(resolved, themeName) {
1206
1210
  decls.push(`--el-color-${name}-${shade}: ${value};`);
1207
1211
  }
1208
1212
  }
1209
- const textMap = { primary: "text-1", regular: "text-2", secondary: "text-3", placeholder: "text-4", disabled: "text-5" };
1210
- for (const [el, token] of Object.entries(textMap))
1211
- decls.push(`--el-text-color-${el}: ${get(token)};`);
1212
- const borderMap = [["extra-light", "border-1"], ["lighter", "border-2"], ["light", "border-3"], ["", "border-4"]];
1213
+ const textMap = {
1214
+ primary: "text-1",
1215
+ regular: "text-2",
1216
+ secondary: "text-3",
1217
+ placeholder: "text-4",
1218
+ disabled: "text-5"
1219
+ };
1220
+ for (const [el, token] of Object.entries(textMap)) decls.push(`--el-text-color-${el}: ${get(token)};`);
1221
+ const borderMap = [
1222
+ ["extra-light", "border-1"],
1223
+ ["lighter", "border-2"],
1224
+ ["light", "border-3"],
1225
+ ["", "border-4"]
1226
+ ];
1213
1227
  for (const [suffix, token] of borderMap)
1214
1228
  decls.push(`--el-border-color${suffix ? `-${suffix}` : ""}: ${get(token)};`);
1215
- const fillMap = [["extra-light", "fill-1"], ["lighter", "fill-2"], ["light", "fill-3"], ["", "fill-4"]];
1229
+ const fillMap = [
1230
+ ["extra-light", "fill-1"],
1231
+ ["lighter", "fill-2"],
1232
+ ["light", "fill-3"],
1233
+ ["", "fill-4"]
1234
+ ];
1216
1235
  for (const [suffix, token] of fillMap)
1217
1236
  decls.push(`--el-fill-color${suffix ? `-${suffix}` : ""}: ${get(token)};`);
1218
1237
  decls.push(`--el-fill-color-blank: ${isDark ? get("bg-2") : "#ffffff"};`);
@@ -1256,8 +1275,7 @@ function defineTheme(options) {
1256
1275
  resolved[`color-${palette}-${level}`] = hex;
1257
1276
  const seedLevel = Number(level);
1258
1277
  for (let i = 1; i <= 10; i++) {
1259
- if (i === seedLevel)
1260
- continue;
1278
+ if (i === seedLevel) continue;
1261
1279
  const weight = Math.abs(i - seedLevel) / 5 * 50;
1262
1280
  resolved[`color-${palette}-${i}`] = i < seedLevel ? mix("#ffffff", hex, 100 - weight) : mix("#000000", hex, 100 - weight);
1263
1281
  }
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.6.0",
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/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);