@primer/primitives 9.0.0-rc.fa8264ac → 9.0.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 (81) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +12 -8
  2. package/dist/css/functional/themes/dark-dimmed.css +10 -6
  3. package/dist/css/functional/themes/dark-high-contrast.css +54 -50
  4. package/dist/css/functional/themes/dark-tritanopia.css +12 -8
  5. package/dist/css/functional/themes/dark.css +10 -6
  6. package/dist/css/functional/themes/light-colorblind.css +16 -12
  7. package/dist/css/functional/themes/light-high-contrast.css +22 -18
  8. package/dist/css/functional/themes/light-tritanopia.css +16 -12
  9. package/dist/css/functional/themes/light.css +14 -10
  10. package/dist/docs/functional/themes/dark-colorblind.json +153 -97
  11. package/dist/docs/functional/themes/dark-dimmed.json +155 -99
  12. package/dist/docs/functional/themes/dark-high-contrast.json +243 -161
  13. package/dist/docs/functional/themes/dark-tritanopia.json +153 -97
  14. package/dist/docs/functional/themes/dark.json +152 -96
  15. package/dist/docs/functional/themes/light-colorblind.json +159 -101
  16. package/dist/docs/functional/themes/light-high-contrast.json +177 -117
  17. package/dist/docs/functional/themes/light-tritanopia.json +159 -101
  18. package/dist/docs/functional/themes/light.json +158 -100
  19. package/dist/figma/figma.json +3 -3
  20. package/dist/figma/scales/dark-dimmed.json +56 -24
  21. package/dist/figma/scales/dark-high-constrast.json +56 -24
  22. package/dist/figma/scales/dark.json +56 -24
  23. package/dist/figma/scales/light-high-constrast.json +59 -27
  24. package/dist/figma/scales/light.json +59 -27
  25. package/dist/figma/shadows/dark-colorblind.json +167 -167
  26. package/dist/figma/shadows/dark-dimmed.json +167 -167
  27. package/dist/figma/shadows/dark-high-contrast.json +167 -167
  28. package/dist/figma/shadows/dark-tritanopia.json +167 -167
  29. package/dist/figma/shadows/dark.json +167 -167
  30. package/dist/figma/shadows/light-colorblind.json +84 -84
  31. package/dist/figma/shadows/light-high-contrast.json +84 -84
  32. package/dist/figma/shadows/light-tritanopia.json +84 -84
  33. package/dist/figma/shadows/light.json +84 -84
  34. package/dist/figma/themes/dark-colorblind.json +1023 -992
  35. package/dist/figma/themes/dark-dimmed.json +1943 -1912
  36. package/dist/figma/themes/dark-high-contrast.json +2865 -2830
  37. package/dist/figma/themes/dark-tritanopia.json +1022 -991
  38. package/dist/figma/themes/dark.json +1019 -988
  39. package/dist/figma/themes/light-colorblind.json +1419 -1387
  40. package/dist/figma/themes/light-high-contrast.json +1254 -1221
  41. package/dist/figma/themes/light-tritanopia.json +1419 -1387
  42. package/dist/figma/themes/light.json +1357 -1325
  43. package/dist/internalCss/dark-colorblind.css +40 -32
  44. package/dist/internalCss/dark-dimmed.css +38 -30
  45. package/dist/internalCss/dark-high-contrast.css +82 -74
  46. package/dist/internalCss/dark-tritanopia.css +40 -32
  47. package/dist/internalCss/dark.css +38 -30
  48. package/dist/internalCss/light-colorblind.css +46 -38
  49. package/dist/internalCss/light-high-contrast.css +52 -44
  50. package/dist/internalCss/light-tritanopia.css +46 -38
  51. package/dist/internalCss/light.css +44 -36
  52. package/dist/styleLint/functional/themes/dark-colorblind.json +153 -97
  53. package/dist/styleLint/functional/themes/dark-dimmed.json +155 -99
  54. package/dist/styleLint/functional/themes/dark-high-contrast.json +243 -161
  55. package/dist/styleLint/functional/themes/dark-tritanopia.json +153 -97
  56. package/dist/styleLint/functional/themes/dark.json +152 -96
  57. package/dist/styleLint/functional/themes/light-colorblind.json +159 -101
  58. package/dist/styleLint/functional/themes/light-high-contrast.json +177 -117
  59. package/dist/styleLint/functional/themes/light-tritanopia.json +159 -101
  60. package/dist/styleLint/functional/themes/light.json +158 -100
  61. package/package.json +1 -1
  62. package/src/schemas/colorToken.ts +1 -1
  63. package/src/schemas/dimensionToken.ts +1 -0
  64. package/src/schemas/scopes.ts +10 -21
  65. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -20
  66. package/src/tokens/base/color/dark/dark.json5 +29 -11
  67. package/src/tokens/base/color/light/light.json5 +29 -11
  68. package/src/tokens/functional/color/dark/app-dark.json5 +5 -5
  69. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +24 -24
  70. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +82 -83
  71. package/src/tokens/functional/color/dark/patterns-dark.json5 +62 -37
  72. package/src/tokens/functional/color/dark/primitives-dark.json5 +23 -23
  73. package/src/tokens/functional/color/dark/syntax-dark.json5 +14 -14
  74. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  75. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +73 -25
  76. package/src/tokens/functional/color/light/patterns-light.json5 +65 -39
  77. package/src/tokens/functional/color/light/primitives-light.json5 +23 -23
  78. package/src/tokens/functional/color/light/syntax-light.json5 +14 -14
  79. package/src/tokens/functional/shadow/dark.json5 +15 -15
  80. package/src/tokens/functional/shadow/light.json5 +16 -16
  81. package/src/transformers/figmaAttributes.ts +6 -0
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -6,19 +6,19 @@
6
6
  {
7
7
  fgColor: {
8
8
  default: {
9
- $value: '{base.color.white}',
9
+ $value: '{base.color.neutral.13}',
10
10
  $type: 'color',
11
11
  },
12
12
  muted: {
13
- $value: '{base.color.neutral.9}',
13
+ $value: '{base.color.neutral.10}',
14
14
  $type: 'color',
15
15
  },
16
16
  disabled: {
17
- $value: '{base.color.neutral.8}',
17
+ $value: '{base.color.neutral.9}',
18
18
  $type: 'color',
19
19
  },
20
20
  neutral: {
21
- $value: '{base.color.neutral.9}',
21
+ $value: '{base.color.neutral.11}',
22
22
  $type: 'color',
23
23
  },
24
24
  accent: {
@@ -26,7 +26,15 @@
26
26
  $type: 'color',
27
27
  mix: {
28
28
  color: '{base.color.blue.2}',
29
- weight: 0.05,
29
+ weight: 0.08,
30
+ },
31
+ },
32
+ success: {
33
+ $value: '{base.color.green.3}',
34
+ $type: 'color',
35
+ mix: {
36
+ color: '{base.color.green.2}',
37
+ weight: 0.08,
30
38
  },
31
39
  },
32
40
  danger: {
@@ -40,88 +48,67 @@
40
48
  done: {
41
49
  $value: '{base.color.purple.3}',
42
50
  $type: 'color',
51
+ mix: {
52
+ color: '{base.color.purple.2}',
53
+ weight: 0.5,
54
+ },
43
55
  },
44
56
  sponsors: {
45
57
  $value: '{base.color.pink.3}',
46
58
  $type: 'color',
59
+ mix: {
60
+ color: '{base.color.pink.2}',
61
+ weight: 0.08,
62
+ },
47
63
  },
48
64
  },
49
65
  bgColor: {
50
66
  default: {
51
- $value: '{base.color.black}',
67
+ $value: '{base.color.neutral.0}',
52
68
  $type: 'color',
53
69
  },
54
70
  muted: {
55
- $value: '{base.color.neutral.1}',
71
+ $value: '{base.color.neutral.2}',
56
72
  $type: 'color',
57
73
  },
58
74
  disabled: {
59
- $value: '{base.color.neutral.3}',
75
+ $value: '{base.color.neutral.4}',
60
76
  $type: 'color',
61
77
  },
62
78
  disabled: {
63
- $value: '{base.color.neutral.3}',
79
+ $value: '{base.color.neutral.4}',
64
80
  $type: 'color',
65
81
  },
66
82
  neutral: {
67
83
  emphasis: {
68
- $value: '{base.color.neutral.6}',
84
+ $value: '{base.color.neutral.7}',
69
85
  $type: 'color',
70
86
  },
71
- },
72
- accent: {
73
87
  muted: {
74
- $value: '{base.color.blue.5}',
88
+ $value: '{base.color.neutral.3}',
75
89
  $type: 'color',
76
- alpha: 0.1,
90
+ alpha: 1,
77
91
  },
92
+ },
93
+ accent: {
78
94
  emphasis: {
79
95
  $value: '{base.color.blue.9}',
80
96
  $type: 'color',
81
97
  },
82
98
  },
83
99
  success: {
84
- muted: {
85
- $value: '{base.color.green.4}',
86
- $type: 'color',
87
- alpha: 0.14,
88
- },
89
100
  emphasis: {
90
101
  $value: '{base.color.green.9}',
91
102
  $type: 'color',
92
103
  },
93
104
  },
94
- open: {
95
- muted: {
96
- $value: '{bgColor.success.muted}',
97
- $type: 'color',
98
- alpha: 0.14,
99
- },
100
- },
101
105
  danger: {
102
- muted: {
103
- $value: '{base.color.red.4}',
104
- $type: 'color',
105
- alpha: 0.09,
106
- },
107
106
  emphasis: {
108
107
  $value: '{base.color.red.9}',
109
108
  $type: 'color',
110
109
  },
111
110
  },
112
- closed: {
113
- muted: {
114
- $value: '{bgColor.danger.muted}',
115
- $type: 'color',
116
- alpha: 0.09,
117
- },
118
- },
119
111
  severe: {
120
- muted: {
121
- $value: '{base.color.orange.4}',
122
- $type: 'color',
123
- alpha: 0.088,
124
- },
125
112
  emphasis: {
126
113
  $value: '{base.color.orange.9}',
127
114
  $type: 'color',
@@ -134,29 +121,12 @@
134
121
  },
135
122
  },
136
123
  done: {
137
- muted: {
138
- $value: '{base.color.purple.5}',
139
- $type: 'color',
140
- alpha: 0.09,
141
- },
142
124
  emphasis: {
143
125
  $value: '{base.color.purple.9}',
144
126
  $type: 'color',
145
127
  },
146
128
  },
147
- upsell: {
148
- muted: {
149
- $value: '{bgColor.done.muted}',
150
- $type: 'color',
151
- alpha: 0.09,
152
- },
153
- },
154
129
  sponsors: {
155
- muted: {
156
- $value: '{base.color.pink.5}',
157
- $type: 'color',
158
- alpha: 0.09,
159
- },
160
130
  emphasis: {
161
131
  $value: '{base.color.pink.9}',
162
132
  $type: 'color',
@@ -165,7 +135,7 @@
165
135
  },
166
136
  borderColor: {
167
137
  default: {
168
- $value: '{base.color.neutral.9}',
138
+ $value: '{base.color.neutral.10}',
169
139
  $type: 'color',
170
140
  },
171
141
  muted: {
@@ -178,12 +148,12 @@
178
148
  $type: 'color',
179
149
  },
180
150
  disabled: {
181
- $value: '{base.color.neutral.8}',
151
+ $value: '{base.color.neutral.9}',
182
152
  $type: 'color',
183
153
  alpha: 0.12,
184
154
  },
185
155
  translucent: {
186
- $value: '{base.color.neutral.5}',
156
+ $value: '{base.color.neutral.6}',
187
157
  $type: 'color',
188
158
  alpha: 1,
189
159
  },
@@ -215,6 +185,20 @@
215
185
  alpha: 1,
216
186
  },
217
187
  },
188
+ closed: {
189
+ muted: {
190
+ $value: '{borderColor.danger.muted}',
191
+ $type: 'color',
192
+ alpha: 1,
193
+ },
194
+ },
195
+ upsell: {
196
+ muted: {
197
+ $value: '{borderColor.done.muted}',
198
+ $type: 'color',
199
+ alpha: 1,
200
+ },
201
+ },
218
202
  severe: {
219
203
  muted: {
220
204
  $value: '{base.color.orange.4}',
@@ -247,7 +231,7 @@
247
231
  // patterns
248
232
  avatar: {
249
233
  borderColor: {
250
- $value: '{base.color.white}',
234
+ $value: '{base.color.neutral.13}',
251
235
  $type: 'color',
252
236
  alpha: 0.9,
253
237
  },
@@ -263,25 +247,40 @@
263
247
  $value: '{borderColor.default}',
264
248
  $type: 'color',
265
249
  },
250
+ bgColor: {
251
+ muted: {
252
+ $value: '{bgColor.neutral.muted}',
253
+ $type: 'color',
254
+ $extensions: {
255
+ 'org.primer.figma': {
256
+ collection: 'mode',
257
+ mode: 'dark',
258
+ group: 'component',
259
+ scopes: ['bgColor'],
260
+ },
261
+ },
262
+ alpha: 1,
263
+ },
264
+ },
266
265
  },
267
266
  control: {
268
267
  fgColor: {
269
268
  placeholder: {
270
- $value: '{base.color.neutral.9}',
269
+ $value: '{base.color.neutral.10}',
271
270
  $type: 'color',
272
271
  },
273
272
  },
274
273
  bgColor: {
275
274
  rest: {
276
- $value: '{base.color.neutral.3}',
275
+ $value: '{base.color.neutral.4}',
277
276
  $type: 'color',
278
277
  },
279
278
  hover: {
280
- $value: '{base.color.neutral.4}',
279
+ $value: '{base.color.neutral.5}',
281
280
  $type: 'color',
282
281
  },
283
282
  active: {
284
- $value: '{base.color.neutral.5}',
283
+ $value: '{base.color.neutral.6}',
285
284
  $type: 'color',
286
285
  },
287
286
  },
@@ -295,17 +294,17 @@
295
294
  transparent: {
296
295
  bgColor: {
297
296
  hover: {
298
- $value: '{base.color.neutral.5}',
297
+ $value: '{base.color.neutral.6}',
299
298
  $type: 'color',
300
299
  alpha: 1,
301
300
  },
302
301
  active: {
303
- $value: '{base.color.neutral.6}',
302
+ $value: '{base.color.neutral.7}',
304
303
  $type: 'color',
305
304
  alpha: 1,
306
305
  },
307
306
  selected: {
308
- $value: '{base.color.neutral.5}',
307
+ $value: '{base.color.neutral.6}',
309
308
  $type: 'color',
310
309
  alpha: 1,
311
310
  },
@@ -370,15 +369,15 @@
370
369
  },
371
370
  bgColor: {
372
371
  rest: {
373
- $value: '{base.color.neutral.4}',
372
+ $value: '{base.color.neutral.5}',
374
373
  $type: 'color',
375
374
  },
376
375
  hover: {
377
- $value: '{base.color.neutral.5}',
376
+ $value: '{base.color.neutral.6}',
378
377
  $type: 'color',
379
378
  },
380
379
  active: {
381
- $value: '{base.color.neutral.6}',
380
+ $value: '{base.color.neutral.7}',
382
381
  $type: 'color',
383
382
  },
384
383
  },
@@ -411,23 +410,23 @@
411
410
  invisible: {
412
411
  iconColor: {
413
412
  rest: {
414
- $value: '{base.color.neutral.10}',
413
+ $value: '{base.color.neutral.11}',
415
414
  $type: 'color',
416
415
  },
417
416
  hover: {
418
- $value: '{base.color.neutral.10}',
417
+ $value: '{base.color.neutral.11}',
419
418
  $type: 'color',
420
419
  },
421
420
  },
422
421
  bgColor: {
423
422
  hover: {
424
- $value: '{base.color.neutral.1}',
423
+ $value: '{base.color.neutral.2}',
425
424
  $type: 'color',
426
425
  alpha: null,
427
426
  mix: null,
428
427
  },
429
428
  active: {
430
- $value: '{base.color.neutral.2}',
429
+ $value: '{base.color.neutral.3}',
431
430
  $type: 'color',
432
431
  alpha: null,
433
432
  mix: null,
@@ -483,7 +482,7 @@
483
482
  $type: 'color',
484
483
  },
485
484
  fgColor: {
486
- $value: '{base.color.neutral.9}',
485
+ $value: '{base.color.neutral.10}',
487
486
  $type: 'color',
488
487
  },
489
488
  },
@@ -492,7 +491,7 @@
492
491
  primary: {
493
492
  bgColor: {
494
493
  rest: {
495
- $value: '{base.color.black}',
494
+ $value: '{base.color.neutral.0}',
496
495
  $type: 'color',
497
496
  alpha: 0.15,
498
497
  },
@@ -501,12 +500,12 @@
501
500
  danger: {
502
501
  bgColor: {
503
502
  hover: {
504
- $value: '{base.color.black}',
503
+ $value: '{base.color.neutral.0}',
505
504
  $type: 'color',
506
505
  alpha: 0.15,
507
506
  },
508
507
  rest: {
509
- $value: '{base.color.black}',
508
+ $value: '{base.color.neutral.0}',
510
509
  $type: 'color',
511
510
  alpha: 0.15,
512
511
  },
@@ -577,7 +576,7 @@
577
576
  },
578
577
  backdrop: {
579
578
  bgColor: {
580
- $value: '{base.color.neutral.10}',
579
+ $value: '{base.color.neutral.11}',
581
580
  $type: 'color',
582
581
  alpha: 0.4,
583
582
  },