@zl-ui-kit/theme 0.27.0 → 0.27.2

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.
@@ -1,487 +1,487 @@
1
- /* light 主题(由 scripts/themegen.mjs 生成,DO NOT EDIT) */
2
- body {
3
- --zl-bg-1: #ffffff;
4
- --zl-bg-2: #ffffff;
5
- --zl-bg-3: #ffffff;
6
- --zl-bg-4: #ffffff;
7
- --zl-bg-5: #ffffff;
8
- --zl-bg-more: #ffffff;
9
- --zl-blue-1: #e8fcff;
10
- --zl-blue-10: #002a4d;
11
- --zl-blue-2: #beebf5;
12
- --zl-blue-3: #97d9eb;
13
- --zl-blue-4: #73c6e2;
14
- --zl-blue-5: #51b2d8;
15
- --zl-blue-6: #329dce;
16
- --zl-blue-7: #207cae;
17
- --zl-blue-8: #115e8d;
18
- --zl-blue-9: #07426d;
19
- --zl-gray-2: #eff4f9;
20
- --zl-neutral-2: #eff4f9;
21
- --zl-border-1: #eff4f9;
22
- --zl-gray-3: #e3e9ef;
23
- --zl-neutral-3: #e3e9ef;
24
- --zl-border-2: #e3e9ef;
25
- --zl-gray-4: #b3c0cc;
26
- --zl-neutral-4: #b3c0cc;
27
- --zl-border-3: #b3c0cc;
28
- --zl-gray-6: #79879c;
29
- --zl-neutral-6: #79879c;
30
- --zl-border-4: #79879c;
31
- --zl-cyan-1: #e8fffa;
32
- --zl-cyan-10: #00424d;
33
- --zl-cyan-2: #bff4e9;
34
- --zl-cyan-3: #98e9dc;
35
- --zl-cyan-4: #74dfd0;
36
- --zl-cyan-5: #53d4c7;
37
- --zl-cyan-6: #35c9c0;
38
- --zl-cyan-7: #22aaa5;
39
- --zl-cyan-8: #128b8b;
40
- --zl-cyan-9: #07686c;
41
- --zl-red-1: #ffede8;
42
- --zl-danger-1: #ffede8;
43
- --zl-red-10: #4d0008;
44
- --zl-danger-10: #4d0008;
45
- --zl-red-2: #f3c6bd;
46
- --zl-danger-2: #f3c6bd;
47
- --zl-red-3: #e79f94;
48
- --zl-danger-3: #e79f94;
49
- --zl-red-4: #db7a6f;
50
- --zl-danger-4: #db7a6f;
51
- --zl-red-5: #cf564e;
52
- --zl-danger-5: #cf564e;
53
- --zl-red-6: #c3342f;
54
- --zl-danger-6: #c3342f;
55
- --zl-red-7: #a51e1e;
56
- --zl-danger-7: #a51e1e;
57
- --zl-red-8: #881014;
58
- --zl-danger-8: #881014;
59
- --zl-red-9: #6a060d;
60
- --zl-danger-9: #6a060d;
61
- --zl-gray-1: #f9fbfd;
62
- --zl-neutral-1: #f9fbfd;
63
- --zl-fill-1: #f9fbfd;
64
- --zl-fill-2: #eff4f9;
65
- --zl-fill-3: #e3e9ef;
66
- --zl-fill-4: #b3c0cc;
67
- --zl-gold-1: #fffee8;
68
- --zl-gold-10: #4d2d00;
69
- --zl-gold-2: #fdf8bf;
70
- --zl-gold-3: #fbef97;
71
- --zl-gold-4: #f9e470;
72
- --zl-gold-5: #f7d749;
73
- --zl-gold-6: #f5c723;
74
- --zl-gold-7: #cb9e16;
75
- --zl-gold-8: #a1760b;
76
- --zl-gold-9: #775204;
77
- --zl-gray-10: #242e43;
78
- --zl-gray-5: #95a6ba;
79
- --zl-gray-7: #5e708a;
80
- --zl-gray-8: #4d5e7d;
81
- --zl-gray-9: #35435e;
82
- --zl-green-1: #e8fff0;
83
- --zl-green-10: #004d32;
84
- --zl-green-2: #c6f2d7;
85
- --zl-green-3: #a6e4c0;
86
- --zl-green-4: #88d7ac;
87
- --zl-green-5: #6ec99a;
88
- --zl-green-6: #55bc8a;
89
- --zl-green-7: #36a071;
90
- --zl-green-8: #1e845a;
91
- --zl-green-9: #0c6845;
92
- --zl-lime-1: #f9ffe8;
93
- --zl-lime-10: #2a4d00;
94
- --zl-lime-2: #e4f2c6;
95
- --zl-lime-3: #cfe4a6;
96
- --zl-lime-4: #bad788;
97
- --zl-lime-5: #a5c96e;
98
- --zl-lime-6: #8fbc55;
99
- --zl-lime-7: #6fa036;
100
- --zl-lime-8: #51841e;
101
- --zl-lime-9: #37680c;
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
- --zl-magenta-1: #ffe8f4;
123
- --zl-magenta-10: #4d0034;
124
- --zl-magenta-2: #f6c6e0;
125
- --zl-magenta-3: #eea6cf;
126
- --zl-magenta-4: #e588c0;
127
- --zl-magenta-5: #dd6cb3;
128
- --zl-magenta-6: #d451a8;
129
- --zl-magenta-7: #b2338c;
130
- --zl-magenta-8: #901c71;
131
- --zl-magenta-9: #6e0b57;
132
- --zl-mask-bg: rgba(36, 46, 67, 0.6);
133
- --zl-neutral-10: #242e43;
134
- --zl-neutral-5: #95a6ba;
135
- --zl-neutral-7: #5e708a;
136
- --zl-neutral-8: #4d5e7d;
137
- --zl-neutral-9: #35435e;
138
- --zl-orange-1: #fffae8;
139
- --zl-orange-10: #4d2500;
140
- --zl-orange-2: #fdeebf;
141
- --zl-orange-3: #fbdf97;
142
- --zl-orange-4: #f9ce70;
143
- --zl-orange-5: #f7ba49;
144
- --zl-orange-6: #f5a623;
145
- --zl-orange-7: #cb7f16;
146
- --zl-orange-8: #a15e0b;
147
- --zl-orange-9: #773f04;
148
- --zl-orangered-1: #fff3e8;
149
- --zl-orangered-10: #4d0e00;
150
- --zl-orangered-2: #f9dac0;
151
- --zl-orangered-3: #f3bf99;
152
- --zl-orangered-4: #eea374;
153
- --zl-orangered-5: #e88651;
154
- --zl-orangered-6: #e2682f;
155
- --zl-orangered-7: #bd4b1d;
156
- --zl-orangered-8: #973210;
157
- --zl-orangered-9: #721d06;
158
- --zl-pinkpurple-1: #fde8ff;
159
- --zl-pinkpurple-10: #42004d;
160
- --zl-pinkpurple-2: #efc2f6;
161
- --zl-pinkpurple-3: #df9ded;
162
- --zl-pinkpurple-4: #cf7be3;
163
- --zl-pinkpurple-5: #bd5bda;
164
- --zl-pinkpurple-6: #ab3ed1;
165
- --zl-pinkpurple-7: #8727b0;
166
- --zl-pinkpurple-8: #66158f;
167
- --zl-pinkpurple-9: #48086e;
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
- --zl-purple-1: #f3e8ff;
179
- --zl-purple-10: #0e004d;
180
- --zl-purple-2: #d9c4f3;
181
- --zl-purple-3: #bfa2e8;
182
- --zl-purple-4: #a582dc;
183
- --zl-purple-5: #8b65d1;
184
- --zl-purple-6: #724bc5;
185
- --zl-purple-7: #5130a7;
186
- --zl-purple-8: #361a89;
187
- --zl-purple-9: #1f0a6b;
188
- --zl-shadow: rgba(36, 46, 67, 0.1);
189
- --zl-success-1: #e8fff0;
190
- --zl-success-10: #004d32;
191
- --zl-success-2: #c6f2d7;
192
- --zl-success-3: #a6e4c0;
193
- --zl-success-4: #88d7ac;
194
- --zl-success-5: #6ec99a;
195
- --zl-success-6: #55bc8a;
196
- --zl-success-7: #36a071;
197
- --zl-success-8: #1e845a;
198
- --zl-success-9: #0c6845;
199
- --zl-text-1: #242e43;
200
- --zl-text-2: #4d5e7d;
201
- --zl-text-3: #79879c;
202
- --zl-text-4: #b3c0cc;
203
- --zl-tooltip-bg: #242e43;
204
- --zl-warning-1: #fffae8;
205
- --zl-warning-10: #4d2500;
206
- --zl-warning-2: #fdeebf;
207
- --zl-warning-3: #fbdf97;
208
- --zl-warning-4: #f9ce70;
209
- --zl-warning-5: #f7ba49;
210
- --zl-warning-6: #f5a623;
211
- --zl-warning-7: #cb7f16;
212
- --zl-warning-8: #a15e0b;
213
- --zl-warning-9: #773f04;
214
- --zl-white: #ffffff;
215
- --zl-yellow-1: #fcffe8;
216
- --zl-yellow-10: #4d3800;
217
- --zl-yellow-2: #f7fccd;
218
- --zl-yellow-3: #f4f9b3;
219
- --zl-yellow-4: #f3f69a;
220
- --zl-yellow-5: #f3f380;
221
- --zl-yellow-6: #f0eb68;
222
- --zl-yellow-7: #c7be41;
223
- --zl-yellow-8: #9e9222;
224
- --zl-yellow-9: #75670d;
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
- --el-color-success: #55BC8A;
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
- --el-color-success-light-5: #aadec5;
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
- --el-color-success-dark-2: #44966e;
267
- --el-color-warning: #F5A623;
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
- --el-color-warning-light-5: #fad391;
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
- --el-color-warning-dark-2: #c4851c;
278
- --el-color-danger: #C3342F;
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
- --el-color-danger-light-5: #e19a97;
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
- --el-color-danger-dark-2: #9c2a26;
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: #9c2a26;
300
- --el-color-info: #79879C;
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;
305
- --el-color-info-light-5: #bcc3ce;
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;
310
- --el-color-info-dark-2: #616c7d;
311
- --el-text-color-primary: #242E43;
312
- --el-text-color-regular: #4D5E7D;
313
- --el-text-color-secondary: #79879C;
314
- --el-text-color-placeholder: #B3C0CC;
315
- --el-text-color-disabled: #B3C0CC;
316
- --el-border-color-extra-light: #EFF4F9;
317
- --el-border-color-lighter: #E3E9EF;
318
- --el-border-color-light: #B3C0CC;
319
- --el-border-color: #79879C;
320
- --el-border-color-dark: #79879C;
321
- --el-border-color-darker: #79879C;
322
- --el-fill-color-extra-light: #F9FBFD;
323
- --el-fill-color-lighter: #EFF4F9;
324
- --el-fill-color-light: #E3E9EF;
325
- --el-fill-color: #B3C0CC;
326
- --el-fill-color-dark: #B3C0CC;
327
- --el-fill-color-blank: #ffffff;
328
- --el-bg-color: #FFFFFF;
329
- --el-bg-color-page: #FFFFFF;
330
- --el-bg-color-overlay: #FFFFFF;
331
- --el-color-white: #ffffff;
332
- --el-color-black: #000000;
333
- --el-mask-color: rgb(0, 0, 0, 0.1);
334
- color-scheme: light;
335
- --el-border-radius-base: 4px;
336
- --el-border-radius-small: 2px;
337
- --zl-menu-hover-bg: var(--zl-fill-2);
338
- --zl-menu-text-color: var(--zl-text-1);
339
- --zl-menu-active-bg: var(--zl-primary-1);
340
- --zl-menu-active-color: var(--zl-primary-6);
341
- --zl-menu-active-border-color: var(--zl-primary-6);
342
- --zl-menu-icon-color: var(--zl-text-3);
343
- --zl-menu-font-size: 14px;
344
- --zl-menu-item-height: 40px;
345
- --zl-menu-trigger-arrow-color: #f6fafc;
346
- --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
347
- --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-primary-1) 0%, var(--zl-bg-1) 100%);
348
- --zl-layout-horizontal-header-bg: var(--zl-bg-1);
349
- --zl-radius-small: 2px;
350
- --zl-radius-base: 4px;
351
- --zl-radius-medium: 4px;
352
- --zl-radius-large: 6px;
353
- --zl-radius-xl: 12px;
354
- --zl-radius-round: 99px;
355
- --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
356
- --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
357
- }
358
- /* light 主题:表单控件边框态(由 scripts/themegen.mjs 生成,DO NOT EDIT) */
359
- body .el-input,
360
- body .el-textarea {
361
- --el-input-border-color: #DCDFE6;
362
- }
363
- body .el-select__wrapper {
364
- box-shadow: 0 0 0 1px #DCDFE6 inset;
365
- }
366
- body .el-select__wrapper.is-focused .el-select__caret,
367
- body .el-select__wrapper.is-focused .el-select__selected-item,
368
- body .el-select__wrapper.is-focused .el-select__placeholder:not(.is-transparent) {
369
- color: var(--el-color-primary);
370
- }
371
-
372
- /*
373
- * 全局 reset(随每套主题 CSS 一并注入;变量取 --zl-*,缺省回退为浅色值)
374
- * 由参考实现迁移,变量命名按需求 §7.2.1 统一 zl- 前缀
375
- */
376
-
377
- /* ============================================================
378
- * 开源字体(OFL-1.1)自托管:替换参考实现中的商业授权字体
379
- * - Noto Sans SC(思源黑体):通用中文正文字体,覆盖系统字体缺失场景
380
- * - Smiley Sans(得意黑):品牌标语展示字体,替换商业「方正」系列
381
- * 字体文件见本包 src/assets/fonts/(经 ./assets/* 导出)
382
- * ============================================================ */
383
- @font-face {
384
- font-family: 'Noto Sans SC';
385
- font-style: normal;
386
- font-weight: 400;
387
- font-display: swap;
388
- src: url(../assets/fonts/noto-sans-sc-400.woff2) format('woff2');
389
- }
390
- @font-face {
391
- font-family: 'Noto Sans SC';
392
- font-style: normal;
393
- font-weight: 500;
394
- font-display: swap;
395
- src: url(../assets/fonts/noto-sans-sc-500.woff2) format('woff2');
396
- }
397
- @font-face {
398
- font-family: 'Noto Sans SC';
399
- font-style: normal;
400
- font-weight: 700;
401
- font-display: swap;
402
- src: url(../assets/fonts/noto-sans-sc-700.woff2) format('woff2');
403
- }
404
- @font-face {
405
- font-family: 'Smiley Sans';
406
- font-style: normal;
407
- font-weight: 400;
408
- font-display: swap;
409
- src: url(../assets/fonts/smiley-sans.woff2) format('woff2');
410
- }
411
-
412
- :root {
413
- /* 品牌标语字体:默认得意黑(开源),回退思源黑体 / 系统字体;替换参考实现的商业字体 */
414
- --zl-slogan-font-family: 'Smiley Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
415
- }
416
-
417
- html,
418
- body,
419
- micro-app,
420
- #root,
421
- #app {
422
- height: 100%;
423
- }
424
-
425
- html,
426
- body {
427
- margin: 0;
428
- padding: 0;
429
- }
430
-
431
- #root {
432
- background: var(--zl-fill-2, #f0f2f5);
433
- color: var(--zl-text-2, #4d5e7d);
434
- font-size: 12px;
435
- line-height: 20px;
436
- overscroll-behavior: contain;
437
- font-family:
438
- Inter,
439
- -apple-system,
440
- BlinkMacSystemFont,
441
- 'PingFang SC',
442
- 'Hiragino Sans GB',
443
- 'Noto Sans SC',
444
- 'Microsoft YaHei',
445
- 'Helvetica Neue',
446
- Helvetica,
447
- Arial,
448
- sans-serif;
449
- }
450
-
451
- *,
452
- *::before,
453
- *::after {
454
- box-sizing: border-box;
455
- }
456
-
457
- ::-webkit-scrollbar {
458
- width: 10px;
459
- height: 10px;
460
- background: transparent;
461
- }
462
-
463
- ::-webkit-scrollbar-thumb {
464
- background: var(--zl-fill-3, #e3e9ef) content-box;
465
- border: 2px solid transparent;
466
- border-radius: 5px;
467
- }
468
-
469
- ::-webkit-scrollbar-thumb:hover {
470
- background-color: var(--zl-fill-4, rgb(179, 192, 204));
471
- }
472
-
473
- /*
474
- * Element Plus 组件样式覆盖(占位骨架)
475
- * 参考实现的 18 个组件覆盖基于原 UI 库类名体系,需按 EP 的 .el-* BEM 结构逐组件重写,
476
- * 以 playground 主题预览页视觉验收为准(需求 §7.2.2 / P15)。
477
- * 本文件随 per-theme CSS 一同生效;以下为首批全局性微调。
478
- */
479
-
480
- /* 与 zl 设计一致的圆角与动效基调 */
481
- .el-button {
482
- --el-button-border-radius: var(--zl-radius-base, 4px);
483
- }
484
-
485
- .el-dialog {
486
- --el-dialog-border-radius: var(--zl-radius-base, 4px);
487
- }
1
+ /* light 主题(由 scripts/themegen.mjs 生成,DO NOT EDIT) */
2
+ body {
3
+ --zl-bg-1: #ffffff;
4
+ --zl-bg-2: #ffffff;
5
+ --zl-bg-3: #ffffff;
6
+ --zl-bg-4: #ffffff;
7
+ --zl-bg-5: #ffffff;
8
+ --zl-bg-more: #ffffff;
9
+ --zl-blue-1: #e8fcff;
10
+ --zl-blue-10: #002a4d;
11
+ --zl-blue-2: #beebf5;
12
+ --zl-blue-3: #97d9eb;
13
+ --zl-blue-4: #73c6e2;
14
+ --zl-blue-5: #51b2d8;
15
+ --zl-blue-6: #329dce;
16
+ --zl-blue-7: #207cae;
17
+ --zl-blue-8: #115e8d;
18
+ --zl-blue-9: #07426d;
19
+ --zl-gray-2: #eff4f9;
20
+ --zl-neutral-2: #eff4f9;
21
+ --zl-border-1: #eff4f9;
22
+ --zl-gray-3: #e3e9ef;
23
+ --zl-neutral-3: #e3e9ef;
24
+ --zl-border-2: #e3e9ef;
25
+ --zl-gray-4: #b3c0cc;
26
+ --zl-neutral-4: #b3c0cc;
27
+ --zl-border-3: #b3c0cc;
28
+ --zl-gray-6: #79879c;
29
+ --zl-neutral-6: #79879c;
30
+ --zl-border-4: #79879c;
31
+ --zl-cyan-1: #e8fffa;
32
+ --zl-cyan-10: #00424d;
33
+ --zl-cyan-2: #bff4e9;
34
+ --zl-cyan-3: #98e9dc;
35
+ --zl-cyan-4: #74dfd0;
36
+ --zl-cyan-5: #53d4c7;
37
+ --zl-cyan-6: #35c9c0;
38
+ --zl-cyan-7: #22aaa5;
39
+ --zl-cyan-8: #128b8b;
40
+ --zl-cyan-9: #07686c;
41
+ --zl-red-1: #ffede8;
42
+ --zl-danger-1: #ffede8;
43
+ --zl-red-10: #4d0008;
44
+ --zl-danger-10: #4d0008;
45
+ --zl-red-2: #f3c6bd;
46
+ --zl-danger-2: #f3c6bd;
47
+ --zl-red-3: #e79f94;
48
+ --zl-danger-3: #e79f94;
49
+ --zl-red-4: #db7a6f;
50
+ --zl-danger-4: #db7a6f;
51
+ --zl-red-5: #cf564e;
52
+ --zl-danger-5: #cf564e;
53
+ --zl-red-6: #c3342f;
54
+ --zl-danger-6: #c3342f;
55
+ --zl-red-7: #a51e1e;
56
+ --zl-danger-7: #a51e1e;
57
+ --zl-red-8: #881014;
58
+ --zl-danger-8: #881014;
59
+ --zl-red-9: #6a060d;
60
+ --zl-danger-9: #6a060d;
61
+ --zl-gray-1: #f9fbfd;
62
+ --zl-neutral-1: #f9fbfd;
63
+ --zl-fill-1: #f9fbfd;
64
+ --zl-fill-2: #eff4f9;
65
+ --zl-fill-3: #e3e9ef;
66
+ --zl-fill-4: #b3c0cc;
67
+ --zl-gold-1: #fffee8;
68
+ --zl-gold-10: #4d2d00;
69
+ --zl-gold-2: #fdf8bf;
70
+ --zl-gold-3: #fbef97;
71
+ --zl-gold-4: #f9e470;
72
+ --zl-gold-5: #f7d749;
73
+ --zl-gold-6: #f5c723;
74
+ --zl-gold-7: #cb9e16;
75
+ --zl-gold-8: #a1760b;
76
+ --zl-gold-9: #775204;
77
+ --zl-gray-10: #242e43;
78
+ --zl-gray-5: #95a6ba;
79
+ --zl-gray-7: #5e708a;
80
+ --zl-gray-8: #4d5e7d;
81
+ --zl-gray-9: #35435e;
82
+ --zl-green-1: #e8fff0;
83
+ --zl-green-10: #004d32;
84
+ --zl-green-2: #c6f2d7;
85
+ --zl-green-3: #a6e4c0;
86
+ --zl-green-4: #88d7ac;
87
+ --zl-green-5: #6ec99a;
88
+ --zl-green-6: #55bc8a;
89
+ --zl-green-7: #36a071;
90
+ --zl-green-8: #1e845a;
91
+ --zl-green-9: #0c6845;
92
+ --zl-lime-1: #f9ffe8;
93
+ --zl-lime-10: #2a4d00;
94
+ --zl-lime-2: #e4f2c6;
95
+ --zl-lime-3: #cfe4a6;
96
+ --zl-lime-4: #bad788;
97
+ --zl-lime-5: #a5c96e;
98
+ --zl-lime-6: #8fbc55;
99
+ --zl-lime-7: #6fa036;
100
+ --zl-lime-8: #51841e;
101
+ --zl-lime-9: #37680c;
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
+ --zl-magenta-1: #ffe8f4;
123
+ --zl-magenta-10: #4d0034;
124
+ --zl-magenta-2: #f6c6e0;
125
+ --zl-magenta-3: #eea6cf;
126
+ --zl-magenta-4: #e588c0;
127
+ --zl-magenta-5: #dd6cb3;
128
+ --zl-magenta-6: #d451a8;
129
+ --zl-magenta-7: #b2338c;
130
+ --zl-magenta-8: #901c71;
131
+ --zl-magenta-9: #6e0b57;
132
+ --zl-mask-bg: rgba(36, 46, 67, 0.6);
133
+ --zl-neutral-10: #242e43;
134
+ --zl-neutral-5: #95a6ba;
135
+ --zl-neutral-7: #5e708a;
136
+ --zl-neutral-8: #4d5e7d;
137
+ --zl-neutral-9: #35435e;
138
+ --zl-orange-1: #fffae8;
139
+ --zl-orange-10: #4d2500;
140
+ --zl-orange-2: #fdeebf;
141
+ --zl-orange-3: #fbdf97;
142
+ --zl-orange-4: #f9ce70;
143
+ --zl-orange-5: #f7ba49;
144
+ --zl-orange-6: #f5a623;
145
+ --zl-orange-7: #cb7f16;
146
+ --zl-orange-8: #a15e0b;
147
+ --zl-orange-9: #773f04;
148
+ --zl-orangered-1: #fff3e8;
149
+ --zl-orangered-10: #4d0e00;
150
+ --zl-orangered-2: #f9dac0;
151
+ --zl-orangered-3: #f3bf99;
152
+ --zl-orangered-4: #eea374;
153
+ --zl-orangered-5: #e88651;
154
+ --zl-orangered-6: #e2682f;
155
+ --zl-orangered-7: #bd4b1d;
156
+ --zl-orangered-8: #973210;
157
+ --zl-orangered-9: #721d06;
158
+ --zl-pinkpurple-1: #fde8ff;
159
+ --zl-pinkpurple-10: #42004d;
160
+ --zl-pinkpurple-2: #efc2f6;
161
+ --zl-pinkpurple-3: #df9ded;
162
+ --zl-pinkpurple-4: #cf7be3;
163
+ --zl-pinkpurple-5: #bd5bda;
164
+ --zl-pinkpurple-6: #ab3ed1;
165
+ --zl-pinkpurple-7: #8727b0;
166
+ --zl-pinkpurple-8: #66158f;
167
+ --zl-pinkpurple-9: #48086e;
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
+ --zl-purple-1: #f3e8ff;
179
+ --zl-purple-10: #0e004d;
180
+ --zl-purple-2: #d9c4f3;
181
+ --zl-purple-3: #bfa2e8;
182
+ --zl-purple-4: #a582dc;
183
+ --zl-purple-5: #8b65d1;
184
+ --zl-purple-6: #724bc5;
185
+ --zl-purple-7: #5130a7;
186
+ --zl-purple-8: #361a89;
187
+ --zl-purple-9: #1f0a6b;
188
+ --zl-shadow: rgba(36, 46, 67, 0.1);
189
+ --zl-success-1: #e8fff0;
190
+ --zl-success-10: #004d32;
191
+ --zl-success-2: #c6f2d7;
192
+ --zl-success-3: #a6e4c0;
193
+ --zl-success-4: #88d7ac;
194
+ --zl-success-5: #6ec99a;
195
+ --zl-success-6: #55bc8a;
196
+ --zl-success-7: #36a071;
197
+ --zl-success-8: #1e845a;
198
+ --zl-success-9: #0c6845;
199
+ --zl-text-1: #242e43;
200
+ --zl-text-2: #4d5e7d;
201
+ --zl-text-3: #79879c;
202
+ --zl-text-4: #b3c0cc;
203
+ --zl-tooltip-bg: #242e43;
204
+ --zl-warning-1: #fffae8;
205
+ --zl-warning-10: #4d2500;
206
+ --zl-warning-2: #fdeebf;
207
+ --zl-warning-3: #fbdf97;
208
+ --zl-warning-4: #f9ce70;
209
+ --zl-warning-5: #f7ba49;
210
+ --zl-warning-6: #f5a623;
211
+ --zl-warning-7: #cb7f16;
212
+ --zl-warning-8: #a15e0b;
213
+ --zl-warning-9: #773f04;
214
+ --zl-white: #ffffff;
215
+ --zl-yellow-1: #fcffe8;
216
+ --zl-yellow-10: #4d3800;
217
+ --zl-yellow-2: #f7fccd;
218
+ --zl-yellow-3: #f4f9b3;
219
+ --zl-yellow-4: #f3f69a;
220
+ --zl-yellow-5: #f3f380;
221
+ --zl-yellow-6: #f0eb68;
222
+ --zl-yellow-7: #c7be41;
223
+ --zl-yellow-8: #9e9222;
224
+ --zl-yellow-9: #75670d;
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
+ --el-color-success: #55BC8A;
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
+ --el-color-success-light-5: #aadec5;
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
+ --el-color-success-dark-2: #44966e;
267
+ --el-color-warning: #F5A623;
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
+ --el-color-warning-light-5: #fad391;
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
+ --el-color-warning-dark-2: #c4851c;
278
+ --el-color-danger: #C3342F;
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
+ --el-color-danger-light-5: #e19a97;
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
+ --el-color-danger-dark-2: #9c2a26;
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: #9c2a26;
300
+ --el-color-info: #79879C;
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;
305
+ --el-color-info-light-5: #bcc3ce;
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;
310
+ --el-color-info-dark-2: #616c7d;
311
+ --el-text-color-primary: #242E43;
312
+ --el-text-color-regular: #4D5E7D;
313
+ --el-text-color-secondary: #79879C;
314
+ --el-text-color-placeholder: #B3C0CC;
315
+ --el-text-color-disabled: #B3C0CC;
316
+ --el-border-color-extra-light: #EFF4F9;
317
+ --el-border-color-lighter: #E3E9EF;
318
+ --el-border-color-light: #B3C0CC;
319
+ --el-border-color: #79879C;
320
+ --el-border-color-dark: #79879C;
321
+ --el-border-color-darker: #79879C;
322
+ --el-fill-color-extra-light: #F9FBFD;
323
+ --el-fill-color-lighter: #EFF4F9;
324
+ --el-fill-color-light: #E3E9EF;
325
+ --el-fill-color: #B3C0CC;
326
+ --el-fill-color-dark: #B3C0CC;
327
+ --el-fill-color-blank: #ffffff;
328
+ --el-bg-color: #FFFFFF;
329
+ --el-bg-color-page: #FFFFFF;
330
+ --el-bg-color-overlay: #FFFFFF;
331
+ --el-color-white: #ffffff;
332
+ --el-color-black: #000000;
333
+ --el-mask-color: rgb(0, 0, 0, 0.1);
334
+ color-scheme: light;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
337
+ --zl-menu-hover-bg: var(--zl-fill-2);
338
+ --zl-menu-text-color: var(--zl-text-1);
339
+ --zl-menu-active-bg: var(--zl-primary-1);
340
+ --zl-menu-active-color: var(--zl-primary-6);
341
+ --zl-menu-active-border-color: var(--zl-primary-6);
342
+ --zl-menu-icon-color: var(--zl-text-3);
343
+ --zl-menu-font-size: 14px;
344
+ --zl-menu-item-height: 40px;
345
+ --zl-menu-trigger-arrow-color: #f6fafc;
346
+ --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
347
+ --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-primary-1) 0%, var(--zl-bg-1) 100%);
348
+ --zl-layout-horizontal-header-bg: var(--zl-bg-1);
349
+ --zl-radius-small: 2px;
350
+ --zl-radius-base: 4px;
351
+ --zl-radius-medium: 4px;
352
+ --zl-radius-large: 6px;
353
+ --zl-radius-xl: 12px;
354
+ --zl-radius-round: 99px;
355
+ --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
356
+ --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
357
+ }
358
+ /* light 主题:表单控件边框态(由 scripts/themegen.mjs 生成,DO NOT EDIT) */
359
+ body .el-input,
360
+ body .el-textarea {
361
+ --el-input-border-color: #DCDFE6;
362
+ }
363
+ body .el-select__wrapper {
364
+ box-shadow: 0 0 0 1px #DCDFE6 inset;
365
+ }
366
+ body .el-select__wrapper.is-focused .el-select__caret,
367
+ body .el-select__wrapper.is-focused .el-select__selected-item,
368
+ body .el-select__wrapper.is-focused .el-select__placeholder:not(.is-transparent) {
369
+ color: var(--el-color-primary);
370
+ }
371
+
372
+ /*
373
+ * 全局 reset(随每套主题 CSS 一并注入;变量取 --zl-*,缺省回退为浅色值)
374
+ * 由参考实现迁移,变量命名按需求 §7.2.1 统一 zl- 前缀
375
+ */
376
+
377
+ /* ============================================================
378
+ * 开源字体(OFL-1.1)自托管:替换参考实现中的商业授权字体
379
+ * - Noto Sans SC(思源黑体):通用中文正文字体,覆盖系统字体缺失场景
380
+ * - Smiley Sans(得意黑):品牌标语展示字体,替换商业「方正」系列
381
+ * 字体文件见本包 src/assets/fonts/(经 ./assets/* 导出)
382
+ * ============================================================ */
383
+ @font-face {
384
+ font-family: 'Noto Sans SC';
385
+ font-style: normal;
386
+ font-weight: 400;
387
+ font-display: swap;
388
+ src: url(../assets/fonts/noto-sans-sc-400.woff2) format('woff2');
389
+ }
390
+ @font-face {
391
+ font-family: 'Noto Sans SC';
392
+ font-style: normal;
393
+ font-weight: 500;
394
+ font-display: swap;
395
+ src: url(../assets/fonts/noto-sans-sc-500.woff2) format('woff2');
396
+ }
397
+ @font-face {
398
+ font-family: 'Noto Sans SC';
399
+ font-style: normal;
400
+ font-weight: 700;
401
+ font-display: swap;
402
+ src: url(../assets/fonts/noto-sans-sc-700.woff2) format('woff2');
403
+ }
404
+ @font-face {
405
+ font-family: 'Smiley Sans';
406
+ font-style: normal;
407
+ font-weight: 400;
408
+ font-display: swap;
409
+ src: url(../assets/fonts/smiley-sans.woff2) format('woff2');
410
+ }
411
+
412
+ :root {
413
+ /* 品牌标语字体:默认得意黑(开源),回退思源黑体 / 系统字体;替换参考实现的商业字体 */
414
+ --zl-slogan-font-family: 'Smiley Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
415
+ }
416
+
417
+ html,
418
+ body,
419
+ micro-app,
420
+ #root,
421
+ #app {
422
+ height: 100%;
423
+ }
424
+
425
+ html,
426
+ body {
427
+ margin: 0;
428
+ padding: 0;
429
+ }
430
+
431
+ #root {
432
+ background: var(--zl-fill-2, #f0f2f5);
433
+ color: var(--zl-text-2, #4d5e7d);
434
+ font-size: 12px;
435
+ line-height: 20px;
436
+ overscroll-behavior: contain;
437
+ font-family:
438
+ Inter,
439
+ -apple-system,
440
+ BlinkMacSystemFont,
441
+ 'PingFang SC',
442
+ 'Hiragino Sans GB',
443
+ 'Noto Sans SC',
444
+ 'Microsoft YaHei',
445
+ 'Helvetica Neue',
446
+ Helvetica,
447
+ Arial,
448
+ sans-serif;
449
+ }
450
+
451
+ *,
452
+ *::before,
453
+ *::after {
454
+ box-sizing: border-box;
455
+ }
456
+
457
+ ::-webkit-scrollbar {
458
+ width: 10px;
459
+ height: 10px;
460
+ background: transparent;
461
+ }
462
+
463
+ ::-webkit-scrollbar-thumb {
464
+ background: var(--zl-fill-3, #e3e9ef) content-box;
465
+ border: 2px solid transparent;
466
+ border-radius: 5px;
467
+ }
468
+
469
+ ::-webkit-scrollbar-thumb:hover {
470
+ background-color: var(--zl-fill-4, rgb(179, 192, 204));
471
+ }
472
+
473
+ /*
474
+ * Element Plus 组件样式覆盖(占位骨架)
475
+ * 参考实现的 18 个组件覆盖基于原 UI 库类名体系,需按 EP 的 .el-* BEM 结构逐组件重写,
476
+ * 以 playground 主题预览页视觉验收为准(需求 §7.2.2 / P15)。
477
+ * 本文件随 per-theme CSS 一同生效;以下为首批全局性微调。
478
+ */
479
+
480
+ /* 与 zl 设计一致的圆角与动效基调 */
481
+ .el-button {
482
+ --el-button-border-radius: var(--zl-radius-base, 4px);
483
+ }
484
+
485
+ .el-dialog {
486
+ --el-dialog-border-radius: var(--zl-radius-base, 4px);
487
+ }