@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.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 (53) hide show
  1. package/dist/build/PrimerStyleDictionary.js +1 -0
  2. package/dist/build/formats/cssAdvanced.js +9 -10
  3. package/dist/build/transformers/index.d.ts +1 -0
  4. package/dist/build/transformers/index.js +3 -1
  5. package/dist/css/functional/motion/motion.css +3 -3
  6. package/dist/css/functional/size/border.css +2 -2
  7. package/dist/css/functional/typography/typography.css +11 -11
  8. package/dist/css/primitives.css +16 -16
  9. package/package.json +5 -3
  10. package/src/tokens/base/color/dark/dark.dimmed.json5 +1164 -0
  11. package/src/tokens/base/color/dark/dark.high-contrast.json5 +764 -0
  12. package/src/tokens/base/color/dark/dark.json5 +911 -0
  13. package/src/tokens/base/color/dark/display-dark.json5 +1774 -0
  14. package/src/tokens/base/color/light/display-light.json5 +1774 -0
  15. package/src/tokens/base/color/light/light.high-contrast.json5 +755 -0
  16. package/src/tokens/base/color/light/light.json5 +911 -0
  17. package/src/tokens/base/size/size.json +196 -0
  18. package/src/tokens/base/typography/typography.json +48 -0
  19. package/src/tokens/fallback/color-fallbacks.json +270 -0
  20. package/src/tokens/functional/border/dark.json5 +12 -0
  21. package/src/tokens/functional/border/light.json5 +12 -0
  22. package/src/tokens/functional/color/dark/app-dark.json5 +554 -0
  23. package/src/tokens/functional/color/dark/data-vis-dark.json5 +284 -0
  24. package/src/tokens/functional/color/dark/display-dark.json5 +1258 -0
  25. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +194 -0
  26. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +935 -0
  27. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +310 -0
  28. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +224 -0
  29. package/src/tokens/functional/color/dark/patterns-dark.json5 +3097 -0
  30. package/src/tokens/functional/color/dark/primitives-dark.json5 +1200 -0
  31. package/src/tokens/functional/color/dark/syntax-dark.json5 +559 -0
  32. package/src/tokens/functional/color/light/app-light.json5 +551 -0
  33. package/src/tokens/functional/color/light/data-vis-light.json5 +284 -0
  34. package/src/tokens/functional/color/light/display-light.json5 +1258 -0
  35. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +819 -0
  36. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +327 -0
  37. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +237 -0
  38. package/src/tokens/functional/color/light/patterns-light.json5 +3091 -0
  39. package/src/tokens/functional/color/light/primitives-light.json5 +1193 -0
  40. package/src/tokens/functional/color/light/syntax-light.json5 +559 -0
  41. package/src/tokens/functional/motion/loading.json5 +17 -0
  42. package/src/tokens/functional/motion/patterns.json5 +28 -0
  43. package/src/tokens/functional/shadow/dark.json5 +383 -0
  44. package/src/tokens/functional/shadow/light.json5 +376 -0
  45. package/src/tokens/functional/size/border.json +111 -0
  46. package/src/tokens/functional/size/breakpoints.json +64 -0
  47. package/src/tokens/functional/size/size-coarse.json +28 -0
  48. package/src/tokens/functional/size/size-fine.json +28 -0
  49. package/src/tokens/functional/size/size.json +740 -0
  50. package/src/tokens/functional/size/viewport.json +28 -0
  51. package/src/tokens/functional/typography/typography.json +527 -0
  52. package/src/tokens/removed/color.json +421 -0
  53. package/src/tokens/removed/testing.json5 +4 -0
