@primer/primitives 10.4.0 → 10.5.0-rc.2284dc61

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