@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/primitives-dark.json5 ADDED
@@ -0,0 +1,1200 @@
1
+ {
2
+ fgColor: {
3
+ default: {
4
+ $value: '{base.color.neutral.12}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ mode: 'dark',
10
+ group: 'semantic',
11
+ scopes: ['fgColor'],
12
+ codeSyntax: {
13
+ web: 'var(--fgColor-default) /* utility class: .color-fg-default */',
14
+ },
15
+ },
16
+ },
17
+ },
18
+ muted: {
19
+ $value: '{base.color.neutral.9}',
20
+ $type: 'color',
21
+ $extensions: {
22
+ 'org.primer.figma': {
23
+ collection: 'mode',
24
+ mode: 'dark',
25
+ group: 'semantic',
26
+ scopes: ['fgColor'],
27
+ codeSyntax: {
28
+ web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */',
29
+ },
30
+ },
31
+ },
32
+ },
33
+ onEmphasis: {
34
+ $value: '{base.color.neutral.13}',
35
+ $type: 'color',
36
+ $extensions: {
37
+ 'org.primer.figma': {
38
+ collection: 'mode',
39
+ mode: 'dark',
40
+ group: 'semantic',
41
+ scopes: ['fgColor'],
42
+ codeSyntax: {
43
+ web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */',
44
+ },
45
+ },
46
+ },
47
+ },
48
+ onInverse: {
49
+ $value: '{base.color.neutral.0}',
50
+ $type: 'color',
51
+ $extensions: {
52
+ 'org.primer.figma': {
53
+ collection: 'mode',
54
+ mode: 'dark',
55
+ group: 'semantic',
56
+ scopes: ['fgColor'],
57
+ },
58
+ },
59
+ },
60
+ white: {
61
+ $value: '{base.color.neutral.13}',
62
+ $type: 'color',
63
+ $extensions: {
64
+ 'org.primer.figma': {
65
+ collection: 'mode',
66
+ mode: 'light',
67
+ group: 'semantic',
68
+ scopes: ['fgColor'],
69
+ },
70
+ },
71
+ },
72
+ black: {
73
+ $value: '{base.color.neutral.0}',
74
+ $type: 'color',
75
+ $extensions: {
76
+ 'org.primer.figma': {
77
+ collection: 'mode',
78
+ mode: 'dark',
79
+ group: 'semantic',
80
+ scopes: ['fgColor'],
81
+ },
82
+ },
83
+ },
84
+ disabled: {
85
+ $value: '{base.color.neutral.8}',
86
+ $type: 'color',
87
+ $extensions: {
88
+ 'org.primer.figma': {
89
+ collection: 'mode',
90
+ mode: 'dark',
91
+ group: 'semantic',
92
+ scopes: ['fgColor'],
93
+ },
94
+ },
95
+ alpha: 0.6,
96
+ },
97
+ link: {
98
+ $value: '{fgColor.accent}',
99
+ $type: 'color',
100
+ $extensions: {
101
+ 'org.primer.figma': {
102
+ collection: 'mode',
103
+ mode: 'dark',
104
+ group: 'semantic',
105
+ scopes: ['fgColor'],
106
+ codeSyntax: {
107
+ web: 'var(--fgColor-link) /* utility class: .color-fg-accent */',
108
+ },
109
+ },
110
+ },
111
+ },
112
+ neutral: {
113
+ $value: '{base.color.neutral.9}',
114
+ $type: 'color',
115
+ $extensions: {
116
+ 'org.primer.figma': {
117
+ collection: 'mode',
118
+ mode: 'dark',
119
+ group: 'semantic',
120
+ scopes: ['fgColor'],
121
+ },
122
+ },
123
+ },
124
+ accent: {
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
+ },
136
+ },
137
+ },
138
+ mix: {
139
+ color: '{base.color.blue.5}',
140
+ weight: 0.35,
141
+ },
142
+ },
143
+ success: {
144
+ $value: '{base.color.green.3}',
145
+ $type: 'color',
146
+ $extensions: {
147
+ 'org.primer.figma': {
148
+ collection: 'mode',
149
+ mode: 'dark',
150
+ group: 'semantic',
151
+ scopes: ['fgColor'],
152
+ codeSyntax: {
153
+ web: 'var(--fgColor-success) /* utility class: .color-fg-success */',
154
+ },
155
+ },
156
+ },
157
+ },
158
+ open: {
159
+ $value: '{fgColor.success}',
160
+ $type: 'color',
161
+ $extensions: {
162
+ 'org.primer.figma': {
163
+ collection: 'mode',
164
+ mode: 'dark',
165
+ group: 'semantic',
166
+ scopes: ['fgColor'],
167
+ codeSyntax: {
168
+ web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
169
+ },
170
+ },
171
+ },
172
+ },
173
+ attention: {
174
+ $value: '{base.color.yellow.3}',
175
+ $type: 'color',
176
+ $extensions: {
177
+ 'org.primer.figma': {
178
+ collection: 'mode',
179
+ mode: 'dark',
180
+ group: 'semantic',
181
+ scopes: ['fgColor'],
182
+ codeSyntax: {
183
+ web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
184
+ },
185
+ },
186
+ },
187
+ },
188
+ severe: {
189
+ $value: '{base.color.orange.4}',
190
+ $type: 'color',
191
+ $extensions: {
192
+ 'org.primer.figma': {
193
+ collection: 'mode',
194
+ mode: 'dark',
195
+ group: 'semantic',
196
+ scopes: ['fgColor'],
197
+ codeSyntax: {
198
+ web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
199
+ },
200
+ },
201
+ },
202
+ },
203
+ danger: {
204
+ $value: '{base.color.red.4}',
205
+ $type: 'color',
206
+ $extensions: {
207
+ 'org.primer.figma': {
208
+ collection: 'mode',
209
+ mode: 'dark',
210
+ group: 'semantic',
211
+ scopes: ['fgColor'],
212
+ codeSyntax: {
213
+ web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
214
+ },
215
+ },
216
+ },
217
+ },
218
+ closed: {
219
+ $value: '{fgColor.danger}',
220
+ $type: 'color',
221
+ $extensions: {
222
+ 'org.primer.figma': {
223
+ collection: 'mode',
224
+ mode: 'dark',
225
+ group: 'semantic',
226
+ scopes: ['fgColor'],
227
+ codeSyntax: {
228
+ web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */',
229
+ },
230
+ },
231
+ },
232
+ },
233
+ done: {
234
+ $value: '{base.color.purple.4}',
235
+ $type: 'color',
236
+ $extensions: {
237
+ 'org.primer.figma': {
238
+ collection: 'mode',
239
+ mode: 'dark',
240
+ group: 'semantic',
241
+ scopes: ['fgColor'],
242
+ codeSyntax: {
243
+ web: 'var(--fgColor-done) /* utility class: .color-fg-done */',
244
+ },
245
+ },
246
+ },
247
+ },
248
+ upsell: {
249
+ $value: '{fgColor.done}',
250
+ $type: 'color',
251
+ $extensions: {
252
+ 'org.primer.figma': {
253
+ collection: 'mode',
254
+ mode: 'dark',
255
+ group: 'semantic',
256
+ scopes: ['fgColor'],
257
+ codeSyntax: {
258
+ web: 'var(--fgColor-upsell)',
259
+ },
260
+ },
261
+ },
262
+ },
263
+ sponsors: {
264
+ $value: '{base.color.pink.4}',
265
+ $type: 'color',
266
+ $extensions: {
267
+ 'org.primer.figma': {
268
+ collection: 'mode',
269
+ mode: 'dark',
270
+ group: 'semantic',
271
+ scopes: ['fgColor'],
272
+ codeSyntax: {
273
+ web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */',
274
+ },
275
+ },
276
+ },
277
+ },
278
+ },
279
+ bgColor: {
280
+ default: {
281
+ $value: '{base.color.neutral.1}',
282
+ $type: 'color',
283
+ $extensions: {
284
+ 'org.primer.figma': {
285
+ collection: 'mode',
286
+ mode: 'dark',
287
+ scopes: ['bgColor', 'borderColor'],
288
+ group: 'semantic',
289
+ codeSyntax: {
290
+ web: 'var(--bgColor-default) /* utility class: .color-bg-default */',
291
+ },
292
+ },
293
+ },
294
+ },
295
+ muted: {
296
+ $value: '{base.color.neutral.2}',
297
+ $type: 'color',
298
+ $extensions: {
299
+ 'org.primer.figma': {
300
+ collection: 'mode',
301
+ mode: 'dark',
302
+ scopes: ['bgColor', 'borderColor'],
303
+ group: 'semantic',
304
+ codeSyntax: {
305
+ web: 'var(--bgColor-muted) /* utility class: .color-bg-muted */',
306
+ },
307
+ },
308
+ },
309
+ },
310
+ inset: {
311
+ $value: '{base.color.neutral.0}',
312
+ $type: 'color',
313
+ $extensions: {
314
+ 'org.primer.figma': {
315
+ collection: 'mode',
316
+ mode: 'dark',
317
+ scopes: ['bgColor', 'borderColor'],
318
+ group: 'semantic',
319
+ codeSyntax: {
320
+ web: 'var(--bgColor-inset) /* utility class: .color-bg-inset */',
321
+ },
322
+ },
323
+ },
324
+ },
325
+ emphasis: {
326
+ $value: '{base.color.neutral.7}',
327
+ $type: 'color',
328
+ $extensions: {
329
+ 'org.primer.figma': {
330
+ collection: 'mode',
331
+ mode: 'dark',
332
+ group: 'semantic',
333
+ scopes: ['bgColor'],
334
+ codeSyntax: {
335
+ web: 'var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */',
336
+ },
337
+ },
338
+ },
339
+ },
340
+ inverse: {
341
+ $value: '{base.color.neutral.13}',
342
+ $type: 'color',
343
+ $extensions: {
344
+ 'org.primer.figma': {
345
+ collection: 'mode',
346
+ mode: 'dark',
347
+ group: 'semantic',
348
+ scopes: ['bgColor'],
349
+ },
350
+ },
351
+ },
352
+ white: {
353
+ $value: '{base.color.neutral.13}',
354
+ $type: 'color',
355
+ $extensions: {
356
+ 'org.primer.figma': {
357
+ collection: 'mode',
358
+ mode: 'dark',
359
+ group: 'semantic',
360
+ scopes: ['bgColor'],
361
+ },
362
+ },
363
+ },
364
+ black: {
365
+ $value: '{base.color.neutral.0}',
366
+ $type: 'color',
367
+ $extensions: {
368
+ 'org.primer.figma': {
369
+ collection: 'mode',
370
+ mode: 'dark',
371
+ group: 'semantic',
372
+ scopes: ['bgColor'],
373
+ },
374
+ },
375
+ },
376
+ disabled: {
377
+ $value: '{base.color.neutral.3}',
378
+ $type: 'color',
379
+ $extensions: {
380
+ 'org.primer.figma': {
381
+ collection: 'mode',
382
+ mode: 'dark',
383
+ group: 'semantic',
384
+ scopes: ['bgColor'],
385
+ },
386
+ },
387
+ },
388
+ transparent: {
389
+ $value: '{base.color.transparent}',
390
+ $type: 'color',
391
+ $extensions: {
392
+ 'org.primer.figma': {
393
+ collection: 'mode',
394
+ mode: 'dark',
395
+ group: 'semantic',
396
+ scopes: ['bgColor'],
397
+ codeSyntax: {
398
+ web: 'var(--bgColor-transparent) /* utility class: .color-bg-transparent */',
399
+ },
400
+ },
401
+ },
402
+ },
403
+ neutral: {
404
+ muted: {
405
+ $value: '{base.color.neutral.8}',
406
+ $type: 'color',
407
+ $extensions: {
408
+ 'org.primer.figma': {
409
+ collection: 'mode',
410
+ mode: 'dark',
411
+ group: 'semantic',
412
+ scopes: ['bgColor'],
413
+ },
414
+ },
415
+ alpha: 0.2,
416
+ },
417
+ emphasis: {
418
+ $value: '{base.color.neutral.8}',
419
+ $type: 'color',
420
+ $extensions: {
421
+ 'org.primer.figma': {
422
+ collection: 'mode',
423
+ mode: 'dark',
424
+ group: 'semantic',
425
+ scopes: ['bgColor'],
426
+ },
427
+ },
428
+ },
429
+ },
430
+ accent: {
431
+ muted: {
432
+ $value: '{base.color.blue.4}',
433
+ $type: 'color',
434
+ $extensions: {
435
+ 'org.primer.figma': {
436
+ collection: 'mode',
437
+ mode: 'dark',
438
+ group: 'semantic',
439
+ scopes: ['bgColor'],
440
+ codeSyntax: {
441
+ web: 'var(--bgColor-accent-muted) /* utility class: .color-bg-accent */',
442
+ },
443
+ },
444
+ },
445
+ alpha: 0.1,
446
+ },
447
+ emphasis: {
448
+ $value: '{base.color.blue.5}',
449
+ $type: 'color',
450
+ $extensions: {
451
+ 'org.primer.figma': {
452
+ collection: 'mode',
453
+ mode: 'dark',
454
+ group: 'semantic',
455
+ scopes: ['bgColor'],
456
+ codeSyntax: {
457
+ web: 'var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */',
458
+ },
459
+ },
460
+ },
461
+ },
462
+ },
463
+ success: {
464
+ muted: {
465
+ $value: '{base.color.green.4}',
466
+ $type: 'color',
467
+ $extensions: {
468
+ 'org.primer.figma': {
469
+ collection: 'mode',
470
+ mode: 'dark',
471
+ group: 'semantic',
472
+ scopes: ['bgColor'],
473
+ codeSyntax: {
474
+ web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
475
+ },
476
+ },
477
+ },
478
+ alpha: 0.15,
479
+ },
480
+ emphasis: {
481
+ $value: '{base.color.green.5}',
482
+ $type: 'color',
483
+ $extensions: {
484
+ 'org.primer.figma': {
485
+ collection: 'mode',
486
+ mode: 'dark',
487
+ group: 'semantic',
488
+ scopes: ['bgColor'],
489
+ codeSyntax: {
490
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
491
+ },
492
+ },
493
+ },
494
+ },
495
+ },
496
+ open: {
497
+ muted: {
498
+ $value: '{bgColor.success.muted}',
499
+ $type: 'color',
500
+ $extensions: {
501
+ 'org.primer.figma': {
502
+ collection: 'mode',
503
+ mode: 'dark',
504
+ group: 'semantic',
505
+ scopes: ['bgColor'],
506
+ codeSyntax: {
507
+ web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
508
+ },
509
+ },
510
+ },
511
+ alpha: 0.15,
512
+ },
513
+ emphasis: {
514
+ $value: '{bgColor.success.emphasis}',
515
+ $type: 'color',
516
+ $extensions: {
517
+ 'org.primer.figma': {
518
+ collection: 'mode',
519
+ mode: 'dark',
520
+ group: 'semantic',
521
+ scopes: ['bgColor'],
522
+ codeSyntax: {
523
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
524
+ },
525
+ },
526
+ },
527
+ },
528
+ },
529
+ attention: {
530
+ muted: {
531
+ $value: '{base.color.yellow.4}',
532
+ $type: 'color',
533
+ $extensions: {
534
+ 'org.primer.figma': {
535
+ collection: 'mode',
536
+ mode: 'dark',
537
+ group: 'semantic',
538
+ scopes: ['bgColor'],
539
+ codeSyntax: {
540
+ web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
541
+ },
542
+ },
543
+ },
544
+ alpha: 0.15,
545
+ },
546
+ emphasis: {
547
+ $value: '{base.color.yellow.5}',
548
+ $type: 'color',
549
+ $extensions: {
550
+ 'org.primer.figma': {
551
+ collection: 'mode',
552
+ mode: 'dark',
553
+ group: 'semantic',
554
+ scopes: ['bgColor'],
555
+ codeSyntax: {
556
+ web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
557
+ },
558
+ },
559
+ },
560
+ },
561
+ },
562
+ severe: {
563
+ muted: {
564
+ $value: '{base.color.orange.4}',
565
+ $type: 'color',
566
+ $extensions: {
567
+ 'org.primer.figma': {
568
+ collection: 'mode',
569
+ mode: 'dark',
570
+ group: 'semantic',
571
+ scopes: ['bgColor'],
572
+ codeSyntax: {
573
+ web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
574
+ },
575
+ },
576
+ },
577
+ alpha: 0.1,
578
+ },
579
+ emphasis: {
580
+ $value: '{base.color.orange.5}',
581
+ $type: 'color',
582
+ $extensions: {
583
+ 'org.primer.figma': {
584
+ collection: 'mode',
585
+ mode: 'dark',
586
+ group: 'semantic',
587
+ scopes: ['bgColor'],
588
+ codeSyntax: {
589
+ web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
590
+ },
591
+ },
592
+ },
593
+ },
594
+ },
595
+ danger: {
596
+ muted: {
597
+ $value: '{base.color.red.4}',
598
+ $type: 'color',
599
+ $extensions: {
600
+ 'org.primer.figma': {
601
+ collection: 'mode',
602
+ mode: 'dark',
603
+ group: 'semantic',
604
+ scopes: ['bgColor'],
605
+ codeSyntax: {
606
+ web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
607
+ },
608
+ },
609
+ },
610
+ alpha: 0.1,
611
+ },
612
+ emphasis: {
613
+ $value: '{base.color.red.5}',
614
+ $type: 'color',
615
+ $extensions: {
616
+ 'org.primer.figma': {
617
+ collection: 'mode',
618
+ mode: 'dark',
619
+ group: 'semantic',
620
+ scopes: ['bgColor'],
621
+ codeSyntax: {
622
+ web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
623
+ },
624
+ },
625
+ },
626
+ },
627
+ },
628
+ closed: {
629
+ muted: {
630
+ $value: '{bgColor.danger.muted}',
631
+ $type: 'color',
632
+ $extensions: {
633
+ 'org.primer.figma': {
634
+ collection: 'mode',
635
+ mode: 'dark',
636
+ group: 'semantic',
637
+ scopes: ['bgColor'],
638
+ codeSyntax: {
639
+ web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
640
+ },
641
+ },
642
+ },
643
+ alpha: 0.1,
644
+ },
645
+ emphasis: {
646
+ $value: '{bgColor.danger.emphasis}',
647
+ $type: 'color',
648
+ $extensions: {
649
+ 'org.primer.figma': {
650
+ collection: 'mode',
651
+ mode: 'dark',
652
+ group: 'semantic',
653
+ scopes: ['bgColor'],
654
+ codeSyntax: {
655
+ web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
656
+ },
657
+ },
658
+ },
659
+ },
660
+ },
661
+ done: {
662
+ muted: {
663
+ $value: '{base.color.purple.4}',
664
+ $type: 'color',
665
+ $extensions: {
666
+ 'org.primer.figma': {
667
+ collection: 'mode',
668
+ mode: 'dark',
669
+ group: 'semantic',
670
+ scopes: ['bgColor'],
671
+ codeSyntax: {
672
+ web: 'var(--bgColor-done-muted) /* utility class: .color-bg-done */',
673
+ },
674
+ },
675
+ },
676
+ alpha: 0.15,
677
+ },
678
+ emphasis: {
679
+ $value: '{base.color.purple.5}',
680
+ $type: 'color',
681
+ $extensions: {
682
+ 'org.primer.figma': {
683
+ collection: 'mode',
684
+ mode: 'dark',
685
+ group: 'semantic',
686
+ scopes: ['bgColor'],
687
+ codeSyntax: {
688
+ web: 'var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */',
689
+ },
690
+ },
691
+ },
692
+ },
693
+ },
694
+ upsell: {
695
+ muted: {
696
+ $value: '{bgColor.done.muted}',
697
+ $type: 'color',
698
+ $extensions: {
699
+ 'org.primer.figma': {
700
+ collection: 'mode',
701
+ mode: 'dark',
702
+ group: 'semantic',
703
+ scopes: ['bgColor'],
704
+ codeSyntax: {
705
+ web: 'var(--bgColor-upsell-muted)',
706
+ },
707
+ },
708
+ },
709
+ alpha: 0.15,
710
+ },
711
+ emphasis: {
712
+ $value: '{bgColor.done.emphasis}',
713
+ $type: 'color',
714
+ $extensions: {
715
+ 'org.primer.figma': {
716
+ collection: 'mode',
717
+ mode: 'dark',
718
+ group: 'semantic',
719
+ scopes: ['bgColor'],
720
+ codeSyntax: {
721
+ web: 'var(--bgColor-upsell-emphasis)',
722
+ },
723
+ },
724
+ },
725
+ },
726
+ },
727
+ sponsors: {
728
+ muted: {
729
+ $value: '{base.color.pink.4}',
730
+ $type: 'color',
731
+ $extensions: {
732
+ 'org.primer.figma': {
733
+ collection: 'mode',
734
+ mode: 'dark',
735
+ group: 'semantic',
736
+ scopes: ['bgColor'],
737
+ codeSyntax: {
738
+ web: 'var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */',
739
+ },
740
+ },
741
+ },
742
+ alpha: 0.1,
743
+ },
744
+ emphasis: {
745
+ $value: '{base.color.pink.5}',
746
+ $type: 'color',
747
+ $extensions: {
748
+ 'org.primer.figma': {
749
+ collection: 'mode',
750
+ mode: 'dark',
751
+ group: 'semantic',
752
+ scopes: ['bgColor'],
753
+ codeSyntax: {
754
+ web: 'var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */',
755
+ },
756
+ },
757
+ },
758
+ },
759
+ },
760
+ },
761
+ borderColor: {
762
+ default: {
763
+ $value: '{base.color.neutral.7}',
764
+ $type: 'color',
765
+ $extensions: {
766
+ 'org.primer.figma': {
767
+ collection: 'mode',
768
+ mode: 'dark',
769
+ group: 'semantic',
770
+ scopes: ['borderColor'],
771
+ codeSyntax: {
772
+ web: 'var(--borderColor-default) /* utility class: .color-border-default */',
773
+ },
774
+ },
775
+ },
776
+ },
777
+ muted: {
778
+ $value: '{borderColor.default}',
779
+ $type: 'color',
780
+ $extensions: {
781
+ 'org.primer.figma': {
782
+ collection: 'mode',
783
+ mode: 'dark',
784
+ group: 'semantic',
785
+ scopes: ['borderColor'],
786
+ codeSyntax: {
787
+ web: 'var(--borderColor-muted) /* utility class: .color-border-muted */',
788
+ },
789
+ },
790
+ },
791
+ alpha: 0.7,
792
+ },
793
+ emphasis: {
794
+ $value: '{base.color.neutral.8}',
795
+ $type: 'color',
796
+ $extensions: {
797
+ 'org.primer.figma': {
798
+ collection: 'mode',
799
+ mode: 'dark',
800
+ group: 'semantic',
801
+ scopes: ['borderColor'],
802
+ },
803
+ },
804
+ },
805
+ disabled: {
806
+ $value: '{base.color.neutral.8}',
807
+ $type: 'color',
808
+ $extensions: {
809
+ 'org.primer.figma': {
810
+ collection: 'mode',
811
+ mode: 'dark',
812
+ group: 'semantic',
813
+ scopes: ['borderColor'],
814
+ },
815
+ },
816
+ alpha: 0.1,
817
+ },
818
+ transparent: {
819
+ $value: '{base.color.transparent}',
820
+ $type: 'color',
821
+ $extensions: {
822
+ 'org.primer.figma': {
823
+ collection: 'mode',
824
+ mode: 'dark',
825
+ group: 'semantic',
826
+ scopes: ['borderColor'],
827
+ },
828
+ },
829
+ },
830
+ translucent: {
831
+ $value: '{base.color.neutral.13}',
832
+ $type: 'color',
833
+ $extensions: {
834
+ 'org.primer.figma': {
835
+ collection: 'mode',
836
+ mode: 'dark',
837
+ group: 'component (internal)',
838
+ scopes: ['borderColor'],
839
+ },
840
+ },
841
+ alpha: 0.15,
842
+ },
843
+ neutral: {
844
+ muted: {
845
+ $value: '{borderColor.muted}',
846
+ $type: 'color',
847
+ $extensions: {
848
+ 'org.primer.figma': {
849
+ collection: 'mode',
850
+ mode: 'dark',
851
+ group: 'semantic',
852
+ scopes: ['borderColor'],
853
+ },
854
+ },
855
+ },
856
+ emphasis: {
857
+ $value: '{borderColor.emphasis}',
858
+ $type: 'color',
859
+ $extensions: {
860
+ 'org.primer.figma': {
861
+ collection: 'mode',
862
+ mode: 'dark',
863
+ group: 'semantic',
864
+ scopes: ['borderColor'],
865
+ },
866
+ },
867
+ },
868
+ },
869
+ accent: {
870
+ muted: {
871
+ $value: '{base.color.blue.4}',
872
+ $type: 'color',
873
+ $extensions: {
874
+ 'org.primer.figma': {
875
+ collection: 'mode',
876
+ mode: 'dark',
877
+ group: 'semantic',
878
+ scopes: ['borderColor'],
879
+ codeSyntax: {
880
+ web: 'var(--borderColor-accent-muted) /* utility class: .color-border-accent */',
881
+ },
882
+ },
883
+ },
884
+ alpha: 0.4,
885
+ },
886
+ emphasis: {
887
+ $value: '{base.color.blue.5}',
888
+ $type: 'color',
889
+ $extensions: {
890
+ 'org.primer.figma': {
891
+ collection: 'mode',
892
+ mode: 'dark',
893
+ group: 'semantic',
894
+ scopes: ['borderColor'],
895
+ codeSyntax: {
896
+ web: 'var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */',
897
+ },
898
+ },
899
+ },
900
+ },
901
+ },
902
+ success: {
903
+ muted: {
904
+ $value: '{base.color.green.4}',
905
+ $type: 'color',
906
+ $extensions: {
907
+ 'org.primer.figma': {
908
+ collection: 'mode',
909
+ mode: 'dark',
910
+ group: 'semantic',
911
+ scopes: ['borderColor'],
912
+ codeSyntax: {
913
+ web: 'var(--borderColor-success-muted) /* utility class: .color-border-success */',
914
+ },
915
+ },
916
+ },
917
+ alpha: 0.4,
918
+ },
919
+ emphasis: {
920
+ $value: '{base.color.green.5}',
921
+ $type: 'color',
922
+ $extensions: {
923
+ 'org.primer.figma': {
924
+ collection: 'mode',
925
+ mode: 'dark',
926
+ group: 'semantic',
927
+ scopes: ['borderColor'],
928
+ codeSyntax: {
929
+ web: 'var(--borderColor-success-emphasis) /* utility class: .color-border-success-emphasis */',
930
+ },
931
+ },
932
+ },
933
+ },
934
+ },
935
+ open: {
936
+ muted: {
937
+ $value: '{borderColor.success.muted}',
938
+ $type: 'color',
939
+ $extensions: {
940
+ 'org.primer.figma': {
941
+ collection: 'mode',
942
+ mode: 'dark',
943
+ group: 'semantic',
944
+ scopes: ['borderColor'],
945
+ codeSyntax: {
946
+ web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
947
+ },
948
+ },
949
+ },
950
+ alpha: 0.4,
951
+ },
952
+ emphasis: {
953
+ $value: '{borderColor.success.emphasis}',
954
+ $type: 'color',
955
+ $extensions: {
956
+ 'org.primer.figma': {
957
+ collection: 'mode',
958
+ mode: 'dark',
959
+ group: 'semantic',
960
+ scopes: ['borderColor'],
961
+ codeSyntax: {
962
+ web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
963
+ },
964
+ },
965
+ },
966
+ },
967
+ },
968
+ attention: {
969
+ muted: {
970
+ $value: '{base.color.yellow.4}',
971
+ $type: 'color',
972
+ $extensions: {
973
+ 'org.primer.figma': {
974
+ collection: 'mode',
975
+ mode: 'dark',
976
+ group: 'semantic',
977
+ scopes: ['borderColor'],
978
+ codeSyntax: {
979
+ web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
980
+ },
981
+ },
982
+ },
983
+ alpha: 0.4,
984
+ },
985
+ emphasis: {
986
+ $value: '{base.color.yellow.5}',
987
+ $type: 'color',
988
+ $extensions: {
989
+ 'org.primer.figma': {
990
+ collection: 'mode',
991
+ mode: 'dark',
992
+ group: 'semantic',
993
+ scopes: ['borderColor'],
994
+ codeSyntax: {
995
+ web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
996
+ },
997
+ },
998
+ },
999
+ },
1000
+ },
1001
+ severe: {
1002
+ muted: {
1003
+ $value: '{base.color.orange.4}',
1004
+ $type: 'color',
1005
+ $extensions: {
1006
+ 'org.primer.figma': {
1007
+ collection: 'mode',
1008
+ mode: 'dark',
1009
+ group: 'semantic',
1010
+ scopes: ['borderColor'],
1011
+ codeSyntax: {
1012
+ web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
1013
+ },
1014
+ },
1015
+ },
1016
+ alpha: 0.4,
1017
+ },
1018
+ emphasis: {
1019
+ $value: '{base.color.orange.5}',
1020
+ $type: 'color',
1021
+ $extensions: {
1022
+ 'org.primer.figma': {
1023
+ collection: 'mode',
1024
+ mode: 'dark',
1025
+ group: 'semantic',
1026
+ scopes: ['borderColor'],
1027
+ codeSyntax: {
1028
+ web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1029
+ },
1030
+ },
1031
+ },
1032
+ },
1033
+ },
1034
+ danger: {
1035
+ muted: {
1036
+ $value: '{base.color.red.4}',
1037
+ $type: 'color',
1038
+ $extensions: {
1039
+ 'org.primer.figma': {
1040
+ collection: 'mode',
1041
+ mode: 'dark',
1042
+ group: 'semantic',
1043
+ scopes: ['borderColor'],
1044
+ codeSyntax: {
1045
+ web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1046
+ },
1047
+ },
1048
+ },
1049
+ alpha: 0.4,
1050
+ },
1051
+ emphasis: {
1052
+ $value: '{base.color.red.5}',
1053
+ $type: 'color',
1054
+ $extensions: {
1055
+ 'org.primer.figma': {
1056
+ collection: 'mode',
1057
+ mode: 'dark',
1058
+ group: 'semantic',
1059
+ scopes: ['borderColor'],
1060
+ codeSyntax: {
1061
+ web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1062
+ },
1063
+ },
1064
+ },
1065
+ },
1066
+ },
1067
+ closed: {
1068
+ muted: {
1069
+ $value: '{borderColor.danger.muted}',
1070
+ $type: 'color',
1071
+ $extensions: {
1072
+ 'org.primer.figma': {
1073
+ collection: 'mode',
1074
+ mode: 'dark',
1075
+ group: 'semantic',
1076
+ scopes: ['borderColor'],
1077
+ codeSyntax: {
1078
+ web: 'var(--borderColor-closed-muted) /* utility class: .color-border-closed */',
1079
+ },
1080
+ },
1081
+ },
1082
+ alpha: 0.4,
1083
+ },
1084
+ emphasis: {
1085
+ $value: '{borderColor.danger.emphasis}',
1086
+ $type: 'color',
1087
+ $extensions: {
1088
+ 'org.primer.figma': {
1089
+ collection: 'mode',
1090
+ mode: 'dark',
1091
+ group: 'semantic',
1092
+ scopes: ['borderColor'],
1093
+ codeSyntax: {
1094
+ web: 'var(--borderColor-closed-emphasis) /* utility class: .color-border-closed-emphasis */',
1095
+ },
1096
+ },
1097
+ },
1098
+ },
1099
+ },
1100
+ done: {
1101
+ muted: {
1102
+ $value: '{base.color.purple.4}',
1103
+ $type: 'color',
1104
+ $extensions: {
1105
+ 'org.primer.figma': {
1106
+ collection: 'mode',
1107
+ mode: 'dark',
1108
+ group: 'semantic',
1109
+ scopes: ['borderColor'],
1110
+ codeSyntax: {
1111
+ web: 'var(--borderColor-done-muted) /* utility class: .color-border-done */',
1112
+ },
1113
+ },
1114
+ },
1115
+ alpha: 0.4,
1116
+ },
1117
+ emphasis: {
1118
+ $value: '{base.color.purple.5}',
1119
+ $type: 'color',
1120
+ $extensions: {
1121
+ 'org.primer.figma': {
1122
+ collection: 'mode',
1123
+ mode: 'dark',
1124
+ group: 'semantic',
1125
+ scopes: ['borderColor'],
1126
+ codeSyntax: {
1127
+ web: 'var(--borderColor-done-emphasis) /* utility class: .color-border-done-emphasis */',
1128
+ },
1129
+ },
1130
+ },
1131
+ },
1132
+ },
1133
+ upsell: {
1134
+ muted: {
1135
+ $value: '{borderColor.done.muted}',
1136
+ $type: 'color',
1137
+ $extensions: {
1138
+ 'org.primer.figma': {
1139
+ collection: 'mode',
1140
+ mode: 'dark',
1141
+ group: 'semantic',
1142
+ scopes: ['borderColor'],
1143
+ codeSyntax: {
1144
+ web: 'var(--borderColor-upsell-muted)',
1145
+ },
1146
+ },
1147
+ },
1148
+ alpha: 0.4,
1149
+ },
1150
+ emphasis: {
1151
+ $value: '{borderColor.done.emphasis}',
1152
+ $type: 'color',
1153
+ $extensions: {
1154
+ 'org.primer.figma': {
1155
+ collection: 'mode',
1156
+ mode: 'dark',
1157
+ group: 'semantic',
1158
+ scopes: ['borderColor'],
1159
+ codeSyntax: {
1160
+ web: 'var(--borderColor-upsell-emphasis',
1161
+ },
1162
+ },
1163
+ },
1164
+ },
1165
+ },
1166
+ sponsors: {
1167
+ muted: {
1168
+ $value: '{base.color.pink.4}',
1169
+ $type: 'color',
1170
+ $extensions: {
1171
+ 'org.primer.figma': {
1172
+ collection: 'mode',
1173
+ mode: 'dark',
1174
+ group: 'semantic',
1175
+ scopes: ['borderColor'],
1176
+ codeSyntax: {
1177
+ web: 'var(--borderColor-sponsors-muted) /* utility class: .color-border-sponsors */',
1178
+ },
1179
+ },
1180
+ },
1181
+ alpha: 0.4,
1182
+ },
1183
+ emphasis: {
1184
+ $value: '{base.color.pink.5}',
1185
+ $type: 'color',
1186
+ $extensions: {
1187
+ 'org.primer.figma': {
1188
+ collection: 'mode',
1189
+ mode: 'dark',
1190
+ group: 'semantic',
1191
+ scopes: ['borderColor'],
1192
+ codeSyntax: {
1193
+ web: 'var(--borderColor-sponsors-emphasis) /* utility class: .color-border-sponsors-emphasis */',
1194
+ },
1195
+ },
1196
+ },
1197
+ },
1198
+ },
1199
+ },
1200
+ }