@primer/primitives 10.3.0 → 10.3.1

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 (63) hide show
  1. package/dist/build/schemas/colorToken.js +1 -1
  2. package/dist/css/functional/themes/dark-colorblind.css +14 -14
  3. package/dist/css/functional/themes/dark-high-contrast.css +4 -4
  4. package/dist/css/functional/themes/light-colorblind.css +16 -16
  5. package/dist/css/functional/themes/light-high-contrast.css +2 -2
  6. package/dist/css/functional/themes/light.css +4 -4
  7. package/dist/docs/functional/themes/dark-colorblind.json +963 -139
  8. package/dist/docs/functional/themes/dark-dimmed.json +819 -85
  9. package/dist/docs/functional/themes/dark-high-contrast.json +1039 -77
  10. package/dist/docs/functional/themes/dark-tritanopia.json +885 -55
  11. package/dist/docs/functional/themes/dark.json +723 -57
  12. package/dist/docs/functional/themes/light-colorblind.json +964 -136
  13. package/dist/docs/functional/themes/light-high-contrast.json +1069 -67
  14. package/dist/docs/functional/themes/light-tritanopia.json +880 -50
  15. package/dist/docs/functional/themes/light.json +716 -50
  16. package/dist/figma/figma.json +133 -0
  17. package/dist/figma/shadows/dark-colorblind.json +1152 -0
  18. package/dist/figma/shadows/dark-dimmed.json +1152 -0
  19. package/dist/figma/shadows/dark-high-contrast.json +1152 -0
  20. package/dist/figma/shadows/dark-tritanopia.json +1152 -0
  21. package/dist/figma/shadows/dark.json +1152 -0
  22. package/dist/figma/shadows/light-colorblind.json +1052 -0
  23. package/dist/figma/shadows/light-high-contrast.json +1052 -0
  24. package/dist/figma/shadows/light-tritanopia.json +1052 -0
  25. package/dist/figma/shadows/light.json +1052 -0
  26. package/dist/figma/themes/dark-colorblind.json +2886 -2733
  27. package/dist/figma/themes/dark-dimmed.json +2778 -2708
  28. package/dist/figma/themes/dark-high-contrast.json +697 -394
  29. package/dist/figma/themes/dark-tritanopia.json +2886 -2731
  30. package/dist/figma/themes/dark.json +3018 -3021
  31. package/dist/figma/themes/light-colorblind.json +2913 -2759
  32. package/dist/figma/themes/light-high-contrast.json +591 -250
  33. package/dist/figma/themes/light-tritanopia.json +2895 -2740
  34. package/dist/figma/themes/light.json +5496 -5499
  35. package/dist/internalCss/dark-colorblind.css +14 -14
  36. package/dist/internalCss/dark-high-contrast.css +4 -4
  37. package/dist/internalCss/light-colorblind.css +16 -16
  38. package/dist/internalCss/light-high-contrast.css +2 -2
  39. package/dist/internalCss/light.css +4 -4
  40. package/dist/styleLint/functional/themes/dark-colorblind.json +963 -139
  41. package/dist/styleLint/functional/themes/dark-dimmed.json +819 -85
  42. package/dist/styleLint/functional/themes/dark-high-contrast.json +1039 -77
  43. package/dist/styleLint/functional/themes/dark-tritanopia.json +885 -55
  44. package/dist/styleLint/functional/themes/dark.json +723 -57
  45. package/dist/styleLint/functional/themes/light-colorblind.json +979 -151
  46. package/dist/styleLint/functional/themes/light-high-contrast.json +1069 -67
  47. package/dist/styleLint/functional/themes/light-tritanopia.json +880 -50
  48. package/dist/styleLint/functional/themes/light.json +716 -50
  49. package/package.json +1 -1
  50. package/src/tokens/component/avatar.json5 +42 -0
  51. package/src/tokens/component/avatarStack.json5 +30 -0
  52. package/src/tokens/functional/color/borderColor.json5 +616 -0
  53. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -23
  54. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -102
  55. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +8 -55
  56. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -46
  57. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -53
  58. package/src/tokens/functional/color/dark/primitives-dark.json5 +0 -438
  59. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -110
  60. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +2 -48
  61. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -46
  62. package/src/tokens/functional/color/light/patterns-light.json5 +0 -52
  63. package/src/tokens/functional/color/light/primitives-light.json5 +0 -411
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -754,442 +754,4 @@
754
754
  },
755
755
  },
756
756
  },
