@primer/primitives 9.0.0-rc.02c27a21 → 9.0.0-rc.23ee6c3f

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 (82) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +256 -256
  2. package/dist/css/functional/themes/dark-dimmed.css +274 -274
  3. package/dist/css/functional/themes/dark-high-contrast.css +288 -288
  4. package/dist/css/functional/themes/dark-tritanopia.css +256 -256
  5. package/dist/css/functional/themes/dark.css +246 -246
  6. package/dist/css/functional/themes/light-colorblind.css +210 -210
  7. package/dist/css/functional/themes/light-high-contrast.css +244 -244
  8. package/dist/css/functional/themes/light-tritanopia.css +210 -210
  9. package/dist/css/functional/themes/light.css +200 -200
  10. package/dist/docs/functional/themes/dark-colorblind.json +217 -289
  11. package/dist/docs/functional/themes/dark-dimmed.json +245 -317
  12. package/dist/docs/functional/themes/dark-high-contrast.json +255 -317
  13. package/dist/docs/functional/themes/dark-tritanopia.json +215 -287
  14. package/dist/docs/functional/themes/dark.json +205 -277
  15. package/dist/docs/functional/themes/light-colorblind.json +194 -260
  16. package/dist/docs/functional/themes/light-high-contrast.json +242 -308
  17. package/dist/docs/functional/themes/light-tritanopia.json +193 -257
  18. package/dist/docs/functional/themes/light.json +183 -247
  19. package/dist/figma/scales/dark-dimmed.json +106 -60
  20. package/dist/figma/scales/dark-high-constrast.json +106 -60
  21. package/dist/figma/scales/dark.json +76 -30
  22. package/dist/figma/scales/light-high-constrast.json +106 -60
  23. package/dist/figma/scales/light.json +73 -27
  24. package/dist/figma/shadows/dark-colorblind.json +12 -12
  25. package/dist/figma/shadows/dark-dimmed.json +15 -15
  26. package/dist/figma/shadows/dark-high-contrast.json +15 -15
  27. package/dist/figma/shadows/dark-tritanopia.json +12 -12
  28. package/dist/figma/shadows/dark.json +12 -12
  29. package/dist/figma/shadows/light-colorblind.json +39 -39
  30. package/dist/figma/shadows/light-high-contrast.json +39 -39
  31. package/dist/figma/shadows/light-tritanopia.json +39 -39
  32. package/dist/figma/shadows/light.json +39 -39
  33. package/dist/figma/themes/dark-colorblind.json +796 -808
  34. package/dist/figma/themes/dark-dimmed.json +765 -777
  35. package/dist/figma/themes/dark-high-contrast.json +850 -859
  36. package/dist/figma/themes/dark-tritanopia.json +802 -814
  37. package/dist/figma/themes/dark.json +699 -711
  38. package/dist/figma/themes/light-colorblind.json +756 -768
  39. package/dist/figma/themes/light-high-contrast.json +758 -772
  40. package/dist/figma/themes/light-tritanopia.json +752 -763
  41. package/dist/figma/themes/light.json +644 -655
  42. package/dist/internalCss/dark-colorblind.css +282 -276
  43. package/dist/internalCss/dark-dimmed.css +300 -294
  44. package/dist/internalCss/dark-high-contrast.css +314 -308
  45. package/dist/internalCss/dark-tritanopia.css +282 -276
  46. package/dist/internalCss/dark.css +272 -266
  47. package/dist/internalCss/light-colorblind.css +234 -228
  48. package/dist/internalCss/light-high-contrast.css +270 -264
  49. package/dist/internalCss/light-tritanopia.css +234 -228
  50. package/dist/internalCss/light.css +224 -218
  51. package/dist/styleLint/functional/themes/dark-colorblind.json +217 -289
  52. package/dist/styleLint/functional/themes/dark-dimmed.json +245 -317
  53. package/dist/styleLint/functional/themes/dark-high-contrast.json +255 -317
  54. package/dist/styleLint/functional/themes/dark-tritanopia.json +215 -287
  55. package/dist/styleLint/functional/themes/dark.json +205 -277
  56. package/dist/styleLint/functional/themes/light-colorblind.json +194 -260
  57. package/dist/styleLint/functional/themes/light-high-contrast.json +242 -308
  58. package/dist/styleLint/functional/themes/light-tritanopia.json +193 -257
  59. package/dist/styleLint/functional/themes/light.json +183 -247
  60. package/package.json +1 -1
  61. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -142
  62. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -92
  63. package/src/tokens/base/color/dark/dark.json5 +131 -104
  64. package/src/tokens/base/color/light/light.high-contrast.json5 +0 -92
  65. package/src/tokens/base/color/light/light.json5 +130 -103
  66. package/src/tokens/functional/color/dark/app-dark.json5 +1 -1
  67. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +126 -10
  68. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +91 -81
  69. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -7
  70. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -6
  71. package/src/tokens/functional/color/dark/patterns-dark.json5 +46 -72
  72. package/src/tokens/functional/color/dark/primitives-dark.json5 +14 -24
  73. package/src/tokens/functional/color/dark/syntax-dark.json5 +12 -12
  74. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  75. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +51 -126
  76. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -7
  77. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -6
  78. package/src/tokens/functional/color/light/patterns-light.json5 +38 -64
  79. package/src/tokens/functional/color/light/primitives-light.json5 +12 -18
  80. package/src/tokens/functional/color/light/syntax-light.json5 +12 -12
  81. package/src/tokens/functional/shadow/dark.json5 +1 -1
  82. package/src/tokens/functional/shadow/light.json5 +11 -11
