@primer/primitives 10.8.0-rc.69ebab9a → 10.8.0-rc.f296f65b

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 (54) hide show
  1. package/dist/css/base/motion/motion.css +4 -4
  2. package/dist/css/functional/size/border.css +2 -2
  3. package/dist/css/functional/typography/typography.css +11 -11
  4. package/dist/css/primitives.css +17 -17
  5. package/dist/docs/base/motion/motion.json +48 -32
  6. package/dist/docs/base/size/size.json +95 -76
  7. package/dist/docs/base/typography/typography.json +12 -8
  8. package/dist/docs/functional/size/border.json +42 -28
  9. package/dist/docs/functional/size/breakpoints.json +18 -12
  10. package/dist/docs/functional/size/size-coarse.json +9 -6
  11. package/dist/docs/functional/size/size-fine.json +9 -6
  12. package/dist/docs/functional/size/size.json +198 -132
  13. package/dist/docs/functional/size/viewport.json +18 -12
  14. package/dist/docs/functional/themes/dark-colorblind.json +2472 -1648
  15. package/dist/docs/functional/themes/dark-dimmed.json +2472 -1648
  16. package/dist/docs/functional/themes/dark-high-contrast.json +2472 -1648
  17. package/dist/docs/functional/themes/dark-tritanopia.json +2472 -1648
  18. package/dist/docs/functional/themes/dark.json +2472 -1648
  19. package/dist/docs/functional/themes/light-colorblind.json +2472 -1648
  20. package/dist/docs/functional/themes/light-high-contrast.json +2472 -1648
  21. package/dist/docs/functional/themes/light-tritanopia.json +2472 -1648
  22. package/dist/docs/functional/themes/light.json +2472 -1648
  23. package/dist/docs/functional/typography/typography.json +138 -92
  24. package/dist/figma/dimension/dimension.json +19 -19
  25. package/dist/internalCss/dark-colorblind.css +4 -4
  26. package/dist/internalCss/dark-dimmed.css +4 -4
  27. package/dist/internalCss/dark-high-contrast.css +4 -4
  28. package/dist/internalCss/dark-tritanopia.css +4 -4
  29. package/dist/internalCss/dark.css +4 -4
  30. package/dist/internalCss/light-colorblind.css +4 -4
  31. package/dist/internalCss/light-high-contrast.css +4 -4
  32. package/dist/internalCss/light-tritanopia.css +4 -4
  33. package/dist/internalCss/light.css +4 -4
  34. package/dist/styleLint/base/motion/motion.json +64 -48
  35. package/dist/styleLint/base/size/size.json +114 -95
  36. package/dist/styleLint/base/typography/typography.json +16 -12
  37. package/dist/styleLint/functional/size/border.json +59 -45
  38. package/dist/styleLint/functional/size/breakpoints.json +24 -18
  39. package/dist/styleLint/functional/size/size-coarse.json +12 -9
  40. package/dist/styleLint/functional/size/size-fine.json +12 -9
  41. package/dist/styleLint/functional/size/size.json +264 -198
  42. package/dist/styleLint/functional/size/viewport.json +28 -22
  43. package/dist/styleLint/functional/themes/dark-colorblind.json +3296 -2472
  44. package/dist/styleLint/functional/themes/dark-dimmed.json +3296 -2472
  45. package/dist/styleLint/functional/themes/dark-high-contrast.json +3296 -2472
  46. package/dist/styleLint/functional/themes/dark-tritanopia.json +3296 -2472
  47. package/dist/styleLint/functional/themes/dark.json +3296 -2472
  48. package/dist/styleLint/functional/themes/light-colorblind.json +3296 -2472
  49. package/dist/styleLint/functional/themes/light-high-contrast.json +3296 -2472
  50. package/dist/styleLint/functional/themes/light-tritanopia.json +3296 -2472
  51. package/dist/styleLint/functional/themes/light.json +3296 -2472
  52. package/dist/styleLint/functional/typography/typography.json +184 -138
  53. package/package.json +2 -3
  54. package/src/tokens/base/size/size.json5 +19 -19