757
- borderColor: {
758
- default: {
759
- $value: '{base.color.neutral.7}',
760
- $type: 'color',
761
- $extensions: {
762
- 'org.primer.figma': {
763
- collection: 'mode',
764
-
765
- group: 'semantic',
766
- scopes: ['borderColor'],
767
- codeSyntax: {
768
- web: 'var(--borderColor-default) /* utility class: .color-border-default */',
769
- },
770
- },
771
- },
772
- },
773
- muted: {
774
- $value: '{borderColor.default}',
775
- $type: 'color',
776
- $extensions: {
777
- 'org.primer.figma': {
778
- collection: 'mode',
779
-
780
- group: 'semantic',
781
- scopes: ['borderColor'],
782
- codeSyntax: {
783
- web: 'var(--borderColor-muted) /* utility class: .color-border-muted */',
784
- },
785
- },
786
- },
787
- alpha: 0.7,
788
- },
789
- emphasis: {
790
- $value: '{base.color.neutral.8}',
791
- $type: 'color',
792
- $extensions: {
793
- 'org.primer.figma': {
794
- collection: 'mode',
795
-
796
- group: 'semantic',
797
- scopes: ['borderColor'],
798
- },
799
- },
800
- },
801
- disabled: {
802
- $value: '{base.color.neutral.8}',
803
- $type: 'color',
804
- $extensions: {
805
- 'org.primer.figma': {
806
- collection: 'mode',
807
-
808
- group: 'semantic',
809
- scopes: ['borderColor'],
810
- },
811
- },
812
- alpha: 0.1,
813
- },
814
- transparent: {
815
- $value: '{base.color.transparent}',
816
- $type: 'color',
817
- $extensions: {
818
- 'org.primer.figma': {
819
- collection: 'mode',
820
-
821
- group: 'semantic',
822
- scopes: ['borderColor'],
823
- },
824
- },
825
- },
826
- translucent: {
827
- $value: '{base.color.neutral.13}',
828
- $type: 'color',
829
- $extensions: {
830
- 'org.primer.figma': {
831
- collection: 'mode',
832
- group: 'component (internal)',
833
- scopes: ['borderColor'],
834
- },
835
- },
836
- alpha: 0.15,
837
- },
838
- neutral: {
839
- muted: {
840
- $value: '{borderColor.muted}',
841
- $type: 'color',
842
- $extensions: {
843
- 'org.primer.figma': {
844
- collection: 'mode',
845
-
846
- group: 'semantic',
847
- scopes: ['borderColor'],
848
- },
849
- },
850
- },
851
- emphasis: {
852
- $value: '{borderColor.emphasis}',
853
- $type: 'color',
854
- $extensions: {
855
- 'org.primer.figma': {
856
- collection: 'mode',
857
-
858
- group: 'semantic',
859
- scopes: ['borderColor'],
860
- },
861
- },
862
- },
863
- },
864
- accent: {
865
- muted: {
866
- $value: '{base.color.blue.4}',
867
- $type: 'color',
868
- $extensions: {
869
- 'org.primer.figma': {
870
- collection: 'mode',
871
-
872
- group: 'semantic',
873
- scopes: ['borderColor'],
874
- codeSyntax: {
875
- web: 'var(--borderColor-accent-muted) /* utility class: .color-border-accent */',
876
- },
877
- },
878
- },
879
- alpha: 0.4,
880
- },
881
- emphasis: {
882
- $value: '{base.color.blue.5}',
883
- $type: 'color',
884
- $extensions: {
885
- 'org.primer.figma': {
886
- collection: 'mode',
887
-
888
- group: 'semantic',
889
- scopes: ['borderColor'],
890
- codeSyntax: {
891
- web: 'var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */',
892
- },
893
- },
894
- },
895
- },
896
- },
897
- success: {
898
- muted: {
899
- $value: '{base.color.green.4}',
900
- $type: 'color',
901
- $extensions: {
902
- 'org.primer.figma': {
903
- collection: 'mode',
904
-
905
- group: 'semantic',
906
- scopes: ['borderColor'],
907
- codeSyntax: {
908
- web: 'var(--borderColor-success-muted) /* utility class: .color-border-success */',
909
- },
910
- },
911
- },
912
- alpha: 0.4,
913
- },
914
- emphasis: {
915
- $value: '{base.color.green.5}',
916
- $type: 'color',
917
- $extensions: {
918
- 'org.primer.figma': {
919
- collection: 'mode',
920
-
921
- group: 'semantic',
922
- scopes: ['borderColor'],
923
- codeSyntax: {
924
- web: 'var(--borderColor-success-emphasis) /* utility class: .color-border-success-emphasis */',
925
- },
926
- },
927
- },
928
- },
929
- },
930
- open: {
931
- muted: {
932
- $value: '{borderColor.success.muted}',
933
- $type: 'color',
934
- $extensions: {
935
- 'org.primer.figma': {
936
- collection: 'mode',
937
-
938
- group: 'semantic',
939
- scopes: ['borderColor'],
940
- codeSyntax: {
941
- web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
942
- },
943
- },
944
- },
945
- alpha: 0.4,
946
- },
947
- emphasis: {
948
- $value: '{borderColor.success.emphasis}',
949
- $type: 'color',
950
- $extensions: {
951
- 'org.primer.figma': {
952
- collection: 'mode',
953
-
954
- group: 'semantic',
955
- scopes: ['borderColor'],
956
- codeSyntax: {
957
- web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
958
- },
959
- },
960
- },
961
- },
962
- },
963
- attention: {
964
- muted: {
965
- $value: '{base.color.yellow.4}',
966
- $type: 'color',
967
- $extensions: {
968
- 'org.primer.figma': {
969
- collection: 'mode',
970
-
971
- group: 'semantic',
972
- scopes: ['borderColor'],
973
- codeSyntax: {
974
- web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
975
- },
976
- },
977
- },
978
- alpha: 0.4,
979
- },
980
- emphasis: {
981
- $value: '{base.color.yellow.5}',
982
- $type: 'color',
983
- $extensions: {
984
- 'org.primer.figma': {
985
- collection: 'mode',
986
-
987
- group: 'semantic',
988
- scopes: ['borderColor'],
989
- codeSyntax: {
990
- web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
991
- },
992
- },
993
- },
994
- },
995
- },
996
- severe: {
997
- muted: {
998
- $value: '{base.color.orange.4}',
999
- $type: 'color',
1000
- $extensions: {
1001
- 'org.primer.figma': {
1002
- collection: 'mode',
1003
-
1004
- group: 'semantic',
1005
- scopes: ['borderColor'],
1006
- codeSyntax: {
1007
- web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
1008
- },
1009
- },
1010
- },
1011
- alpha: 0.4,
1012
- },
1013
- emphasis: {
1014
- $value: '{base.color.orange.5}',
1015
- $type: 'color',
1016
- $extensions: {
1017
- 'org.primer.figma': {
1018
- collection: 'mode',
1019
-
1020
- group: 'semantic',
1021
- scopes: ['borderColor'],
1022
- codeSyntax: {
1023
- web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1024
- },
1025
- },
1026
- },
1027
- },
1028
- },
1029
- danger: {
1030
- muted: {
1031
- $value: '{base.color.red.4}',
1032
- $type: 'color',
1033
- $extensions: {
1034
- 'org.primer.figma': {
1035
- collection: 'mode',
1036
-
1037
- group: 'semantic',
1038
- scopes: ['borderColor'],
1039
- codeSyntax: {
1040
- web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1041
- },
1042
- },
1043
- },
1044
- alpha: 0.4,
1045
- },
1046
- emphasis: {
1047
- $value: '{base.color.red.5}',
1048
- $type: 'color',
1049
- $extensions: {
1050
- 'org.primer.figma': {
1051
- collection: 'mode',
1052
-
1053
- group: 'semantic',
1054
- scopes: ['borderColor'],
1055
- codeSyntax: {
1056
- web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1057
- },
1058
- },
1059
- },
1060
- },
1061
- },
1062
- closed: {
1063
- muted: {
1064
- $value: '{borderColor.danger.muted}',
1065
- $type: 'color',
1066
- $extensions: {
1067
- 'org.primer.figma': {
1068
- collection: 'mode',
1069
-
1070
- group: 'semantic',
1071
- scopes: ['borderColor'],
1072
- codeSyntax: {
1073
- web: 'var(--borderColor-closed-muted) /* utility class: .color-border-closed */',
1074
- },
1075
- },
1076
- },
1077
- alpha: 0.4,
1078
- },
1079
- emphasis: {
1080
- $value: '{borderColor.danger.emphasis}',
1081
- $type: 'color',
1082
- $extensions: {
1083
- 'org.primer.figma': {
1084
- collection: 'mode',
1085
-
1086
- group: 'semantic',
1087
- scopes: ['borderColor'],
1088
- codeSyntax: {
1089
- web: 'var(--borderColor-closed-emphasis) /* utility class: .color-border-closed-emphasis */',
1090
- },
1091
- },
1092
- },
1093
- },
1094
- },
1095
- done: {
1096
- muted: {
1097
- $value: '{base.color.purple.4}',
1098
- $type: 'color',
1099
- $extensions: {
1100
- 'org.primer.figma': {
1101
- collection: 'mode',
1102
-
1103
- group: 'semantic',
1104
- scopes: ['borderColor'],
1105
- codeSyntax: {
1106
- web: 'var(--borderColor-done-muted) /* utility class: .color-border-done */',
1107
- },
1108
- },
1109
- },
1110
- alpha: 0.4,
1111
- },
1112
- emphasis: {
1113
- $value: '{base.color.purple.5}',
1114
- $type: 'color',
1115
- $extensions: {
1116
- 'org.primer.figma': {
1117
- collection: 'mode',
1118
-
1119
- group: 'semantic',
1120
- scopes: ['borderColor'],
1121
- codeSyntax: {
1122
- web: 'var(--borderColor-done-emphasis) /* utility class: .color-border-done-emphasis */',
1123
- },
1124
- },
1125
- },
1126
- },
1127
- },
1128
- upsell: {
1129
- muted: {
1130
- $value: '{borderColor.done.muted}',
1131
- $type: 'color',
1132
- $extensions: {
1133
- 'org.primer.figma': {
1134
- collection: 'mode',
1135
-
1136
- group: 'semantic',
1137
- scopes: ['borderColor'],
1138
- codeSyntax: {
1139
- web: 'var(--borderColor-upsell-muted)',
1140
- },
1141
- },
1142
- },
1143
- alpha: 0.4,
1144
- },
1145
- emphasis: {
1146
- $value: '{borderColor.done.emphasis}',
1147
- $type: 'color',
1148
- $extensions: {
1149
- 'org.primer.figma': {
1150
- collection: 'mode',
1151
-
1152
- group: 'semantic',
1153
- scopes: ['borderColor'],
1154
- codeSyntax: {
1155
- web: 'var(--borderColor-upsell-emphasis',
1156
- },
1157
- },
1158
- },
1159
- },
1160
- },
1161
- sponsors: {
1162
- muted: {
1163
- $value: '{base.color.pink.4}',
1164
- $type: 'color',
1165
- $extensions: {
1166
- 'org.primer.figma': {
1167
- collection: 'mode',
1168
-
1169
- group: 'semantic',
1170
- scopes: ['borderColor'],
1171
- codeSyntax: {
1172
- web: 'var(--borderColor-sponsors-muted) /* utility class: .color-border-sponsors */',
1173
- },
1174
- },
1175
- },
1176
- alpha: 0.4,
1177
- },
1178
- emphasis: {
1179
- $value: '{base.color.pink.5}',
1180
- $type: 'color',
1181
- $extensions: {
1182
- 'org.primer.figma': {
1183
- collection: 'mode',
1184
-
1185
- group: 'semantic',
1186
- scopes: ['borderColor'],
1187
- codeSyntax: {
1188
- web: 'var(--borderColor-sponsors-emphasis) /* utility class: .color-border-sponsors-emphasis */',
1189
- },
1190
- },
1191
- },
1192
- },
1193
- },
1194
- },
1195
757
  }
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 CHANGED
@@ -87,117 +87,7 @@
87
87
  },
