ui-foundations 0.4.1 → 0.7.0

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 (61) hide show
  1. package/LICENSE +73 -0
  2. package/README.md +49 -13
  3. package/dist/core/index.css +1 -0
  4. package/dist/macros/ui.njk +94 -0
  5. package/dist/main.css +723 -138
  6. package/dist/react/accordion.js +36 -0
  7. package/dist/react/avatar.js +34 -0
  8. package/dist/react/button.js +1 -12
  9. package/dist/react/checkbox.js +3 -20
  10. package/dist/react/divider.js +31 -0
  11. package/dist/react/form.js +111 -0
  12. package/dist/react/icon.js +1 -12
  13. package/dist/react/index.js +7 -0
  14. package/dist/react/input.js +7 -0
  15. package/dist/react/radio.js +3 -20
  16. package/dist/react/switch.js +3 -20
  17. package/dist/react/tabs.js +72 -0
  18. package/dist/react/textarea.js +45 -0
  19. package/dist/react/tooltip.js +25 -0
  20. package/dist/react/warn-dev.js +15 -0
  21. package/dist/tokens/css/appearance-modes.tokens.mode-dark.css +12 -6
  22. package/dist/tokens/css/appearance-modes.tokens.mode-light.css +7 -1
  23. package/dist/tokens/css/components-ui.tokens.css +93 -73
  24. package/dist/tokens/css/core-primitives.tokens.css +72 -1
  25. package/dist/tokens/css/semantics-roles.tokens.css +1 -1
  26. package/dist/tokens/css/themes-brands.tokens.brand-a.css +11 -11
  27. package/dist/tokens/css/themes-brands.tokens.brand-b.css +1 -1
  28. package/dist/tokens/css/themes-brands.tokens.brand-c.css +22 -0
  29. package/dist/tokens/json/appearance-modes.tokens.mode-dark.json +24 -0
  30. package/dist/tokens/json/appearance-modes.tokens.mode-light.json +24 -0
  31. package/dist/tokens/json/components-ui.tokens.json +403 -269
  32. package/dist/tokens/json/core-primitives.tokens.json +302 -0
  33. package/dist/tokens/json/themes-brands.tokens.brand-a.json +10 -10
  34. package/dist/tokens/json/themes-brands.tokens.brand-b.json +10 -10
  35. package/dist/tokens/json/themes-brands.tokens.brand-c.json +81 -0
  36. package/dist/tokens/tokens.yaml +2138 -578
  37. package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts +12 -6
  38. package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts +7 -1
  39. package/dist/tokens/ts/components-ui.tokens.ts +94 -74
  40. package/dist/tokens/ts/core-primitives.tokens.ts +73 -2
  41. package/dist/tokens/ts/semantics-roles.tokens.ts +1 -1
  42. package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +11 -11
  43. package/dist/tokens/ts/themes-brands.tokens.brand-b.ts +1 -1
  44. package/dist/tokens/ts/themes-brands.tokens.brand-c.ts +32 -0
  45. package/dist/ui/index.css +7 -0
  46. package/dist/ui/patterns/accordion.css +81 -0
  47. package/dist/ui/patterns/avatar.css +57 -0
  48. package/dist/ui/patterns/button.css +3 -3
  49. package/dist/ui/patterns/checkbox.css +28 -28
  50. package/dist/ui/patterns/divider.css +25 -0
  51. package/dist/ui/patterns/form.css +112 -0
  52. package/dist/ui/patterns/input.css +12 -12
  53. package/dist/ui/patterns/label.css +1 -1
  54. package/dist/ui/patterns/tabs.css +71 -0
  55. package/dist/ui/patterns/textarea.css +50 -0
  56. package/dist/ui/patterns/tooltip.css +64 -0
  57. package/docs/agentic/README.md +1 -0
  58. package/docs/agentic/skills/component-accessibility-audit.md +132 -0
  59. package/docs/foundations/foundation-007-typography-selectors-and-specificity.md +1 -1
  60. package/package.json +15 -3
  61. package/dist/tokens/missing-tokens.json +0 -43