@@ -1,5 +1,6 @@
1
1
  {
2
2
  "borderRadius-default": {
3
+ "key": "{borderRadius.default}",
3
4
  "$extensions": {
4
5
  "org.primer.figma": {
5
6
  "collection": "functional/size",
@@ -22,16 +23,17 @@
22
23
  "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
23
24
  }
24
25
  }
25
- }
26
+ },
27
+ "key": "{borderRadius.default}"
26
28
  },
27
29
  "name": "borderRadius-default",
28
30
  "attributes": {},
29
31
  "path": ["borderRadius", "default"],
30
- "key": "{borderRadius.default}",
31
32
  "value": "0.375rem",
32
33
  "type": "dimension"
33
34
  },
34
35
  "borderRadius-full": {
36
+ "key": "{borderRadius.full}",
35
37
  "$extensions": {
36
38
  "org.primer.figma": {
37
39
  "collection": "functional/size",
@@ -55,17 +57,18 @@
55
57
  "web": "var(--borderRadius-full) /* utility class: .circle */"
56
58
  }
57
59
  }
58
- }
60
+ },
61
+ "key": "{borderRadius.full}"
59
62
  },
60
63
  "name": "borderRadius-full",
61
64
  "attributes": {},
62
65
  "path": ["borderRadius", "full"],
63
- "key": "{borderRadius.full}",
64
66
  "value": "624.9375rem",
65
67
  "type": "dimension",
66
68
  "description": "Use this border radius for pill shaped elements"
67
69
  },
68
70
  "borderRadius-large": {
71
+ "key": "{borderRadius.large}",
69
72
  "$extensions": {
70
73
  "org.primer.figma": {
71
74
  "collection": "functional/size",
@@ -88,16 +91,17 @@
88
91
  "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
89
92
  }
90
93
  }
91
- }
94
+ },
95
+ "key": "{borderRadius.large}"
92
96
  },
93
97
  "name": "borderRadius-large",
94
98
  "attributes": {},
95
99
  "path": ["borderRadius", "large"],
96
- "key": "{borderRadius.large}",
97
100
  "value": "0.75rem",
98
101
  "type": "dimension"
99
102
  },
100
103
  "borderRadius-medium": {
104
+ "key": "{borderRadius.medium}",
101
105
  "$extensions": {
102
106
  "org.primer.figma": {
103
107
  "collection": "functional/size",
@@ -120,16 +124,17 @@
120
124
  "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
121
125
  }
122
126
  }
123
- }
127
+ },
128
+ "key": "{borderRadius.medium}"
124
129
  },
125
130
  "name": "borderRadius-medium",
126
131
  "attributes": {},
127
132
  "path": ["borderRadius", "medium"],
128
- "key": "{borderRadius.medium}",
129
133
  "value": "0.375rem",
130
134
  "type": "dimension"
131
135
  },
132
136
  "borderRadius-small": {
137
+ "key": "{borderRadius.small}",
133
138
  "$extensions": {
134
139
  "org.primer.figma": {
135
140
  "collection": "functional/size",
@@ -152,16 +157,17 @@
152
157
  "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
153
158
  }
154
159
  }
155
- }
160
+ },
161
+ "key": "{borderRadius.small}"
156
162
  },
157
163
  "name": "borderRadius-small",
158
164
  "attributes": {},
159
165
  "path": ["borderRadius", "small"],
160
- "key": "{borderRadius.small}",
161
166
  "value": "0.1875rem",
162
167
  "type": "dimension"
163
168
  },
