@qw-ui/tokens 0.3.0-next.0 → 0.3.0-next.10
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.
- package/README.md +79 -0
- package/dist/color-architecture.d.ts +139 -2
- package/dist/derive/index.d.ts +2 -2
- package/dist/derive/live-css.d.ts +1 -1
- package/dist/derive/reference.d.ts +62 -13
- package/dist/derive/semantic.d.ts +17 -1
- package/dist/derive/tailwind.d.ts +31 -0
- package/dist/design-doc.d.ts +1 -1
- package/dist/figma/color-contract.d.ts +2 -0
- package/dist/figma/color-snapshot.d.ts +4 -0
- package/dist/index.d.ts +5 -4
- package/dist/index.js +759 -240
- package/dist/index.js.map +1 -1
- package/dist/schema.d.ts +3 -3
- package/dist/tailwind.css +79 -0
- package/dist/tokens.css +113 -74
- package/dist/tokens.json +196 -74
- package/dist/tokens.live.css +127 -9
- package/dist/tokens.ts +198 -102
- package/package.json +2 -1
- package/dist/compat/build.d.ts +0 -14
- package/dist/compat/color.d.ts +0 -8
- package/dist/compat/index.d.ts +0 -5
- package/dist/compat/schema.d.ts +0 -114
package/dist/schema.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { z } from "zod";
|
|
2
2
|
/**
|
|
3
|
-
* SeedSchema — T1 Seed
|
|
3
|
+
* SeedSchema — T1 Seed 与兼容输入的运行时校验(RFC 0001 §2.1,v4 修订)。
|
|
4
4
|
*
|
|
5
5
|
* 五大类目 color/size/typography/motion/effect,字段结构对齐
|
|
6
|
-
* packages/tokens/design/seed.tokens.json
|
|
7
|
-
*
|
|
6
|
+
* packages/tokens/design/seed.tokens.json。部分已不再驱动 canonical T2 的字段暂时
|
|
7
|
+
* 保留为兼容输入;新 Reference 不得为了形式完整继续扩充伪 Seed。
|
|
8
8
|
*
|
|
9
9
|
* v3 变化:
|
|
10
10
|
* - 颜色全部结构化(DTCG Color module,支持 srgb/oklch)。
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/* @qw-ui/tokens — 由 seed derive() 生成,请勿手改。需先引入 tokens.css。 */
|
|
2
|
+
@theme inline {
|
|
3
|
+
--color-surface-base: var(--qw-sem-color-surface-base);
|
|
4
|
+
--color-surface-subtle: var(--qw-sem-color-surface-subtle);
|
|
5
|
+
--color-surface-elevated: var(--qw-sem-color-surface-elevated);
|
|
6
|
+
--color-surface-header: var(--qw-sem-color-surface-header);
|
|
7
|
+
--color-surface-brand-subtle: var(--qw-sem-color-surface-brand-subtle);
|
|
8
|
+
--color-surface-canvas: var(--qw-sem-color-surface-canvas);
|
|
9
|
+
--color-surface-sunken: var(--qw-sem-color-surface-sunken);
|
|
10
|
+
--color-surface-selected: var(--qw-sem-color-surface-selected);
|
|
11
|
+
--color-surface-inverse: var(--qw-sem-color-surface-inverse);
|
|
12
|
+
--color-surface-canvas-subtle: var(--qw-sem-color-surface-canvas-subtle);
|
|
13
|
+
--color-content-primary: var(--qw-sem-color-content-primary);
|
|
14
|
+
--color-content-secondary: var(--qw-sem-color-content-secondary);
|
|
15
|
+
--color-content-tertiary: var(--qw-sem-color-content-tertiary);
|
|
16
|
+
--color-content-placeholder: var(--qw-sem-color-content-placeholder);
|
|
17
|
+
--color-content-intro: var(--qw-sem-color-content-intro);
|
|
18
|
+
--color-content-disabled: var(--qw-sem-color-content-disabled);
|
|
19
|
+
--color-content-link: var(--qw-sem-color-content-link);
|
|
20
|
+
--color-content-icon-subtle: var(--qw-sem-color-content-icon-subtle);
|
|
21
|
+
--color-content-inverse: var(--qw-sem-color-content-inverse);
|
|
22
|
+
--color-content-on-solid: var(--qw-sem-color-content-on-solid);
|
|
23
|
+
--color-content-on-warning-subtle: var(--qw-sem-color-content-on-warning-subtle);
|
|
24
|
+
--color-border-default: var(--qw-sem-color-border-default);
|
|
25
|
+
--color-border-strong: var(--qw-sem-color-border-strong);
|
|
26
|
+
--color-border-focus: var(--qw-sem-color-border-focus);
|
|
27
|
+
--color-border-subtle: var(--qw-sem-color-border-subtle);
|
|
28
|
+
--color-border-disabled: var(--qw-sem-color-border-disabled);
|
|
29
|
+
--color-border-on-media: var(--qw-sem-color-border-on-media);
|
|
30
|
+
--color-fill-subtle: var(--qw-sem-color-fill-subtle);
|
|
31
|
+
--color-fill-hover: var(--qw-sem-color-fill-hover);
|
|
32
|
+
--color-fill-active: var(--qw-sem-color-fill-active);
|
|
33
|
+
--color-fill-disabled: var(--qw-sem-color-fill-disabled);
|
|
34
|
+
--color-fill-track: var(--qw-sem-color-fill-track);
|
|
35
|
+
--color-action-brand: var(--qw-sem-color-action-brand);
|
|
36
|
+
--color-action-product: var(--qw-sem-color-action-product);
|
|
37
|
+
--color-action-selected: var(--qw-sem-color-action-selected);
|
|
38
|
+
--color-action-inverse: var(--qw-sem-color-action-inverse);
|
|
39
|
+
--color-control-action-brand-subtle: var(--qw-sem-color-control-action-brand-subtle);
|
|
40
|
+
--color-control-action-product-subtle: var(--qw-sem-color-control-action-product-subtle);
|
|
41
|
+
--color-control-action-danger-default: var(--qw-sem-color-control-action-danger-default);
|
|
42
|
+
--color-control-action-danger-subtle: var(--qw-sem-color-control-action-danger-subtle);
|
|
43
|
+
--color-control-action-neutral-subtle: var(--qw-sem-color-control-action-neutral-subtle);
|
|
44
|
+
--color-control-selection-brand: var(--qw-sem-color-control-selection-brand);
|
|
45
|
+
--color-control-selection-product: var(--qw-sem-color-control-selection-product);
|
|
46
|
+
--color-selection-text-background: var(--qw-sem-color-selection-text-background);
|
|
47
|
+
--color-status-success: var(--qw-sem-color-status-success);
|
|
48
|
+
--color-status-warning: var(--qw-sem-color-status-warning);
|
|
49
|
+
--color-status-danger: var(--qw-sem-color-status-danger);
|
|
50
|
+
--color-status-info: var(--qw-sem-color-status-info);
|
|
51
|
+
--color-status-success-subtle: var(--qw-sem-color-status-success-subtle);
|
|
52
|
+
--color-status-warning-subtle: var(--qw-sem-color-status-warning-subtle);
|
|
53
|
+
--color-status-danger-subtle: var(--qw-sem-color-status-danger-subtle);
|
|
54
|
+
--color-status-info-subtle: var(--qw-sem-color-status-info-subtle);
|
|
55
|
+
--color-overlay-scrim: var(--qw-sem-color-overlay-scrim);
|
|
56
|
+
--color-overlay-guide: var(--qw-sem-color-overlay-guide);
|
|
57
|
+
--color-overlay-media-subtle: var(--qw-sem-color-overlay-media-subtle);
|
|
58
|
+
--color-overlay-media-strong: var(--qw-sem-color-overlay-media-strong);
|
|
59
|
+
--color-shadow: var(--qw-sem-color-shadow);
|
|
60
|
+
--radius-sm: var(--qw-sem-size-radius-sm);
|
|
61
|
+
--radius-control: var(--qw-sem-size-radius-control);
|
|
62
|
+
--radius-card: var(--qw-sem-size-radius-card);
|
|
63
|
+
--radius-xl: var(--qw-sem-size-radius-xl);
|
|
64
|
+
--radius-pill: var(--qw-sem-size-radius-pill);
|
|
65
|
+
--radius-full: var(--qw-sem-size-radius-full);
|
|
66
|
+
--spacing-inset-sm: var(--qw-sem-size-inset-sm);
|
|
67
|
+
--spacing-inset-md: var(--qw-sem-size-inset-md);
|
|
68
|
+
--spacing-inset-lg: var(--qw-sem-size-inset-lg);
|
|
69
|
+
--spacing-stack-sm: var(--qw-sem-size-stack-sm);
|
|
70
|
+
--spacing-stack-md: var(--qw-sem-size-stack-md);
|
|
71
|
+
--spacing-stack-lg: var(--qw-sem-size-stack-lg);
|
|
72
|
+
--font-text: var(--qw-sem-typography-font-family-text);
|
|
73
|
+
--font-number: var(--qw-sem-typography-font-family-number);
|
|
74
|
+
--font-code: var(--qw-sem-typography-font-family-code);
|
|
75
|
+
--shadow-card: var(--qw-sem-effect-shadow-card);
|
|
76
|
+
--shadow-floating: var(--qw-sem-effect-shadow-floating);
|
|
77
|
+
--shadow-dialog: var(--qw-sem-effect-shadow-dialog);
|
|
78
|
+
--ease-standard: var(--qw-sem-motion-easing-standard);
|
|
79
|
+
}
|
package/dist/tokens.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @qw-ui/tokens — 由 seed derive()
|
|
1
|
+
/* @qw-ui/tokens — 由 seed derive() 生成,请勿手改。 */
|
|
2
2
|
:root {
|
|
3
3
|
--qw-ref-color-brand-50: #F2F6FF;
|
|
4
4
|
--qw-ref-color-brand-100: #E6ECFF;
|
|
@@ -275,6 +275,7 @@
|
|
|
275
275
|
--qw-ref-size-radius-sm: 4px;
|
|
276
276
|
--qw-ref-size-radius-md: 8px;
|
|
277
277
|
--qw-ref-size-radius-lg: 14px;
|
|
278
|
+
--qw-ref-size-radius-xl: 16px;
|
|
278
279
|
--qw-ref-size-radius-full: 9999px;
|
|
279
280
|
--qw-ref-size-control-size-sm: 32px;
|
|
280
281
|
--qw-ref-size-control-size-md: 40px;
|
|
@@ -282,7 +283,20 @@
|
|
|
282
283
|
--qw-ref-size-icon-size-sm: 16px;
|
|
283
284
|
--qw-ref-size-icon-size-md: 20px;
|
|
284
285
|
--qw-ref-size-icon-size-lg: 24px;
|
|
285
|
-
--qw-ref-size-
|
|
286
|
+
--qw-ref-size-stroke-width-half: 0.5px;
|
|
287
|
+
--qw-ref-size-stroke-width-base: 1px;
|
|
288
|
+
--qw-ref-size-stroke-width-double: 2px;
|
|
289
|
+
--qw-ref-size-stroke-width-triple: 3px;
|
|
290
|
+
--qw-ref-size-action-control-height-2xs: 24px;
|
|
291
|
+
--qw-ref-size-action-control-height-xs: 28px;
|
|
292
|
+
--qw-ref-size-action-control-height-sm: 32px;
|
|
293
|
+
--qw-ref-size-action-control-height-md: 36px;
|
|
294
|
+
--qw-ref-size-action-control-height-lg: 42px;
|
|
295
|
+
--qw-ref-size-action-control-height-xl: 50px;
|
|
296
|
+
--qw-ref-size-action-control-icon-2xs: 14px;
|
|
297
|
+
--qw-ref-size-avatar-diameter-sm: 40px;
|
|
298
|
+
--qw-ref-size-avatar-diameter-md: 50px;
|
|
299
|
+
--qw-ref-size-avatar-diameter-lg: 58px;
|
|
286
300
|
--qw-ref-size-opacity-disabled: 0.5;
|
|
287
301
|
--qw-ref-size-z-index-1: 10;
|
|
288
302
|
--qw-ref-size-z-index-2: 20;
|
|
@@ -298,6 +312,7 @@
|
|
|
298
312
|
--qw-ref-typography-font-weight-medium: 500;
|
|
299
313
|
--qw-ref-typography-font-weight-semibold: 600;
|
|
300
314
|
--qw-ref-typography-font-size-base: 14px;
|
|
315
|
+
--qw-ref-typography-font-size-xs: 11px;
|
|
301
316
|
--qw-ref-typography-font-size-sm: 12px;
|
|
302
317
|
--qw-ref-typography-font-size-lg: 16px;
|
|
303
318
|
--qw-ref-typography-font-size-xl: 20px;
|
|
@@ -310,8 +325,10 @@
|
|
|
310
325
|
--qw-ref-effect-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
|
|
311
326
|
--qw-ref-effect-shadow-md: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
|
|
312
327
|
--qw-ref-effect-shadow-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
|
|
328
|
+
--qw-sem-size-radius-sm: 4px;
|
|
313
329
|
--qw-sem-size-radius-control: 8px;
|
|
314
330
|
--qw-sem-size-radius-card: 14px;
|
|
331
|
+
--qw-sem-size-radius-xl: 16px;
|
|
315
332
|
--qw-sem-size-radius-pill: 9999px;
|
|
316
333
|
--qw-sem-size-radius-full: 9999px;
|
|
317
334
|
--qw-sem-size-control-height-sm: 32px;
|
|
@@ -320,6 +337,40 @@
|
|
|
320
337
|
--qw-sem-size-icon-size-sm: 16px;
|
|
321
338
|
--qw-sem-size-icon-size-md: 20px;
|
|
322
339
|
--qw-sem-size-icon-size-lg: 24px;
|
|
340
|
+
--qw-sem-size-action-control-height-2xs: 24px;
|
|
341
|
+
--qw-sem-size-action-control-height-xs: 28px;
|
|
342
|
+
--qw-sem-size-action-control-height-sm: 32px;
|
|
343
|
+
--qw-sem-size-action-control-height-md: 36px;
|
|
344
|
+
--qw-sem-size-action-control-height-lg: 42px;
|
|
345
|
+
--qw-sem-size-action-control-height-xl: 50px;
|
|
346
|
+
--qw-sem-size-action-control-padding-inline-2xs: 8px;
|
|
347
|
+
--qw-sem-size-action-control-padding-inline-xs: 8px;
|
|
348
|
+
--qw-sem-size-action-control-padding-inline-sm: 16px;
|
|
349
|
+
--qw-sem-size-action-control-padding-inline-md: 16px;
|
|
350
|
+
--qw-sem-size-action-control-padding-inline-lg: 20px;
|
|
351
|
+
--qw-sem-size-action-control-padding-inline-xl: 32px;
|
|
352
|
+
--qw-sem-size-action-control-icon-2xs: 14px;
|
|
353
|
+
--qw-sem-size-action-control-icon-xs: 16px;
|
|
354
|
+
--qw-sem-size-action-control-icon-sm: 16px;
|
|
355
|
+
--qw-sem-size-action-control-icon-md: 16px;
|
|
356
|
+
--qw-sem-size-action-control-icon-lg: 16px;
|
|
357
|
+
--qw-sem-size-action-control-icon-xl: 20px;
|
|
358
|
+
--qw-sem-size-action-control-gap-2xs: 4px;
|
|
359
|
+
--qw-sem-size-action-control-gap-xs: 4px;
|
|
360
|
+
--qw-sem-size-action-control-gap-sm: 8px;
|
|
361
|
+
--qw-sem-size-action-control-gap-md: 8px;
|
|
362
|
+
--qw-sem-size-action-control-gap-lg: 8px;
|
|
363
|
+
--qw-sem-size-action-control-gap-xl: 8px;
|
|
364
|
+
--qw-sem-size-border-width-default: 1px;
|
|
365
|
+
--qw-sem-size-border-width-strong: 2px;
|
|
366
|
+
--qw-sem-size-divider-width-thin: 0.5px;
|
|
367
|
+
--qw-sem-size-divider-width-default: 1px;
|
|
368
|
+
--qw-sem-size-focus-ring-width: 2px;
|
|
369
|
+
--qw-sem-size-focus-ring-offset: 2px;
|
|
370
|
+
--qw-sem-size-indicator-loading: 2px;
|
|
371
|
+
--qw-sem-size-avatar-diameter-sm: 40px;
|
|
372
|
+
--qw-sem-size-avatar-diameter-md: 50px;
|
|
373
|
+
--qw-sem-size-avatar-diameter-lg: 58px;
|
|
323
374
|
--qw-sem-size-inset-sm: 8px;
|
|
324
375
|
--qw-sem-size-inset-md: 16px;
|
|
325
376
|
--qw-sem-size-inset-lg: 24px;
|
|
@@ -344,6 +395,11 @@
|
|
|
344
395
|
--qw-sem-typography-body-strong-font-weight: 500;
|
|
345
396
|
--qw-sem-typography-body-strong-line-height: 1.5;
|
|
346
397
|
--qw-sem-typography-body-strong-letter-spacing: 0px;
|
|
398
|
+
--qw-sem-typography-body-lg-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
399
|
+
--qw-sem-typography-body-lg-font-size: 16px;
|
|
400
|
+
--qw-sem-typography-body-lg-font-weight: 400;
|
|
401
|
+
--qw-sem-typography-body-lg-line-height: 1.5;
|
|
402
|
+
--qw-sem-typography-body-lg-letter-spacing: 0px;
|
|
347
403
|
--qw-sem-typography-heading-sm-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
348
404
|
--qw-sem-typography-heading-sm-font-size: 16px;
|
|
349
405
|
--qw-sem-typography-heading-sm-font-weight: 600;
|
|
@@ -364,6 +420,11 @@
|
|
|
364
420
|
--qw-sem-typography-caption-font-weight: 400;
|
|
365
421
|
--qw-sem-typography-caption-line-height: 1.5;
|
|
366
422
|
--qw-sem-typography-caption-letter-spacing: 0px;
|
|
423
|
+
--qw-sem-typography-label-sm-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
424
|
+
--qw-sem-typography-label-sm-font-size: 11px;
|
|
425
|
+
--qw-sem-typography-label-sm-font-weight: 500;
|
|
426
|
+
--qw-sem-typography-label-sm-line-height: 1.5;
|
|
427
|
+
--qw-sem-typography-label-sm-letter-spacing: 0px;
|
|
367
428
|
--qw-sem-typography-code-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
368
429
|
--qw-sem-typography-code-font-size: 12px;
|
|
369
430
|
--qw-sem-typography-code-font-weight: 400;
|
|
@@ -378,127 +439,105 @@
|
|
|
378
439
|
--qw-sem-color-surface-elevated: #ffffff;
|
|
379
440
|
--qw-sem-color-surface-header: #EEEEEE;
|
|
380
441
|
--qw-sem-color-surface-brand-subtle: #EBF5FF;
|
|
442
|
+
--qw-sem-color-surface-canvas: #ffffff;
|
|
443
|
+
--qw-sem-color-surface-sunken: #EEEEEE;
|
|
444
|
+
--qw-sem-color-surface-selected: rgba(34, 34, 34, 0.05);
|
|
445
|
+
--qw-sem-color-surface-inverse: #353535;
|
|
381
446
|
--qw-sem-color-content-primary: #222222;
|
|
382
447
|
--qw-sem-color-content-secondary: #666666;
|
|
383
448
|
--qw-sem-color-content-tertiary: #999999;
|
|
384
449
|
--qw-sem-color-content-placeholder: #CCCCCC;
|
|
385
450
|
--qw-sem-color-content-intro: #A2A9B6;
|
|
451
|
+
--qw-sem-color-content-disabled: rgba(34, 34, 34, 0.3);
|
|
452
|
+
--qw-sem-color-content-link: #003DB8;
|
|
453
|
+
--qw-sem-color-content-icon-subtle: rgba(34, 34, 34, 0.05);
|
|
454
|
+
--qw-sem-color-content-inverse: #ffffff;
|
|
455
|
+
--qw-sem-color-content-on-solid: #ffffff;
|
|
456
|
+
--qw-sem-color-content-on-warning-subtle: #453200;
|
|
386
457
|
--qw-sem-color-border-default: #EEEEEE;
|
|
387
458
|
--qw-sem-color-border-strong: #CCCCCC;
|
|
388
459
|
--qw-sem-color-border-focus: #0011ff;
|
|
460
|
+
--qw-sem-color-border-subtle: rgba(34, 34, 34, 0.05);
|
|
461
|
+
--qw-sem-color-border-disabled: rgba(34, 34, 34, 0.1);
|
|
462
|
+
--qw-sem-color-border-on-media: #ffffff;
|
|
389
463
|
--qw-sem-color-fill-subtle: #F6F6F6;
|
|
390
464
|
--qw-sem-color-fill-hover: #EEEEEE;
|
|
391
465
|
--qw-sem-color-fill-active: #EBF5FF;
|
|
392
466
|
--qw-sem-color-fill-disabled: #F6F6F6;
|
|
467
|
+
--qw-sem-color-fill-track: rgba(34, 34, 34, 0.1);
|
|
393
468
|
--qw-sem-color-action-brand: #0011ff;
|
|
394
469
|
--qw-sem-color-action-product: #0d53ff;
|
|
395
470
|
--qw-sem-color-action-selected: rgba(13, 83, 255, 0.2);
|
|
396
471
|
--qw-sem-color-action-inverse: #ffffff;
|
|
472
|
+
--qw-sem-color-control-action-brand-subtle: rgba(0, 17, 255, 0.1);
|
|
473
|
+
--qw-sem-color-control-action-product-subtle: rgba(13, 83, 255, 0.1);
|
|
474
|
+
--qw-sem-color-control-action-danger-default: #FF5745;
|
|
475
|
+
--qw-sem-color-control-action-danger-subtle: rgba(255, 64, 64, 0.1);
|
|
476
|
+
--qw-sem-color-control-action-neutral-subtle: rgba(34, 34, 34, 0.05);
|
|
477
|
+
--qw-sem-color-control-selection-brand: rgba(0, 17, 255, 0.1);
|
|
478
|
+
--qw-sem-color-control-selection-product: rgba(13, 83, 255, 0.1);
|
|
479
|
+
--qw-sem-color-selection-text-background: rgba(13, 83, 255, 0.2);
|
|
397
480
|
--qw-sem-color-status-success: #1f993f;
|
|
398
481
|
--qw-sem-color-status-warning: #ffd575;
|
|
399
482
|
--qw-sem-color-status-danger: #FF5745;
|
|
400
483
|
--qw-sem-color-status-info: #0d53ff;
|
|
401
484
|
--qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.5);
|
|
402
|
-
--qw-sem-color-overlay-guide: rgba(
|
|
485
|
+
--qw-sem-color-overlay-guide: rgba(13, 83, 255, 0.1);
|
|
486
|
+
--qw-sem-color-overlay-media-subtle: rgba(34, 34, 34, 0.4);
|
|
487
|
+
--qw-sem-color-overlay-media-strong: rgba(34, 34, 34, 0.5);
|
|
403
488
|
--qw-sem-color-shadow: rgba(34, 34, 34, 0.1);
|
|
489
|
+
--qw-sem-effect-shadow-card: 0px 1px 2px 0px rgba(34, 34, 34, 0.1);
|
|
490
|
+
--qw-sem-effect-shadow-floating: 0px 4px 12px 0px rgba(34, 34, 34, 0.1);
|
|
404
491
|
--qw-sem-effect-shadow-dialog: 0px 8px 24px 0px rgba(34, 34, 34, 0.1);
|
|
405
|
-
--qw-compat-button-dimension-height-mini: 24px;
|
|
406
|
-
--qw-compat-button-dimension-height-xs: 28px;
|
|
407
|
-
--qw-compat-button-dimension-height-s: 32px;
|
|
408
|
-
--qw-compat-button-dimension-height-normal: 36px;
|
|
409
|
-
--qw-compat-button-dimension-height-m: 42px;
|
|
410
|
-
--qw-compat-button-dimension-height-l: 50px;
|
|
411
|
-
--qw-compat-button-dimension-square-mini: 24px;
|
|
412
|
-
--qw-compat-button-dimension-square-xs: 28px;
|
|
413
|
-
--qw-compat-button-dimension-square-s: 32px;
|
|
414
|
-
--qw-compat-button-dimension-square-normal: 36px;
|
|
415
|
-
--qw-compat-button-dimension-square-m: 42px;
|
|
416
|
-
--qw-compat-button-dimension-square-l: 50px;
|
|
417
|
-
--qw-compat-button-dimension-padding-inline-mini: 8px;
|
|
418
|
-
--qw-compat-button-dimension-padding-inline-xs: 8px;
|
|
419
|
-
--qw-compat-button-dimension-padding-inline-s: 16px;
|
|
420
|
-
--qw-compat-button-dimension-padding-inline-normal: 16px;
|
|
421
|
-
--qw-compat-button-dimension-padding-inline-m: 20px;
|
|
422
|
-
--qw-compat-button-dimension-padding-inline-l: 32px;
|
|
423
|
-
--qw-compat-button-dimension-icon-mini: 14px;
|
|
424
|
-
--qw-compat-button-dimension-icon-xs: 16px;
|
|
425
|
-
--qw-compat-button-dimension-icon-s: 16px;
|
|
426
|
-
--qw-compat-button-dimension-icon-normal: 16px;
|
|
427
|
-
--qw-compat-button-dimension-icon-m: 16px;
|
|
428
|
-
--qw-compat-button-dimension-icon-l: 20px;
|
|
429
|
-
--qw-compat-button-dimension-gap-mini: 4px;
|
|
430
|
-
--qw-compat-button-dimension-gap-xs: 4px;
|
|
431
|
-
--qw-compat-button-dimension-gap-s: 8px;
|
|
432
|
-
--qw-compat-button-dimension-gap-normal: 8px;
|
|
433
|
-
--qw-compat-button-dimension-gap-m: 8px;
|
|
434
|
-
--qw-compat-button-dimension-gap-l: 8px;
|
|
435
|
-
--qw-compat-button-dimension-border-width: 1px;
|
|
436
|
-
--qw-compat-button-dimension-focus-ring-width: 2px;
|
|
437
|
-
--qw-compat-button-dimension-focus-ring-offset: 2px;
|
|
438
|
-
--qw-compat-button-dimension-spinner-stroke: 2px;
|
|
439
|
-
--qw-compat-button-color-bg-soft-brand: rgba(0, 68, 255, 0.1);
|
|
440
|
-
--qw-compat-button-color-bg-soft-danger: rgba(255, 87, 69, 0.1);
|
|
441
|
-
--qw-compat-button-color-bg-neutral-gray: rgba(34, 34, 34, 0.06);
|
|
442
|
-
--qw-compat-loading-color-logo: rgba(34, 34, 34, 0.06);
|
|
443
|
-
--qw-compat-loading-dimension-radius-surface: 16px;
|
|
444
|
-
--qw-compat-tag-dimension-radius: 4px;
|
|
445
|
-
--qw-compat-tag-dimension-border-width: 1px;
|
|
446
|
-
--qw-compat-tag-dimension-height-small: 12px;
|
|
447
|
-
--qw-compat-tag-dimension-height-medium: 16px;
|
|
448
|
-
--qw-compat-tag-dimension-height-large: 20px;
|
|
449
|
-
--qw-compat-tag-dimension-padding-inline-small: 3px;
|
|
450
|
-
--qw-compat-tag-dimension-padding-inline-medium: 4px;
|
|
451
|
-
--qw-compat-tag-dimension-padding-inline-large: 5px;
|
|
452
|
-
--qw-compat-tag-typography-line-height-small: 16px;
|
|
453
|
-
--qw-compat-tag-typography-line-height-medium: 22px;
|
|
454
|
-
--qw-compat-tag-typography-line-height-large: 22px;
|
|
455
|
-
--qw-compat-tag-typography-font-size-small: 8px;
|
|
456
|
-
--qw-compat-tag-typography-font-size-medium: 11px;
|
|
457
|
-
--qw-compat-tag-typography-font-size-large: 11px;
|
|
458
|
-
--qw-compat-avatar-dimension-diameter-s: 40px;
|
|
459
|
-
--qw-compat-avatar-dimension-diameter-m: 50px;
|
|
460
|
-
--qw-compat-avatar-dimension-diameter-l: 58px;
|
|
461
|
-
--qw-compat-avatar-dimension-border-width: 1px;
|
|
462
|
-
--qw-compat-avatar-dimension-badge-font-size: 11px;
|
|
463
|
-
--qw-compat-avatar-dimension-badge-line-height: 16px;
|
|
464
|
-
--qw-compat-avatar-dimension-badge-padding: 5px;
|
|
465
|
-
--qw-compat-avatar-color-badge-border: #FFFFFF;
|
|
466
|
-
--qw-compat-textarea-color-paste-text: #FFFFFF;
|
|
467
|
-
--qw-compat-tabs-dimension-border-width: 1px;
|
|
468
|
-
--qw-compat-image-dimension-border-width: 1px;
|
|
469
492
|
}
|
|
470
493
|
|
|
471
|
-
/* ── Compat Sidecar(迁移债务,禁止业务方长期依赖)── */
|
|
472
|
-
/* 治理:specs/rfcs/0002-token-compat-sidecar.md */
|
|
473
|
-
/* 条目数:64 · graceDays:90 */
|
|
474
494
|
[data-qw-mode="dark"] {
|
|
475
495
|
--qw-sem-color-surface-base: #222222;
|
|
476
496
|
--qw-sem-color-surface-subtle: #202020;
|
|
477
497
|
--qw-sem-color-surface-elevated: #2D2D2D;
|
|
478
498
|
--qw-sem-color-surface-header: #3A3A3A;
|
|
479
499
|
--qw-sem-color-surface-brand-subtle: #001D66;
|
|
500
|
+
--qw-sem-color-surface-canvas: #121212;
|
|
501
|
+
--qw-sem-color-surface-sunken: #2D2D2D;
|
|
502
|
+
--qw-sem-color-surface-selected: rgba(255, 255, 255, 0.1);
|
|
480
503
|
--qw-sem-color-content-primary: #ffffff;
|
|
481
504
|
--qw-sem-color-content-secondary: #999999;
|
|
482
505
|
--qw-sem-color-content-tertiary: #666666;
|
|
483
506
|
--qw-sem-color-content-placeholder: rgba(255, 255, 255, 0.3);
|
|
484
507
|
--qw-sem-color-content-intro: #888E99;
|
|
508
|
+
--qw-sem-color-content-disabled: rgba(255, 255, 255, 0.3);
|
|
509
|
+
--qw-sem-color-content-link: #3086FF;
|
|
510
|
+
--qw-sem-color-content-icon-subtle: rgba(255, 255, 255, 0.1);
|
|
511
|
+
--qw-sem-color-content-inverse: #222222;
|
|
512
|
+
--qw-sem-color-content-on-warning-subtle: #F4D38B;
|
|
485
513
|
--qw-sem-color-border-default: #3A3A3A;
|
|
486
514
|
--qw-sem-color-border-strong: #666666;
|
|
487
515
|
--qw-sem-color-border-focus: #426EFF;
|
|
516
|
+
--qw-sem-color-border-subtle: rgba(255, 255, 255, 0.05);
|
|
517
|
+
--qw-sem-color-border-disabled: rgba(255, 255, 255, 0.1);
|
|
488
518
|
--qw-sem-color-fill-subtle: rgba(255, 255, 255, 0.2);
|
|
489
519
|
--qw-sem-color-fill-hover: #2D2D2D;
|
|
490
520
|
--qw-sem-color-fill-active: #001D66;
|
|
491
521
|
--qw-sem-color-fill-disabled: #202020;
|
|
522
|
+
--qw-sem-color-fill-track: rgba(255, 255, 255, 0.2);
|
|
492
523
|
--qw-sem-color-action-brand: #426EFF;
|
|
493
524
|
--qw-sem-color-action-product: #266FFF;
|
|
494
525
|
--qw-sem-color-action-selected: rgba(13, 83, 255, 0.4);
|
|
495
526
|
--qw-sem-color-action-inverse: #222222;
|
|
527
|
+
--qw-sem-color-control-action-brand-subtle: rgba(0, 17, 255, 0.2);
|
|
528
|
+
--qw-sem-color-control-action-product-subtle: rgba(13, 83, 255, 0.2);
|
|
529
|
+
--qw-sem-color-control-action-danger-subtle: rgba(255, 64, 64, 0.2);
|
|
530
|
+
--qw-sem-color-control-action-neutral-subtle: rgba(255, 255, 255, 0.1);
|
|
531
|
+
--qw-sem-color-control-selection-brand: rgba(0, 17, 255, 0.2);
|
|
532
|
+
--qw-sem-color-control-selection-product: rgba(13, 83, 255, 0.2);
|
|
533
|
+
--qw-sem-color-selection-text-background: rgba(13, 83, 255, 0.4);
|
|
496
534
|
--qw-sem-color-status-info: #266FFF;
|
|
535
|
+
--qw-sem-color-status-success-subtle: rgba(31, 153, 63, 0.2);
|
|
536
|
+
--qw-sem-color-status-danger-subtle: rgba(255, 64, 64, 0.2);
|
|
497
537
|
--qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.7);
|
|
538
|
+
--qw-sem-color-overlay-guide: rgba(13, 83, 255, 0.2);
|
|
498
539
|
--qw-sem-color-shadow: rgba(34, 34, 34, 0.5);
|
|
540
|
+
--qw-sem-effect-shadow-card: 0px 1px 2px 0px rgba(34, 34, 34, 0.5);
|
|
541
|
+
--qw-sem-effect-shadow-floating: 0px 4px 12px 0px rgba(34, 34, 34, 0.5);
|
|
499
542
|
--qw-sem-effect-shadow-dialog: 0px 8px 24px 0px rgba(34, 34, 34, 0.5);
|
|
500
|
-
--qw-compat-button-color-bg-soft-brand: rgba(66, 110, 255, 0.24);
|
|
501
|
-
--qw-compat-button-color-bg-soft-danger: rgba(254, 135, 122, 0.2);
|
|
502
|
-
--qw-compat-button-color-bg-neutral-gray: rgba(255, 255, 255, 0.1);
|
|
503
|
-
--qw-compat-loading-color-logo: rgba(255, 255, 255, 0.1);
|
|
504
543
|
}
|