@primer/primitives 8.2.4-rc.b28008e7 → 8.2.4-rc.d08fdd34

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 (64) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +12 -12
  2. package/dist/css/functional/themes/dark-dimmed.css +14 -14
  3. package/dist/css/functional/themes/dark-high-contrast.css +250 -250
  4. package/dist/css/functional/themes/dark-tritanopia.css +14 -14
  5. package/dist/css/functional/themes/dark.css +14 -14
  6. package/dist/css/functional/themes/light-colorblind.css +24 -24
  7. package/dist/css/functional/themes/light-high-contrast.css +146 -146
  8. package/dist/css/functional/themes/light-tritanopia.css +24 -24
  9. package/dist/css/functional/themes/light.css +12 -12
  10. package/dist/docs/functional/themes/dark-colorblind.json +149 -149
  11. package/dist/docs/functional/themes/dark-dimmed.json +160 -158
  12. package/dist/docs/functional/themes/dark-high-contrast.json +464 -454
  13. package/dist/docs/functional/themes/dark-tritanopia.json +153 -153
  14. package/dist/docs/functional/themes/dark.json +160 -158
  15. package/dist/docs/functional/themes/light-colorblind.json +167 -173
  16. package/dist/docs/functional/themes/light-high-contrast.json +362 -358
  17. package/dist/docs/functional/themes/light-tritanopia.json +165 -171
  18. package/dist/docs/functional/themes/light.json +159 -157
  19. package/dist/figma/themes/dark-colorblind.json +198 -198
  20. package/dist/figma/themes/dark-dimmed.json +201 -200
  21. package/dist/figma/themes/dark-high-contrast.json +598 -596
  22. package/dist/figma/themes/dark-tritanopia.json +200 -200
  23. package/dist/figma/themes/dark.json +201 -200
  24. package/dist/figma/themes/light-colorblind.json +217 -218
  25. package/dist/figma/themes/light-high-contrast.json +393 -391
  26. package/dist/figma/themes/light-tritanopia.json +216 -217
  27. package/dist/figma/themes/light.json +139 -138
  28. package/dist/internalCss/dark-colorblind.css +12 -12
  29. package/dist/internalCss/dark-dimmed.css +14 -14
  30. package/dist/internalCss/dark-high-contrast.css +250 -250
  31. package/dist/internalCss/dark-tritanopia.css +14 -14
  32. package/dist/internalCss/dark.css +14 -14
  33. package/dist/internalCss/light-colorblind.css +24 -24
  34. package/dist/internalCss/light-high-contrast.css +146 -146
  35. package/dist/internalCss/light-tritanopia.css +24 -24
  36. package/dist/internalCss/light.css +12 -12
  37. package/dist/styleLint/functional/themes/dark-colorblind.json +149 -149
  38. package/dist/styleLint/functional/themes/dark-dimmed.json +160 -158
  39. package/dist/styleLint/functional/themes/dark-high-contrast.json +464 -454
  40. package/dist/styleLint/functional/themes/dark-tritanopia.json +153 -153
  41. package/dist/styleLint/functional/themes/dark.json +160 -158
  42. package/dist/styleLint/functional/themes/light-colorblind.json +167 -173
  43. package/dist/styleLint/functional/themes/light-high-contrast.json +362 -358
  44. package/dist/styleLint/functional/themes/light-tritanopia.json +165 -171
  45. package/dist/styleLint/functional/themes/light.json +159 -157
  46. package/package.json +27 -26
  47. package/src/formats/cssAdvanced.ts +3 -3
  48. package/src/formats/cssCustomMedia.ts +2 -2
  49. package/src/formats/javascriptCommonJs.ts +2 -2
  50. package/src/formats/javascriptEsm.ts +2 -2
  51. package/src/formats/jsonFigma.ts +2 -2
  52. package/src/formats/jsonNestedPrefixed.ts +2 -2
  53. package/src/formats/jsonOneDimensional.ts +2 -2
  54. package/src/formats/jsonPostCssFallback.ts +2 -2
  55. package/src/formats/typescriptExportDefinition.ts +2 -2
  56. package/src/schemas/designToken.ts +1 -1
  57. package/src/schemas/validTokenType.ts +1 -1
  58. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +512 -2
  59. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +4 -0
  60. package/src/tokens/functional/color/dark/primitives-dark.json5 +66 -65
  61. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +394 -0
  62. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +3 -6
  63. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +3 -6
  64. package/src/tokens/functional/color/light/primitives-light.json5 +65 -64
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -19,18 +19,159 @@
19
19
  $value: '{base.color.neutral.4}',
