@discourser/design-system 0.27.0 → 0.28.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 (36) hide show
  1. package/dist/{chunk-AZ6QU2L2.cjs → chunk-5H764SHY.cjs} +251 -4
  2. package/dist/chunk-5H764SHY.cjs.map +1 -0
  3. package/dist/{chunk-MAVUSE4F.js → chunk-7N32LXVA.js} +18 -17
  4. package/dist/chunk-7N32LXVA.js.map +1 -0
  5. package/dist/{chunk-EBDNCZF6.cjs → chunk-BTI7U4DO.cjs} +18 -17
  6. package/dist/chunk-BTI7U4DO.cjs.map +1 -0
  7. package/dist/{chunk-4XOWPACJ.js → chunk-WMHVCIDI.js} +251 -4
  8. package/dist/chunk-WMHVCIDI.js.map +1 -0
  9. package/dist/components/Breadcrumb.d.ts.map +1 -1
  10. package/dist/components/StudioControls/StudioControls.d.ts +1 -1
  11. package/dist/components/StudioControls/StudioControls.d.ts.map +1 -1
  12. package/dist/components/StudioControls/types.d.ts +3 -0
  13. package/dist/components/StudioControls/types.d.ts.map +1 -1
  14. package/dist/components/index.cjs +76 -76
  15. package/dist/components/index.js +1 -1
  16. package/dist/figma-codex.json +9 -3
  17. package/dist/index.cjs +80 -80
  18. package/dist/index.js +2 -2
  19. package/dist/panda.buildinfo.json +856 -0
  20. package/dist/preset/index.cjs +2 -2
  21. package/dist/preset/index.d.ts.map +1 -1
  22. package/dist/preset/index.js +1 -1
  23. package/dist/preset/recipes/studio-controls.d.ts.map +1 -1
  24. package/docs/component-catalog.md +2 -2
  25. package/package.json +3 -2
  26. package/src/components/Breadcrumb.figma.tsx +68 -17
  27. package/src/components/Breadcrumb.tsx +4 -3
  28. package/src/components/StudioControls/StudioControls.tsx +13 -12
  29. package/src/components/StudioControls/types.ts +4 -0
  30. package/src/preset/index.ts +2 -0
  31. package/src/preset/recipes/breadcrumb.ts +1 -1
  32. package/src/preset/recipes/studio-controls.ts +8 -11
  33. package/dist/chunk-4XOWPACJ.js.map +0 -1
  34. package/dist/chunk-AZ6QU2L2.cjs.map +0 -1
  35. package/dist/chunk-EBDNCZF6.cjs.map +0 -1
  36. package/dist/chunk-MAVUSE4F.js.map +0 -1
