@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
@@ -0,0 +1,3097 @@
1
+ {
2
+ avatar: {
3
+ bgColor: {
4
+ $value: '{base.color.neutral.13}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ mode: 'dark',
10
+ group: 'component (internal)',
11
+ scopes: ['bgColor'],
12
+ },
13
+ },
14
+ alpha: 0.1,
15
+ },
16
+ borderColor: {
17
+ $value: '{borderColor.translucent}',
18
+ $type: 'color',
19
+ $extensions: {
20
+ 'org.primer.figma': {
21
+ collection: 'mode',
22
+ mode: 'dark',
23
+ group: 'component (internal)',
24
+ scopes: ['borderColor'],
25
+ },
26
+ },
27
+ },
28
+ },
29
+ avatarStack: {
30
+ fade: {
31
+ bgColor: {
32
+ default: {
33
+ $value: '{base.color.neutral.7}',
34
+ $type: 'color',
35
+ $extensions: {
36
+ 'org.primer.figma': {
37
+ collection: 'mode',
38
+ mode: 'dark',
39
+ group: 'component (internal)',
40
+ scopes: ['bgColor'],
41
+ },
42
+ },
43
+ },
44
+ muted: {
45
+ $value: '{base.color.neutral.5}',
46
+ $type: 'color',
47
+ $extensions: {
48
+ 'org.primer.figma': {
49
+ collection: 'mode',
50
+ mode: 'dark',
51
+ group: 'component (internal)',
52
+ scopes: ['bgColor'],
53
+ },
54
+ },
55
+ },
56
+ },
57
+ },
58
+ },
59
+ control: {
60
+ bgColor: {
61
+ rest: {
62
+ $value: '{base.color.neutral.3}',
63
+ $type: 'color',
64
+ $extensions: {
65
+ 'org.primer.figma': {
66
+ collection: 'mode',
67
+ mode: 'dark',
68
+ group: 'component',
69
+ scopes: ['bgColor'],
70
+ },
71
+ },
72
+ },
73
+ hover: {
74
+ $value: '{base.color.neutral.4}',
75
+ $type: 'color',
76
+ $extensions: {
77
+ 'org.primer.figma': {
78
+ collection: 'mode',
79
+ mode: 'dark',
80
+ group: 'component',
81
+ scopes: ['bgColor'],
82
+ },
83
+ },
84
+ },
85
+ active: {
86
+ $value: '{base.color.neutral.5}',
87
+ $type: 'color',
88
+ $extensions: {
89
+ 'org.primer.figma': {
90
+ collection: 'mode',
91
+ mode: 'dark',
92
+ group: 'component',
93
+ scopes: ['bgColor'],
94
+ },
95
+ },
96
+ },
97
+ disabled: {
98
+ $value: '{bgColor.disabled}',
99
+ $type: 'color',
100
+ $extensions: {
101
+ 'org.primer.figma': {
102
+ collection: 'mode',
103
+ mode: 'dark',
104
+ group: 'component',
105
+ scopes: ['bgColor'],
106
+ },
107
+ },
108
+ },
109
+ selected: {
110
+ $value: '{control.bgColor.rest}',
111
+ $type: 'color',
112
+ $extensions: {
113
+ 'org.primer.figma': {
114
+ collection: 'mode',
115
+ mode: 'dark',
116
+ group: 'component',
117
+ scopes: ['bgColor'],
118
+ },
119
+ },
120
+ },
121
+ },
122
+ fgColor: {
123
+ rest: {
124
+ $value: '{fgColor.default}',
125
+ $type: 'color',
126
+ $extensions: {
127
+ 'org.primer.figma': {
128
+ collection: 'mode',
129
+ mode: 'dark',
130
+ group: 'component',
131
+ scopes: ['fgColor'],
132
+ },
133
+ },
134
+ },
135
+ placeholder: {
136
+ $value: '{fgColor.muted}',
137
+ $type: 'color',
138
+ $extensions: {
139
+ 'org.primer.figma': {
140
+ collection: 'mode',
141
+ mode: 'dark',
142
+ group: 'component',
143
+ scopes: ['fgColor'],
144
+ },
145
+ },
146
+ },
147
+ disabled: {
148
+ $value: '{fgColor.disabled}',
149
+ $type: 'color',
150
+ $extensions: {
151
+ 'org.primer.figma': {
152
+ collection: 'mode',
153
+ mode: 'dark',
154
+ group: 'component',
155
+ scopes: ['fgColor'],
156
+ },
157
+ },
158
+ },
159
+ },
160
+ borderColor: {
161
+ rest: {
162
+ $value: '{borderColor.default}',
163
+ $type: 'color',
164
+ $extensions: {
165
+ 'org.primer.figma': {
166
+ collection: 'mode',
167
+ mode: 'dark',
168
+ group: 'component',
169
+ scopes: ['borderColor'],
170
+ },
171
+ },
172
+ },
173
+ emphasis: {
174
+ $value: '{borderColor.emphasis}',
175
+ $type: 'color',
176
+ $extensions: {
177
+ 'org.primer.figma': {
178
+ collection: 'mode',
179
+ mode: 'dark',
180
+ group: 'component',
181
+ scopes: ['borderColor'],
182
+ },
183
+ },
184
+ },
185
+ disabled: {
186
+ $value: '{borderColor.disabled}',
187
+ $type: 'color',
188
+ $extensions: {
189
+ 'org.primer.figma': {
190
+ collection: 'mode',
191
+ mode: 'dark',
192
+ group: 'component',
193
+ scopes: ['borderColor'],
194
+ },
195
+ },
196
+ },
197
+ selected: {
198
+ $value: '{base.color.neutral.12}',
199
+ $type: 'color',
200
+ $extensions: {
201
+ 'org.primer.figma': {
202
+ collection: 'mode',
203
+ mode: 'dark',
204
+ group: 'component',
205
+ scopes: ['borderColor'],
206
+ },
207
+ },
208
+ },
209
+ success: {
210
+ $value: '{borderColor.success.emphasis}',
211
+ $type: 'color',
212
+ $extensions: {
213
+ 'org.primer.figma': {
214
+ collection: 'mode',
215
+ mode: 'dark',
216
+ group: 'component',
217
+ scopes: ['borderColor'],
218
+ },
219
+ },
220
+ },
221
+ danger: {
222
+ $value: '{borderColor.danger.emphasis}',
223
+ $type: 'color',
224
+ $extensions: {
225
+ 'org.primer.figma': {
226
+ collection: 'mode',
227
+ mode: 'dark',
228
+ group: 'component',
229
+ scopes: ['borderColor'],
230
+ },
231
+ },
232
+ },
233
+ warning: {
234
+ $value: '{borderColor.attention.emphasis}',
235
+ $type: 'color',
236
+ $extensions: {
237
+ 'org.primer.figma': {
238
+ collection: 'mode',
239
+ mode: 'dark',
240
+ group: 'component',
241
+ scopes: ['borderColor'],
242
+ },
243
+ },
244
+ },
245
+ },
246
+ iconColor: {
247
+ rest: {
248
+ $value: '{fgColor.muted}',
249
+ $type: 'color',
250
+ $extensions: {
251
+ 'org.primer.figma': {
252
+ collection: 'mode',
253
+ mode: 'dark',
254
+ group: 'component',
255
+ scopes: ['fgColor'],
256
+ },
257
+ },
258
+ },
259
+ },
260
+ transparent: {
261
+ bgColor: {
262
+ rest: {
263
+ $value: '{base.color.transparent}',
264
+ $type: 'color',
265
+ $extensions: {
266
+ 'org.primer.figma': {
267
+ collection: 'mode',
268
+ mode: 'dark',
269
+ group: 'component',
270
+ scopes: ['bgColor'],
271
+ },
272
+ },
273
+ },
274
+ hover: {
275
+ $value: '{base.color.neutral.8}',
276
+ $type: 'color',
277
+ $extensions: {
278
+ 'org.primer.figma': {
279
+ collection: 'mode',
280
+ mode: 'dark',
281
+ group: 'component',
282
+ scopes: ['bgColor'],
283
+ },
284
+ },
285
+ alpha: 0.2,
286
+ },
287
+ active: {
288
+ $value: '{base.color.neutral.8}',
289
+ $type: 'color',
290
+ $extensions: {
291
+ 'org.primer.figma': {
292
+ collection: 'mode',
293
+ mode: 'dark',
294
+ group: 'component',
295
+ scopes: ['bgColor'],
296
+ },
297
+ },
298
+ alpha: 0.25,
299
+ },
300
+ disabled: {
301
+ $value: '{bgColor.disabled}',
302
+ $type: 'color',
303
+ $extensions: {
304
+ 'org.primer.figma': {
305
+ collection: 'mode',
306
+ mode: 'dark',
307
+ group: 'component',
308
+ scopes: ['bgColor'],
309
+ },
310
+ },
311
+ },
312
+ selected: {
313
+ $value: '{base.color.neutral.8}',
314
+ $type: 'color',
315
+ $extensions: {
316
+ 'org.primer.figma': {
317
+ collection: 'mode',
318
+ mode: 'dark',
319
+ group: 'component',
320
+ scopes: ['bgColor'],
321
+ },
322
+ },
323
+ alpha: 0.1,
324
+ },
325
+ },
326
+ borderColor: {
327
+ rest: {
328
+ $value: '{base.color.transparent}',
329
+ $type: 'color',
330
+ $extensions: {
331
+ 'org.primer.figma': {
332
+ collection: 'mode',
333
+ mode: 'dark',
334
+ group: 'component',
335
+ scopes: ['borderColor'],
336
+ },
337
+ },
338
+ },
339
+ hover: {
340
+ $value: '{base.color.transparent}',
341
+ $type: 'color',
342
+ $extensions: {
343
+ 'org.primer.figma': {
344
+ collection: 'mode',
345
+ mode: 'dark',
346
+ group: 'component',
347
+ scopes: ['borderColor'],
348
+ },
349
+ },
350
+ },
351
+ active: {
352
+ $value: '{base.color.transparent}',
353
+ $type: 'color',
354
+ $extensions: {
355
+ 'org.primer.figma': {
356
+ collection: 'mode',
357
+ mode: 'dark',
358
+ group: 'component',
359
+ scopes: ['borderColor'],
360
+ },
361
+ },
362
+ },
363
+ },
364
+ },
365
+ danger: {
366
+ fgColor: {
367
+ rest: {
368
+ $value: '{fgColor.danger}',
369
+ $type: 'color',
370
+ $extensions: {
371
+ 'org.primer.figma': {
372
+ collection: 'mode',
373
+ mode: 'dark',
374
+ group: 'component',
375
+ scopes: ['fgColor'],
376
+ },
377
+ },
378
+ },
379
+ hover: {
380
+ $value: '{base.color.red.3}',
381
+ $type: 'color',
382
+ $extensions: {
383
+ 'org.primer.figma': {
384
+ collection: 'mode',
385
+ mode: 'dark',
386
+ group: 'component',
387
+ scopes: ['fgColor'],
388
+ },
389
+ },
390
+ },
391
+ },
392
+ bgColor: {
393
+ hover: {
394
+ $value: '{bgColor.danger.muted}',
395
+ $type: 'color',
396
+ $extensions: {
397
+ 'org.primer.figma': {
398
+ collection: 'mode',
399
+ mode: 'dark',
400
+ group: 'component',
401
+ scopes: ['bgColor'],
402
+ },
403
+ },
404
+ },
405
+ active: {
406
+ $value: '{bgColor.danger.muted}',
407
+ $type: 'color',
408
+ $extensions: {
409
+ 'org.primer.figma': {
410
+ collection: 'mode',
411
+ mode: 'dark',
412
+ group: 'component',
413
+ scopes: ['bgColor'],
414
+ },
415
+ },
416
+ alpha: 0.4,
417
+ },
418
+ },
419
+ },
420
+ checked: {
421
+ bgColor: {
422
+ rest: {
423
+ $value: '{bgColor.accent.emphasis}',
424
+ $type: 'color',
425
+ $extensions: {
426
+ 'org.primer.figma': {
427
+ collection: 'mode',
428
+ mode: 'dark',
429
+ group: 'component',
430
+ scopes: ['bgColor'],
431
+ },
432
+ },
433
+ },
434
+ hover: {
435
+ $value: '{bgColor.accent.emphasis}',
436
+ $type: 'color',
437
+ $extensions: {
438
+ 'org.primer.figma': {
439
+ collection: 'mode',
440
+ mode: 'dark',
441
+ group: 'component',
442
+ scopes: ['bgColor'],
443
+ },
444
+ },
445
+ mix: {
446
+ color: '{base.color.blue.3}',
447
+ weight: 0.2,
448
+ },
449
+ },
450
+ active: {
451
+ $value: '{bgColor.accent.emphasis}',
452
+ $type: 'color',
453
+ $extensions: {
454
+ 'org.primer.figma': {
455
+ collection: 'mode',
456
+ mode: 'dark',
457
+ group: 'component',
458
+ scopes: ['bgColor'],
459
+ },
460
+ },
461
+ mix: {
462
+ color: '{base.color.blue.3}',
463
+ weight: 0.4,
464
+ },
465
+ },
466
+ disabled: {
467
+ $value: '{fgColor.disabled}',
468
+ $type: 'color',
469
+ $extensions: {
470
+ 'org.primer.figma': {
471
+ collection: 'mode',
472
+ mode: 'dark',
473
+ group: 'component',
474
+ scopes: ['bgColor'],
475
+ },
476
+ },
477
+ },
478
+ },
479
+ fgColor: {
480
+ rest: {
481
+ $value: '{fgColor.onEmphasis}',
482
+ $type: 'color',
483
+ $extensions: {
484
+ 'org.primer.figma': {
485
+ collection: 'mode',
486
+ mode: 'dark',
487
+ group: 'component',
488
+ scopes: ['fgColor'],
489
+ },
490
+ },
491
+ },
492
+ disabled: {
493
+ $value: '{base.color.inset}',
494
+ $type: 'color',
495
+ $extensions: {
496
+ 'org.primer.figma': {
497
+ collection: 'mode',
498
+ mode: 'dark',
499
+ group: 'component',
500
+ scopes: ['fgColor'],
501
+ },
502
+ },
503
+ },
504
+ },
505
+ borderColor: {
506
+ rest: {
507
+ $value: '{control.checked.bgColor.rest}',
508
+ $type: 'color',
509
+ $extensions: {
510
+ 'org.primer.figma': {
511
+ collection: 'mode',
512
+ mode: 'dark',
513
+ group: 'component',
514
+ scopes: ['borderColor'],
515
+ },
516
+ },
517
+ },
518
+ hover: {
519
+ $value: '{control.checked.bgColor.hover}',
520
+ $type: 'color',
521
+ $extensions: {
522
+ 'org.primer.figma': {
523
+ collection: 'mode',
524
+ mode: 'dark',
525
+ group: 'component',
526
+ scopes: ['borderColor'],
527
+ },
528
+ },
529
+ },
530
+ active: {
531
+ $value: '{control.checked.bgColor.active}',
532
+ $type: 'color',
533
+ $extensions: {
534
+ 'org.primer.figma': {
535
+ collection: 'mode',
536
+ mode: 'dark',
537
+ group: 'component',
538
+ scopes: ['borderColor'],
539
+ },
540
+ },
541
+ },
542
+ disabled: {
543
+ $value: '{control.checked.bgColor.disabled}',
544
+ $type: 'color',
545
+ $extensions: {
546
+ 'org.primer.figma': {
547
+ collection: 'mode',
548
+ mode: 'dark',
549
+ group: 'component',
550
+ scopes: ['borderColor'],
551
+ },
552
+ },
553
+ },
554
+ },
555
+ },
556
+ },
557
+ controlTrack: {
558
+ bgColor: {
559
+ rest: {
560
+ $value: '{base.color.neutral.4}',
561
+ $type: 'color',
562
+ $extensions: {
563
+ 'org.primer.figma': {
564
+ collection: 'mode',
565
+ mode: 'dark',
566
+ group: 'component (internal)',
567
+ scopes: ['bgColor'],
568
+ },
569
+ },
570
+ },
571
+ hover: {
572
+ $value: '{base.color.neutral.5}',
573
+ $type: 'color',
574
+ $extensions: {
575
+ 'org.primer.figma': {
576
+ collection: 'mode',
577
+ mode: 'dark',
578
+ group: 'component (internal)',
579
+ scopes: ['bgColor'],
580
+ },
581
+ },
582
+ },
583
+ active: {
584
+ $value: '{base.color.neutral.6}',
585
+ $type: 'color',
586
+ $extensions: {
587
+ 'org.primer.figma': {
588
+ collection: 'mode',
589
+ mode: 'dark',
590
+ group: 'component (internal)',
591
+ scopes: ['bgColor'],
592
+ },
593
+ },
594
+ },
595
+ disabled: {
596
+ $value: '{fgColor.disabled}',
597
+ $type: 'color',
598
+ $extensions: {
599
+ 'org.primer.figma': {
600
+ collection: 'mode',
601
+ mode: 'dark',
602
+ group: 'component (internal)',
603
+ scopes: ['bgColor'],
604
+ },
605
+ },
606
+ },
607
+ },
608
+ fgColor: {
609
+ rest: {
610
+ $value: '{fgColor.muted}',
611
+ $type: 'color',
612
+ $extensions: {
613
+ 'org.primer.figma': {
614
+ collection: 'mode',
615
+ mode: 'dark',
616
+ group: 'component (internal)',
617
+ scopes: ['fgColor'],
618
+ },
619
+ },
620
+ },
621
+ disabled: {
622
+ $value: '{fgColor.onEmphasis}',
623
+ $type: 'color',
624
+ $extensions: {
625
+ 'org.primer.figma': {
626
+ collection: 'mode',
627
+ mode: 'dark',
628
+ group: 'component (internal)',
629
+ scopes: ['fgColor'],
630
+ },
631
+ },
632
+ },
633
+ },
634
+ borderColor: {
635
+ rest: {
636
+ $value: '{borderColor.default}',
637
+ $type: 'color',
638
+ $extensions: {
639
+ 'org.primer.figma': {
640
+ collection: 'mode',
641
+ mode: 'dark',
642
+ group: 'component (internal)',
643
+ scopes: ['borderColor'],
644
+ },
645
+ },
646
+ },
647
+ disabled: {
648
+ $value: '{fgColor.disabled}',
649
+ $type: 'color',
650
+ $extensions: {
651
+ 'org.primer.figma': {
652
+ collection: 'mode',
653
+ mode: 'dark',
654
+ group: 'component (internal)',
655
+ scopes: ['borderColor'],
656
+ },
657
+ },
658
+ },
659
+ },
660
+ },
661
+ controlKnob: {
662
+ bgColor: {
663
+ rest: {
664
+ $value: '{bgColor.inset}',
665
+ $type: 'color',
666
+ $extensions: {
667
+ 'org.primer.figma': {
668
+ collection: 'mode',
669
+ mode: 'dark',
670
+ group: 'component (internal)',
671
+ scopes: ['bgColor'],
672
+ },
673
+ },
674
+ },
675
+ disabled: {
676
+ $value: '{control.bgColor.disabled}',
677
+ $type: 'color',
678
+ $extensions: {
679
+ 'org.primer.figma': {
680
+ collection: 'mode',
681
+ mode: 'dark',
682
+ group: 'component (internal)',
683
+ scopes: ['bgColor'],
684
+ },
685
+ },
686
+ },
687
+ checked: {
688
+ $value: '{base.color.neutral.13}',
689
+ $type: 'color',
690
+ $extensions: {
691
+ 'org.primer.figma': {
692
+ collection: 'mode',
693
+ mode: 'dark',
694
+ group: 'component (internal)',
695
+ scopes: ['bgColor'],
696
+ },
697
+ },
698
+ },
699
+ },
700
+ borderColor: {
701
+ rest: {
702
+ $value: '{control.borderColor.emphasis}',
703
+ $type: 'color',
704
+ $extensions: {
705
+ 'org.primer.figma': {
706
+ collection: 'mode',
707
+ mode: 'dark',
708
+ group: 'component (internal)',
709
+ scopes: ['borderColor'],
710
+ },
711
+ },
712
+ },
713
+ disabled: {
714
+ $value: '{control.bgColor.disabled}',
715
+ $type: 'color',
716
+ $extensions: {
717
+ 'org.primer.figma': {
718
+ collection: 'mode',
719
+ mode: 'dark',
720
+ group: 'component (internal)',
721
+ scopes: ['borderColor'],
722
+ },
723
+ },
724
+ },
725
+ checked: {
726
+ $value: '{control.checked.bgColor.rest}',
727
+ $type: 'color',
728
+ $extensions: {
729
+ 'org.primer.figma': {
730
+ collection: 'mode',
731
+ mode: 'dark',
732
+ group: 'component (internal)',
733
+ scopes: ['borderColor'],
734
+ },
735
+ },
736
+ },
737
+ },
738
+ },
739
+ counter: {
740
+ borderColor: {
741
+ $value: '{base.color.transparent}',
742
+ $type: 'color',
743
+ $extensions: {
744
+ 'org.primer.figma': {
745
+ collection: 'mode',
746
+ mode: 'dark',
747
+ group: 'component (internal)',
748
+ scopes: ['borderColor'],
749
+ },
750
+ },
751
+ },
752
+ bgColor: {
753
+ muted: {
754
+ $value: '{bgColor.neutral.muted}',
755
+ $type: 'color',
756
+ $extensions: {
757
+ 'org.primer.figma': {
758
+ collection: 'mode',
759
+ mode: 'dark',
760
+ group: 'component',
761
+ scopes: ['bgColor'],
762
+ },
763
+ },
764
+ },
765
+ emphasis: {
766
+ $value: '{bgColor.neutral.emphasis}',
767
+ $type: 'color',
768
+ $extensions: {
769
+ 'org.primer.figma': {
770
+ collection: 'mode',
771
+ mode: 'dark',
772
+ group: 'component',
773
+ scopes: ['bgColor'],
774
+ },
775
+ },
776
+ }
777
+ },
778
+ },
779
+ button: {
780
+ default: {
781
+ fgColor: {
782
+ rest: {
783
+ $value: '{control.fgColor.rest}',
784
+ $type: 'color',
785
+ $extensions: {
786
+ 'org.primer.figma': {
787
+ collection: 'mode',
788
+ mode: 'dark',
789
+ group: 'component (internal)',
790
+ scopes: ['fgColor'],
791
+ },
792
+ },
793
+ },
794
+ },
795
+ bgColor: {
796
+ rest: {
797
+ $value: '{control.bgColor.rest}',
798
+ $type: 'color',
799
+ $extensions: {
800
+ 'org.primer.figma': {
801
+ collection: 'mode',
802
+ mode: 'dark',
803
+ group: 'component (internal)',
804
+ scopes: ['bgColor'],
805
+ },
806
+ },
807
+ },
808
+ hover: {
809
+ $value: '{control.bgColor.hover}',
810
+ $type: 'color',
811
+ $extensions: {
812
+ 'org.primer.figma': {
813
+ collection: 'mode',
814
+ mode: 'dark',
815
+ group: 'component (internal)',
816
+ scopes: ['bgColor'],
817
+ },
818
+ },
819
+ },
820
+ active: {
821
+ $value: '{control.bgColor.active}',
822
+ $type: 'color',
823
+ $extensions: {
824
+ 'org.primer.figma': {
825
+ collection: 'mode',
826
+ mode: 'dark',
827
+ group: 'component (internal)',
828
+ scopes: ['bgColor'],
829
+ },
830
+ },
831
+ },
832
+ selected: {
833
+ $value: '{control.bgColor.active}',
834
+ $type: 'color',
835
+ $extensions: {
836
+ 'org.primer.figma': {
837
+ collection: 'mode',
838
+ mode: 'dark',
839
+ group: 'component (internal)',
840
+ scopes: ['bgColor'],
841
+ },
842
+ },
843
+ },
844
+ disabled: {
845
+ $value: '{control.bgColor.disabled}',
846
+ $type: 'color',
847
+ $extensions: {
848
+ 'org.primer.figma': {
849
+ collection: 'mode',
850
+ mode: 'dark',
851
+ group: 'component (internal)',
852
+ scopes: ['bgColor'],
853
+ },
854
+ },
855
+ },
856
+ },
857
+ borderColor: {
858
+ rest: {
859
+ $value: '{control.borderColor.rest}',
860
+ $type: 'color',
861
+ $extensions: {
862
+ 'org.primer.figma': {
863
+ collection: 'mode',
864
+ mode: 'dark',
865
+ group: 'component (internal)',
866
+ scopes: ['borderColor'],
867
+ },
868
+ },
869
+ },
870
+ hover: {
871
+ $value: '{button.default.borderColor.rest}',
872
+ $type: 'color',
873
+ $extensions: {
874
+ 'org.primer.figma': {
875
+ collection: 'mode',
876
+ mode: 'dark',
877
+ group: 'component (internal)',
878
+ scopes: ['borderColor'],
879
+ },
880
+ },
881
+ },
882
+ active: {
883
+ $value: '{button.default.borderColor.rest}',
884
+ $type: 'color',
885
+ $extensions: {
886
+ 'org.primer.figma': {
887
+ collection: 'mode',
888
+ mode: 'dark',
889
+ group: 'component (internal)',
890
+ scopes: ['borderColor'],
891
+ },
892
+ },
893
+ },
894
+ disabled: {
895
+ $value: '{control.borderColor.disabled}',
896
+ $type: 'color',
897
+ $extensions: {
898
+ 'org.primer.figma': {
899
+ collection: 'mode',
900
+ mode: 'dark',
901
+ group: 'component (internal)',
902
+ scopes: ['borderColor'],
903
+ },
904
+ },
905
+ },
906
+ },
907
+ },
908
+ primary: {
909
+ fgColor: {
910
+ rest: {
911
+ $value: '{fgColor.white}',
912
+ $type: 'color',
913
+ $extensions: {
914
+ 'org.primer.figma': {
915
+ collection: 'mode',
916
+ mode: 'dark',
917
+ group: 'component (internal)',
918
+ scopes: ['fgColor'],
919
+ },
920
+ },
921
+ },
922
+ disabled: {
923
+ $value: '{base.color.neutral.13}',
924
+ $type: 'color',
925
+ $extensions: {
926
+ 'org.primer.figma': {
927
+ collection: 'mode',
928
+ mode: 'dark',
929
+ group: 'component (internal)',
930
+ scopes: ['fgColor'],
931
+ },
932
+ },
933
+ alpha: 0.4,
934
+ },
935
+ },
936
+ iconColor: {
937
+ rest: {
938
+ $value: '{fgColor.white}',
939
+ $type: 'color',
940
+ $extensions: {
941
+ 'org.primer.figma': {
942
+ collection: 'mode',
943
+ mode: 'dark',
944
+ group: 'component (internal)',
945
+ scopes: ['fgColor'],
946
+ },
947
+ },
948
+ },
949
+ },
950
+ bgColor: {
951
+ rest: {
952
+ $value: '{bgColor.success.emphasis}',
953
+ $type: 'color',
954
+ $extensions: {
955
+ 'org.primer.figma': {
956
+ collection: 'mode',
957
+ mode: 'dark',
958
+ group: 'component (internal)',
959
+ scopes: ['bgColor'],
960
+ },
961
+ },
962
+ },
963
+ hover: {
964
+ $value: '{bgColor.success.emphasis}',
965
+ $type: 'color',
966
+ $extensions: {
967
+ 'org.primer.figma': {
968
+ collection: 'mode',
969
+ mode: 'dark',
970
+ group: 'component (internal)',
971
+ scopes: ['bgColor'],
972
+ },
973
+ },
974
+ mix: {
975
+ color: '{base.color.green.3}',
976
+ weight: 0.2,
977
+ },
978
+ },
979
+ active: {
980
+ $value: '{bgColor.success.emphasis}',
981
+ $type: 'color',
982
+ $extensions: {
983
+ 'org.primer.figma': {
984
+ collection: 'mode',
985
+ mode: 'dark',
986
+ group: 'component (internal)',
987
+ scopes: ['bgColor'],
988
+ },
989
+ },
990
+ mix: {
991
+ color: '{base.color.green.3}',
992
+ weight: 0.4,
993
+ },
994
+ },
995
+ disabled: {
996
+ $value: '{base.color.green.5}',
997
+ $type: 'color',
998
+ $extensions: {
999
+ 'org.primer.figma': {
1000
+ collection: 'mode',
1001
+ mode: 'dark',
1002
+ group: 'component (internal)',
1003
+ scopes: ['bgColor'],
1004
+ },
1005
+ },
1006
+ mix: {
1007
+ color: '{base.color.green.8}',
1008
+ weight: 0.6,
1009
+ },
1010
+ },
1011
+ },
1012
+ borderColor: {
1013
+ rest: {
1014
+ $value: '{base.color.neutral.13}',
1015
+ $type: 'color',
1016
+ $extensions: {
1017
+ 'org.primer.figma': {
1018
+ collection: 'mode',
1019
+ mode: 'dark',
1020
+ group: 'component (internal)',
1021
+ scopes: ['borderColor'],
1022
+ },
1023
+ },
1024
+ alpha: 0.1,
1025
+ },
1026
+ hover: {
1027
+ $value: '{button.primary.borderColor.rest}',
1028
+ $type: 'color',
1029
+ $extensions: {
1030
+ 'org.primer.figma': {
1031
+ collection: 'mode',
1032
+ mode: 'dark',
1033
+ group: 'component (internal)',
1034
+ scopes: ['borderColor'],
1035
+ },
1036
+ },
1037
+ },
1038
+ active: {
1039
+ $value: '{button.primary.borderColor.rest}',
1040
+ $type: 'color',
1041
+ $extensions: {
1042
+ 'org.primer.figma': {
1043
+ collection: 'mode',
1044
+ mode: 'dark',
1045
+ group: 'component (internal)',
1046
+ scopes: ['borderColor'],
1047
+ },
1048
+ },
1049
+ },
1050
+ disabled: {
1051
+ $value: '{button.primary.bgColor.disabled}',
1052
+ $type: 'color',
1053
+ $extensions: {
1054
+ 'org.primer.figma': {
1055
+ collection: 'mode',
1056
+ mode: 'dark',
1057
+ group: 'component (internal)',
1058
+ scopes: ['borderColor'],
1059
+ },
1060
+ },
1061
+ },
1062
+ },
1063
+ },
1064
+ invisible: {
1065
+ fgColor: {
1066
+ rest: {
1067
+ $value: '{control.fgColor.rest}',
1068
+ $type: 'color',
1069
+ $extensions: {
1070
+ 'org.primer.figma': {
1071
+ collection: 'mode',
1072
+ mode: 'dark',
1073
+ group: 'component (internal)',
1074
+ scopes: ['fgColor'],
1075
+ },
1076
+ },
1077
+ },
1078
+ hover: {
1079
+ $value: '{control.fgColor.rest}',
1080
+ $type: 'color',
1081
+ $extensions: {
1082
+ 'org.primer.figma': {
1083
+ collection: 'mode',
1084
+ mode: 'dark',
1085
+ group: 'component (internal)',
1086
+ scopes: ['fgColor'],
1087
+ },
1088
+ },
1089
+ },
1090
+ disabled: {
1091
+ $value: '{control.fgColor.disabled}',
1092
+ $type: 'color',
1093
+ $extensions: {
1094
+ 'org.primer.figma': {
1095
+ collection: 'mode',
1096
+ mode: 'dark',
1097
+ group: 'component (internal)',
1098
+ scopes: ['fgColor'],
1099
+ },
1100
+ },
1101
+ },
1102
+ },
1103
+ iconColor: {
1104
+ rest: {
1105
+ $value: '{fgColor.muted}',
1106
+ $type: 'color',
1107
+ $extensions: {
1108
+ 'org.primer.figma': {
1109
+ collection: 'mode',
1110
+ mode: 'dark',
1111
+ group: 'component (internal)',
1112
+ scopes: ['fgColor'],
1113
+ },
1114
+ },
1115
+ },
1116
+ hover: {
1117
+ $value: '{fgColor.muted}',
1118
+ $type: 'color',
1119
+ $extensions: {
1120
+ 'org.primer.figma': {
1121
+ collection: 'mode',
1122
+ mode: 'dark',
1123
+ group: 'component (internal)',
1124
+ scopes: ['fgColor'],
1125
+ },
1126
+ },
1127
+ },
1128
+ disabled: {
1129
+ $value: '{control.fgColor.disabled}',
1130
+ $type: 'color',
1131
+ $extensions: {
1132
+ 'org.primer.figma': {
1133
+ collection: 'mode',
1134
+ mode: 'light',
1135
+ group: 'component (internal)',
1136
+ scopes: ['fgColor'],
1137
+ },
1138
+ },
1139
+ },
1140
+ },
1141
+ bgColor: {
1142
+ rest: {
1143
+ $value: '{control.transparent.bgColor.rest}',
1144
+ $type: 'color',
1145
+ $extensions: {
1146
+ 'org.primer.figma': {
1147
+ collection: 'mode',
1148
+ mode: 'dark',
1149
+ group: 'component (internal)',
1150
+ scopes: ['bgColor'],
1151
+ },
1152
+ },
1153
+ },
1154
+ hover: {
1155
+ $value: '{control.transparent.bgColor.hover}',
1156
+ $type: 'color',
1157
+ $extensions: {
1158
+ 'org.primer.figma': {
1159
+ collection: 'mode',
1160
+ mode: 'dark',
1161
+ group: 'component (internal)',
1162
+ scopes: ['bgColor'],
1163
+ },
1164
+ },
1165
+ },
1166
+ active: {
1167
+ $value: '{control.transparent.bgColor.active}',
1168
+ $type: 'color',
1169
+ $extensions: {
1170
+ 'org.primer.figma': {
1171
+ collection: 'mode',
1172
+ mode: 'dark',
1173
+ group: 'component (internal)',
1174
+ scopes: ['bgColor'],
1175
+ },
1176
+ },
1177
+ },
1178
+ disabled: {
1179
+ $value: '{control.transparent.bgColor.disabled}',
1180
+ $type: 'color',
1181
+ $extensions: {
1182
+ 'org.primer.figma': {
1183
+ collection: 'mode',
1184
+ mode: 'dark',
1185
+ group: 'component (internal)',
1186
+ scopes: ['bgColor'],
1187
+ },
1188
+ },
1189
+ },
1190
+ },
1191
+ borderColor: {
1192
+ rest: {
1193
+ $value: '{control.transparent.borderColor.rest}',
1194
+ $type: 'color',
1195
+ $extensions: {
1196
+ 'org.primer.figma': {
1197
+ collection: 'mode',
1198
+ mode: 'dark',
1199
+ group: 'component (internal)',
1200
+ scopes: ['borderColor'],
1201
+ },
1202
+ },
1203
+ },
1204
+ hover: {
1205
+ $value: '{control.transparent.borderColor.hover}',
1206
+ $type: 'color',
1207
+ $extensions: {
1208
+ 'org.primer.figma': {
1209
+ collection: 'mode',
1210
+ mode: 'dark',
1211
+ group: 'component (internal)',
1212
+ scopes: ['borderColor'],
1213
+ },
1214
+ },
1215
+ },
1216
+ disabled: {
1217
+ $value: '{control.borderColor.disabled}',
1218
+ $type: 'color',
1219
+ $extensions: {
1220
+ 'org.primer.figma': {
1221
+ collection: 'mode',
1222
+ mode: 'dark',
1223
+ group: 'component (internal)',
1224
+ scopes: ['borderColor'],
1225
+ },
1226
+ },
1227
+ },
1228
+ },
1229
+ },
1230
+ outline: {
1231
+ fgColor: {
1232
+ rest: {
1233
+ $value: '{base.color.blue.4}',
1234
+ $type: 'color',
1235
+ $extensions: {
1236
+ 'org.primer.figma': {
1237
+ collection: 'mode',
1238
+ mode: 'dark',
1239
+ group: 'component (internal)',
1240
+ scopes: ['fgColor'],
1241
+ },
1242
+ },
1243
+ },
1244
+ hover: {
1245
+ $value: '{base.color.blue.3}',
1246
+ $type: 'color',
1247
+ $extensions: {
1248
+ 'org.primer.figma': {
1249
+ collection: 'mode',
1250
+ mode: 'dark',
1251
+ group: 'component (internal)',
1252
+ scopes: ['fgColor'],
1253
+ },
1254
+ },
1255
+ },
1256
+ active: {
1257
+ $value: '{base.color.neutral.13}',
1258
+ $type: 'color',
1259
+ $extensions: {
1260
+ 'org.primer.figma': {
1261
+ collection: 'mode',
1262
+ mode: 'dark',
1263
+ group: 'component (internal)',
1264
+ scopes: ['fgColor'],
1265
+ },
1266
+ },
1267
+ },
1268
+ disabled: {
1269
+ $value: '{fgColor.accent}',
1270
+ $type: 'color',
1271
+ $extensions: {
1272
+ 'org.primer.figma': {
1273
+ collection: 'mode',
1274
+ mode: 'dark',
1275
+ group: 'component (internal)',
1276
+ scopes: ['fgColor'],
1277
+ },
1278
+ },
1279
+ alpha: 0.5,
1280
+ },
1281
+ },
1282
+ bgColor: {
1283
+ rest: {
1284
+ $value: '{base.color.neutral.12}',
1285
+ $type: 'color',
1286
+ $extensions: {
1287
+ 'org.primer.figma': {
1288
+ collection: 'mode',
1289
+ mode: 'dark',
1290
+ group: 'component (internal)',
1291
+ scopes: ['bgColor'],
1292
+ },
1293
+ },
1294
+ },
1295
+ hover: {
1296
+ $value: '{control.bgColor.hover}',
1297
+ $type: 'color',
1298
+ $extensions: {
1299
+ 'org.primer.figma': {
1300
+ collection: 'mode',
1301
+ mode: 'dark',
1302
+ group: 'component (internal)',
1303
+ scopes: ['bgColor'],
1304
+ },
1305
+ },
1306
+ },
1307
+ active: {
1308
+ $value: '{base.color.blue.7}',
1309
+ $type: 'color',
1310
+ $extensions: {
1311
+ 'org.primer.figma': {
1312
+ collection: 'mode',
1313
+ mode: 'dark',
1314
+ group: 'component (internal)',
1315
+ scopes: ['bgColor'],
1316
+ },
1317
+ },
1318
+ },
1319
+ disabled: {
1320
+ $value: '{control.bgColor.disabled}',
1321
+ $type: 'color',
1322
+ $extensions: {
1323
+ 'org.primer.figma': {
1324
+ collection: 'mode',
1325
+ mode: 'dark',
1326
+ group: 'component (internal)',
1327
+ scopes: ['bgColor'],
1328
+ },
1329
+ },
1330
+ },
1331
+ },
1332
+ borderColor: {
1333
+ hover: {
1334
+ $value: '{button.default.borderColor.hover}',
1335
+ $type: 'color',
1336
+ $extensions: {
1337
+ 'org.primer.figma': {
1338
+ collection: 'mode',
1339
+ mode: 'dark',
1340
+ group: 'component (internal)',
1341
+ scopes: ['borderColor'],
1342
+ },
1343
+ },
1344
+ },
1345
+ selected: {
1346
+ $value: '{button.outline.borderColor.hover}',
1347
+ $type: 'color',
1348
+ $extensions: {
1349
+ 'org.primer.figma': {
1350
+ collection: 'mode',
1351
+ mode: 'dark',
1352
+ group: 'component (internal)',
1353
+ scopes: ['borderColor'],
1354
+ },
1355
+ },
1356
+ },
1357
+ },
1358
+ },
1359
+ danger: {
1360
+ fgColor: {
1361
+ rest: {
1362
+ $value: '{base.color.red.4}',
1363
+ $type: 'color',
1364
+ $extensions: {
1365
+ 'org.primer.figma': {
1366
+ collection: 'mode',
1367
+ mode: 'dark',
1368
+ group: 'component (internal)',
1369
+ scopes: ['fgColor'],
1370
+ },
1371
+ },
1372
+ mix: {
1373
+ color: '{base.color.red.3}',
1374
+ weight: 0.3,
1375
+ },
1376
+ },
1377
+ hover: {
1378
+ $value: '{base.color.neutral.13}',
1379
+ $type: 'color',
1380
+ $extensions: {
1381
+ 'org.primer.figma': {
1382
+ collection: 'mode',
1383
+ mode: 'dark',
1384
+ group: 'component (internal)',
1385
+ scopes: ['fgColor'],
1386
+ },
1387
+ },
1388
+ },
1389
+ active: {
1390
+ $value: '{base.color.neutral.13}',
1391
+ $type: 'color',
1392
+ $extensions: {
1393
+ 'org.primer.figma': {
1394
+ collection: 'mode',
1395
+ mode: 'dark',
1396
+ group: 'component (internal)',
1397
+ scopes: ['fgColor'],
1398
+ },
1399
+ },
1400
+ },
1401
+ disabled: {
1402
+ $value: '{fgColor.danger}',
1403
+ $type: 'color',
1404
+ $extensions: {
1405
+ 'org.primer.figma': {
1406
+ collection: 'mode',
1407
+ mode: 'dark',
1408
+ group: 'component (internal)',
1409
+ scopes: ['fgColor'],
1410
+ },
1411
+ },
1412
+ alpha: 0.5,
1413
+ },
1414
+ },
1415
+ iconColor: {
1416
+ rest: {
1417
+ $value: '{button.danger.fgColor.rest}',
1418
+ $type: 'color',
1419
+ $extensions: {
1420
+ 'org.primer.figma': {
1421
+ collection: 'mode',
1422
+ mode: 'dark',
1423
+ group: 'component (internal)',
1424
+ scopes: ['fgColor'],
1425
+ },
1426
+ },
1427
+ },
1428
+ hover: {
1429
+ $value: '{base.color.neutral.13}',
1430
+ $type: 'color',
1431
+ $extensions: {
1432
+ 'org.primer.figma': {
1433
+ collection: 'mode',
1434
+ mode: 'dark',
1435
+ group: 'component (internal)',
1436
+ scopes: ['fgColor'],
1437
+ },
1438
+ },
1439
+ },
1440
+ },
1441
+ bgColor: {
1442
+ rest: {
1443
+ $value: '{control.bgColor.rest}',
1444
+ $type: 'color',
1445
+ $extensions: {
1446
+ 'org.primer.figma': {
1447
+ collection: 'mode',
1448
+ mode: 'dark',
1449
+ group: 'component (internal)',
1450
+ scopes: ['bgColor'],
1451
+ },
1452
+ },
1453
+ },
1454
+ hover: {
1455
+ $value: '{base.color.red.6}',
1456
+ $type: 'color',
1457
+ $extensions: {
1458
+ 'org.primer.figma': {
1459
+ collection: 'mode',
1460
+ mode: 'dark',
1461
+ group: 'component (internal)',
1462
+ scopes: ['bgColor'],
1463
+ },
1464
+ },
1465
+ },
1466
+ active: {
1467
+ $value: '{base.color.red.6}',
1468
+ $type: 'color',
1469
+ $extensions: {
1470
+ 'org.primer.figma': {
1471
+ collection: 'mode',
1472
+ mode: 'dark',
1473
+ group: 'component (internal)',
1474
+ scopes: ['bgColor'],
1475
+ },
1476
+ },
1477
+ mix: {
1478
+ color: '{base.color.red.4}',
1479
+ weight: 0.4,
1480
+ },
1481
+ },
1482
+ disabled: {
1483
+ $value: '{control.bgColor.disabled}',
1484
+ $type: 'color',
1485
+ $extensions: {
1486
+ 'org.primer.figma': {
1487
+ collection: 'mode',
1488
+ mode: 'dark',
1489
+ group: 'component (internal)',
1490
+ scopes: ['bgColor'],
1491
+ },
1492
+ },
1493
+ },
1494
+ },
1495
+ borderColor: {
1496
+ rest: {
1497
+ $value: '{control.borderColor.rest}',
1498
+ $type: 'color',
1499
+ $extensions: {
1500
+ 'org.primer.figma': {
1501
+ collection: 'mode',
1502
+ mode: 'dark',
1503
+ group: 'component (internal)',
1504
+ scopes: ['borderColor'],
1505
+ },
1506
+ },
1507
+ },
1508
+ hover: {
1509
+ $value: '{button.primary.borderColor.rest}',
1510
+ $type: 'color',
1511
+ $extensions: {
1512
+ 'org.primer.figma': {
1513
+ collection: 'mode',
1514
+ mode: 'dark',
1515
+ group: 'component (internal)',
1516
+ scopes: ['borderColor'],
1517
+ },
1518
+ },
1519
+ },
1520
+ active: {
1521
+ $value: '{button.danger.borderColor.hover}',
1522
+ $type: 'color',
1523
+ $extensions: {
1524
+ 'org.primer.figma': {
1525
+ collection: 'mode',
1526
+ mode: 'dark',
1527
+ group: 'component (internal)',
1528
+ scopes: ['borderColor'],
1529
+ },
1530
+ },
1531
+ },
1532
+ },
1533
+ },
1534
+ inactive: {
1535
+ fgColor: {
1536
+ $value: '{base.color.neutral.9}',
1537
+ $type: 'color',
1538
+ $extensions: {
1539
+ 'org.primer.figma': {
1540
+ collection: 'mode',
1541
+ mode: 'light',
1542
+ group: 'component (internal)',
1543
+ scopes: ['fgColor'],
1544
+ },
1545
+ },
1546
+ },
1547
+ bgColor: {
1548
+ $value: '{base.color.neutral.4}',
1549
+ $type: 'color',
1550
+ $extensions: {
1551
+ 'org.primer.figma': {
1552
+ collection: 'mode',
1553
+ mode: 'light',
1554
+ group: 'component (internal)',
1555
+ scopes: ['bgColor'],
1556
+ },
1557
+ },
1558
+ },
1559
+ },
1560
+ star: {
1561
+ iconColor: {
1562
+ $value: '{base.color.yellow.2}',
1563
+ $type: 'color',
1564
+ $extensions: {
1565
+ 'org.primer.figma': {
1566
+ collection: 'mode',
1567
+ mode: 'dark',
1568
+ group: 'component (internal)',
1569
+ scopes: ['bgColor'],
1570
+ },
1571
+ },
1572
+ },
1573
+ },
1574
+ },
1575
+ buttonCounter: {
1576
+ default: {
1577
+ bgColor: {
1578
+ rest: {
1579
+ $value: '{base.color.neutral.6}',
1580
+ $type: 'color',
1581
+ $extensions: {
1582
+ 'org.primer.figma': {
1583
+ collection: 'mode',
1584
+ mode: 'dark',
1585
+ group: 'component (internal)',
1586
+ scopes: ['bgColor'],
1587
+ },
1588
+ },
1589
+ },
1590
+ },
1591
+ },
1592
+ invisible: {
1593
+ bgColor: {
1594
+ rest: {
1595
+ $value: '{bgColor.neutral.muted}',
1596
+ $type: 'color',
1597
+ $extensions: {
1598
+ 'org.primer.figma': {
1599
+ collection: 'mode',
1600
+ mode: 'dark',
1601
+ group: 'component (internal)',
1602
+ scopes: ['bgColor'],
1603
+ },
1604
+ },
1605
+ },
1606
+ },
1607
+ },
1608
+ primary: {
1609
+ bgColor: {
1610
+ rest: {
1611
+ $value: '{base.color.green.9}',
1612
+ $type: 'color',
1613
+ $extensions: {
1614
+ 'org.primer.figma': {
1615
+ collection: 'mode',
1616
+ mode: 'dark',
1617
+ group: 'component (internal)',
1618
+ scopes: ['bgColor'],
1619
+ },
1620
+ },
1621
+ alpha: 0.2,
1622
+ },
1623
+ },
1624
+ },
1625
+ outline: {
1626
+ bgColor: {
1627
+ rest: {
1628
+ $value: '{base.color.blue.9}',
1629
+ $type: 'color',
1630
+ $extensions: {
1631
+ 'org.primer.figma': {
1632
+ collection: 'mode',
1633
+ mode: 'dark',
1634
+ group: 'component (internal)',
1635
+ scopes: ['bgColor'],
1636
+ },
1637
+ },
1638
+ alpha: 0.2,
1639
+ },
1640
+ hover: {
1641
+ $value: '{base.color.blue.9}',
1642
+ $type: 'color',
1643
+ $extensions: {
1644
+ 'org.primer.figma': {
1645
+ collection: 'mode',
1646
+ mode: 'dark',
1647
+ group: 'component (internal)',
1648
+ scopes: ['bgColor'],
1649
+ },
1650
+ },
1651
+ alpha: 0.2,
1652
+ },
1653
+ disabled: {
1654
+ $value: '{bgColor.accent.emphasis}',
1655
+ $type: 'color',
1656
+ $extensions: {
1657
+ 'org.primer.figma': {
1658
+ collection: 'mode',
1659
+ mode: 'dark',
1660
+ group: 'component (internal)',
1661
+ scopes: ['bgColor'],
1662
+ },
1663
+ },
1664
+ alpha: 0.05,
1665
+ },
1666
+ },
1667
+ fgColor: {
1668
+ rest: {
1669
+ $value: '{base.color.blue.4}',
1670
+ $type: 'color',
1671
+ $extensions: {
1672
+ 'org.primer.figma': {
1673
+ collection: 'mode',
1674
+ mode: 'dark',
1675
+ group: 'component (internal)',
1676
+ scopes: ['fgColor'],
1677
+ },
1678
+ },
1679
+ },
1680
+ hover: {
1681
+ $value: '{base.color.blue.3}',
1682
+ $type: 'color',
1683
+ $extensions: {
1684
+ 'org.primer.figma': {
1685
+ collection: 'mode',
1686
+ mode: 'dark',
1687
+ group: 'component (internal)',
1688
+ scopes: ['fgColor'],
1689
+ },
1690
+ },
1691
+ },
1692
+ disabled: {
1693
+ $value: '{fgColor.accent}',
1694
+ $type: 'color',
1695
+ $extensions: {
1696
+ 'org.primer.figma': {
1697
+ collection: 'mode',
1698
+ mode: 'dark',
1699
+ group: 'component (internal)',
1700
+ scopes: ['fgColor'],
1701
+ },
1702
+ },
1703
+ alpha: 0.5,
1704
+ },
1705
+ },
1706
+ },
1707
+ danger: {
1708
+ bgColor: {
1709
+ hover: {
1710
+ $value: '{base.color.neutral.13}',
1711
+ $type: 'color',
1712
+ $extensions: {
1713
+ 'org.primer.figma': {
1714
+ collection: 'mode',
1715
+ mode: 'dark',
1716
+ group: 'component (internal)',
1717
+ scopes: ['bgColor'],
1718
+ },
1719
+ },
1720
+ alpha: 0.2,
1721
+ },
1722
+ disabled: {
1723
+ $value: '{bgColor.danger.emphasis}',
1724
+ $type: 'color',
1725
+ $extensions: {
1726
+ 'org.primer.figma': {
1727
+ collection: 'mode',
1728
+ mode: 'dark',
1729
+ group: 'component (internal)',
1730
+ scopes: ['bgColor'],
1731
+ },
1732
+ },
1733
+ alpha: 0.05,
1734
+ },
1735
+ rest: {
1736
+ $value: '{base.color.red.9}',
1737
+ $type: 'color',
1738
+ $extensions: {
1739
+ 'org.primer.figma': {
1740
+ collection: 'mode',
1741
+ mode: 'dark',
1742
+ group: 'component (internal)',
1743
+ scopes: ['bgColor'],
1744
+ },
1745
+ },
1746
+ alpha: 0.2,
1747
+ },
1748
+ },
1749
+ fgColor: {
1750
+ rest: {
1751
+ $value: '{fgColor.danger}',
1752
+ $type: 'color',
1753
+ $extensions: {
1754
+ 'org.primer.figma': {
1755
+ collection: 'mode',
1756
+ mode: 'dark',
1757
+ group: 'component (internal)',
1758
+ scopes: ['fgColor'],
1759
+ },
1760
+ },
1761
+ },
1762
+ hover: {
1763
+ $value: '{base.color.neutral.13}',
1764
+ $type: 'color',
1765
+ $extensions: {
1766
+ 'org.primer.figma': {
1767
+ collection: 'mode',
1768
+ mode: 'dark',
1769
+ group: 'component (internal)',
1770
+ scopes: ['fgColor'],
1771
+ },
1772
+ },
1773
+ },
1774
+ disabled: {
1775
+ $value: '{fgColor.danger}',
1776
+ $type: 'color',
1777
+ $extensions: {
1778
+ 'org.primer.figma': {
1779
+ collection: 'mode',
1780
+ mode: 'dark',
1781
+ group: 'component (internal)',
1782
+ scopes: ['fgColor'],
1783
+ },
1784
+ },
1785
+ alpha: 0.5,
1786
+ },
1787
+ },
1788
+ },
1789
+ },
1790
+ reactionButton: {
1791
+ selected: {
1792
+ bgColor: {
1793
+ rest: {
1794
+ $value: '{base.color.blue.4}',
1795
+ $type: 'color',
1796
+ $extensions: {
1797
+ 'org.primer.figma': {
1798
+ collection: 'mode',
1799
+ mode: 'dark',
1800
+ group: 'component (internal)',
1801
+ scopes: ['bgColor'],
1802
+ },
1803
+ },
1804
+ alpha: 0.2,
1805
+ },
1806
+ hover: {
1807
+ $value: '{reactionButton.selected.bgColor.rest}',
1808
+ $type: 'color',
1809
+ $extensions: {
1810
+ 'org.primer.figma': {
1811
+ collection: 'mode',
1812
+ mode: 'dark',
1813
+ group: 'component (internal)',
1814
+ scopes: ['bgColor'],
1815
+ },
1816
+ },
1817
+ mix: {
1818
+ color: '{base.color.blue.2}',
1819
+ weight: 0.2,
1820
+ },
1821
+ alpha: 0.2,
1822
+ },
1823
+ },
1824
+ fgColor: {
1825
+ rest: {
1826
+ $value: '{fgColor.link}',
1827
+ $type: 'color',
1828
+ $extensions: {
1829
+ 'org.primer.figma': {
1830
+ collection: 'mode',
1831
+ mode: 'dark',
1832
+ group: 'component (internal)',
1833
+ scopes: ['fgColor'],
1834
+ },
1835
+ },
1836
+ },
1837
+ hover: {
1838
+ $value: '{base.color.blue.2}',
1839
+ $type: 'color',
1840
+ $extensions: {
1841
+ 'org.primer.figma': {
1842
+ collection: 'mode',
1843
+ mode: 'dark',
1844
+ group: 'component (internal)',
1845
+ scopes: ['fgColor'],
1846
+ },
1847
+ },
1848
+ },
1849
+ },
1850
+ },
1851
+ },
1852
+ focus: {
1853
+ outlineColor: {
1854
+ $value: '{borderColor.accent.emphasis}',
1855
+ $type: 'color',
1856
+ $extensions: {
1857
+ 'org.primer.figma': {
1858
+ collection: 'mode',
1859
+ mode: 'dark',
1860
+ group: 'component (internal)',
1861
+ scopes: ['borderColor'],
1862
+ },
1863
+ },
1864
+ },
1865
+ },
1866
+ header: {
1867
+ bgColor: {
1868
+ $value: '{base.color.neutral.2}',
1869
+ $type: 'color',
1870
+ $extensions: {
1871
+ 'org.primer.figma': {
1872
+ collection: 'mode',
1873
+ mode: 'dark',
1874
+ group: 'component (internal)',
1875
+ scopes: ['bgColor'],
1876
+ },
1877
+ },
1878
+ alpha: 0.95,
1879
+ },
1880
+ fgColor: {
1881
+ default: {
1882
+ $value: '{base.color.neutral.13}',
1883
+ $type: 'color',
1884
+ $extensions: {
1885
+ 'org.primer.figma': {
1886
+ collection: 'mode',
1887
+ mode: 'dark',
1888
+ group: 'component (internal)',
1889
+ scopes: ['fgColor'],
1890
+ },
1891
+ },
1892
+ alpha: 0.7,
1893
+ },
1894
+ logo: {
1895
+ $value: '{base.color.neutral.12}',
1896
+ $type: 'color',
1897
+ $extensions: {
1898
+ 'org.primer.figma': {
1899
+ collection: 'mode',
1900
+ mode: 'dark',
1901
+ group: 'component (internal)',
1902
+ scopes: ['fgColor'],
1903
+ },
1904
+ },
1905
+ },
1906
+ },
1907
+ borderColor: {
1908
+ divider: {
1909
+ $value: '{base.color.neutral.8}',
1910
+ $type: 'color',
1911
+ $extensions: {
1912
+ 'org.primer.figma': {
1913
+ collection: 'mode',
1914
+ mode: 'dark',
1915
+ group: 'component (internal)',
1916
+ scopes: ['borderColor'],
1917
+ },
1918
+ },
1919
+ },
1920
+ },
1921
+ },
1922
+ headerSearch: {
1923
+ bgColor: {
1924
+ $value: '{base.color.neutral.1}',
1925
+ $type: 'color',
1926
+ $extensions: {
1927
+ 'org.primer.figma': {
1928
+ collection: 'mode',
1929
+ mode: 'dark',
1930
+ group: 'component (internal)',
1931
+ scopes: ['bgColor'],
1932
+ },
1933
+ },
1934
+ },
1935
+ borderColor: {
1936
+ $value: '{base.color.neutral.5}',
1937
+ $type: 'color',
1938
+ $extensions: {
1939
+ 'org.primer.figma': {
1940
+ collection: 'mode',
1941
+ mode: 'dark',
1942
+ group: 'component (internal)',
1943
+ scopes: ['borderColor'],
1944
+ },
1945
+ },
1946
+ },
1947
+ },
1948
+ menu: {
1949
+ bgColor: {
1950
+ active: {
1951
+ $value: '{base.color.neutral.2}',
1952
+ $type: 'color',
1953
+ $extensions: {
1954
+ 'org.primer.figma': {
1955
+ collection: 'mode',
1956
+ mode: 'dark',
1957
+ group: 'component (internal)',
1958
+ scopes: ['bgColor'],
1959
+ },
1960
+ },
1961
+ },
1962
+ },
1963
+ },
1964
+ overlay: {
1965
+ bgColor: {
1966
+ $value: '{bgColor.muted}',
1967
+ $type: 'color',
1968
+ $extensions: {
1969
+ 'org.primer.figma': {
1970
+ collection: 'mode',
1971
+ mode: 'dark',
1972
+ group: 'component (internal)',
1973
+ scopes: ['bgColor'],
1974
+ },
1975
+ },
1976
+ },
1977
+ borderColor: {
1978
+ $value: '{borderColor.muted}',
1979
+ $type: 'color',
1980
+ $extensions: {
1981
+ 'org.primer.figma': {
1982
+ collection: 'mode',
1983
+ mode: 'dark',
1984
+ group: 'component (internal)',
1985
+ },
1986
+ },
1987
+ },
1988
+ backdrop: {
1989
+ bgColor: {
1990
+ $value: '{base.color.neutral.3}',
1991
+ $type: 'color',
1992
+ $extensions: {
1993
+ 'org.primer.figma': {
1994
+ collection: 'mode',
1995
+ mode: 'dark',
1996
+ group: 'component (internal)',
1997
+ scopes: ['bgColor'],
1998
+ },
1999
+ },
2000
+ alpha: 0.4,
2001
+ },
2002
+ },
2003
+ },
2004
+ selectMenu: {
2005
+ borderColor: {
2006
+ $value: '{borderColor.default}',
2007
+ $type: 'color',
2008
+ $extensions: {
2009
+ 'org.primer.figma': {
2010
+ collection: 'mode',
2011
+ mode: 'dark',
2012
+ group: 'component (internal)',
2013
+ scopes: ['borderColor'],
2014
+ },
2015
+ },
2016
+ },
2017
+ bgColor: {
2018
+ active: {
2019
+ $value: '{base.color.blue.8}',
2020
+ $type: 'color',
2021
+ $extensions: {
2022
+ 'org.primer.figma': {
2023
+ collection: 'mode',
2024
+ mode: 'dark',
2025
+ group: 'component (internal)',
2026
+ scopes: ['bgColor'],
2027
+ },
2028
+ },
2029
+ },
2030
+ },
2031
+ },
2032
+ sideNav: {
2033
+ bgColor: {
2034
+ selected: {
2035
+ $value: '{base.color.neutral.3}',
2036
+ $type: 'color',
2037
+ $extensions: {
2038
+ 'org.primer.figma': {
2039
+ collection: 'mode',
2040
+ mode: 'dark',
2041
+ group: 'component (internal)',
2042
+ scopes: ['bgColor'],
2043
+ },
2044
+ },
2045
+ },
2046
+ },
2047
+ },
2048
+ skeletonLoader: {
2049
+ bgColor: {
2050
+ $value: '{bgColor.muted}',
2051
+ $type: 'color',
2052
+ },
2053
+ },
2054
+ timelineBadge: {
2055
+ bgColor: {
2056
+ $value: '{base.color.neutral.3}',
2057
+ $type: 'color',
2058
+ $extensions: {
2059
+ 'org.primer.figma': {
2060
+ collection: 'mode',
2061
+ mode: 'dark',
2062
+ group: 'component (internal)',
2063
+ scopes: ['bgColor'],
2064
+ },
2065
+ },
2066
+ },
2067
+ },
2068
+ treeViewItem: {
2069
+ leadingVisual: {
2070
+ iconColor: {
2071
+ rest: {
2072
+ $value: '{fgColor.muted}',
2073
+ $type: 'color',
2074
+ $extensions: {
2075
+ 'org.primer.figma': {
2076
+ collection: 'mode',
2077
+ mode: 'dark',
2078
+ group: 'component (internal)',
2079
+ scopes: ['bgColor'],
2080
+ },
2081
+ },
2082
+ },
2083
+ },
2084
+ },
2085
+ },
2086
+ underlineNav: {
2087
+ borderColor: {
2088
+ active: {
2089
+ $value: '{base.color.coral.3}',
2090
+ $type: 'color',
2091
+ $extensions: {
2092
+ 'org.primer.figma': {
2093
+ collection: 'mode',
2094
+ mode: 'dark',
2095
+ group: 'component (internal)',
2096
+ scopes: ['borderColor'],
2097
+ },
2098
+ },
2099
+ },
2100
+ hover: {
2101
+ $value: '{borderColor.neutral.muted}',
2102
+ $type: 'color',
2103
+ $extensions: {
2104
+ 'org.primer.figma': {
2105
+ collection: 'mode',
2106
+ mode: 'dark',
2107
+ group: 'component (internal)',
2108
+ scopes: ['borderColor'],
2109
+ },
2110
+ },
2111
+ },
2112
+ },
2113
+ iconColor: {
2114
+ rest: {
2115
+ $value: '{fgColor.muted}',
2116
+ $type: 'color',
2117
+ $extensions: {
2118
+ 'org.primer.figma': {
2119
+ collection: 'mode',
2120
+ mode: 'dark',
2121
+ group: 'component (internal)',
2122
+ scopes: ['fgColor'],
2123
+ },
2124
+ },
2125
+ },
2126
+ },
2127
+ },
2128
+ selection: {
2129
+ bgColor: {
2130
+ $value: '{bgColor.accent.emphasis}',
2131
+ $type: 'color',
2132
+ $extensions: {
2133
+ 'org.primer.figma': {
2134
+ collection: 'mode',
2135
+ mode: 'dark',
2136
+ group: 'component',
2137
+ scopes: ['bgColor'],
2138
+ },
2139
+ },
2140
+ alpha: 0.7,
2141
+ },
2142
+ },
2143
+ card: {
2144
+ bgColor: {
2145
+ $value: '{bgColor.muted}',
2146
+ $type: 'color',
2147
+ $extensions: {
2148
+ 'org.primer.figma': {
2149
+ collection: 'mode',
2150
+ mode: 'dark',
2151
+ group: 'component',
2152
+ scopes: ['bgColor'],
2153
+ },
2154
+ },
2155
+ },
2156
+ },
2157
+ label: {
2158
+ green: {
2159
+ bgColor: {
2160
+ rest: {
2161
+ $value: '{base.display.color.green.0}',
2162
+ $type: 'color',
2163
+ $extensions: {
2164
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2165
+ },
2166
+ },
2167
+ hover: {
2168
+ $value: '{base.display.color.green.1}',
2169
+ $type: 'color',
2170
+ $extensions: {
2171
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2172
+ },
2173
+ },
2174
+ active: {
2175
+ $value: '{base.display.color.green.2}',
2176
+ $type: 'color',
2177
+ $extensions: {
2178
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2179
+ },
2180
+ },
2181
+ },
2182
+ fgColor: {
2183
+ rest: {
2184
+ $value: '{base.display.color.green.6}',
2185
+ $type: 'color',
2186
+ $extensions: {
2187
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2188
+ },
2189
+ },
2190
+ hover: {
2191
+ $value: '{base.display.color.green.7}',
2192
+ $type: 'color',
2193
+ $extensions: {
2194
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2195
+ },
2196
+ },
2197
+ active: {
2198
+ $value: '{base.display.color.green.8}',
2199
+ $type: 'color',
2200
+ $extensions: {
2201
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2202
+ },
2203
+ },
2204
+ },
2205
+ },
2206
+ orange: {
2207
+ bgColor: {
2208
+ rest: {
2209
+ $value: '{base.display.color.orange.0}',
2210
+ $type: 'color',
2211
+ $extensions: {
2212
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2213
+ },
2214
+ },
2215
+ hover: {
2216
+ $value: '{base.display.color.orange.1}',
2217
+ $type: 'color',
2218
+ $extensions: {
2219
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2220
+ },
2221
+ },
2222
+ active: {
2223
+ $value: '{base.display.color.orange.2}',
2224
+ $type: 'color',
2225
+ $extensions: {
2226
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2227
+ },
2228
+ },
2229
+ },
2230
+ fgColor: {
2231
+ rest: {
2232
+ $value: '{base.display.color.orange.6}',
2233
+ $type: 'color',
2234
+ $extensions: {
2235
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2236
+ },
2237
+ },
2238
+ hover: {
2239
+ $value: '{base.display.color.orange.7}',
2240
+ $type: 'color',
2241
+ $extensions: {
2242
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2243
+ },
2244
+ },
2245
+ active: {
2246
+ $value: '{base.display.color.orange.8}',
2247
+ $type: 'color',
2248
+ $extensions: {
2249
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2250
+ },
2251
+ },
2252
+ },
2253
+ },
2254
+ purple: {
2255
+ bgColor: {
2256
+ rest: {
2257
+ $value: '{base.display.color.purple.0}',
2258
+ $type: 'color',
2259
+ $extensions: {
2260
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2261
+ },
2262
+ },
2263
+ hover: {
2264
+ $value: '{base.display.color.purple.1}',
2265
+ $type: 'color',
2266
+ $extensions: {
2267
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2268
+ },
2269
+ },
2270
+ active: {
2271
+ $value: '{base.display.color.purple.2}',
2272
+ $type: 'color',
2273
+ $extensions: {
2274
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2275
+ },
2276
+ },
2277
+ },
2278
+ fgColor: {
2279
+ rest: {
2280
+ $value: '{base.display.color.purple.6}',
2281
+ $type: 'color',
2282
+ $extensions: {
2283
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2284
+ },
2285
+ },
2286
+ hover: {
2287
+ $value: '{base.display.color.purple.7}',
2288
+ $type: 'color',
2289
+ $extensions: {
2290
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2291
+ },
2292
+ },
2293
+ active: {
2294
+ $value: '{base.display.color.purple.8}',
2295
+ $type: 'color',
2296
+ $extensions: {
2297
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2298
+ },
2299
+ },
2300
+ },
2301
+ },
2302
+ red: {
2303
+ bgColor: {
2304
+ rest: {
2305
+ $value: '{base.display.color.red.0}',
2306
+ $type: 'color',
2307
+ $extensions: {
2308
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2309
+ },
2310
+ },
2311
+ hover: {
2312
+ $value: '{base.display.color.red.1}',
2313
+ $type: 'color',
2314
+ $extensions: {
2315
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2316
+ },
2317
+ },
2318
+ active: {
2319
+ $value: '{base.display.color.red.2}',
2320
+ $type: 'color',
2321
+ $extensions: {
2322
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2323
+ },
2324
+ },
2325
+ },
2326
+ fgColor: {
2327
+ rest: {
2328
+ $value: '{base.display.color.red.6}',
2329
+ $type: 'color',
2330
+ $extensions: {
2331
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2332
+ },
2333
+ },
2334
+ hover: {
2335
+ $value: '{base.display.color.red.7}',
2336
+ $type: 'color',
2337
+ $extensions: {
2338
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2339
+ },
2340
+ },
2341
+ active: {
2342
+ $value: '{base.display.color.red.8}',
2343
+ $type: 'color',
2344
+ $extensions: {
2345
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2346
+ },
2347
+ },
2348
+ },
2349
+ },
2350
+ yellow: {
2351
+ bgColor: {
2352
+ rest: {
2353
+ $value: '{base.display.color.yellow.0}',
2354
+ $type: 'color',
2355
+ $extensions: {
2356
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2357
+ },
2358
+ },
2359
+ hover: {
2360
+ $value: '{base.display.color.yellow.1}',
2361
+ $type: 'color',
2362
+ $extensions: {
2363
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2364
+ },
2365
+ },
2366
+ active: {
2367
+ $value: '{base.display.color.yellow.2}',
2368
+ $type: 'color',
2369
+ $extensions: {
2370
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2371
+ },
2372
+ },
2373
+ },
2374
+ fgColor: {
2375
+ rest: {
2376
+ $value: '{base.display.color.yellow.6}',
2377
+ $type: 'color',
2378
+ $extensions: {
2379
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2380
+ },
2381
+ },
2382
+ hover: {
2383
+ $value: '{base.display.color.yellow.7}',
2384
+ $type: 'color',
2385
+ $extensions: {
2386
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2387
+ },
2388
+ },
2389
+ active: {
2390
+ $value: '{base.display.color.yellow.8}',
2391
+ $type: 'color',
2392
+ $extensions: {
2393
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2394
+ },
2395
+ },
2396
+ },
2397
+ },
2398
+ gray: {
2399
+ bgColor: {
2400
+ rest: {
2401
+ $value: '{base.display.color.gray.0}',
2402
+ $type: 'color',
2403
+ $extensions: {
2404
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2405
+ },
2406
+ },
2407
+ hover: {
2408
+ $value: '{base.display.color.gray.1}',
2409
+ $type: 'color',
2410
+ $extensions: {
2411
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2412
+ },
2413
+ },
2414
+ active: {
2415
+ $value: '{base.display.color.gray.2}',
2416
+ $type: 'color',
2417
+ $extensions: {
2418
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2419
+ },
2420
+ },
2421
+ },
2422
+ fgColor: {
2423
+ rest: {
2424
+ $value: '{base.display.color.gray.6}',
2425
+ $type: 'color',
2426
+ $extensions: {
2427
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2428
+ },
2429
+ },
2430
+ hover: {
2431
+ $value: '{base.display.color.gray.7}',
2432
+ $type: 'color',
2433
+ $extensions: {
2434
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2435
+ },
2436
+ },
2437
+ active: {
2438
+ $value: '{base.display.color.gray.8}',
2439
+ $type: 'color',
2440
+ $extensions: {
2441
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2442
+ },
2443
+ },
2444
+ },
2445
+ },
2446
+ auburn: {
2447
+ bgColor: {
2448
+ rest: {
2449
+ $value: '{base.display.color.auburn.0}',
2450
+ $type: 'color',
2451
+ $extensions: {
2452
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2453
+ },
2454
+ },
2455
+ hover: {
2456
+ $value: '{base.display.color.auburn.1}',
2457
+ $type: 'color',
2458
+ $extensions: {
2459
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2460
+ },
2461
+ },
2462
+ active: {
2463
+ $value: '{base.display.color.auburn.2}',
2464
+ $type: 'color',
2465
+ $extensions: {
2466
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2467
+ },
2468
+ },
2469
+ },
2470
+ fgColor: {
2471
+ rest: {
2472
+ $value: '{base.display.color.auburn.6}',
2473
+ $type: 'color',
2474
+ $extensions: {
2475
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2476
+ },
2477
+ },
2478
+ hover: {
2479
+ $value: '{base.display.color.auburn.7}',
2480
+ $type: 'color',
2481
+ $extensions: {
2482
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2483
+ },
2484
+ },
2485
+ active: {
2486
+ $value: '{base.display.color.auburn.8}',
2487
+ $type: 'color',
2488
+ $extensions: {
2489
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2490
+ },
2491
+ },
2492
+ },
2493
+ },
2494
+ brown: {
2495
+ bgColor: {
2496
+ rest: {
2497
+ $value: '{base.display.color.brown.0}',
2498
+ $type: 'color',
2499
+ $extensions: {
2500
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2501
+ },
2502
+ },
2503
+ hover: {
2504
+ $value: '{base.display.color.brown.1}',
2505
+ $type: 'color',
2506
+ $extensions: {
2507
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2508
+ },
2509
+ },
2510
+ active: {
2511
+ $value: '{base.display.color.brown.2}',
2512
+ $type: 'color',
2513
+ $extensions: {
2514
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2515
+ },
2516
+ },
2517
+ },
2518
+ fgColor: {
2519
+ rest: {
2520
+ $value: '{base.display.color.brown.6}',
2521
+ $type: 'color',
2522
+ $extensions: {
2523
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2524
+ },
2525
+ },
2526
+ hover: {
2527
+ $value: '{base.display.color.brown.7}',
2528
+ $type: 'color',
2529
+ $extensions: {
2530
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2531
+ },
2532
+ },
2533
+ active: {
2534
+ $value: '{base.display.color.brown.8}',
2535
+ $type: 'color',
2536
+ $extensions: {
2537
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2538
+ },
2539
+ },
2540
+ },
2541
+ },
2542
+ lemon: {
2543
+ bgColor: {
2544
+ rest: {
2545
+ $value: '{base.display.color.lemon.0}',
2546
+ $type: 'color',
2547
+ $extensions: {
2548
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2549
+ },
2550
+ },
2551
+ hover: {
2552
+ $value: '{base.display.color.lemon.1}',
2553
+ $type: 'color',
2554
+ $extensions: {
2555
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2556
+ },
2557
+ },
2558
+ active: {
2559
+ $value: '{base.display.color.lemon.2}',
2560
+ $type: 'color',
2561
+ $extensions: {
2562
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2563
+ },
2564
+ },
2565
+ },
2566
+ fgColor: {
2567
+ rest: {
2568
+ $value: '{base.display.color.lemon.6}',
2569
+ $type: 'color',
2570
+ $extensions: {
2571
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2572
+ },
2573
+ },
2574
+ hover: {
2575
+ $value: '{base.display.color.lemon.7}',
2576
+ $type: 'color',
2577
+ $extensions: {
2578
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2579
+ },
2580
+ },
2581
+ active: {
2582
+ $value: '{base.display.color.lemon.8}',
2583
+ $type: 'color',
2584
+ $extensions: {
2585
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2586
+ },
2587
+ },
2588
+ },
2589
+ },
2590
+ olive: {
2591
+ bgColor: {
2592
+ rest: {
2593
+ $value: '{base.display.color.olive.0}',
2594
+ $type: 'color',
2595
+ $extensions: {
2596
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2597
+ },
2598
+ },
2599
+ hover: {
2600
+ $value: '{base.display.color.olive.1}',
2601
+ $type: 'color',
2602
+ $extensions: {
2603
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2604
+ },
2605
+ },
2606
+ active: {
2607
+ $value: '{base.display.color.olive.2}',
2608
+ $type: 'color',
2609
+ $extensions: {
2610
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2611
+ },
2612
+ },
2613
+ },
2614
+ fgColor: {
2615
+ rest: {
2616
+ $value: '{base.display.color.olive.6}',
2617
+ $type: 'color',
2618
+ $extensions: {
2619
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2620
+ },
2621
+ },
2622
+ hover: {
2623
+ $value: '{base.display.color.olive.7}',
2624
+ $type: 'color',
2625
+ $extensions: {
2626
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2627
+ },
2628
+ },
2629
+ active: {
2630
+ $value: '{base.display.color.olive.8}',
2631
+ $type: 'color',
2632
+ $extensions: {
2633
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2634
+ },
2635
+ },
2636
+ },
2637
+ },
2638
+ lime: {
2639
+ bgColor: {
2640
+ rest: {
2641
+ $value: '{base.display.color.lime.0}',
2642
+ $type: 'color',
2643
+ $extensions: {
2644
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2645
+ },
2646
+ },
2647
+ hover: {
2648
+ $value: '{base.display.color.lime.1}',
2649
+ $type: 'color',
2650
+ $extensions: {
2651
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2652
+ },
2653
+ },
2654
+ active: {
2655
+ $value: '{base.display.color.lime.2}',
2656
+ $type: 'color',
2657
+ $extensions: {
2658
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2659
+ },
2660
+ },
2661
+ },
2662
+ fgColor: {
2663
+ rest: {
2664
+ $value: '{base.display.color.lime.6}',
2665
+ $type: 'color',
2666
+ $extensions: {
2667
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2668
+ },
2669
+ },
2670
+ hover: {
2671
+ $value: '{base.display.color.lime.7}',
2672
+ $type: 'color',
2673
+ $extensions: {
2674
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2675
+ },
2676
+ },
2677
+ active: {
2678
+ $value: '{base.display.color.lime.8}',
2679
+ $type: 'color',
2680
+ $extensions: {
2681
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2682
+ },
2683
+ },
2684
+ },
2685
+ },
2686
+ pine: {
2687
+ bgColor: {
2688
+ rest: {
2689
+ $value: '{base.display.color.pine.0}',
2690
+ $type: 'color',
2691
+ $extensions: {
2692
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2693
+ },
2694
+ },
2695
+ hover: {
2696
+ $value: '{base.display.color.pine.1}',
2697
+ $type: 'color',
2698
+ $extensions: {
2699
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2700
+ },
2701
+ },
2702
+ active: {
2703
+ $value: '{base.display.color.pine.2}',
2704
+ $type: 'color',
2705
+ $extensions: {
2706
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2707
+ },
2708
+ },
2709
+ },
2710
+ fgColor: {
2711
+ rest: {
2712
+ $value: '{base.display.color.pine.6}',
2713
+ $type: 'color',
2714
+ $extensions: {
2715
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2716
+ },
2717
+ },
2718
+ hover: {
2719
+ $value: '{base.display.color.pine.7}',
2720
+ $type: 'color',
2721
+ $extensions: {
2722
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2723
+ },
2724
+ },
2725
+ active: {
2726
+ $value: '{base.display.color.pine.8}',
2727
+ $type: 'color',
2728
+ $extensions: {
2729
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2730
+ },
2731
+ },
2732
+ },
2733
+ },
2734
+ teal: {
2735
+ bgColor: {
2736
+ rest: {
2737
+ $value: '{base.display.color.teal.0}',
2738
+ $type: 'color',
2739
+ $extensions: {
2740
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2741
+ },
2742
+ },
2743
+ hover: {
2744
+ $value: '{base.display.color.teal.1}',
2745
+ $type: 'color',
2746
+ $extensions: {
2747
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2748
+ },
2749
+ },
2750
+ active: {
2751
+ $value: '{base.display.color.teal.2}',
2752
+ $type: 'color',
2753
+ $extensions: {
2754
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2755
+ },
2756
+ },
2757
+ },
2758
+ fgColor: {
2759
+ rest: {
2760
+ $value: '{base.display.color.teal.6}',
2761
+ $type: 'color',
2762
+ $extensions: {
2763
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2764
+ },
2765
+ },
2766
+ hover: {
2767
+ $value: '{base.display.color.teal.7}',
2768
+ $type: 'color',
2769
+ $extensions: {
2770
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2771
+ },
2772
+ },
2773
+ active: {
2774
+ $value: '{base.display.color.teal.8}',
2775
+ $type: 'color',
2776
+ $extensions: {
2777
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2778
+ },
2779
+ },
2780
+ },
2781
+ },
2782
+ cyan: {
2783
+ bgColor: {
2784
+ rest: {
2785
+ $value: '{base.display.color.cyan.0}',
2786
+ $type: 'color',
2787
+ $extensions: {
2788
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2789
+ },
2790
+ },
2791
+ hover: {
2792
+ $value: '{base.display.color.cyan.1}',
2793
+ $type: 'color',
2794
+ $extensions: {
2795
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2796
+ },
2797
+ },
2798
+ active: {
2799
+ $value: '{base.display.color.cyan.2}',
2800
+ $type: 'color',
2801
+ $extensions: {
2802
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2803
+ },
2804
+ },
2805
+ },
2806
+ fgColor: {
2807
+ rest: {
2808
+ $value: '{base.display.color.cyan.6}',
2809
+ $type: 'color',
2810
+ $extensions: {
2811
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2812
+ },
2813
+ },
2814
+ hover: {
2815
+ $value: '{base.display.color.cyan.7}',
2816
+ $type: 'color',
2817
+ $extensions: {
2818
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2819
+ },
2820
+ },
2821
+ active: {
2822
+ $value: '{base.display.color.cyan.8}',
2823
+ $type: 'color',
2824
+ $extensions: {
2825
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2826
+ },
2827
+ },
2828
+ },
2829
+ },
2830
+ indigo: {
2831
+ bgColor: {
2832
+ rest: {
2833
+ $value: '{base.display.color.indigo.0}',
2834
+ $type: 'color',
2835
+ $extensions: {
2836
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2837
+ },
2838
+ },
2839
+ hover: {
2840
+ $value: '{base.display.color.indigo.1}',
2841
+ $type: 'color',
2842
+ $extensions: {
2843
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2844
+ },
2845
+ },
2846
+ active: {
2847
+ $value: '{base.display.color.indigo.2}',
2848
+ $type: 'color',
2849
+ $extensions: {
2850
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2851
+ },
2852
+ },
2853
+ },
2854
+ fgColor: {
2855
+ rest: {
2856
+ $value: '{base.display.color.indigo.6}',
2857
+ $type: 'color',
2858
+ $extensions: {
2859
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2860
+ },
2861
+ },
2862
+ hover: {
2863
+ $value: '{base.display.color.indigo.7}',
2864
+ $type: 'color',
2865
+ $extensions: {
2866
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2867
+ },
2868
+ },
2869
+ active: {
2870
+ $value: '{base.display.color.indigo.8}',
2871
+ $type: 'color',
2872
+ $extensions: {
2873
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2874
+ },
2875
+ },
2876
+ },
2877
+ },
2878
+ blue: {
2879
+ bgColor: {
2880
+ rest: {
2881
+ $value: '{base.display.color.blue.0}',
2882
+ $type: 'color',
2883
+ $extensions: {
2884
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2885
+ },
2886
+ },
2887
+ hover: {
2888
+ $value: '{base.display.color.blue.1}',
2889
+ $type: 'color',
2890
+ $extensions: {
2891
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2892
+ },
2893
+ },
2894
+ active: {
2895
+ $value: '{base.display.color.blue.2}',
2896
+ $type: 'color',
2897
+ $extensions: {
2898
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2899
+ },
2900
+ },
2901
+ },
2902
+ fgColor: {
2903
+ rest: {
2904
+ $value: '{base.display.color.blue.6}',
2905
+ $type: 'color',
2906
+ $extensions: {
2907
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2908
+ },
2909
+ },
2910
+ hover: {
2911
+ $value: '{base.display.color.blue.7}',
2912
+ $type: 'color',
2913
+ $extensions: {
2914
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2915
+ },
2916
+ },
2917
+ active: {
2918
+ $value: '{base.display.color.blue.8}',
2919
+ $type: 'color',
2920
+ $extensions: {
2921
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2922
+ },
2923
+ },
2924
+ },
2925
+ },
2926
+ plum: {
2927
+ bgColor: {
2928
+ rest: {
2929
+ $value: '{base.display.color.plum.0}',
2930
+ $type: 'color',
2931
+ $extensions: {
2932
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2933
+ },
2934
+ },
2935
+ hover: {
2936
+ $value: '{base.display.color.plum.1}',
2937
+ $type: 'color',
2938
+ $extensions: {
2939
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2940
+ },
2941
+ },
2942
+ active: {
2943
+ $value: '{base.display.color.plum.2}',
2944
+ $type: 'color',
2945
+ $extensions: {
2946
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2947
+ },
2948
+ },
2949
+ },
2950
+ fgColor: {
2951
+ rest: {
2952
+ $value: '{base.display.color.plum.6}',
2953
+ $type: 'color',
2954
+ $extensions: {
2955
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2956
+ },
2957
+ },
2958
+ hover: {
2959
+ $value: '{base.display.color.plum.7}',
2960
+ $type: 'color',
2961
+ $extensions: {
2962
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2963
+ },
2964
+ },
2965
+ active: {
2966
+ $value: '{base.display.color.plum.8}',
2967
+ $type: 'color',
2968
+ $extensions: {
2969
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
2970
+ },
2971
+ },
2972
+ },
2973
+ },
2974
+ pink: {
2975
+ bgColor: {
2976
+ rest: {
2977
+ $value: '{base.display.color.pink.0}',
2978
+ $type: 'color',
2979
+ $extensions: {
2980
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2981
+ },
2982
+ },
2983
+ hover: {
2984
+ $value: '{base.display.color.pink.1}',
2985
+ $type: 'color',
2986
+ $extensions: {
2987
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2988
+ },
2989
+ },
2990
+ active: {
2991
+ $value: '{base.display.color.pink.2}',
2992
+ $type: 'color',
2993
+ $extensions: {
2994
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
2995
+ },
2996
+ },
2997
+ },
2998
+ fgColor: {
2999
+ rest: {
3000
+ $value: '{base.display.color.pink.6}',
3001
+ $type: 'color',
3002
+ $extensions: {
3003
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
3004
+ },
3005
+ },
3006
+ hover: {
3007
+ $value: '{base.display.color.pink.7}',
3008
+ $type: 'color',
3009
+ $extensions: {
3010
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
3011
+ },
3012
+ },
3013
+ active: {
3014
+ $value: '{base.display.color.pink.8}',
3015
+ $type: 'color',
3016
+ $extensions: {
3017
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
3018
+ },
3019
+ },
3020
+ },
3021
+ },
3022
+ coral: {
3023
+ bgColor: {
3024
+ rest: {
3025
+ $value: '{base.display.color.coral.0}',
3026
+ $type: 'color',
3027
+ $extensions: {
3028
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
3029
+ },
3030
+ },
3031
+ hover: {
3032
+ $value: '{base.display.color.coral.1}',
3033
+ $type: 'color',
3034
+ $extensions: {
3035
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
3036
+ },
3037
+ },
3038
+ active: {
3039
+ $value: '{base.display.color.coral.2}',
3040
+ $type: 'color',
3041
+ $extensions: {
3042
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['bgColor']},
3043
+ },
3044
+ },
3045
+ },
3046
+ fgColor: {
3047
+ rest: {
3048
+ $value: '{base.display.color.coral.6}',
3049
+ $type: 'color',
3050
+ $extensions: {
3051
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
3052
+ },
3053
+ },
3054
+ hover: {
3055
+ $value: '{base.display.color.coral.7}',
3056
+ $type: 'color',
3057
+ $extensions: {
3058
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
3059
+ },
3060
+ },
3061
+ active: {
3062
+ $value: '{base.display.color.coral.8}',
3063
+ $type: 'color',
3064
+ $extensions: {
3065
+ 'org.primer.figma': {collection: 'mode', mode: 'dark', group: 'component', scopes: ['fgColor']},
3066
+ },
3067
+ },
3068
+ },
3069
+ },
3070
+ },
3071
+ tooltip: {
3072
+ bgColor: {
3073
+ $value: '{bgColor.emphasis}',
3074
+ $type: 'color',
3075
+ $extensions: {
3076
+ 'org.primer.figma': {
3077
+ collection: 'mode',
3078
+ mode: 'dark',
3079
+ group: 'component',
3080
+ scopes: ['bgColor'],
3081
+ },
3082
+ },
3083
+ },
3084
+ fgColor: {
3085
+ $value: '{fgColor.onEmphasis}',
3086
+ $type: 'color',
3087
+ $extensions: {
3088
+ 'org.primer.figma': {
3089
+ collection: 'mode',
3090
+ mode: 'dark',
3091
+ group: 'component',
3092
+ scopes: ['fgColor'],
3093
+ },
3094
+ },
3095
+ },
3096
+ },
3097
+ }