ui-foundations 0.6.0 → 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 (35) hide show
  1. package/LICENSE +73 -0
  2. package/README.md +43 -8
  3. package/dist/macros/ui.njk +33 -0
  4. package/dist/main.css +230 -84
  5. package/dist/react/form.js +111 -0
  6. package/dist/react/index.js +1 -0
  7. package/dist/react/input.js +7 -0
  8. package/dist/react/textarea.js +7 -0
  9. package/dist/tokens/css/appearance-modes.tokens.mode-dark.css +7 -1
  10. package/dist/tokens/css/appearance-modes.tokens.mode-light.css +7 -1
  11. package/dist/tokens/css/components-ui.tokens.css +55 -33
  12. package/dist/tokens/css/core-primitives.tokens.css +1 -1
  13. package/dist/tokens/css/semantics-roles.tokens.css +1 -1
  14. package/dist/tokens/css/themes-brands.tokens.brand-a.css +1 -1
  15. package/dist/tokens/css/themes-brands.tokens.brand-b.css +1 -1
  16. package/dist/tokens/css/themes-brands.tokens.brand-c.css +1 -1
  17. package/dist/tokens/json/appearance-modes.tokens.mode-dark.json +24 -0
  18. package/dist/tokens/json/appearance-modes.tokens.mode-light.json +24 -0
  19. package/dist/tokens/json/components-ui.tokens.json +161 -25
  20. package/dist/tokens/tokens.yaml +509 -67
  21. package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts +7 -1
  22. package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts +7 -1
  23. package/dist/tokens/ts/components-ui.tokens.ts +55 -33
  24. package/dist/tokens/ts/core-primitives.tokens.ts +1 -1
  25. package/dist/tokens/ts/semantics-roles.tokens.ts +1 -1
  26. package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +1 -1
  27. package/dist/tokens/ts/themes-brands.tokens.brand-b.ts +1 -1
  28. package/dist/tokens/ts/themes-brands.tokens.brand-c.ts +1 -1
  29. package/dist/ui/index.css +1 -0
  30. package/dist/ui/patterns/button.css +3 -3
  31. package/dist/ui/patterns/checkbox.css +28 -28
  32. package/dist/ui/patterns/form.css +112 -0
  33. package/dist/ui/patterns/input.css +12 -12
  34. package/dist/ui/patterns/label.css +1 -1
  35. package/package.json +14 -3
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,7 +266,7 @@
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",
@@ -402,6 +402,30 @@
402
402
  "value": 40,
403
403
  "unit": "px"
404
404
  }
405
+ },
406
+ "radio": {
407
+ "text-color": {
408
+ "active": {
409
+ "$type": "color",
410
+ "$value": "{Color.Text.Default}"
411
+ },
412
+ "hover": {
413
+ "$type": "color",
414
+ "$value": "{Color.Text.Strong}"
415
+ }
416
+ },
417
+ "container-background": {
418
+ "hover": {
419
+ "$type": "color",
420
+ "$value": "{Color.Fill.Surface}"
421
+ }
422
+ },
423
+ "border-color": {
424
+ "focus": {
425
+ "$type": "color",
426
+ "$value": "{Color.Border.Brand}"
427
+ }
428
+ }
405
429
  }
406
430
  },
407
431
  "Form": {
@@ -465,11 +489,11 @@
465
489
  },
466
490
  "Text Color Hover": {
467
491
  "$type": "color",
468
- "$value": "{Color.Text.Strong}"
492
+ "$value": "{Color.Text.Brand}"
469
493
  },
470
494
  "Text Color Active": {
471
495
  "$type": "color",
472
- "$value": "{Color.Text.Inverse}"
496
+ "$value": "{Color.Text.On Brand}"
473
497
  },
474
498
  "Border": {
475
499
  "Color Default": {
@@ -478,7 +502,7 @@
478
502
  },
479
503
  "Color Hover": {
480
504
  "$type": "color",
481
- "$value": "{Color.Border.Strong}"
505
+ "$value": "{Color.Border.Brand}"
482
506
  },
483
507
  "Color Active": {
484
508
  "$type": "color",
@@ -556,7 +580,7 @@
556
580
  },
557
581
  "Color Hover": {
558
582
  "$type": "color",
559
- "$value": "{Color.Border.Strong}"
583
+ "$value": "{Color.Border.Brand}"
560
584
  },
561
585
  "Color Active": {
562
586
  "$type": "color",
@@ -610,7 +634,7 @@
610
634
  "Brand": {
611
635
  "Text Color": {
612
636
  "$type": "color",
613
- "$value": "{Color.Text.Inverse}"
637
+ "$value": "{Color.Text.On Brand}"
614
638
  },
615
639
  "Border Color": {
616
640
  "$type": "color",
@@ -626,7 +650,7 @@
626
650
  "Success": {
627
651
  "Text Color": {
628
652
  "$type": "color",
629
- "$value": "{Color.Text.Inverse}"
653
+ "$value": "{Color.Text.On Success}"
630
654
  },
631
655
  "Border Color": {
632
656
  "$type": "color",
@@ -647,37 +671,29 @@
647
671
  "$type": "fontWeight",
648
672
  "$value": "{Typography.Label.Font Weight}"
649
673
  },
650
- "Font Size": {
651
- "$type": "number",
652
- "$value": "{Typography.Label.Font Size}"
653
- },
654
- "Line Height": {
655
- "$type": "number",
656
- "$value": "{Typography.Label.Line Height}"
657
- },
658
674
  "Border Size Default": {
659
675
  "$type": "number",
660
676
  "$value": "{Size.Border.100}"
661
677
  },
662
678
  "Border Radius": {
663
679
  "$type": "number",
664
- "$value": "{Brand.Corner.Input}"
680
+ "$value": "{Size.Radius.full}"
665
681
  },
666
- "Padding Inline": {
682
+ "Padding Inline Md": {
667
683
  "$type": "number",
668
- "$value": "{Size.Spacing.400}"
684
+ "$value": "{Size.Spacing.300}"
669
685
  },
670
686
  "Padding Inline Icon Only": {
671
687
  "$type": "number",
672
688
  "$value": "{Size.Spacing.200}"
673
689
  },
674
- "Padding Block": {
690
+ "Padding Block Md": {
675
691
  "$type": "number",
676
- "$value": "{Size.Spacing.200}"
692
+ "$value": "{Size.Spacing.100}"
677
693
  },
678
694
  "Gap": {
679
695
  "$type": "number",
680
- "$value": "{Size.Spacing.200}"
696
+ "$value": "{Size.Spacing.100}"
681
697
  },
682
698
  "Height Min": {
683
699
  "$type": "dimension",
@@ -706,7 +722,127 @@
706
722
  },
707
723
  "Text Color": {
708
724
  "$type": "color",
709
- "$value": "{Color.Text.Inverse}"
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}"
710
846
  }
711
847
  }
712
848
  }