88
88
  },
89
89
  },
90
- borderColor: {
91
- default: {
92
- $value: '{base.color.neutral.10}',
93
- $type: 'color',
94
- },
95
- muted: {
96
- $value: '{borderColor.default}',
97
- $type: 'color',
98
- alpha: 1,
99
- },
100
- emphasis: {
101
- $value: '{borderColor.default}',
102
- $type: 'color',
103
- },
104
- disabled: {
105
- $value: '{base.color.neutral.9}',
106
- $type: 'color',
107
- alpha: 0.12,
108
- },
109
- translucent: {
110
- $value: '{base.color.neutral.9}',
111
- $type: 'color',
112
- alpha: 1,
113
- },
114
- accent: {
115
- muted: {
116
- $value: '{base.color.blue.3}',
117
- $type: 'color',
118
- alpha: 1,
119
- },
120
- },
121
- success: {
122
- muted: {
123
- $value: '{base.color.green.3}',
124
- $type: 'color',
125
- alpha: 1,
126
- },
127
- emphasis: {
128
- $value: '{base.color.green.5}',
129
- $type: 'color',
130
- },
131
- },
132
- open: {
133
- muted: {
134
- $value: '{borderColor.success.muted}',
135
- $type: 'color',
136
- alpha: 1,
137
- },
138
- },
139
- attention: {
140
- muted: {
141
- $value: '{base.color.yellow.3}',
142
- $type: 'color',
143
- alpha: 1,
144
- },
145
- emphasis: {
146
- $value: '{base.color.yellow.5}',
147
- $type: 'color',
148
- },
149
- },
150
- severe: {
151
- muted: {
152
- $value: '{base.color.orange.3}',
153
- $type: 'color',
154
- alpha: 1,
155
- },
156
- },
157
- danger: {
158
- muted: {
159
- $value: '{base.color.red.3}',
160
- $type: 'color',
161
- alpha: 1,
162
- },
163
- },
164
- done: {
165
- muted: {
166
- $value: '{base.color.purple.3}',
167
- $type: 'color',
168
- alpha: 1,
169
- },
170
- },
171
- sponsors: {
172
- muted: {
173
- $value: '{base.color.pink.3}',
174
- $type: 'color',
175
- alpha: 1,
176
- },
177
- },
178
- upsell: {
179
- muted: {
180
- $value: '{borderColor.done.muted}',
181
- $type: 'color',
182
- alpha: 1,
183
- },
184
- },
185
- closed: {
186
- muted: {
187
- $value: '{borderColor.danger.muted}',
188
- $type: 'color',
189
- alpha: 1,
190
- },
191
- },
192
- },
193
90
  // patterns