164
169
  "borderWidth-default": {
170
+ "key": "{borderWidth.default}",
165
171
  "$extensions": {
166
172
  "org.primer.figma": {
167
173
  "collection": "functional/size",
@@ -178,16 +184,17 @@
178
184
  "collection": "functional/size",
179
185
  "scopes": ["borderWidth", "effectFloat"]
180
186
  }
181
- }
187
+ },
188
+ "key": "{borderWidth.default}"
182
189
  },
183
190
  "name": "borderWidth-default",
184
191
  "attributes": {},
185
192
  "path": ["borderWidth", "default"],
186
- "key": "{borderWidth.default}",
187
193
  "value": "0.0625rem",
188
194
  "type": "dimension"
189
195
  },
190
196
  "borderWidth-thick": {
197
+ "key": "{borderWidth.thick}",
191
198
  "$extensions": {
192
199
  "org.primer.figma": {
193
200
  "collection": "functional/size",
@@ -204,16 +211,17 @@
204
211
  "collection": "functional/size",
205
212
  "scopes": ["borderWidth", "effectFloat"]
206
213
  }
207
- }
214
+ },
215
+ "key": "{borderWidth.thick}"
208
216
  },
209
217
  "name": "borderWidth-thick",
210
218
  "attributes": {},
211
219
  "path": ["borderWidth", "thick"],
212
- "key": "{borderWidth.thick}",
213
220
  "value": "0.125rem",
214
221
  "type": "dimension"
215
222
  },
216
223
  "borderWidth-thicker": {
224
+ "key": "{borderWidth.thicker}",
217
225
  "$extensions": {
218
226
  "org.primer.figma": {
219
227
  "collection": "functional/size",
@@ -230,16 +238,17 @@
230
238
  "collection": "functional/size",
231
239
  "scopes": ["borderWidth", "effectFloat"]
232
240
  }
233
- }
241
+ },
242
+ "key": "{borderWidth.thicker}"
234
243
  },
235
244
  "name": "borderWidth-thicker",
236
245
  "attributes": {},
237
246
  "path": ["borderWidth", "thicker"],
238
- "key": "{borderWidth.thicker}",
239
247
  "value": "0.25rem",
240
248
  "type": "dimension"
241
249
  },
242
250
  "borderWidth-thin": {
251
+ "key": "{borderWidth.thin}",
243
252
  "$extensions": {
244
253
  "org.primer.figma": {
245
254
  "collection": "functional/size",
@@ -256,60 +265,64 @@
256
265
  "collection": "functional/size",
257
266
  "scopes": ["borderWidth", "effectFloat"]
258
267
  }
259
- }
268
+ },
269
+ "key": "{borderWidth.thin}"
260
270
  },
261
271
  "name": "borderWidth-thin",
262
272
  "attributes": {},
263
273
  "path": ["borderWidth", "thin"],
264
- "key": "{borderWidth.thin}",
265
274
  "value": "0.0625rem",
266
275
  "type": "dimension"
267
276
  },
268
277
  "boxShadow-thick": {
278
+ "key": "{boxShadow.thick}",
269
279
  "filePath": "src/tokens/functional/size/border.json5",
270
280
  "isSource": true,
271
281
  "original": {
272
282
  "$value": "inset 0 0 0 {borderWidth.thick}",
273
- "$type": "string"
283
+ "$type": "string",
284
+ "key": "{boxShadow.thick}"
274
285
  },
275
286
  "name": "boxShadow-thick",
276
287
  "attributes": {},
277
288
  "path": ["boxShadow", "thick"],
278
- "key": "{boxShadow.thick}",
279
289
  "value": "inset 0 0 0 0.125rem",
280
290
  "type": "string"
281
291
  },
282
292
  "boxShadow-thicker": {
293
+ "key": "{boxShadow.thicker}",
283
294
  "filePath": "src/tokens/functional/size/border.json5",
284
295
  "isSource": true,
285
296
  "original": {
286
297
  "$value": "inset 0 0 0 {borderWidth.thicker}",
287
- "$type": "string"
298
+ "$type": "string",
299
+ "key": "{boxShadow.thicker}"
288
300
  },
289
301
  "name": "boxShadow-thicker",
290
302
  "attributes": {},
291
303
  "path": ["boxShadow", "thicker"],
292
- "key": "{boxShadow.thicker}",
293
304
  "value": "inset 0 0 0 0.25rem",
294
305
  "type": "string"
295
306
  },