package/dist/tokens/json/components-ui.tokens.json CHANGED
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "Text Color Default": {
28
28
  "$type": "color",
29
- "$value": "{Color.Text.Inverse}"
29
+ "$value": "{Color.Text.On Brand}"
30
30
  },
31
31
  "Container": {
32
32
  "Background Default": {
@@ -48,11 +48,11 @@
48
48
  },
49
49
  "Text Color Hover": {
50
50
  "$type": "color",
51
- "$value": "{Color.Text.Inverse}"
51
+ "$value": "{Color.Text.On Brand}"
52
52
  },
53
53
  "Text Color Active": {
54
54
  "$type": "color",
55
- "$value": "{Color.Text.Inverse}"
55
+ "$value": "{Color.Text.On Brand}"
56
56
  }
57
57
  },
58
58
  "Outline": {
@@ -266,66 +266,65 @@
266
266
  },
267
267
  "Text Color Hover": {
268
268
  "$type": "color",
269
- "$value": "{Color.Text.Default}"
269
+ "$value": "{Color.Text.Brand}"
270
270
  },
271
271
  "Text Color Active": {
272
272
  "$type": "color",
273
273
  "$value": "{Color.Text.Default}"
274
274
  },
275
- "Border": {
276
- "Color Default": {
277
- "$type": "color",
278
- "$value": "{Color.Border.Default}"
279
- },
280
- "Color Hover": {
281
- "$type": "color",
282
- "$value": "{Color.Border.Brand}"
283
- },
284
- "Color Active": {
285
- "$type": "color",
286
- "$value": "{Color.Border.Brand}"
287
- },
288
- "Color Focus": {
289
- "$type": "color",
290
- "$value": "{Color.Border.Brand}"
291
- },
292
- "Color Invalid": {
293
- "$type": "color",
294
- "$value": "{Color.Border.Danger}"
295
- },
296
- "Color Valid": {
297
- "$type": "color",
298
- "$value": "{Color.Border.Strong}"
299
- }
300
- },
301
- "Container": {
302
- "Background Default": {
303
- "$type": "color",
304
- "$value": "{Color.Fill.Surface}"
305
- },
306
- "Background Hover": {
307
- "$type": "color",
308
- "$value": "{Color.Fill.Surface}"
309
- },
310
- "Background Focus": {
311
- "$type": "color",
312
- "$value": "{Color.Fill.Surface}"
313
- },
314
- "Background Active": {
315
- "$type": "color",
316
- "$value": "{Color.Fill.Surface}"
317
- }
275
+ "Text Color Disabled": {
276
+ "$type": "color",
277
+ "$value": "{Color.Text.Disabled}"
318
278
  },
319
279
  "Text Color Placeholder": {
320
280
  "$type": "color",
321
281
  "$value": "{Color.Text.Subtle}"
282
+ }
283
+ },
284
+ "Border": {
285
+ "Border Color Default": {
286
+ "$type": "color",
287
+ "$value": "{Color.Border.Default}"
322
288
  },
323
- "Height Min": {
324
- "$type": "dimension",
325
- "$value": {
326
- "value": 40,
327
- "unit": "px"
328
- }
289
+ "Border Color Hover": {
290
+ "$type": "color",
291
+ "$value": "{Color.Border.Brand}"
292
+ },
293
+ "Border Color Active": {
294
+ "$type": "color",
295
+ "$value": "{Color.Border.Brand}"
296
+ },
297
+ "Border Color Focus": {
298
+ "$type": "color",
299
+ "$value": "{Color.Border.Brand}"
300
+ },
301
+ "Border Size Default": {
302
+ "$type": "number",
303
+ "$value": "{Size.Border.100}"
304
+ },
305
+ "Border Size Hover": {
306
+ "$type": "number",
307
+ "$value": "{Size.Border.100}"
308
+ },
309
+ "Border Size Active": {
310
+ "$type": "number",
311
+ "$value": "{Size.Border.200}"
312
+ },
313
+ "Border Radius": {
314
+ "$type": "number",
315
+ "$value": "{Brand.Corner.Input}"
316
+ },
317
+ "Border Color Disabled": {
318
+ "$type": "color",
319
+ "$value": "{Color.Border.Disabled}"
320
+ },
321
+ "Border Color Invalid": {
322
+ "$type": "color",
323
+ "$value": "{Color.Border.Danger}"
324
+ },
325
+ "Border Color Valid": {
326
+ "$type": "color",
327
+ "$value": "{Color.Border.Strong}"
329
328
  }
330
329
  },
331
330
  "Font Family": {
@@ -344,21 +343,27 @@
344
343
  "$type": "number",
345
344
  "$value": "{Typography.Body.Line Height}"
346
345
  },
347
- "Border Size Default": {
348
- "$type": "number",
349
- "$value": "{Size.Border.100}"
350
- },
351
- "Border Size Hover": {
352
- "$type": "number",
353
- "$value": "{Size.Border.100}"
354
- },
355
- "Border Size Active": {
356
- "$type": "number",
357
- "$value": "{Size.Border.200}"
358
- },
359
- "Border Radius": {
360
- "$type": "number",
361
- "$value": "{Brand.Corner.Input}"
346
+ "Container": {
347
+ "Background Default": {
348
+ "$type": "color",
349
+ "$value": "{Color.Fill.Surface}"
350
+ },
351
+ "Background Hover": {
352
+ "$type": "color",
353
+ "$value": "{Color.Fill.Surface}"
354
+ },
355
+ "Background Focus": {
356
+ "$type": "color",
357
+ "$value": "{Color.Fill.Surface}"
358
+ },
359
+ "Background Active": {
360
+ "$type": "color",
361
+ "$value": "{Color.Fill.Surface}"
362
+ },
363
+ "Background Disabled": {
364
+ "$type": "color",
365
+ "$value": "{Color.Fill.Disabled}"
366
+ }
362
367
  },
363
368
  "Padding Inline": {
364
369
  "$type": "number",
@@ -376,18 +381,6 @@
376
381
  "$type": "number",
377
382
  "$value": "{Size.Spacing.200}"
378
383
  },
379
- "Text Color Disabled": {
380
- "$type": "color",
381
- "$value": "{Color.Text.Disabled}"
382
- },
383
- "Border Color Disabled": {
384
- "$type": "color",
385
- "$value": "{Color.Border.Disabled}"
386
- },
387
- "Container Background Disabled": {
388
- "$type": "color",
389
- "$value": "{Color.Fill.Disabled}"
390
- },
391
384
  "Overlay Hover": {
392
385
  "$type": "color",
393
386
  "$value": "{Color.Transparent}"
@@ -403,160 +396,35 @@
403
396
  "unit": "px"
404
397
  }
405
398
  },
406
- "Checkbox": {
407
- "Text Color Default": {
408
- "$type": "color",
409
- "$value": "{Color.Text.Default}"
410
- },
411
- "Text Color Hover": {
412
- "$type": "color",
413
- "$value": "{Color.Text.Strong}"
414
- },
415
- "Text Color Active": {
416
- "$type": "color",
417
- "$value": "{Color.Text.Inverse}"
418
- },
419
- "Border": {
420
- "Color Default": {
421
- "$type": "color",
422
- "$value": "{Color.Border.Subtle}"
423
- },
424
- "Color Hover": {
425
- "$type": "color",
426
- "$value": "{Color.Border.Strong}"
427
- },
428
- "Color Active": {
429
- "$type": "color",
430
- "$value": "{Color.Border.Brand}"
431
- },
432
- "Color Focus": {
433
- "$type": "color",
434
- "$value": "{Color.Border.Brand}"
435
- },
436
- "Color Invalid": {
437
- "$type": "color",
438
- "$value": "{Color.Border.Danger}"
439
- },
440
- "Color Valid": {
399
+ "Height Min": {
400
+ "$type": "dimension",
401
+ "$value": {
402
+ "value": 40,
403
+ "unit": "px"
404
+ }
405
+ },
406
+ "radio": {
407
+ "text-color": {
408
+ "active": {
441
409
  "$type": "color",
442
- "$value": "{Color.Border.Strong}"
410
+ "$value": "{Color.Text.Default}"
443
411
  },
444
- "Color Disabled": {
412
+ "hover": {
445
413
  "$type": "color",
446
- "$value": "{Color.Border.Disabled}"
414
+ "$value": "{Color.Text.Strong}"
447
415
  }
448
416
  },
449
- "Container": {
450
- "Background Default": {
417
+ "container-background": {
418
+ "hover": {
451
419
  "$type": "color",
452
420
  "$value": "{Color.Fill.Surface}"
453
- },
454
- "Background Hover": {
455
- "$type": "color",
456
- "$value": "{Color.Fill.Surface}"
457
- },
458
- "Background Focus": {
459
- "$type": "color",
460
- "$value": "{Color.Fill.Surface}"
461
- },
462
- "Background Active": {
463
- "$type": "color",
464
- "$value": "{Color.Fill.Brand}"
465
- },
466
- "Background Disabled": {
467
- "$type": "color",
468
- "$value": "{Color.Fill.Disabled}"
469
421
  }
470
422
  },
471
- "Text Color Disabled": {
472
- "$type": "color",
473
- "$value": "{Color.Text.Disabled}"
474
- },
475
- "Border Size Hover": {
476
- "$type": "number",
477
- "$value": "{Size.Border.200}"
478
- },
479
- "Border Size Disabled": {
480
- "$type": "number",
481
- "$value": "{Size.Border.000}"
482
- },
483
- "Border Size Default": {
484
- "$type": "number",
485
- "$value": "{Size.Border.100}"
486
- }
487
- },
488
- "Radio": {
489
- "Text Color Default": {
490
- "$type": "color",
491
- "$value": "{Color.Text.Default}"
492
- },
493
- "Text Color Hover": {
494
- "$type": "color",
495
- "$value": "{Color.Text.Strong}"
496
- },
497
- "Text Color Active": {
498
- "$type": "color",
499
- "$value": "{Color.Text.Inverse}"
500
- },
501
- "Text Color Disabled": {
502
- "$type": "color",
503
- "$value": "{Color.Text.Disabled}"
504
- },
505
- "Border": {
506
- "Color Default": {
507
- "$type": "color",
508
- "$value": "{Color.Border.Subtle}"
509
- },
510
- "Color Hover": {
511
- "$type": "color",
512
- "$value": "{Color.Border.Strong}"
513
- },
514
- "Color Active": {
423
+ "border-color": {
424
+ "focus": {
515
425
  "$type": "color",
516
426
  "$value": "{Color.Border.Brand}"
517
- },
518
- "Color Focus": {
519
- "$type": "color",
520
- "$value": "{Color.Border.Brand}"
521
- },
522
- "Color Disabled": {
523
- "$type": "color",
524
- "$value": "{Color.Border.Disabled}"
525
427
  }
526
- },
527
- "Container": {
528
- "Background Default": {
529
- "$type": "color",
530
- "$value": "{Color.Fill.Surface}"
531
- },
532
- "Background Hover": {
533
- "$type": "color",
534
- "$value": "{Color.Fill.Surface}"
535
- },
536
- "Background Focus": {
537
- "$type": "color",
538
- "$value": "{Color.Fill.Surface}"
539
- },
540
- "Background Active": {
541
- "$type": "color",
542
- "$value": "{Color.Fill.Brand}"
543
- },
544
- "Background Disabled": {
545
- "$type": "color",
546
- "$value": "{Color.Fill.Disabled}"
547
- }
548
- },
549
- "Border Size Default": {
550
- "$type": "number",
551
- "$value": "{Size.Border.100}"
552
- },
553
- "Border Size Hover": {
554
- "$type": "number",
555
- "$value": "{Size.Border.200}"
556
- },
557
- "Border Size Disabled": {
558
- "$type": "number",
559
- "$value": "{Size.Border.000}"
560
428
  }
561
429
  }
562
430
  },
@@ -614,94 +482,210 @@
614
482
  "$value": "{Size.Border.100}"
615
483
  }
616
484
  },
485
+ "Checkbox": {
486
+ "Text Color Default": {
487
+ "$type": "color",
488
+ "$value": "{Color.Text.Default}"
489
+ },
490
+ "Text Color Hover": {
491
+ "$type": "color",
492
+ "$value": "{Color.Text.Brand}"
493
+ },
494
+ "Text Color Active": {
495
+ "$type": "color",
496
+ "$value": "{Color.Text.On Brand}"
497
+ },
498
+ "Border": {
499
+ "Color Default": {
500
+ "$type": "color",
501
+ "$value": "{Color.Border.Subtle}"
502
+ },
503
+ "Color Hover": {
504
+ "$type": "color",
505
+ "$value": "{Color.Border.Brand}"
506
+ },
507
+ "Color Active": {
508
+ "$type": "color",
509
+ "$value": "{Color.Border.Brand}"
510
+ },
511
+ "Color Focus": {
512
+ "$type": "color",
513
+ "$value": "{Color.Border.Brand}"
514
+ },
515
+ "Color Invalid": {
516
+ "$type": "color",
517
+ "$value": "{Color.Border.Danger}"
518
+ },
519
+ "Color Valid": {
520
+ "$type": "color",
521
+ "$value": "{Color.Border.Strong}"
522
+ },
523
+ "Color Disabled": {
524
+ "$type": "color",
525
+ "$value": "{Color.Border.Disabled}"
526
+ },
527
+ "Size Hover": {
528
+ "$type": "number",
529
+ "$value": "{Size.Border.200}"
530
+ },
531
+ "Size Disabled": {
532
+ "$type": "number",
533
+ "$value": "{Size.Border.000}"
534
+ },
535
+ "Size Default": {
536
+ "$type": "number",
537
+ "$value": "{Size.Border.100}"
538
+ }
539
+ },
540
+ "Container": {
541
+ "Background Default": {
542
+ "$type": "color",
543
+ "$value": "{Color.Fill.Surface}"
544
+ },
545
+ "Background Hover": {
546
+ "$type": "color",
547
+ "$value": "{Color.Fill.Surface}"
548
+ },
549
+ "Background Focus": {
550
+ "$type": "color",
551
+ "$value": "{Color.Fill.Surface}"
552
+ },
553
+ "Background Active": {
554
+ "$type": "color",
555
+ "$value": "{Color.Fill.Brand}"
556
+ },
557
+ "Background Disabled": {
558
+ "$type": "color",
559
+ "$value": "{Color.Fill.Disabled}"
560
+ }
561
+ },
562
+ "Text Color Disabled": {
563
+ "$type": "color",
564
+ "$value": "{Color.Text.Disabled}"
565
+ }
566
+ },
567
+ "Radio": {
568
+ "Text Color Default": {
569
+ "$type": "color",
570
+ "$value": "{Color.Text.Default}"
571
+ },
572
+ "Text Color Disabled": {
573
+ "$type": "color",
574
+ "$value": "{Color.Text.Disabled}"
575
+ },
576
+ "Border": {
577
+ "Color Default": {
578
+ "$type": "color",
579
+ "$value": "{Color.Border.Subtle}"
580
+ },
581
+ "Color Hover": {
582
+ "$type": "color",
583
+ "$value": "{Color.Border.Brand}"
584
+ },
585
+ "Color Active": {
586
+ "$type": "color",
587
+ "$value": "{Color.Border.Brand}"
588
+ },
589
+ "Color Disabled": {
590
+ "$type": "color",
591
+ "$value": "{Color.Border.Disabled}"
592
+ }
593
+ },
594
+ "Container": {
595
+ "Background Default": {
596
+ "$type": "color",
597
+ "$value": "{Color.Fill.Surface}"
598
+ },
599
+ "Background Disabled": {
600
+ "$type": "color",
601
+ "$value": "{Color.Fill.Disabled}"
602
+ }
603
+ },
604
+ "Border Size Default": {
605
+ "$type": "number",
606
+ "$value": "{Size.Border.100}"
607
+ },
608
+ "Border Size Hover": {
609
+ "$type": "number",
610
+ "$value": "{Size.Border.200}"
611
+ },
612
+ "Border Size Disabled": {
613
+ "$type": "number",
614
+ "$value": "{Size.Border.000}"
615
+ }
616
+ },
617
617
  "Badge": {
618
618
  "Default": {
619
+ "Text Color": {
620
+ "$type": "color",
621
+ "$value": "{Color.Text.Default}"
622
+ },
623
+ "Border Color": {
624
+ "$type": "color",
625
+ "$value": "{Color.Transparent}"
626
+ },
619
627
  "Container": {
620
628
  "Background": {
621
629
  "$type": "color",
622
630
  "$value": "{Color.Fill.Subtle}"
623
631
  }
624
- },
625
- "Text Color": {
626
- "$type": "color",
627
- "$value": "{Color.Text.Default}"
628
632
  }
629
633
  },
630
634
  "Brand": {
635
+ "Text Color": {
636
+ "$type": "color",
637
+ "$value": "{Color.Text.On Brand}"
638
+ },
639
+ "Border Color": {
640
+ "$type": "color",
641
+ "$value": "{Color.Transparent}"
642
+ },
631
643
  "Container": {
632
644
  "Background": {
633
645
  "$type": "color",
634
646
  "$value": "{Color.Fill.Brand}"
635
647
  }
636
- },
637
- "Text Color": {
638
- "$type": "color",
639
- "$value": "{Color.Text.Inverse}"
640
648
  }
641
649
  },
642
650
  "Success": {
643
- "Container": {
644
- "Background": {
645
- "$type": "color",
646
- "$value": "{Color.Fill.Success}"
647
- }
648
- },
649
651
  "Text Color": {
650
652
  "$type": "color",
651
- "$value": "{Color.Text.Inverse}"
652
- }
653
- },
654
- "Danger": {
653
+ "$value": "{Color.Text.On Success}"
654
+ },
655
+ "Border Color": {
656
+ "$type": "color",
657
+ "$value": "{Color.Transparent}"
658
+ },
655
659
  "Container": {
656
660
  "Background": {
657
661
  "$type": "color",
658
- "$value": "{Color.Fill.Danger}"
662
+ "$value": "{Color.Fill.Success}"
659
663
  }
660
- },
661
- "Text Color": {
662
- "$type": "color",
663
- "$value": "{Color.Text.Inverse}"
664
664
  }
665
665
  },
666
- "Border Radius": {
667
- "$type": "number",
668
- "$value": "{Size.Radius.Full}"
669
- },
670
666
  "Font Family": {
671
667
  "$type": "fontFamily",
672
- "$value": "{Typography.Label.Font Family}"
668
+ "$value": "{Brand.Font.Lead}"
673
669
  },
674
670
  "Font Weight": {
675
671
  "$type": "fontWeight",
676
- "$value": "{Font.Weight.700}"
677
- },
678
- "Font Size Sm": {
679
- "$type": "number",
680
- "$value": "{Font.Size.xs}"
681
- },
682
- "Font Size Md": {
683
- "$type": "number",
684
- "$value": "{Font.Size.sm}"
685
- },
686
- "Line Height Sm": {
687
- "$type": "number",
688
- "$value": "{Line Height.xs}"
672
+ "$value": "{Typography.Label.Font Weight}"
689
673
  },
690
- "Line Height Md": {
674
+ "Border Size Default": {
691
675
  "$type": "number",
692
- "$value": "{Line Height.sm}"
676
+ "$value": "{Size.Border.100}"
693
677
  },
694
- "Padding Inline Sm": {
678
+ "Border Radius": {
695
679
  "$type": "number",
696
- "$value": "{Size.Spacing.200}"
680
+ "$value": "{Size.Radius.full}"
697
681
  },
698
682
  "Padding Inline Md": {
699
683
  "$type": "number",
700
684
  "$value": "{Size.Spacing.300}"
701
685
  },
702
- "Padding Block Sm": {
686
+ "Padding Inline Icon Only": {
703
687
  "$type": "number",
704
- "$value": "{Size.Spacing.000}"
688
+ "$value": "{Size.Spacing.200}"
705
689
  },
706
690
  "Padding Block Md": {
707
691
  "$type": "number",
@@ -710,6 +694,156 @@
710
694
  "Gap": {
711
695
  "$type": "number",
712
696
  "$value": "{Size.Spacing.100}"
697
+ },
698
+ "Height Min": {
699
+ "$type": "dimension",
700
+ "$value": {
701
+ "value": 40,
702
+ "unit": "px"
703
+ }
704
+ },
705
+ "Width Min": {
706
+ "$type": "dimension",
707
+ "$value": {
708
+ "value": 40,
709
+ "unit": "px"
710
+ }
711
+ },
712
+ "Danger": {
713
+ "Container": {
714
+ "Background": {
715
+ "$type": "color",
716
+ "$value": "{Color.Fill.Danger}"
717
+ },
718
+ "Border Color": {
719
+ "$type": "color",
720
+ "$value": "{Color.Transparent}"
721
+ }
722
+ },
723
+ "Text Color": {
724
+ "$type": "color",
725
+ "$value": "{Color.Text.On Danger}"
726
+ }
727
+ },
728
+ "font-size": {
729
+ "sm": {
730
+ "$type": "dimension",
731
+ "$value": {
732
+ "value": 12,
733
+ "unit": "px"
734
+ }
735
+ },
736
+ "md": {
737
+ "$type": "dimension",
738
+ "$value": {
739
+ "value": 14,
740
+ "unit": "px"
741
+ }
742
+ }
743
+ },
744
+ "line-height": {
745
+ "sm": {
746
+ "$type": "dimension",
747
+ "$value": {
748
+ "value": 16,
749
+ "unit": "px"
750
+ }
751
+ },
752
+ "md": {
753
+ "$type": "dimension",
754
+ "$value": {
755
+ "value": 20,
756
+ "unit": "px"
757
+ }
758
+ }
759
+ },
760
+ "padding-inline": {
761
+ "sm": {
762
+ "$type": "dimension",
763
+ "$value": {
764
+ "value": 8,
765
+ "unit": "px"
766
+ }
767
+ }
768
+ },
769
+ "padding-block": {
770
+ "sm": {
771
+ "$type": "dimension",
772
+ "$value": {
773
+ "value": 2,
774
+ "unit": "px"
775
+ }
776
+ }
777
+ }
778
+ },
779
+ "Switch": {
780
+ "track": {
781
+ "background": {
782
+ "default": {
783
+ "$type": "color",
784
+ "$value": "{Color.Fill.Surface}"
785
+ },
786
+ "hover": {
787
+ "$type": "color",
788
+ "$value": "{Color.Fill.Surface}"
789
+ },
790
+ "active": {
791
+ "$type": "color",
792
+ "$value": "{Color.Fill.Brand}"
793
+ },
794
+ "disabled": {
795
+ "$type": "color",
796
+ "$value": "{Color.Fill.Disabled}"
797
+ }
798
+ },
799
+ "border-color": {
800
+ "default": {
801
+ "$type": "color",
802
+ "$value": "{Color.Border.Default}"
803
+ },
804
+ "hover": {
805
+ "$type": "color",
806
+ "$value": "{Color.Border.Brand}"
807
+ },
808
+ "active": {
809
+ "$type": "color",
810
+ "$value": "{Color.Border.Brand}"
811
+ },
812
+ "disabled": {
813
+ "$type": "color",
814
+ "$value": "{Color.Border.Disabled}"
815
+ }
816
+ }
817
+ },
818
+ "thumb": {
819
+ "background": {
820
+ "default": {
821
+ "$type": "color",
822
+ "$value": "{Color.Border.Default}"
823
+ },
824
+ "hover": {
825
+ "$type": "color",
826
+ "$value": "{Color.Border.Brand}"
827
+ },
828
+ "active": {
829
+ "$type": "color",
830
+ "$value": "{Color.Fill.Surface}"
831
+ },
832
+ "disabled": {
833
+ "$type": "color",
834
+ "$value": "{Color.Fill.Surface}"
835
+ }
836
+ }
837
+ },
838
+ "text-color": {
839
+ "default": {
840
+ "$type": "color",
841
+ "$value": "{Color.Text.Default}"
842
+ },
843
+ "disabled": {
844
+ "$type": "color",
845
+ "$value": "{Color.Text.Disabled}"
846
+ }
713
847
  }
714
848
  }
715
849
  }