@qw-ui/tokens 0.3.0-next.4 → 0.3.0-next.6

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 (22) 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 +73 -13
  6. package/dist/derive/semantic.d.ts +17 -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 -5
  11. package/dist/index.js +863 -241
  12. package/dist/index.js.map +1 -1
  13. package/dist/schema.d.ts +3 -3
  14. package/dist/tokens.css +115 -94
  15. package/dist/tokens.json +209 -94
  16. package/dist/tokens.live.css +134 -10
  17. package/dist/tokens.ts +211 -131
  18. package/package.json +1 -1
  19. package/dist/compat/build.d.ts +0 -14
  20. package/dist/compat/color.d.ts +0 -8
  21. package/dist/compat/index.d.ts +0 -5
  22. package/dist/compat/schema.d.ts +0 -114
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",
@@ -275,6 +281,7 @@ export const lightTokens = {
275
281
  "--qw-ref-size-radius-sm": "4px",
276
282
  "--qw-ref-size-radius-md": "8px",
277
283
  "--qw-ref-size-radius-lg": "14px",
284
+ "--qw-ref-size-radius-xl": "16px",
278
285
  "--qw-ref-size-radius-full": "9999px",
279
286
  "--qw-ref-size-control-size-sm": "32px",
280
287
  "--qw-ref-size-control-size-md": "40px",
@@ -282,7 +289,20 @@ export const lightTokens = {
282
289
  "--qw-ref-size-icon-size-sm": "16px",
283
290
  "--qw-ref-size-icon-size-md": "20px",
284
291
  "--qw-ref-size-icon-size-lg": "24px",
285
- "--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",
286
306
  "--qw-ref-typography-line-height-tight": "1.25",
287
307
  "--qw-ref-typography-line-height-normal": "1.5",
288
308
  "--qw-ref-typography-line-height-relaxed": "1.75",
@@ -304,6 +324,7 @@ export const lightTokens = {
304
324
  "--qw-ref-typography-font-weight-medium": "500",
305
325
  "--qw-ref-typography-font-weight-semibold": "600",
306
326
  "--qw-ref-typography-font-size-base": "14px",
327
+ "--qw-ref-typography-font-size-xs": "11px",
307
328
  "--qw-ref-typography-font-size-sm": "12px",
308
329
  "--qw-ref-typography-font-size-lg": "16px",
309
330
  "--qw-ref-typography-font-size-xl": "20px",
@@ -316,8 +337,10 @@ export const lightTokens = {
316
337
  "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
317
338
  "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
318
339
  "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
340
+ "--qw-sem-size-radius-sm": "4px",
319
341
  "--qw-sem-size-radius-control": "8px",
320
342
  "--qw-sem-size-radius-card": "14px",
343
+ "--qw-sem-size-radius-xl": "16px",
321
344
  "--qw-sem-size-radius-pill": "9999px",
322
345
  "--qw-sem-size-radius-full": "9999px",
323
346
  "--qw-sem-size-control-height-sm": "32px",
@@ -326,6 +349,40 @@ export const lightTokens = {
326
349
  "--qw-sem-size-icon-size-sm": "16px",
327
350
  "--qw-sem-size-icon-size-md": "20px",
328
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",
329
386
  "--qw-sem-size-inset-sm": "8px",
330
387
  "--qw-sem-size-stack-sm": "8px",
331
388
  "--qw-sem-size-inset-md": "16px",
@@ -370,6 +427,16 @@ export const lightTokens = {
370
427
  "--qw-sem-typography-caption-font-weight": "400",
371
428
  "--qw-sem-typography-caption-line-height": "1.5",
372
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",
373
440
  "--qw-sem-typography-code-font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
374
441
  "--qw-sem-typography-code-font-size": "12px",
375
442
  "--qw-sem-typography-code-font-weight": "400",
@@ -384,108 +451,64 @@ export const lightTokens = {
384
451
  "--qw-sem-color-surface-elevated": "#ffffff",
385
452
  "--qw-sem-color-surface-header": "#EEEEEE",
386
453
  "--qw-sem-color-surface-brand-subtle": "#EBF5FF",
454
+ "--qw-sem-color-surface-canvas": "#ffffff",
455
+ "--qw-sem-color-surface-sunken": "#EEEEEE",
456
+ "--qw-sem-color-surface-selected": "rgba(34, 34, 34, 0.05)",
457
+ "--qw-sem-color-surface-inverse": "#353535",
458
+ "--qw-sem-color-surface-canvas-subtle": "#F6F6F6",
387
459
  "--qw-sem-color-content-primary": "#222222",
388
460
  "--qw-sem-color-content-secondary": "#666666",
389
461
  "--qw-sem-color-content-tertiary": "#999999",
390
462
  "--qw-sem-color-content-placeholder": "#CCCCCC",
391
463
  "--qw-sem-color-content-intro": "#A2A9B6",
464
+ "--qw-sem-color-content-disabled": "rgba(34, 34, 34, 0.3)",
465
+ "--qw-sem-color-content-link": "#003DB8",
466
+ "--qw-sem-color-content-icon-subtle": "rgba(34, 34, 34, 0.05)",
467
+ "--qw-sem-color-content-inverse": "#ffffff",
468
+ "--qw-sem-color-content-on-solid": "#ffffff",
469
+ "--qw-sem-color-content-on-warning-subtle": "#453200",
392
470
  "--qw-sem-color-border-default": "#EEEEEE",
393
471
  "--qw-sem-color-border-strong": "#CCCCCC",
394
472
  "--qw-sem-color-border-focus": "#0011ff",
473
+ "--qw-sem-color-border-subtle": "rgba(34, 34, 34, 0.05)",
474
+ "--qw-sem-color-border-disabled": "rgba(34, 34, 34, 0.1)",
475
+ "--qw-sem-color-border-on-media": "#ffffff",
395
476
  "--qw-sem-color-fill-subtle": "#F6F6F6",
396
477
  "--qw-sem-color-fill-hover": "#EEEEEE",
397
478
  "--qw-sem-color-fill-active": "#EBF5FF",
398
479
  "--qw-sem-color-fill-disabled": "#F6F6F6",
480
+ "--qw-sem-color-fill-track": "rgba(34, 34, 34, 0.1)",
399
481
  "--qw-sem-color-action-brand": "#0011ff",
400
482
  "--qw-sem-color-action-product": "#0d53ff",
401
483
  "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.2)",
402
484
  "--qw-sem-color-action-inverse": "#ffffff",
485
+ "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.1)",
486
+ "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.1)",
487
+ "--qw-sem-color-control-action-danger-default": "#FF5745",
488
+ "--qw-sem-color-control-action-danger-subtle": "rgba(255, 87, 69, 0.1)",
489
+ "--qw-sem-color-control-action-neutral-subtle": "rgba(34, 34, 34, 0.05)",
490
+ "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.1)",
491
+ "--qw-sem-color-control-selection-product": "rgba(13, 83, 255, 0.1)",
492
+ "--qw-sem-color-selection-text-background": "rgba(13, 83, 255, 0.2)",
403
493
  "--qw-sem-color-status-success": "#1f993f",
404
494
  "--qw-sem-color-status-warning": "#ffd575",
405
495
  "--qw-sem-color-status-danger": "#FF5745",
406
496
  "--qw-sem-color-status-info": "#0d53ff",
497
+ "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.1)",
498
+ "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
499
+ "--qw-sem-color-status-danger-subtle": "rgba(255, 87, 69, 0.1)",
500
+ "--qw-sem-color-status-info-subtle": "rgba(13, 83, 255, 0.1)",
407
501
  "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.5)",
408
- "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
502
+ "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.1)",
503
+ "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
504
+ "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
409
505
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
506
+ "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.1)",
507
+ "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.1)",
508
+ "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.1)",
509
+ "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.1)",
510
+ "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.1)",
410
511
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
411
- "--qw-compat-button-dimension-height-mini": "24px",
412
- "--qw-compat-button-dimension-height-xs": "28px",
413
- "--qw-compat-button-dimension-height-s": "32px",
414
- "--qw-compat-button-dimension-height-normal": "36px",
415
- "--qw-compat-button-dimension-height-m": "42px",
416
- "--qw-compat-button-dimension-height-l": "50px",
417
- "--qw-compat-button-dimension-square-mini": "24px",
418
- "--qw-compat-button-dimension-square-xs": "28px",
419
- "--qw-compat-button-dimension-square-s": "32px",
420
- "--qw-compat-button-dimension-square-normal": "36px",
421
- "--qw-compat-button-dimension-square-m": "42px",
422
- "--qw-compat-button-dimension-square-l": "50px",
423
- "--qw-compat-button-dimension-padding-inline-mini": "8px",
424
- "--qw-compat-button-dimension-padding-inline-xs": "8px",
425
- "--qw-compat-button-dimension-padding-inline-s": "16px",
426
- "--qw-compat-button-dimension-padding-inline-normal": "16px",
427
- "--qw-compat-button-dimension-padding-inline-m": "20px",
428
- "--qw-compat-button-dimension-padding-inline-l": "32px",
429
- "--qw-compat-button-dimension-icon-mini": "14px",
430
- "--qw-compat-button-dimension-icon-xs": "16px",
431
- "--qw-compat-button-dimension-icon-s": "16px",
432
- "--qw-compat-button-dimension-icon-normal": "16px",
433
- "--qw-compat-button-dimension-icon-m": "16px",
434
- "--qw-compat-button-dimension-icon-l": "20px",
435
- "--qw-compat-button-dimension-gap-mini": "4px",
436
- "--qw-compat-button-dimension-gap-xs": "4px",
437
- "--qw-compat-button-dimension-gap-s": "8px",
438
- "--qw-compat-button-dimension-gap-normal": "8px",
439
- "--qw-compat-button-dimension-gap-m": "8px",
440
- "--qw-compat-button-dimension-gap-l": "8px",
441
- "--qw-compat-button-dimension-border-width": "1px",
442
- "--qw-compat-button-dimension-focus-ring-width": "2px",
443
- "--qw-compat-button-dimension-focus-ring-offset": "2px",
444
- "--qw-compat-button-dimension-spinner-stroke": "2px",
445
- "--qw-compat-button-color-bg-soft-brand": "rgba(0, 68, 255, 0.1)",
446
- "--qw-compat-button-color-bg-soft-danger": "rgba(255, 87, 69, 0.1)",
447
- "--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
448
- "--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
449
- "--qw-compat-loading-dimension-radius-surface": "16px",
450
- "--qw-compat-tag-dimension-radius-small": "2px",
451
- "--qw-compat-tag-dimension-radius-medium": "4px",
452
- "--qw-compat-tag-dimension-radius-large": "4px",
453
- "--qw-compat-tag-dimension-border-width": "1px",
454
- "--qw-compat-tag-dimension-height-small": "12px",
455
- "--qw-compat-tag-dimension-height-medium": "16px",
456
- "--qw-compat-tag-dimension-height-large": "20px",
457
- "--qw-compat-tag-dimension-padding-inline-small": "3px",
458
- "--qw-compat-tag-dimension-padding-inline-medium": "4px",
459
- "--qw-compat-tag-dimension-padding-inline-large": "5px",
460
- "--qw-compat-tag-typography-line-height-small": "16px",
461
- "--qw-compat-tag-typography-line-height-medium": "22px",
462
- "--qw-compat-tag-typography-line-height-large": "22px",
463
- "--qw-compat-tag-typography-font-size-small": "8px",
464
- "--qw-compat-tag-typography-font-size-medium": "11px",
465
- "--qw-compat-tag-typography-font-size-large": "11px",
466
- "--qw-compat-avatar-dimension-diameter-s": "40px",
467
- "--qw-compat-avatar-dimension-diameter-m": "50px",
468
- "--qw-compat-avatar-dimension-diameter-l": "58px",
469
- "--qw-compat-avatar-color-border": "rgba(34, 34, 34, 0.06)",
470
- "--qw-compat-avatar-dimension-border-width": "1px",
471
- "--qw-compat-avatar-dimension-badge-font-size": "11px",
472
- "--qw-compat-avatar-dimension-badge-line-height": "16px",
473
- "--qw-compat-avatar-dimension-badge-padding": "5px",
474
- "--qw-compat-avatar-color-badge-border": "#FFFFFF",
475
- "--qw-compat-avatar-color-badge-text": "#FFFFFF",
476
- "--qw-compat-textarea-color-paste-text": "#FFFFFF",
477
- "--qw-compat-tabs-color-button-bg-selected": "rgba(34, 34, 34, 0.06)",
478
- "--qw-compat-tabs-color-button-border": "rgba(34, 34, 34, 0.03)",
479
- "--qw-compat-tabs-dimension-border-width": "1px",
480
- "--qw-compat-image-dimension-border-width": "1px",
481
- "--qw-compat-divider-color-border": "rgba(34, 34, 34, 0.03)",
482
- "--qw-compat-divider-dimension-weight-thin": "0.5px",
483
- "--qw-compat-divider-dimension-weight-thick": "1px",
484
- "--qw-compat-empty-dimension-description-font-size": "16px",
485
- "--qw-compat-empty-dimension-description-line-height": "26px",
486
- "--qw-compat-empty-dimension-title-gap": "10px",
487
- "--qw-compat-image-color-background": "#F8F8F8",
488
- "--qw-compat-skeleton-color-background": "rgba(185, 185, 185, 0.1)",
489
512
  } as const;
490
513
  export const darkTokens = {
491
514
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -752,6 +775,12 @@ export const darkTokens = {
752
775
  "--qw-ref-color-brown-800": "#542800",
753
776
  "--qw-ref-color-brown-900": "#200B00",
754
777
  "--qw-ref-color-brown-base": "#b45e06",
778
+ "--qw-ref-color-brand-500-a20": "rgba(66, 110, 255, 0.2)",
779
+ "--qw-ref-color-blue-600-a20": "rgba(38, 111, 255, 0.2)",
780
+ "--qw-ref-color-blue-600-a40": "rgba(38, 111, 255, 0.4)",
781
+ "--qw-ref-color-red-400-a10": "rgba(255, 87, 69, 0.1)",
782
+ "--qw-ref-color-red-400-a20": "rgba(255, 87, 69, 0.2)",
783
+ "--qw-ref-color-black-pure": "#000000",
755
784
  "--qw-ref-size-spacing-1": "4px",
756
785
  "--qw-ref-size-spacing-2": "8px",
757
786
  "--qw-ref-size-spacing-3": "12px",
@@ -763,6 +792,7 @@ export const darkTokens = {
763
792
  "--qw-ref-size-radius-sm": "4px",
764
793
  "--qw-ref-size-radius-md": "8px",
765
794
  "--qw-ref-size-radius-lg": "14px",
795
+ "--qw-ref-size-radius-xl": "16px",
766
796
  "--qw-ref-size-radius-full": "9999px",
767
797
  "--qw-ref-size-control-size-sm": "32px",
768
798
  "--qw-ref-size-control-size-md": "40px",
@@ -770,7 +800,20 @@ export const darkTokens = {
770
800
  "--qw-ref-size-icon-size-sm": "16px",
771
801
  "--qw-ref-size-icon-size-md": "20px",
772
802
  "--qw-ref-size-icon-size-lg": "24px",
773
- "--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",
774
817
  "--qw-ref-typography-line-height-tight": "1.25",
775
818
  "--qw-ref-typography-line-height-normal": "1.5",
776
819
  "--qw-ref-typography-line-height-relaxed": "1.75",
@@ -792,6 +835,7 @@ export const darkTokens = {
792
835
  "--qw-ref-typography-font-weight-medium": "500",
793
836
  "--qw-ref-typography-font-weight-semibold": "600",
794
837
  "--qw-ref-typography-font-size-base": "14px",
838
+ "--qw-ref-typography-font-size-xs": "11px",
795
839
  "--qw-ref-typography-font-size-sm": "12px",
796
840
  "--qw-ref-typography-font-size-lg": "16px",
797
841
  "--qw-ref-typography-font-size-xl": "20px",
@@ -804,8 +848,10 @@ export const darkTokens = {
804
848
  "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
805
849
  "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
806
850
  "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
851
+ "--qw-sem-size-radius-sm": "4px",
807
852
  "--qw-sem-size-radius-control": "8px",
808
853
  "--qw-sem-size-radius-card": "14px",
854
+ "--qw-sem-size-radius-xl": "16px",
809
855
  "--qw-sem-size-radius-pill": "9999px",
810
856
  "--qw-sem-size-radius-full": "9999px",
811
857
  "--qw-sem-size-control-height-sm": "32px",
@@ -814,6 +860,40 @@ export const darkTokens = {
814
860
  "--qw-sem-size-icon-size-sm": "16px",
815
861
  "--qw-sem-size-icon-size-md": "20px",
816
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",
817
897
  "--qw-sem-size-inset-sm": "8px",
818
898
  "--qw-sem-size-stack-sm": "8px",
819
899
  "--qw-sem-size-inset-md": "16px",
@@ -858,6 +938,16 @@ export const darkTokens = {
858
938
  "--qw-sem-typography-caption-font-weight": "400",
859
939
  "--qw-sem-typography-caption-line-height": "1.5",
860
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",
861
951
  "--qw-sem-typography-code-font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
862
952
  "--qw-sem-typography-code-font-size": "12px",
863
953
  "--qw-sem-typography-code-font-weight": "400",
@@ -872,47 +962,72 @@ export const darkTokens = {
872
962
  "--qw-sem-color-surface-elevated": "#2D2D2D",
873
963
  "--qw-sem-color-surface-header": "#3A3A3A",
874
964
  "--qw-sem-color-surface-brand-subtle": "#001D66",
965
+ "--qw-sem-color-surface-canvas": "#000000",
966
+ "--qw-sem-color-surface-sunken": "#2D2D2D",
967
+ "--qw-sem-color-surface-selected": "rgba(255, 255, 255, 0.1)",
968
+ "--qw-sem-color-surface-inverse": "#353535",
969
+ "--qw-sem-color-surface-canvas-subtle": "#000000",
875
970
  "--qw-sem-color-content-primary": "#ffffff",
876
971
  "--qw-sem-color-content-secondary": "#999999",
877
972
  "--qw-sem-color-content-tertiary": "#666666",
878
973
  "--qw-sem-color-content-placeholder": "rgba(255, 255, 255, 0.3)",
879
974
  "--qw-sem-color-content-intro": "#888E99",
975
+ "--qw-sem-color-content-disabled": "rgba(255, 255, 255, 0.3)",
976
+ "--qw-sem-color-content-link": "#3086FF",
977
+ "--qw-sem-color-content-icon-subtle": "rgba(255, 255, 255, 0.1)",
978
+ "--qw-sem-color-content-inverse": "#222222",
979
+ "--qw-sem-color-content-on-solid": "#ffffff",
980
+ "--qw-sem-color-content-on-warning-subtle": "#F4D38B",
880
981
  "--qw-sem-color-border-default": "#3A3A3A",
881
982
  "--qw-sem-color-border-strong": "#666666",
882
983
  "--qw-sem-color-border-focus": "#426EFF",
984
+ "--qw-sem-color-border-subtle": "rgba(255, 255, 255, 0.05)",
985
+ "--qw-sem-color-border-disabled": "rgba(255, 255, 255, 0.1)",
986
+ "--qw-sem-color-border-on-media": "#ffffff",
883
987
  "--qw-sem-color-fill-subtle": "rgba(255, 255, 255, 0.2)",
884
988
  "--qw-sem-color-fill-hover": "#2D2D2D",
885
989
  "--qw-sem-color-fill-active": "#001D66",
886
990
  "--qw-sem-color-fill-disabled": "#202020",
991
+ "--qw-sem-color-fill-track": "rgba(255, 255, 255, 0.2)",
887
992
  "--qw-sem-color-action-brand": "#426EFF",
888
993
  "--qw-sem-color-action-product": "#266FFF",
889
- "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.4)",
994
+ "--qw-sem-color-action-selected": "rgba(38, 111, 255, 0.4)",
890
995
  "--qw-sem-color-action-inverse": "#222222",
996
+ "--qw-sem-color-control-action-brand-subtle": "rgba(66, 110, 255, 0.2)",
997
+ "--qw-sem-color-control-action-product-subtle": "rgba(38, 111, 255, 0.2)",
998
+ "--qw-sem-color-control-action-danger-default": "#FF5745",
999
+ "--qw-sem-color-control-action-danger-subtle": "rgba(255, 87, 69, 0.2)",
1000
+ "--qw-sem-color-control-action-neutral-subtle": "rgba(255, 255, 255, 0.1)",
1001
+ "--qw-sem-color-control-selection-brand": "rgba(66, 110, 255, 0.2)",
1002
+ "--qw-sem-color-control-selection-product": "rgba(38, 111, 255, 0.2)",
1003
+ "--qw-sem-color-selection-text-background": "rgba(38, 111, 255, 0.4)",
891
1004
  "--qw-sem-color-status-success": "#1f993f",
892
1005
  "--qw-sem-color-status-warning": "#ffd575",
893
1006
  "--qw-sem-color-status-danger": "#FF5745",
894
1007
  "--qw-sem-color-status-info": "#266FFF",
1008
+ "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.2)",
1009
+ "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
1010
+ "--qw-sem-color-status-danger-subtle": "rgba(255, 87, 69, 0.2)",
1011
+ "--qw-sem-color-status-info-subtle": "rgba(38, 111, 255, 0.2)",
895
1012
  "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.7)",
896
- "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
1013
+ "--qw-sem-color-overlay-guide": "rgba(38, 111, 255, 0.2)",
1014
+ "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
1015
+ "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
897
1016
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
1017
+ "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.5)",
1018
+ "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.5)",
1019
+ "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.5)",
1020
+ "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.5)",
1021
+ "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.5)",
898
1022
  "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
899
- "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
900
- "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
901
- "--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
902
- "--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)",
903
- "--qw-compat-avatar-color-border": "rgba(255, 255, 255, 0.1)",
904
- "--qw-compat-tabs-color-button-bg-selected": "rgba(255, 255, 255, 0.1)",
905
- "--qw-compat-tabs-color-button-border": "rgba(255, 255, 255, 0.05)",
906
- "--qw-compat-divider-color-border": "rgba(255, 255, 255, 0.05)",
907
- "--qw-compat-image-color-background": "#333333",
908
1023
  } as const;
909
1024
  export type TokenName = keyof typeof lightTokens;
910
1025
  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;
912
- 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
- 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;
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;
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;
914
1029
  export const semMotionSuffixes = ["duration-fast","duration-base","duration-slow","easing-standard"] as const;
915
- export const semEffectSuffixes = ["shadow-dialog"] as const;
1030
+ export const semEffectSuffixes = ["shadow-card-color","shadow-floating-color","shadow-dialog-color","shadow-card","shadow-floating","shadow-dialog"] as const;
916
1031
  export type SemColorSuffix = (typeof semColorSuffixes)[number];
917
1032
  export type SemSizeSuffix = (typeof semSizeSuffixes)[number];
918
1033
  export type SemTypeSuffix = (typeof semTypeSuffixes)[number];
@@ -924,38 +1039,3 @@ export type SemTokenPath =
924
1039
  | `typography-${SemTypeSuffix}`
925
1040
  | `motion-${SemMotionSuffix}`
926
1041
  | `effect-${SemEffectSuffix}`;
927
- export const compatComponents = ["avatar","button","divider","empty","image","loading","skeleton","tabs","tag","textarea"] as const;
928
- export type CompatComponent = (typeof compatComponents)[number];
929
- 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;
930
- export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
931
- 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;
932
- export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
933
- export const compatDividerSuffixes = ["color-border","dimension-weight-thick","dimension-weight-thin"] as const;
934
- export type CompatDividerSuffix = (typeof compatDividerSuffixes)[number];
935
- export const compatEmptySuffixes = ["dimension-description-font-size","dimension-description-line-height","dimension-title-gap"] as const;
936
- export type CompatEmptySuffix = (typeof compatEmptySuffixes)[number];
937
- export const compatImageSuffixes = ["color-background","dimension-border-width"] as const;
938
- export type CompatImageSuffix = (typeof compatImageSuffixes)[number];
939
- export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
940
- export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
941
- export const compatSkeletonSuffixes = ["color-background"] as const;
942
- export type CompatSkeletonSuffix = (typeof compatSkeletonSuffixes)[number];
943
- export const compatTabsSuffixes = ["color-button-bg-selected","color-button-border","dimension-border-width"] as const;
944
- export type CompatTabsSuffix = (typeof compatTabsSuffixes)[number];
945
- 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;
946
- export type CompatTagSuffix = (typeof compatTagSuffixes)[number];
947
- export const compatTextareaSuffixes = ["color-paste-text"] as const;
948
- export type CompatTextareaSuffix = (typeof compatTextareaSuffixes)[number];
949
- export type CompatSuffix<C extends CompatComponent> =
950
- C extends "avatar" ? CompatAvatarSuffix :
951
- C extends "button" ? CompatButtonSuffix :
952
- C extends "divider" ? CompatDividerSuffix :
953
- C extends "empty" ? CompatEmptySuffix :
954
- C extends "image" ? CompatImageSuffix :
955
- C extends "loading" ? CompatLoadingSuffix :
956
- C extends "skeleton" ? CompatSkeletonSuffix :
957
- C extends "tabs" ? CompatTabsSuffix :
958
- C extends "tag" ? CompatTagSuffix :
959
- C extends "textarea" ? CompatTextareaSuffix :
960
- never;
961
- 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.4",
3
+ "version": "0.3.0-next.6",
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";