@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.0

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