20
20
  $type: 'color',
21
21
  },
22
+ neutral: {
23
+ $value: '{base.color.neutral.3}',
24
+ $type: 'color',
25
+ },
26
+ accent: {
27
+ $value: '{base.color.blue.3}',
28
+ $type: 'color',
29
+ mix: {
30
+ color: '{base.color.blue.2}',
31
+ weight: 0.05,
32
+ },
33
+ },
34
+ danger: {
35
+ $value: '{base.color.red.3}',
36
+ $type: 'color',
37
+ },
38
+ severe: {
39
+ $value: '{base.color.orange.3}',
40
+ $type: 'color',
41
+ },
42
+ done: {
43
+ $value: '{base.color.purple.3}',
44
+ $type: 'color',
45
+ },
46
+ sponsors: {
47
+ $value: '{base.color.pink.3}',
48
+ $type: 'color',
49
+ },
22
50
  },
23
51
  bgColor: {
52
+ muted: {
53
+ $value: '{base.color.neutral.9}',
54
+ $type: 'color',
55
+ mix: {
56
+ color: '{base.color.neutral.8}',
57
+ weight: 0.5,
58
+ },
59
+ },
24
60
  emphasis: {
25
61
  $value: '{base.color.white}',
26
62
  $type: 'color',
27
63
  },
28
64
  neutral: {
65
+ muted: {
66
+ $value: '{base.color.neutral.5}',
67
+ $type: 'color',
68
+ alpha: 0.1,
69
+ },
29
70
  emphasis: {
30
71
  $value: '{base.color.neutral.4}',
31
72
  $type: 'color',
32
73
  },
33
74
  },
75
+ accent: {
76
+ muted: {
77
+ $value: '{base.color.blue.5}',
78
+ $type: 'color',
79
+ alpha: 0.1,
80
+ },
81
+ emphasis: {
82
+ $value: '{base.color.blue.4}',
83
+ $type: 'color',
84
+ },
85
+ },
86
+ success: {
87
+ muted: {
88
+ $value: '{base.color.green.4}',
89
+ $type: 'color',
90
+ alpha: 0.14,
91
+ },
92
+ emphasis: {
93
+ $value: '{base.color.green.4}',
94
+ $type: 'color',
95
+ },
96
+ },
97
+ open: {
98
+ muted: {
99
+ $value: '{bgColor.success.muted}',
100
+ $type: 'color',
101
+ alpha: 0.14,
102
+ },
103
+ },
104
+ danger: {
105
+ muted: {
106
+ $value: '{base.color.red.4}',
107
+ $type: 'color',
108
+ alpha: 0.09,
109
+ },
110
+ emphasis: {
111
+ $value: '{base.color.red.4}',
112
+ $type: 'color',
113
+ },
114
+ },
115
+ closed: {
116
+ muted: {
117
+ $value: '{bgColor.danger.muted}',
118
+ $type: 'color',
119
+ alpha: 0.09,
120
+ },
121
+ },
122
+ severe: {
123
+ muted: {
124
+ $value: '{base.color.orange.4}',
125
+ $type: 'color',
126
+ alpha: 0.088,
127
+ },
128
+ emphasis: {
129
+ $value: '{base.color.orange.4}',
130
+ $type: 'color',
131
+ },
132
+ },
133
+ attention: {
134
+ emphasis: {
135
+ $value: '{base.color.yellow.4}',
136
+ $type: 'color',
137
+ },
138
+ },
139
+ done: {
140
+ muted: {
141
+ $value: '{base.color.purple.5}',
142
+ $type: 'color',
143
+ alpha: 0.09,
144
+ },
145
+ emphasis: {
146
+ $value: '{base.color.purple.4}',
147
+ $type: 'color',
148
+ },
149
+ },
150
+ upsell: {
151
+ muted: {
152
+ $value: '{bgColor.done.muted}',
153
+ $type: 'color',
154
+ alpha: 0.09,
155
+ },
156
+ },
157
+ upsell: {
158
+ muted: {
159
+ $value: '{bgColor.done.muted}',
160
+ $type: 'color',
161
+ alpha: 0.09,
162
+ },
163
+ },
164
+ sponsors: {
165
+ muted: {
166
+ $value: '{base.color.pink.5}',
167
+ $type: 'color',
168
+ alpha: 0.09,
169
+ },
170
+ emphasis: {
171
+ $value: '{base.color.pink.4}',
172
+ $type: 'color',
173
+ },
174
+ },
34
175
  },
