@weasel-js/theme 1.5.1 → 1.5.2

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.
@@ -4,9 +4,9 @@ import { themeAxes, fullSelection, selectionKey, resolveTheme, isByAxis } from '
4
4
  var THEMES = {
5
5
  "weasel": {
6
6
  name: "weasel",
7
- axes: { "mode": { "default": "dark", "values": { "dark": { "scheme": "dark" }, "light": { "scheme": "light" } } } },
7
+ axes: { "mode": { "default": "dark", "values": { "dark": { "scheme": "dark" }, "light": { "scheme": "light" } } }, "density": { "default": "comfortable", "values": { "compact": {}, "comfortable": {}, "roomy": {} } } },
8
8
  selections: {
9
- "mode=dark": {
9
+ "mode=dark,density=compact": {
10
10
  "--wzl-gray-50": "#f5f5f6",
11
11
  "--wzl-gray-100": "#e6e7e9",
12
12
  "--wzl-gray-200": "#c9cbcf",
@@ -30,6 +30,20 @@ var THEMES = {
30
30
  "--wzl-swatch-citron": "#d5d23a",
31
31
  "--wzl-swatch-rose": "#fa4590",
32
32
  "--wzl-swatch-violet": "#955cf9",
33
+ "--wzl-font-size-2xs": "7px",
34
+ "--wzl-font-size-xs": "8px",
35
+ "--wzl-font-size-sm": "9px",
36
+ "--wzl-font-size-md": "11px",
37
+ "--wzl-font-size-lg": "14px",
38
+ "--wzl-font-size-xl": "17px",
39
+ "--wzl-space-1": "2px",
40
+ "--wzl-space-2": "4px",
41
+ "--wzl-space-3": "6px",
42
+ "--wzl-space-4": "8px",
43
+ "--wzl-space-5": "10px",
44
+ "--wzl-space-6": "12px",
45
+ "--wzl-space-7": "14px",
46
+ "--wzl-space-8": "16px",
33
47
  "--wzl-surface": "#181a1e",
34
48
  "--wzl-surface-raised": "#25272c",
35
49
  "--wzl-surface-sunken": "#0e0f12",
@@ -65,8 +79,479 @@ var THEMES = {
65
79
  "--wzl-border-w": "1px",
66
80
  "--wzl-line-width": "2px",
67
81
  "--wzl-curve-width": "3px",
82
+ "--wzl-tb-height": "24px",
83
+ "--wzl-control-h-xs": "16px",
84
+ "--wzl-control-h-sm": "18px",
85
+ "--wzl-control-h": "20px",
86
+ "--wzl-icon-button-size": "20px",
87
+ "--wzl-slider-track-h": "4px",
88
+ "--wzl-slider-thumb-size": "8px",
89
+ "--wzl-slider-track-mix": "18%",
90
+ "--wzl-slider-thumb-mix": "70%",
91
+ "--wzl-handle-size": "9px",
92
+ "--wzl-handle-size-sm": "7px",
93
+ "--wzl-handle-size-lg": "10px",
94
+ "--wzl-field-pad-x": "8px",
95
+ "--wzl-glass-blur": "3px",
96
+ "--wzl-font-size": "11px",
97
+ "--wzl-tracking-none": "0",
98
+ "--wzl-tracking-wide": "0.06em",
99
+ "--wzl-tracking-wider": "0.08em",
100
+ "--wzl-z-toolbar": "10",
101
+ "--wzl-z-overlay": "20",
102
+ "--wzl-z-modal": "30",
103
+ "--wzl-leading-tight": "1",
104
+ "--wzl-leading-snug": "1.2",
105
+ "--wzl-leading": "1.4",
106
+ "--wzl-backdrop": "none",
107
+ "--wzl-motion-fast": "120ms",
108
+ "--wzl-motion-medium": "240ms",
109
+ "--wzl-ease-in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
110
+ "--wzl-ease-out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
111
+ "--wzl-ease-in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
112
+ "--wzl-ease-out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
113
+ "--wzl-font-ui": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
114
+ "--wzl-font-display": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
115
+ "--wzl-font-body": "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
116
+ "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
117
+ "--wzl-font-weight-light": "200",
118
+ "--wzl-font-weight-normal": "300",
119
+ "--wzl-font-weight-medium": "350",
120
+ "--wzl-font-weight-bold": "400",
121
+ "--wzl-space-xs": "4px",
122
+ "--wzl-space-sm": "8px",
123
+ "--wzl-space-md": "12px",
124
+ "--wzl-space-lg": "16px"
125
+ },
126
+ "mode=dark,density=comfortable": {
127
+ "--wzl-gray-50": "#f5f5f6",
128
+ "--wzl-gray-100": "#e6e7e9",
129
+ "--wzl-gray-200": "#c9cbcf",
130
+ "--wzl-gray-300": "#9ea1a8",
131
+ "--wzl-gray-400": "#6f737b",
132
+ "--wzl-gray-500": "#4d5058",
133
+ "--wzl-gray-600": "#383b42",
134
+ "--wzl-gray-700": "#25272c",
135
+ "--wzl-gray-800": "#181a1e",
136
+ "--wzl-gray-900": "#0e0f12",
137
+ "--wzl-accent-soft": "#1d1454",
138
+ "--wzl-accent-base": "#2e1f7a",
139
+ "--wzl-accent-strong": "#5841b8",
140
+ "--wzl-swatch-fuchsia": "#f641f7",
141
+ "--wzl-swatch-green": "#48e628",
142
+ "--wzl-swatch-sky": "#36bff2",
143
+ "--wzl-swatch-amber": "#e69628",
144
+ "--wzl-swatch-teal": "#3ee1cb",
145
+ "--wzl-swatch-red": "#f75034",
146
+ "--wzl-swatch-blue": "#407ef7",
147
+ "--wzl-swatch-citron": "#d5d23a",
148
+ "--wzl-swatch-rose": "#fa4590",
149
+ "--wzl-swatch-violet": "#955cf9",
150
+ "--wzl-font-size-2xs": "9px",
151
+ "--wzl-font-size-xs": "10px",
152
+ "--wzl-font-size-sm": "11px",
153
+ "--wzl-font-size-md": "13px",
154
+ "--wzl-font-size-lg": "16px",
155
+ "--wzl-font-size-xl": "20px",
156
+ "--wzl-space-1": "2px",
157
+ "--wzl-space-2": "4px",
158
+ "--wzl-space-3": "6px",
159
+ "--wzl-space-4": "8px",
160
+ "--wzl-space-5": "10px",
161
+ "--wzl-space-6": "12px",
162
+ "--wzl-space-7": "14px",
163
+ "--wzl-space-8": "16px",
164
+ "--wzl-surface": "#181a1e",
165
+ "--wzl-surface-raised": "#25272c",
166
+ "--wzl-surface-sunken": "#0e0f12",
167
+ "--wzl-fg": "#e6e7e9",
168
+ "--wzl-fg-muted": "#9ea1a8",
169
+ "--wzl-fg-subtle": "#6f737b",
170
+ "--wzl-border": "#25272c",
171
+ "--wzl-border-strong": "#6f737b",
172
+ "--wzl-accent-fg": "#5841b8",
173
+ "--wzl-fg-inverse": "#0e0f12",
174
+ "--wzl-shadow": "rgba(0, 0, 0, 0.6)",
175
+ "--wzl-danger-base": "#d94a3f",
176
+ "--wzl-warning-base": "#d99a3f",
177
+ "--wzl-success-base": "#2ec27e",
178
+ "--wzl-fg-on-accent": "#f5f5f6",
179
+ "--wzl-line-subtle": "rgba(230, 231, 233, 0.1)",
180
+ "--wzl-line": "rgba(230, 231, 233, 0.2)",
181
+ "--wzl-line-strong": "rgba(230, 231, 233, 0.4)",
182
+ "--wzl-curve-color": "#5841b8",
183
+ "--wzl-accent": "#2e1f7a",
184
+ "--wzl-accent-hover": "#5841b8",
185
+ "--wzl-danger": "#d94a3f",
186
+ "--wzl-warning": "#d99a3f",
187
+ "--wzl-success": "#2ec27e",
188
+ "--wzl-focus-ring": "#5841b8",
189
+ "--wzl-glass-tint": "#2e1f7a",
190
+ "--wzl-surface-hover": "rgba(230, 231, 233, 0.1)",
191
+ "--wzl-surface-pressed": "rgba(230, 231, 233, 0.18)",
192
+ "--wzl-radius-sm": "3px",
193
+ "--wzl-radius-md": "5px",
194
+ "--wzl-radius-lg": "14px",
195
+ "--wzl-radius-pill": "999px",
196
+ "--wzl-border-w": "1px",
197
+ "--wzl-line-width": "2px",
198
+ "--wzl-curve-width": "3px",
199
+ "--wzl-tb-height": "28px",
200
+ "--wzl-control-h-xs": "18px",
201
+ "--wzl-control-h-sm": "20px",
202
+ "--wzl-control-h": "24px",
203
+ "--wzl-icon-button-size": "22px",
204
+ "--wzl-slider-track-h": "4px",
205
+ "--wzl-slider-thumb-size": "8px",
206
+ "--wzl-slider-track-mix": "18%",
207
+ "--wzl-slider-thumb-mix": "70%",
208
+ "--wzl-handle-size": "9px",
209
+ "--wzl-handle-size-sm": "7px",
210
+ "--wzl-handle-size-lg": "10px",
211
+ "--wzl-field-pad-x": "8px",
212
+ "--wzl-glass-blur": "3px",
213
+ "--wzl-font-size": "13px",
214
+ "--wzl-tracking-none": "0",
215
+ "--wzl-tracking-wide": "0.06em",
216
+ "--wzl-tracking-wider": "0.08em",
217
+ "--wzl-z-toolbar": "10",
218
+ "--wzl-z-overlay": "20",
219
+ "--wzl-z-modal": "30",
220
+ "--wzl-leading-tight": "1",
221
+ "--wzl-leading-snug": "1.2",
222
+ "--wzl-leading": "1.4",
223
+ "--wzl-backdrop": "none",
224
+ "--wzl-motion-fast": "120ms",
225
+ "--wzl-motion-medium": "240ms",
226
+ "--wzl-ease-in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
227
+ "--wzl-ease-out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
228
+ "--wzl-ease-in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
229
+ "--wzl-ease-out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
230
+ "--wzl-font-ui": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
231
+ "--wzl-font-display": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
232
+ "--wzl-font-body": "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
233
+ "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
234
+ "--wzl-font-weight-light": "200",
235
+ "--wzl-font-weight-normal": "300",
236
+ "--wzl-font-weight-medium": "350",
237
+ "--wzl-font-weight-bold": "400",
238
+ "--wzl-space-xs": "4px",
239
+ "--wzl-space-sm": "8px",
240
+ "--wzl-space-md": "12px",
241
+ "--wzl-space-lg": "16px"
242
+ },
243
+ "mode=dark,density=roomy": {
244
+ "--wzl-gray-50": "#f5f5f6",
245
+ "--wzl-gray-100": "#e6e7e9",
246
+ "--wzl-gray-200": "#c9cbcf",
247
+ "--wzl-gray-300": "#9ea1a8",
248
+ "--wzl-gray-400": "#6f737b",
249
+ "--wzl-gray-500": "#4d5058",
250
+ "--wzl-gray-600": "#383b42",
251
+ "--wzl-gray-700": "#25272c",
252
+ "--wzl-gray-800": "#181a1e",
253
+ "--wzl-gray-900": "#0e0f12",
254
+ "--wzl-accent-soft": "#1d1454",
255
+ "--wzl-accent-base": "#2e1f7a",
256
+ "--wzl-accent-strong": "#5841b8",
257
+ "--wzl-swatch-fuchsia": "#f641f7",
258
+ "--wzl-swatch-green": "#48e628",
259
+ "--wzl-swatch-sky": "#36bff2",
260
+ "--wzl-swatch-amber": "#e69628",
261
+ "--wzl-swatch-teal": "#3ee1cb",
262
+ "--wzl-swatch-red": "#f75034",
263
+ "--wzl-swatch-blue": "#407ef7",
264
+ "--wzl-swatch-citron": "#d5d23a",
265
+ "--wzl-swatch-rose": "#fa4590",
266
+ "--wzl-swatch-violet": "#955cf9",
267
+ "--wzl-font-size-2xs": "10px",
268
+ "--wzl-font-size-xs": "12px",
269
+ "--wzl-font-size-sm": "13px",
270
+ "--wzl-font-size-md": "15px",
271
+ "--wzl-font-size-lg": "18px",
272
+ "--wzl-font-size-xl": "23px",
273
+ "--wzl-space-1": "2px",
274
+ "--wzl-space-2": "4px",
275
+ "--wzl-space-3": "6px",
276
+ "--wzl-space-4": "8px",
277
+ "--wzl-space-5": "10px",
278
+ "--wzl-space-6": "12px",
279
+ "--wzl-space-7": "14px",
280
+ "--wzl-space-8": "16px",
281
+ "--wzl-surface": "#181a1e",
282
+ "--wzl-surface-raised": "#25272c",
283
+ "--wzl-surface-sunken": "#0e0f12",
284
+ "--wzl-fg": "#e6e7e9",
285
+ "--wzl-fg-muted": "#9ea1a8",
286
+ "--wzl-fg-subtle": "#6f737b",
287
+ "--wzl-border": "#25272c",
288
+ "--wzl-border-strong": "#6f737b",
289
+ "--wzl-accent-fg": "#5841b8",
290
+ "--wzl-fg-inverse": "#0e0f12",
291
+ "--wzl-shadow": "rgba(0, 0, 0, 0.6)",
292
+ "--wzl-danger-base": "#d94a3f",
293
+ "--wzl-warning-base": "#d99a3f",
294
+ "--wzl-success-base": "#2ec27e",
295
+ "--wzl-fg-on-accent": "#f5f5f6",
296
+ "--wzl-line-subtle": "rgba(230, 231, 233, 0.1)",
297
+ "--wzl-line": "rgba(230, 231, 233, 0.2)",
298
+ "--wzl-line-strong": "rgba(230, 231, 233, 0.4)",
299
+ "--wzl-curve-color": "#5841b8",
300
+ "--wzl-accent": "#2e1f7a",
301
+ "--wzl-accent-hover": "#5841b8",
302
+ "--wzl-danger": "#d94a3f",
303
+ "--wzl-warning": "#d99a3f",
304
+ "--wzl-success": "#2ec27e",
305
+ "--wzl-focus-ring": "#5841b8",
306
+ "--wzl-glass-tint": "#2e1f7a",
307
+ "--wzl-surface-hover": "rgba(230, 231, 233, 0.1)",
308
+ "--wzl-surface-pressed": "rgba(230, 231, 233, 0.18)",
309
+ "--wzl-radius-sm": "3px",
310
+ "--wzl-radius-md": "5px",
311
+ "--wzl-radius-lg": "14px",
312
+ "--wzl-radius-pill": "999px",
313
+ "--wzl-border-w": "1px",
314
+ "--wzl-line-width": "2px",
315
+ "--wzl-curve-width": "3px",
316
+ "--wzl-tb-height": "32px",
317
+ "--wzl-control-h-xs": "22px",
318
+ "--wzl-control-h-sm": "24px",
319
+ "--wzl-control-h": "28px",
320
+ "--wzl-icon-button-size": "26px",
321
+ "--wzl-slider-track-h": "4px",
322
+ "--wzl-slider-thumb-size": "8px",
323
+ "--wzl-slider-track-mix": "18%",
324
+ "--wzl-slider-thumb-mix": "70%",
325
+ "--wzl-handle-size": "9px",
326
+ "--wzl-handle-size-sm": "7px",
327
+ "--wzl-handle-size-lg": "10px",
328
+ "--wzl-field-pad-x": "8px",
329
+ "--wzl-glass-blur": "3px",
330
+ "--wzl-font-size": "15px",
331
+ "--wzl-tracking-none": "0",
332
+ "--wzl-tracking-wide": "0.06em",
333
+ "--wzl-tracking-wider": "0.08em",
334
+ "--wzl-z-toolbar": "10",
335
+ "--wzl-z-overlay": "20",
336
+ "--wzl-z-modal": "30",
337
+ "--wzl-leading-tight": "1",
338
+ "--wzl-leading-snug": "1.2",
339
+ "--wzl-leading": "1.4",
340
+ "--wzl-backdrop": "none",
341
+ "--wzl-motion-fast": "120ms",
342
+ "--wzl-motion-medium": "240ms",
343
+ "--wzl-ease-in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
344
+ "--wzl-ease-out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
345
+ "--wzl-ease-in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
346
+ "--wzl-ease-out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
347
+ "--wzl-font-ui": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
348
+ "--wzl-font-display": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
349
+ "--wzl-font-body": "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
350
+ "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
351
+ "--wzl-font-weight-light": "200",
352
+ "--wzl-font-weight-normal": "300",
353
+ "--wzl-font-weight-medium": "350",
354
+ "--wzl-font-weight-bold": "400",
355
+ "--wzl-space-xs": "4px",
356
+ "--wzl-space-sm": "8px",
357
+ "--wzl-space-md": "12px",
358
+ "--wzl-space-lg": "16px"
359
+ },
360
+ "mode=light,density=compact": {
361
+ "--wzl-gray-50": "#f5f5f6",
362
+ "--wzl-gray-100": "#e6e7e9",
363
+ "--wzl-gray-200": "#c9cbcf",
364
+ "--wzl-gray-300": "#9ea1a8",
365
+ "--wzl-gray-400": "#6f737b",
366
+ "--wzl-gray-500": "#4d5058",
367
+ "--wzl-gray-600": "#383b42",
368
+ "--wzl-gray-700": "#25272c",
369
+ "--wzl-gray-800": "#181a1e",
370
+ "--wzl-gray-900": "#0e0f12",
371
+ "--wzl-accent-soft": "#1d1454",
372
+ "--wzl-accent-base": "#2e1f7a",
373
+ "--wzl-accent-strong": "#5841b8",
374
+ "--wzl-swatch-fuchsia": "#f641f7",
375
+ "--wzl-swatch-green": "#48e628",
376
+ "--wzl-swatch-sky": "#36bff2",
377
+ "--wzl-swatch-amber": "#e69628",
378
+ "--wzl-swatch-teal": "#3ee1cb",
379
+ "--wzl-swatch-red": "#f75034",
380
+ "--wzl-swatch-blue": "#407ef7",
381
+ "--wzl-swatch-citron": "#d5d23a",
382
+ "--wzl-swatch-rose": "#fa4590",
383
+ "--wzl-swatch-violet": "#955cf9",
384
+ "--wzl-font-size-2xs": "7px",
385
+ "--wzl-font-size-xs": "8px",
386
+ "--wzl-font-size-sm": "9px",
387
+ "--wzl-font-size-md": "11px",
388
+ "--wzl-font-size-lg": "14px",
389
+ "--wzl-font-size-xl": "17px",
390
+ "--wzl-space-1": "2px",
391
+ "--wzl-space-2": "4px",
392
+ "--wzl-space-3": "6px",
393
+ "--wzl-space-4": "8px",
394
+ "--wzl-space-5": "10px",
395
+ "--wzl-space-6": "12px",
396
+ "--wzl-space-7": "14px",
397
+ "--wzl-space-8": "16px",
398
+ "--wzl-surface": "#f5f5f6",
399
+ "--wzl-surface-raised": "#e6e7e9",
400
+ "--wzl-surface-sunken": "#c9cbcf",
401
+ "--wzl-fg": "#0e0f12",
402
+ "--wzl-fg-muted": "#383b42",
403
+ "--wzl-fg-subtle": "#4d5058",
404
+ "--wzl-border": "#c9cbcf",
405
+ "--wzl-border-strong": "#4d5058",
406
+ "--wzl-accent-fg": "#2e1f7a",
407
+ "--wzl-fg-inverse": "#f5f5f6",
408
+ "--wzl-shadow": "rgba(0, 0, 0, 0.18)",
409
+ "--wzl-danger-base": "#d94a3f",
410
+ "--wzl-warning-base": "#d99a3f",
411
+ "--wzl-success-base": "#2ec27e",
412
+ "--wzl-fg-on-accent": "#f5f5f6",
413
+ "--wzl-line-subtle": "rgba(14, 15, 18, 0.1)",
414
+ "--wzl-line": "rgba(14, 15, 18, 0.2)",
415
+ "--wzl-line-strong": "rgba(14, 15, 18, 0.4)",
416
+ "--wzl-curve-color": "#5841b8",
417
+ "--wzl-accent": "#2e1f7a",
418
+ "--wzl-accent-hover": "#5841b8",
419
+ "--wzl-danger": "#d94a3f",
420
+ "--wzl-warning": "#d99a3f",
421
+ "--wzl-success": "#2ec27e",
422
+ "--wzl-focus-ring": "#5841b8",
423
+ "--wzl-glass-tint": "#2e1f7a",
424
+ "--wzl-surface-hover": "rgba(14, 15, 18, 0.1)",
425
+ "--wzl-surface-pressed": "rgba(14, 15, 18, 0.18)",
426
+ "--wzl-radius-sm": "3px",
427
+ "--wzl-radius-md": "5px",
428
+ "--wzl-radius-lg": "14px",
429
+ "--wzl-radius-pill": "999px",
430
+ "--wzl-border-w": "1px",
431
+ "--wzl-line-width": "2px",
432
+ "--wzl-curve-width": "3px",
433
+ "--wzl-tb-height": "24px",
434
+ "--wzl-control-h-xs": "16px",
435
+ "--wzl-control-h-sm": "18px",
436
+ "--wzl-control-h": "20px",
437
+ "--wzl-icon-button-size": "20px",
438
+ "--wzl-slider-track-h": "4px",
439
+ "--wzl-slider-thumb-size": "8px",
440
+ "--wzl-slider-track-mix": "18%",
441
+ "--wzl-slider-thumb-mix": "70%",
442
+ "--wzl-handle-size": "9px",
443
+ "--wzl-handle-size-sm": "7px",
444
+ "--wzl-handle-size-lg": "10px",
445
+ "--wzl-field-pad-x": "8px",
446
+ "--wzl-glass-blur": "3px",
447
+ "--wzl-font-size": "11px",
448
+ "--wzl-tracking-none": "0",
449
+ "--wzl-tracking-wide": "0.06em",
450
+ "--wzl-tracking-wider": "0.08em",
451
+ "--wzl-z-toolbar": "10",
452
+ "--wzl-z-overlay": "20",
453
+ "--wzl-z-modal": "30",
454
+ "--wzl-leading-tight": "1",
455
+ "--wzl-leading-snug": "1.2",
456
+ "--wzl-leading": "1.4",
457
+ "--wzl-backdrop": "none",
458
+ "--wzl-motion-fast": "120ms",
459
+ "--wzl-motion-medium": "240ms",
460
+ "--wzl-ease-in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
461
+ "--wzl-ease-out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
462
+ "--wzl-ease-in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
463
+ "--wzl-ease-out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
464
+ "--wzl-font-ui": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
465
+ "--wzl-font-display": "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
466
+ "--wzl-font-body": "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
467
+ "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
468
+ "--wzl-font-weight-light": "200",
469
+ "--wzl-font-weight-normal": "300",
470
+ "--wzl-font-weight-medium": "350",
471
+ "--wzl-font-weight-bold": "400",
472
+ "--wzl-space-xs": "4px",
473
+ "--wzl-space-sm": "8px",
474
+ "--wzl-space-md": "12px",
475
+ "--wzl-space-lg": "16px"
476
+ },
477
+ "mode=light,density=comfortable": {
478
+ "--wzl-gray-50": "#f5f5f6",
479
+ "--wzl-gray-100": "#e6e7e9",
480
+ "--wzl-gray-200": "#c9cbcf",
481
+ "--wzl-gray-300": "#9ea1a8",
482
+ "--wzl-gray-400": "#6f737b",
483
+ "--wzl-gray-500": "#4d5058",
484
+ "--wzl-gray-600": "#383b42",
485
+ "--wzl-gray-700": "#25272c",
486
+ "--wzl-gray-800": "#181a1e",
487
+ "--wzl-gray-900": "#0e0f12",
488
+ "--wzl-accent-soft": "#1d1454",
489
+ "--wzl-accent-base": "#2e1f7a",
490
+ "--wzl-accent-strong": "#5841b8",
491
+ "--wzl-swatch-fuchsia": "#f641f7",
492
+ "--wzl-swatch-green": "#48e628",
493
+ "--wzl-swatch-sky": "#36bff2",
494
+ "--wzl-swatch-amber": "#e69628",
495
+ "--wzl-swatch-teal": "#3ee1cb",
496
+ "--wzl-swatch-red": "#f75034",
497
+ "--wzl-swatch-blue": "#407ef7",
498
+ "--wzl-swatch-citron": "#d5d23a",
499
+ "--wzl-swatch-rose": "#fa4590",
500
+ "--wzl-swatch-violet": "#955cf9",
501
+ "--wzl-font-size-2xs": "9px",
502
+ "--wzl-font-size-xs": "10px",
503
+ "--wzl-font-size-sm": "11px",
504
+ "--wzl-font-size-md": "13px",
505
+ "--wzl-font-size-lg": "16px",
506
+ "--wzl-font-size-xl": "20px",
507
+ "--wzl-space-1": "2px",
508
+ "--wzl-space-2": "4px",
509
+ "--wzl-space-3": "6px",
510
+ "--wzl-space-4": "8px",
511
+ "--wzl-space-5": "10px",
512
+ "--wzl-space-6": "12px",
513
+ "--wzl-space-7": "14px",
514
+ "--wzl-space-8": "16px",
515
+ "--wzl-surface": "#f5f5f6",
516
+ "--wzl-surface-raised": "#e6e7e9",
517
+ "--wzl-surface-sunken": "#c9cbcf",
518
+ "--wzl-fg": "#0e0f12",
519
+ "--wzl-fg-muted": "#383b42",
520
+ "--wzl-fg-subtle": "#4d5058",
521
+ "--wzl-border": "#c9cbcf",
522
+ "--wzl-border-strong": "#4d5058",
523
+ "--wzl-accent-fg": "#2e1f7a",
524
+ "--wzl-fg-inverse": "#f5f5f6",
525
+ "--wzl-shadow": "rgba(0, 0, 0, 0.18)",
526
+ "--wzl-danger-base": "#d94a3f",
527
+ "--wzl-warning-base": "#d99a3f",
528
+ "--wzl-success-base": "#2ec27e",
529
+ "--wzl-fg-on-accent": "#f5f5f6",
530
+ "--wzl-line-subtle": "rgba(14, 15, 18, 0.1)",
531
+ "--wzl-line": "rgba(14, 15, 18, 0.2)",
532
+ "--wzl-line-strong": "rgba(14, 15, 18, 0.4)",
533
+ "--wzl-curve-color": "#5841b8",
534
+ "--wzl-accent": "#2e1f7a",
535
+ "--wzl-accent-hover": "#5841b8",
536
+ "--wzl-danger": "#d94a3f",
537
+ "--wzl-warning": "#d99a3f",
538
+ "--wzl-success": "#2ec27e",
539
+ "--wzl-focus-ring": "#5841b8",
540
+ "--wzl-glass-tint": "#2e1f7a",
541
+ "--wzl-surface-hover": "rgba(14, 15, 18, 0.1)",
542
+ "--wzl-surface-pressed": "rgba(14, 15, 18, 0.18)",
543
+ "--wzl-radius-sm": "3px",
544
+ "--wzl-radius-md": "5px",
545
+ "--wzl-radius-lg": "14px",
546
+ "--wzl-radius-pill": "999px",
547
+ "--wzl-border-w": "1px",
548
+ "--wzl-line-width": "2px",
549
+ "--wzl-curve-width": "3px",
68
550
  "--wzl-tb-height": "28px",
551
+ "--wzl-control-h-xs": "18px",
552
+ "--wzl-control-h-sm": "20px",
69
553
  "--wzl-control-h": "24px",
554
+ "--wzl-icon-button-size": "22px",
70
555
  "--wzl-slider-track-h": "4px",
71
556
  "--wzl-slider-thumb-size": "8px",
72
557
  "--wzl-slider-track-mix": "18%",
@@ -76,16 +561,7 @@ var THEMES = {
76
561
  "--wzl-handle-size-lg": "10px",
77
562
  "--wzl-field-pad-x": "8px",
78
563
  "--wzl-glass-blur": "3px",
79
- "--wzl-font-size-2xs": "9px",
80
- "--wzl-font-size-xs": "10px",
81
- "--wzl-font-size-sm": "11px",
82
564
  "--wzl-font-size": "13px",
83
- "--wzl-font-size-lg": "16px",
84
- "--wzl-font-size-xl": "20px",
85
- "--wzl-space-xs": "4px",
86
- "--wzl-space-sm": "8px",
87
- "--wzl-space-md": "12px",
88
- "--wzl-space-lg": "16px",
89
565
  "--wzl-tracking-none": "0",
90
566
  "--wzl-tracking-wide": "0.06em",
91
567
  "--wzl-tracking-wider": "0.08em",
@@ -109,9 +585,13 @@ var THEMES = {
109
585
  "--wzl-font-weight-light": "200",
110
586
  "--wzl-font-weight-normal": "300",
111
587
  "--wzl-font-weight-medium": "350",
112
- "--wzl-font-weight-bold": "400"
588
+ "--wzl-font-weight-bold": "400",
589
+ "--wzl-space-xs": "4px",
590
+ "--wzl-space-sm": "8px",
591
+ "--wzl-space-md": "12px",
592
+ "--wzl-space-lg": "16px"
113
593
  },
114
- "mode=light": {
594
+ "mode=light,density=roomy": {
115
595
  "--wzl-gray-50": "#f5f5f6",
116
596
  "--wzl-gray-100": "#e6e7e9",
117
597
  "--wzl-gray-200": "#c9cbcf",
@@ -135,6 +615,20 @@ var THEMES = {
135
615
  "--wzl-swatch-citron": "#d5d23a",
136
616
  "--wzl-swatch-rose": "#fa4590",
137
617
  "--wzl-swatch-violet": "#955cf9",
618
+ "--wzl-font-size-2xs": "10px",
619
+ "--wzl-font-size-xs": "12px",
620
+ "--wzl-font-size-sm": "13px",
621
+ "--wzl-font-size-md": "15px",
622
+ "--wzl-font-size-lg": "18px",
623
+ "--wzl-font-size-xl": "23px",
624
+ "--wzl-space-1": "2px",
625
+ "--wzl-space-2": "4px",
626
+ "--wzl-space-3": "6px",
627
+ "--wzl-space-4": "8px",
628
+ "--wzl-space-5": "10px",
629
+ "--wzl-space-6": "12px",
630
+ "--wzl-space-7": "14px",
631
+ "--wzl-space-8": "16px",
138
632
  "--wzl-surface": "#f5f5f6",
139
633
  "--wzl-surface-raised": "#e6e7e9",
140
634
  "--wzl-surface-sunken": "#c9cbcf",
@@ -170,8 +664,11 @@ var THEMES = {
170
664
  "--wzl-border-w": "1px",
171
665
  "--wzl-line-width": "2px",
172
666
  "--wzl-curve-width": "3px",
173
- "--wzl-tb-height": "28px",
174
- "--wzl-control-h": "24px",
667
+ "--wzl-tb-height": "32px",
668
+ "--wzl-control-h-xs": "22px",
669
+ "--wzl-control-h-sm": "24px",
670
+ "--wzl-control-h": "28px",
671
+ "--wzl-icon-button-size": "26px",
175
672
  "--wzl-slider-track-h": "4px",
176
673
  "--wzl-slider-thumb-size": "8px",
177
674
  "--wzl-slider-track-mix": "18%",
@@ -181,16 +678,7 @@ var THEMES = {
181
678
  "--wzl-handle-size-lg": "10px",
182
679
  "--wzl-field-pad-x": "8px",
183
680
  "--wzl-glass-blur": "3px",
184
- "--wzl-font-size-2xs": "9px",
185
- "--wzl-font-size-xs": "10px",
186
- "--wzl-font-size-sm": "11px",
187
- "--wzl-font-size": "13px",
188
- "--wzl-font-size-lg": "16px",
189
- "--wzl-font-size-xl": "20px",
190
- "--wzl-space-xs": "4px",
191
- "--wzl-space-sm": "8px",
192
- "--wzl-space-md": "12px",
193
- "--wzl-space-lg": "16px",
681
+ "--wzl-font-size": "15px",
194
682
  "--wzl-tracking-none": "0",
195
683
  "--wzl-tracking-wide": "0.06em",
196
684
  "--wzl-tracking-wider": "0.08em",
@@ -214,7 +702,11 @@ var THEMES = {
214
702
  "--wzl-font-weight-light": "200",
215
703
  "--wzl-font-weight-normal": "300",
216
704
  "--wzl-font-weight-medium": "350",
217
- "--wzl-font-weight-bold": "400"
705
+ "--wzl-font-weight-bold": "400",
706
+ "--wzl-space-xs": "4px",
707
+ "--wzl-space-sm": "8px",
708
+ "--wzl-space-md": "12px",
709
+ "--wzl-space-lg": "16px"
218
710
  }
219
711
  }
220
712
  }
@@ -233,6 +725,22 @@ var THEME_SOURCES = {
233
725
  "scheme": "light"
234
726
  }
235
727
  }
728
+ },
729
+ "density": {
730
+ "default": "comfortable",
731
+ "values": {
732
+ "compact": {},
733
+ "comfortable": {},
734
+ "roomy": {}
735
+ }
736
+ }
737
+ },
738
+ "seeds": {
739
+ "ui-base": {
740
+ "by": "density",
741
+ "compact": 11,
742
+ "comfortable": 13,
743
+ "roomy": 15
236
744
  }
237
745
  },
238
746
  "ramps": {
@@ -305,6 +813,51 @@ var THEME_SOURCES = {
305
813
  }
306
814
  }
307
815
  },
816
+ "scales": {
817
+ "font-size": {
818
+ "steps": [
819
+ "2xs",
820
+ "xs",
821
+ "sm",
822
+ "md",
823
+ "lg",
824
+ "xl"
825
+ ],
826
+ "base": "{seeds.ui-base}",
827
+ "factors": [
828
+ 0.66,
829
+ 0.77,
830
+ 0.85,
831
+ 1,
832
+ 1.23,
833
+ 1.54
834
+ ],
835
+ "description": "Chrome type ramp. Hand-tuned factors rather than a ratio: the small end is compressed because chrome text stops being legible before a geometric ramp stops shrinking.",
836
+ "describe": {
837
+ "2xs": "Shortcut keys and index badges. The floor for chrome text.",
838
+ "xs": "Tool-button labels under an icon.",
839
+ "sm": "Chrome labels, status readouts, section headings.",
840
+ "md": "Controls and body text.",
841
+ "lg": "Panel and dialog titles.",
842
+ "xl": "The largest chrome text \u2014 a lab or app title."
843
+ }
844
+ },
845
+ "space": {
846
+ "steps": [
847
+ "1",
848
+ "2",
849
+ "3",
850
+ "4",
851
+ "5",
852
+ "6",
853
+ "7",
854
+ "8"
855
+ ],
856
+ "base": 2,
857
+ "step": 2,
858
+ "description": "Spacing ladder, 2px rungs. Invariant across density: the rungs are finer than any density factor could resolve without rounding two of them onto the same pixel."
859
+ }
860
+ },
308
861
  "semantics": {
309
862
  "surface": {
310
863
  "by": "mode",
@@ -641,14 +1194,94 @@ var THEME_SOURCES = {
641
1194
  "description": "Drawn data curves. Heavier than structural lines so data reads as primary content."
642
1195
  },
643
1196
  "tb-height": {
644
- "value": "28px",
645
- "type": "dimension",
646
- "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
1197
+ "by": "density",
1198
+ "compact": {
1199
+ "value": "24px",
1200
+ "type": "dimension",
1201
+ "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
1202
+ },
1203
+ "comfortable": {
1204
+ "value": "28px",
1205
+ "type": "dimension",
1206
+ "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
1207
+ },
1208
+ "roomy": {
1209
+ "value": "32px",
1210
+ "type": "dimension",
1211
+ "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
1212
+ }
1213
+ },
1214
+ "control-h-xs": {
1215
+ "by": "density",
1216
+ "compact": {
1217
+ "value": "16px",
1218
+ "type": "dimension",
1219
+ "description": "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm."
1220
+ },
1221
+ "comfortable": {
1222
+ "value": "18px",
1223
+ "type": "dimension",
1224
+ "description": "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm."
1225
+ },
1226
+ "roomy": {
1227
+ "value": "22px",
1228
+ "type": "dimension",
1229
+ "description": "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm."
1230
+ }
1231
+ },
1232
+ "control-h-sm": {
1233
+ "by": "density",
1234
+ "compact": {
1235
+ "value": "18px",
1236
+ "type": "dimension",
1237
+ "description": "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control."
1238
+ },
1239
+ "comfortable": {
1240
+ "value": "20px",
1241
+ "type": "dimension",
1242
+ "description": "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control."
1243
+ },
1244
+ "roomy": {
1245
+ "value": "24px",
1246
+ "type": "dimension",
1247
+ "description": "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control."
1248
+ }
647
1249
  },
648
1250
  "control-h": {
649
- "value": "24px",
650
- "type": "dimension",
651
- "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
1251
+ "by": "density",
1252
+ "compact": {
1253
+ "value": "20px",
1254
+ "type": "dimension",
1255
+ "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
1256
+ },
1257
+ "comfortable": {
1258
+ "value": "24px",
1259
+ "type": "dimension",
1260
+ "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
1261
+ },
1262
+ "roomy": {
1263
+ "value": "28px",
1264
+ "type": "dimension",
1265
+ "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
1266
+ }
1267
+ },
1268
+ "icon-button-size": {
1269
+ "by": "density",
1270
+ "compact": {
1271
+ "value": "20px",
1272
+ "type": "dimension",
1273
+ "description": "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes."
1274
+ },
1275
+ "comfortable": {
1276
+ "value": "22px",
1277
+ "type": "dimension",
1278
+ "description": "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes."
1279
+ },
1280
+ "roomy": {
1281
+ "value": "26px",
1282
+ "type": "dimension",
1283
+ "description": "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes."
1284
+ }
652
1285
  },
653
1286
  "slider-track-h": {
654
1287
  "value": "4px",
@@ -695,52 +1328,11 @@ var THEME_SOURCES = {
695
1328
  "type": "dimension",
696
1329
  "description": "Backdrop blur radius for frosted surfaces. Pairs with glass-tint."
697
1330
  },
698
- "font-size-2xs": {
699
- "value": "9px",
700
- "type": "dimension",
701
- "description": "Shortcut keys and index badges. The floor for chrome text."
702
- },
703
- "font-size-xs": {
704
- "value": "10px",
705
- "type": "dimension",
706
- "description": "Tool-button labels under an icon."
707
- },
708
- "font-size-sm": {
709
- "value": "11px",
710
- "type": "dimension",
711
- "description": "Chrome labels, status readouts, section headings."
712
- },
713
1331
  "font-size": {
714
- "value": "13px",
1332
+ "value": "{font-size-md}",
715
1333
  "type": "dimension",
716
1334
  "description": "Controls and body text."
717
1335
  },
718
- "font-size-lg": {
719
- "value": "16px",
720
- "type": "dimension",
721
- "description": "Panel and dialog titles."
722
- },
723
- "font-size-xl": {
724
- "value": "20px",
725
- "type": "dimension",
726
- "description": "The largest chrome text \u2014 a lab or app title."
727
- },
728
- "space-xs": {
729
- "value": "4px",
730
- "type": "dimension"
731
- },
732
- "space-sm": {
733
- "value": "8px",
734
- "type": "dimension"
735
- },
736
- "space-md": {
737
- "value": "12px",
738
- "type": "dimension"
739
- },
740
- "space-lg": {
741
- "value": "16px",
742
- "type": "dimension"
743
- },
744
1336
  "tracking-none": {
745
1337
  "value": "0",
746
1338
  "type": "dimension"
@@ -889,6 +1481,26 @@ var THEME_SOURCES = {
889
1481
  "font-weight-bold": {
890
1482
  "value": 400,
891
1483
  "type": "fontWeight"
1484
+ },
1485
+ "space-xs": {
1486
+ "value": "{space-2}",
1487
+ "type": "dimension",
1488
+ "description": "Alias for space-2. The t-shirt names name every other rung of the ladder."
1489
+ },
1490
+ "space-sm": {
1491
+ "value": "{space-4}",
1492
+ "type": "dimension",
1493
+ "description": "Alias for space-4. The t-shirt names name every other rung of the ladder."
1494
+ },
1495
+ "space-md": {
1496
+ "value": "{space-6}",
1497
+ "type": "dimension",
1498
+ "description": "Alias for space-6. The t-shirt names name every other rung of the ladder."
1499
+ },
1500
+ "space-lg": {
1501
+ "value": "{space-8}",
1502
+ "type": "dimension",
1503
+ "description": "Alias for space-8. The t-shirt names name every other rung of the ladder."
892
1504
  }
893
1505
  }
894
1506
  }
@@ -908,6 +1520,14 @@ var BAKED_THEMES = {
908
1520
  "scheme": "light"
909
1521
  }
910
1522
  }
1523
+ },
1524
+ "density": {
1525
+ "default": "comfortable",
1526
+ "values": {
1527
+ "compact": {},
1528
+ "comfortable": {},
1529
+ "roomy": {}
1530
+ }
911
1531
  }
912
1532
  },
913
1533
  "tokens": {
@@ -1005,6 +1625,146 @@ var BAKED_THEMES = {
1005
1625
  "type": "color",
1006
1626
  "value": "#955cf9"
1007
1627
  },
1628
+ "font-size-2xs": {
1629
+ "by": "density",
1630
+ "compact": {
1631
+ "type": "dimension",
1632
+ "value": "7px",
1633
+ "description": "Shortcut keys and index badges. The floor for chrome text."
1634
+ },
1635
+ "comfortable": {
1636
+ "type": "dimension",
1637
+ "value": "9px",
1638
+ "description": "Shortcut keys and index badges. The floor for chrome text."
1639
+ },
1640
+ "roomy": {
1641
+ "type": "dimension",
1642
+ "value": "10px",
1643
+ "description": "Shortcut keys and index badges. The floor for chrome text."
1644
+ }
1645
+ },
1646
+ "font-size-xs": {
1647
+ "by": "density",
1648
+ "compact": {
1649
+ "type": "dimension",
1650
+ "value": "8px",
1651
+ "description": "Tool-button labels under an icon."
1652
+ },
1653
+ "comfortable": {
1654
+ "type": "dimension",
1655
+ "value": "10px",
1656
+ "description": "Tool-button labels under an icon."
1657
+ },
1658
+ "roomy": {
1659
+ "type": "dimension",
1660
+ "value": "12px",
1661
+ "description": "Tool-button labels under an icon."
1662
+ }
1663
+ },
1664
+ "font-size-sm": {
1665
+ "by": "density",
1666
+ "compact": {
1667
+ "type": "dimension",
1668
+ "value": "9px",
1669
+ "description": "Chrome labels, status readouts, section headings."
1670
+ },
1671
+ "comfortable": {
1672
+ "type": "dimension",
1673
+ "value": "11px",
1674
+ "description": "Chrome labels, status readouts, section headings."
1675
+ },
1676
+ "roomy": {
1677
+ "type": "dimension",
1678
+ "value": "13px",
1679
+ "description": "Chrome labels, status readouts, section headings."
1680
+ }
1681
+ },
1682
+ "font-size-md": {
1683
+ "by": "density",
1684
+ "compact": {
1685
+ "type": "dimension",
1686
+ "value": "11px",
1687
+ "description": "Controls and body text."
1688
+ },
1689
+ "comfortable": {
1690
+ "type": "dimension",
1691
+ "value": "13px",
1692
+ "description": "Controls and body text."
1693
+ },
1694
+ "roomy": {
1695
+ "type": "dimension",
1696
+ "value": "15px",
1697
+ "description": "Controls and body text."
1698
+ }
1699
+ },
1700
+ "font-size-lg": {
1701
+ "by": "density",
1702
+ "compact": {
1703
+ "type": "dimension",
1704
+ "value": "14px",
1705
+ "description": "Panel and dialog titles."
1706
+ },
1707
+ "comfortable": {
1708
+ "type": "dimension",
1709
+ "value": "16px",
1710
+ "description": "Panel and dialog titles."
1711
+ },
1712
+ "roomy": {
1713
+ "type": "dimension",
1714
+ "value": "18px",
1715
+ "description": "Panel and dialog titles."
1716
+ }
1717
+ },
1718
+ "font-size-xl": {
1719
+ "by": "density",
1720
+ "compact": {
1721
+ "type": "dimension",
1722
+ "value": "17px",
1723
+ "description": "The largest chrome text \u2014 a lab or app title."
1724
+ },
1725
+ "comfortable": {
1726
+ "type": "dimension",
1727
+ "value": "20px",
1728
+ "description": "The largest chrome text \u2014 a lab or app title."
1729
+ },
1730
+ "roomy": {
1731
+ "type": "dimension",
1732
+ "value": "23px",
1733
+ "description": "The largest chrome text \u2014 a lab or app title."
1734
+ }
1735
+ },
1736
+ "space-1": {
1737
+ "type": "dimension",
1738
+ "value": "2px"
1739
+ },
1740
+ "space-2": {
1741
+ "type": "dimension",
1742
+ "value": "4px"
1743
+ },
1744
+ "space-3": {
1745
+ "type": "dimension",
1746
+ "value": "6px"
1747
+ },
1748
+ "space-4": {
1749
+ "type": "dimension",
1750
+ "value": "8px"
1751
+ },
1752
+ "space-5": {
1753
+ "type": "dimension",
1754
+ "value": "10px"
1755
+ },
1756
+ "space-6": {
1757
+ "type": "dimension",
1758
+ "value": "12px"
1759
+ },
1760
+ "space-7": {
1761
+ "type": "dimension",
1762
+ "value": "14px"
1763
+ },
1764
+ "space-8": {
1765
+ "type": "dimension",
1766
+ "value": "16px"
1767
+ },
1008
1768
  "surface": {
1009
1769
  "by": "mode",
1010
1770
  "dark": {
@@ -1244,14 +2004,94 @@ var BAKED_THEMES = {
1244
2004
  "description": "Drawn data curves. Heavier than structural lines so data reads as primary content."
1245
2005
  },
1246
2006
  "tb-height": {
1247
- "type": "dimension",
1248
- "value": "28px",
1249
- "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
2007
+ "by": "density",
2008
+ "compact": {
2009
+ "type": "dimension",
2010
+ "value": "24px",
2011
+ "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
2012
+ },
2013
+ "comfortable": {
2014
+ "type": "dimension",
2015
+ "value": "28px",
2016
+ "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
2017
+ },
2018
+ "roomy": {
2019
+ "type": "dimension",
2020
+ "value": "32px",
2021
+ "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
2022
+ }
2023
+ },
2024
+ "control-h-xs": {
2025
+ "by": "density",
2026
+ "compact": {
2027
+ "type": "dimension",
2028
+ "value": "16px",
2029
+ "description": "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm."
2030
+ },
2031
+ "comfortable": {
2032
+ "type": "dimension",
2033
+ "value": "18px",
2034
+ "description": "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm."
2035
+ },
2036
+ "roomy": {
2037
+ "type": "dimension",
2038
+ "value": "22px",
2039
+ "description": "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm."
2040
+ }
2041
+ },
2042
+ "control-h-sm": {
2043
+ "by": "density",
2044
+ "compact": {
2045
+ "type": "dimension",
2046
+ "value": "18px",
2047
+ "description": "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control."
2048
+ },
2049
+ "comfortable": {
2050
+ "type": "dimension",
2051
+ "value": "20px",
2052
+ "description": "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control."
2053
+ },
2054
+ "roomy": {
2055
+ "type": "dimension",
2056
+ "value": "24px",
2057
+ "description": "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control."
2058
+ }
1250
2059
  },
1251
2060
  "control-h": {
1252
- "type": "dimension",
1253
- "value": "24px",
1254
- "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
2061
+ "by": "density",
2062
+ "compact": {
2063
+ "type": "dimension",
2064
+ "value": "20px",
2065
+ "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
2066
+ },
2067
+ "comfortable": {
2068
+ "type": "dimension",
2069
+ "value": "24px",
2070
+ "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
2071
+ },
2072
+ "roomy": {
2073
+ "type": "dimension",
2074
+ "value": "28px",
2075
+ "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
2076
+ }
2077
+ },
2078
+ "icon-button-size": {
2079
+ "by": "density",
2080
+ "compact": {
2081
+ "type": "dimension",
2082
+ "value": "20px",
2083
+ "description": "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes."
2084
+ },
2085
+ "comfortable": {
2086
+ "type": "dimension",
2087
+ "value": "22px",
2088
+ "description": "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes."
2089
+ },
2090
+ "roomy": {
2091
+ "type": "dimension",
2092
+ "value": "26px",
2093
+ "description": "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes."
2094
+ }
1255
2095
  },
1256
2096
  "slider-track-h": {
1257
2097
  "type": "dimension",
@@ -1298,52 +2138,11 @@ var BAKED_THEMES = {
1298
2138
  "value": "3px",
1299
2139
  "description": "Backdrop blur radius for frosted surfaces. Pairs with glass-tint."
1300
2140
  },
1301
- "font-size-2xs": {
1302
- "type": "dimension",
1303
- "value": "9px",
1304
- "description": "Shortcut keys and index badges. The floor for chrome text."
1305
- },
1306
- "font-size-xs": {
1307
- "type": "dimension",
1308
- "value": "10px",
1309
- "description": "Tool-button labels under an icon."
1310
- },
1311
- "font-size-sm": {
1312
- "type": "dimension",
1313
- "value": "11px",
1314
- "description": "Chrome labels, status readouts, section headings."
1315
- },
1316
2141
  "font-size": {
1317
2142
  "type": "dimension",
1318
- "value": "13px",
2143
+ "value": "{font-size-md}",
1319
2144
  "description": "Controls and body text."
1320
2145
  },
1321
- "font-size-lg": {
1322
- "type": "dimension",
1323
- "value": "16px",
1324
- "description": "Panel and dialog titles."
1325
- },
1326
- "font-size-xl": {
1327
- "type": "dimension",
1328
- "value": "20px",
1329
- "description": "The largest chrome text \u2014 a lab or app title."
1330
- },
1331
- "space-xs": {
1332
- "type": "dimension",
1333
- "value": "4px"
1334
- },
1335
- "space-sm": {
1336
- "type": "dimension",
1337
- "value": "8px"
1338
- },
1339
- "space-md": {
1340
- "type": "dimension",
1341
- "value": "12px"
1342
- },
1343
- "space-lg": {
1344
- "type": "dimension",
1345
- "value": "16px"
1346
- },
1347
2146
  "tracking-none": {
1348
2147
  "type": "dimension",
1349
2148
  "value": "0"
@@ -1492,6 +2291,26 @@ var BAKED_THEMES = {
1492
2291
  "font-weight-bold": {
1493
2292
  "type": "fontWeight",
1494
2293
  "value": 400
2294
+ },
2295
+ "space-xs": {
2296
+ "type": "dimension",
2297
+ "value": "{space-2}",
2298
+ "description": "Alias for space-2. The t-shirt names name every other rung of the ladder."
2299
+ },
2300
+ "space-sm": {
2301
+ "type": "dimension",
2302
+ "value": "{space-4}",
2303
+ "description": "Alias for space-4. The t-shirt names name every other rung of the ladder."
2304
+ },
2305
+ "space-md": {
2306
+ "type": "dimension",
2307
+ "value": "{space-6}",
2308
+ "description": "Alias for space-6. The t-shirt names name every other rung of the ladder."
2309
+ },
2310
+ "space-lg": {
2311
+ "type": "dimension",
2312
+ "value": "{space-8}",
2313
+ "description": "Alias for space-8. The t-shirt names name every other rung of the ladder."
1495
2314
  }
1496
2315
  }
1497
2316
  }
@@ -1578,5 +2397,5 @@ function applyTheme(el, theme, selection = {}) {
1578
2397
  }
1579
2398
 
1580
2399
  export { BAKED_THEMES, THEMES, THEME_SOURCES, applyTheme, defineTheme, weaselTheme };
1581
- //# sourceMappingURL=chunk-YBHW5LZM.js.map
1582
- //# sourceMappingURL=chunk-YBHW5LZM.js.map
2400
+ //# sourceMappingURL=chunk-XFCWYN2L.js.map
2401
+ //# sourceMappingURL=chunk-XFCWYN2L.js.map