@primer/primitives 8.2.3 → 8.2.4-rc.87a5d4aa

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 (44) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +38 -38
  2. package/dist/css/functional/themes/dark-dimmed.css +38 -38
  3. package/dist/css/functional/themes/dark-high-contrast.css +38 -38
  4. package/dist/css/functional/themes/dark-tritanopia.css +38 -38
  5. package/dist/css/functional/themes/dark.css +38 -38
  6. package/dist/docs/functional/themes/dark-colorblind.json +61 -61
  7. package/dist/docs/functional/themes/dark-dimmed.json +62 -62
  8. package/dist/docs/functional/themes/dark-high-contrast.json +61 -61
  9. package/dist/docs/functional/themes/dark-tritanopia.json +61 -61
  10. package/dist/docs/functional/themes/dark.json +62 -62
  11. package/dist/docs/functional/themes/light-colorblind.json +25 -25
  12. package/dist/docs/functional/themes/light-high-contrast.json +25 -25
  13. package/dist/docs/functional/themes/light-tritanopia.json +25 -25
  14. package/dist/docs/functional/themes/light.json +27 -27
  15. package/dist/figma/themes/dark-colorblind.json +76 -76
  16. package/dist/figma/themes/dark-dimmed.json +76 -76
  17. package/dist/figma/themes/dark-high-contrast.json +76 -76
  18. package/dist/figma/themes/dark-tritanopia.json +76 -76
  19. package/dist/figma/themes/dark.json +76 -76
  20. package/dist/internalCss/dark-colorblind.css +38 -38
  21. package/dist/internalCss/dark-dimmed.css +38 -38
  22. package/dist/internalCss/dark-high-contrast.css +38 -38
  23. package/dist/internalCss/dark-tritanopia.css +38 -38
  24. package/dist/internalCss/dark.css +38 -38
  25. package/dist/styleLint/functional/themes/dark-colorblind.json +61 -61
  26. package/dist/styleLint/functional/themes/dark-dimmed.json +62 -62
  27. package/dist/styleLint/functional/themes/dark-high-contrast.json +61 -61
  28. package/dist/styleLint/functional/themes/dark-tritanopia.json +61 -61
  29. package/dist/styleLint/functional/themes/dark.json +62 -62
  30. package/dist/styleLint/functional/themes/light-colorblind.json +25 -25
  31. package/dist/styleLint/functional/themes/light-high-contrast.json +25 -25
  32. package/dist/styleLint/functional/themes/light-tritanopia.json +25 -25
  33. package/dist/styleLint/functional/themes/light.json +27 -27
  34. package/package.json +1 -1
  35. package/src/tokens/functional/color/dark/display-dark.json5 +19 -19
  36. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +8 -16
  37. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +9 -17
  38. package/src/tokens/functional/color/dark/patterns-dark.json5 +10 -10
  39. package/src/tokens/functional/color/dark/primitives-dark.json5 +122 -146
  40. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +4 -8
  41. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +11 -19
  42. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +8 -16
  43. package/src/tokens/functional/color/light/patterns-light.json5 +12 -12
  44. package/src/tokens/functional/color/light/primitives-light.json5 +122 -146
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -90,206 +90,182 @@
90
90
  },
91
91
  },