296
307
  "boxShadow-thin": {
308
+ "key": "{boxShadow.thin}",
297
309
  "filePath": "src/tokens/functional/size/border.json5",
298
310
  "isSource": true,
299
311
  "original": {
300
312
  "$value": "inset 0 0 0 {borderWidth.thin}",
301
313
  "$description": "Thin shadow for borders",
302
- "$type": "string"
314
+ "$type": "string",
315
+ "key": "{boxShadow.thin}"
303
316
  },
304
317
  "name": "boxShadow-thin",
305
318
  "attributes": {},
306
319
  "path": ["boxShadow", "thin"],
307
- "key": "{boxShadow.thin}",
308
320
  "value": "inset 0 0 0 0.0625rem",
309
321
  "type": "string",
310
322
  "description": "Thin shadow for borders"
311
323
  },
312
324
  "outline-focus-offset": {
325
+ "key": "{outline.focus.offset}",
313
326
  "$extensions": {
314
327
  "org.primer.figma": {
315
328
  "collection": "functional/size",
@@ -326,16 +339,17 @@
326
339
  "collection": "functional/size",
327
340
  "scopes": ["borderWidth", "effectFloat"]
328
341
  }
329
- }
342
+ },
343
+ "key": "{outline.focus.offset}"
330
344
  },
331
345
  "name": "outline-focus-offset",
332
346
  "attributes": {},
333
347
  "path": ["outline", "focus", "offset"],
334
- "key": "{outline.focus.offset}",
335
348
  "value": "-0.125rem",
336
349
  "type": "dimension"
337
350
  },
338
351
  "outline-focus-width": {
352
+ "key": "{outline.focus.width}",
339
353
  "$extensions": {
340
354
  "org.primer.figma": {
341
355
  "collection": "functional/size",
@@ -352,12 +366,12 @@
352
366
  "collection": "functional/size",
353
367
  "scopes": ["borderWidth", "effectFloat"]
354
368
  }
355
- }
369
+ },
370
+ "key": "{outline.focus.width}"
356
371
  },
357
372
  "name": "outline-focus-width",
358
373
  "attributes": {},
359
374
  "path": ["outline", "focus", "width"],
360
- "key": "{outline.focus.width}",
361
375
  "value": "0.125rem",
362
376
  "type": "dimension"
363
377
  }
@@ -1,5 +1,6 @@
1
1
  {
2
2
  "breakpoint-large": {
3
+ "key": "{breakpoint.large}",
3
4
  "$extensions": {
4
5
  "org.primer.figma": {
5
6
  "collection": "functional/size",
@@ -16,16 +17,17 @@
16
17
  "collection": "functional/size",
17
18
  "scopes": ["size"]
18
19
  }
19
- }
20
+ },
21
+ "key": "{breakpoint.large}"
20
22
  },
21
23
  "name": "breakpoint-large",
22
24
  "attributes": {},
23
25
  "path": ["breakpoint", "large"],
24
- "key": "{breakpoint.large}",
25
26
  "value": "63.25rem",
26
27
  "type": "dimension"
27
28
  },
28
29
  "breakpoint-medium": {
30
+ "key": "{breakpoint.medium}",
29
31
  "$extensions": {
30
32
  "org.primer.figma": {
31
33
  "collection": "functional/size",
@@ -42,16 +44,17 @@
42
44
  "collection": "functional/size",
43
45
  "scopes": ["size"]
44
46
  }
45
- }
47
+ },
48
+ "key": "{breakpoint.medium}"
46
49
  },