35
176
  borderColor: {
36
177
  default: {
@@ -47,6 +188,10 @@
47
188
  $type: 'color',
48
189
  alpha: 1,
49
190
  },
191
+ emphasis: {
192
+ $value: '{base.color.neutral.4}',
193
+ $type: 'color',
194
+ },
50
195
  neutral: {
51
196
  muted: {
52
197
  $value: '{base.color.neutral.4}',
@@ -72,6 +217,13 @@
72
217
  alpha: 1,
73
218
  },
74
219
  },
220
+ open: {
221
+ muted: {
222
+ $value: '{borderColor.success.muted}',
223
+ $type: 'color',
224
+ alpha: 1,
225
+ },
226
+ },
75
227
  attention: {
76
228
  muted: {
77
229
  $value: '{base.color.yellow.4}',
@@ -123,10 +275,24 @@
123
275
  },
124
276
  },
125
277
  control: {
278
+ fgColor: {
279
+ placeholder: {
280
+ $value: '{base.color.neutral.2}',
281
+ $type: 'color',
282
+ mix: {
283
+ color: '{base.color.neutral.1}',
284
+ weight: 0.5,
285
+ },
286
+ },
287
+ },
126
288
  bgColor: {
127
- selected: {
128
- $value: '{base.color.neutral.6}',
289
+ active: {
290
+ $value: '{base.color.neutral.7}',
129
291
  $type: 'color',
292
+ mix: {
293
+ color: '{base.color.neutral.8}',
294
+ weight: 0.2,
295
+ },
130
296
  },
131
297
  },
132
298
  borderColor: {
@@ -392,4 +558,348 @@
392
558
  },
393
559
  },
394
560
  },
561
+ display: {
562
+ blue: {
563
+ bgColor: {
564
+ emphasis: {
565
+ $value: '{base.display.color.blue.6}',
566
+ $type: 'color',
567
+ },
568
+ },
569
+ fgColor: {
570
+ $value: '{base.display.color.blue.8}',
571
+ $type: 'color',
572
+ },
573
+ borderColor: {
574
+ emphasis: {
575
+ $value: '{base.display.color.blue.6}',
576
+ $type: 'color',
577
+ },
578
+ },
579
+ },
580
+ indigo: {
581
+ bgColor: {
582
+ emphasis: {
583
+ $value: '{base.display.color.indigo.6}',
584
+ $type: 'color',
585
+ },
586
+ },
587
+ fgColor: {
588
+ $value: '{base.display.color.indigo.8}',
589
+ $type: 'color',
590
+ },
591
+ borderColor: {
592
+ emphasis: {
593
+ $value: '{base.display.color.indigo.6}',
594
+ $type: 'color',
595
+ },
596
+ },
597
+ },
598
+ gray: {
599
+ bgColor: {
600
+ emphasis: {
601
+ $value: '{base.display.color.gray.6}',
602
+ $type: 'color',
603
+ },
604
+ },
605
+ fgColor: {
606
+ $value: '{base.display.color.gray.8}',
607
+ $type: 'color',
608
+ },
609
+ borderColor: {
610
+ emphasis: {
611
+ $value: '{base.display.color.gray.6}',
612
+ $type: 'color',
613
+ },
614
+ },
615
+ },
616
+ cyan: {
617
+ bgColor: {
618
+ emphasis: {
619
+ $value: '{base.display.color.cyan.6}',
620
+ $type: 'color',
621
+ },
622
+ },
623
+ fgColor: {
624
+ $value: '{base.display.color.cyan.8}',
625
+ $type: 'color',
626
+ },
627
+ borderColor: {
628
+ emphasis: {
629
+ $value: '{base.display.color.cyan.6}',
630
+ $type: 'color',
631
+ },
632
+ },
633
+ },
634
+ teal: {
635
+ bgColor: {
636
+ emphasis: {
637
+ $value: '{base.display.color.teal.6}',
638
+ $type: 'color',
639
+ },
640
+ },
641
+ fgColor: {
642
+ $value: '{base.display.color.teal.8}',
643
+ $type: 'color',
644
+ },
645
+ borderColor: {
646
+ emphasis: {
647
+ $value: '{base.display.color.teal.6}',
648
+ $type: 'color',
649
+ },
650
+ },
651
+ },
652
+ pine: {
653
+ bgColor: {
654
+ emphasis: {
655
+ $value: '{base.display.color.pine.6}',
656
+ $type: 'color',
657
+ },
658
+ },
659
+ fgColor: {
660
+ $value: '{base.display.color.pine.8}',
661
+ $type: 'color',
662
+ },
663
+ borderColor: {
664
+ emphasis: {
665
+ $value: '{base.display.color.pine.6}',
666
+ $type: 'color',
667
+ },
668
+ },
669
+ },
670
+ green: {
671
+ bgColor: {
672
+ emphasis: {
673
+ $value: '{base.display.color.green.6}',
674
+ $type: 'color',
675
+ },
676
+ },
677
+ fgColor: {
678
+ $value: '{base.display.color.green.8}',
679
+ $type: 'color',
680
+ },
681
+ borderColor: {
682
+ emphasis: {
683
+ $value: '{base.display.color.green.6}',
684
+ $type: 'color',
685
+ },
686
+ },
687
+ },
688
+ lime: {
689
+ bgColor: {
690
+ emphasis: {
691
+ $value: '{base.display.color.lime.6}',
692
+ $type: 'color',
693
+ },
694
+ },
695
+ fgColor: {
696
+ $value: '{base.display.color.lime.8}',
697
+ $type: 'color',
698
+ },
699
+ borderColor: {
700
+ emphasis: {
701
+ $value: '{base.display.color.lime.6}',
702
+ $type: 'color',
703
+ },
704
+ },
705
+ },
706
+ olive: {
707
+ bgColor: {
708
+ emphasis: {
709
+ $value: '{base.display.color.olive.6}',
710
+ $type: 'color',
711
+ },
712
+ },
713
+ fgColor: {
714
+ $value: '{base.display.color.olive.8}',
715
+ $type: 'color',
716
+ },
717
+ borderColor: {
718
+ emphasis: {
719
+ $value: '{base.display.color.olive.6}',
720
+ $type: 'color',
721
+ },
722
+ },
723
+ },
724
+ lemon: {
725
+ bgColor: {
726
+ emphasis: {
727
+ $value: '{base.display.color.lemon.6}',
728
+ $type: 'color',
729
+ },
730
+ },
731
+ fgColor: {
732
+ $value: '{base.display.color.lemon.8}',
733
+ $type: 'color',
734
+ },
735
+ borderColor: {
736
+ emphasis: {
737
+ $value: '{base.display.color.lemon.6}',
738
+ $type: 'color',
739
+ },
740
+ },
741
+ },
742
+ yellow: {
743
+ bgColor: {
744
+ emphasis: {
745
+ $value: '{base.display.color.yellow.6}',
746
+ $type: 'color',
747
+ },
748
+ },
749
+ fgColor: {
750
+ $value: '{base.display.color.yellow.8}',
751
+ $type: 'color',
752
+ },
753
+ borderColor: {
754
+ emphasis: {
755
+ $value: '{base.display.color.yellow.6}',
756
+ $type: 'color',
757
+ },
758
+ },
759
+ },
760
+ orange: {
761
+ bgColor: {
762
+ emphasis: {
763
+ $value: '{base.display.color.orange.6}',
764
+ $type: 'color',
765
+ },
766
+ },
767
+ fgColor: {
768
+ $value: '{base.display.color.orange.8}',
769
+ $type: 'color',
770
+ },
771
+ borderColor: {
772
+ emphasis: {
773
+ $value: '{base.display.color.orange.6}',
774
+ $type: 'color',
775
+ },
776
+ },
777
+ },
778
+ red: {
779
+ bgColor: {
780
+ emphasis: {
781
+ $value: '{base.display.color.red.6}',
782
+ $type: 'color',
783
+ },
784
+ },
785
+ fgColor: {
786
+ $value: '{base.display.color.red.8}',
787
+ $type: 'color',
788
+ },
789
+ borderColor: {
790
+ emphasis: {
791
+ $value: '{base.display.color.red.6}',
792
+ $type: 'color',
793
+ },
794
+ },
795
+ },
796
+ coral: {
797
+ bgColor: {
798
+ emphasis: {
799
+ $value: '{base.display.color.coral.6}',
800
+ $type: 'color',
801
+ },
802
+ },
803
+ fgColor: {
804
+ $value: '{base.display.color.coral.8}',
805
+ $type: 'color',
806
+ },
807
+ borderColor: {
808
+ emphasis: {
809
+ $value: '{base.display.color.coral.6}',
810
+ $type: 'color',
811
+ },
812
+ },
813
+ },
814
+ pink: {
815
+ bgColor: {
816
+ emphasis: {
817
+ $value: '{base.display.color.pink.6}',
818
+ $type: 'color',
819
+ },
820
+ },
821
+ fgColor: {
822
+ $value: '{base.display.color.pink.8}',
823
+ $type: 'color',
824
+ },
825
+ borderColor: {
826
+ emphasis: {
827
+ $value: '{base.display.color.pink.6}',
828
+ $type: 'color',
829
+ },
830
+ },
831
+ },
832
+ plum: {
833
+ bgColor: {
834
+ emphasis: {
835
+ $value: '{base.display.color.plum.6}',
836
+ $type: 'color',
837
+ },
838
+ },
839
+ fgColor: {
840
+ $value: '{base.display.color.plum.8}',
841
+ $type: 'color',
842
+ },
843
+ borderColor: {
844
+ emphasis: {
845
+ $value: '{base.display.color.plum.6}',
846
+ $type: 'color',
847
+ },
848
+ },
849
+ },
850
+ purple: {
851
+ bgColor: {
852
+ emphasis: {
853
+ $value: '{base.display.color.purple.6}',
854
+ $type: 'color',
855
+ },
856
+ },
857
+ fgColor: {
858
+ $value: '{base.display.color.purple.8}',
859
+ $type: 'color',
860
+ },
861
+ borderColor: {
862
+ emphasis: {
863
+ $value: '{base.display.color.purple.6}',
864
+ $type: 'color',
865
+ },
866
+ },
867
+ },
868
+ brown: {
869
+ bgColor: {
870
+ emphasis: {
871
+ $value: '{base.display.color.brown.6}',
872
+ $type: 'color',
873
+ },
874
+ },
875
+ fgColor: {
876
+ $value: '{base.display.color.brown.8}',
877
+ $type: 'color',
878
+ },
879
+ borderColor: {
880
+ emphasis: {
881
+ $value: '{base.display.color.brown.6}',
882
+ $type: 'color',
883
+ },
884
+ },
885
+ },
886
+ auburn: {
887
+ bgColor: {
888
+ emphasis: {
889
+ $value: '{base.display.color.auburn.6}',
890
+ $type: 'color',
891
+ },
892
+ },
893
+ fgColor: {
894
+ $value: '{base.display.color.auburn.8}',
895
+ $type: 'color',
896
+ },
897
+ borderColor: {
898
+ emphasis: {
899
+ $value: '{base.display.color.auburn.6}',
900
+ $type: 'color',
901
+ },
902
+ },
903
+ },
904
+ },
395
905
  }
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 CHANGED
@@ -27,6 +27,7 @@
27
27
  muted: {
28
28
  $value: '{base.color.blue.4}',
29
29
  $type: 'color',
30
+ alpha: 0.15,
30
31
  },
31
32
  emphasis: {
32
33
  $value: '{base.color.blue.5}',
@@ -37,6 +38,7 @@
37
38
  muted: {
38
39
  $value: '{base.color.red.4}',
39
40
  $type: 'color',
41
+ alpha: 0.1,
40
42
  },
41
43
  emphasis: {
42
44
  $value: '{base.color.red.5}',
@@ -47,6 +49,7 @@
47
49
  muted: {
48
50
  $value: '{base.color.red.4}',
49
51
  $type: 'color',
52
+ alpha: 0.15,
50
53
  },
51
54
  emphasis: {
52
55
  $value: '{base.color.red.5}',
@@ -57,6 +60,7 @@
57
60
  muted: {
58
61
  $value: '{base.color.neutral.4}',
59
62
  $type: 'color',
63
+ alpha: 0.1,
60
64
  },
61
65
  emphasis: {
62
66
  $value: '{base.color.neutral.5}',