package/src/tokens/functional/color/dark/app-dark.json5 ADDED
@@ -0,0 +1,554 @@
1
+ {
2
+ topicTag: {
3
+ borderColor: {
4
+ $value: '{base.color.transparent}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ mode: 'dark',
10
+ group: 'component',
11
+ scopes: ['borderColor'],
12
+ },
13
+ },
14
+ },
15
+ },
16
+ highlight: {
17
+ neutral: {
18
+ bgColor: {
19
+ $value: '{base.color.yellow.3}',
20
+ $type: 'color',
21
+ $extensions: {
22
+ 'org.primer.figma': {
23
+ collection: 'mode',
24
+ mode: 'dark',
25
+ group: 'component',
26
+ scopes: ['bgColor'],
27
+ },
28
+ },
29
+ alpha: 0.4,
30
+ },
31
+ },
32
+ },
33
+ page: {
34
+ header: {
35
+ bgColor: {
36
+ $value: '{bgColor.default}',
37
+ $type: 'color',
38
+ $extensions: {
39
+ 'org.primer.figma': {
40
+ collection: 'mode',
41
+ mode: 'dark',
42
+ group: 'component',
43
+ scopes: ['bgColor'],
44
+ },
45
+ },
46
+ },
47
+ },
48
+ },
49
+ diffBlob: {
50
+ addition: {
51
+ fgColor: {
52
+ text: {
53
+ $value: '{fgColor.default}',
54
+ $type: 'color',
55
+ $extensions: {
56
+ 'org.primer.figma': {
57
+ collection: 'mode',
58
+ mode: 'dark',
59
+ group: 'component',
60
+ scopes: ['fgColor'],
61
+ },
62
+ },
63
+ },
64
+ num: {
65
+ $value: '{fgColor.default}',
66
+ $type: 'color',
67
+ $extensions: {
68
+ 'org.primer.figma': {
69
+ collection: 'mode',
70
+ mode: 'dark',
71
+ group: 'component',
72
+ scopes: ['fgColor'],
73
+ },
74
+ },
75
+ },
76
+ },
77
+ bgColor: {
78
+ num: {
79
+ $value: '{base.color.green.3}',
80
+ $type: 'color',
81
+ $extensions: {
82
+ 'org.primer.figma': {
83
+ collection: 'mode',
84
+ mode: 'dark',
85
+ group: 'component',
86
+ scopes: ['bgColor'],
87
+ },
88
+ },
89
+ alpha: 0.3,
90
+ },
91
+ line: {
92
+ $value: '{base.color.green.4}',
93
+ $type: 'color',
94
+ $extensions: {
95
+ 'org.primer.figma': {
96
+ collection: 'mode',
97
+ mode: 'dark',
98
+ group: 'component',
99
+ scopes: ['bgColor'],
100
+ },
101
+ },
102
+ alpha: 0.15,
103
+ mix: null,
104
+ },
105
+ word: {
106
+ $value: '{base.color.green.4}',
107
+ $type: 'color',
108
+ $extensions: {
109
+ 'org.primer.figma': {
110
+ collection: 'mode',
111
+ mode: 'dark',
112
+ group: 'component',
113
+ scopes: ['bgColor'],
114
+ },
115
+ },
116
+ alpha: 0.4,
117
+ },
118
+ },
119
+ },
120
+ deletion: {
121
+ fgColor: {
122
+ text: {
123
+ $value: '{fgColor.default}',
124
+ $type: 'color',
125
+ $extensions: {
126
+ 'org.primer.figma': {
127
+ collection: 'mode',
128
+ mode: 'dark',
129
+ group: 'component',
130
+ scopes: ['fgColor'],
131
+ },
132
+ },
133
+ },
134
+ num: {
135
+ $value: '{fgColor.default}',
136
+ $type: 'color',
137
+ $extensions: {
138
+ 'org.primer.figma': {
139
+ collection: 'mode',
140
+ mode: 'dark',
141
+ group: 'component',
142
+ scopes: ['fgColor'],
143
+ },
144
+ },
145
+ },
146
+ },
147
+ bgColor: {
148
+ num: {
149
+ $value: '{base.color.red.4}',
150
+ $type: 'color',
151
+ $extensions: {
152
+ 'org.primer.figma': {
153
+ collection: 'mode',
154
+ mode: 'dark',
155
+ group: 'component',
156
+ scopes: ['bgColor'],
157
+ },
158
+ },
159
+ alpha: 0.3,
160
+ },
161
+ line: {
162
+ $value: '{base.color.red.4}',
163
+ $type: 'color',
164
+ $extensions: {
165
+ 'org.primer.figma': {
166
+ collection: 'mode',
167
+ mode: 'dark',
168
+ group: 'component',
169
+ scopes: ['bgColor'],
170
+ },
171
+ },
172
+ alpha: 0.15,
173
+ mix: null,
174
+ },
175
+ word: {
176
+ $value: '{base.color.red.4}',
177
+ $type: 'color',
178
+ $extensions: {
179
+ 'org.primer.figma': {
180
+ collection: 'mode',
181
+ mode: 'dark',
182
+ group: 'component',
183
+ scopes: ['bgColor'],
184
+ },
185
+ },
186
+ alpha: 0.4,
187
+ },
188
+ },
189
+ },
190
+ hunk: {
191
+ bgColor: {
192
+ num: {
193
+ $value: '{borderColor.accent.muted}',
194
+ $type: 'color',
195
+ $extensions: {
196
+ 'org.primer.figma': {
197
+ collection: 'mode',
198
+ mode: 'dark',
199
+ group: 'component',
200
+ scopes: ['bgColor'],
201
+ },
202
+ },
203
+ },
204
+ },
205
+ },
206
+ expander: {
207
+ iconColor: {
208
+ $value: '{fgColor.muted}',
209
+ $type: 'color',
210
+ $extensions: {
211
+ 'org.primer.figma': {
212
+ collection: 'mode',
213
+ mode: 'dark',
214
+ group: 'component',
215
+ scopes: ['fgColor'],
216
+ },
217
+ },
218
+ },
219
+ },
220
+ },
221
+ codeMirror: {
222
+ fgColor: {
223
+ $value: '{fgColor.default}',
224
+ $type: 'color',
225
+ $extensions: {
226
+ 'org.primer.figma': {
227
+ collection: 'mode',
228
+ mode: 'dark',
229
+ group: 'component',
230
+ scopes: ['fgColor'],
231
+ },
232
+ },
233
+ },
234
+ bgColor: {
235
+ $value: '{bgColor.default}',
236
+ $type: 'color',
237
+ $extensions: {
238
+ 'org.primer.figma': {
239
+ collection: 'mode',
240
+ mode: 'dark',
241
+ group: 'component',
242
+ scopes: ['bgColor'],
243
+ },
244
+ },
245
+ },
246
+ gutters: {
247
+ bgColor: {
248
+ $value: '{bgColor.default}',
249
+ $type: 'color',
250
+ $extensions: {
251
+ 'org.primer.figma': {
252
+ collection: 'mode',
253
+ mode: 'dark',
254
+ group: 'component',
255
+ scopes: ['bgColor'],
256
+ },
257
+ },
258
+ },
259
+ },
260
+ gutterMarker: {
261
+ fgColor: {
262
+ default: {
263
+ $value: '{bgColor.default}',
264
+ $type: 'color',
265
+ $extensions: {
266
+ 'org.primer.figma': {
267
+ collection: 'mode',
268
+ mode: 'dark',
269
+ group: 'component',
270
+ scopes: ['fgColor'],
271
+ },
272
+ },
273
+ },
274
+ muted: {
275
+ $value: '{fgColor.muted}',
276
+ $type: 'color',
277
+ $extensions: {
278
+ 'org.primer.figma': {
279
+ collection: 'mode',
280
+ mode: 'dark',
281
+ group: 'component',
282
+ scopes: ['fgColor'],
283
+ },
284
+ },
285
+ },
286
+ },
287
+ },
288
+ lineNumber: {
289
+ fgColor: {
290
+ $value: '{fgColor.muted}',
291
+ $type: 'color',
292
+ $extensions: {
293
+ 'org.primer.figma': {
294
+ collection: 'mode',
295
+ mode: 'dark',
296
+ group: 'component',
297
+ scopes: ['fgColor'],
298
+ },
299
+ },
300
+ },
301
+ },
302
+ cursor: {
303
+ fgColor: {
304
+ $value: '{fgColor.default}',
305
+ $type: 'color',
306
+ $extensions: {
307
+ 'org.primer.figma': {
308
+ collection: 'mode',
309
+ mode: 'dark',
310
+ group: 'component',
311
+ scopes: ['fgColor'],
312
+ },
313
+ },
314
+ },
315
+ },
316
+ selection: {
317
+ bgColor: {
318
+ $value: '{borderColor.accent.muted}',
319
+ $type: 'color',
320
+ $extensions: {
321
+ 'org.primer.figma': {
322
+ collection: 'mode',
323
+ mode: 'dark',
324
+ group: 'component',
325
+ scopes: ['bgColor'],
326
+ },
327
+ },
328
+ },
329
+ },
330
+ activeline: {
331
+ bgColor: {
332
+ $value: '{bgColor.neutral.muted}',
333
+ $type: 'color',
334
+ $extensions: {
335
+ 'org.primer.figma': {
336
+ collection: 'mode',
337
+ mode: 'dark',
338
+ group: 'component',
339
+ scopes: ['bgColor'],
340
+ },
341
+ },
342
+ },
343
+ },
344
+ matchingBracket: {
345
+ fgColor: {
346
+ $value: '{fgColor.default}',
347
+ $type: 'color',
348
+ $extensions: {
349
+ 'org.primer.figma': {
350
+ collection: 'mode',
351
+ mode: 'dark',
352
+ group: 'component',
353
+ scopes: ['fgColor'],
354
+ },
355
+ },
356
+ },
357
+ },
358
+ lines: {
359
+ bgColor: {
360
+ $value: '{bgColor.default}',
361
+ $type: 'color',
362
+ $extensions: {
363
+ 'org.primer.figma': {
364
+ collection: 'mode',
365
+ mode: 'dark',
366
+ group: 'component',
367
+ scopes: ['bgColor'],
368
+ },
369
+ },
370
+ },
371
+ },
372
+ syntax: {
373
+ fgColor: {
374
+ comment: {
375
+ $value: '{base.color.neutral.8}',
376
+ $type: 'color',
377
+ $extensions: {
378
+ 'org.primer.figma': {
379
+ collection: 'mode',
380
+ mode: 'dark',
381
+ group: 'component',
382
+ scopes: ['fgColor'],
383
+ },
384
+ },
385
+ },
386
+ constant: {
387
+ $value: '{base.color.blue.2}',
388
+ $type: 'color',
389
+ $extensions: {
390
+ 'org.primer.figma': {
391
+ collection: 'mode',
392
+ mode: 'dark',
393
+ group: 'component',
394
+ scopes: ['fgColor'],
395
+ },
396
+ },
397
+ },
398
+ entity: {
399
+ $value: '{base.color.purple.2}',
400
+ $type: 'color',
401
+ $extensions: {
402
+ 'org.primer.figma': {
403
+ collection: 'mode',
404
+ mode: 'dark',
405
+ group: 'component',
406
+ scopes: ['fgColor'],
407
+ },
408
+ },
409
+ },
410
+ keyword: {
411
+ $value: '{base.color.red.3}',
412
+ $type: 'color',
413
+ $extensions: {
414
+ 'org.primer.figma': {
415
+ collection: 'mode',
416
+ mode: 'dark',
417
+ group: 'component',
418
+ scopes: ['fgColor'],
419
+ },
420
+ },
421
+ },
422
+ storage: {
423
+ $value: '{base.color.red.3}',
424
+ $type: 'color',
425
+ $extensions: {
426
+ 'org.primer.figma': {
427
+ collection: 'mode',
428
+ mode: 'dark',
429
+ group: 'component',
430
+ scopes: ['fgColor'],
431
+ },
432
+ },
433
+ },
434
+ string: {
435
+ $value: '{base.color.blue.1}',
436
+ $type: 'color',
437
+ $extensions: {
438
+ 'org.primer.figma': {
439
+ collection: 'mode',
440
+ mode: 'dark',
441
+ group: 'component',
442
+ scopes: ['fgColor'],
443
+ },
444
+ },
445
+ },
446
+ support: {
447
+ $value: '{base.color.blue.2}',
448
+ $type: 'color',
449
+ $extensions: {
450
+ 'org.primer.figma': {
451
+ collection: 'mode',
452
+ mode: 'dark',
453
+ group: 'component',
454
+ scopes: ['fgColor'],
455
+ },
456
+ },
457
+ },
458
+ variable: {
459
+ $value: '{base.color.orange.2}',
460
+ $type: 'color',
461
+ $extensions: {
462
+ 'org.primer.figma': {
463
+ collection: 'mode',
464
+ mode: 'dark',
465
+ group: 'component',
466
+ scopes: ['fgColor'],
467
+ },
468
+ },
469
+ },
470
+ },
471
+ },
472
+ },
473
+ header: {
474
+ fgColor: {
475
+ default: {
476
+ $value: '{fgColor.onEmphasis}',
477
+ $type: 'color',
478
+ $extensions: {
479
+ 'org.primer.figma': {
480
+ collection: 'mode',
481
+ mode: 'dark',
482
+ group: 'component',
483
+ scopes: ['fgColor'],
484
+ },
485
+ },
486
+ alpha: 0.7,
487
+ },
488
+ logo: {
489
+ $value: '{fgColor.onEmphasis}',
490
+ $type: 'color',
491
+ $extensions: {
492
+ 'org.primer.figma': {
493
+ collection: 'mode',
494
+ mode: 'dark',
495
+ group: 'component',
496
+ scopes: ['fgColor'],
497
+ },
498
+ },
499
+ },
500
+ },
501
+ bgColor: {
502
+ $value: '{base.color.neutral.10}',
503
+ $type: 'color',
504
+ $extensions: {
505
+ 'org.primer.figma': {
506
+ collection: 'mode',
507
+ mode: 'dark',
508
+ group: 'component',
509
+ scopes: ['bgColor'],
510
+ },
511
+ },
512
+ },
513
+ borderColor: {
514
+ divider: {
515
+ $value: '{base.color.neutral.4}',
516
+ $type: 'color',
517
+ $extensions: {
518
+ 'org.primer.figma': {
519
+ collection: 'mode',
520
+ mode: 'dark',
521
+ group: 'component',
522
+ scopes: ['borderColor'],
523
+ },
524
+ },
525
+ },
526
+ },
527
+ },
528
+ headerSearch: {
529
+ bgColor: {
530
+ $value: '{base.color.neutral.10}',
531
+ $type: 'color',
532
+ $extensions: {
533
+ 'org.primer.figma': {
534
+ collection: 'mode',
535
+ mode: 'dark',
536
+ group: 'component',
537
+ scopes: ['bgColor'],
538
+ },
539
+ },
540
+ },
541
+ borderColor: {
542
+ $value: '{base.color.neutral.7}',
543
+ $type: 'color',
544
+ $extensions: {
545
+ 'org.primer.figma': {
546
+ collection: 'mode',
547
+ mode: 'dark',
548
+ group: 'component',
549
+ scopes: ['borderColor'],
550
+ },
551
+ },
552
+ },
553
+ },
554
+ }