@primer/primitives 10.0.0-rc.eb6fe33a → 10.0.0-rc.f7aad39e

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 (46) hide show
  1. package/dist/build/PrimerStyleDictionary.js +26 -26
  2. package/dist/build/formats/typescriptExportDefinition.js +2 -2
  3. package/dist/build/parsers/w3cJsonParser.js +2 -2
  4. package/dist/build/schemas/designToken.js +0 -1
  5. package/dist/build/transformers/durationToCss.js +2 -2
  6. package/dist/css/base/motion/motion.css +17 -0
  7. package/dist/css/functional/motion/motion.css +4 -3
  8. package/dist/css/functional/typography/typography.css +43 -43
  9. package/dist/css/primitives.css +64 -46
  10. package/dist/docs/base/motion/motion.json +205 -0
  11. package/dist/docs/functional/motion/motion.json +18 -3
  12. package/dist/fallbacks/base/motion/motion.json +17 -0
  13. package/dist/fallbacks/functional/motion/motion.json +1 -0
  14. package/dist/figma/dimension/dimension.json +518 -518
  15. package/dist/figma/figma.json +26 -26
  16. package/dist/figma/scales/dark-dimmed.json +1787 -1787
  17. package/dist/figma/scales/dark-high-constrast.json +1787 -1787
  18. package/dist/figma/scales/dark.json +1460 -1460
  19. package/dist/figma/scales/light-high-constrast.json +1775 -1775
  20. package/dist/figma/scales/light.json +1447 -1447
  21. package/dist/figma/shadows/dark-colorblind.json +285 -285
  22. package/dist/figma/shadows/dark-dimmed.json +285 -285
  23. package/dist/figma/shadows/dark-high-contrast.json +285 -285
  24. package/dist/figma/shadows/dark-tritanopia.json +285 -285
  25. package/dist/figma/shadows/dark.json +285 -285
  26. package/dist/figma/shadows/light-colorblind.json +254 -254
  27. package/dist/figma/shadows/light-high-contrast.json +254 -254
  28. package/dist/figma/shadows/light-tritanopia.json +254 -254
  29. package/dist/figma/shadows/light.json +254 -254
  30. package/dist/figma/themes/dark-colorblind.json +5161 -5161
  31. package/dist/figma/themes/dark-dimmed.json +5551 -5551
  32. package/dist/figma/themes/dark-high-contrast.json +4324 -4324
  33. package/dist/figma/themes/dark-tritanopia.json +5264 -5264
  34. package/dist/figma/themes/dark.json +5679 -5679
  35. package/dist/figma/themes/light-colorblind.json +5094 -5094
  36. package/dist/figma/themes/light-high-contrast.json +4418 -4418
  37. package/dist/figma/themes/light-tritanopia.json +5151 -5151
  38. package/dist/figma/themes/light.json +5547 -5547
  39. package/dist/figma/typography/typography.json +162 -162
  40. package/dist/styleLint/base/motion/motion.json +205 -0
  41. package/dist/styleLint/functional/motion/motion.json +18 -3
  42. package/package.json +18 -21
  43. package/src/tokens/base/motion/easing.json5 +26 -0
  44. package/src/tokens/base/motion/timing.json5 +50 -0
  45. package/src/tokens/functional/motion/loading.json5 +1 -1
  46. package/src/tokens/functional/motion/patterns.json5 +9 -2