47
50
  "name": "breakpoint-medium",
48
51
  "attributes": {},
49
52
  "path": ["breakpoint", "medium"],
50
- "key": "{breakpoint.medium}",
51
53
  "value": "48rem",
52
54
  "type": "dimension"
53
55
  },
54
56
  "breakpoint-small": {
57
+ "key": "{breakpoint.small}",
55
58
  "$extensions": {
56
59
  "org.primer.figma": {
57
60
  "collection": "functional/size",
@@ -68,16 +71,17 @@
68
71
  "collection": "functional/size",
69
72
  "scopes": ["size"]
70
73
  }
71
- }
74
+ },
75
+ "key": "{breakpoint.small}"
72
76
  },
73
77
  "name": "breakpoint-small",
74
78
  "attributes": {},
75
79
  "path": ["breakpoint", "small"],
76
- "key": "{breakpoint.small}",
77
80
  "value": "34rem",
78
81
  "type": "dimension"
79
82
  },
80
83
  "breakpoint-xlarge": {
84
+ "key": "{breakpoint.xlarge}",
81
85
  "$extensions": {
82
86
  "org.primer.figma": {
83
87
  "collection": "functional/size",
@@ -94,16 +98,17 @@
94
98
  "collection": "functional/size",
95
99
  "scopes": ["size"]
96
100
  }
97
- }
101
+ },
102
+ "key": "{breakpoint.xlarge}"
98
103
  },
99
104
  "name": "breakpoint-xlarge",
100
105
  "attributes": {},
101
106
  "path": ["breakpoint", "xlarge"],
102
- "key": "{breakpoint.xlarge}",
103
107
  "value": "80rem",
104
108
  "type": "dimension"
105
109
  },
106
110
  "breakpoint-xsmall": {
111
+ "key": "{breakpoint.xsmall}",
107
112
  "$extensions": {
108
113
  "org.primer.figma": {
109
114
  "collection": "functional/size",
@@ -120,16 +125,17 @@
120
125
  "collection": "functional/size",
121
126
  "scopes": ["size"]
122
127
  }
123
- }
128
+ },
129
+ "key": "{breakpoint.xsmall}"
124
130
  },
125
131
  "name": "breakpoint-xsmall",
126
132
  "attributes": {},
127
133
  "path": ["breakpoint", "xsmall"],
128
- "key": "{breakpoint.xsmall}",
129
134
  "value": "20rem",
130
135
  "type": "dimension"
131
136
  },
132
137
  "breakpoint-xxlarge": {
138
+ "key": "{breakpoint.xxlarge}",
133
139
  "$extensions": {
134
140
  "org.primer.figma": {
135
141
  "collection": "functional/size",
@@ -146,12 +152,12 @@
146
152
  "collection": "functional/size",
147
153
  "scopes": ["size"]
148
154
  }
149
- }
155
+ },
156
+ "key": "{breakpoint.xxlarge}"
150
157
  },
151
158
  "name": "breakpoint-xxlarge",
152
159
  "attributes": {},
153
160
  "path": ["breakpoint", "xxlarge"],
154
- "key": "{breakpoint.xxlarge}",
155
161
  "value": "87.5rem",
156
162
  "type": "dimension"
157
163
  }