194
- avatar: {
195
- borderColor: {
196
- $value: '{base.color.neutral.13}',
197
- $type: 'color',
198
- alpha: 0.9,
199
- },
200
- },
201
91
  counter: {
202
92
  borderColor: {
203
93
  $value: '{borderColor.default}',
package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 CHANGED
@@ -45,11 +45,11 @@
45
45
  },
46
46
  open: {
47
47
  muted: {
48
- $value: '{base.color.blue.0}',
48
+ $value: '{bgColor.success.muted}',
49
49
  $type: 'color',
50
50
  },
51
51
  emphasis: {
52
- $value: '{base.color.blue.5}',
52
+ $value: '{bgColor.success.emphasis}',
53
53
  $type: 'color',
54
54
  },
55
55
  },
@@ -74,52 +74,6 @@
74
74
  },
75
75
  },
76
76
  },
77
- borderColor: {
78
- open: {
79
- muted: {
80
- $value: '{base.color.blue.3}',
81
- $type: 'color',
82
- alpha: 0.4,
83
- },
84
- emphasis: {
85
- $value: '{base.color.blue.4}',
86
- $type: 'color',
87
- },
88
- },
89
- closed: {
90
- muted: {
91
- $value: '{borderColor.default}',
92
- $type: 'color',
93
- alpha: 0.4,
94
- },
95
- emphasis: {
96
- $value: '{borderColor.emphasis}',
97
- $type: 'color',
98
- },
99
- },
100
- success: {
101
- muted: {
102
- $value: '{base.color.blue.3}',
103
- $type: 'color',
104
- alpha: 0.4,
105
- },
106
- emphasis: {
107
- $value: '{base.color.blue.5}',
108
- $type: 'color',
109
- },
110
- },
111
- danger: {
112
- muted: {
113
- $value: '{base.color.orange.3}',
114
- $type: 'color',
115
- alpha: 0.4,
116
- },
117
- emphasis: {
118
- $value: '{base.color.orange.5}',
119
- $type: 'color',
120
- },
121
- },
122
- },
123
77
  codeMirror: {
124
78
  syntax: {
125
79
  fgColor: {
package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 CHANGED
@@ -64,52 +64,6 @@
64
64
  },
65
65
  },
66
66
  },
67
- borderColor: {
68
- success: {
69
- muted: {
70
- $value: '{base.color.blue.3}',
71
- $type: 'color',
72
- alpha: 0.4,
73
- },
74
- emphasis: {
75
- $value: '{base.color.blue.5}',
76
- $type: 'color',
77
- },
78
- },
79
- severe: {
80
- muted: {
81
- $value: '{base.color.red.3}',
82
- $type: 'color',
83
- alpha: 0.4,
84
- },
85
- emphasis: {
86
- $value: '{base.color.red.5}',
87
- $type: 'color',
88
- },
89
- },
90
- open: {
91
- muted: {
92
- $value: '{base.color.red.3}',
93
- $type: 'color',
94
- alpha: 0.4,
95
- },
96
- emphasis: {
97
- $value: '{base.color.red.5}',
98
- $type: 'color',
99
- },
100
- },
101
- closed: {
102
- muted: {
103
- $value: '{borderColor.default}',
104
- $type: 'color',
105
- alpha: 0.4,
106
- },
107
- emphasis: {
108
- $value: '{borderColor.emphasis}',
109
- $type: 'color',
110
- },
111
- },
112
- },
113
67
  codeMirror: {
114
68
  syntax: {
115
69
  fgColor: {