@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,474 +1,474 @@
1
- /* red-dark 主题(由 scripts/themegen.mjs 生成,DO NOT EDIT) */
2
- body[data-theme='red-dark'] {
3
- --zl-bg-1: #171f30;
4
- --zl-bg-2: #212a3c;
5
- --zl-bg-3: #313e56;
6
- --zl-bg-4: #3d4b65;
7
- --zl-bg-5: #576b87;
8
- --zl-bg-more: #76879f;
9
- --zl-blue-1: rgba(85,179,216,0.2);
10
- --zl-blue-10: #e9fcff;
11
- --zl-blue-2: rgba(85,179,216,0.35);
12
- --zl-blue-3: rgba(85,179,216,0.5);
13
- --zl-blue-4: rgba(85,179,216,0.65);
14
- --zl-blue-5: #40a2ce;
15
- --zl-blue-6: #55b3d8;
16
- --zl-blue-7: #76c7e2;
17
- --zl-blue-8: #99daeb;
18
- --zl-blue-9: #c0ebf5;
19
- --zl-gray-2: #35435e;
20
- --zl-neutral-2: #35435e;
21
- --zl-border-1: #35435e;
22
- --zl-gray-3: #4d5e7d;
23
- --zl-neutral-3: #4d5e7d;
24
- --zl-border-2: #4d5e7d;
25
- --zl-gray-4: #5e708a;
26
- --zl-neutral-4: #5e708a;
27
- --zl-border-3: #5e708a;
28
- --zl-gray-6: #95a6ba;
29
- --zl-neutral-6: #95a6ba;
30
- --zl-border-4: #95a6ba;
31
- --zl-cyan-1: rgba(98,212,201,0.2);
32
- --zl-cyan-10: #f1fffc;
33
- --zl-cyan-2: rgba(98,212,201,0.35);
34
- --zl-cyan-3: rgba(98,212,201,0.5);
35
- --zl-cyan-4: rgba(45,170,165,0.65);
36
- --zl-cyan-5: #49c9c1;
37
- --zl-cyan-6: #62d4c9;
38
- --zl-cyan-7: #82dfd2;
39
- --zl-cyan-8: #a4e9de;
40
- --zl-cyan-9: #c9f4eb;
41
- --zl-danger-1: rgba(255,121,38,0.2);
42
- --zl-red-10: #fff4e8;
43
- --zl-danger-10: #fff4e8;
44
- --zl-danger-2: rgba(255,121,38,0.35);
45
- --zl-danger-3: rgba(255,121,38,0.5);
46
- --zl-danger-4: rgba(255,121,38,0.65);
47
- --zl-red-5: #ff6d1f;
48
- --zl-danger-5: #ff6d1f;
49
- --zl-red-6: #ff7926;
50
- --zl-danger-6: #ff7926;
51
- --zl-red-7: #ff9c57;
52
- --zl-danger-7: #ff9c57;
53
- --zl-red-8: #ffbd87;
54
- --zl-danger-8: #ffbd87;
55
- --zl-red-9: #ffdab8;
56
- --zl-danger-9: #ffdab8;
57
- --zl-gray-1: #242e43;
58
- --zl-neutral-1: #242e43;
59
- --zl-fill-1: #242e43;
60
- --zl-fill-2: #35435e;
61
- --zl-fill-3: #4d5e7d;
62
- --zl-fill-4: #5e708a;
63
- --zl-gold-1: rgba(247,215,72,0.2);
64
- --zl-gold-10: #fffeee;
65
- --zl-gold-2: rgba(247,215,72,0.35);
66
- --zl-gold-3: rgba(247,215,72,0.5);
67
- --zl-gold-4: rgba(247,215,72,0.65);
68
- --zl-gold-5: #f5cc39;
69
- --zl-gold-6: #f7d748;
70
- --zl-gold-7: #f9e471;
71
- --zl-gold-8: #fbef9a;
72
- --zl-gold-9: #fdf8c4;
73
- --zl-gray-10: #f9fbfd;
74
- --zl-gray-5: #79879c;
75
- --zl-gray-7: #b3c0cc;
76
- --zl-gray-8: #e3e9ef;
77
- --zl-gray-9: #eff4f9;
78
- --zl-green-1: #004d32;
79
- --zl-green-10: #eefff4;
80
- --zl-green-2: #0a6844;
81
- --zl-green-3: #1f845a;
82
- --zl-green-4: #3ca073;
83
- --zl-green-5: #60bc8f;
84
- --zl-green-6: #70c69a;
85
- --zl-green-7: #9bd7b6;
86
- --zl-green-8: #b5e4c8;
87
- --zl-green-9: #d1f2de;
88
- --zl-lime-1: rgba(173,201,131,0.2);
89
- --zl-lime-10: #faffee;
90
- --zl-lime-2: rgba(173,201,131,0.35);
91
- --zl-lime-3: rgba(173,201,131,0.5);
92
- --zl-lime-4: rgba(173,201,131,0.65);
93
- --zl-lime-5: #94bc60;
94
- --zl-lime-6: #adc983;
95
- --zl-lime-7: #c1d79b;
96
- --zl-lime-8: #d4e4b5;
97
- --zl-lime-9: #e7f2d1;
98
- --zl-link-1: rgba(235,35,61,0.2);
99
- --zl-modo-10: #ffe8e8;
100
- --zl-link-10: #ffe8e8;
101
- --zl-link-2: rgba(235,35,61,0.35);
102
- --zl-link-3: rgba(235,35,61,0.5);
103
- --zl-link-4: rgba(235,35,61,0.65);
104
- --zl-modo-5: #e61c3e;
105
- --zl-link-5: #e61c3e;
106
- --zl-modo-6: #eb233d;
107
- --zl-link-6: #eb233d;
108
- --zl-modo-7: #f05262;
109
- --zl-link-7: #f05262;
110
- --zl-modo-8: #f58289;
111
- --zl-link-8: #f58289;
112
- --zl-modo-9: #fab4b6;
113
- --zl-link-9: #fab4b6;
114
- --zl-magenta-1: rgba(221,118,183,0.2);
115
- --zl-magenta-10: #ffeef7;
116
- --zl-magenta-2: rgba(221,118,183,0.35);
117
- --zl-magenta-3: rgba(221,118,183,0.5);
118
- --zl-magenta-4: rgba(221,118,183,0.65);
119
- --zl-magenta-5: #d459ab;
120
- --zl-magenta-6: #dd76b7;
121
- --zl-magenta-7: #e591c3;
122
- --zl-magenta-8: #eeaed3;
123
- --zl-magenta-9: #f6cde3;
124
- --zl-mask-bg: rgba(36,46,67,0.6);
125
- --zl-modo-1: #4d0017;
126
- --zl-modo-2: #730322;
127
- --zl-modo-3: #99092b;
128
- --zl-modo-4: #c01134;
129
- --zl-neutral-10: #f9fbfd;
130
- --zl-neutral-5: #79879c;
131
- --zl-neutral-7: #b3c0cc;
132
- --zl-neutral-8: #e3e9ef;
133
- --zl-neutral-9: #eff4f9;
134
- --zl-orange-1: #4d2500;
135
- --zl-orange-10: #fffbee;
136
- --zl-orange-2: #774006;
137
- --zl-orange-3: #a16112;
138
- --zl-orange-4: #cb8423;
139
- --zl-orange-5: #e5ae55;
140
- --zl-orange-6: #e7b962;
141
- --zl-orange-7: #f9ce71;
142
- --zl-orange-8: #fbe09a;
143
- --zl-orange-9: #fdefc4;
144
- --zl-orangered-1: rgba(232,135,83,0.2);
145
- --zl-orangered-10: #fff4ea;
146
- --zl-orangered-2: rgba(232,135,83,0.35);
147
- --zl-orangered-3: rgba(232,135,83,0.5);
148
- --zl-orangered-4: rgba(232,135,83,0.65);
149
- --zl-orangered-5: #e2733f;
150
- --zl-orangered-6: #e88753;
151
- --zl-orangered-7: #eea577;
152
- --zl-orangered-8: #f3c09b;
153
- --zl-orangered-9: #f9dbc2;
154
- --zl-pinkpurple-1: rgba(190,97,218,0.2);
155
- --zl-pinkpurple-10: #fdecff;
156
- --zl-pinkpurple-2: rgba(190,97,218,0.35);
157
- --zl-pinkpurple-3: rgba(190,97,218,0.5);
158
- --zl-pinkpurple-4: rgba(190,97,218,0.65);
159
- --zl-pinkpurple-5: #ae4bd1;
160
- --zl-pinkpurple-6: #be61da;
161
- --zl-pinkpurple-7: #d081e3;
162
- --zl-pinkpurple-8: #e0a3ed;
163
- --zl-pinkpurple-9: #f0c6f6;
164
- --zl-primary-1: rgba(235,35,61,0.2);
165
- --zl-primary-10: #ffe8e8;
166
- --zl-primary-2: rgba(235,35,61,0.35);
167
- --zl-primary-3: rgba(235,35,61,0.5);
168
- --zl-primary-4: rgba(235,35,61,0.65);
169
- --zl-primary-5: #e61c3e;
170
- --zl-primary-6: #eb233d;
171
- --zl-primary-7: #f05262;
172
- --zl-primary-8: #f58289;
173
- --zl-primary-9: #fab4b6;
174
- --zl-purple-1: rgba(145,111,209,0.2);
175
- --zl-purple-10: #f6edff;
176
- --zl-purple-2: rgba(145,111,209,0.35);
177
- --zl-purple-3: rgba(145,111,209,0.5);
178
- --zl-purple-4: rgba(145,111,209,0.65);
179
- --zl-purple-5: #7753c5;
180
- --zl-purple-6: #916fd1;
181
- --zl-purple-7: #aa8bdc;
182
- --zl-purple-8: #c3aae8;
183
- --zl-purple-9: #dccaf3;
184
- --zl-red-1: #4d1100;
185
- --zl-red-2: #792104;
186
- --zl-red-3: #a6360a;
187
- --zl-red-4: #d25013;
188
- --zl-shadow: rgba(0,0,0,0.3);
189
- --zl-success-1: rgba(112,198,154,0.2);
190
- --zl-success-10: #eefff4;
191
- --zl-success-2: rgba(112,198,154,0.35);
192
- --zl-success-3: rgba(112,198,154,0.5);
193
- --zl-success-4: rgba(112,198,154,0.65);
194
- --zl-success-5: #60bc8f;
195
- --zl-success-6: #70c69a;
196
- --zl-success-7: #9bd7b6;
197
- --zl-success-8: #b5e4c8;
198
- --zl-success-9: #d1f2de;
199
- --zl-text-1: #ffffff;
200
- --zl-text-2: rgba(255,255,255,0.7);
201
- --zl-text-3: rgba(255,255,255,0.5);
202
- --zl-text-4: rgba(255,255,255,0.3);
203
- --zl-tooltip-bg: #171f30;
204
- --zl-warning-1: rgba(231,185,98,0.2);
205
- --zl-warning-10: #fffbee;
206
- --zl-warning-2: rgba(231,185,98,0.35);
207
- --zl-warning-3: rgba(231,185,98,0.5);
208
- --zl-warning-4: rgba(231,185,98,0.65);
209
- --zl-warning-5: #e5ae55;
210
- --zl-warning-6: #e7b962;
211
- --zl-warning-7: #f9ce71;
212
- --zl-warning-8: #fbe09a;
213
- --zl-warning-9: #fdefc4;
214
- --zl-white: #ffffff;
215
- --zl-yellow-1: rgba(243,243,154,0.2);
216
- --zl-yellow-10: #fcffe9;
217
- --zl-yellow-2: rgba(243,243,154,0.35);
218
- --zl-yellow-3: rgba(243,243,154,0.5);
219
- --zl-yellow-4: rgba(243,243,154,0.65);
220
- --zl-yellow-5: #f0ec79;
221
- --zl-yellow-6: #f3f39a;
222
- --zl-yellow-7: #f4f6ad;
223
- --zl-yellow-8: #f5f9c1;
224
- --zl-yellow-9: #f8fcd5;
225
- --zl-primary-1: #4d0017;
226
- --zl-link-1: rgba(235,35,61,0.2);
227
- --zl-primary-2: #730322;
228
- --zl-link-2: rgba(235,35,61,0.35);
229
- --zl-primary-3: #99092b;
230
- --zl-link-3: rgba(235,35,61,0.5);
231
- --zl-primary-4: #c01134;
232
- --zl-link-4: rgba(235,35,61,0.65);
233
- --zl-primary-5: #e61c3e;
234
- --zl-link-5: #e61c3e;
235
- --zl-primary-6: #eb233d;
236
- --zl-link-6: #eb233d;
237
- --zl-primary-7: #f05262;
238
- --zl-link-7: #f05262;
239
- --zl-primary-8: #f58289;
240
- --zl-link-8: #f58289;
241
- --zl-primary-9: #fab4b6;
242
- --zl-link-9: #fab4b6;
243
- --zl-primary-10: #ffe8e8;
244
- --zl-link-10: #ffe8e8;
245
- --el-color-primary: #EB233D;
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: #ef4f64;
256
- --el-color-success: #70C69A;
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: #8dd1ae;
267
- --el-color-warning: #E7B962;
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: #ecc781;
278
- --el-color-danger: #FF7926;
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: #ff9451;
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: #ff9451;
300
- --el-color-info: #95A6BA;
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: #aab8c8;
311
- --el-text-color-primary: #FFFFFF;
312
- --el-text-color-regular: rgba(255,255,255,0.7);
313
- --el-text-color-secondary: rgba(255,255,255,0.5);
314
- --el-text-color-placeholder: rgba(255,255,255,0.3);
315
- --el-text-color-disabled: rgba(255,255,255,0.3);
316
- --el-border-color-extra-light: #35435E;
317
- --el-border-color-lighter: #4D5E7D;
318
- --el-border-color-light: #5E708A;
319
- --el-border-color: #95A6BA;
320
- --el-border-color-dark: #95A6BA;
321
- --el-border-color-darker: #95A6BA;
322
- --el-fill-color-extra-light: #242E43;
323
- --el-fill-color-lighter: #35435E;
324
- --el-fill-color-light: #4D5E7D;
325
- --el-fill-color: #5E708A;
326
- --el-fill-color-dark: #5E708A;
327
- --el-fill-color-blank: #212A3C;
328
- --el-bg-color: #212A3C;
329
- --el-bg-color-page: #171F30;
330
- --el-bg-color-overlay: #313E56;
331
- --el-color-white: #141414;
332
- --el-color-black: #ffffff;
333
- --el-mask-color: rgb(0, 0, 0, 0.3);
334
- color-scheme: dark;
335
- --el-border-radius-base: 4px;
336
- --el-border-radius-small: 2px;
337
- --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
338
- --zl-menu-text-color: var(--zl-white);
339
- --zl-menu-active-bg: var(--zl-menu-hover-bg);
340
- --zl-menu-active-color: var(--zl-menu-text-color);
341
- --zl-menu-active-border-color: transparent;
342
- --zl-menu-icon-color: currentColor;
343
- --zl-menu-font-size: 12px;
344
- --zl-menu-item-height: 36px;
345
- --zl-menu-trigger-arrow-color: #263247;
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-modo-7) 0%, var(--zl-modo-9) 100%);
348
- --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
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
-
359
- /*
360
- * 全局 reset(随每套主题 CSS 一并注入;变量取 --zl-*,缺省回退为浅色值)
361
- * 由参考实现迁移,变量命名按需求 §7.2.1 统一 zl- 前缀
362
- */
363
-
364
- /* ============================================================
365
- * 开源字体(OFL-1.1)自托管:替换参考实现中的商业授权字体
366
- * - Noto Sans SC(思源黑体):通用中文正文字体,覆盖系统字体缺失场景
367
- * - Smiley Sans(得意黑):品牌标语展示字体,替换商业「方正」系列
368
- * 字体文件见本包 src/assets/fonts/(经 ./assets/* 导出)
369
- * ============================================================ */
370
- @font-face {
371
- font-family: 'Noto Sans SC';
372
- font-style: normal;
373
- font-weight: 400;
374
- font-display: swap;
375
- src: url(../assets/fonts/noto-sans-sc-400.woff2) format('woff2');
376
- }
377
- @font-face {
378
- font-family: 'Noto Sans SC';
379
- font-style: normal;
380
- font-weight: 500;
381
- font-display: swap;
382
- src: url(../assets/fonts/noto-sans-sc-500.woff2) format('woff2');
383
- }
384
- @font-face {
385
- font-family: 'Noto Sans SC';
386
- font-style: normal;
387
- font-weight: 700;
388
- font-display: swap;
389
- src: url(../assets/fonts/noto-sans-sc-700.woff2) format('woff2');
390
- }
391
- @font-face {
392
- font-family: 'Smiley Sans';
393
- font-style: normal;
394
- font-weight: 400;
395
- font-display: swap;
396
- src: url(../assets/fonts/smiley-sans.woff2) format('woff2');
397
- }
398
-
399
- :root {
400
- /* 品牌标语字体:默认得意黑(开源),回退思源黑体 / 系统字体;替换参考实现的商业字体 */
401
- --zl-slogan-font-family: 'Smiley Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
402
- }
403
-
404
- html,
405
- body,
406
- micro-app,
407
- #root,
408
- #app {
409
- height: 100%;
410
- }
411
-
412
- html,
413
- body {
414
- margin: 0;
415
- padding: 0;
416
- }
417
-
418
- #root {
419
- background: var(--zl-fill-2, #f0f2f5);
420
- color: var(--zl-text-2, #4d5e7d);
421
- font-size: 12px;
422
- line-height: 20px;
423
- overscroll-behavior: contain;
424
- font-family:
425
- Inter,
426
- -apple-system,
427
- BlinkMacSystemFont,
428
- 'PingFang SC',
429
- 'Hiragino Sans GB',
430
- 'Noto Sans SC',
431
- 'Microsoft YaHei',
432
- 'Helvetica Neue',
433
- Helvetica,
434
- Arial,
435
- sans-serif;
436
- }
437
-
438
- *,
439
- *::before,
440
- *::after {
441
- box-sizing: border-box;
442
- }
443
-
444
- ::-webkit-scrollbar {
445
- width: 10px;
446
- height: 10px;
447
- background: transparent;
448
- }
449
-
450
- ::-webkit-scrollbar-thumb {
451
- background: var(--zl-fill-3, #e3e9ef) content-box;
452
- border: 2px solid transparent;
453
- border-radius: 5px;
454
- }
455
-
456
- ::-webkit-scrollbar-thumb:hover {
457
- background-color: var(--zl-fill-4, rgb(179, 192, 204));
458
- }
459
-
460
- /*
461
- * Element Plus 组件样式覆盖(占位骨架)
462
- * 参考实现的 18 个组件覆盖基于原 UI 库类名体系,需按 EP 的 .el-* BEM 结构逐组件重写,
463
- * 以 playground 主题预览页视觉验收为准(需求 §7.2.2 / P15)。
464
- * 本文件随 per-theme CSS 一同生效;以下为首批全局性微调。
465
- */
466
-
467
- /* 与 zl 设计一致的圆角与动效基调 */
468
- .el-button {
469
- --el-button-border-radius: var(--zl-radius-base, 4px);
470
- }
471
-
472
- .el-dialog {
473
- --el-dialog-border-radius: var(--zl-radius-base, 4px);
474
- }
1
+ /* red-dark 主题(由 scripts/themegen.mjs 生成,DO NOT EDIT) */
2
+ body[data-theme='red-dark'] {
3
+ --zl-bg-1: #171f30;
4
+ --zl-bg-2: #212a3c;
5
+ --zl-bg-3: #313e56;
6
+ --zl-bg-4: #3d4b65;
7
+ --zl-bg-5: #576b87;
8
+ --zl-bg-more: #76879f;
9
+ --zl-blue-1: rgba(85,179,216,0.2);
10
+ --zl-blue-10: #e9fcff;
11
+ --zl-blue-2: rgba(85,179,216,0.35);
12
+ --zl-blue-3: rgba(85,179,216,0.5);
13
+ --zl-blue-4: rgba(85,179,216,0.65);
14
+ --zl-blue-5: #40a2ce;
15
+ --zl-blue-6: #55b3d8;
16
+ --zl-blue-7: #76c7e2;
17
+ --zl-blue-8: #99daeb;
18
+ --zl-blue-9: #c0ebf5;
19
+ --zl-gray-2: #35435e;
20
+ --zl-neutral-2: #35435e;
21
+ --zl-border-1: #35435e;
22
+ --zl-gray-3: #4d5e7d;
23
+ --zl-neutral-3: #4d5e7d;
24
+ --zl-border-2: #4d5e7d;
25
+ --zl-gray-4: #5e708a;
26
+ --zl-neutral-4: #5e708a;
27
+ --zl-border-3: #5e708a;
28
+ --zl-gray-6: #95a6ba;
29
+ --zl-neutral-6: #95a6ba;
30
+ --zl-border-4: #95a6ba;
31
+ --zl-cyan-1: rgba(98,212,201,0.2);
32
+ --zl-cyan-10: #f1fffc;
33
+ --zl-cyan-2: rgba(98,212,201,0.35);
34
+ --zl-cyan-3: rgba(98,212,201,0.5);
35
+ --zl-cyan-4: rgba(45,170,165,0.65);
36
+ --zl-cyan-5: #49c9c1;
37
+ --zl-cyan-6: #62d4c9;
38
+ --zl-cyan-7: #82dfd2;
39
+ --zl-cyan-8: #a4e9de;
40
+ --zl-cyan-9: #c9f4eb;
41
+ --zl-danger-1: rgba(255,121,38,0.2);
42
+ --zl-red-10: #fff4e8;
43
+ --zl-danger-10: #fff4e8;
44
+ --zl-danger-2: rgba(255,121,38,0.35);
45
+ --zl-danger-3: rgba(255,121,38,0.5);
46
+ --zl-danger-4: rgba(255,121,38,0.65);
47
+ --zl-red-5: #ff6d1f;
48
+ --zl-danger-5: #ff6d1f;
49
+ --zl-red-6: #ff7926;
50
+ --zl-danger-6: #ff7926;
51
+ --zl-red-7: #ff9c57;
52
+ --zl-danger-7: #ff9c57;
53
+ --zl-red-8: #ffbd87;
54
+ --zl-danger-8: #ffbd87;
55
+ --zl-red-9: #ffdab8;
56
+ --zl-danger-9: #ffdab8;
57
+ --zl-gray-1: #242e43;
58
+ --zl-neutral-1: #242e43;
59
+ --zl-fill-1: #242e43;
60
+ --zl-fill-2: #35435e;
61
+ --zl-fill-3: #4d5e7d;
62
+ --zl-fill-4: #5e708a;
63
+ --zl-gold-1: rgba(247,215,72,0.2);
64
+ --zl-gold-10: #fffeee;
65
+ --zl-gold-2: rgba(247,215,72,0.35);
66
+ --zl-gold-3: rgba(247,215,72,0.5);
67
+ --zl-gold-4: rgba(247,215,72,0.65);
68
+ --zl-gold-5: #f5cc39;
69
+ --zl-gold-6: #f7d748;
70
+ --zl-gold-7: #f9e471;
71
+ --zl-gold-8: #fbef9a;
72
+ --zl-gold-9: #fdf8c4;
73
+ --zl-gray-10: #f9fbfd;
74
+ --zl-gray-5: #79879c;
75
+ --zl-gray-7: #b3c0cc;
76
+ --zl-gray-8: #e3e9ef;
77
+ --zl-gray-9: #eff4f9;
78
+ --zl-green-1: #004d32;
79
+ --zl-green-10: #eefff4;
80
+ --zl-green-2: #0a6844;
81
+ --zl-green-3: #1f845a;
82
+ --zl-green-4: #3ca073;
83
+ --zl-green-5: #60bc8f;
84
+ --zl-green-6: #70c69a;
85
+ --zl-green-7: #9bd7b6;
86
+ --zl-green-8: #b5e4c8;
87
+ --zl-green-9: #d1f2de;
88
+ --zl-lime-1: rgba(173,201,131,0.2);
89
+ --zl-lime-10: #faffee;
90
+ --zl-lime-2: rgba(173,201,131,0.35);
91
+ --zl-lime-3: rgba(173,201,131,0.5);
92
+ --zl-lime-4: rgba(173,201,131,0.65);
93
+ --zl-lime-5: #94bc60;
94
+ --zl-lime-6: #adc983;
95
+ --zl-lime-7: #c1d79b;
96
+ --zl-lime-8: #d4e4b5;
97
+ --zl-lime-9: #e7f2d1;
98
+ --zl-link-1: rgba(235,35,61,0.2);
99
+ --zl-modo-10: #ffe8e8;
100
+ --zl-link-10: #ffe8e8;
101
+ --zl-link-2: rgba(235,35,61,0.35);
102
+ --zl-link-3: rgba(235,35,61,0.5);
103
+ --zl-link-4: rgba(235,35,61,0.65);
104
+ --zl-modo-5: #e61c3e;
105
+ --zl-link-5: #e61c3e;
106
+ --zl-modo-6: #eb233d;
107
+ --zl-link-6: #eb233d;
108
+ --zl-modo-7: #f05262;
109
+ --zl-link-7: #f05262;
110
+ --zl-modo-8: #f58289;
111
+ --zl-link-8: #f58289;
112
+ --zl-modo-9: #fab4b6;
113
+ --zl-link-9: #fab4b6;
114
+ --zl-magenta-1: rgba(221,118,183,0.2);
115
+ --zl-magenta-10: #ffeef7;
116
+ --zl-magenta-2: rgba(221,118,183,0.35);
117
+ --zl-magenta-3: rgba(221,118,183,0.5);
118
+ --zl-magenta-4: rgba(221,118,183,0.65);
119
+ --zl-magenta-5: #d459ab;
120
+ --zl-magenta-6: #dd76b7;
121
+ --zl-magenta-7: #e591c3;
122
+ --zl-magenta-8: #eeaed3;
123
+ --zl-magenta-9: #f6cde3;
124
+ --zl-mask-bg: rgba(36,46,67,0.6);
125
+ --zl-modo-1: #4d0017;
126
+ --zl-modo-2: #730322;
127
+ --zl-modo-3: #99092b;
128
+ --zl-modo-4: #c01134;
129
+ --zl-neutral-10: #f9fbfd;
130
+ --zl-neutral-5: #79879c;
131
+ --zl-neutral-7: #b3c0cc;
132
+ --zl-neutral-8: #e3e9ef;
133
+ --zl-neutral-9: #eff4f9;
134
+ --zl-orange-1: #4d2500;
135
+ --zl-orange-10: #fffbee;
136
+ --zl-orange-2: #774006;
137
+ --zl-orange-3: #a16112;
138
+ --zl-orange-4: #cb8423;
139
+ --zl-orange-5: #e5ae55;
140
+ --zl-orange-6: #e7b962;
141
+ --zl-orange-7: #f9ce71;
142
+ --zl-orange-8: #fbe09a;
143
+ --zl-orange-9: #fdefc4;
144
+ --zl-orangered-1: rgba(232,135,83,0.2);
145
+ --zl-orangered-10: #fff4ea;
146
+ --zl-orangered-2: rgba(232,135,83,0.35);
147
+ --zl-orangered-3: rgba(232,135,83,0.5);
148
+ --zl-orangered-4: rgba(232,135,83,0.65);
149
+ --zl-orangered-5: #e2733f;
150
+ --zl-orangered-6: #e88753;
151
+ --zl-orangered-7: #eea577;
152
+ --zl-orangered-8: #f3c09b;
153
+ --zl-orangered-9: #f9dbc2;
154
+ --zl-pinkpurple-1: rgba(190,97,218,0.2);
155
+ --zl-pinkpurple-10: #fdecff;
156
+ --zl-pinkpurple-2: rgba(190,97,218,0.35);
157
+ --zl-pinkpurple-3: rgba(190,97,218,0.5);
158
+ --zl-pinkpurple-4: rgba(190,97,218,0.65);
159
+ --zl-pinkpurple-5: #ae4bd1;
160
+ --zl-pinkpurple-6: #be61da;
161
+ --zl-pinkpurple-7: #d081e3;
162
+ --zl-pinkpurple-8: #e0a3ed;
163
+ --zl-pinkpurple-9: #f0c6f6;
164
+ --zl-primary-1: rgba(235,35,61,0.2);
165
+ --zl-primary-10: #ffe8e8;
166
+ --zl-primary-2: rgba(235,35,61,0.35);
167
+ --zl-primary-3: rgba(235,35,61,0.5);
168
+ --zl-primary-4: rgba(235,35,61,0.65);
169
+ --zl-primary-5: #e61c3e;
170
+ --zl-primary-6: #eb233d;
171
+ --zl-primary-7: #f05262;
172
+ --zl-primary-8: #f58289;
173
+ --zl-primary-9: #fab4b6;
174
+ --zl-purple-1: rgba(145,111,209,0.2);
175
+ --zl-purple-10: #f6edff;
176
+ --zl-purple-2: rgba(145,111,209,0.35);
177
+ --zl-purple-3: rgba(145,111,209,0.5);
178
+ --zl-purple-4: rgba(145,111,209,0.65);
179
+ --zl-purple-5: #7753c5;
180
+ --zl-purple-6: #916fd1;
181
+ --zl-purple-7: #aa8bdc;
182
+ --zl-purple-8: #c3aae8;
183
+ --zl-purple-9: #dccaf3;
184
+ --zl-red-1: #4d1100;
185
+ --zl-red-2: #792104;
186
+ --zl-red-3: #a6360a;
187
+ --zl-red-4: #d25013;
188
+ --zl-shadow: rgba(0,0,0,0.3);
189
+ --zl-success-1: rgba(112,198,154,0.2);
190
+ --zl-success-10: #eefff4;
191
+ --zl-success-2: rgba(112,198,154,0.35);
192
+ --zl-success-3: rgba(112,198,154,0.5);
193
+ --zl-success-4: rgba(112,198,154,0.65);
194
+ --zl-success-5: #60bc8f;
195
+ --zl-success-6: #70c69a;
196
+ --zl-success-7: #9bd7b6;
197
+ --zl-success-8: #b5e4c8;
198
+ --zl-success-9: #d1f2de;
199
+ --zl-text-1: #ffffff;
200
+ --zl-text-2: rgba(255,255,255,0.7);
201
+ --zl-text-3: rgba(255,255,255,0.5);
202
+ --zl-text-4: rgba(255,255,255,0.3);
203
+ --zl-tooltip-bg: #171f30;
204
+ --zl-warning-1: rgba(231,185,98,0.2);
205
+ --zl-warning-10: #fffbee;
206
+ --zl-warning-2: rgba(231,185,98,0.35);
207
+ --zl-warning-3: rgba(231,185,98,0.5);
208
+ --zl-warning-4: rgba(231,185,98,0.65);
209
+ --zl-warning-5: #e5ae55;
210
+ --zl-warning-6: #e7b962;
211
+ --zl-warning-7: #f9ce71;
212
+ --zl-warning-8: #fbe09a;
213
+ --zl-warning-9: #fdefc4;
214
+ --zl-white: #ffffff;
215
+ --zl-yellow-1: rgba(243,243,154,0.2);
216
+ --zl-yellow-10: #fcffe9;
217
+ --zl-yellow-2: rgba(243,243,154,0.35);
218
+ --zl-yellow-3: rgba(243,243,154,0.5);
219
+ --zl-yellow-4: rgba(243,243,154,0.65);
220
+ --zl-yellow-5: #f0ec79;
221
+ --zl-yellow-6: #f3f39a;
222
+ --zl-yellow-7: #f4f6ad;
223
+ --zl-yellow-8: #f5f9c1;
224
+ --zl-yellow-9: #f8fcd5;
225
+ --zl-primary-1: #4d0017;
226
+ --zl-link-1: rgba(235,35,61,0.2);
227
+ --zl-primary-2: #730322;
228
+ --zl-link-2: rgba(235,35,61,0.35);
229
+ --zl-primary-3: #99092b;
230
+ --zl-link-3: rgba(235,35,61,0.5);
231
+ --zl-primary-4: #c01134;
232
+ --zl-link-4: rgba(235,35,61,0.65);
233
+ --zl-primary-5: #e61c3e;
234
+ --zl-link-5: #e61c3e;
235
+ --zl-primary-6: #eb233d;
236
+ --zl-link-6: #eb233d;
237
+ --zl-primary-7: #f05262;
238
+ --zl-link-7: #f05262;
239
+ --zl-primary-8: #f58289;
240
+ --zl-link-8: #f58289;
241
+ --zl-primary-9: #fab4b6;
242
+ --zl-link-9: #fab4b6;
243
+ --zl-primary-10: #ffe8e8;
244
+ --zl-link-10: #ffe8e8;
245
+ --el-color-primary: #EB233D;
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: #ef4f64;
256
+ --el-color-success: #70C69A;
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: #8dd1ae;
267
+ --el-color-warning: #E7B962;
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: #ecc781;
278
+ --el-color-danger: #FF7926;
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: #ff9451;
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: #ff9451;
300
+ --el-color-info: #95A6BA;
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: #aab8c8;
311
+ --el-text-color-primary: #FFFFFF;
312
+ --el-text-color-regular: rgba(255,255,255,0.7);
313
+ --el-text-color-secondary: rgba(255,255,255,0.5);
314
+ --el-text-color-placeholder: rgba(255,255,255,0.3);
315
+ --el-text-color-disabled: rgba(255,255,255,0.3);
316
+ --el-border-color-extra-light: #35435E;
317
+ --el-border-color-lighter: #4D5E7D;
318
+ --el-border-color-light: #5E708A;
319
+ --el-border-color: #95A6BA;
320
+ --el-border-color-dark: #95A6BA;
321
+ --el-border-color-darker: #95A6BA;
322
+ --el-fill-color-extra-light: #242E43;
323
+ --el-fill-color-lighter: #35435E;
324
+ --el-fill-color-light: #4D5E7D;
325
+ --el-fill-color: #5E708A;
326
+ --el-fill-color-dark: #5E708A;
327
+ --el-fill-color-blank: #212A3C;
328
+ --el-bg-color: #212A3C;
329
+ --el-bg-color-page: #171F30;
330
+ --el-bg-color-overlay: #313E56;
331
+ --el-color-white: #141414;
332
+ --el-color-black: #ffffff;
333
+ --el-mask-color: rgb(0, 0, 0, 0.3);
334
+ color-scheme: dark;
335
+ --el-border-radius-base: 4px;
336
+ --el-border-radius-small: 2px;
337
+ --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
338
+ --zl-menu-text-color: var(--zl-white);
339
+ --zl-menu-active-bg: var(--zl-menu-hover-bg);
340
+ --zl-menu-active-color: var(--zl-menu-text-color);
341
+ --zl-menu-active-border-color: transparent;
342
+ --zl-menu-icon-color: currentColor;
343
+ --zl-menu-font-size: 12px;
344
+ --zl-menu-item-height: 36px;
345
+ --zl-menu-trigger-arrow-color: #263247;
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-modo-7) 0%, var(--zl-modo-9) 100%);
348
+ --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
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
+
359
+ /*
360
+ * 全局 reset(随每套主题 CSS 一并注入;变量取 --zl-*,缺省回退为浅色值)
361
+ * 由参考实现迁移,变量命名按需求 §7.2.1 统一 zl- 前缀
362
+ */
363
+
364
+ /* ============================================================
365
+ * 开源字体(OFL-1.1)自托管:替换参考实现中的商业授权字体
366
+ * - Noto Sans SC(思源黑体):通用中文正文字体,覆盖系统字体缺失场景
367
+ * - Smiley Sans(得意黑):品牌标语展示字体,替换商业「方正」系列
368
+ * 字体文件见本包 src/assets/fonts/(经 ./assets/* 导出)
369
+ * ============================================================ */
370
+ @font-face {
371
+ font-family: 'Noto Sans SC';
372
+ font-style: normal;
373
+ font-weight: 400;
374
+ font-display: swap;
375
+ src: url(../assets/fonts/noto-sans-sc-400.woff2) format('woff2');
376
+ }
377
+ @font-face {
378
+ font-family: 'Noto Sans SC';
379
+ font-style: normal;
380
+ font-weight: 500;
381
+ font-display: swap;
382
+ src: url(../assets/fonts/noto-sans-sc-500.woff2) format('woff2');
383
+ }
384
+ @font-face {
385
+ font-family: 'Noto Sans SC';
386
+ font-style: normal;
387
+ font-weight: 700;
388
+ font-display: swap;
389
+ src: url(../assets/fonts/noto-sans-sc-700.woff2) format('woff2');
390
+ }
391
+ @font-face {
392
+ font-family: 'Smiley Sans';
393
+ font-style: normal;
394
+ font-weight: 400;
395
+ font-display: swap;
396
+ src: url(../assets/fonts/smiley-sans.woff2) format('woff2');
397
+ }
398
+
399
+ :root {
400
+ /* 品牌标语字体:默认得意黑(开源),回退思源黑体 / 系统字体;替换参考实现的商业字体 */
401
+ --zl-slogan-font-family: 'Smiley Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
402
+ }
403
+
404
+ html,
405
+ body,
406
+ micro-app,
407
+ #root,
408
+ #app {
409
+ height: 100%;
410
+ }
411
+
412
+ html,
413
+ body {
414
+ margin: 0;
415
+ padding: 0;
416
+ }
417
+
418
+ #root {
419
+ background: var(--zl-fill-2, #f0f2f5);
420
+ color: var(--zl-text-2, #4d5e7d);
421
+ font-size: 12px;
422
+ line-height: 20px;
423
+ overscroll-behavior: contain;
424
+ font-family:
425
+ Inter,
426
+ -apple-system,
427
+ BlinkMacSystemFont,
428
+ 'PingFang SC',
429
+ 'Hiragino Sans GB',
430
+ 'Noto Sans SC',
431
+ 'Microsoft YaHei',
432
+ 'Helvetica Neue',
433
+ Helvetica,
434
+ Arial,
435
+ sans-serif;
436
+ }
437
+
438
+ *,
439
+ *::before,
440
+ *::after {
441
+ box-sizing: border-box;
442
+ }
443
+
444
+ ::-webkit-scrollbar {
445
+ width: 10px;
446
+ height: 10px;
447
+ background: transparent;
448
+ }
449
+
450
+ ::-webkit-scrollbar-thumb {
451
+ background: var(--zl-fill-3, #e3e9ef) content-box;
452
+ border: 2px solid transparent;
453
+ border-radius: 5px;
454
+ }
455
+
456
+ ::-webkit-scrollbar-thumb:hover {
457
+ background-color: var(--zl-fill-4, rgb(179, 192, 204));
458
+ }
459
+
460
+ /*
461
+ * Element Plus 组件样式覆盖(占位骨架)
462
+ * 参考实现的 18 个组件覆盖基于原 UI 库类名体系,需按 EP 的 .el-* BEM 结构逐组件重写,
463
+ * 以 playground 主题预览页视觉验收为准(需求 §7.2.2 / P15)。
464
+ * 本文件随 per-theme CSS 一同生效;以下为首批全局性微调。
465
+ */
466
+
467
+ /* 与 zl 设计一致的圆角与动效基调 */
468
+ .el-button {
469
+ --el-button-border-radius: var(--zl-radius-base, 4px);
470
+ }
471
+
472
+ .el-dialog {
473
+ --el-dialog-border-radius: var(--zl-radius-base, 4px);
474
+ }