@@ -1,43 +1,46 @@
1
1
  {
2
2
  "control-minTarget-auto": {
3
+ "key": "{control.minTarget.auto}",
3
4
  "filePath": "src/tokens/functional/size/size-coarse.json5",
4
5
  "isSource": true,
5
6
  "original": {
6
7
  "$value": "{base.size.44}",
7
- "$type": "dimension"
8
+ "$type": "dimension",
9
+ "key": "{control.minTarget.auto}"
8
10
  },
9
11
  "name": "control-minTarget-auto",
10
12
  "attributes": {},
11
13
  "path": ["control", "minTarget", "auto"],
12
- "key": "{control.minTarget.auto}",
13
14
  "value": "2.75rem",
14
15
  "type": "dimension"
15
16
  },
16
17
  "controlStack-medium-gap-auto": {
18
+ "key": "{controlStack.medium.gap.auto}",
17
19
  "filePath": "src/tokens/functional/size/size-coarse.json5",
18
20
  "isSource": true,
19
21
  "original": {
20
22
  "$value": "{base.size.12}",
21
- "$type": "dimension"
23
+ "$type": "dimension",
24
+ "key": "{controlStack.medium.gap.auto}"
22
25
  },
23
26
  "name": "controlStack-medium-gap-auto",
24
27
  "attributes": {},
25
28
  "path": ["controlStack", "medium", "gap", "auto"],
26
- "key": "{controlStack.medium.gap.auto}",
27
29
  "value": "0.75rem",
28
30
  "type": "dimension"
29
31
  },
30
32
  "controlStack-small-gap-auto": {
33
+ "key": "{controlStack.small.gap.auto}",
31
34
  "filePath": "src/tokens/functional/size/size-coarse.json5",
32
35
  "isSource": true,
33
36
  "original": {
34
37
  "$value": "{base.size.16}",
35
- "$type": "dimension"
38
+ "$type": "dimension",
39
+ "key": "{controlStack.small.gap.auto}"
36
40
  },
37
41
  "name": "controlStack-small-gap-auto",
38
42
  "attributes": {},
39
43
  "path": ["controlStack", "small", "gap", "auto"],
40
- "key": "{controlStack.small.gap.auto}",
41
44
  "value": "1rem",
42
45
  "type": "dimension"
43
46
  }
@@ -1,43 +1,46 @@
1
1
  {
2
2
  "control-minTarget-auto": {
3
+ "key": "{control.minTarget.auto}",
3
4
  "filePath": "src/tokens/functional/size/size-fine.json5",
4
5
  "isSource": true,
5
6
  "original": {
6
7
  "$value": "{base.size.16}",
7
- "$type": "dimension"
8
+ "$type": "dimension",
9
+ "key": "{control.minTarget.auto}"
8
10
  },
9
11
  "name": "control-minTarget-auto",
10
12
  "attributes": {},
11
13
  "path": ["control", "minTarget", "auto"],
12
- "key": "{control.minTarget.auto}",
13
14
  "value": "1rem",
14
15
  "type": "dimension"
15
16
  },
16
17
  "controlStack-medium-gap-auto": {
18
+ "key": "{controlStack.medium.gap.auto}",
17
19
  "filePath": "src/tokens/functional/size/size-fine.json5",
18
20
  "isSource": true,
19
21
  "original": {
20
22
  "$value": "{base.size.8}",
21
- "$type": "dimension"
23
+ "$type": "dimension",
24
+ "key": "{controlStack.medium.gap.auto}"
22
25
  },
23
26
  "name": "controlStack-medium-gap-auto",
24
27
  "attributes": {},
25
28
  "path": ["controlStack", "medium", "gap", "auto"],
26
- "key": "{controlStack.medium.gap.auto}",
27
29
  "value": "0.5rem",
28
30
  "type": "dimension"
29
31
  },
30
32
  "controlStack-small-gap-auto": {
33
+ "key": "{controlStack.small.gap.auto}",
31
34
  "filePath": "src/tokens/functional/size/size-fine.json5",
32
35
  "isSource": true,
33
36
  "original": {
34
37
  "$value": "{base.size.8}",
35
- "$type": "dimension"
38
+ "$type": "dimension",
39
+ "key": "{controlStack.small.gap.auto}"
36
40
  },
37
41
  "name": "controlStack-small-gap-auto",
38
42
  "attributes": {},
39
43
  "path": ["controlStack", "small", "gap", "auto"],
40
- "key": "{controlStack.small.gap.auto}",
41
44
  "value": "0.5rem",
42
45
  "type": "dimension"
43
46
  }