@@ -0,0 +1,856 @@
1
+ {
2
+ "schemaVersion": "1.8.1",
3
+ "styles": {
4
+ "atomic": [
5
+ "colorPalette]___[value:primary",
6
+ "color]___[value:fg.subtle]___[cond:&[data-disabled]",
7
+ "opacity]___[value:0.45]___[cond:&[data-disabled]",
8
+ "pointerEvents]___[value:none]___[cond:&[data-disabled]",
9
+ "cursor]___[value:default]___[cond:&[data-disabled]",
10
+ "color]___[value:fg.subtle]___[cond:&[data-disabled]<___>_hover",
11
+ "display]___[value:flex",
12
+ "alignItems]___[value:center",
13
+ "flexWrap]___[value:wrap",
14
+ "gap]___[value:1",
15
+ "marginBottom]___[value:1",
16
+ "color]___[value:fg.default]___[cond:_hover",
17
+ "textDecoration]___[value:underline]___[cond:_hover",
18
+ "color]___[value:fg.subtle",
19
+ "textStyle]___[value:bodyMedium",
20
+ "fontWeight]___[value:light",
21
+ "textDecoration]___[value:none",
22
+ "marginInline]___[value:0.5",
23
+ "borderEndRadius]___[value:0]___[cond:& > *:first-child",
24
+ "marginInlineEnd]___[value:-1px]___[cond:& > *:first-child",
25
+ "borderStartRadius]___[value:0]___[cond:& > *:last-child",
26
+ "borderRadius]___[value:0]___[cond:& > *:not(:first-child):not(:last-child)",
27
+ "marginInlineEnd]___[value:-1px]___[cond:& > *:not(:first-child):not(:last-child)",
28
+ "borderBottomRadius]___[value:0]___[cond:& > *:first-child",
29
+ "marginBottom]___[value:-1px]___[cond:& > *:first-child",
30
+ "borderTopRadius]___[value:0]___[cond:& > *:last-child",
31
+ "marginBottom]___[value:-1px]___[cond:& > *:not(:first-child):not(:last-child)",
32
+ "fill]___[value:none",
33
+ "stroke]___[value:currentColor",
34
+ "strokeWidth]___[value:3px",
35
+ "strokeLinecap]___[value:round",
36
+ "strokeLinejoin]___[value:round",
37
+ "colorPalette]___[value:gray",
38
+ "paddingInline]___[value:0",
39
+ "paddingBlock]___[value:0",
40
+ "insetInlineStart]___[value:0",
41
+ "top]___[value:0",
42
+ "insetInlineEnd]___[value:0",
43
+ "borderWidth]___[value:0.125em",
44
+ "color]___[value:inherit",
45
+ "display]___[value:contents",
46
+ "visibility]___[value:hidden",
47
+ "display]___[value:inline-flex",
48
+ "flexDirection]___[value:column",
49
+ "gap]___[value:8px",
50
+ "width]___[value:full",
51
+ "maxWidth]___[value:100%]___[cond:_last",
52
+ "maxWidth]___[value:80%]___[cond:_last",
53
+ "height]___[value:4",
54
+ "insetInline]___[value:4]___[cond:mdDown",
55
+ "color]___[value:colorPalette.plain.fg",
56
+ "alignItems]___[value:start",
57
+ "gap]___[value:3",
58
+ "colorPalette]___[value:neutral",
59
+ "width]___[value:1em",
60
+ "height]___[value:1em",
61
+ "fill]___[value:currentColor",
62
+ "strokeWidth]___[value:0.5",
63
+ "height]___[value:1.5em",
64
+ "width]___[value:auto",
65
+ "width]___[value:60",
66
+ "height]___[value:60",
67
+ "fontSize]___[value:lg",
68
+ "fontWeight]___[value:medium",
69
+ "borderRadius]___[value:l3",
70
+ "padding]___[value:2",
71
+ "background]___[value:surface.container",
72
+ "color]___[value:onSurface",
73
+ "gap]___[value:2",
74
+ "flexDirection]___[value:row",
75
+ "color]___[value:primary.50",
76
+ "minHeight]___[value:100vh",
77
+ "background]___[value:neutral.95",
78
+ "fontFamily]___[value:body",
79
+ "width]___[value:285px",
80
+ "flexShrink]___[value:0",
81
+ "background]___[value:white",
82
+ "borderRight]___[value:1px solid",
83
+ "borderColor]___[value:neutral.90",
84
+ "overflow]___[value:hidden",
85
+ "paddingInline]___[value:6",
86
+ "paddingBlock]___[value:5",
87
+ "borderBottom]___[value:1px solid",
88
+ "flex]___[value:1",
89
+ "overflow]___[value:auto",
90
+ "paddingBlock]___[value:2",
91
+ "minWidth]___[value:0",
92
+ "paddingInline]___[value:10",
93
+ "paddingTop]___[value:7",
94
+ "paddingBottom]___[value:5",
95
+ "marginBottom]___[value:3",
96
+ "fontSize]___[value:sm",
97
+ "color]___[value:neutral.50",
98
+ "cursor]___[value:pointer",
99
+ "color]___[value:neutral.30]___[cond:_hover",
100
+ "color]___[value:neutral.60",
101
+ "color]___[value:neutral.20",
102
+ "color]___[value:neutral.30",
103
+ "fontWeight]___[value:bold",
104
+ "color]___[value:neutral.10",
105
+ "paddingBottom]___[value:10",
106
+ "gap]___[value:6",
107
+ "fontSize]___[value:2xl",
108
+ "fontWeight]___[value:semibold",
109
+ "fontFamily]___[value:heading",
110
+ "display]___[value:grid",
111
+ "gridTemplateColumns]___[value:1fr 340px",
112
+ "gap]___[value:4",
113
+ "borderRadius]___[value:xl",
114
+ "border]___[value:1px solid",
115
+ "boxShadow]___[value:0px 1px 4px 0px rgba(0,0,0,0.08)",
116
+ "padding]___[value:6",
117
+ "gap]___[value:5",
118
+ "fontSize]___[value:3xl",
119
+ "lineHeight]___[value:tight",
120
+ "fontSize]___[value:xl",
121
+ "lineHeight]___[value:relaxed",
122
+ "background]___[value:neutral.99",
123
+ "borderRadius]___[value:lg",
124
+ "padding]___[value:4",
125
+ "fontSize]___[value:xs",
126
+ "textTransform]___[value:uppercase",
127
+ "letterSpacing]___[value:widest",
128
+ "color]___[value:neutral.40",
129
+ "paddingBlock]___[value:2.5",
130
+ "background]___[value:neutral.10",
131
+ "color]___[value:white",
132
+ "border]___[value:none",
133
+ "transition]___[value:background 0.15s",
134
+ "background]___[value:neutral.20]___[cond:_hover",
135
+ "fontWeight]___[value:normal",
136
+ "listStyle]___[value:none",
137
+ "padding]___[value:0",
138
+ "margin]___[value:0",
139
+ "fontSize]___[value:md",
140
+ "background]___[value:transparent",
141
+ "borderColor]___[value:neutral.70",
142
+ "transition]___[value:border-color 0.15s",
143
+ "borderColor]___[value:neutral.40]___[cond:_hover",
144
+ "padding]___[value:5",
145
+ "paddingBottom]___[value:3",
146
+ "paddingInline]___[value:5",
147
+ "color]___[value:primary.40",
148
+ "color]___[value:primary.30]___[cond:_hover",
149
+ "marginTop]___[value:0.5",
150
+ "height]___[value:32px",
151
+ "color]___[value:currentColor",
152
+ "width]___[value:14px",
153
+ "height]___[value:14px",
154
+ "maxWidth]___[value:560px",
155
+ "maxHeight]___[value:80vh",
156
+ "overflowY]___[value:auto",
157
+ "color]___[value:primary.solid.bg",
158
+ "focusVisibleRing]___[value:outside]___[cond:_focusVisible",
159
+ "justifyContent]___[value:center",
160
+ "borderRadius]___[value:l1",
161
+ "width]___[value:6",
162
+ "height]___[value:6",
163
+ "color]___[value:fg.muted",
164
+ "background]___[value:neutral.subtle.bg]___[cond:_hover",
165
+ "minHeight]___[value:48",
166
+ "borderRadius]___[value:l2",
167
+ "background]___[value:neutral.subtle.bg",
168
+ "borderWidth]___[value:1px",
169
+ "borderStyle]___[value:dashed",
170
+ "borderColor]___[value:border.default",
171
+ "boxShadow]___[value:0px 2px 8px 0px rgba(167, 139, 250, 0.15)",
172
+ "background]___[value:neutral.1",
173
+ "alignItems]___[value:flex-start",
174
+ "gap]___[value:2.5",
175
+ "paddingLeft]___[value:5",
176
+ "paddingRight]___[value:3",
177
+ "justifyContent]___[value:space-between",
178
+ "paddingRight]___[value:2.5",
179
+ "paddingInline]___[value:1",
180
+ "paddingBlock]___[value:1.5",
181
+ "width]___[value:9",
182
+ "height]___[value:10",
183
+ "flex]___[value:0 0 auto",
184
+ "width]___[value:12",
185
+ "height]___[value:12",
186
+ "borderRadius]___[value:9999px",
187
+ "width]___[value:11",
188
+ "height]___[value:11",
189
+ "width]___[value:3",
190
+ "height]___[value:3",
191
+ "background]___[value:secondary.6]___[cond:_checked",
192
+ "borderBottomWidth]___[value:0",
193
+ "borderRadius]___[value:0",
194
+ "paddingBlock]___[value:4",
195
+ "background]___[value:surface",
196
+ "color]___[value:primary.7",
197
+ "background]___[value:secondary.7",
198
+ "paddingInline]___[value:4",
199
+ "minWidth]___[value:36",
200
+ "background]___[value:secondary.8]___[cond:_hover",
201
+ "maxWidth]___[value:lg",
202
+ "boxShadow]___[value:none",
203
+ "borderStyle]___[value:solid",
204
+ "borderColor]___[value:primary.7",
205
+ "background]___[value:m3Primary.container]___[cond:_checked",
206
+ "borderColor]___[value:primary.7]___[cond:_checked",
207
+ "background]___[value:primary.7]___[cond:_checked<___>_after",
208
+ "paddingInline]___[value:3",
209
+ "paddingBlock]___[value:3",
210
+ "borderTopWidth]___[value:1px",
211
+ "borderTopStyle]___[value:solid",
212
+ "borderTopColor]___[value:neutral.3",
213
+ "boxShadow]___[value:0px -1px 2px rgba(0, 0, 0, 0.3), 0px -2px 6px 2px rgba(0, 0, 0, 0.15)",
214
+ "transition]___[value:background 0.2s",
215
+ "background]___[value:surface.containerHighest]___[cond:_hover",
216
+ "width]___[value:275px",
217
+ "boxShadow]___[value:level2",
218
+ "paddingTop]___[value:3",
219
+ "paddingBottom]___[value:2",
220
+ "fontSize]___[value:bodyMedium",
221
+ "color]___[value:neutral.7",
222
+ "textOverflow]___[value:ellipsis",
223
+ "whiteSpace]___[value:nowrap",
224
+ "borderColor]___[value:border",
225
+ "paddingBlock]___[value:1",
226
+ "background]___[value:surface.container]___[cond:_hover",
227
+ "width]___[value:100%",
228
+ "height]___[value:100%",
229
+ "gap]___[value:0",
230
+ "width]___[value:5",
231
+ "height]___[value:5",
232
+ "gap]___[value:md",
233
+ "marginTop]___[value:lg",
234
+ "colorPalette]___[value:tertiary",
235
+ "--thickness]___[value:1px",
236
+ "borderBlockEndWidth]___[value:var(--thickness)",
237
+ "borderInlineEndWidth]___[value:var(--thickness)",
238
+ "gap]___[value:sm",
239
+ "alignSelf]___[value:stretch",
240
+ "width]___[value:1px",
241
+ "background]___[value:outlineVariant",
242
+ "textStyle]___[value:labelMedium",
243
+ "color]___[value:onSurfaceVariant",
244
+ "userSelect]___[value:none",
245
+ "height]___[value:1px",
246
+ "borderWidth]___[value:thin",
247
+ "borderColor]___[value:neutral.outline.border",
248
+ "borderWidth]___[value:medium",
249
+ "borderWidth]___[value:thick",
250
+ "background]___[value:primary.1",
251
+ "background]___[value:primary.2",
252
+ "background]___[value:primary.3",
253
+ "background]___[value:primary.4",
254
+ "background]___[value:primary.5",
255
+ "background]___[value:primary.6",
256
+ "background]___[value:primary.7",
257
+ "background]___[value:primary.8",
258
+ "background]___[value:primary.9",
259
+ "background]___[value:primary.10",
260
+ "background]___[value:primary.11",
261
+ "background]___[value:primary.12",
262
+ "background]___[value:secondary.1",
263
+ "background]___[value:secondary.2",
264
+ "background]___[value:secondary.3",
265
+ "background]___[value:secondary.4",
266
+ "background]___[value:secondary.5",
267
+ "background]___[value:secondary.6",
268
+ "background]___[value:secondary.8",
269
+ "background]___[value:secondary.9",
270
+ "background]___[value:secondary.10",
271
+ "background]___[value:secondary.11",
272
+ "background]___[value:secondary.12",
273
+ "background]___[value:tertiary.1",
274
+ "background]___[value:tertiary.2",
275
+ "background]___[value:tertiary.3",
276
+ "background]___[value:tertiary.4",
277
+ "background]___[value:tertiary.5",
278
+ "background]___[value:tertiary.6",
279
+ "background]___[value:tertiary.7",
280
+ "background]___[value:tertiary.8",
281
+ "background]___[value:tertiary.9",
282
+ "background]___[value:tertiary.10",
283
+ "background]___[value:tertiary.11",
284
+ "background]___[value:tertiary.12",
285
+ "background]___[value:neutral.2",
286
+ "background]___[value:neutral.3",
287
+ "background]___[value:neutral.4",
288
+ "background]___[value:neutral.5",
289
+ "background]___[value:neutral.6",
290
+ "background]___[value:neutral.7",
291
+ "background]___[value:neutral.8",
292
+ "background]___[value:neutral.9",
293
+ "background]___[value:neutral.11",
294
+ "background]___[value:neutral.12",
295
+ "background]___[value:error.1",
296
+ "background]___[value:error.2",
297
+ "background]___[value:error.3",
298
+ "background]___[value:error.4",
299
+ "background]___[value:error.5",
300
+ "background]___[value:error.6",
301
+ "background]___[value:error.7",
302
+ "background]___[value:error.8",
303
+ "background]___[value:error.9",
304
+ "background]___[value:error.10",
305
+ "background]___[value:error.11",
306
+ "background]___[value:error.12",
307
+ "background]___[value:primary.a1",
308
+ "background]___[value:primary.a2",
309
+ "background]___[value:primary.a3",
310
+ "background]___[value:primary.a4",
311
+ "background]___[value:primary.a5",
312
+ "background]___[value:primary.a6",
313
+ "background]___[value:primary.a7",
314
+ "background]___[value:primary.a8",
315
+ "background]___[value:primary.a9",
316
+ "background]___[value:primary.a10",
317
+ "background]___[value:primary.a11",
318
+ "background]___[value:primary.a12",
319
+ "background]___[value:secondary.a1",
320
+ "background]___[value:secondary.a2",
321
+ "background]___[value:secondary.a3",
322
+ "background]___[value:secondary.a4",
323
+ "background]___[value:secondary.a5",
324
+ "background]___[value:secondary.a6",
325
+ "background]___[value:secondary.a7",
326
+ "background]___[value:secondary.a8",
327
+ "background]___[value:secondary.a9",
328
+ "background]___[value:secondary.a10",
329
+ "background]___[value:secondary.a11",
330
+ "background]___[value:secondary.a12",
331
+ "background]___[value:tertiary.a1",
332
+ "background]___[value:tertiary.a2",
333
+ "background]___[value:tertiary.a3",
334
+ "background]___[value:tertiary.a4",
335
+ "background]___[value:tertiary.a5",
336
+ "background]___[value:tertiary.a6",
337
+ "background]___[value:tertiary.a7",
338
+ "background]___[value:tertiary.a8",
339
+ "background]___[value:tertiary.a9",
340
+ "background]___[value:tertiary.a10",
341
+ "background]___[value:tertiary.a11",
342
+ "background]___[value:tertiary.a12",
343
+ "background]___[value:neutral.a1",
344
+ "background]___[value:neutral.a2",
345
+ "background]___[value:neutral.a3",
346
+ "background]___[value:neutral.a4",
347
+ "background]___[value:neutral.a5",
348
+ "background]___[value:neutral.a6",
349
+ "background]___[value:neutral.a7",
350
+ "background]___[value:neutral.a8",
351
+ "background]___[value:neutral.a9",
352
+ "background]___[value:neutral.a10",
353
+ "background]___[value:neutral.a11",
354
+ "background]___[value:neutral.a12",
355
+ "background]___[value:error.a1",
356
+ "background]___[value:error.a2",
357
+ "background]___[value:error.a3",
358
+ "background]___[value:error.a4",
359
+ "background]___[value:error.a5",
360
+ "background]___[value:error.a6",
361
+ "background]___[value:error.a7",
362
+ "background]___[value:error.a8",
363
+ "background]___[value:error.a9",
364
+ "background]___[value:error.a10",
365
+ "background]___[value:error.a11",
366
+ "background]___[value:error.a12",
367
+ "background]___[value:primary.solid.bg",
368
+ "background]___[value:primary.subtle.bg",
369
+ "background]___[value:primary.surface.bg",
370
+ "borderColor]___[value:primary.outline.border",
371
+ "color]___[value:primary.plain.fg",
372
+ "background]___[value:secondary.solid.bg",
373
+ "background]___[value:secondary.subtle.bg",
374
+ "background]___[value:secondary.surface.bg",
375
+ "borderColor]___[value:secondary.outline.border",
376
+ "color]___[value:secondary.plain.fg",
377
+ "background]___[value:tertiary.solid.bg",
378
+ "background]___[value:tertiary.subtle.bg",
379
+ "background]___[value:tertiary.surface.bg",
380
+ "borderColor]___[value:tertiary.outline.border",
381
+ "color]___[value:tertiary.plain.fg",
382
+ "background]___[value:neutral.solid.bg",
383
+ "background]___[value:neutral.surface.bg",
384
+ "color]___[value:neutral.plain.fg",
385
+ "background]___[value:error.solid.bg",
386
+ "background]___[value:error.subtle.bg",
387
+ "background]___[value:error.surface.bg",
388
+ "borderColor]___[value:error.outline.border",
389
+ "color]___[value:error.plain.fg",
390
+ "transitionDuration]___[value:instant",
391
+ "transitionProperty]___[value:background",
392
+ "transitionTimingFunction]___[value:standard",
393
+ "transitionDuration]___[value:fast",
394
+ "transitionDuration]___[value:normal",
395
+ "transitionDuration]___[value:slow",
396
+ "transitionDuration]___[value:slower",
397
+ "background]___[value:primary.9]___[cond:_hover",
398
+ "transitionProperty]___[value:transform",
399
+ "transitionTimingFunction]___[value:standardDecelerate",
400
+ "transitionTimingFunction]___[value:standardAccelerate",
401
+ "transitionTimingFunction]___[value:emphasized",
402
+ "transitionTimingFunction]___[value:emphasizedDecelerate",
403
+ "transitionTimingFunction]___[value:emphasizedAccelerate",
404
+ "transform]___[value:translateX(40px)]___[cond:_hover",
405
+ "borderRadius]___[value:none",
406
+ "borderRadius]___[value:extraSmall",
407
+ "borderRadius]___[value:small",
408
+ "borderRadius]___[value:medium",
409
+ "borderRadius]___[value:large",
410
+ "borderRadius]___[value:extraLarge",
411
+ "borderRadius]___[value:full",
412
+ "background]___[value:primary",
413
+ "background]___[value:onPrimary",
414
+ "background]___[value:primary.container",
415
+ "background]___[value:onPrimary.container",
416
+ "background]___[value:secondary",
417
+ "background]___[value:onSecondary",
418
+ "background]___[value:secondary.container",
419
+ "background]___[value:onSecondary.container",
420
+ "background]___[value:tertiary",
421
+ "background]___[value:onTertiary",
422
+ "background]___[value:tertiary.container",
423
+ "background]___[value:onTertiary.container",
424
+ "background]___[value:error",
425
+ "background]___[value:onError",
426
+ "background]___[value:error.container",
427
+ "background]___[value:onError.container",
428
+ "background]___[value:onSurface",
429
+ "background]___[value:surfaceVariant",
430
+ "background]___[value:onSurface.variant",
431
+ "background]___[value:surface.container.lowest",
432
+ "background]___[value:surface.container.low",
433
+ "background]___[value:surface.container.high",
434
+ "background]___[value:surface.container.highest",
435
+ "background]___[value:outline",
436
+ "background]___[value:outline.variant",
437
+ "background]___[value:inverseSurface",
438
+ "background]___[value:inverseOnSurface",
439
+ "background]___[value:inversePrimary",
440
+ "background]___[value:background",
441
+ "background]___[value:onBackground",
442
+ "background]___[value:scrim",
443
+ "background]___[value:shadow",
444
+ "boxShadow]___[value:level0",
445
+ "boxShadow]___[value:level1",
446
+ "boxShadow]___[value:level3",
447
+ "boxShadow]___[value:level4",
448
+ "boxShadow]___[value:level5",
449
+ "width]___[value:none",
450
+ "width]___[value:xxs",
451
+ "width]___[value:xs",
452
+ "width]___[value:sm",
453
+ "width]___[value:md",
454
+ "width]___[value:lg",
455
+ "width]___[value:xl",
456
+ "width]___[value:xxl",
457
+ "width]___[value:xxxl",
458
+ "position]___[value:relative",
459
+ "width]___[value:48",
460
+ "height]___[value:32",
461
+ "colorPalette]___[value:error",
462
+ "gap]___[value:-3",
463
+ "gap]___[value:-2",
464
+ "colorPalette]___[value:secondary",
465
+ "width]___[value:18",
466
+ "height]___[value:18",
467
+ "width]___[value:400px]___[cond:md",
468
+ "maxWidth]___[value:400px",
469
+ "height]___[value:24",
470
+ "height]___[value:200px",
471
+ "color]___[value:primary.solid.fg",
472
+ "textDecoration]___[value:line-through",
473
+ "alignItems]___[value:stretch",
474
+ "maxWidth]___[value:600px",
475
+ "gap]___[value:8",
476
+ "marginBottom]___[value:2",
477
+ "gap]___[value:16",
478
+ "padding]___[value:12",
479
+ "width]___[value:80",
480
+ "width]___[value:96",
481
+ "letterSpacing]___[value:wider",
482
+ "fontFamily]___[value:mono",
483
+ "marginBottom]___[value:5",
484
+ "maxWidth]___[value:2xl",
485
+ "height]___[value:2px",
486
+ "background]___[value:border",
487
+ "marginTop]___[value:2",
488
+ "width]___[value:10",
489
+ "width]___[value:16",
490
+ "width]___[value:8",
491
+ "width]___[value:64",
492
+ "boxShadow]___[value:lg",
493
+ "borderBottomWidth]___[value:1px",
494
+ "justifyContent]___[value:flex-end",
495
+ "paddingTop]___[value:4",
496
+ "paddingBottom]___[value:36",
497
+ "paddingTop]___[value:2",
498
+ "paddingBottom]___[value:16",
499
+ "width]___[value:343px",
500
+ "width]___[value:280px",
501
+ "height]___[value:720px",
502
+ "height]___[value:400px",
503
+ "width]___[value:240px",
504
+ "background]___[value:surface.dim",
505
+ "width]___[value:350px",
506
+ "minHeight]___[value:600px",
507
+ "width]___[value:6]___[cond:& svg",
508
+ "height]___[value:6]___[cond:& svg",
509
+ "alignItems]___[value:baseline",
510
+ "alignItems]___[value:end",
511
+ "gap]___[value:10",
512
+ "justifyContent]___[value:end",
513
+ "width]___[value:40",
514
+ "borderRadius]___[value:md",
515
+ "width]___[value:56",
516
+ "width]___[value:36",
517
+ "width]___[value:28",
518
+ "width]___[value:72",
519
+ "content]___[value:Helpful contextual tooltip text",
520
+ "color]___[value:primary.9",
521
+ "gridTemplateColumns]___[value:repeat(5, minmax(0, 1fr))",
522
+ "scrollBehavior]___[value:inside",
523
+ "position]___[value:absolute",
524
+ "top]___[value:2",
525
+ "right]___[value:2",
526
+ "height]___[value:2em",
527
+ "height]___[value:3em",
528
+ "height]___[value:4em",
529
+ "color]___[value:gray",
530
+ "opacity]___[value:0.5",
531
+ "width]___[value:400px",
532
+ "height]___[value:120px",
533
+ "height]___[value:160px",
534
+ "marginTop]___[value:1",
535
+ "textAlign]___[value:center",
536
+ "alignItems]___[value:flex-end",
537
+ "width]___[value:4",
538
+ "color]___[value:fg.default",
539
+ "height]___[value:8",
540
+ "color]___[value:onSurface.variant",
541
+ "padding]___[value:xs",
542
+ "marginBottom]___[value:xs",
543
+ "borderRadius]___[value:sm",
544
+ "width]___[value:300px",
545
+ "minHeight]___[value:400px",
546
+ "height]___[value:100vh",
547
+ "bottom]___[value:0",
548
+ "left]___[value:0",
549
+ "right]___[value:0",
550
+ "height]___[value:300px",
551
+ "gap]___[value:lg",
552
+ "padding]___[value:sm",
553
+ "maxWidth]___[value:320px",
554
+ "height]___[value:52px",
555
+ "paddingInline]___[value:md",
556
+ "background]___[value:surfaceContainerLow",
557
+ "borderColor]___[value:outlineVariant",
558
+ "textStyle]___[value:titleMedium",
559
+ "color]___[value:inverseOnSurface",
560
+ "padding]___[value:3",
561
+ "content]___[value:This is a helpful tooltip",
562
+ "content]___[value:This tooltip has no arrow",
563
+ "content]___[value:Click for more information",
564
+ "content]___[value:This is a longer tooltip with more detailed information that wraps across multiple lines to provide comprehensive context to the user.",
565
+ "content]___[value:Opens immediately on hover",
566
+ "textStyle]___[value:displayLarge",
567
+ "textStyle]___[value:displayMedium",
568
+ "textStyle]___[value:displaySmall",
569
+ "textStyle]___[value:headlineLarge",
570
+ "textStyle]___[value:headlineMedium",
571
+ "textStyle]___[value:headlineSmall",
572
+ "textStyle]___[value:titleLarge",
573
+ "textStyle]___[value:titleSmall",
574
+ "textStyle]___[value:bodyLarge",
575
+ "textStyle]___[value:bodySmall",
576
+ "textStyle]___[value:labelLarge",
577
+ "textStyle]___[value:labelSmall",
578
+ "colorPalette]___[value:red"
579
+ ],
580
+ "recipes": {
581
+ "accordion": [
582
+ "size]___[value:md]___[recipe:accordion",
583
+ "variant]___[value:outline]___[recipe:accordion",
584
+ "variant]___[value:plain]___[recipe:accordion"
585
+ ],
586
+ "badge": [
587
+ "variant]___[value:subtle]___[recipe:badge",
588
+ "size]___[value:md]___[recipe:badge",
589
+ "variant]___[value:rating]___[recipe:badge",
590
+ "variant]___[value:solid]___[recipe:badge",
591
+ "variant]___[value:surface]___[recipe:badge",
592
+ "variant]___[value:outline]___[recipe:badge",
593
+ "size]___[value:sm]___[recipe:badge",
594
+ "size]___[value:lg]___[recipe:badge",
595
+ "size]___[value:xl]___[recipe:badge",
596
+ "size]___[value:2xl]___[recipe:badge",
597
+ "variant]___[value:plain]___[recipe:badge"
598
+ ],
599
+ "breadcrumb": [
600
+ "variant]___[value:plain]___[recipe:breadcrumb",
601
+ "size]___[value:md]___[recipe:breadcrumb",
602
+ "variant]___[value:discourser]___[recipe:breadcrumb",
603
+ "variant]___[value:underline]___[recipe:breadcrumb",
604
+ "size]___[value:xs]___[recipe:breadcrumb",
605
+ "size]___[value:sm]___[recipe:breadcrumb",
606
+ "size]___[value:lg]___[recipe:breadcrumb"
607
+ ],
608
+ "button": [
609
+ "variant]___[value:solid]___[recipe:button",
610
+ "size]___[value:md]___[recipe:button",
611
+ "variant]___[value:plain]___[recipe:button",
612
+ "size]___[value:sm]___[recipe:button",
613
+ "variant]___[value:outline]___[recipe:button",
614
+ "variant]___[value:elevated]___[recipe:button",
615
+ "variant]___[value:surface]___[recipe:button",
616
+ "variant]___[value:subtle]___[recipe:button",
617
+ "size]___[value:2xs]___[recipe:button",
618
+ "size]___[value:xs]___[recipe:button",
619
+ "size]___[value:lg]___[recipe:button",
620
+ "size]___[value:xl]___[recipe:button",
621
+ "size]___[value:2xl]___[recipe:button",
622
+ "variant]___[value:ghost]___[recipe:button"
623
+ ],
624
+ "group": [
625
+ "orientation]___[value:horizontal]___[recipe:group",
626
+ "attached]___[value:true]___[recipe:group",
627
+ "orientation]___[value:vertical]___[recipe:group",
628
+ "grow]___[value:true]___[recipe:group"
629
+ ],
630
+ "card": [
631
+ "variant]___[value:outline]___[recipe:card",
632
+ "variant]___[value:elevated]___[recipe:card",
633
+ "variant]___[value:subtle]___[recipe:card"
634
+ ],
635
+ "input": [
636
+ "size]___[value:md]___[recipe:input",
637
+ "variant]___[value:outline]___[recipe:input",
638
+ "size]___[value:xs]___[recipe:input",
639
+ "size]___[value:sm]___[recipe:input",
640
+ "size]___[value:lg]___[recipe:input",
641
+ "size]___[value:xl]___[recipe:input",
642
+ "variant]___[value:surface]___[recipe:input",
643
+ "variant]___[value:subtle]___[recipe:input",
644
+ "variant]___[value:flushed]___[recipe:input",
645
+ "size]___[value:2xs]___[recipe:input",
646
+ "size]___[value:2xl]___[recipe:input"
647
+ ],
648
+ "spinner": [
649
+ "size]___[value:inherit]___[recipe:spinner",
650
+ "size]___[value:md]___[recipe:spinner",
651
+ "size]___[value:xs]___[recipe:spinner",
652
+ "size]___[value:sm]___[recipe:spinner",
653
+ "size]___[value:lg]___[recipe:spinner",
654
+ "size]___[value:xl]___[recipe:spinner",
655
+ "size]___[value:2xl]___[recipe:spinner"
656
+ ],
657
+ "absoluteCenter": [
658
+ "axis]___[value:both]___[recipe:absoluteCenter",
659
+ "axis]___[value:horizontal]___[recipe:absoluteCenter",
660
+ "axis]___[value:vertical]___[recipe:absoluteCenter"
661
+ ],
662
+ "radioGroup": [
663
+ "variant]___[value:solid]___[recipe:radioGroup",
664
+ "size]___[value:md]___[recipe:radioGroup",
665
+ "orientation]___[value:vertical]___[recipe:radioGroup",
666
+ "orientation]___[value:horizontal]___[recipe:radioGroup",
667
+ "size]___[value:sm]___[recipe:radioGroup",
668
+ "size]___[value:lg]___[recipe:radioGroup"
669
+ ],
670
+ "skeleton": [
671
+ "variant]___[value:pulse]___[recipe:skeleton",
672
+ "loading]___[value:true]___[recipe:skeleton",
673
+ "circle]___[value:true]___[recipe:skeleton",
674
+ "loading]___[value:false]___[recipe:skeleton",
675
+ "variant]___[value:shine]___[recipe:skeleton",
676
+ "variant]___[value:none]___[recipe:skeleton"
677
+ ],
678
+ "slider": [
679
+ "size]___[value:md]___[recipe:slider",
680
+ "variant]___[value:outline]___[recipe:slider",
681
+ "orientation]___[value:horizontal]___[recipe:slider",
682
+ "size]___[value:sm]___[recipe:slider",
683
+ "size]___[value:lg]___[recipe:slider",
684
+ "orientation]___[value:vertical]___[recipe:slider"
685
+ ],
686
+ "switchComponent": [
687
+ "variant]___[value:solid]___[recipe:switchComponent",
688
+ "size]___[value:md]___[recipe:switchComponent",
689
+ "size]___[value:sm]___[recipe:switchComponent",
690
+ "size]___[value:lg]___[recipe:switchComponent",
691
+ "size]___[value:xs]___[recipe:switchComponent"
692
+ ],
693
+ "contentCard": [
694
+ "size]___[value:md]___[recipe:contentCard",
695
+ "variant]___[value:outline]___[recipe:contentCard",
696
+ "variant]___[value:elevated]___[recipe:contentCard",
697
+ "variant]___[value:flat]___[recipe:contentCard",
698
+ "size]___[value:sm]___[recipe:contentCard",
699
+ "size]___[value:lg]___[recipe:contentCard"
700
+ ],
701
+ "navigationMenu": [],
702
+ "dialog": [
703
+ "size]___[value:md]___[recipe:dialog",
704
+ "scrollBehavior]___[value:outside]___[recipe:dialog",
705
+ "placement]___[value:center]___[recipe:dialog",
706
+ "size]___[value:sm]___[recipe:dialog",
707
+ "size]___[value:lg]___[recipe:dialog",
708
+ "placement]___[value:top]___[recipe:dialog",
709
+ "placement]___[value:bottom]___[recipe:dialog",
710
+ "size]___[value:xs]___[recipe:dialog",
711
+ "size]___[value:xl]___[recipe:dialog",
712
+ "size]___[value:full]___[recipe:dialog",
713
+ "scrollBehavior]___[value:inside]___[recipe:dialog"
714
+ ],
715
+ "scenarioCard": [
716
+ "isActive]___[value:false]___[recipe:scenarioCard",
717
+ "isDragging]___[value:false]___[recipe:scenarioCard",
718
+ "isActive]___[value:true]___[recipe:scenarioCard",
719
+ "isDragging]___[value:true]___[recipe:scenarioCard"
720
+ ],
721
+ "scenarioQueue": [],
722
+ "tabs": [
723
+ "size]___[value:md]___[recipe:tabs",
724
+ "variant]___[value:line]___[recipe:tabs",
725
+ "variant]___[value:enclosed]___[recipe:tabs",
726
+ "variant]___[value:outline]___[recipe:tabs",
727
+ "size]___[value:sm]___[recipe:tabs",
728
+ "size]___[value:lg]___[recipe:tabs",
729
+ "size]___[value:xs]___[recipe:tabs",
730
+ "variant]___[value:subtle]___[recipe:tabs",
731
+ "fitted]___[value:true]___[recipe:tabs"
732
+ ],
733
+ "scenarioSettings": [],
734
+ "popover": [],
735
+ "avatar": [
736
+ "size]___[value:sm]___[recipe:avatar",
737
+ "shape]___[value:full]___[recipe:avatar",
738
+ "variant]___[value:subtle]___[recipe:avatar",
739
+ "size]___[value:md]___[recipe:avatar",
740
+ "size]___[value:xs]___[recipe:avatar",
741
+ "size]___[value:lg]___[recipe:avatar",
742
+ "size]___[value:xl]___[recipe:avatar",
743
+ "size]___[value:2xl]___[recipe:avatar",
744
+ "size]___[value:full]___[recipe:avatar",
745
+ "size]___[value:2xs]___[recipe:avatar",
746
+ "variant]___[value:solid]___[recipe:avatar",
747
+ "variant]___[value:surface]___[recipe:avatar",
748
+ "variant]___[value:outline]___[recipe:avatar",
749
+ "shape]___[value:square]___[recipe:avatar",
750
+ "shape]___[value:rounded]___[recipe:avatar"
751
+ ],
752
+ "stepper": [
753
+ "size]___[value:md]___[recipe:stepper",
754
+ "orientation]___[value:horizontal]___[recipe:stepper",
755
+ "colorPalette]___[value:primary]___[recipe:stepper",
756
+ "size]___[value:sm]___[recipe:stepper",
757
+ "size]___[value:lg]___[recipe:stepper",
758
+ "orientation]___[value:vertical]___[recipe:stepper",
759
+ "colorPalette]___[value:secondary]___[recipe:stepper",
760
+ "colorPalette]___[value:tertiary]___[recipe:stepper",
761
+ "colorPalette]___[value:error]___[recipe:stepper",
762
+ "colorPalette]___[value:neutral]___[recipe:stepper"
763
+ ],
764
+ "studioControls": [],
765
+ "checkbox": [
766
+ "variant]___[value:solid]___[recipe:checkbox",
767
+ "size]___[value:md]___[recipe:checkbox",
768
+ "size]___[value:sm]___[recipe:checkbox",
769
+ "size]___[value:lg]___[recipe:checkbox",
770
+ "variant]___[value:surface]___[recipe:checkbox",
771
+ "variant]___[value:subtle]___[recipe:checkbox",
772
+ "variant]___[value:outline]___[recipe:checkbox",
773
+ "variant]___[value:plain]___[recipe:checkbox"
774
+ ],
775
+ "inputGroup": [
776
+ "size]___[value:md]___[recipe:inputGroup",
777
+ "size]___[value:xs]___[recipe:inputGroup",
778
+ "size]___[value:sm]___[recipe:inputGroup",
779
+ "size]___[value:lg]___[recipe:inputGroup",
780
+ "size]___[value:xl]___[recipe:inputGroup"
781
+ ],
782
+ "inputAddon": [
783
+ "size]___[value:md]___[recipe:inputAddon",
784
+ "variant]___[value:outline]___[recipe:inputAddon",
785
+ "variant]___[value:surface]___[recipe:inputAddon",
786
+ "variant]___[value:subtle]___[recipe:inputAddon",
787
+ "size]___[value:xs]___[recipe:inputAddon",
788
+ "size]___[value:sm]___[recipe:inputAddon",
789
+ "size]___[value:lg]___[recipe:inputAddon",
790
+ "size]___[value:xl]___[recipe:inputAddon"
791
+ ],
792
+ "textarea": [
793
+ "size]___[value:md]___[recipe:textarea",
794
+ "variant]___[value:surface]___[recipe:textarea",
795
+ "size]___[value:xs]___[recipe:textarea",
796
+ "size]___[value:sm]___[recipe:textarea",
797
+ "size]___[value:lg]___[recipe:textarea",
798
+ "size]___[value:xl]___[recipe:textarea",
799
+ "variant]___[value:outline]___[recipe:textarea",
800
+ "variant]___[value:subtle]___[recipe:textarea",
801
+ "variant]___[value:flushed]___[recipe:textarea"
802
+ ],
803
+ "select": [
804
+ "size]___[value:md]___[recipe:select",
805
+ "variant]___[value:outline]___[recipe:select",
806
+ "size]___[value:sm]___[recipe:select",
807
+ "size]___[value:lg]___[recipe:select",
808
+ "variant]___[value:surface]___[recipe:select",
809
+ "size]___[value:xs]___[recipe:select",
810
+ "size]___[value:xl]___[recipe:select"
811
+ ],
812
+ "progress": [
813
+ "variant]___[value:solid]___[recipe:progress",
814
+ "size]___[value:md]___[recipe:progress",
815
+ "shape]___[value:rounded]___[recipe:progress",
816
+ "size]___[value:sm]___[recipe:progress",
817
+ "size]___[value:lg]___[recipe:progress",
818
+ "variant]___[value:subtle]___[recipe:progress",
819
+ "shape]___[value:square]___[recipe:progress",
820
+ "shape]___[value:full]___[recipe:progress",
821
+ "striped]___[value:true]___[recipe:progress",
822
+ "animated]___[value:true]___[recipe:progress",
823
+ "size]___[value:xs]___[recipe:progress",
824
+ "size]___[value:xl]___[recipe:progress"
825
+ ],
826
+ "drawer": [
827
+ "placement]___[value:end]___[recipe:drawer",
828
+ "size]___[value:sm]___[recipe:drawer",
829
+ "placement]___[value:start]___[recipe:drawer",
830
+ "placement]___[value:top]___[recipe:drawer",
831
+ "size]___[value:xs]___[recipe:drawer",
832
+ "size]___[value:md]___[recipe:drawer",
833
+ "size]___[value:lg]___[recipe:drawer",
834
+ "size]___[value:xl]___[recipe:drawer",
835
+ "size]___[value:full]___[recipe:drawer",
836
+ "placement]___[value:bottom]___[recipe:drawer"
837
+ ],
838
+ "heading": [
839
+ "size]___[value:xl]___[recipe:heading",
840
+ "size]___[value:xs]___[recipe:heading",
841
+ "size]___[value:sm]___[recipe:heading",
842
+ "size]___[value:md]___[recipe:heading",
843
+ "size]___[value:lg]___[recipe:heading",
844
+ "size]___[value:2xl]___[recipe:heading",
845
+ "size]___[value:3xl]___[recipe:heading",
846
+ "size]___[value:4xl]___[recipe:heading",
847
+ "size]___[value:5xl]___[recipe:heading",
848
+ "size]___[value:6xl]___[recipe:heading",
849
+ "size]___[value:7xl]___[recipe:heading"
850
+ ],
851
+ "field": [],
852
+ "toast": [],
853
+ "tooltip": []
854
+ }
855
+ }
856
+ }