package/src/tokens/functional/color/dark/app-dark.json5 CHANGED
@@ -372,7 +372,7 @@
372
372
  syntax: {
373
373
  fgColor: {
374
374
  comment: {
375
- $value: '{base.color.neutral.3}',
375
+ $value: '{base.color.neutral.7}',
376
376
  $type: 'color',
377
377
  $extensions: {
378
378
  'org.primer.figma': {
package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 CHANGED
@@ -4,6 +4,97 @@
4
4
  * @description All overwrites for functional color tokens for dark dimmed color mode are in this file
5
5
  */
6
6
  {
7
+ bgColor: {
8
+ default: {
9
+ $value: '{base.color.neutral.2}',
10
+ $type: 'color',
11
+ },
12
+ muted: {
13
+ $value: '{base.color.neutral.3}',
14
+ $type: 'color',
15
+ },
16
+ inset: {
17
+ $value: '{base.color.neutral.1}',
18
+ $type: 'color',
19
+ },
20
+ disabled: {
21
+ $value: '{base.color.neutral.4}',
22
+ $type: 'color',
23
+ },
24
+ neutral: {
25
+ emphasis: {
26
+ $value: '{base.color.neutral.7}',
27
+ $type: 'color',
28
+ },
29
+ },
30
+ },
31
+ fgColor: {
32
+ default: {
33
+ $value: '{base.color.neutral.9}',
34
+ $type: 'color',
35
+ },
36
+ onEmphasis: {
37
+ $value: '{base.color.neutral.11}',
38
+ $type: 'color',
39
+ },
40
+ },
41
+ control: {
42
+ bgColor: {
43
+ rest: {
44
+ $value: '{base.color.neutral.4}',
45
+ $type: 'color',
46
+ },
47
+ hover: {
48
+ $value: '{base.color.neutral.5}',
49
+ $type: 'color',
50
+ },
51
+ active: {
52
+ $value: '{base.color.neutral.6}',
53
+ $type: 'color',
54
+ },
55
+ },
56
+ borderColor: {
57
+ rest: {
58
+ $value: '{borderColor.default}',
59
+ $type: 'color',
60
+ },
61
+ },
62
+ transparent: {
63
+ bgColor: {
64
+ hover: {
65
+ $value: '{base.color.neutral.7}',
66
+ $type: 'color',
67
+ alpha: 0.15,
68
+ },
69
+ active: {
70
+ $value: '{base.color.neutral.7}',
71
+ $type: 'color',
72
+ alpha: 0.2,
73
+ },
74
+ selected: {
75
+ $value: '{base.color.neutral.7}',
76
+ $type: 'color',
77
+ alpha: 0.1,
78
+ },
79
+ },
80
+ },
81
+ },
82
+ controlTrack: {
83
+ bgColor: {
84
+ rest: {
85
+ $value: '{base.color.neutral.4}',
86
+ $type: 'color',
87
+ },
88
+ hover: {
89
+ $value: '{base.color.neutral.5}',
90
+ $type: 'color',
91
+ },
92
+ active: {
93
+ $value: '{base.color.neutral.6}',
94
+ $type: 'color',
95
+ },
96
+ },
97
+ },
7
98
  diffBlob: {
8
99
  expander: {
9
100
  iconColor: {
@@ -12,6 +103,19 @@
12
103
  },
13
104
  },
14
105
  },
106
+ overlay: {
107
+ backdrop: {
108
+ bgColor: {
109
+ $value: '{base.color.neutral.3}',
110
+ $type: 'color',
111
+ alpha: 0.4,
112
+ },
113
+ },
114
+ bgColor: {
115
+ $value: '{base.color.neutral.4}',
116
+ $type: 'color',
117
+ },
118
+ },
15
119
  button: {
16
120
  primary: {
17
121
  bgColor: {
@@ -39,19 +143,31 @@
39
143
  },
40
144
  invisible: {
41
145
  iconColor: {
146
+ rest: {
147
+ $value: '{base.color.neutral.9}',
148
+ $type: 'color',
149
+ },
42
150
  hover: {
43
- $value: '{fgColor.muted}',
44
- $type: 'color',
45
- $extensions: {
46
- 'org.primer.figma': {
47
- collection: 'mode',
48
- mode: 'dark',
49
- group: 'component',
50
- scopes: ['fgColor'],
51
- },
52
- },
151
+ $value: '{base.color.neutral.9}',
152
+ $type: 'color',
53
153
  },
54
154
  },
55
155
  },
156
+ inactive: {
157
+ bgColor: {
158
+ $value: '{base.color.neutral.4}',
159
+ $type: 'color',
160
+ },
161
+ fgColor: {
162
+ $value: '{base.color.neutral.7}',
163
+ $type: 'color',
164
+ },
165
+ },
166
+ },
167
+ timelineBadge: {
168
+ bgColor: {
169
+ $value: '{base.color.neutral.3}',
170
+ $type: 'color',
171
+ },
56
172
  },
57
173
  }
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -5,22 +5,24 @@
5
5
  */
6
6
  {
7
7
  fgColor: {
8
+ default: {
9
+ $value: '{base.color.white}',
10
+ $type: 'color',
11
+ },
8
12
  onEmphasis: {
9
- $value: '{base.color.neutral.9}',
13
+ $value: '{base.color.black}',
10
14
  $type: 'color',
11
15
  },
12
16
  muted: {
13
- $value: '{base.color.neutral.1}',
17
+ $value: '{base.color.neutral.9}',
14
18
  $type: 'color',
15
- mix: null,
16
- alpha: 1,
17
19
  },
18
20
  disabled: {
19
- $value: '{base.color.neutral.4}',
21
+ $value: '{base.color.neutral.8}',
20
22
  $type: 'color',
21
23
  },
22
24
  neutral: {
23
- $value: '{base.color.neutral.3}',
25
+ $value: '{base.color.neutral.9}',
24
26
  $type: 'color',
25
27
  },
26
28
  accent: {
@@ -49,26 +51,25 @@
49
51
  },
50
52
  },
51
53
  bgColor: {
54
+ default: {
55
+ $value: '{base.color.black}',
56
+ $type: 'color',
57
+ },
52
58
  muted: {
53
- $value: '{base.color.neutral.9}',
59
+ $value: '{base.color.neutral.1}',
54
60
  $type: 'color',
55
- mix: {
56
- color: '{base.color.neutral.8}',
57
- weight: 0.5,
58
- },
59
61
  },
60
62
  emphasis: {
61
63
  $value: '{base.color.white}',
62
64
  $type: 'color',
63
65
  },
66
+ disabled: {
67
+ $value: '{base.color.neutral.3}',
68
+ $type: 'color',
69
+ },
64
70
  neutral: {
65
- muted: {
66
- $value: '{base.color.neutral.5}',
67
- $type: 'color',
68
- alpha: 0.1,
69
- },
70
71
  emphasis: {
71
- $value: '{base.color.neutral.4}',
72
+ $value: '{base.color.neutral.9}',
72
73
  $type: 'color',
73
74
  },
74
75
  },
@@ -154,13 +155,6 @@
154
155
  alpha: 0.09,
155
156
  },
156
157
  },
157
- upsell: {
158
- muted: {
159
- $value: '{bgColor.done.muted}',
160
- $type: 'color',
161
- alpha: 0.09,
162
- },
163
- },
164
158
  sponsors: {
165
159
  muted: {
166
160
  $value: '{base.color.pink.5}',
@@ -175,34 +169,23 @@
175
169
  },
176
170
  borderColor: {
177
171
  default: {
178
- $value: '{base.color.neutral.5}',
172
+ $value: '{base.color.neutral.9}',
179
173
  $type: 'color',
180
174
  },
181
175
  muted: {
182
- $value: '{base.color.neutral.5}',
176
+ $value: '{borderColor.default}',
183
177
  $type: 'color',
184
178
  alpha: 1,
185
179
  },
180
+ emphasis: {
181
+ $value: '{borderColor.default}',
182
+ $type: 'color',
183
+ },
186
184
  translucent: {
187
185
  $value: '{base.color.neutral.5}',
188
186
  $type: 'color',
189
187
  alpha: 1,
190
188
  },
191
- emphasis: {
192
- $value: '{base.color.neutral.4}',
193
- $type: 'color',
194
- },
195
- neutral: {
196
- muted: {
197
- $value: '{base.color.neutral.4}',
198
- $type: 'color',
199
- alpha: 1,
200
- },
201
- emphasis: {
202
- $value: '{base.color.neutral.4}',
203
- $type: 'color',
204
- },
205
- },
206
189
  accent: {
207
190
  muted: {
208
191
  $value: '{base.color.blue.4}',
@@ -274,25 +257,31 @@
274
257
  $type: 'color',
275
258
  },
276
259
  },
260
+ counter: {
261
+ borderColor: {
262
+ $value: '{borderColor.default}',
263
+ $type: 'color',
264
+ },
265
+ },
277
266
  control: {
278
267
  fgColor: {
279
268
  placeholder: {
280
- $value: '{base.color.neutral.2}',
269
+ $value: '{base.color.neutral.9}',
281
270
  $type: 'color',
282
- mix: {
283
- color: '{base.color.neutral.1}',
284
- weight: 0.5,
285
- },
286
271
  },
287
272
  },
288
273
  bgColor: {
274
+ rest: {
275
+ $value: '{base.color.neutral.3}',
276
+ $type: 'color',
277
+ },
278
+ hover: {
279
+ $value: '{base.color.neutral.4}',
280
+ $type: 'color',
281
+ },
289
282
  active: {
290
- $value: '{base.color.neutral.7}',
283
+ $value: '{base.color.neutral.5}',
291
284
  $type: 'color',
292
- mix: {
293
- color: '{base.color.neutral.8}',
294
- weight: 0.2,
295
- },
296
285
  },
297
286
  },
298
287
  borderColor: {
@@ -305,7 +294,7 @@
305
294
  transparent: {
306
295
  bgColor: {
307
296
  hover: {
308
- $value: '{base.color.neutral.8}',
297
+ $value: '{base.color.neutral.5}',
309
298
  $type: 'color',
310
299
  alpha: 1,
311
300
  },
@@ -315,7 +304,7 @@
315
304
  alpha: 1,
316
305
  },
317
306
  selected: {
318
- $value: '{base.color.neutral.6}',
307
+ $value: '{base.color.neutral.5}',
319
308
  $type: 'color',
320
309
  alpha: 1,
321
310
  },
@@ -326,7 +315,7 @@
326
315
  $type: 'color',
327
316
  },
328
317
  active: {
329
- $value: '{base.color.neutral.4}',
318
+ $value: '{borderColor.default}',
330
319
  $type: 'color',
331
320
  },
332
321
  },
@@ -362,6 +351,20 @@
362
351
  $type: 'color',
363
352
  },
364
353
  },
354
+ bgColor: {
355
+ rest: {
356
+ $value: '{base.color.neutral.4}',
357
+ $type: 'color',
358
+ },
359
+ hover: {
360
+ $value: '{base.color.neutral.5}',
361
+ $type: 'color',
362
+ },
363
+ active: {
364
+ $value: '{base.color.neutral.6}',
365
+ $type: 'color',
366
+ },
367
+ },
365
368
  borderColor: {
366
369
  rest: {
367
370
  $value: '{borderColor.emphasis}',
@@ -412,15 +415,13 @@
412
415
  },
413
416
  },
414
417
  invisible: {
415
- fgColor: {
416
- hover: {
417
- $value: '{base.color.blue.8}',
418
+ iconColor: {
419
+ rest: {
420
+ $value: '{base.color.neutral.10}',
418
421
  $type: 'color',
419
422
  },
420
- },
421
- iconColor: {
422
423
  hover: {
423
- $value: '{fgColor.onEmphasis}',
424
+ $value: '{base.color.neutral.10}',
424
425
  $type: 'color',
425
426
  },
426
427
  },
@@ -454,6 +455,28 @@
454
455
  },
455
456
  },
456
457
  },
458
+ borderColor: {
459
+ hover: {
460
+ $value: '{base.color.red.2}',
461
+ $type: 'color',
462
+ alpha: 1,
463
+ },
464
+ active: {
465
+ $value: '{base.color.red.2}',
466
+ $type: 'color',
467
+ alpha: 1,
468
+ },
469
+ },
470
+ },
471
+ inactive: {
472
+ bgColor: {
473
+ $value: '{control.bgColor.rest}',
474
+ $type: 'color',
475
+ },
476
+ fgColor: {
477
+ $value: '{base.color.neutral.9}',
478
+ $type: 'color',
479
+ },
457
480
  },
458
481
  },
459
482
  buttonCounter: {
@@ -528,20 +551,6 @@
528
551
  },
529
552
  },
530
553
  },
531
- underlineNav: {
532
- borderColor: {
533
- hover: {
534
- $value: '{base.color.neutral.3}',
535
- $type: 'color',
536
- },
537
- },
538
- iconColor: {
539
- rest: {
540
- $value: '{base.color.neutral.1}',
541
- $type: 'color',
542
- },
543
- },
544
- },
545
554
  codeMirror: {
546
555
  selection: {
547
556
  bgColor: {
@@ -553,14 +562,15 @@
553
562
  },
554
563
  overlay: {
555
564
  borderColor: {
556
- $value: '{borderColor.muted}',
565
+ $value: '{borderColor.default}',
557
566
  $type: 'color',
558
- $extensions: {
559
- 'org.primer.figma': {
560
- collection: 'mode',
561
- mode: 'dark',
562
- group: 'component (internal)',
563
- },
567
+ alpha: null,
568
+ },
569
+ backdrop: {
570
+ bgColor: {
571
+ $value: '{base.color.neutral.10}',
572
+ $type: 'color',
573
+ alpha: 0.4,
564
574
  },
565
575
  },
566
576
  },
package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 CHANGED
@@ -18,7 +18,7 @@
18
18
  $type: 'color',
19
19
  },
20
20
  closed: {
21
- $value: '{base.color.neutral.3}',
21
+ $value: '{fgColor.muted}',
22
22
  $type: 'color',
23
23
  },
24
24
  },
@@ -58,12 +58,11 @@
58
58
  },
59
59
  closed: {
60
60
  muted: {
61
- $value: '{base.color.neutral.4}',
61
+ $value: '{bgColor.neutral.muted}',
62
62
  $type: 'color',
63
- alpha: 0.4,
64
63
  },
65
64
  emphasis: {
66
- $value: '{base.color.neutral.4}',
65
+ $value: '{bgColor.neutral.emphasis}',
67
66
  $type: 'color',
68
67
  },
69
68
  },
@@ -82,12 +81,11 @@
82
81
  },
83
82
  closed: {
84
83
  muted: {
85
- $value: '{base.color.neutral.4}',
84
+ $value: '{borderColor.muted}',
86
85
  $type: 'color',
87
- alpha: 0.4,
88
86
  },
89
87
  emphasis: {
90
- $value: '{base.color.neutral.4}',
88
+ $value: '{borderColor.emphasis}',
91
89
  $type: 'color',
92
90
  },
93
91
  },
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 CHANGED
@@ -18,7 +18,7 @@
18
18
  $type: 'color',
19
19
  },
20
20
  closed: {
21
- $value: '{base.color.neutral.4}',
21
+ $value: '{fgColor.muted}',
22
22
  $type: 'color',
23
23
  },
24
24
  },
@@ -58,12 +58,12 @@
58
58
  },
59
59
  closed: {
60
60
  muted: {
61
- $value: '{base.color.neutral.4}',
61
+ $value: '{bgColor.neutral.muted}',
62
62
  $type: 'color',
63
63
  alpha: 0.1,
64
64
  },
65
65
  emphasis: {
66
- $value: '{base.color.neutral.5}',
66
+ $value: '{bgColor.neutral.emphasis}',
67
67
  $type: 'color',
68
68
  },
69
69
  },
@@ -104,12 +104,11 @@
104
104
  },
105
105
  closed: {
106
106
  muted: {
107
- $value: '{base.color.neutral.4}',
107
+ $value: '{borderColor.default}',
108
108
  $type: 'color',
109
- alpha: 0.4,
110
109
  },
111
110
  emphasis: {
112
- $value: '{base.color.neutral.5}',
111
+ $value: '{borderColor.emphasis}',
113
112
  $type: 'color',
114
113
  },
115
114
  },