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