package/dist/figma/dimension/dimension.json CHANGED
@@ -1,447 +1,401 @@
1
1
  [
2
2
  {
3
- "name": "borderRadius/default",
4
- "value": 6,
3
+ "name": "base/size/2",
4
+ "value": 2,
5
5
  "type": "FLOAT",
6
- "refId": "functional/size/borderRadius/default",
7
- "reference": "functional/size/borderRadius/medium",
8
- "collection": "functional/size",
6
+ "refId": "base/size/base/size/2",
7
+ "collection": "base/size",
9
8
  "mode": "default",
10
- "group": "functional/size",
11
- "scopes": ["CORNER_RADIUS"],
12
- "codeSyntax": {
13
- "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
14
- }
9
+ "group": "base/size",
10
+ "scopes": ["WIDTH_HEIGHT"]
15
11
  },
16
12
  {
17
- "name": "borderRadius/full",
18
- "value": 9999,
13
+ "name": "base/size/4",
14
+ "value": 4,
19
15
  "type": "FLOAT",
20
- "description": "Use this border radius for pill shaped elements",
21
- "refId": "functional/size/borderRadius/full",
22
- "collection": "functional/size",
16
+ "refId": "base/size/base/size/4",
17
+ "collection": "base/size",
23
18
  "mode": "default",
24
- "group": "functional/size",
25
- "scopes": ["CORNER_RADIUS"],
26
- "codeSyntax": {
27
- "web": "var(--borderRadius-full) /* utility class: .circle */"
28
- }
19
+ "group": "base/size",
20
+ "scopes": ["WIDTH_HEIGHT"]
29
21
  },
30
22
  {
31
- "name": "borderRadius/large",
32
- "value": 12,
23
+ "name": "base/size/6",
24
+ "value": 6,
33
25
  "type": "FLOAT",
34
- "refId": "functional/size/borderRadius/large",
35
- "collection": "functional/size",
26
+ "refId": "base/size/base/size/6",
27
+ "collection": "base/size",
36
28
  "mode": "default",
37
- "group": "functional/size",
38
- "scopes": ["CORNER_RADIUS"],
39
- "codeSyntax": {
40
- "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
41
- }
29
+ "group": "base/size",
30
+ "scopes": ["WIDTH_HEIGHT"]
42
31
  },
43
32
  {
44
- "name": "borderRadius/medium",
45
- "value": 6,
33
+ "name": "base/size/8",
34
+ "value": 8,
46
35
  "type": "FLOAT",
47
- "refId": "functional/size/borderRadius/medium",
48
- "collection": "functional/size",
36
+ "refId": "base/size/base/size/8",
37
+ "collection": "base/size",
49
38
  "mode": "default",
50
- "group": "functional/size",
51
- "scopes": ["CORNER_RADIUS"],
52
- "codeSyntax": {
53
- "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
54
- }
39
+ "group": "base/size",
40
+ "scopes": ["WIDTH_HEIGHT"]
55
41
  },
56
42
  {
57
- "name": "borderRadius/small",
58
- "value": 3,
43
+ "name": "base/size/12",
44
+ "value": 12,
59
45
  "type": "FLOAT",
60
- "refId": "functional/size/borderRadius/small",
61
- "collection": "functional/size",
46
+ "refId": "base/size/base/size/12",
47
+ "collection": "base/size",
62
48
  "mode": "default",
63
- "group": "functional/size",
64
- "scopes": ["CORNER_RADIUS"],
65
- "codeSyntax": {
66
- "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
67
- }
49
+ "group": "base/size",
50
+ "scopes": ["WIDTH_HEIGHT"]
68
51
  },
69
52
  {
70
- "name": "overlay/offset",
71
- "value": 4,
53
+ "name": "base/size/16",
54
+ "value": 16,
72
55
  "type": "FLOAT",
73
- "refId": "pattern/size/overlay/offset",
74
- "collection": "pattern/size",
56
+ "refId": "base/size/base/size/16",
57
+ "collection": "base/size",
75
58
  "mode": "default",
76
- "group": "pattern/size",
59
+ "group": "base/size",
77
60
  "scopes": ["WIDTH_HEIGHT"]
78
61
  },
79
62
  {
80
- "name": "overlay/borderRadius",
81
- "value": 6,
63
+ "name": "base/size/20",
64
+ "value": 20,
82
65
  "type": "FLOAT",
83
- "refId": "pattern/size/overlay/borderRadius",
84
- "reference": "functional/size/borderRadius/medium",
85
- "collection": "pattern/size",
66
+ "refId": "base/size/base/size/20",
67
+ "collection": "base/size",
86
68
  "mode": "default",
87
- "group": "pattern/size",
88
- "scopes": ["CORNER_RADIUS"]
69
+ "group": "base/size",
70
+ "scopes": ["WIDTH_HEIGHT"]
89
71
  },
90
72
  {
91
- "name": "overlay/paddingBlock/normal",
92
- "value": 12,
73
+ "name": "base/size/24",
74
+ "value": 24,
93
75
  "type": "FLOAT",
94
- "refId": "pattern/size/overlay/paddingBlock/normal",
95
- "reference": "base/size/base/size/12",
96
- "collection": "pattern/size",
76
+ "refId": "base/size/base/size/24",
77
+ "collection": "base/size",
97
78
  "mode": "default",
98
- "group": "pattern/size",
99
- "scopes": ["GAP"]
79
+ "group": "base/size",
80
+ "scopes": ["WIDTH_HEIGHT"]
100
81
  },
101
82
  {
102
- "name": "overlay/paddingBlock/condensed",
103
- "value": 4,
83
+ "name": "base/size/28",
84
+ "value": 28,
104
85
  "type": "FLOAT",
105
- "refId": "pattern/size/overlay/paddingBlock/condensed",
106
- "reference": "base/size/base/size/4",
107
- "collection": "pattern/size",
86
+ "refId": "base/size/base/size/28",
87
+ "collection": "base/size",
108
88
  "mode": "default",
109
- "group": "pattern/size",
110
- "scopes": ["GAP"]
89
+ "group": "base/size",
90
+ "scopes": ["WIDTH_HEIGHT"]
111
91
  },
112
92
  {
113
- "name": "overlay/padding/condensed",
114
- "value": 8,
93
+ "name": "base/size/32",
94
+ "value": 32,
115
95
  "type": "FLOAT",
116
- "refId": "pattern/size/overlay/padding/condensed",
117
- "reference": "base/size/base/size/8",
118
- "collection": "pattern/size",
96
+ "refId": "base/size/base/size/32",
97
+ "collection": "base/size",
119
98
  "mode": "default",
120
- "group": "pattern/size",
121
- "scopes": ["GAP"]
99
+ "group": "base/size",
100
+ "scopes": ["WIDTH_HEIGHT"]
122
101
  },
123
102
  {
124
- "name": "overlay/padding/normal",
125
- "value": 16,
103
+ "name": "base/size/36",
104
+ "value": 36,
126
105
  "type": "FLOAT",
127
- "refId": "pattern/size/overlay/padding/normal",
128
- "reference": "base/size/base/size/16",
129
- "collection": "pattern/size",
106
+ "refId": "base/size/base/size/36",
107
+ "collection": "base/size",
130
108
  "mode": "default",
131
- "group": "pattern/size",
132
- "scopes": ["GAP"]
109
+ "group": "base/size",
110
+ "scopes": ["WIDTH_HEIGHT"]
133
111
  },
134
112
  {
135
- "name": "overlay/height/xlarge",
136
- "value": 600,
113
+ "name": "base/size/40",
114
+ "value": 40,
137
115
  "type": "FLOAT",
138
- "refId": "pattern/size/overlay/height/xlarge",
139
- "collection": "pattern/size",
116
+ "refId": "base/size/base/size/40",
117
+ "collection": "base/size",
140
118
  "mode": "default",
141
- "group": "pattern/size",
119
+ "group": "base/size",
142
120
  "scopes": ["WIDTH_HEIGHT"]
143
121
  },
144
122
  {
145
- "name": "overlay/height/large",
146
- "value": 432,
123
+ "name": "base/size/44",
124
+ "value": 44,
147
125
  "type": "FLOAT",
148
- "refId": "pattern/size/overlay/height/large",
149
- "collection": "pattern/size",
126
+ "refId": "base/size/base/size/44",
127
+ "collection": "base/size",
150
128
  "mode": "default",
151
- "group": "pattern/size",
129
+ "group": "base/size",
152
130
  "scopes": ["WIDTH_HEIGHT"]
153
131
  },
154
132
  {
155
- "name": "overlay/height/medium",
156
- "value": 320,
133
+ "name": "base/size/48",
134
+ "value": 48,
157
135
  "type": "FLOAT",
158
- "refId": "pattern/size/overlay/height/medium",
159
- "collection": "pattern/size",
136
+ "refId": "base/size/base/size/48",
137
+ "collection": "base/size",
160
138
  "mode": "default",
161
- "group": "pattern/size",
139
+ "group": "base/size",
162
140
  "scopes": ["WIDTH_HEIGHT"]
163
141
  },
164
142
  {
165
- "name": "overlay/height/small",
166
- "value": 256,
143
+ "name": "base/size/64",
144
+ "value": 64,
167
145
  "type": "FLOAT",
168
- "refId": "pattern/size/overlay/height/small",
169
- "collection": "pattern/size",
146
+ "refId": "base/size/base/size/64",
147
+ "collection": "base/size",
170
148
  "mode": "default",
171
- "group": "pattern/size",
149
+ "group": "base/size",
172
150
  "scopes": ["WIDTH_HEIGHT"]
173
151
  },
174
152
  {
175
- "name": "overlay/width/xlarge",
176
- "value": 960,
153
+ "name": "base/size/80",
154
+ "value": 80,
177
155
  "type": "FLOAT",
178
- "refId": "pattern/size/overlay/width/xlarge",
179
- "collection": "pattern/size",
156
+ "refId": "base/size/base/size/80",
157
+ "collection": "base/size",
180
158
  "mode": "default",
181
- "group": "pattern/size",
159
+ "group": "base/size",
182
160
  "scopes": ["WIDTH_HEIGHT"]
183
161
  },
184
162
  {
185
- "name": "overlay/width/large",
186
- "value": 640,
163
+ "name": "base/size/96",
164
+ "value": 96,
187
165
  "type": "FLOAT",
188
- "refId": "pattern/size/overlay/width/large",
189
- "collection": "pattern/size",
166
+ "refId": "base/size/base/size/96",
167
+ "collection": "base/size",
190
168
  "mode": "default",
191
- "group": "pattern/size",
169
+ "group": "base/size",
192
170
  "scopes": ["WIDTH_HEIGHT"]
193
171
  },
194
172
  {
195
- "name": "overlay/width/medium",
196
- "value": 480,
173
+ "name": "base/size/112",
174
+ "value": 112,
197
175
  "type": "FLOAT",
198
- "refId": "pattern/size/overlay/width/medium",
199
- "collection": "pattern/size",
176
+ "refId": "base/size/base/size/112",
177
+ "collection": "base/size",
200
178
  "mode": "default",
201
- "group": "pattern/size",
179
+ "group": "base/size",
202
180
  "scopes": ["WIDTH_HEIGHT"]
203
181
  },
204
182
  {
205
- "name": "overlay/width/small",
206
- "value": 320,
183
+ "name": "base/size/128",
184
+ "value": 128,
207
185
  "type": "FLOAT",
208
- "refId": "pattern/size/overlay/width/small",
209
- "collection": "pattern/size",
186
+ "refId": "base/size/base/size/128",
187
+ "collection": "base/size",
210
188
  "mode": "default",
211
- "group": "pattern/size",
189
+ "group": "base/size",
212
190
  "scopes": ["WIDTH_HEIGHT"]
213
191
  },
214
192
  {
215
- "name": "overlay/width/xsmall",
216
- "value": 192,
193
+ "name": "breakpoint/xsmall",
194
+ "value": 320,
217
195
  "type": "FLOAT",
218
- "refId": "pattern/size/overlay/width/xsmall",
219
- "collection": "pattern/size",
196
+ "refId": "functional/size/breakpoint/xsmall",
197
+ "collection": "functional/size",
220
198
  "mode": "default",
221
- "group": "pattern/size",
199
+ "group": "functional/size",
222
200
  "scopes": ["WIDTH_HEIGHT"]
223
201
  },
224
202
  {
225
- "name": "controlStack/large/gap/spacious",
226
- "value": 12,
203
+ "name": "breakpoint/small",
204
+ "value": 544,
227
205
  "type": "FLOAT",
228
- "refId": "pattern/size/controlStack/large/gap/spacious",
229
- "reference": "base/size/base/size/12",
230
- "collection": "pattern/size",
206
+ "refId": "functional/size/breakpoint/small",
207
+ "collection": "functional/size",
231
208
  "mode": "default",
232
- "group": "pattern/size",
233
- "scopes": ["GAP"]
209
+ "group": "functional/size",
210
+ "scopes": ["WIDTH_HEIGHT"]
234
211
  },
235
212
  {
236
- "name": "controlStack/large/gap/condensed",
237
- "value": 8,
213
+ "name": "breakpoint/medium",
214
+ "value": 768,
238
215
  "type": "FLOAT",
239
- "refId": "pattern/size/controlStack/large/gap/condensed",
240
- "reference": "base/size/base/size/8",
241
- "collection": "pattern/size",
216
+ "refId": "functional/size/breakpoint/medium",
217
+ "collection": "functional/size",
242
218
  "mode": "default",
243
- "group": "pattern/size",
244
- "scopes": ["GAP"]
219
+ "group": "functional/size",
220
+ "scopes": ["WIDTH_HEIGHT"]
245
221
  },
246
222
  {
247
- "name": "controlStack/large/gap/auto",
248
- "value": 8,
223
+ "name": "breakpoint/large",
224
+ "value": 1012,
249
225
  "type": "FLOAT",
250
- "refId": "pattern/size/controlStack/large/gap/auto",
251
- "reference": "base/size/base/size/8",
252
- "collection": "pattern/size",
226
+ "refId": "functional/size/breakpoint/large",
227
+ "collection": "functional/size",
253
228
  "mode": "default",
254
- "group": "pattern/size",
255
- "scopes": ["GAP"]
229
+ "group": "functional/size",
230
+ "scopes": ["WIDTH_HEIGHT"]
256
231
  },
257
232
  {
258
- "name": "controlStack/medium/gap/spacious",
259
- "value": 12,
233
+ "name": "breakpoint/xlarge",
234
+ "value": 1280,
260
235
  "type": "FLOAT",
261
- "refId": "pattern/size/controlStack/medium/gap/spacious",
262
- "reference": "base/size/base/size/12",
263
- "collection": "pattern/size",
236
+ "refId": "functional/size/breakpoint/xlarge",
237
+ "collection": "functional/size",
264
238
  "mode": "default",
265
- "group": "pattern/size",
266
- "scopes": ["GAP"]
239
+ "group": "functional/size",
240
+ "scopes": ["WIDTH_HEIGHT"]
267
241
  },
268
242
  {
269
- "name": "controlStack/medium/gap/condensed",
270
- "value": 8,
243
+ "name": "breakpoint/xxlarge",
244
+ "value": 1400,
271
245
  "type": "FLOAT",
272
- "refId": "pattern/size/controlStack/medium/gap/condensed",
273
- "reference": "base/size/base/size/8",
274
- "collection": "pattern/size",
246
+ "refId": "functional/size/breakpoint/xxlarge",
247
+ "collection": "functional/size",
275
248
  "mode": "default",
276
- "group": "pattern/size",
277
- "scopes": ["GAP"]
249
+ "group": "functional/size",
250
+ "scopes": ["WIDTH_HEIGHT"]
278
251
  },
279
252
  {
280
- "name": "controlStack/small/gap/spacious",
253
+ "name": "control/minTarget/fine",
281
254
  "value": 16,
282
255
  "type": "FLOAT",
283
- "refId": "pattern/size/controlStack/small/gap/spacious",
256
+ "refId": "pattern/size/control/minTarget/fine",
284
257
  "reference": "base/size/base/size/16",
285
258
  "collection": "pattern/size",
286
259
  "mode": "default",
287
260
  "group": "pattern/size",
288
- "scopes": ["GAP"]
261
+ "scopes": ["WIDTH_HEIGHT"]
289
262
  },
290
263
  {
291
- "name": "controlStack/small/gap/condensed",
292
- "value": 8,
264
+ "name": "control/minTarget/coarse",
265
+ "value": 44,
293
266
  "type": "FLOAT",
294
- "refId": "pattern/size/controlStack/small/gap/condensed",
295
- "reference": "base/size/base/size/8",
267
+ "refId": "pattern/size/control/minTarget/coarse",
268
+ "reference": "base/size/base/size/44",
296
269
  "collection": "pattern/size",
297
270
  "mode": "default",
298
271
  "group": "pattern/size",
299
- "scopes": ["GAP"]
272
+ "scopes": ["WIDTH_HEIGHT"]
300
273
  },
301
274
  {
302
- "name": "stack/gap/spacious",
275
+ "name": "control/xsmall/size",
303
276
  "value": 24,
304
277
  "type": "FLOAT",
305
- "refId": "pattern/size/stack/gap/spacious",
278
+ "refId": "pattern/size/control/xsmall/size",
306
279
  "reference": "base/size/base/size/24",
307
280
  "collection": "pattern/size",
308
281
  "mode": "default",
309
- "group": "component",
310
- "scopes": ["GAP"],
311
- "codeSyntax": {
312
- "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
313
- }
282
+ "group": "pattern/size",
283
+ "scopes": ["WIDTH_HEIGHT"]
314
284
  },
315
285
  {
316
- "name": "stack/gap/normal",
317
- "value": 16,
286
+ "name": "control/xsmall/lineBoxHeight",
287
+ "value": 20,
318
288
  "type": "FLOAT",
319
- "refId": "pattern/size/stack/gap/normal",
320
- "reference": "base/size/base/size/16",
289
+ "refId": "pattern/size/control/xsmall/lineBoxHeight",
290
+ "reference": "base/size/base/size/20",
321
291
  "collection": "pattern/size",
322
292
  "mode": "default",
323
- "group": "component",
324
- "scopes": ["GAP"],
325
- "codeSyntax": {
326
- "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
327
- }
293
+ "group": "pattern/size",
294
+ "scopes": ["WIDTH_HEIGHT"]
328
295
  },
329
296
  {
330
- "name": "stack/gap/condensed",
331
- "value": 8,
297
+ "name": "control/xsmall/paddingBlock",
298
+ "value": 2,
332
299
  "type": "FLOAT",
333
- "refId": "pattern/size/stack/gap/condensed",
334
- "reference": "base/size/base/size/8",
300
+ "refId": "pattern/size/control/xsmall/paddingBlock",
335
301
  "collection": "pattern/size",
336
302
  "mode": "default",
337
- "group": "component",
338
- "scopes": ["GAP"],
339
- "codeSyntax": {
340
- "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
341
- }
303
+ "group": "pattern/size",
304
+ "scopes": ["GAP"]
342
305
  },
343
306
  {
344
- "name": "stack/padding/spacious",
345
- "value": 24,
307
+ "name": "control/xsmall/paddingInline/condensed",
308
+ "value": 4,
346
309
  "type": "FLOAT",
347
- "refId": "pattern/size/stack/padding/spacious",
348
- "reference": "base/size/base/size/24",
310
+ "refId": "pattern/size/control/xsmall/paddingInline/condensed",
311
+ "reference": "base/size/base/size/4",
349
312
  "collection": "pattern/size",
350
313
  "mode": "default",
351
- "group": "component",
352
- "scopes": ["GAP"],
353
- "codeSyntax": {
354
- "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
355
- }
314
+ "group": "pattern/size",
315
+ "scopes": ["GAP"]
356
316
  },
357
317
  {
358
- "name": "stack/padding/normal",
359
- "value": 16,
318
+ "name": "control/xsmall/paddingInline/normal",
319
+ "value": 8,
360
320
  "type": "FLOAT",
361
- "refId": "pattern/size/stack/padding/normal",
362
- "reference": "base/size/base/size/16",
321
+ "refId": "pattern/size/control/xsmall/paddingInline/normal",
322
+ "reference": "base/size/base/size/8",
363
323
  "collection": "pattern/size",
364
324
  "mode": "default",
365
- "group": "component",
366
- "scopes": ["GAP"],
367
- "codeSyntax": {
368
- "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
369
- }
325
+ "group": "pattern/size",
326
+ "scopes": ["GAP"]
370
327
  },
371
328
  {
372
- "name": "stack/padding/condensed",
373
- "value": 8,
329
+ "name": "control/xsmall/paddingInline/spacious",
330
+ "value": 12,
374
331
  "type": "FLOAT",
375
- "refId": "pattern/size/stack/padding/condensed",
376
- "reference": "base/size/base/size/8",
332
+ "refId": "pattern/size/control/xsmall/paddingInline/spacious",
333
+ "reference": "base/size/base/size/12",
377
334
  "collection": "pattern/size",
378
335
  "mode": "default",
379
- "group": "component",
380
- "scopes": ["GAP"],
381
- "codeSyntax": {
382
- "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
383
- }
336
+ "group": "pattern/size",
337
+ "scopes": ["GAP"]
384
338
  },
385
339
  {
386
- "name": "spinner/size/large",
387
- "value": 64,
340
+ "name": "control/xsmall/gap",
341
+ "value": 4,
388
342
  "type": "FLOAT",
389
- "refId": "pattern/size/spinner/size/large",
390
- "reference": "base/size/base/size/64",
343
+ "refId": "pattern/size/control/xsmall/gap",
344
+ "reference": "base/size/base/size/4",
391
345
  "collection": "pattern/size",
392
346
  "mode": "default",
393
347
  "group": "pattern/size",
394
- "scopes": ["WIDTH_HEIGHT"]
348
+ "scopes": ["GAP"]
395
349
  },
396
350
  {
397
- "name": "spinner/size/medium",
398
- "value": 32,
351
+ "name": "control/small/size",
352
+ "value": 28,
399
353
  "type": "FLOAT",
400
- "refId": "pattern/size/spinner/size/medium",
401
- "reference": "base/size/base/size/32",
354
+ "refId": "pattern/size/control/small/size",
355
+ "reference": "base/size/base/size/28",
402
356
  "collection": "pattern/size",
403
357
  "mode": "default",
404
358
  "group": "pattern/size",
405
359
  "scopes": ["WIDTH_HEIGHT"]
406
360
  },
407
361
  {
408
- "name": "spinner/size/small",
409
- "value": 16,
362
+ "name": "control/small/lineBoxHeight",
363
+ "value": 20,
410
364
  "type": "FLOAT",
411
- "refId": "pattern/size/spinner/size/small",
412
- "reference": "base/size/base/size/16",
365
+ "refId": "pattern/size/control/small/lineBoxHeight",
366
+ "reference": "base/size/base/size/20",
413
367
  "collection": "pattern/size",
414
368
  "mode": "default",
415
369
  "group": "pattern/size",
416
370
  "scopes": ["WIDTH_HEIGHT"]
417
371
  },
418
372
  {
419
- "name": "control/xlarge/gap",
420
- "value": 8,
373
+ "name": "control/small/paddingBlock",
374
+ "value": 4,
421
375
  "type": "FLOAT",
422
- "refId": "pattern/size/control/xlarge/gap",
423
- "reference": "base/size/base/size/8",
376
+ "refId": "pattern/size/control/small/paddingBlock",
377
+ "reference": "base/size/base/size/4",
424
378
  "collection": "pattern/size",
425
379
  "mode": "default",
426
380
  "group": "pattern/size",
427
381
  "scopes": ["GAP"]
428
382
  },
429
383
  {
430
- "name": "control/xlarge/paddingInline/spacious",
431
- "value": 16,
384
+ "name": "control/small/paddingInline/condensed",
385
+ "value": 8,
432
386
  "type": "FLOAT",
433
- "refId": "pattern/size/control/xlarge/paddingInline/spacious",
434
- "reference": "base/size/base/size/16",
387
+ "refId": "pattern/size/control/small/paddingInline/condensed",
388
+ "reference": "base/size/base/size/8",
435
389
  "collection": "pattern/size",
436
390
  "mode": "default",
437
391
  "group": "pattern/size",
438
392
  "scopes": ["GAP"]
439
393
  },
440
394
  {
441
- "name": "control/xlarge/paddingInline/normal",
395
+ "name": "control/small/paddingInline/normal",
442
396
  "value": 12,
443
397
  "type": "FLOAT",
444
- "refId": "pattern/size/control/xlarge/paddingInline/normal",
398
+ "refId": "pattern/size/control/small/paddingInline/normal",
445
399
  "reference": "base/size/base/size/12",
446
400
  "collection": "pattern/size",
447
401
  "mode": "default",
@@ -449,64 +403,64 @@
449
403
  "scopes": ["GAP"]
450
404
  },
451
405
  {
452
- "name": "control/xlarge/paddingBlock",
453
- "value": 14,
406
+ "name": "control/small/gap",
407
+ "value": 4,
454
408
  "type": "FLOAT",
455
- "refId": "pattern/size/control/xlarge/paddingBlock",
409
+ "refId": "pattern/size/control/small/gap",
410
+ "reference": "base/size/base/size/4",
456
411
  "collection": "pattern/size",
457
412
  "mode": "default",
458
413
  "group": "pattern/size",
459
414
  "scopes": ["GAP"]
460
415
  },
461
416
  {
462
- "name": "control/xlarge/lineBoxHeight",
463
- "value": 20,
417
+ "name": "control/medium/size",
418
+ "value": 32,
464
419
  "type": "FLOAT",
465
- "refId": "pattern/size/control/xlarge/lineBoxHeight",
466
- "reference": "base/size/base/size/20",
420
+ "refId": "pattern/size/control/medium/size",
421
+ "reference": "base/size/base/size/32",
467
422
  "collection": "pattern/size",
468
423
  "mode": "default",
469
424
  "group": "pattern/size",
470
425
  "scopes": ["WIDTH_HEIGHT"]
471
426
  },
472
427
  {
473
- "name": "control/xlarge/size",
474
- "value": 48,
428
+ "name": "control/medium/lineBoxHeight",
429
+ "value": 20,
475
430
  "type": "FLOAT",
476
- "refId": "pattern/size/control/xlarge/size",
477
- "reference": "base/size/base/size/48",
431
+ "refId": "pattern/size/control/medium/lineBoxHeight",
432
+ "reference": "base/size/base/size/20",
478
433
  "collection": "pattern/size",
479
434
  "mode": "default",
480
435
  "group": "pattern/size",
481
436
  "scopes": ["WIDTH_HEIGHT"]
482
437
  },
483
438
  {
484
- "name": "control/large/gap",
485
- "value": 8,
439
+ "name": "control/medium/paddingBlock",
440
+ "value": 6,
486
441
  "type": "FLOAT",
487
- "refId": "pattern/size/control/large/gap",
488
- "reference": "base/size/base/size/8",
442
+ "refId": "pattern/size/control/medium/paddingBlock",
489
443
  "collection": "pattern/size",
490
444
  "mode": "default",
491
445
  "group": "pattern/size",
492
446
  "scopes": ["GAP"]
493
447
  },
494
448
  {
495
- "name": "control/large/paddingInline/spacious",
496
- "value": 16,
449
+ "name": "control/medium/paddingInline/condensed",
450
+ "value": 8,
497
451
  "type": "FLOAT",
498
- "refId": "pattern/size/control/large/paddingInline/spacious",
499
- "reference": "base/size/base/size/16",
452
+ "refId": "pattern/size/control/medium/paddingInline/condensed",
453
+ "reference": "base/size/base/size/8",
500
454
  "collection": "pattern/size",
501
455
  "mode": "default",
502
456
  "group": "pattern/size",
503
457
  "scopes": ["GAP"]
504
458
  },
505
459
  {
506
- "name": "control/large/paddingInline/normal",
460
+ "name": "control/medium/paddingInline/normal",
507
461
  "value": 12,
508
462
  "type": "FLOAT",
509
- "refId": "pattern/size/control/large/paddingInline/normal",
463
+ "refId": "pattern/size/control/medium/paddingInline/normal",
510
464
  "reference": "base/size/base/size/12",
511
465
  "collection": "pattern/size",
512
466
  "mode": "default",
@@ -514,25 +468,26 @@
514
468
  "scopes": ["GAP"]
515
469
  },
516
470
  {
517
- "name": "control/large/paddingBlock",
518
- "value": 10,
471
+ "name": "control/medium/paddingInline/spacious",
472
+ "value": 16,
519
473
  "type": "FLOAT",
520
- "refId": "pattern/size/control/large/paddingBlock",
474
+ "refId": "pattern/size/control/medium/paddingInline/spacious",
475
+ "reference": "base/size/base/size/16",
521
476
  "collection": "pattern/size",
522
477
  "mode": "default",
523
478
  "group": "pattern/size",
524
479
  "scopes": ["GAP"]
525
480
  },
526
481
  {
527
- "name": "control/large/lineBoxHeight",
528
- "value": 20,
482
+ "name": "control/medium/gap",
483
+ "value": 8,
529
484
  "type": "FLOAT",
530
- "refId": "pattern/size/control/large/lineBoxHeight",
531
- "reference": "base/size/base/size/20",
485
+ "refId": "pattern/size/control/medium/gap",
486
+ "reference": "base/size/base/size/8",
532
487
  "collection": "pattern/size",
533
488
  "mode": "default",
534
489
  "group": "pattern/size",
535
- "scopes": ["WIDTH_HEIGHT"]
490
+ "scopes": ["GAP"]
536
491
  },
537
492
  {
538
493
  "name": "control/large/size",
@@ -546,43 +501,53 @@
546
501
  "scopes": ["WIDTH_HEIGHT"]
547
502
  },
548
503
  {
549
- "name": "control/medium/gap",
550
- "value": 8,
504
+ "name": "control/large/lineBoxHeight",
505
+ "value": 20,
506
+ "type": "FLOAT",
507
+ "refId": "pattern/size/control/large/lineBoxHeight",
508
+ "reference": "base/size/base/size/20",
509
+ "collection": "pattern/size",
510
+ "mode": "default",
511
+ "group": "pattern/size",
512
+ "scopes": ["WIDTH_HEIGHT"]
513
+ },
514
+ {
515
+ "name": "control/large/paddingBlock",
516
+ "value": 10,
551
517
  "type": "FLOAT",
552
- "refId": "pattern/size/control/medium/gap",
553
- "reference": "base/size/base/size/8",
518
+ "refId": "pattern/size/control/large/paddingBlock",
554
519
  "collection": "pattern/size",
555
520
  "mode": "default",
556
521
  "group": "pattern/size",
557
522
  "scopes": ["GAP"]
558
523
  },
559
524
  {
560
- "name": "control/medium/paddingInline/spacious",
561
- "value": 16,
525
+ "name": "control/large/paddingInline/normal",
526
+ "value": 12,
562
527
  "type": "FLOAT",
563
- "refId": "pattern/size/control/medium/paddingInline/spacious",
564
- "reference": "base/size/base/size/16",
528
+ "refId": "pattern/size/control/large/paddingInline/normal",
529
+ "reference": "base/size/base/size/12",
565
530
  "collection": "pattern/size",
566
531
  "mode": "default",
567
532
  "group": "pattern/size",
568
533
  "scopes": ["GAP"]
569
534
  },
570
535
  {
571
- "name": "control/medium/paddingInline/normal",
572
- "value": 12,
536
+ "name": "control/large/paddingInline/spacious",
537
+ "value": 16,
573
538
  "type": "FLOAT",
574
- "refId": "pattern/size/control/medium/paddingInline/normal",
575
- "reference": "base/size/base/size/12",
539
+ "refId": "pattern/size/control/large/paddingInline/spacious",
540
+ "reference": "base/size/base/size/16",
576
541
  "collection": "pattern/size",
577
542
  "mode": "default",
578
543
  "group": "pattern/size",
579
544
  "scopes": ["GAP"]
580
545
  },
581
546
  {
582
- "name": "control/medium/paddingInline/condensed",
547
+ "name": "control/large/gap",
583
548
  "value": 8,
584
549
  "type": "FLOAT",
585
- "refId": "pattern/size/control/medium/paddingInline/condensed",
550
+ "refId": "pattern/size/control/large/gap",
586
551
  "reference": "base/size/base/size/8",
587
552
  "collection": "pattern/size",
588
553
  "mode": "default",
@@ -590,20 +555,21 @@
590
555
  "scopes": ["GAP"]
591
556
  },
592
557
  {
593
- "name": "control/medium/paddingBlock",
594
- "value": 6,
558
+ "name": "control/xlarge/size",
559
+ "value": 48,
595
560
  "type": "FLOAT",
596
- "refId": "pattern/size/control/medium/paddingBlock",
561
+ "refId": "pattern/size/control/xlarge/size",
562
+ "reference": "base/size/base/size/48",
597
563
  "collection": "pattern/size",
598
564
  "mode": "default",
599
565
  "group": "pattern/size",
600
- "scopes": ["GAP"]
566
+ "scopes": ["WIDTH_HEIGHT"]
601
567
  },
602
568
  {
603
- "name": "control/medium/lineBoxHeight",
569
+ "name": "control/xlarge/lineBoxHeight",
604
570
  "value": 20,
605
571
  "type": "FLOAT",
606
- "refId": "pattern/size/control/medium/lineBoxHeight",
572
+ "refId": "pattern/size/control/xlarge/lineBoxHeight",
607
573
  "reference": "base/size/base/size/20",
608
574
  "collection": "pattern/size",
609
575
  "mode": "default",
@@ -611,32 +577,20 @@
611
577
  "scopes": ["WIDTH_HEIGHT"]
612
578
  },
613
579
  {
614
- "name": "control/medium/size",
615
- "value": 32,
616
- "type": "FLOAT",
617
- "refId": "pattern/size/control/medium/size",
618
- "reference": "base/size/base/size/32",
619
- "collection": "pattern/size",
620
- "mode": "default",
621
- "group": "pattern/size",
622
- "scopes": ["WIDTH_HEIGHT"]
623
- },
624
- {
625
- "name": "control/small/gap",
626
- "value": 4,
580
+ "name": "control/xlarge/paddingBlock",
581
+ "value": 14,
627
582
  "type": "FLOAT",
628
- "refId": "pattern/size/control/small/gap",
629
- "reference": "base/size/base/size/4",
583
+ "refId": "pattern/size/control/xlarge/paddingBlock",
630
584
  "collection": "pattern/size",
631
585
  "mode": "default",
632
586
  "group": "pattern/size",
633
587
  "scopes": ["GAP"]
634
588
  },
635
589
  {
636
- "name": "control/small/paddingInline/normal",
590
+ "name": "control/xlarge/paddingInline/normal",
637
591
  "value": 12,
638
592
  "type": "FLOAT",
639
- "refId": "pattern/size/control/small/paddingInline/normal",
593
+ "refId": "pattern/size/control/xlarge/paddingInline/normal",
640
594
  "reference": "base/size/base/size/12",
641
595
  "collection": "pattern/size",
642
596
  "mode": "default",
@@ -644,395 +598,441 @@
644
598
  "scopes": ["GAP"]
645
599
  },
646
600
  {
647
- "name": "control/small/paddingInline/condensed",
648
- "value": 8,
601
+ "name": "control/xlarge/paddingInline/spacious",
602
+ "value": 16,
649
603
  "type": "FLOAT",
650
- "refId": "pattern/size/control/small/paddingInline/condensed",
651
- "reference": "base/size/base/size/8",
604
+ "refId": "pattern/size/control/xlarge/paddingInline/spacious",
605
+ "reference": "base/size/base/size/16",
652
606
  "collection": "pattern/size",
653
607
  "mode": "default",
654
608
  "group": "pattern/size",
655
609
  "scopes": ["GAP"]
656
610
  },
657
611
  {
658
- "name": "control/small/paddingBlock",
659
- "value": 4,
612
+ "name": "control/xlarge/gap",
613
+ "value": 8,
660
614
  "type": "FLOAT",
661
- "refId": "pattern/size/control/small/paddingBlock",
662
- "reference": "base/size/base/size/4",
615
+ "refId": "pattern/size/control/xlarge/gap",
616
+ "reference": "base/size/base/size/8",
663
617
  "collection": "pattern/size",
664
618
  "mode": "default",
665
619
  "group": "pattern/size",
666
620
  "scopes": ["GAP"]
667
621
  },
668
622
  {
669
- "name": "control/small/lineBoxHeight",
670
- "value": 20,
623
+ "name": "spinner/size/small",
624
+ "value": 16,
671
625
  "type": "FLOAT",
672
- "refId": "pattern/size/control/small/lineBoxHeight",
673
- "reference": "base/size/base/size/20",
626
+ "refId": "pattern/size/spinner/size/small",
627
+ "reference": "base/size/base/size/16",
674
628
  "collection": "pattern/size",
675
629
  "mode": "default",
676
630
  "group": "pattern/size",
677
631
  "scopes": ["WIDTH_HEIGHT"]
678
632
  },
679
633
  {
680
- "name": "control/small/size",
681
- "value": 28,
634
+ "name": "spinner/size/medium",
635
+ "value": 32,
682
636
  "type": "FLOAT",
683
- "refId": "pattern/size/control/small/size",
684
- "reference": "base/size/base/size/28",
637
+ "refId": "pattern/size/spinner/size/medium",
638
+ "reference": "base/size/base/size/32",
685
639
  "collection": "pattern/size",
686
640
  "mode": "default",
687
641
  "group": "pattern/size",
688
642
  "scopes": ["WIDTH_HEIGHT"]
689
643
  },
690
644
  {
691
- "name": "control/xsmall/gap",
692
- "value": 4,
645
+ "name": "spinner/size/large",
646
+ "value": 64,
693
647
  "type": "FLOAT",
694
- "refId": "pattern/size/control/xsmall/gap",
695
- "reference": "base/size/base/size/4",
648
+ "refId": "pattern/size/spinner/size/large",
649
+ "reference": "base/size/base/size/64",
696
650
  "collection": "pattern/size",
697
651
  "mode": "default",
698
652
  "group": "pattern/size",
699
- "scopes": ["GAP"]
653
+ "scopes": ["WIDTH_HEIGHT"]
700
654
  },
701
655
  {
702
- "name": "control/xsmall/paddingInline/spacious",
703
- "value": 12,
656
+ "name": "stack/padding/condensed",
657
+ "value": 8,
704
658
  "type": "FLOAT",
705
- "refId": "pattern/size/control/xsmall/paddingInline/spacious",
706
- "reference": "base/size/base/size/12",
659
+ "refId": "pattern/size/stack/padding/condensed",
660
+ "reference": "base/size/base/size/8",
707
661
  "collection": "pattern/size",
708
662
  "mode": "default",
709
- "group": "pattern/size",
710
- "scopes": ["GAP"]
663
+ "group": "component",
664
+ "scopes": ["GAP"],
665
+ "codeSyntax": {
666
+ "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
667
+ }
711
668
  },
712
669
  {
713
- "name": "control/xsmall/paddingInline/normal",
714
- "value": 8,
670
+ "name": "stack/padding/normal",
671
+ "value": 16,
715
672
  "type": "FLOAT",
716
- "refId": "pattern/size/control/xsmall/paddingInline/normal",
717
- "reference": "base/size/base/size/8",
673
+ "refId": "pattern/size/stack/padding/normal",
674
+ "reference": "base/size/base/size/16",
718
675
  "collection": "pattern/size",
719
676
  "mode": "default",
720
- "group": "pattern/size",
721
- "scopes": ["GAP"]
677
+ "group": "component",
678
+ "scopes": ["GAP"],
679
+ "codeSyntax": {
680
+ "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
681
+ }
722
682
  },
723
683
  {
724
- "name": "control/xsmall/paddingInline/condensed",
725
- "value": 4,
684
+ "name": "stack/padding/spacious",
685
+ "value": 24,
726
686
  "type": "FLOAT",
727
- "refId": "pattern/size/control/xsmall/paddingInline/condensed",
728
- "reference": "base/size/base/size/4",
687
+ "refId": "pattern/size/stack/padding/spacious",
688
+ "reference": "base/size/base/size/24",
729
689
  "collection": "pattern/size",
730
690
  "mode": "default",
731
- "group": "pattern/size",
732
- "scopes": ["GAP"]
691
+ "group": "component",
692
+ "scopes": ["GAP"],
693
+ "codeSyntax": {
694
+ "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
695
+ }
733
696
  },
734
697
  {
735
- "name": "control/xsmall/paddingBlock",
736
- "value": 2,
698
+ "name": "stack/gap/condensed",
699
+ "value": 8,
737
700
  "type": "FLOAT",
738
- "refId": "pattern/size/control/xsmall/paddingBlock",
701
+ "refId": "pattern/size/stack/gap/condensed",
702
+ "reference": "base/size/base/size/8",
739
703
  "collection": "pattern/size",
740
704
  "mode": "default",
741
- "group": "pattern/size",
742
- "scopes": ["GAP"]
705
+ "group": "component",
706
+ "scopes": ["GAP"],
707
+ "codeSyntax": {
708
+ "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
709
+ }
743
710
  },
744
711
  {
745
- "name": "control/xsmall/lineBoxHeight",
746
- "value": 20,
712
+ "name": "stack/gap/normal",
713
+ "value": 16,
747
714
  "type": "FLOAT",
748
- "refId": "pattern/size/control/xsmall/lineBoxHeight",
749
- "reference": "base/size/base/size/20",
715
+ "refId": "pattern/size/stack/gap/normal",
716
+ "reference": "base/size/base/size/16",
750
717
  "collection": "pattern/size",
751
718
  "mode": "default",
752
- "group": "pattern/size",
753
- "scopes": ["WIDTH_HEIGHT"]
719
+ "group": "component",
720
+ "scopes": ["GAP"],
721
+ "codeSyntax": {
722
+ "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
723
+ }
754
724
  },
755
725
  {
756
- "name": "control/xsmall/size",
726
+ "name": "stack/gap/spacious",
757
727
  "value": 24,
758
728
  "type": "FLOAT",
759
- "refId": "pattern/size/control/xsmall/size",
729
+ "refId": "pattern/size/stack/gap/spacious",
760
730
  "reference": "base/size/base/size/24",
761
731
  "collection": "pattern/size",
762
732
  "mode": "default",
763
- "group": "pattern/size",
764
- "scopes": ["WIDTH_HEIGHT"]
733
+ "group": "component",
734
+ "scopes": ["GAP"],
735
+ "codeSyntax": {
736
+ "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
737
+ }
765
738
  },
766
739
  {
767
- "name": "control/minTarget/coarse",
768
- "value": 44,
740
+ "name": "controlStack/small/gap/condensed",
741
+ "value": 8,
769
742
  "type": "FLOAT",
770
- "refId": "pattern/size/control/minTarget/coarse",
771
- "reference": "base/size/base/size/44",
743
+ "refId": "pattern/size/controlStack/small/gap/condensed",
744
+ "reference": "base/size/base/size/8",
772
745
  "collection": "pattern/size",
773
746
  "mode": "default",
774
747
  "group": "pattern/size",
775
- "scopes": ["WIDTH_HEIGHT"]
748
+ "scopes": ["GAP"]
776
749
  },
777
750
  {
778
- "name": "control/minTarget/fine",
751
+ "name": "controlStack/small/gap/spacious",
779
752
  "value": 16,
780
753
  "type": "FLOAT",
781
- "refId": "pattern/size/control/minTarget/fine",
754
+ "refId": "pattern/size/controlStack/small/gap/spacious",
782
755
  "reference": "base/size/base/size/16",
783
756
  "collection": "pattern/size",
784
757
  "mode": "default",
785
758
  "group": "pattern/size",
786
- "scopes": ["WIDTH_HEIGHT"]
759
+ "scopes": ["GAP"]
787
760
  },
788
761
  {
789
- "name": "breakpoint/xxlarge",
790
- "value": 1400,
762
+ "name": "controlStack/medium/gap/condensed",
763
+ "value": 8,
791
764
  "type": "FLOAT",
792
- "refId": "functional/size/breakpoint/xxlarge",
793
- "collection": "functional/size",
765
+ "refId": "pattern/size/controlStack/medium/gap/condensed",
766
+ "reference": "base/size/base/size/8",
767
+ "collection": "pattern/size",
794
768
  "mode": "default",
795
- "group": "functional/size",
796
- "scopes": ["WIDTH_HEIGHT"]
769
+ "group": "pattern/size",
770
+ "scopes": ["GAP"]
797
771
  },
798
772
  {
799
- "name": "breakpoint/xlarge",
800
- "value": 1280,
773
+ "name": "controlStack/medium/gap/spacious",
774
+ "value": 12,
801
775
  "type": "FLOAT",
802
- "refId": "functional/size/breakpoint/xlarge",
803
- "collection": "functional/size",
776
+ "refId": "pattern/size/controlStack/medium/gap/spacious",
777
+ "reference": "base/size/base/size/12",
778
+ "collection": "pattern/size",
804
779
  "mode": "default",
805
- "group": "functional/size",
806
- "scopes": ["WIDTH_HEIGHT"]
780
+ "group": "pattern/size",
781
+ "scopes": ["GAP"]
807
782
  },
808
783
  {
809
- "name": "breakpoint/large",
810
- "value": 1012,
784
+ "name": "controlStack/large/gap/auto",
785
+ "value": 8,
811
786
  "type": "FLOAT",
812
- "refId": "functional/size/breakpoint/large",
813
- "collection": "functional/size",
787
+ "refId": "pattern/size/controlStack/large/gap/auto",
788
+ "reference": "base/size/base/size/8",
789
+ "collection": "pattern/size",
814
790
  "mode": "default",
815
- "group": "functional/size",
816
- "scopes": ["WIDTH_HEIGHT"]
791
+ "group": "pattern/size",
792
+ "scopes": ["GAP"]
817
793
  },
818
794
  {
819
- "name": "breakpoint/medium",
820
- "value": 768,
795
+ "name": "controlStack/large/gap/condensed",
796
+ "value": 8,
821
797
  "type": "FLOAT",
822
- "refId": "functional/size/breakpoint/medium",
823
- "collection": "functional/size",
798
+ "refId": "pattern/size/controlStack/large/gap/condensed",
799
+ "reference": "base/size/base/size/8",
800
+ "collection": "pattern/size",
824
801
  "mode": "default",
825
- "group": "functional/size",
826
- "scopes": ["WIDTH_HEIGHT"]
802
+ "group": "pattern/size",
803
+ "scopes": ["GAP"]
827
804
  },
828
805
  {
829
- "name": "breakpoint/small",
830
- "value": 544,
806
+ "name": "controlStack/large/gap/spacious",
807
+ "value": 12,
831
808
  "type": "FLOAT",
832
- "refId": "functional/size/breakpoint/small",
833
- "collection": "functional/size",
809
+ "refId": "pattern/size/controlStack/large/gap/spacious",
810
+ "reference": "base/size/base/size/12",
811
+ "collection": "pattern/size",
834
812
  "mode": "default",
835
- "group": "functional/size",
836
- "scopes": ["WIDTH_HEIGHT"]
813
+ "group": "pattern/size",
814
+ "scopes": ["GAP"]
837
815
  },
838
816
  {
839
- "name": "breakpoint/xsmall",
840
- "value": 320,
817
+ "name": "overlay/width/xsmall",
818
+ "value": 192,
841
819
  "type": "FLOAT",
842
- "refId": "functional/size/breakpoint/xsmall",
843
- "collection": "functional/size",
820
+ "refId": "pattern/size/overlay/width/xsmall",
821
+ "collection": "pattern/size",
844
822
  "mode": "default",
845
- "group": "functional/size",
823
+ "group": "pattern/size",
846
824
  "scopes": ["WIDTH_HEIGHT"]
847
825
  },
848
826
  {
849
- "name": "base/size/128",
850
- "value": 128,
827
+ "name": "overlay/width/small",
828
+ "value": 320,
851
829
  "type": "FLOAT",
852
- "refId": "base/size/base/size/128",
853
- "collection": "base/size",
830
+ "refId": "pattern/size/overlay/width/small",
831
+ "collection": "pattern/size",
854
832
  "mode": "default",
855
- "group": "base/size",
833
+ "group": "pattern/size",
856
834
  "scopes": ["WIDTH_HEIGHT"]
857
835
  },
858
836
  {
859
- "name": "base/size/112",
860
- "value": 112,
837
+ "name": "overlay/width/medium",
838
+ "value": 480,
861
839
  "type": "FLOAT",
862
- "refId": "base/size/base/size/112",
863
- "collection": "base/size",
840
+ "refId": "pattern/size/overlay/width/medium",
841
+ "collection": "pattern/size",
864
842
  "mode": "default",
865
- "group": "base/size",
843
+ "group": "pattern/size",
866
844
  "scopes": ["WIDTH_HEIGHT"]
867
845
  },
868
846
  {
869
- "name": "base/size/96",
870
- "value": 96,
847
+ "name": "overlay/width/large",
848
+ "value": 640,
871
849
  "type": "FLOAT",
872
- "refId": "base/size/base/size/96",
873
- "collection": "base/size",
850
+ "refId": "pattern/size/overlay/width/large",
851
+ "collection": "pattern/size",
874
852
  "mode": "default",
875
- "group": "base/size",
853
+ "group": "pattern/size",
876
854
  "scopes": ["WIDTH_HEIGHT"]
877
855
  },
878
856
  {
879
- "name": "base/size/80",
880
- "value": 80,
857
+ "name": "overlay/width/xlarge",
858
+ "value": 960,
881
859
  "type": "FLOAT",
882
- "refId": "base/size/base/size/80",
883
- "collection": "base/size",
860
+ "refId": "pattern/size/overlay/width/xlarge",
861
+ "collection": "pattern/size",
884
862
  "mode": "default",
885
- "group": "base/size",
863
+ "group": "pattern/size",
886
864
  "scopes": ["WIDTH_HEIGHT"]
887
865
  },
888
866
  {
889
- "name": "base/size/64",
890
- "value": 64,
867
+ "name": "overlay/height/small",
868
+ "value": 256,
891
869
  "type": "FLOAT",
892
- "refId": "base/size/base/size/64",
893
- "collection": "base/size",
870
+ "refId": "pattern/size/overlay/height/small",
871
+ "collection": "pattern/size",
894
872
  "mode": "default",
895
- "group": "base/size",
873
+ "group": "pattern/size",
896
874
  "scopes": ["WIDTH_HEIGHT"]
897
875
  },
898
876
  {
899
- "name": "base/size/48",
900
- "value": 48,
877
+ "name": "overlay/height/medium",
878
+ "value": 320,
901
879
  "type": "FLOAT",
902
- "refId": "base/size/base/size/48",
903
- "collection": "base/size",
880
+ "refId": "pattern/size/overlay/height/medium",
881
+ "collection": "pattern/size",
904
882
  "mode": "default",
905
- "group": "base/size",
883
+ "group": "pattern/size",
906
884
  "scopes": ["WIDTH_HEIGHT"]
907
885
  },
908
886
  {
909
- "name": "base/size/44",
910
- "value": 44,
887
+ "name": "overlay/height/large",
888
+ "value": 432,
911
889
  "type": "FLOAT",
912
- "refId": "base/size/base/size/44",
913
- "collection": "base/size",
890
+ "refId": "pattern/size/overlay/height/large",
891
+ "collection": "pattern/size",
914
892
  "mode": "default",
915
- "group": "base/size",
893
+ "group": "pattern/size",
916
894
  "scopes": ["WIDTH_HEIGHT"]
917
895
  },
918
896
  {
919
- "name": "base/size/40",
920
- "value": 40,
897
+ "name": "overlay/height/xlarge",
898
+ "value": 600,
921
899
  "type": "FLOAT",
922
- "refId": "base/size/base/size/40",
923
- "collection": "base/size",
900
+ "refId": "pattern/size/overlay/height/xlarge",
901
+ "collection": "pattern/size",
924
902
  "mode": "default",
925
- "group": "base/size",
903
+ "group": "pattern/size",
926
904
  "scopes": ["WIDTH_HEIGHT"]
927
905
  },
928
906
  {
929
- "name": "base/size/36",
930
- "value": 36,
907
+ "name": "overlay/padding/normal",
908
+ "value": 16,
931
909
  "type": "FLOAT",
932
- "refId": "base/size/base/size/36",
933
- "collection": "base/size",
910
+ "refId": "pattern/size/overlay/padding/normal",
911
+ "reference": "base/size/base/size/16",
912
+ "collection": "pattern/size",
934
913
  "mode": "default",
935
- "group": "base/size",
936
- "scopes": ["WIDTH_HEIGHT"]
914
+ "group": "pattern/size",
915
+ "scopes": ["GAP"]
937
916
  },
938
917
  {
939
- "name": "base/size/32",
940
- "value": 32,
918
+ "name": "overlay/padding/condensed",
919
+ "value": 8,
941
920
  "type": "FLOAT",
942
- "refId": "base/size/base/size/32",
943
- "collection": "base/size",
921
+ "refId": "pattern/size/overlay/padding/condensed",
922
+ "reference": "base/size/base/size/8",
923
+ "collection": "pattern/size",
944
924
  "mode": "default",
945
- "group": "base/size",
946
- "scopes": ["WIDTH_HEIGHT"]
925
+ "group": "pattern/size",
926
+ "scopes": ["GAP"]
947
927
  },
948
928
  {
949
- "name": "base/size/28",
950
- "value": 28,
929
+ "name": "overlay/paddingBlock/condensed",
930
+ "value": 4,
951
931
  "type": "FLOAT",
952
- "refId": "base/size/base/size/28",
953
- "collection": "base/size",
932
+ "refId": "pattern/size/overlay/paddingBlock/condensed",
933
+ "reference": "base/size/base/size/4",
934
+ "collection": "pattern/size",
954
935
  "mode": "default",
955
- "group": "base/size",
956
- "scopes": ["WIDTH_HEIGHT"]
936
+ "group": "pattern/size",
937
+ "scopes": ["GAP"]
957
938
  },
958
939
  {
959
- "name": "base/size/24",
960
- "value": 24,
940
+ "name": "overlay/paddingBlock/normal",
941
+ "value": 12,
961
942
  "type": "FLOAT",
962
- "refId": "base/size/base/size/24",
963
- "collection": "base/size",
943
+ "refId": "pattern/size/overlay/paddingBlock/normal",
944
+ "reference": "base/size/base/size/12",
945
+ "collection": "pattern/size",
964
946
  "mode": "default",
965
- "group": "base/size",
966
- "scopes": ["WIDTH_HEIGHT"]
947
+ "group": "pattern/size",
948
+ "scopes": ["GAP"]
967
949
  },
968
950
  {
969
- "name": "base/size/20",
970
- "value": 20,
951
+ "name": "overlay/borderRadius",
952
+ "value": 6,
971
953
  "type": "FLOAT",
972
- "refId": "base/size/base/size/20",
973
- "collection": "base/size",
954
+ "refId": "pattern/size/overlay/borderRadius",
955
+ "reference": "functional/size/borderRadius/medium",
956
+ "collection": "pattern/size",
974
957
  "mode": "default",
975
- "group": "base/size",
976
- "scopes": ["WIDTH_HEIGHT"]
958
+ "group": "pattern/size",
959
+ "scopes": ["CORNER_RADIUS"]
977
960
  },
978
961
  {
979
- "name": "base/size/16",
980
- "value": 16,
962
+ "name": "overlay/offset",
963
+ "value": 4,
981
964
  "type": "FLOAT",
982
- "refId": "base/size/base/size/16",
983
- "collection": "base/size",
965
+ "refId": "pattern/size/overlay/offset",
966
+ "collection": "pattern/size",
984
967
  "mode": "default",
985
- "group": "base/size",
968
+ "group": "pattern/size",
986
969
  "scopes": ["WIDTH_HEIGHT"]
987
970
  },
988
971
  {
989
- "name": "base/size/12",
990
- "value": 12,
972
+ "name": "borderRadius/small",
973
+ "value": 3,
991
974
  "type": "FLOAT",
992
- "refId": "base/size/base/size/12",
993
- "collection": "base/size",
975
+ "refId": "functional/size/borderRadius/small",
976
+ "collection": "functional/size",
994
977
  "mode": "default",
995
- "group": "base/size",
996
- "scopes": ["WIDTH_HEIGHT"]
978
+ "group": "functional/size",
979
+ "scopes": ["CORNER_RADIUS"],
980
+ "codeSyntax": {
981
+ "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
982
+ }
997
983
  },
998
984
  {
999
- "name": "base/size/8",
1000
- "value": 8,
985
+ "name": "borderRadius/medium",
986
+ "value": 6,
1001
987
  "type": "FLOAT",
1002
- "refId": "base/size/base/size/8",
1003
- "collection": "base/size",
988
+ "refId": "functional/size/borderRadius/medium",
989
+ "collection": "functional/size",
1004
990
  "mode": "default",
1005
- "group": "base/size",
1006
- "scopes": ["WIDTH_HEIGHT"]
991
+ "group": "functional/size",
992
+ "scopes": ["CORNER_RADIUS"],
993
+ "codeSyntax": {
994
+ "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
995
+ }
1007
996
  },
1008
997
  {
1009
- "name": "base/size/6",
1010
- "value": 6,
998
+ "name": "borderRadius/large",
999
+ "value": 12,
1011
1000
  "type": "FLOAT",
1012
- "refId": "base/size/base/size/6",
1013
- "collection": "base/size",
1001
+ "refId": "functional/size/borderRadius/large",
1002
+ "collection": "functional/size",
1014
1003
  "mode": "default",
1015
- "group": "base/size",
1016
- "scopes": ["WIDTH_HEIGHT"]
1004
+ "group": "functional/size",
1005
+ "scopes": ["CORNER_RADIUS"],
1006
+ "codeSyntax": {
1007
+ "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
1008
+ }
1017
1009
  },
1018
1010
  {
1019
- "name": "base/size/4",
1020
- "value": 4,
1011
+ "name": "borderRadius/full",
1012
+ "value": 9999,
1021
1013
  "type": "FLOAT",
1022
- "refId": "base/size/base/size/4",
1023
- "collection": "base/size",
1014
+ "description": "Use this border radius for pill shaped elements",
1015
+ "refId": "functional/size/borderRadius/full",
1016
+ "collection": "functional/size",
1024
1017
  "mode": "default",
1025
- "group": "base/size",
1026
- "scopes": ["WIDTH_HEIGHT"]
1018
+ "group": "functional/size",
1019
+ "scopes": ["CORNER_RADIUS"],
1020
+ "codeSyntax": {
1021
+ "web": "var(--borderRadius-full) /* utility class: .circle */"
1022
+ }
1027
1023
  },
1028
1024
  {
1029
- "name": "base/size/2",
1030
- "value": 2,
1025
+ "name": "borderRadius/default",
1026
+ "value": 6,
1031
1027
  "type": "FLOAT",
1032
- "refId": "base/size/base/size/2",
1033
- "collection": "base/size",
1028
+ "refId": "functional/size/borderRadius/default",
1029
+ "reference": "functional/size/borderRadius/medium",
1030
+ "collection": "functional/size",
1034
1031
  "mode": "default",
1035
- "group": "base/size",
1036
- "scopes": ["WIDTH_HEIGHT"]
1032
+ "group": "functional/size",
1033
+ "scopes": ["CORNER_RADIUS"],
1034
+ "codeSyntax": {
1035
+ "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
1036
+ }
1037
1037
  }
1038
1038
  ]