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

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 (14) hide show
  1. package/dist/derive/reference.d.ts +31 -5
  2. package/dist/derive/semantic.d.ts +10 -0
  3. package/dist/index.d.ts +0 -2
  4. package/dist/index.js +233 -220
  5. package/dist/index.js.map +1 -1
  6. package/dist/tokens.css +63 -92
  7. package/dist/tokens.json +126 -91
  8. package/dist/tokens.live.css +62 -1
  9. package/dist/tokens.ts +126 -126
  10. package/package.json +1 -1
  11. package/dist/compat/build.d.ts +0 -14
  12. package/dist/compat/color.d.ts +0 -8
  13. package/dist/compat/index.d.ts +0 -5
  14. package/dist/compat/schema.d.ts +0 -114
package/dist/tokens.ts CHANGED
@@ -281,6 +281,7 @@ export const lightTokens = {
281
281
  "--qw-ref-size-radius-sm": "4px",
282
282
  "--qw-ref-size-radius-md": "8px",
283
283
  "--qw-ref-size-radius-lg": "14px",
284
+ "--qw-ref-size-radius-xl": "16px",
284
285
  "--qw-ref-size-radius-full": "9999px",
285
286
  "--qw-ref-size-control-size-sm": "32px",
286
287
  "--qw-ref-size-control-size-md": "40px",
@@ -288,7 +289,20 @@ export const lightTokens = {
288
289
  "--qw-ref-size-icon-size-sm": "16px",
289
290
  "--qw-ref-size-icon-size-md": "20px",
290
291
  "--qw-ref-size-icon-size-lg": "24px",
291
- "--qw-ref-size-border-width-hairline": "1px",
292
+ "--qw-ref-size-stroke-width-half": "0.5px",
293
+ "--qw-ref-size-stroke-width-base": "1px",
294
+ "--qw-ref-size-stroke-width-double": "2px",
295
+ "--qw-ref-size-stroke-width-triple": "3px",
296
+ "--qw-ref-size-action-control-height-2xs": "24px",
297
+ "--qw-ref-size-action-control-height-xs": "28px",
298
+ "--qw-ref-size-action-control-height-sm": "32px",
299
+ "--qw-ref-size-action-control-height-md": "36px",
300
+ "--qw-ref-size-action-control-height-lg": "42px",
301
+ "--qw-ref-size-action-control-height-xl": "50px",
302
+ "--qw-ref-size-action-control-icon-2xs": "14px",
303
+ "--qw-ref-size-avatar-diameter-sm": "40px",
304
+ "--qw-ref-size-avatar-diameter-md": "50px",
305
+ "--qw-ref-size-avatar-diameter-lg": "58px",
292
306
  "--qw-ref-typography-line-height-tight": "1.25",
293
307
  "--qw-ref-typography-line-height-normal": "1.5",
294
308
  "--qw-ref-typography-line-height-relaxed": "1.75",
@@ -310,6 +324,7 @@ export const lightTokens = {
310
324
  "--qw-ref-typography-font-weight-medium": "500",
311
325
  "--qw-ref-typography-font-weight-semibold": "600",
312
326
  "--qw-ref-typography-font-size-base": "14px",
327
+ "--qw-ref-typography-font-size-xs": "11px",
313
328
  "--qw-ref-typography-font-size-sm": "12px",
314
329
  "--qw-ref-typography-font-size-lg": "16px",
315
330
  "--qw-ref-typography-font-size-xl": "20px",
@@ -322,8 +337,10 @@ export const lightTokens = {
322
337
  "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
323
338
  "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
324
339
  "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
340
+ "--qw-sem-size-radius-sm": "4px",
325
341
  "--qw-sem-size-radius-control": "8px",
326
342
  "--qw-sem-size-radius-card": "14px",
343
+ "--qw-sem-size-radius-xl": "16px",
327
344
  "--qw-sem-size-radius-pill": "9999px",
328
345
  "--qw-sem-size-radius-full": "9999px",
329
346
  "--qw-sem-size-control-height-sm": "32px",
@@ -332,6 +349,40 @@ export const lightTokens = {
332
349
  "--qw-sem-size-icon-size-sm": "16px",
333
350
  "--qw-sem-size-icon-size-md": "20px",
334
351
  "--qw-sem-size-icon-size-lg": "24px",
352
+ "--qw-sem-size-action-control-height-2xs": "24px",
353
+ "--qw-sem-size-action-control-height-xs": "28px",
354
+ "--qw-sem-size-action-control-height-sm": "32px",
355
+ "--qw-sem-size-action-control-height-md": "36px",
356
+ "--qw-sem-size-action-control-height-lg": "42px",
357
+ "--qw-sem-size-action-control-height-xl": "50px",
358
+ "--qw-sem-size-action-control-padding-inline-2xs": "8px",
359
+ "--qw-sem-size-action-control-padding-inline-xs": "8px",
360
+ "--qw-sem-size-action-control-padding-inline-sm": "16px",
361
+ "--qw-sem-size-action-control-padding-inline-md": "16px",
362
+ "--qw-sem-size-action-control-padding-inline-lg": "20px",
363
+ "--qw-sem-size-action-control-padding-inline-xl": "32px",
364
+ "--qw-sem-size-action-control-icon-2xs": "14px",
365
+ "--qw-sem-size-action-control-icon-xs": "16px",
366
+ "--qw-sem-size-action-control-icon-sm": "16px",
367
+ "--qw-sem-size-action-control-icon-md": "16px",
368
+ "--qw-sem-size-action-control-icon-lg": "16px",
369
+ "--qw-sem-size-action-control-icon-xl": "20px",
370
+ "--qw-sem-size-action-control-gap-2xs": "4px",
371
+ "--qw-sem-size-action-control-gap-xs": "4px",
372
+ "--qw-sem-size-action-control-gap-sm": "8px",
373
+ "--qw-sem-size-action-control-gap-md": "8px",
374
+ "--qw-sem-size-action-control-gap-lg": "8px",
375
+ "--qw-sem-size-action-control-gap-xl": "8px",
376
+ "--qw-sem-size-border-width-default": "1px",
377
+ "--qw-sem-size-border-width-strong": "2px",
378
+ "--qw-sem-size-divider-width-thin": "0.5px",
379
+ "--qw-sem-size-divider-width-default": "1px",
380
+ "--qw-sem-size-focus-ring-width": "2px",
381
+ "--qw-sem-size-focus-ring-offset": "2px",
382
+ "--qw-sem-size-indicator-loading": "2px",
383
+ "--qw-sem-size-avatar-diameter-sm": "40px",
384
+ "--qw-sem-size-avatar-diameter-md": "50px",
385
+ "--qw-sem-size-avatar-diameter-lg": "58px",
335
386
  "--qw-sem-size-inset-sm": "8px",
336
387
  "--qw-sem-size-stack-sm": "8px",
337
388
  "--qw-sem-size-inset-md": "16px",
@@ -376,6 +427,16 @@ export const lightTokens = {
376
427
  "--qw-sem-typography-caption-font-weight": "400",
377
428
  "--qw-sem-typography-caption-line-height": "1.5",
378
429
  "--qw-sem-typography-caption-letter-spacing": "0px",
430
+ "--qw-sem-typography-body-lg-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
431
+ "--qw-sem-typography-body-lg-font-size": "16px",
432
+ "--qw-sem-typography-body-lg-font-weight": "400",
433
+ "--qw-sem-typography-body-lg-line-height": "1.5",
434
+ "--qw-sem-typography-body-lg-letter-spacing": "0px",
435
+ "--qw-sem-typography-label-sm-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
436
+ "--qw-sem-typography-label-sm-font-size": "11px",
437
+ "--qw-sem-typography-label-sm-font-weight": "500",
438
+ "--qw-sem-typography-label-sm-line-height": "1.5",
439
+ "--qw-sem-typography-label-sm-letter-spacing": "0px",
379
440
  "--qw-sem-typography-code-font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
380
441
  "--qw-sem-typography-code-font-size": "12px",
381
442
  "--qw-sem-typography-code-font-weight": "400",
@@ -448,84 +509,6 @@ export const lightTokens = {
448
509
  "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.1)",
449
510
  "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.1)",
450
511
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
451
- "--qw-compat-button-dimension-height-mini": "24px",
452
- "--qw-compat-button-dimension-height-xs": "28px",
453
- "--qw-compat-button-dimension-height-s": "32px",
454
- "--qw-compat-button-dimension-height-normal": "36px",
455
- "--qw-compat-button-dimension-height-m": "42px",
456
- "--qw-compat-button-dimension-height-l": "50px",
457
- "--qw-compat-button-dimension-square-mini": "24px",
458
- "--qw-compat-button-dimension-square-xs": "28px",
459
- "--qw-compat-button-dimension-square-s": "32px",
460
- "--qw-compat-button-dimension-square-normal": "36px",
461
- "--qw-compat-button-dimension-square-m": "42px",
462
- "--qw-compat-button-dimension-square-l": "50px",
463
- "--qw-compat-button-dimension-padding-inline-mini": "8px",
464
- "--qw-compat-button-dimension-padding-inline-xs": "8px",
465
- "--qw-compat-button-dimension-padding-inline-s": "16px",
466
- "--qw-compat-button-dimension-padding-inline-normal": "16px",
467
- "--qw-compat-button-dimension-padding-inline-m": "20px",
468
- "--qw-compat-button-dimension-padding-inline-l": "32px",
469
- "--qw-compat-button-dimension-icon-mini": "14px",
470
- "--qw-compat-button-dimension-icon-xs": "16px",
471
- "--qw-compat-button-dimension-icon-s": "16px",
472
- "--qw-compat-button-dimension-icon-normal": "16px",
473
- "--qw-compat-button-dimension-icon-m": "16px",
474
- "--qw-compat-button-dimension-icon-l": "20px",
475
- "--qw-compat-button-dimension-gap-mini": "4px",
476
- "--qw-compat-button-dimension-gap-xs": "4px",
477
- "--qw-compat-button-dimension-gap-s": "8px",
478
- "--qw-compat-button-dimension-gap-normal": "8px",
479
- "--qw-compat-button-dimension-gap-m": "8px",
480
- "--qw-compat-button-dimension-gap-l": "8px",
481
- "--qw-compat-button-dimension-border-width": "1px",
482
- "--qw-compat-button-dimension-focus-ring-width": "2px",
483
- "--qw-compat-button-dimension-focus-ring-offset": "2px",
484
- "--qw-compat-button-dimension-spinner-stroke": "2px",
485
- "--qw-compat-button-color-bg-soft-brand": "rgba(0, 68, 255, 0.1)",
486
- "--qw-compat-button-color-bg-soft-danger": "rgba(255, 87, 69, 0.1)",
487
- "--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
488
- "--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
489
- "--qw-compat-loading-dimension-radius-surface": "16px",
490
- "--qw-compat-tag-dimension-radius-small": "2px",
491
- "--qw-compat-tag-dimension-radius-medium": "4px",
492
- "--qw-compat-tag-dimension-radius-large": "4px",
493
- "--qw-compat-tag-dimension-border-width": "1px",
494
- "--qw-compat-tag-dimension-height-small": "12px",
495
- "--qw-compat-tag-dimension-height-medium": "16px",
496
- "--qw-compat-tag-dimension-height-large": "20px",
497
- "--qw-compat-tag-dimension-padding-inline-small": "3px",
498
- "--qw-compat-tag-dimension-padding-inline-medium": "4px",
499
- "--qw-compat-tag-dimension-padding-inline-large": "5px",
500
- "--qw-compat-tag-typography-line-height-small": "16px",
501
- "--qw-compat-tag-typography-line-height-medium": "22px",
502
- "--qw-compat-tag-typography-line-height-large": "22px",
503
- "--qw-compat-tag-typography-font-size-small": "8px",
504
- "--qw-compat-tag-typography-font-size-medium": "11px",
505
- "--qw-compat-tag-typography-font-size-large": "11px",
506
- "--qw-compat-avatar-dimension-diameter-s": "40px",
507
- "--qw-compat-avatar-dimension-diameter-m": "50px",
508
- "--qw-compat-avatar-dimension-diameter-l": "58px",
509
- "--qw-compat-avatar-color-border": "rgba(34, 34, 34, 0.06)",
510
- "--qw-compat-avatar-dimension-border-width": "1px",
511
- "--qw-compat-avatar-dimension-badge-font-size": "11px",
512
- "--qw-compat-avatar-dimension-badge-line-height": "16px",
513
- "--qw-compat-avatar-dimension-badge-padding": "5px",
514
- "--qw-compat-avatar-color-badge-border": "#FFFFFF",
515
- "--qw-compat-avatar-color-badge-text": "#FFFFFF",
516
- "--qw-compat-textarea-color-paste-text": "#FFFFFF",
517
- "--qw-compat-tabs-color-button-bg-selected": "rgba(34, 34, 34, 0.06)",
518
- "--qw-compat-tabs-color-button-border": "rgba(34, 34, 34, 0.03)",
519
- "--qw-compat-tabs-dimension-border-width": "1px",
520
- "--qw-compat-image-dimension-border-width": "1px",
521
- "--qw-compat-divider-color-border": "rgba(34, 34, 34, 0.03)",
522
- "--qw-compat-divider-dimension-weight-thin": "0.5px",
523
- "--qw-compat-divider-dimension-weight-thick": "1px",
524
- "--qw-compat-empty-dimension-description-font-size": "16px",
525
- "--qw-compat-empty-dimension-description-line-height": "26px",
526
- "--qw-compat-empty-dimension-title-gap": "10px",
527
- "--qw-compat-image-color-background": "#F8F8F8",
528
- "--qw-compat-skeleton-color-background": "rgba(185, 185, 185, 0.1)",
529
512
  } as const;
530
513
  export const darkTokens = {
531
514
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -809,6 +792,7 @@ export const darkTokens = {
809
792
  "--qw-ref-size-radius-sm": "4px",
810
793
  "--qw-ref-size-radius-md": "8px",
811
794
  "--qw-ref-size-radius-lg": "14px",
795
+ "--qw-ref-size-radius-xl": "16px",
812
796
  "--qw-ref-size-radius-full": "9999px",
813
797
  "--qw-ref-size-control-size-sm": "32px",
814
798
  "--qw-ref-size-control-size-md": "40px",
@@ -816,7 +800,20 @@ export const darkTokens = {
816
800
  "--qw-ref-size-icon-size-sm": "16px",
817
801
  "--qw-ref-size-icon-size-md": "20px",
818
802
  "--qw-ref-size-icon-size-lg": "24px",
819
- "--qw-ref-size-border-width-hairline": "1px",
803
+ "--qw-ref-size-stroke-width-half": "0.5px",
804
+ "--qw-ref-size-stroke-width-base": "1px",
805
+ "--qw-ref-size-stroke-width-double": "2px",
806
+ "--qw-ref-size-stroke-width-triple": "3px",
807
+ "--qw-ref-size-action-control-height-2xs": "24px",
808
+ "--qw-ref-size-action-control-height-xs": "28px",
809
+ "--qw-ref-size-action-control-height-sm": "32px",
810
+ "--qw-ref-size-action-control-height-md": "36px",
811
+ "--qw-ref-size-action-control-height-lg": "42px",
812
+ "--qw-ref-size-action-control-height-xl": "50px",
813
+ "--qw-ref-size-action-control-icon-2xs": "14px",
814
+ "--qw-ref-size-avatar-diameter-sm": "40px",
815
+ "--qw-ref-size-avatar-diameter-md": "50px",
816
+ "--qw-ref-size-avatar-diameter-lg": "58px",
820
817
  "--qw-ref-typography-line-height-tight": "1.25",
821
818
  "--qw-ref-typography-line-height-normal": "1.5",
822
819
  "--qw-ref-typography-line-height-relaxed": "1.75",
@@ -838,6 +835,7 @@ export const darkTokens = {
838
835
  "--qw-ref-typography-font-weight-medium": "500",
839
836
  "--qw-ref-typography-font-weight-semibold": "600",
840
837
  "--qw-ref-typography-font-size-base": "14px",
838
+ "--qw-ref-typography-font-size-xs": "11px",
841
839
  "--qw-ref-typography-font-size-sm": "12px",
842
840
  "--qw-ref-typography-font-size-lg": "16px",
843
841
  "--qw-ref-typography-font-size-xl": "20px",
@@ -850,8 +848,10 @@ export const darkTokens = {
850
848
  "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
851
849
  "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
852
850
  "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
851
+ "--qw-sem-size-radius-sm": "4px",
853
852
  "--qw-sem-size-radius-control": "8px",
854
853
  "--qw-sem-size-radius-card": "14px",
854
+ "--qw-sem-size-radius-xl": "16px",
855
855
  "--qw-sem-size-radius-pill": "9999px",
856
856
  "--qw-sem-size-radius-full": "9999px",
857
857
  "--qw-sem-size-control-height-sm": "32px",
@@ -860,6 +860,40 @@ export const darkTokens = {
860
860
  "--qw-sem-size-icon-size-sm": "16px",
861
861
  "--qw-sem-size-icon-size-md": "20px",
862
862
  "--qw-sem-size-icon-size-lg": "24px",
863
+ "--qw-sem-size-action-control-height-2xs": "24px",
864
+ "--qw-sem-size-action-control-height-xs": "28px",
865
+ "--qw-sem-size-action-control-height-sm": "32px",
866
+ "--qw-sem-size-action-control-height-md": "36px",
867
+ "--qw-sem-size-action-control-height-lg": "42px",
868
+ "--qw-sem-size-action-control-height-xl": "50px",
869
+ "--qw-sem-size-action-control-padding-inline-2xs": "8px",
870
+ "--qw-sem-size-action-control-padding-inline-xs": "8px",
871
+ "--qw-sem-size-action-control-padding-inline-sm": "16px",
872
+ "--qw-sem-size-action-control-padding-inline-md": "16px",
873
+ "--qw-sem-size-action-control-padding-inline-lg": "20px",
874
+ "--qw-sem-size-action-control-padding-inline-xl": "32px",
875
+ "--qw-sem-size-action-control-icon-2xs": "14px",
876
+ "--qw-sem-size-action-control-icon-xs": "16px",
877
+ "--qw-sem-size-action-control-icon-sm": "16px",
878
+ "--qw-sem-size-action-control-icon-md": "16px",
879
+ "--qw-sem-size-action-control-icon-lg": "16px",
880
+ "--qw-sem-size-action-control-icon-xl": "20px",
881
+ "--qw-sem-size-action-control-gap-2xs": "4px",
882
+ "--qw-sem-size-action-control-gap-xs": "4px",
883
+ "--qw-sem-size-action-control-gap-sm": "8px",
884
+ "--qw-sem-size-action-control-gap-md": "8px",
885
+ "--qw-sem-size-action-control-gap-lg": "8px",
886
+ "--qw-sem-size-action-control-gap-xl": "8px",
887
+ "--qw-sem-size-border-width-default": "1px",
888
+ "--qw-sem-size-border-width-strong": "2px",
889
+ "--qw-sem-size-divider-width-thin": "0.5px",
890
+ "--qw-sem-size-divider-width-default": "1px",
891
+ "--qw-sem-size-focus-ring-width": "2px",
892
+ "--qw-sem-size-focus-ring-offset": "2px",
893
+ "--qw-sem-size-indicator-loading": "2px",
894
+ "--qw-sem-size-avatar-diameter-sm": "40px",
895
+ "--qw-sem-size-avatar-diameter-md": "50px",
896
+ "--qw-sem-size-avatar-diameter-lg": "58px",
863
897
  "--qw-sem-size-inset-sm": "8px",
864
898
  "--qw-sem-size-stack-sm": "8px",
865
899
  "--qw-sem-size-inset-md": "16px",
@@ -904,6 +938,16 @@ export const darkTokens = {
904
938
  "--qw-sem-typography-caption-font-weight": "400",
905
939
  "--qw-sem-typography-caption-line-height": "1.5",
906
940
  "--qw-sem-typography-caption-letter-spacing": "0px",
941
+ "--qw-sem-typography-body-lg-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
942
+ "--qw-sem-typography-body-lg-font-size": "16px",
943
+ "--qw-sem-typography-body-lg-font-weight": "400",
944
+ "--qw-sem-typography-body-lg-line-height": "1.5",
945
+ "--qw-sem-typography-body-lg-letter-spacing": "0px",
946
+ "--qw-sem-typography-label-sm-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
947
+ "--qw-sem-typography-label-sm-font-size": "11px",
948
+ "--qw-sem-typography-label-sm-font-weight": "500",
949
+ "--qw-sem-typography-label-sm-line-height": "1.5",
950
+ "--qw-sem-typography-label-sm-letter-spacing": "0px",
907
951
  "--qw-sem-typography-code-font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
908
952
  "--qw-sem-typography-code-font-size": "12px",
909
953
  "--qw-sem-typography-code-font-weight": "400",
@@ -976,21 +1020,12 @@ export const darkTokens = {
976
1020
  "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.5)",
977
1021
  "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.5)",
978
1022
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
979
- "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
980
- "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
981
- "--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
982
- "--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)",
983
- "--qw-compat-avatar-color-border": "rgba(255, 255, 255, 0.1)",
984
- "--qw-compat-tabs-color-button-bg-selected": "rgba(255, 255, 255, 0.1)",
985
- "--qw-compat-tabs-color-button-border": "rgba(255, 255, 255, 0.05)",
986
- "--qw-compat-divider-color-border": "rgba(255, 255, 255, 0.05)",
987
- "--qw-compat-image-color-background": "#333333",
988
1023
  } as const;
989
1024
  export type TokenName = keyof typeof lightTokens;
990
1025
  export type RefTokenPath = TokenName extends `--qw-ref-${infer P}` ? P : never;
991
1026
  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;
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;
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;
1027
+ export const semSizeSuffixes = ["radius-sm","radius-control","radius-card","radius-xl","radius-pill","radius-full","control-height-sm","control-height-md","control-height-lg","icon-size-sm","icon-size-md","icon-size-lg","action-control-height-2xs","action-control-height-xs","action-control-height-sm","action-control-height-md","action-control-height-lg","action-control-height-xl","action-control-padding-inline-2xs","action-control-padding-inline-xs","action-control-padding-inline-sm","action-control-padding-inline-md","action-control-padding-inline-lg","action-control-padding-inline-xl","action-control-icon-2xs","action-control-icon-xs","action-control-icon-sm","action-control-icon-md","action-control-icon-lg","action-control-icon-xl","action-control-gap-2xs","action-control-gap-xs","action-control-gap-sm","action-control-gap-md","action-control-gap-lg","action-control-gap-xl","border-width-default","border-width-strong","divider-width-thin","divider-width-default","focus-ring-width","focus-ring-offset","indicator-loading","avatar-diameter-sm","avatar-diameter-md","avatar-diameter-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;
1028
+ 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","body-lg-font-family","body-lg-font-size","body-lg-font-weight","body-lg-line-height","body-lg-letter-spacing","label-sm-font-family","label-sm-font-size","label-sm-font-weight","label-sm-line-height","label-sm-letter-spacing","code-font-family","code-font-size","code-font-weight","code-line-height","code-letter-spacing"] as const;
994
1029
  export const semMotionSuffixes = ["duration-fast","duration-base","duration-slow","easing-standard"] as const;
995
1030
  export const semEffectSuffixes = ["shadow-card-color","shadow-floating-color","shadow-dialog-color","shadow-card","shadow-floating","shadow-dialog"] as const;
996
1031
  export type SemColorSuffix = (typeof semColorSuffixes)[number];
@@ -1004,38 +1039,3 @@ export type SemTokenPath =
1004
1039
  | `typography-${SemTypeSuffix}`
1005
1040
  | `motion-${SemMotionSuffix}`
1006
1041
  | `effect-${SemEffectSuffix}`;
1007
- export const compatComponents = ["avatar","button","divider","empty","image","loading","skeleton","tabs","tag","textarea"] as const;
1008
- export type CompatComponent = (typeof compatComponents)[number];
1009
- export const compatAvatarSuffixes = ["color-badge-border","color-badge-text","color-border","dimension-badge-font-size","dimension-badge-line-height","dimension-badge-padding","dimension-border-width","dimension-diameter-l","dimension-diameter-m","dimension-diameter-s"] as const;
1010
- export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
1011
- export const compatButtonSuffixes = ["color-bg-neutral-gray","color-bg-soft-brand","color-bg-soft-danger","dimension-border-width","dimension-focus-ring-offset","dimension-focus-ring-width","dimension-gap-l","dimension-gap-m","dimension-gap-mini","dimension-gap-normal","dimension-gap-s","dimension-gap-xs","dimension-height-l","dimension-height-m","dimension-height-mini","dimension-height-normal","dimension-height-s","dimension-height-xs","dimension-icon-l","dimension-icon-m","dimension-icon-mini","dimension-icon-normal","dimension-icon-s","dimension-icon-xs","dimension-padding-inline-l","dimension-padding-inline-m","dimension-padding-inline-mini","dimension-padding-inline-normal","dimension-padding-inline-s","dimension-padding-inline-xs","dimension-spinner-stroke","dimension-square-l","dimension-square-m","dimension-square-mini","dimension-square-normal","dimension-square-s","dimension-square-xs"] as const;
1012
- export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
1013
- export const compatDividerSuffixes = ["color-border","dimension-weight-thick","dimension-weight-thin"] as const;
1014
- export type CompatDividerSuffix = (typeof compatDividerSuffixes)[number];
1015
- export const compatEmptySuffixes = ["dimension-description-font-size","dimension-description-line-height","dimension-title-gap"] as const;
1016
- export type CompatEmptySuffix = (typeof compatEmptySuffixes)[number];
1017
- export const compatImageSuffixes = ["color-background","dimension-border-width"] as const;
1018
- export type CompatImageSuffix = (typeof compatImageSuffixes)[number];
1019
- export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
1020
- export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
1021
- export const compatSkeletonSuffixes = ["color-background"] as const;
1022
- export type CompatSkeletonSuffix = (typeof compatSkeletonSuffixes)[number];
1023
- export const compatTabsSuffixes = ["color-button-bg-selected","color-button-border","dimension-border-width"] as const;
1024
- export type CompatTabsSuffix = (typeof compatTabsSuffixes)[number];
1025
- export const compatTagSuffixes = ["dimension-border-width","dimension-height-large","dimension-height-medium","dimension-height-small","dimension-padding-inline-large","dimension-padding-inline-medium","dimension-padding-inline-small","dimension-radius-large","dimension-radius-medium","dimension-radius-small","typography-font-size-large","typography-font-size-medium","typography-font-size-small","typography-line-height-large","typography-line-height-medium","typography-line-height-small"] as const;
1026
- export type CompatTagSuffix = (typeof compatTagSuffixes)[number];
1027
- export const compatTextareaSuffixes = ["color-paste-text"] as const;
1028
- export type CompatTextareaSuffix = (typeof compatTextareaSuffixes)[number];
1029
- export type CompatSuffix<C extends CompatComponent> =
1030
- C extends "avatar" ? CompatAvatarSuffix :
1031
- C extends "button" ? CompatButtonSuffix :
1032
- C extends "divider" ? CompatDividerSuffix :
1033
- C extends "empty" ? CompatEmptySuffix :
1034
- C extends "image" ? CompatImageSuffix :
1035
- C extends "loading" ? CompatLoadingSuffix :
1036
- C extends "skeleton" ? CompatSkeletonSuffix :
1037
- C extends "tabs" ? CompatTabsSuffix :
1038
- C extends "tag" ? CompatTagSuffix :
1039
- C extends "textarea" ? CompatTextareaSuffix :
1040
- never;
1041
- export const compatTokenCount = 78 as const;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qw-ui/tokens",
3
- "version": "0.3.0-next.5",
3
+ "version": "0.3.0-next.7",
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",
package/dist/compat/build.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import { type CompatEntry, type CompatRegistry } from "./schema.js";
2
- export interface CompatBuild {
3
- light: Record<string, string>;
4
- dark: Record<string, string>;
5
- /** path → cssVar */
6
- paths: Record<string, string>;
7
- /** component → suffix[] */
8
- byComponent: Record<string, string[]>;
9
- entries: CompatEntry[];
10
- graceDays: number;
11
- }
12
- export declare function buildCompatFromRegistry(registry: CompatRegistry): CompatBuild;
13
- /** 生成 compat token-paths TypeScript 片段（并入 tokens.ts） */
14
- export declare function formatCompatTypes(build: CompatBuild): string;
package/dist/compat/color.d.ts DELETED
@@ -1,8 +0,0 @@
1
- /**
2
- * 将 legacy hex（含 /NN% 透明度后缀）或 DTCG srgb 结构转为 CSS 颜色字符串。
3
- */
4
- export declare function compatColorToCss(input: string | {
5
- colorSpace: "srgb";
6
- components: [number, number, number];
7
- alpha: number;
8
- }): string;
package/dist/compat/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export { compatRegistrySchema, compatEntrySchema, compatPathToCssVar, compatComponentOf, compatSuffixOf, } from "./schema.js";
2
- export type { CompatEntry, CompatRegistry, CompatStatus } from "./schema.js";
3
- export { compatColorToCss } from "./color.js";
4
- export { buildCompatFromRegistry, formatCompatTypes, } from "./build.js";
5
- export type { CompatBuild } from "./build.js";
package/dist/compat/schema.d.ts DELETED
@@ -1,114 +0,0 @@
1
- import { z } from "zod";
2
- export declare const compatStatusSchema: z.ZodEnum<{
3
- active: "active";
4
- aliased: "aliased";
5
- deprecated: "deprecated";
6
- }>;
7
- export declare const compatEntrySchema: z.ZodObject<{
8
- path: z.ZodString;
9
- type: z.ZodEnum<{
10
- color: "color";
11
- dimension: "dimension";
12
- motion: "motion";
13
- typography: "typography";
14
- }>;
15
- value: z.ZodUnion<readonly [z.ZodObject<{
16
- light: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
17
- colorSpace: z.ZodLiteral<"srgb">;
18
- components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
19
- alpha: z.ZodNumber;
20
- }, z.core.$strip>, z.ZodString]>;
21
- dark: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
22
- colorSpace: z.ZodLiteral<"srgb">;
23
- components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
24
- alpha: z.ZodNumber;
25
- }, z.core.$strip>, z.ZodString]>;
26
- }, z.core.$strip>, z.ZodObject<{
27
- value: z.ZodNumber;
28
- unit: z.ZodEnum<{
29
- "%": "%";
30
- em: "em";
31
- px: "px";
32
- rem: "rem";
33
- }>;
34
- }, z.core.$strip>, z.ZodObject<{
35
- aliasOf: z.ZodString;
36
- }, z.core.$strip>]>;
37
- source: z.ZodObject<{
38
- figma: z.ZodString;
39
- nodeId: z.ZodString;
40
- legacyName: z.ZodNullable<z.ZodString>;
41
- }, z.core.$strip>;
42
- introducedBy: z.ZodString;
43
- reason: z.ZodString;
44
- owner: z.ZodString;
45
- targetSemanticRole: z.ZodNullable<z.ZodString>;
46
- status: z.ZodEnum<{
47
- active: "active";
48
- aliased: "aliased";
49
- deprecated: "deprecated";
50
- }>;
51
- reviewAfter: z.ZodString;
52
- migrationIssue: z.ZodNullable<z.ZodString>;
53
- }, z.core.$strip>;
54
- export declare const compatRegistrySchema: z.ZodObject<{
55
- $description: z.ZodOptional<z.ZodString>;
56
- version: z.ZodLiteral<1>;
57
- graceDays: z.ZodDefault<z.ZodNumber>;
58
- entries: z.ZodArray<z.ZodObject<{
59
- path: z.ZodString;
60
- type: z.ZodEnum<{
61
- color: "color";
62
- dimension: "dimension";
63
- motion: "motion";
64
- typography: "typography";
65
- }>;
66
- value: z.ZodUnion<readonly [z.ZodObject<{
67
- light: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
68
- colorSpace: z.ZodLiteral<"srgb">;
69
- components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
70
- alpha: z.ZodNumber;
71
- }, z.core.$strip>, z.ZodString]>;
72
- dark: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
73
- colorSpace: z.ZodLiteral<"srgb">;
74
- components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
75
- alpha: z.ZodNumber;
76
- }, z.core.$strip>, z.ZodString]>;
77
- }, z.core.$strip>, z.ZodObject<{
78
- value: z.ZodNumber;
79
- unit: z.ZodEnum<{
80
- "%": "%";
81
- em: "em";
82
- px: "px";
83
- rem: "rem";
84
- }>;
85
- }, z.core.$strip>, z.ZodObject<{
86
- aliasOf: z.ZodString;
87
- }, z.core.$strip>]>;
88
- source: z.ZodObject<{
89
- figma: z.ZodString;
90
- nodeId: z.ZodString;
91
- legacyName: z.ZodNullable<z.ZodString>;
92
- }, z.core.$strip>;
93
- introducedBy: z.ZodString;
94
- reason: z.ZodString;
95
- owner: z.ZodString;
96
- targetSemanticRole: z.ZodNullable<z.ZodString>;
97
- status: z.ZodEnum<{
98
- active: "active";
99
- aliased: "aliased";
100
- deprecated: "deprecated";
101
- }>;
102
- reviewAfter: z.ZodString;
103
- migrationIssue: z.ZodNullable<z.ZodString>;
104
- }, z.core.$strip>>;
105
- }, z.core.$strip>;
106
- export type CompatEntry = z.infer<typeof compatEntrySchema>;
107
- export type CompatRegistry = z.infer<typeof compatRegistrySchema>;
108
- export type CompatStatus = z.infer<typeof compatStatusSchema>;
109
- /** path → CSS 变量名：`button.color.bg-soft-brand` → `--qw-compat-button-color-bg-soft-brand` */
110
- export declare function compatPathToCssVar(path: string): string;
111
- /** path → component slug（第一段） */
112
- export declare function compatComponentOf(path: string): string;
113
- /** path → helper suffix（component 之后的段，用 `-` 连接） */
114
- export declare function compatSuffixOf(path: string): string;