@qw-ui/tokens 0.3.0-next.3 → 0.3.0-next.5

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 (18) hide show
  1. package/README.md +7 -4
  2. package/dist/color-architecture.d.ts +153 -3
  3. package/dist/derive/index.d.ts +2 -2
  4. package/dist/derive/live-css.d.ts +1 -1
  5. package/dist/derive/reference.d.ts +42 -8
  6. package/dist/derive/semantic.d.ts +7 -1
  7. package/dist/design-doc.d.ts +1 -1
  8. package/dist/figma/color-contract.d.ts +2 -0
  9. package/dist/figma/color-snapshot.d.ts +4 -0
  10. package/dist/index.d.ts +6 -3
  11. package/dist/index.js +647 -38
  12. package/dist/index.js.map +1 -1
  13. package/dist/schema.d.ts +3 -3
  14. package/dist/tokens.css +52 -2
  15. package/dist/tokens.json +83 -3
  16. package/dist/tokens.live.css +72 -9
  17. package/dist/tokens.ts +85 -5
  18. package/package.json +1 -1
package/dist/schema.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { z } from "zod";
2
2
  /**
3
- * SeedSchema — T1 Seed 的唯一事实源校验（RFC 0001 §2.1，v3 修订）。
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
- * 回退默认值，锚点缺口必须在 Seed 层显式补齐，Reference 层不得用硬编码兜底。
6
+ * packages/tokens/design/seed.tokens.json。部分已不再驱动 canonical T2 的字段暂时
7
+ * 保留为兼容输入；新 Reference 不得为了形式完整继续扩充伪 Seed。
8
8
  *
9
9
  * v3 变化：
10
10
  * - 颜色全部结构化（DTCG Color module，支持 srgb/oklch）。
package/dist/tokens.css CHANGED
@@ -44,6 +44,7 @@
44
44
  --qw-ref-color-black-a90: rgba(34, 34, 34, 0.9);
45
45
  --qw-ref-color-black-a100: #222222;
46
46
  --qw-ref-color-black-base: #222222;
47
+ --qw-ref-color-black-pure: #000000;
47
48
  --qw-ref-color-white-50: #F6F6F6;
48
49
  --qw-ref-color-white-100: #EBEBEB;
49
50
  --qw-ref-color-white-200: #D7D7D7;
@@ -378,29 +379,55 @@
378
379
  --qw-sem-color-surface-elevated: #ffffff;
379
380
  --qw-sem-color-surface-header: #EEEEEE;
380
381
  --qw-sem-color-surface-brand-subtle: #EBF5FF;
382
+ --qw-sem-color-surface-canvas: #ffffff;
383
+ --qw-sem-color-surface-sunken: #EEEEEE;
384
+ --qw-sem-color-surface-selected: rgba(34, 34, 34, 0.05);
385
+ --qw-sem-color-surface-inverse: #353535;
381
386
  --qw-sem-color-content-primary: #222222;
382
387
  --qw-sem-color-content-secondary: #666666;
383
388
  --qw-sem-color-content-tertiary: #999999;
384
389
  --qw-sem-color-content-placeholder: #CCCCCC;
385
390
  --qw-sem-color-content-intro: #A2A9B6;
391
+ --qw-sem-color-content-disabled: rgba(34, 34, 34, 0.3);
392
+ --qw-sem-color-content-link: #003DB8;
393
+ --qw-sem-color-content-icon-subtle: rgba(34, 34, 34, 0.05);
394
+ --qw-sem-color-content-inverse: #ffffff;
395
+ --qw-sem-color-content-on-solid: #ffffff;
396
+ --qw-sem-color-content-on-warning-subtle: #453200;
386
397
  --qw-sem-color-border-default: #EEEEEE;
387
398
  --qw-sem-color-border-strong: #CCCCCC;
388
399
  --qw-sem-color-border-focus: #0011ff;
400
+ --qw-sem-color-border-subtle: rgba(34, 34, 34, 0.05);
401
+ --qw-sem-color-border-disabled: rgba(34, 34, 34, 0.1);
402
+ --qw-sem-color-border-on-media: #ffffff;
389
403
  --qw-sem-color-fill-subtle: #F6F6F6;
390
404
  --qw-sem-color-fill-hover: #EEEEEE;
391
405
  --qw-sem-color-fill-active: #EBF5FF;
392
406
  --qw-sem-color-fill-disabled: #F6F6F6;
407
+ --qw-sem-color-fill-track: rgba(34, 34, 34, 0.1);
393
408
  --qw-sem-color-action-brand: #0011ff;
394
409
  --qw-sem-color-action-product: #0d53ff;
395
410
  --qw-sem-color-action-selected: rgba(13, 83, 255, 0.2);
396
411
  --qw-sem-color-action-inverse: #ffffff;
412
+ --qw-sem-color-control-action-brand-subtle: rgba(0, 17, 255, 0.1);
413
+ --qw-sem-color-control-action-product-subtle: rgba(13, 83, 255, 0.1);
414
+ --qw-sem-color-control-action-danger-default: #FF5745;
415
+ --qw-sem-color-control-action-danger-subtle: rgba(255, 87, 69, 0.1);
416
+ --qw-sem-color-control-action-neutral-subtle: rgba(34, 34, 34, 0.05);
417
+ --qw-sem-color-control-selection-brand: rgba(0, 17, 255, 0.1);
418
+ --qw-sem-color-control-selection-product: rgba(13, 83, 255, 0.1);
419
+ --qw-sem-color-selection-text-background: rgba(13, 83, 255, 0.2);
397
420
  --qw-sem-color-status-success: #1f993f;
398
421
  --qw-sem-color-status-warning: #ffd575;
399
422
  --qw-sem-color-status-danger: #FF5745;
400
423
  --qw-sem-color-status-info: #0d53ff;
401
424
  --qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.5);
402
- --qw-sem-color-overlay-guide: rgba(34, 34, 34, 0.7);
425
+ --qw-sem-color-overlay-guide: rgba(13, 83, 255, 0.1);
426
+ --qw-sem-color-overlay-media-subtle: rgba(34, 34, 34, 0.4);
427
+ --qw-sem-color-overlay-media-strong: rgba(34, 34, 34, 0.5);
403
428
  --qw-sem-color-shadow: rgba(34, 34, 34, 0.1);
429
+ --qw-sem-effect-shadow-card: 0px 1px 2px 0px rgba(34, 34, 34, 0.1);
430
+ --qw-sem-effect-shadow-floating: 0px 4px 12px 0px rgba(34, 34, 34, 0.1);
404
431
  --qw-sem-effect-shadow-dialog: 0px 8px 24px 0px rgba(34, 34, 34, 0.1);
405
432
  --qw-compat-button-dimension-height-mini: 24px;
406
433
  --qw-compat-button-dimension-height-xs: 28px;
@@ -491,25 +518,48 @@
491
518
  --qw-sem-color-surface-elevated: #2D2D2D;
492
519
  --qw-sem-color-surface-header: #3A3A3A;
493
520
  --qw-sem-color-surface-brand-subtle: #001D66;
521
+ --qw-sem-color-surface-canvas: #000000;
522
+ --qw-sem-color-surface-sunken: #2D2D2D;
523
+ --qw-sem-color-surface-selected: rgba(255, 255, 255, 0.1);
494
524
  --qw-sem-color-content-primary: #ffffff;
495
525
  --qw-sem-color-content-secondary: #999999;
496
526
  --qw-sem-color-content-tertiary: #666666;
497
527
  --qw-sem-color-content-placeholder: rgba(255, 255, 255, 0.3);
498
528
  --qw-sem-color-content-intro: #888E99;
529
+ --qw-sem-color-content-disabled: rgba(255, 255, 255, 0.3);
530
+ --qw-sem-color-content-link: #3086FF;
531
+ --qw-sem-color-content-icon-subtle: rgba(255, 255, 255, 0.1);
532
+ --qw-sem-color-content-inverse: #222222;
533
+ --qw-sem-color-content-on-warning-subtle: #F4D38B;
499
534
  --qw-sem-color-border-default: #3A3A3A;
500
535
  --qw-sem-color-border-strong: #666666;
501
536
  --qw-sem-color-border-focus: #426EFF;
537
+ --qw-sem-color-border-subtle: rgba(255, 255, 255, 0.05);
538
+ --qw-sem-color-border-disabled: rgba(255, 255, 255, 0.1);
502
539
  --qw-sem-color-fill-subtle: rgba(255, 255, 255, 0.2);
503
540
  --qw-sem-color-fill-hover: #2D2D2D;
504
541
  --qw-sem-color-fill-active: #001D66;
505
542
  --qw-sem-color-fill-disabled: #202020;
543
+ --qw-sem-color-fill-track: rgba(255, 255, 255, 0.2);
506
544
  --qw-sem-color-action-brand: #426EFF;
507
545
  --qw-sem-color-action-product: #266FFF;
508
- --qw-sem-color-action-selected: rgba(13, 83, 255, 0.4);
546
+ --qw-sem-color-action-selected: rgba(38, 111, 255, 0.4);
509
547
  --qw-sem-color-action-inverse: #222222;
548
+ --qw-sem-color-control-action-brand-subtle: rgba(66, 110, 255, 0.2);
549
+ --qw-sem-color-control-action-product-subtle: rgba(38, 111, 255, 0.2);
550
+ --qw-sem-color-control-action-danger-subtle: rgba(255, 87, 69, 0.2);
551
+ --qw-sem-color-control-action-neutral-subtle: rgba(255, 255, 255, 0.1);
552
+ --qw-sem-color-control-selection-brand: rgba(66, 110, 255, 0.2);
553
+ --qw-sem-color-control-selection-product: rgba(38, 111, 255, 0.2);
554
+ --qw-sem-color-selection-text-background: rgba(38, 111, 255, 0.4);
510
555
  --qw-sem-color-status-info: #266FFF;
556
+ --qw-sem-color-status-success-subtle: rgba(31, 153, 63, 0.2);
557
+ --qw-sem-color-status-danger-subtle: rgba(255, 87, 69, 0.2);
511
558
  --qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.7);
559
+ --qw-sem-color-overlay-guide: rgba(38, 111, 255, 0.2);
512
560
  --qw-sem-color-shadow: rgba(34, 34, 34, 0.5);
561
+ --qw-sem-effect-shadow-card: 0px 1px 2px 0px rgba(34, 34, 34, 0.5);
562
+ --qw-sem-effect-shadow-floating: 0px 4px 12px 0px rgba(34, 34, 34, 0.5);
513
563
  --qw-sem-effect-shadow-dialog: 0px 8px 24px 0px rgba(34, 34, 34, 0.5);
514
564
  --qw-compat-button-color-bg-soft-brand: rgba(66, 110, 255, 0.24);
515
565
  --qw-compat-button-color-bg-soft-danger: rgba(254, 135, 122, 0.2);
package/dist/tokens.json CHANGED
@@ -264,6 +264,12 @@
264
264
  "--qw-ref-color-brown-800": "#542800",
265
265
  "--qw-ref-color-brown-900": "#200B00",
266
266
  "--qw-ref-color-brown-base": "#b45e06",
267
+ "--qw-ref-color-brand-500-a20": "rgba(66, 110, 255, 0.2)",
268
+ "--qw-ref-color-blue-600-a20": "rgba(38, 111, 255, 0.2)",
269
+ "--qw-ref-color-blue-600-a40": "rgba(38, 111, 255, 0.4)",
270
+ "--qw-ref-color-red-400-a10": "rgba(255, 87, 69, 0.1)",
271
+ "--qw-ref-color-red-400-a20": "rgba(255, 87, 69, 0.2)",
272
+ "--qw-ref-color-black-pure": "#000000",
267
273
  "--qw-ref-size-spacing-1": "4px",
268
274
  "--qw-ref-size-spacing-2": "8px",
269
275
  "--qw-ref-size-spacing-3": "12px",
@@ -384,29 +390,63 @@
384
390
  "--qw-sem-color-surface-elevated": "#ffffff",
385
391
  "--qw-sem-color-surface-header": "#EEEEEE",
386
392
  "--qw-sem-color-surface-brand-subtle": "#EBF5FF",
393
+ "--qw-sem-color-surface-canvas": "#ffffff",
394
+ "--qw-sem-color-surface-sunken": "#EEEEEE",
395
+ "--qw-sem-color-surface-selected": "rgba(34, 34, 34, 0.05)",
396
+ "--qw-sem-color-surface-inverse": "#353535",
397
+ "--qw-sem-color-surface-canvas-subtle": "#F6F6F6",
387
398
  "--qw-sem-color-content-primary": "#222222",
388
399
  "--qw-sem-color-content-secondary": "#666666",
389
400
  "--qw-sem-color-content-tertiary": "#999999",
390
401
  "--qw-sem-color-content-placeholder": "#CCCCCC",
391
402
  "--qw-sem-color-content-intro": "#A2A9B6",
403
+ "--qw-sem-color-content-disabled": "rgba(34, 34, 34, 0.3)",
404
+ "--qw-sem-color-content-link": "#003DB8",
405
+ "--qw-sem-color-content-icon-subtle": "rgba(34, 34, 34, 0.05)",
406
+ "--qw-sem-color-content-inverse": "#ffffff",
407
+ "--qw-sem-color-content-on-solid": "#ffffff",
408
+ "--qw-sem-color-content-on-warning-subtle": "#453200",
392
409
  "--qw-sem-color-border-default": "#EEEEEE",
393
410
  "--qw-sem-color-border-strong": "#CCCCCC",
394
411
  "--qw-sem-color-border-focus": "#0011ff",
412
+ "--qw-sem-color-border-subtle": "rgba(34, 34, 34, 0.05)",
413
+ "--qw-sem-color-border-disabled": "rgba(34, 34, 34, 0.1)",
414
+ "--qw-sem-color-border-on-media": "#ffffff",
395
415
  "--qw-sem-color-fill-subtle": "#F6F6F6",
396
416
  "--qw-sem-color-fill-hover": "#EEEEEE",
397
417
  "--qw-sem-color-fill-active": "#EBF5FF",
398
418
  "--qw-sem-color-fill-disabled": "#F6F6F6",
419
+ "--qw-sem-color-fill-track": "rgba(34, 34, 34, 0.1)",
399
420
  "--qw-sem-color-action-brand": "#0011ff",
400
421
  "--qw-sem-color-action-product": "#0d53ff",
401
422
  "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.2)",
402
423
  "--qw-sem-color-action-inverse": "#ffffff",
424
+ "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.1)",
425
+ "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.1)",
426
+ "--qw-sem-color-control-action-danger-default": "#FF5745",
427
+ "--qw-sem-color-control-action-danger-subtle": "rgba(255, 87, 69, 0.1)",
428
+ "--qw-sem-color-control-action-neutral-subtle": "rgba(34, 34, 34, 0.05)",
429
+ "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.1)",
430
+ "--qw-sem-color-control-selection-product": "rgba(13, 83, 255, 0.1)",
431
+ "--qw-sem-color-selection-text-background": "rgba(13, 83, 255, 0.2)",
403
432
  "--qw-sem-color-status-success": "#1f993f",
404
433
  "--qw-sem-color-status-warning": "#ffd575",
405
434
  "--qw-sem-color-status-danger": "#FF5745",
406
435
  "--qw-sem-color-status-info": "#0d53ff",
436
+ "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.1)",
437
+ "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
438
+ "--qw-sem-color-status-danger-subtle": "rgba(255, 87, 69, 0.1)",
439
+ "--qw-sem-color-status-info-subtle": "rgba(13, 83, 255, 0.1)",
407
440
  "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.5)",
408
- "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
441
+ "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.1)",
442
+ "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
443
+ "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
409
444
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
445
+ "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.1)",
446
+ "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.1)",
447
+ "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.1)",
448
+ "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.1)",
449
+ "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.1)",
410
450
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
411
451
  "--qw-compat-button-dimension-height-mini": "24px",
412
452
  "--qw-compat-button-dimension-height-xs": "28px",
@@ -752,6 +792,12 @@
752
792
  "--qw-ref-color-brown-800": "#542800",
753
793
  "--qw-ref-color-brown-900": "#200B00",
754
794
  "--qw-ref-color-brown-base": "#b45e06",
795
+ "--qw-ref-color-brand-500-a20": "rgba(66, 110, 255, 0.2)",
796
+ "--qw-ref-color-blue-600-a20": "rgba(38, 111, 255, 0.2)",
797
+ "--qw-ref-color-blue-600-a40": "rgba(38, 111, 255, 0.4)",
798
+ "--qw-ref-color-red-400-a10": "rgba(255, 87, 69, 0.1)",
799
+ "--qw-ref-color-red-400-a20": "rgba(255, 87, 69, 0.2)",
800
+ "--qw-ref-color-black-pure": "#000000",
755
801
  "--qw-ref-size-spacing-1": "4px",
756
802
  "--qw-ref-size-spacing-2": "8px",
757
803
  "--qw-ref-size-spacing-3": "12px",
@@ -872,29 +918,63 @@
872
918
  "--qw-sem-color-surface-elevated": "#2D2D2D",
873
919
  "--qw-sem-color-surface-header": "#3A3A3A",
874
920
  "--qw-sem-color-surface-brand-subtle": "#001D66",
921
+ "--qw-sem-color-surface-canvas": "#000000",
922
+ "--qw-sem-color-surface-sunken": "#2D2D2D",
923
+ "--qw-sem-color-surface-selected": "rgba(255, 255, 255, 0.1)",
924
+ "--qw-sem-color-surface-inverse": "#353535",
925
+ "--qw-sem-color-surface-canvas-subtle": "#000000",
875
926
  "--qw-sem-color-content-primary": "#ffffff",
876
927
  "--qw-sem-color-content-secondary": "#999999",
877
928
  "--qw-sem-color-content-tertiary": "#666666",
878
929
  "--qw-sem-color-content-placeholder": "rgba(255, 255, 255, 0.3)",
879
930
  "--qw-sem-color-content-intro": "#888E99",
931
+ "--qw-sem-color-content-disabled": "rgba(255, 255, 255, 0.3)",
932
+ "--qw-sem-color-content-link": "#3086FF",
933
+ "--qw-sem-color-content-icon-subtle": "rgba(255, 255, 255, 0.1)",
934
+ "--qw-sem-color-content-inverse": "#222222",
935
+ "--qw-sem-color-content-on-solid": "#ffffff",
936
+ "--qw-sem-color-content-on-warning-subtle": "#F4D38B",
880
937
  "--qw-sem-color-border-default": "#3A3A3A",
881
938
  "--qw-sem-color-border-strong": "#666666",
882
939
  "--qw-sem-color-border-focus": "#426EFF",
940
+ "--qw-sem-color-border-subtle": "rgba(255, 255, 255, 0.05)",
941
+ "--qw-sem-color-border-disabled": "rgba(255, 255, 255, 0.1)",
942
+ "--qw-sem-color-border-on-media": "#ffffff",
883
943
  "--qw-sem-color-fill-subtle": "rgba(255, 255, 255, 0.2)",
884
944
  "--qw-sem-color-fill-hover": "#2D2D2D",
885
945
  "--qw-sem-color-fill-active": "#001D66",
886
946
  "--qw-sem-color-fill-disabled": "#202020",
947
+ "--qw-sem-color-fill-track": "rgba(255, 255, 255, 0.2)",
887
948
  "--qw-sem-color-action-brand": "#426EFF",
888
949
  "--qw-sem-color-action-product": "#266FFF",
889
- "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.4)",
950
+ "--qw-sem-color-action-selected": "rgba(38, 111, 255, 0.4)",
890
951
  "--qw-sem-color-action-inverse": "#222222",
952
+ "--qw-sem-color-control-action-brand-subtle": "rgba(66, 110, 255, 0.2)",
953
+ "--qw-sem-color-control-action-product-subtle": "rgba(38, 111, 255, 0.2)",
954
+ "--qw-sem-color-control-action-danger-default": "#FF5745",
955
+ "--qw-sem-color-control-action-danger-subtle": "rgba(255, 87, 69, 0.2)",
956
+ "--qw-sem-color-control-action-neutral-subtle": "rgba(255, 255, 255, 0.1)",
957
+ "--qw-sem-color-control-selection-brand": "rgba(66, 110, 255, 0.2)",
958
+ "--qw-sem-color-control-selection-product": "rgba(38, 111, 255, 0.2)",
959
+ "--qw-sem-color-selection-text-background": "rgba(38, 111, 255, 0.4)",
891
960
  "--qw-sem-color-status-success": "#1f993f",
892
961
  "--qw-sem-color-status-warning": "#ffd575",
893
962
  "--qw-sem-color-status-danger": "#FF5745",
894
963
  "--qw-sem-color-status-info": "#266FFF",
964
+ "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.2)",
965
+ "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
966
+ "--qw-sem-color-status-danger-subtle": "rgba(255, 87, 69, 0.2)",
967
+ "--qw-sem-color-status-info-subtle": "rgba(38, 111, 255, 0.2)",
895
968
  "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.7)",
896
- "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
969
+ "--qw-sem-color-overlay-guide": "rgba(38, 111, 255, 0.2)",
970
+ "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
971
+ "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
897
972
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
973
+ "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.5)",
974
+ "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.5)",
975
+ "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.5)",
976
+ "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.5)",
977
+ "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.5)",
898
978
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
899
979
  "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
900
980
  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
package/dist/tokens.live.css CHANGED
@@ -31,9 +31,6 @@
31
31
  --qw-seed-typography-font-family-text-windows-latin: 'Segoe UI', system-ui, Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
32
32
  --qw-seed-typography-font-family-text-windows-zh: 'Microsoft YaHei', 'Segoe UI', system-ui, Roboto, 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
33
33
  --qw-seed-typography-font-family-text-windows-ja: Meiryo, 'Yu Gothic UI', 'Segoe UI', system-ui, Roboto, 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
34
- --qw-seed-typography-font-weight-regular: 400;
35
- --qw-seed-typography-font-weight-medium: 500;
36
- --qw-seed-typography-font-weight-semibold: 600;
37
34
  --qw-seed-typography-font-size-base: 14px;
38
35
  --qw-seed-typography-line-height-base: 1.5;
39
36
  --qw-seed-typography-letter-spacing-base: 0px;
@@ -307,6 +304,12 @@
307
304
  --qw-ref-color-brown-800: #542800;
308
305
  --qw-ref-color-brown-900: #200B00;
309
306
  --qw-ref-color-brown-base: var(--qw-seed-color-brown);
307
+ --qw-ref-color-brand-500-a20: rgba(66, 110, 255, 0.2);
308
+ --qw-ref-color-blue-600-a20: rgba(38, 111, 255, 0.2);
309
+ --qw-ref-color-blue-600-a40: rgba(38, 111, 255, 0.4);
310
+ --qw-ref-color-red-400-a10: rgba(255, 87, 69, 0.1);
311
+ --qw-ref-color-red-400-a20: rgba(255, 87, 69, 0.2);
312
+ --qw-ref-color-black-pure: #000000;
310
313
  --qw-ref-size-spacing-1: calc(var(--qw-seed-size-spacing-step) * 1);
311
314
  --qw-ref-size-spacing-2: calc(var(--qw-seed-size-spacing-step) * 2);
312
315
  --qw-ref-size-spacing-3: calc(var(--qw-seed-size-spacing-step) * 3);
@@ -343,9 +346,9 @@
343
346
  --qw-ref-typography-font-family-text-windows-latin: var(--qw-seed-typography-font-family-text-windows-latin);
344
347
  --qw-ref-typography-font-family-text-windows-zh: var(--qw-seed-typography-font-family-text-windows-zh);
345
348
  --qw-ref-typography-font-family-text-windows-ja: var(--qw-seed-typography-font-family-text-windows-ja);
346
- --qw-ref-typography-font-weight-regular: var(--qw-seed-typography-font-weight-regular);
347
- --qw-ref-typography-font-weight-medium: var(--qw-seed-typography-font-weight-medium);
348
- --qw-ref-typography-font-weight-semibold: var(--qw-seed-typography-font-weight-semibold);
349
+ --qw-ref-typography-font-weight-regular: 400;
350
+ --qw-ref-typography-font-weight-medium: 500;
351
+ --qw-ref-typography-font-weight-semibold: 600;
349
352
  --qw-ref-typography-font-size-base: var(--qw-seed-typography-font-size-base);
350
353
  --qw-ref-typography-font-size-sm: round(nearest, calc(var(--qw-seed-typography-font-size-base) * 0.857), 1px);
351
354
  --qw-ref-typography-font-size-lg: round(nearest, calc(var(--qw-seed-typography-font-size-base) * 1.143), 1px);
@@ -427,30 +430,64 @@
427
430
  --qw-sem-color-surface-elevated: var(--qw-ref-color-white-base);
428
431
  --qw-sem-color-surface-header: var(--qw-ref-color-gray-100);
429
432
  --qw-sem-color-surface-brand-subtle: var(--qw-ref-color-blue-50);
433
+ --qw-sem-color-surface-canvas: var(--qw-ref-color-white-base);
434
+ --qw-sem-color-surface-sunken: var(--qw-ref-color-gray-100);
435
+ --qw-sem-color-surface-selected: var(--qw-ref-color-black-a5);
436
+ --qw-sem-color-surface-inverse: var(--qw-ref-color-black-800);
437
+ --qw-sem-color-surface-canvas-subtle: var(--qw-ref-color-gray-50);
430
438
  --qw-sem-color-content-primary: var(--qw-ref-color-black-base);
431
439
  --qw-sem-color-content-secondary: var(--qw-ref-color-gray-600);
432
440
  --qw-sem-color-content-tertiary: var(--qw-ref-color-gray-base);
433
441
  --qw-sem-color-content-placeholder: var(--qw-ref-color-gray-300);
434
442
  --qw-sem-color-content-intro: var(--qw-ref-color-gray-400);
443
+ --qw-sem-color-content-disabled: var(--qw-ref-color-black-a30);
444
+ --qw-sem-color-content-link: var(--qw-ref-color-blue-700);
445
+ --qw-sem-color-content-icon-subtle: var(--qw-ref-color-black-a5);
446
+ --qw-sem-color-content-inverse: var(--qw-ref-color-white-base);
447
+ --qw-sem-color-content-on-solid: var(--qw-ref-color-white-base);
448
+ --qw-sem-color-content-on-warning-subtle: var(--qw-ref-color-yellow-800);
435
449
  --qw-sem-color-border-default: var(--qw-ref-color-gray-100);
436
450
  --qw-sem-color-border-strong: var(--qw-ref-color-gray-300);
437
451
  --qw-sem-color-border-focus: var(--qw-ref-color-brand-base);
452
+ --qw-sem-color-border-subtle: var(--qw-ref-color-black-a5);
453
+ --qw-sem-color-border-disabled: var(--qw-ref-color-black-a10);
454
+ --qw-sem-color-border-on-media: var(--qw-ref-color-white-base);
438
455
  --qw-sem-color-fill-subtle: var(--qw-ref-color-gray-50);
439
456
  --qw-sem-color-fill-hover: var(--qw-ref-color-gray-100);
440
457
  --qw-sem-color-fill-active: var(--qw-ref-color-blue-50);
441
458
  --qw-sem-color-fill-disabled: var(--qw-ref-color-gray-50);
459
+ --qw-sem-color-fill-track: var(--qw-ref-color-black-a10);
442
460
  --qw-sem-color-action-brand: var(--qw-ref-color-brand-base);
443
461
  --qw-sem-color-action-product: var(--qw-ref-color-blue-base);
444
462
  --qw-sem-color-action-selected: var(--qw-ref-color-blue-a20);
445
463
  --qw-sem-color-action-inverse: var(--qw-ref-color-white-base);
464
+ --qw-sem-color-control-action-brand-subtle: var(--qw-ref-color-brand-a10);
465
+ --qw-sem-color-control-action-product-subtle: var(--qw-ref-color-blue-a10);
466
+ --qw-sem-color-control-action-danger-default: var(--qw-ref-color-red-400);
467
+ --qw-sem-color-control-action-danger-subtle: var(--qw-ref-color-red-400-a10);
468
+ --qw-sem-color-control-action-neutral-subtle: var(--qw-ref-color-black-a5);
469
+ --qw-sem-color-control-selection-brand: var(--qw-ref-color-brand-a10);
470
+ --qw-sem-color-control-selection-product: var(--qw-ref-color-blue-a10);
471
+ --qw-sem-color-selection-text-background: var(--qw-ref-color-blue-a20);
446
472
  --qw-sem-color-status-success: var(--qw-ref-color-green-base);
447
473
  --qw-sem-color-status-warning: var(--qw-ref-color-yellow-base);
448
474
  --qw-sem-color-status-danger: var(--qw-ref-color-red-400);
449
475
  --qw-sem-color-status-info: var(--qw-ref-color-blue-base);
476
+ --qw-sem-color-status-success-subtle: var(--qw-ref-color-green-a10);
477
+ --qw-sem-color-status-warning-subtle: var(--qw-ref-color-yellow-a20);
478
+ --qw-sem-color-status-danger-subtle: var(--qw-ref-color-red-400-a10);
479
+ --qw-sem-color-status-info-subtle: var(--qw-ref-color-blue-a10);
450
480
  --qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a50);
451
- --qw-sem-color-overlay-guide: var(--qw-ref-color-black-a70);
481
+ --qw-sem-color-overlay-guide: var(--qw-ref-color-blue-a10);
482
+ --qw-sem-color-overlay-media-subtle: var(--qw-ref-color-black-a40);
483
+ --qw-sem-color-overlay-media-strong: var(--qw-ref-color-black-a50);
452
484
  --qw-sem-color-shadow: var(--qw-ref-color-black-a10);
453
- --qw-sem-effect-shadow-dialog: calc(var(--qw-seed-effect-shadow-base-offset-x) * 4) calc(var(--qw-seed-effect-shadow-base-offset-y) * 4) calc(var(--qw-seed-effect-shadow-base-blur) * 6) calc(var(--qw-seed-effect-shadow-base-spread) * 4) var(--qw-sem-color-shadow);
485
+ --qw-sem-effect-shadow-card-color: var(--qw-ref-color-black-a10);
486
+ --qw-sem-effect-shadow-floating-color: var(--qw-ref-color-black-a10);
487
+ --qw-sem-effect-shadow-dialog-color: var(--qw-ref-color-black-a10);
488
+ --qw-sem-effect-shadow-card: calc(var(--qw-seed-effect-shadow-base-offset-x) * 0.5) calc(var(--qw-seed-effect-shadow-base-offset-y) * 0.5) calc(var(--qw-seed-effect-shadow-base-blur) * 0.5) calc(var(--qw-seed-effect-shadow-base-spread) * 0.5) var(--qw-sem-effect-shadow-card-color);
489
+ --qw-sem-effect-shadow-floating: calc(var(--qw-seed-effect-shadow-base-offset-x) * 2) calc(var(--qw-seed-effect-shadow-base-offset-y) * 2) calc(var(--qw-seed-effect-shadow-base-blur) * 3) calc(var(--qw-seed-effect-shadow-base-spread) * 2) var(--qw-sem-effect-shadow-floating-color);
490
+ --qw-sem-effect-shadow-dialog: calc(var(--qw-seed-effect-shadow-base-offset-x) * 4) calc(var(--qw-seed-effect-shadow-base-offset-y) * 4) calc(var(--qw-seed-effect-shadow-base-blur) * 6) calc(var(--qw-seed-effect-shadow-base-spread) * 4) var(--qw-sem-effect-shadow-dialog-color);
454
491
  }
455
492
 
456
493
  [data-qw-mode="dark"] {
@@ -459,23 +496,49 @@
459
496
  --qw-sem-color-surface-elevated: var(--qw-ref-color-gray-800);
460
497
  --qw-sem-color-surface-header: var(--qw-ref-color-gray-700);
461
498
  --qw-sem-color-surface-brand-subtle: var(--qw-ref-color-blue-800);
499
+ --qw-sem-color-surface-canvas: var(--qw-ref-color-black-pure);
500
+ --qw-sem-color-surface-sunken: var(--qw-ref-color-gray-800);
501
+ --qw-sem-color-surface-selected: var(--qw-ref-color-white-a10);
502
+ --qw-sem-color-surface-canvas-subtle: var(--qw-ref-color-black-pure);
462
503
  --qw-sem-color-content-primary: var(--qw-ref-color-white-base);
463
504
  --qw-sem-color-content-secondary: var(--qw-ref-color-gray-base);
464
505
  --qw-sem-color-content-tertiary: var(--qw-ref-color-gray-600);
465
506
  --qw-sem-color-content-placeholder: var(--qw-ref-color-white-a30);
466
507
  --qw-sem-color-content-intro: var(--qw-ref-color-gray-500);
508
+ --qw-sem-color-content-disabled: var(--qw-ref-color-white-a30);
509
+ --qw-sem-color-content-link: var(--qw-ref-color-blue-400);
510
+ --qw-sem-color-content-icon-subtle: var(--qw-ref-color-white-a10);
511
+ --qw-sem-color-content-inverse: var(--qw-ref-color-black-base);
512
+ --qw-sem-color-content-on-warning-subtle: var(--qw-ref-color-yellow-200);
467
513
  --qw-sem-color-border-default: var(--qw-ref-color-gray-700);
468
514
  --qw-sem-color-border-strong: var(--qw-ref-color-gray-600);
469
515
  --qw-sem-color-border-focus: var(--qw-ref-color-brand-500);
516
+ --qw-sem-color-border-subtle: var(--qw-ref-color-white-a5);
517
+ --qw-sem-color-border-disabled: var(--qw-ref-color-white-a10);
470
518
  --qw-sem-color-fill-subtle: var(--qw-ref-color-white-a20);
471
519
  --qw-sem-color-fill-hover: var(--qw-ref-color-gray-800);
472
520
  --qw-sem-color-fill-active: var(--qw-ref-color-blue-800);
473
521
  --qw-sem-color-fill-disabled: var(--qw-ref-color-gray-900);
522
+ --qw-sem-color-fill-track: var(--qw-ref-color-white-a20);
474
523
  --qw-sem-color-action-brand: var(--qw-ref-color-brand-500);
475
524
  --qw-sem-color-action-product: var(--qw-ref-color-blue-600);
476
- --qw-sem-color-action-selected: var(--qw-ref-color-blue-a40);
525
+ --qw-sem-color-action-selected: var(--qw-ref-color-blue-600-a40);
477
526
  --qw-sem-color-action-inverse: var(--qw-ref-color-black-base);
527
+ --qw-sem-color-control-action-brand-subtle: var(--qw-ref-color-brand-500-a20);
528
+ --qw-sem-color-control-action-product-subtle: var(--qw-ref-color-blue-600-a20);
529
+ --qw-sem-color-control-action-danger-subtle: var(--qw-ref-color-red-400-a20);
530
+ --qw-sem-color-control-action-neutral-subtle: var(--qw-ref-color-white-a10);
531
+ --qw-sem-color-control-selection-brand: var(--qw-ref-color-brand-500-a20);
532
+ --qw-sem-color-control-selection-product: var(--qw-ref-color-blue-600-a20);
533
+ --qw-sem-color-selection-text-background: var(--qw-ref-color-blue-600-a40);
478
534
  --qw-sem-color-status-info: var(--qw-ref-color-blue-600);
535
+ --qw-sem-color-status-success-subtle: var(--qw-ref-color-green-a20);
536
+ --qw-sem-color-status-danger-subtle: var(--qw-ref-color-red-400-a20);
537
+ --qw-sem-color-status-info-subtle: var(--qw-ref-color-blue-600-a20);
479
538
  --qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a70);
539
+ --qw-sem-color-overlay-guide: var(--qw-ref-color-blue-600-a20);
480
540
  --qw-sem-color-shadow: var(--qw-ref-color-black-a50);
541
+ --qw-sem-effect-shadow-card-color: var(--qw-ref-color-black-a50);
542
+ --qw-sem-effect-shadow-floating-color: var(--qw-ref-color-black-a50);
543
+ --qw-sem-effect-shadow-dialog-color: var(--qw-ref-color-black-a50);
481
544
  }
package/dist/tokens.ts CHANGED
@@ -264,6 +264,12 @@ export const lightTokens = {
264
264
  "--qw-ref-color-brown-800": "#542800",
265
265
  "--qw-ref-color-brown-900": "#200B00",
266
266
  "--qw-ref-color-brown-base": "#b45e06",
267
+ "--qw-ref-color-brand-500-a20": "rgba(66, 110, 255, 0.2)",
268
+ "--qw-ref-color-blue-600-a20": "rgba(38, 111, 255, 0.2)",
269
+ "--qw-ref-color-blue-600-a40": "rgba(38, 111, 255, 0.4)",
270
+ "--qw-ref-color-red-400-a10": "rgba(255, 87, 69, 0.1)",
271
+ "--qw-ref-color-red-400-a20": "rgba(255, 87, 69, 0.2)",
272
+ "--qw-ref-color-black-pure": "#000000",
267
273
  "--qw-ref-size-spacing-1": "4px",
268
274
  "--qw-ref-size-spacing-2": "8px",
269
275
  "--qw-ref-size-spacing-3": "12px",
@@ -384,29 +390,63 @@ export const lightTokens = {
384
390
  "--qw-sem-color-surface-elevated": "#ffffff",
385
391
  "--qw-sem-color-surface-header": "#EEEEEE",
386
392
  "--qw-sem-color-surface-brand-subtle": "#EBF5FF",
393
+ "--qw-sem-color-surface-canvas": "#ffffff",
394
+ "--qw-sem-color-surface-sunken": "#EEEEEE",
395
+ "--qw-sem-color-surface-selected": "rgba(34, 34, 34, 0.05)",
396
+ "--qw-sem-color-surface-inverse": "#353535",
397
+ "--qw-sem-color-surface-canvas-subtle": "#F6F6F6",
387
398
  "--qw-sem-color-content-primary": "#222222",
388
399
  "--qw-sem-color-content-secondary": "#666666",
389
400
  "--qw-sem-color-content-tertiary": "#999999",
390
401
  "--qw-sem-color-content-placeholder": "#CCCCCC",
391
402
  "--qw-sem-color-content-intro": "#A2A9B6",
403
+ "--qw-sem-color-content-disabled": "rgba(34, 34, 34, 0.3)",
404
+ "--qw-sem-color-content-link": "#003DB8",
405
+ "--qw-sem-color-content-icon-subtle": "rgba(34, 34, 34, 0.05)",
406
+ "--qw-sem-color-content-inverse": "#ffffff",
407
+ "--qw-sem-color-content-on-solid": "#ffffff",
408
+ "--qw-sem-color-content-on-warning-subtle": "#453200",
392
409
  "--qw-sem-color-border-default": "#EEEEEE",
393
410
  "--qw-sem-color-border-strong": "#CCCCCC",
394
411
  "--qw-sem-color-border-focus": "#0011ff",
412
+ "--qw-sem-color-border-subtle": "rgba(34, 34, 34, 0.05)",
413
+ "--qw-sem-color-border-disabled": "rgba(34, 34, 34, 0.1)",
414
+ "--qw-sem-color-border-on-media": "#ffffff",
395
415
  "--qw-sem-color-fill-subtle": "#F6F6F6",
396
416
  "--qw-sem-color-fill-hover": "#EEEEEE",
397
417
  "--qw-sem-color-fill-active": "#EBF5FF",
398
418
  "--qw-sem-color-fill-disabled": "#F6F6F6",
419
+ "--qw-sem-color-fill-track": "rgba(34, 34, 34, 0.1)",
399
420
  "--qw-sem-color-action-brand": "#0011ff",
400
421
  "--qw-sem-color-action-product": "#0d53ff",
401
422
  "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.2)",
402
423
  "--qw-sem-color-action-inverse": "#ffffff",
424
+ "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.1)",
425
+ "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.1)",
426
+ "--qw-sem-color-control-action-danger-default": "#FF5745",
427
+ "--qw-sem-color-control-action-danger-subtle": "rgba(255, 87, 69, 0.1)",
428
+ "--qw-sem-color-control-action-neutral-subtle": "rgba(34, 34, 34, 0.05)",
429
+ "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.1)",
430
+ "--qw-sem-color-control-selection-product": "rgba(13, 83, 255, 0.1)",
431
+ "--qw-sem-color-selection-text-background": "rgba(13, 83, 255, 0.2)",
403
432
  "--qw-sem-color-status-success": "#1f993f",
404
433
  "--qw-sem-color-status-warning": "#ffd575",
405
434
  "--qw-sem-color-status-danger": "#FF5745",
406
435
  "--qw-sem-color-status-info": "#0d53ff",
436
+ "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.1)",
437
+ "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
438
+ "--qw-sem-color-status-danger-subtle": "rgba(255, 87, 69, 0.1)",
439
+ "--qw-sem-color-status-info-subtle": "rgba(13, 83, 255, 0.1)",
407
440
  "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.5)",
408
- "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
441
+ "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.1)",
442
+ "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
443
+ "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
409
444
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
445
+ "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.1)",
446
+ "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.1)",
447
+ "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.1)",
448
+ "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.1)",
449
+ "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.1)",
410
450
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
411
451
  "--qw-compat-button-dimension-height-mini": "24px",
412
452
  "--qw-compat-button-dimension-height-xs": "28px",
@@ -752,6 +792,12 @@ export const darkTokens = {
752
792
  "--qw-ref-color-brown-800": "#542800",
753
793
  "--qw-ref-color-brown-900": "#200B00",
754
794
  "--qw-ref-color-brown-base": "#b45e06",
795
+ "--qw-ref-color-brand-500-a20": "rgba(66, 110, 255, 0.2)",
796
+ "--qw-ref-color-blue-600-a20": "rgba(38, 111, 255, 0.2)",
797
+ "--qw-ref-color-blue-600-a40": "rgba(38, 111, 255, 0.4)",
798
+ "--qw-ref-color-red-400-a10": "rgba(255, 87, 69, 0.1)",
799
+ "--qw-ref-color-red-400-a20": "rgba(255, 87, 69, 0.2)",
800
+ "--qw-ref-color-black-pure": "#000000",
755
801
  "--qw-ref-size-spacing-1": "4px",
756
802
  "--qw-ref-size-spacing-2": "8px",
757
803
  "--qw-ref-size-spacing-3": "12px",
@@ -872,29 +918,63 @@ export const darkTokens = {
872
918
  "--qw-sem-color-surface-elevated": "#2D2D2D",
873
919
  "--qw-sem-color-surface-header": "#3A3A3A",
874
920
  "--qw-sem-color-surface-brand-subtle": "#001D66",
921
+ "--qw-sem-color-surface-canvas": "#000000",
922
+ "--qw-sem-color-surface-sunken": "#2D2D2D",
923
+ "--qw-sem-color-surface-selected": "rgba(255, 255, 255, 0.1)",
924
+ "--qw-sem-color-surface-inverse": "#353535",
925
+ "--qw-sem-color-surface-canvas-subtle": "#000000",
875
926
  "--qw-sem-color-content-primary": "#ffffff",
876
927
  "--qw-sem-color-content-secondary": "#999999",
877
928
  "--qw-sem-color-content-tertiary": "#666666",
878
929
  "--qw-sem-color-content-placeholder": "rgba(255, 255, 255, 0.3)",
879
930
  "--qw-sem-color-content-intro": "#888E99",
931
+ "--qw-sem-color-content-disabled": "rgba(255, 255, 255, 0.3)",
932
+ "--qw-sem-color-content-link": "#3086FF",
933
+ "--qw-sem-color-content-icon-subtle": "rgba(255, 255, 255, 0.1)",
934
+ "--qw-sem-color-content-inverse": "#222222",
935
+ "--qw-sem-color-content-on-solid": "#ffffff",
936
+ "--qw-sem-color-content-on-warning-subtle": "#F4D38B",
880
937
  "--qw-sem-color-border-default": "#3A3A3A",
881
938
  "--qw-sem-color-border-strong": "#666666",
882
939
  "--qw-sem-color-border-focus": "#426EFF",
940
+ "--qw-sem-color-border-subtle": "rgba(255, 255, 255, 0.05)",
941
+ "--qw-sem-color-border-disabled": "rgba(255, 255, 255, 0.1)",
942
+ "--qw-sem-color-border-on-media": "#ffffff",
883
943
  "--qw-sem-color-fill-subtle": "rgba(255, 255, 255, 0.2)",
884
944
  "--qw-sem-color-fill-hover": "#2D2D2D",
885
945
  "--qw-sem-color-fill-active": "#001D66",
886
946
  "--qw-sem-color-fill-disabled": "#202020",
947
+ "--qw-sem-color-fill-track": "rgba(255, 255, 255, 0.2)",
887
948
  "--qw-sem-color-action-brand": "#426EFF",
888
949
  "--qw-sem-color-action-product": "#266FFF",
889
- "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.4)",
950
+ "--qw-sem-color-action-selected": "rgba(38, 111, 255, 0.4)",
890
951
  "--qw-sem-color-action-inverse": "#222222",
952
+ "--qw-sem-color-control-action-brand-subtle": "rgba(66, 110, 255, 0.2)",
953
+ "--qw-sem-color-control-action-product-subtle": "rgba(38, 111, 255, 0.2)",
954
+ "--qw-sem-color-control-action-danger-default": "#FF5745",
955
+ "--qw-sem-color-control-action-danger-subtle": "rgba(255, 87, 69, 0.2)",
956
+ "--qw-sem-color-control-action-neutral-subtle": "rgba(255, 255, 255, 0.1)",
957
+ "--qw-sem-color-control-selection-brand": "rgba(66, 110, 255, 0.2)",
958
+ "--qw-sem-color-control-selection-product": "rgba(38, 111, 255, 0.2)",
959
+ "--qw-sem-color-selection-text-background": "rgba(38, 111, 255, 0.4)",
891
960
  "--qw-sem-color-status-success": "#1f993f",
892
961
  "--qw-sem-color-status-warning": "#ffd575",
893
962
  "--qw-sem-color-status-danger": "#FF5745",
894
963
  "--qw-sem-color-status-info": "#266FFF",
964
+ "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.2)",
965
+ "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
966
+ "--qw-sem-color-status-danger-subtle": "rgba(255, 87, 69, 0.2)",
967
+ "--qw-sem-color-status-info-subtle": "rgba(38, 111, 255, 0.2)",
895
968
  "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.7)",
896
- "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
969
+ "--qw-sem-color-overlay-guide": "rgba(38, 111, 255, 0.2)",
970
+ "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
971
+ "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
897
972
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
973
+ "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.5)",
974
+ "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.5)",
975
+ "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.5)",
976
+ "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.5)",
977
+ "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.5)",
898
978
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
899
979
  "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
900
980
  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
@@ -908,11 +988,11 @@ export const darkTokens = {
908
988
  } as const;
909
989
  export type TokenName = keyof typeof lightTokens;
910
990
  export type RefTokenPath = TokenName extends `--qw-ref-${infer P}` ? P : never;
911
- export const semColorSuffixes = ["surface-base","surface-subtle","surface-elevated","surface-header","surface-brand-subtle","content-primary","content-secondary","content-tertiary","content-placeholder","content-intro","border-default","border-strong","border-focus","fill-subtle","fill-hover","fill-active","fill-disabled","action-brand","action-product","action-selected","action-inverse","status-success","status-warning","status-danger","status-info","overlay-scrim","overlay-guide","shadow"] as const;
991
+ export const semColorSuffixes = ["surface-base","surface-subtle","surface-elevated","surface-header","surface-brand-subtle","surface-canvas","surface-sunken","surface-selected","surface-inverse","surface-canvas-subtle","content-primary","content-secondary","content-tertiary","content-placeholder","content-intro","content-disabled","content-link","content-icon-subtle","content-inverse","content-on-solid","content-on-warning-subtle","border-default","border-strong","border-focus","border-subtle","border-disabled","border-on-media","fill-subtle","fill-hover","fill-active","fill-disabled","fill-track","action-brand","action-product","action-selected","action-inverse","control-action-brand-subtle","control-action-product-subtle","control-action-danger-default","control-action-danger-subtle","control-action-neutral-subtle","control-selection-brand","control-selection-product","selection-text-background","status-success","status-warning","status-danger","status-info","status-success-subtle","status-warning-subtle","status-danger-subtle","status-info-subtle","overlay-scrim","overlay-guide","overlay-media-subtle","overlay-media-strong","shadow"] as const;
912
992
  export const semSizeSuffixes = ["radius-control","radius-card","radius-pill","radius-full","control-height-sm","control-height-md","control-height-lg","icon-size-sm","icon-size-md","icon-size-lg","inset-sm","stack-sm","inset-md","stack-md","inset-lg","stack-lg","opacity-disabled","z-index-dropdown","z-index-sticky","z-index-overlay","z-index-toast"] as const;
913
993
  export const semTypeSuffixes = ["font-family-text","font-family-number","font-family-code","body-font-family","body-font-size","body-font-weight","body-line-height","body-letter-spacing","body-strong-font-family","body-strong-font-size","body-strong-font-weight","body-strong-line-height","body-strong-letter-spacing","heading-sm-font-family","heading-sm-font-size","heading-sm-font-weight","heading-sm-line-height","heading-sm-letter-spacing","heading-md-font-family","heading-md-font-size","heading-md-font-weight","heading-md-line-height","heading-md-letter-spacing","heading-lg-font-family","heading-lg-font-size","heading-lg-font-weight","heading-lg-line-height","heading-lg-letter-spacing","caption-font-family","caption-font-size","caption-font-weight","caption-line-height","caption-letter-spacing","code-font-family","code-font-size","code-font-weight","code-line-height","code-letter-spacing"] as const;
914
994
  export const semMotionSuffixes = ["duration-fast","duration-base","duration-slow","easing-standard"] as const;
915
- export const semEffectSuffixes = ["shadow-dialog"] as const;
995
+ export const semEffectSuffixes = ["shadow-card-color","shadow-floating-color","shadow-dialog-color","shadow-card","shadow-floating","shadow-dialog"] as const;
916
996
  export type SemColorSuffix = (typeof semColorSuffixes)[number];
917
997
  export type SemSizeSuffix = (typeof semSizeSuffixes)[number];
918
998
  export type SemTypeSuffix = (typeof semTypeSuffixes)[number];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qw-ui/tokens",
3
- "version": "0.3.0-next.3",
3
+ "version": "0.3.0-next.5",
4
4
  "description": "QW token pipeline: Figma Color variables are the color source of truth; code validates snapshots and builds CSS / TS exits.",
5
5
  "license": "MIT",
6
6
  "author": "qw-ui contributors",