92
92
  link: {
93
- '@': {
94
- $value: '{fgColor.accent.@}',
95
- $type: 'color',
96
- $extensions: {
97
- 'org.primer.figma': {
98
- collection: 'mode',
99
- mode: 'dark',
100
- group: 'semantic',
101
- scopes: ['fgColor'],
102
- codeSyntax: {
103
- web: 'var(--fgColor-link) /* utility class: .color-fg-accent */',
104
- },
93
+ $value: '{fgColor.accent}',
94
+ $type: 'color',
95
+ $extensions: {
96
+ 'org.primer.figma': {
97
+ collection: 'mode',
98
+ mode: 'dark',
99
+ group: 'semantic',
100
+ scopes: ['fgColor'],
101
+ codeSyntax: {
102
+ web: 'var(--fgColor-link) /* utility class: .color-fg-accent */',
105
103
  },
106
104
  },
107
105
  },
108
106
  },
109
107
  neutral: {
110
- '@': {
111
- $value: '{base.color.neutral.4}',
112
- $type: 'color',
113
- $extensions: {
114
- 'org.primer.figma': {
115
- collection: 'mode',
116
- mode: 'dark',
117
- group: 'semantic',
118
- scopes: ['fgColor'],
119
- },
108
+ $value: '{base.color.neutral.4}',
109
+ $type: 'color',
110
+ $extensions: {
111
+ 'org.primer.figma': {
112
+ collection: 'mode',
113
+ mode: 'dark',
114
+ group: 'semantic',
115
+ scopes: ['fgColor'],
120
116
  },
121
117
  },
122
118
  },
123
119
  accent: {
124
- '@': {
125
- $value: '{base.color.blue.3}',
126
- $type: 'color',
127
- $extensions: {
128
- 'org.primer.figma': {
129
- collection: 'mode',
130
- mode: 'dark',
131
- group: 'semantic',
132
- scopes: ['fgColor'],
133
- codeSyntax: {
134
- web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */',
135
- },
120
+ $value: '{base.color.blue.3}',
121
+ $type: 'color',
122
+ $extensions: {
123
+ 'org.primer.figma': {
124
+ collection: 'mode',
125
+ mode: 'dark',
126
+ group: 'semantic',
127
+ scopes: ['fgColor'],
128
+ codeSyntax: {
129
+ web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */',
136
130
  },
137
131
  },
138
- mix: {
139
- color: '{base.color.blue.5}',
140
- weight: 0.35,
141
- },
132
+ },
133
+ mix: {
134
+ color: '{base.color.blue.5}',
135
+ weight: 0.35,
142
136
  },
143
137
  },
144
138
  success: {
145
- '@': {
146
- $value: '{base.color.green.3}',
147
- $type: 'color',
148
- $extensions: {
149
- 'org.primer.figma': {
150
- collection: 'mode',
151
- mode: 'dark',
152
- group: 'semantic',
153
- scopes: ['fgColor'],
154
- codeSyntax: {
155
- web: 'var(--fgColor-success) /* utility class: .color-fg-success */',
156
- },
139
+ $value: '{base.color.green.3}',
140
+ $type: 'color',
141
+ $extensions: {
142
+ 'org.primer.figma': {
143
+ collection: 'mode',
144
+ mode: 'dark',
145
+ group: 'semantic',
146
+ scopes: ['fgColor'],
147
+ codeSyntax: {
148
+ web: 'var(--fgColor-success) /* utility class: .color-fg-success */',
157
149
  },
158
150
  },
159
151
  },
160
152
  },
161
153
  attention: {
162
- '@': {
163
- $value: '{base.color.yellow.3}',
164
- $type: 'color',
165
- $extensions: {
166
- 'org.primer.figma': {
167
- collection: 'mode',
168
- mode: 'dark',
169
- group: 'semantic',
170
- scopes: ['fgColor'],
171
- codeSyntax: {
172
- web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
173
- },
154
+ $value: '{base.color.yellow.3}',
155
+ $type: 'color',
156
+ $extensions: {
157
+ 'org.primer.figma': {
158
+ collection: 'mode',
159
+ mode: 'dark',
160
+ group: 'semantic',
161
+ scopes: ['fgColor'],
162
+ codeSyntax: {
163
+ web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
174
164
  },
175
165
  },
176
166
  },
177
167
  },
178
168
  severe: {
179
- '@': {
180
- $value: '{base.color.orange.4}',
181
- $type: 'color',
182
- $extensions: {
183
- 'org.primer.figma': {
184
- collection: 'mode',
185
- mode: 'dark',
186
- group: 'semantic',
187
- scopes: ['fgColor'],
188
- codeSyntax: {
189
- web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
190
- },
169
+ $value: '{base.color.orange.4}',
170
+ $type: 'color',
171
+ $extensions: {
172
+ 'org.primer.figma': {
173
+ collection: 'mode',
174
+ mode: 'dark',
175
+ group: 'semantic',
176
+ scopes: ['fgColor'],
177
+ codeSyntax: {
178
+ web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
191
179
  },
192
180
  },
193
181
  },
194
182
  },
195
183
  danger: {
196
- '@': {
197
- $value: '{base.color.red.4}',
198
- $type: 'color',
199
- $extensions: {
200
- 'org.primer.figma': {
201
- collection: 'mode',
202
- mode: 'dark',
203
- group: 'semantic',
204
- scopes: ['fgColor'],
205
- codeSyntax: {
206
- web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
207
- },
184
+ $value: '{base.color.red.4}',
185
+ $type: 'color',
186
+ $extensions: {
187
+ 'org.primer.figma': {
188
+ collection: 'mode',
189
+ mode: 'dark',
190
+ group: 'semantic',
191
+ scopes: ['fgColor'],
192
+ codeSyntax: {
193
+ web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
208
194
  },
209
195
  },
210
196
  },
211
197
  },
212
198
  open: {
213
- '@': {
214
- $value: '{fgColor.success.@}',
215
- $type: 'color',
216
- $extensions: {
217
- 'org.primer.figma': {
218
- collection: 'mode',
219
- mode: 'dark',
220
- group: 'semantic',
221
- scopes: ['fgColor'],
222
- codeSyntax: {
223
- web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
224
- },
199
+ $value: '{fgColor.success}',
200
+ $type: 'color',
201
+ $extensions: {
202
+ 'org.primer.figma': {
203
+ collection: 'mode',
204
+ mode: 'dark',
205
+ group: 'semantic',
206
+ scopes: ['fgColor'],
207
+ codeSyntax: {
208
+ web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
225
209
  },
226
210
  },
227
211
  },
228
212
  },
229
213
  closed: {
230
- '@': {
231
- $value: '{base.color.red.4}',
232
- $type: 'color',
233
- $extensions: {
234
- 'org.primer.figma': {
235
- collection: 'mode',
236
- mode: 'dark',
237
- group: 'semantic',
238
- scopes: ['fgColor'],
239
- codeSyntax: {
240
- web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */',
241
- },
214
+ $value: '{base.color.red.4}',
215
+ $type: 'color',
216
+ $extensions: {
217
+ 'org.primer.figma': {
218
+ collection: 'mode',
219
+ mode: 'dark',
220
+ group: 'semantic',
221
+ scopes: ['fgColor'],
222
+ codeSyntax: {
223
+ web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */',
242
224
  },
243
225
  },
244
226
  },
245
227
  },
246
228
  done: {
247
- '@': {
248
- $value: '{base.color.purple.4}',
249
- $type: 'color',
250
- $extensions: {
251
- 'org.primer.figma': {
252
- collection: 'mode',
253
- mode: 'dark',
254
- group: 'semantic',
255
- scopes: ['fgColor'],
256
- codeSyntax: {
257
- web: 'var(--fgColor-done) /* utility class: .color-fg-done */',
258
- },
229
+ $value: '{base.color.purple.4}',
230
+ $type: 'color',
231
+ $extensions: {
232
+ 'org.primer.figma': {
233
+ collection: 'mode',
234
+ mode: 'dark',
235
+ group: 'semantic',
236
+ scopes: ['fgColor'],
237
+ codeSyntax: {
238
+ web: 'var(--fgColor-done) /* utility class: .color-fg-done */',
259
239
  },
260
240
  },
261
241
  },
262
242
  },
263
243
  upsell: {
264
- '@': {
265
- $value: '{base.color.purple.4}',
266
- $type: 'color',
267
- $extensions: {
268
- 'org.primer.figma': {
269
- collection: 'mode',
270
- mode: 'dark',
271
- group: 'semantic',
272
- scopes: ['fgColor'],
273
- codeSyntax: {
274
- web: 'var(--fgColor-upsell)',
275
- },
244
+ $value: '{base.color.purple.4}',
245
+ $type: 'color',
246
+ $extensions: {
247
+ 'org.primer.figma': {
248
+ collection: 'mode',
249
+ mode: 'dark',
250
+ group: 'semantic',
251
+ scopes: ['fgColor'],
252
+ codeSyntax: {
253
+ web: 'var(--fgColor-upsell)',
276
254
  },
277
255
  },
278
256
  },
279
257
  },
280
258
  sponsors: {
281
- '@': {
282
- $value: '{base.color.pink.4}',
283
- $type: 'color',
284
- $extensions: {
285
- 'org.primer.figma': {
286
- collection: 'mode',
287
- mode: 'dark',
288
- group: 'semantic',
289
- scopes: ['fgColor'],
290
- codeSyntax: {
291
- web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */',
292
- },
259
+ $value: '{base.color.pink.4}',
260
+ $type: 'color',
261
+ $extensions: {
262
+ 'org.primer.figma': {
263
+ collection: 'mode',
264
+ mode: 'dark',
265
+ group: 'semantic',
266
+ scopes: ['fgColor'],
267
+ codeSyntax: {
268
+ web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */',
293
269
  },
294
270
  },
295
271
  },
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 CHANGED
@@ -15,16 +15,12 @@
15
15
  $type: 'color',
16
16
  },
17
17
  danger: {
18
- '@': {
19
- $value: '{base.color.red.6}',
20
- $type: 'color',
21
- },
18
+ $value: '{base.color.red.6}',
19
+ $type: 'color',
22
20
  },
23
21
  accent: {
24
- '@': {
25
- $value: '{base.color.blue.6}',
26
- $type: 'color',
27
- },
22
+ $value: '{base.color.blue.6}',
23
+ $type: 'color',
28
24
  },
29
25
  },
30
26
  bgColor: {
package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 CHANGED
@@ -6,31 +6,23 @@
6
6
  {
7
7
  fgColor: {
8
8
  success: {
9
- '@': {
10
- $value: '{base.color.blue.5}',
11
- $type: 'color',
12
- },
9
+ $value: '{base.color.blue.5}',
10
+ $type: 'color',
13
11
  },
14
12
  open: {
15
- '@': {
16
- $value: '{base.color.orange.5}',
17
- $type: 'color',
18
- },
13
+ $value: '{base.color.orange.5}',
14
+ $type: 'color',
19
15
  },
20
16
  closed: {
21
- '@': {
22
- $value: '{base.color.neutral.5}',
23
- $type: 'color',
24
- },
17
+ $value: '{base.color.neutral.5}',
18
+ $type: 'color',
25
19
  },
26
20
  danger: {
27
- '@': {
28
- $value: '{base.color.orange.5}',
29
- $type: 'color',
30
- mix: {
31
- color: '{base.color.orange.4}',
32
- weight: 0.05,
33
- },
21
+ $value: '{base.color.orange.5}',
22
+ $type: 'color',
23
+ mix: {
24
+ color: '{base.color.orange.4}',
25
+ weight: 0.05,
34
26
  },
35
27
  },
36
28
  },
package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 CHANGED
@@ -6,28 +6,20 @@
6
6
  {
7
7
  fgColor: {
8
8
  success: {
9
- '@': {
10
- $value: '{base.color.blue.5}',
11
- $type: 'color',
12
- },
9
+ $value: '{base.color.blue.5}',
10
+ $type: 'color',
13
11
  },
14
12
  severe: {
15
- '@': {
16
- $value: '{base.color.red.5}',
17
- $type: 'color',
18
- },
13
+ $value: '{base.color.red.5}',
14
+ $type: 'color',
19
15
  },
20
16
  open: {
21
- '@': {
22
- $value: '{base.color.red.5}',
23
- $type: 'color',
24
- },
17
+ $value: '{base.color.red.5}',
18
+ $type: 'color',
25
19
  },
26
20
  closed: {
27
- '@': {
28
- $value: '{base.color.neutral.5}',
29
- $type: 'color',
30
- },
21
+ $value: '{base.color.neutral.5}',
22
+ $type: 'color',
31
23
  },
32
24
  },
33
25
  bgColor: {
package/src/tokens/functional/color/light/patterns-light.json5 CHANGED
@@ -380,7 +380,7 @@
380
380
  danger: {
381
381
  fgColor: {
382
382
  rest: {
383
- $value: '{fgColor.danger.@}',
383
+ $value: '{fgColor.danger}',
384
384
  $type: 'color',
385
385
  $extensions: {
386
386
  'org.primer.figma': {
@@ -392,7 +392,7 @@
392
392
  },
393
393
  },
394
394
  hover: {
395
- $value: '{fgColor.danger.@}',
395
+ $value: '{fgColor.danger}',
396
396
  $type: 'color',
397
397
  $extensions: {
398
398
  'org.primer.figma': {
@@ -1062,7 +1062,7 @@
1062
1062
  invisible: {
1063
1063
  fgColor: {
1064
1064
  rest: {
1065
- $value: '{fgColor.accent.@}',
1065
+ $value: '{fgColor.accent}',
1066
1066
  $type: 'color',
1067
1067
  $extensions: {
1068
1068
  'org.primer.figma': {
@@ -1074,7 +1074,7 @@
1074
1074
  },
1075
1075
  },
1076
1076
  hover: {
1077
- $value: '{fgColor.accent.@}',
1077
+ $value: '{fgColor.accent}',
1078
1078
  $type: 'color',
1079
1079
  $extensions: {
1080
1080
  'org.primer.figma': {
@@ -1228,7 +1228,7 @@
1228
1228
  outline: {
1229
1229
  fgColor: {
1230
1230
  rest: {
1231
- $value: '{fgColor.accent.@}',
1231
+ $value: '{fgColor.accent}',
1232
1232
  $type: 'color',
1233
1233
  $extensions: {
1234
1234
  'org.primer.figma': {
@@ -1264,7 +1264,7 @@
1264
1264
  },
1265
1265
  },
1266
1266
  disabled: {
1267
- $value: '{fgColor.accent.@}',
1267
+ $value: '{fgColor.accent}',
1268
1268
  $type: 'color',
1269
1269
  $extensions: {
1270
1270
  'org.primer.figma': {
@@ -1362,7 +1362,7 @@
1362
1362
  danger: {
1363
1363
  fgColor: {
1364
1364
  rest: {
1365
- $value: '{fgColor.danger.@}',
1365
+ $value: '{fgColor.danger}',
1366
1366
  $type: 'color',
1367
1367
  $extensions: {
1368
1368
  'org.primer.figma': {
@@ -1398,7 +1398,7 @@
1398
1398
  },
1399
1399
  },
1400
1400
  disabled: {
1401
- $value: '{fgColor.danger.@}',
1401
+ $value: '{fgColor.danger}',
1402
1402
  $type: 'color',
1403
1403
  $extensions: {
1404
1404
  'org.primer.figma': {
@@ -1413,7 +1413,7 @@
1413
1413
  },
1414
1414
  iconColor: {
1415
1415
  rest: {
1416
- $value: '{fgColor.danger.@}',
1416
+ $value: '{fgColor.danger}',
1417
1417
  $type: 'color',
1418
1418
  $extensions: {
1419
1419
  'org.primer.figma': {
@@ -1690,7 +1690,7 @@
1690
1690
  },
1691
1691
  },
1692
1692
  disabled: {
1693
- $value: '{fgColor.accent.@}',
1693
+ $value: '{fgColor.accent}',
1694
1694
  $type: 'color',
1695
1695
  $extensions: {
1696
1696
  'org.primer.figma': {
@@ -1776,7 +1776,7 @@
1776
1776
  },
1777
1777
  },
1778
1778
  disabled: {
1779
- $value: '{fgColor.danger.@}',
1779
+ $value: '{fgColor.danger}',
1780
1780
  $type: 'color',
1781
1781
  $extensions: {
1782
1782
  'org.primer.figma': {
@@ -1825,7 +1825,7 @@
1825
1825
  },
1826
1826
  fgColor: {
1827
1827
  rest: {
1828
- $value: '{fgColor.link.@}',
1828
+ $value: '{fgColor.link}',
1829
1829
  $type: 'color',
1830
1830
  $extensions: {
1831
1831
  'org.primer.figma': {