@medusajs/ui-preset 1.0.0 → 1.0.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.
Files changed (13) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +72 -0
  3. package/LICENSE +21 -0
  4. package/README.md +36 -1
  5. package/dist/index.js +366 -236
  6. package/dist/index.mjs +366 -236
  7. package/package.json +6 -1
  8. package/src/plugin.ts +17 -2
  9. package/src/theme/extension/theme.ts +86 -55
  10. package/src/theme/tokens/colors.ts +104 -90
  11. package/src/theme/tokens/components.ts +74 -38
  12. package/src/theme/tokens/effects.ts +34 -36
  13. package/src/theme/tokens/typography.ts +49 -13
package/dist/index.mjs CHANGED
@@ -33,6 +33,44 @@ var init_theme = __esm({
33
33
  "extend": {
34
34
  "colors": {
35
35
  "ui": {
36
+ "button": {
37
+ "inverted": {
38
+ "DEFAULT": "var(--button-inverted)",
39
+ "pressed": {
40
+ "DEFAULT": "var(--button-inverted-pressed)"
41
+ },
42
+ "hover": {
43
+ "DEFAULT": "var(--button-inverted-hover)"
44
+ }
45
+ },
46
+ "transparent": {
47
+ "DEFAULT": "var(--button-transparent)",
48
+ "hover": {
49
+ "DEFAULT": "var(--button-transparent-hover)"
50
+ },
51
+ "pressed": {
52
+ "DEFAULT": "var(--button-transparent-pressed)"
53
+ }
54
+ },
55
+ "neutral": {
56
+ "pressed": {
57
+ "DEFAULT": "var(--button-neutral-pressed)"
58
+ },
59
+ "DEFAULT": "var(--button-neutral)",
60
+ "hover": {
61
+ "DEFAULT": "var(--button-neutral-hover)"
62
+ }
63
+ },
64
+ "danger": {
65
+ "DEFAULT": "var(--button-danger)",
66
+ "pressed": {
67
+ "DEFAULT": "var(--button-danger-pressed)"
68
+ },
69
+ "hover": {
70
+ "DEFAULT": "var(--button-danger-hover)"
71
+ }
72
+ }
73
+ },
36
74
  "code": {
37
75
  "text": {
38
76
  "base": {
@@ -212,6 +250,17 @@ var init_theme = __esm({
212
250
  "component": {
213
251
  "DEFAULT": "var(--bg-component)"
214
252
  },
253
+ "overlay": {
254
+ "DEFAULT": "var(--bg-overlay)"
255
+ },
256
+ "switch": {
257
+ "off": {
258
+ "DEFAULT": "var(--bg-switch-off)",
259
+ "hover": {
260
+ "DEFAULT": "var(--bg-switch-off-hover)"
261
+ }
262
+ }
263
+ },
215
264
  "field": {
216
265
  "hover": {
217
266
  "DEFAULT": "var(--bg-field-hover)"
@@ -221,19 +270,8 @@ var init_theme = __esm({
221
270
  "interactive": {
222
271
  "DEFAULT": "var(--bg-interactive)"
223
272
  },
224
- "overlay": {
225
- "DEFAULT": "var(--bg-overlay)"
226
- },
227
273
  "disabled": {
228
274
  "DEFAULT": "var(--bg-disabled)"
229
- },
230
- "switch": {
231
- "off": {
232
- "hover": {
233
- "DEFAULT": "var(--bg-switch-off-hover)"
234
- },
235
- "DEFAULT": "var(--bg-switch-off)"
236
- }
237
275
  }
238
276
  },
239
277
  "fg": {
@@ -267,69 +305,62 @@ var init_theme = __esm({
267
305
  "DEFAULT": "var(--fg-muted)"
268
306
  }
269
307
  },
270
- "button": {
271
- "danger": {
272
- "pressed": {
273
- "DEFAULT": "var(--button-danger-pressed)"
308
+ "contrast": {
309
+ "bg": {
310
+ "subtle": {
311
+ "DEFAULT": "var(--contrast-bg-subtle)"
274
312
  },
275
- "DEFAULT": "var(--button-danger)",
276
- "hover": {
277
- "DEFAULT": "var(--button-danger-hover)"
278
- }
279
- },
280
- "transparent": {
281
- "DEFAULT": "var(--button-transparent)",
282
- "hover": {
283
- "DEFAULT": "var(--button-transparent-hover)"
313
+ "base": {
314
+ "DEFAULT": "var(--contrast-bg-base)",
315
+ "pressed": {
316
+ "DEFAULT": "var(--contrast-bg-base-pressed)"
317
+ },
318
+ "hover": {
319
+ "DEFAULT": "var(--contrast-bg-base-hover)"
320
+ }
284
321
  },
285
- "pressed": {
286
- "DEFAULT": "var(--button-transparent-pressed)"
322
+ "highlight": {
323
+ "DEFAULT": "var(--contrast-bg-highlight)"
287
324
  }
288
325
  },
289
- "inverted": {
290
- "DEFAULT": "var(--button-inverted)",
291
- "pressed": {
292
- "DEFAULT": "var(--button-inverted-pressed)"
293
- },
294
- "hover": {
295
- "DEFAULT": "var(--button-inverted-hover)"
326
+ "border": {
327
+ "base": {
328
+ "DEFAULT": "var(--contrast-border-base)"
296
329
  }
297
330
  },
298
- "neutral": {
299
- "pressed": {
300
- "DEFAULT": "var(--button-neutral-pressed)"
331
+ "fg": {
332
+ "primary": {
333
+ "DEFAULT": "var(--contrast-fg-primary)"
301
334
  },
302
- "DEFAULT": "var(--button-neutral)",
303
- "hover": {
304
- "DEFAULT": "var(--button-neutral-hover)"
335
+ "secondary": {
336
+ "DEFAULT": "var(--contrast-fg-secondary)"
305
337
  }
306
338
  }
307
339
  }
308
340
  }
309
341
  },
310
342
  "boxShadow": {
311
- "borders-focus": "var(--borders-focus)",
312
- "borders-interactive": "var(--borders-interactive)",
313
- "borders-active": "var(--borders-active)",
343
+ "elevation-card-hover": "var(--elevation-card-hover)",
344
+ "elevation-modal": "var(--elevation-modal)",
345
+ "buttons-inverted": "var(--buttons-inverted)",
346
+ "elevation-card-rest": "var(--elevation-card-rest)",
347
+ "buttons-neutral-focus": "var(--buttons-neutral-focus)",
348
+ "borders-interactive-with-active": "var(--borders-interactive-with-active)",
349
+ "buttons-danger-focus": "var(--buttons-danger-focus)",
350
+ "borders-base": "var(--borders-base)",
351
+ "buttons-danger": "var(--buttons-danger)",
314
352
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
315
- "borders-error": "var(--borders-error)",
316
353
  "details-switch-handle": "var(--details-switch-handle)",
354
+ "buttons-neutral": "var(--buttons-neutral)",
317
355
  "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
318
- "elevation-flyout": "var(--elevation-flyout)",
319
356
  "details-switch-background-focus": "var(--details-switch-background-focus)",
320
- "borders-base": "var(--borders-base)",
357
+ "borders-error": "var(--borders-error)",
358
+ "buttons-inverted-focus": "var(--buttons-inverted-focus)",
359
+ "borders-focus": "var(--borders-focus)",
360
+ "details-switch-background": "var(--details-switch-background)",
321
361
  "elevation-tooltip": "var(--elevation-tooltip)",
322
362
  "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
323
- "elevation-card-hover": "var(--elevation-card-hover)",
324
- "elevation-modal": "var(--elevation-modal)",
325
- "elevation-card-rest": "var(--elevation-card-rest)",
326
- "buttons-neutral": "var(--buttons-neutral)",
327
- "buttons-colored-focus": "var(--buttons-colored-focus)",
328
- "buttons-colored": "var(--buttons-colored)",
329
- "buttons-neutral-focus": "var(--buttons-neutral-focus)",
330
- "borders-base-with-shadow": "var(--borders-base-with-shadow)",
331
- "borders-strong-with-shadow": "var(--borders-strong-with-shadow)",
332
- "details-switch-background": "var(--details-switch-background)"
363
+ "elevation-flyout": "var(--elevation-flyout)"
333
364
  }
334
365
  }
335
366
  };
@@ -343,6 +374,36 @@ var init_colors = __esm({
343
374
  "use strict";
344
375
  colors = {
345
376
  "dark": {
377
+ "--code-text-subtle": "rgba(105, 110, 119, 1)",
378
+ "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
379
+ "--border-base": "rgba(46, 48, 53, 1)",
380
+ "--code-text-base": "rgba(237, 238, 240, 1)",
381
+ "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
382
+ "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
383
+ "--fg-on-color": "rgba(255, 255, 255, 1)",
384
+ "--button-neutral-hover": "rgba(53, 55, 60, 1)",
385
+ "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
386
+ "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
387
+ "--bg-switch-off": "rgba(53, 55, 60, 1)",
388
+ "--border-strong": "rgba(53, 55, 60, 1)",
389
+ "--fg-subtle": "rgba(173, 177, 184, 1)",
390
+ "--fg-base": "rgba(237, 238, 240, 1)",
391
+ "--bg-base-hover": "rgba(39, 40, 45, 1)",
392
+ "--bg-subtle-hover": "rgba(27, 27, 31, 1)",
393
+ "--fg-disabled": "rgba(60, 63, 68, 1)",
394
+ "--bg-subtle": "rgba(24, 24, 26, 1)",
395
+ "--tag-neutral-border": "rgba(60, 63, 68, 1)",
396
+ "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
397
+ "--tag-neutral-text": "rgba(173, 177, 184, 1)",
398
+ "--fg-muted": "rgba(105, 110, 119, 1)",
399
+ "--button-danger-pressed": "rgba(225, 29, 72, 1)",
400
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
401
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
402
+ "--code-bg-header": "rgba(24, 24, 26, 1)",
403
+ "--border-loud": "rgba(237, 238, 240, 1)",
404
+ "--bg-base-pressed": "rgba(46, 48, 53, 1)",
405
+ "--bg-disabled": "rgba(39, 40, 45, 1)",
406
+ "--code-icon": "rgba(70, 75, 80, 1)",
346
407
  "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
347
408
  "--border-danger": "rgba(190, 18, 60, 1)",
348
409
  "--border-interactive": "rgba(96, 165, 250, 1)",
@@ -354,95 +415,76 @@ var init_colors = __esm({
354
415
  "--button-danger": "rgba(159, 18, 57, 1)",
355
416
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
356
417
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
357
- "--bg-overlay": "rgba(10, 10, 10, 0.7)",
358
418
  "--fg-interactive": "rgba(96, 165, 250, 1)",
359
- "--fg-on-inverted": "rgba(10, 10, 10, 1)",
360
- "--button-danger-pressed": "rgba(159, 18, 57, 1)",
361
- "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
362
- "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
363
- "--button-neutral-pressed": "rgba(38, 38, 38, 1)",
364
- "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)",
365
- "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)",
419
+ "--bg-overlay": "rgba(24, 24, 26, 0.7)",
420
+ "--fg-on-inverted": "rgba(24, 24, 26, 1)",
421
+ "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
422
+ "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
423
+ "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
366
424
  "--tag-red-border": "rgba(136, 19, 55, 1)",
367
425
  "--tag-red-bg": "rgba(76, 5, 25, 1)",
368
- "--button-transparent-hover": "rgba(38, 38, 38, 1)",
426
+ "--button-transparent-hover": "rgba(39, 40, 45, 1)",
369
427
  "--tag-blue-text": "rgba(96, 165, 250, 1)",
370
- "--button-inverted": "rgba(238, 238, 238, 1)",
371
- "--button-inverted-gradient-from": "rgba(0, 0, 0, 0)",
372
- "--button-inverted-gradient-to": "rgba(0, 0, 0, 1)",
373
428
  "--tag-orange-text": "rgba(251, 191, 36, 1)",
374
429
  "--tag-green-text": "rgba(52, 211, 153, 1)",
375
- "--button-transparent": "rgba(0, 0, 0, 0)",
376
- "--button-transparent-pressed": "rgba(48, 48, 48, 1)",
377
- "--tag-neutral-bg": "rgba(48, 48, 48, 1)",
378
- "--code-text-subtle": "rgba(110, 110, 110, 1)",
379
- "--code-bg-base": "rgba(30, 30, 30, 1)",
430
+ "--tag-neutral-bg": "rgba(46, 48, 53, 1)",
380
431
  "--tag-orange-border": "rgba(120, 53, 15, 1)",
381
- "--border-base": "rgba(48, 48, 48, 1)",
382
- "--bg-component": "rgba(38, 38, 38, 1)",
383
- "--code-text-base": "rgba(238, 238, 238, 1)",
384
432
  "--tag-green-border": "rgba(6, 78, 59, 1)",
385
- "--bg-base": "rgba(23, 23, 23, 1)",
386
- "--fg-on-color": "rgba(238, 238, 238, 1)",
433
+ "--bg-base": "rgba(27, 27, 31, 1)",
387
434
  "--tag-red-text": "rgba(251, 113, 133, 1)",
388
435
  "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
389
436
  "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
390
437
  "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
391
- "--border-strong": "rgba(55, 55, 55, 1)",
392
- "--fg-subtle": "rgba(163, 163, 163, 1)",
393
- "--fg-base": "rgba(238, 238, 238, 1)",
394
- "--code-border": "rgba(48, 48, 48, 1)",
395
- "--border-transparent": "rgba(238, 238, 238, 0)",
438
+ "--border-transparent": "rgba(255, 255, 255, 0)",
439
+ "--code-border": "rgba(46, 48, 53, 1)",
396
440
  "--tag-orange-icon": "rgba(245, 158, 11, 1)",
397
441
  "--tag-purple-bg": "rgba(46, 16, 100, 1)",
398
- "--bg-base-hover": "rgba(38, 38, 38, 1)",
399
- "--bg-subtle-hover": "rgba(23, 23, 23, 1)",
400
442
  "--tag-blue-bg": "rgba(23, 37, 84, 1)",
401
- "--fg-disabled": "rgba(63, 63, 63, 1)",
402
- "--bg-subtle": "rgba(10, 10, 10, 1)",
403
443
  "--tag-green-bg": "rgba(2, 44, 34, 1)",
404
- "--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
405
444
  "--tag-blue-border": "rgba(30, 58, 138, 1)",
406
- "--fg-muted": "rgba(110, 110, 110, 1)",
407
445
  "--tag-purple-border": "rgba(76, 29, 149, 1)",
408
446
  "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
409
- "--code-bg-header": "rgba(23, 23, 23, 1)",
410
- "--border-loud": "rgba(238, 238, 238, 1)",
411
- "--bg-base-pressed": "rgba(48, 48, 48, 1)",
412
447
  "--tag-orange-bg": "rgba(69, 26, 3, 1)",
413
- "--bg-disabled": "rgba(38, 38, 38, 1)",
414
448
  "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
415
- "--code-icon": "rgba(74, 74, 74, 1)",
416
- "--bg-field-hover": "rgba(48, 48, 48, 1)",
417
- "--bg-field": "rgba(38, 38, 38, 1)",
418
- "--button-neutral": "rgba(38, 38, 38, 1)",
449
+ "--code-bg-base": "rgba(27, 27, 31, 1)",
450
+ "--button-transparent": "rgba(255, 255, 255, 0)",
451
+ "--button-neutral": "rgba(39, 40, 45, 1)",
419
452
  "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
420
453
  "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
421
- "--button-inverted-pressed": "rgba(238, 238, 238, 1)",
422
- "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)",
423
- "--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)",
424
- "--button-neutral-hover": "rgba(38, 38, 38, 1)",
425
- "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
426
- "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
427
- "--button-inverted-hover": "rgba(238, 238, 238, 1)",
428
- "--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)",
429
- "--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)",
430
- "--button-danger-hover": "rgba(159, 18, 57, 1)",
454
+ "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
455
+ "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
456
+ "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
457
+ "--button-inverted-hover": "rgba(255, 255, 255, 1)",
458
+ "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
459
+ "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
460
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
431
461
  "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
432
462
  "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
433
- "--bg-switch-off-hover": "rgba(74, 74, 74, 1)",
434
- "--bg-switch-off": "rgba(55, 55, 55, 1)",
435
- "--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)",
436
- "--tag-neutral-border": "rgba(63, 63, 63, 1)",
463
+ "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
437
464
  "--tag-blue-icon": "rgba(59, 130, 246, 1)",
438
465
  "--tag-red-icon": "rgba(244, 63, 94, 1)",
439
- "--tag-neutral-icon": "rgba(129, 129, 129, 1)",
440
466
  "--tag-purple-icon": "rgba(139, 92, 246, 1)",
441
467
  "--tag-purple-text": "rgba(167, 139, 250, 1)",
442
- "--tag-neutral-text": "rgba(163, 163, 163, 1)",
443
- "--tag-green-icon": "rgba(16, 185, 129, 1)"
468
+ "--tag-green-icon": "rgba(16, 185, 129, 1)",
469
+ "--button-inverted": "rgba(237, 238, 240, 1)",
470
+ "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
471
+ "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
472
+ "--bg-component": "rgba(39, 40, 45, 1)",
473
+ "--bg-field": "rgba(39, 40, 45, 1)",
474
+ "--bg-field-hover": "rgba(46, 48, 53, 1)",
475
+ "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
476
+ "--contrast-bg-base": "rgba(228, 228, 233, 1)",
477
+ "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
478
+ "--contrast-border-base": "rgba(185, 187, 198, 1)",
479
+ "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
480
+ "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
481
+ "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
482
+ "--contrast-bg-highlight": "rgba(242, 242, 245, 1)"
444
483
  },
445
484
  "light": {
485
+ "--button-inverted": "rgba(3, 7, 18, 1)",
486
+ "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
487
+ "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
446
488
  "--code-text-base": "rgba(249, 250, 251, 1)",
447
489
  "--tag-green-bg": "rgba(209, 250, 229, 1)",
448
490
  "--border-strong": "rgba(209, 213, 219, 1)",
@@ -463,24 +505,16 @@ var init_colors = __esm({
463
505
  "--tag-purple-text": "rgba(109, 40, 217, 1)",
464
506
  "--tag-blue-bg": "rgba(219, 234, 254, 1)",
465
507
  "--tag-blue-icon": "rgba(37, 99, 235, 1)",
466
- "--bg-component": "rgba(241, 243, 245, 1)",
467
508
  "--border-error": "rgba(225, 29, 72, 1)",
468
- "--bg-field-hover": "rgba(243, 244, 246, 1)",
469
- "--bg-field": "rgba(249, 250, 251, 1)",
470
509
  "--border-loud": "rgba(3, 7, 18, 1)",
471
510
  "--fg-on-inverted": "rgba(255, 255, 255, 1)",
472
511
  "--fg-on-color": "rgba(255, 255, 255, 1)",
473
- "--button-danger-pressed": "rgba(225, 29, 72, 1)",
474
- "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
475
- "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
476
512
  "--button-transparent": "rgba(255, 255, 255, 0)",
477
- "--bg-interactive": "rgba(59, 130, 246, 1)",
478
513
  "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
479
514
  "--fg-interactive": "rgba(59, 130, 246, 1)",
480
515
  "--fg-error": "rgba(225, 29, 72, 1)",
481
516
  "--border-danger": "rgba(190, 18, 60, 1)",
482
517
  "--border-transparent": "rgba(3, 7, 18, 0)",
483
- "--bg-overlay": "rgba(3, 7, 18, 0.4)",
484
518
  "--fg-base": "rgba(3, 7, 18, 1)",
485
519
  "--fg-disabled": "rgba(209, 213, 219, 1)",
486
520
  "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
@@ -506,43 +540,54 @@ var init_colors = __esm({
506
540
  "--tag-red-border": "rgba(254, 205, 211, 1)",
507
541
  "--tag-green-border": "rgba(167, 243, 208, 1)",
508
542
  "--tag-green-text": "rgba(4, 120, 87, 1)",
509
- "--bg-disabled": "rgba(243, 244, 246, 1)",
510
543
  "--button-transparent-hover": "rgba(249, 250, 251, 1)",
511
544
  "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
512
- "--bg-switch-off-hover": "rgba(229, 231, 235, 1)",
513
- "--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
514
- "--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)",
515
- "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
516
545
  "--code-bg-base": "rgba(17, 24, 39, 1)",
517
546
  "--code-bg-header": "rgba(31, 41, 55, 1)",
518
547
  "--code-text-subtle": "rgba(156, 163, 175, 1)",
519
548
  "--code-border": "rgba(55, 65, 81, 1)",
520
549
  "--code-icon": "rgba(107, 114, 128, 1)",
521
- "--button-inverted": "rgba(10, 10, 10, 1)",
522
- "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
523
- "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
524
- "--button-neutral-pressed": "rgba(255, 255, 255, 1)",
525
- "--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)",
526
- "--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)",
527
- "--button-inverted-pressed": "rgba(10, 10, 10, 1)",
528
- "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
529
- "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
530
- "--button-inverted-hover": "rgba(10, 10, 10, 1)",
531
- "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
532
- "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
550
+ "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
551
+ "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
552
+ "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
533
553
  "--button-neutral": "rgba(255, 255, 255, 1)",
534
- "--button-neutral-gradient-from": "rgba(10, 10, 10, 0)",
535
- "--button-neutral-gradient-to": "rgba(10, 10, 10, 1)",
536
- "--button-neutral-hover": "rgba(255, 255, 255, 1)",
537
- "--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)",
538
- "--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)",
554
+ "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
555
+ "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
556
+ "--button-neutral-hover": "rgba(249, 250, 251, 1)",
557
+ "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
558
+ "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
539
559
  "--button-danger": "rgba(225, 29, 72, 1)",
540
560
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
541
561
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
542
- "--button-danger-hover": "rgba(225, 29, 72, 1)",
562
+ "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
563
+ "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
564
+ "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
565
+ "--button-danger-pressed": "rgba(159, 18, 57, 1)",
566
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
567
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
568
+ "--button-inverted-hover": "rgba(17, 24, 39, 1)",
569
+ "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
570
+ "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
571
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
543
572
  "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
544
573
  "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
545
- "--bg-switch-off": "rgba(229, 231, 235, 1)"
574
+ "--bg-component": "rgba(241, 243, 245, 1)",
575
+ "--bg-overlay": "rgba(3, 7, 18, 0.4)",
576
+ "--bg-switch-off": "rgba(229, 231, 235, 1)",
577
+ "--bg-field-hover": "rgba(243, 244, 246, 1)",
578
+ "--bg-field": "rgba(249, 250, 251, 1)",
579
+ "--bg-interactive": "rgba(59, 130, 246, 1)",
580
+ "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
581
+ "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
582
+ "--bg-disabled": "rgba(243, 244, 246, 1)",
583
+ "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
584
+ "--contrast-bg-base": "rgba(27, 27, 31, 1)",
585
+ "--contrast-border-base": "rgba(60, 63, 68, 1)",
586
+ "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
587
+ "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
588
+ "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
589
+ "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
590
+ "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
546
591
  }
547
592
  };
548
593
  }
@@ -554,45 +599,81 @@ var init_components = __esm({
554
599
  "src/theme/tokens/components.ts"() {
555
600
  "use strict";
556
601
  components = {
557
- ".button-danger-gradient": {
558
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
559
- "opacity": "16%"
560
- },
561
- ".button-danger-pressed-gradient": {
562
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
563
- "opacity": "20%"
564
- },
565
- ".button-neutral-pressed-gradient": {
566
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
567
- "opacity": "4%"
568
- },
569
- ".button-inverted-gradient": {
570
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
571
- "opacity": "16%"
572
- },
573
- ".bg-switch-off-hover-gradient": {
574
- "backgroundImage": "linear-gradient(0deg, var(--bg-switch-off-hover-gradient-from), var(--bg-switch-off-hover-gradient-to))",
575
- "opacity": "6%"
576
- },
577
- ".button-inverted-pressed-gradient": {
578
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
579
- "opacity": "16%"
580
- },
581
- ".button-inverted-hover-gradient": {
582
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
583
- "opacity": "16%"
584
- },
585
- ".button-neutral-gradient": {
586
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
587
- "opacity": "4%"
588
- },
589
- ".button-neutral-hover-gradient": {
590
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
591
- "opacity": "8%"
602
+ "dark": {
603
+ ".button-neutral-hover-gradient": {
604
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
605
+ "opacity": "6%"
606
+ },
607
+ ".button-danger-pressed-gradient": {
608
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
609
+ "opacity": "10%"
610
+ },
611
+ ".button-danger-gradient": {
612
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
613
+ "opacity": "10%"
614
+ },
615
+ ".button-neutral-pressed-gradient": {
616
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
617
+ "opacity": "6%"
618
+ },
619
+ ".button-neutral-gradient": {
620
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
621
+ "opacity": "6%"
622
+ },
623
+ ".button-inverted-pressed-gradient": {
624
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
625
+ "opacity": "12%"
626
+ },
627
+ ".button-inverted-hover-gradient": {
628
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
629
+ "opacity": "12%"
630
+ },
631
+ ".button-danger-hover-gradient": {
632
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
633
+ "opacity": "10%"
634
+ },
635
+ ".button-inverted-gradient": {
636
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
637
+ "opacity": "12%"
638
+ }
592
639
  },
593
- ".button-danger-hover-gradient": {
594
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
595
- "opacity": "14.000000000000002%"
640
+ "light": {
641
+ ".button-inverted-gradient": {
642
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
643
+ "opacity": "16%"
644
+ },
645
+ ".button-neutral-pressed-gradient": {
646
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
647
+ "opacity": "3%"
648
+ },
649
+ ".button-neutral-gradient": {
650
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
651
+ "opacity": "3%"
652
+ },
653
+ ".button-neutral-hover-gradient": {
654
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
655
+ "opacity": "3%"
656
+ },
657
+ ".button-danger-gradient": {
658
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
659
+ "opacity": "16%"
660
+ },
661
+ ".button-inverted-pressed-gradient": {
662
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
663
+ "opacity": "16%"
664
+ },
665
+ ".button-danger-pressed-gradient": {
666
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
667
+ "opacity": "16%"
668
+ },
669
+ ".button-inverted-hover-gradient": {
670
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
671
+ "opacity": "16%"
672
+ },
673
+ ".button-danger-hover-gradient": {
674
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
675
+ "opacity": "16%"
676
+ }
596
677
  }
597
678
  };
598
679
  }
@@ -605,52 +686,50 @@ var init_effects = __esm({
605
686
  "use strict";
606
687
  effects = {
607
688
  "dark": {
608
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4)",
609
- "--buttons-colored": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4)",
689
+ "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
690
+ "--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
691
+ "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
692
+ "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
693
+ "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
610
694
  "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
611
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
612
- "--buttons-colored-focus": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
695
+ "--buttons-danger": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.4)",
696
+ "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
697
+ "--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
698
+ "--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
699
+ "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
700
+ "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
613
701
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)",
614
- "--borders-strong-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.24), 0px 0px 0px 1px rgba(55, 55, 55, 1), 0px 0.5px 0px 2px rgba(0, 0, 0, 0.4)",
702
+ "--buttons-inverted": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
615
703
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
616
- "--borders-interactive": "0px 0px 0px 1px rgba(96, 165, 250, 1)",
617
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(48, 48, 48, 1), 0px 0.5px 0px 2px rgba(0, 0, 0, 0.4)",
618
- "--borders-base": "0px 0px 0px 1px rgba(48, 48, 48, 1)",
619
- "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(23, 23, 23, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
620
- "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
621
- "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
622
- "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
623
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.25)",
624
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
625
- "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
626
- "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(48, 48, 48, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
704
+ "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
705
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
706
+ "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
627
707
  "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1)",
628
708
  "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
629
- "--details-switch-background-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)"
709
+ "--buttons-neutral": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)"
630
710
  },
631
711
  "light": {
632
- "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
633
- "--borders-interactive": "0px 0px 0px 1px rgba(59, 130, 246, 1)",
634
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.2)",
712
+ "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
713
+ "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
714
+ "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)",
715
+ "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
716
+ "--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
717
+ "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",
718
+ "--buttons-danger-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
719
+ "--borders-base": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
720
+ "--buttons-danger": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8)",
635
721
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
636
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
637
- "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.02), 0px 5px 4px 0px rgba(0, 0, 0, 0.02), 0px 3px 3px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)",
722
+ "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.02), 0px 5px 4px 0px rgba(3, 7, 18, 0.02), 0px 3px 3px 0px rgba(3, 7, 18, 0.04), 0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 1px 0px rgba(3, 7, 18, 0.08)",
723
+ "--buttons-neutral": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
638
724
  "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
639
- "--elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
640
- "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
641
- "--borders-base": "0px 0px 0px 1px rgba(229, 229, 229, 1)",
642
- "--elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
725
+ "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
726
+ "--borders-error": "0px 0px 0px 1px rgba(225, 29, 72, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
727
+ "--buttons-inverted-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
728
+ "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
729
+ "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
730
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
643
731
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
644
- "--elevation-card-hover": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
645
- "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 229, 229, 0.4) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08), 0px 2px 24px 0px rgba(0, 0, 0, 0.08)",
646
- "--elevation-card-rest": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
647
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12)",
648
- "--buttons-colored-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
649
- "--buttons-colored": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12)",
650
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
651
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(229, 229, 229, 1)",
652
- "--borders-strong-with-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 1px rgba(212, 212, 212, 1)",
653
- "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)"
732
+ "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
654
733
  }
655
734
  };
656
735
  }
@@ -722,18 +801,6 @@ var init_typography = __esm({
722
801
  "fontWeight": "500",
723
802
  "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
724
803
  },
725
- ".code-body": {
726
- "fontSize": "0.8125rem",
727
- "lineHeight": "1.5rem",
728
- "fontWeight": "400",
729
- "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
730
- },
731
- ".code-label": {
732
- "fontSize": "0.8125rem",
733
- "lineHeight": "1.25rem",
734
- "fontWeight": "400",
735
- "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
736
- },
737
804
  ".txt-medium": {
738
805
  "fontSize": "0.875rem",
739
806
  "lineHeight": "1.5rem",
@@ -812,7 +879,55 @@ var init_typography = __esm({
812
879
  "fontWeight": "400",
813
880
  "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
814
881
  },
815
- ".txt-large-plus-compact": {
882
+ ".code-body": {
883
+ "fontSize": "0.8125rem",
884
+ "lineHeight": "1.5rem",
885
+ "fontWeight": "400",
886
+ "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
887
+ },
888
+ ".code-label": {
889
+ "fontSize": "0.8125rem",
890
+ "lineHeight": "1.25rem",
891
+ "fontWeight": "400",
892
+ "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
893
+ },
894
+ ".txt-compact-xlarge-plus": {
895
+ "fontSize": "1.125rem",
896
+ "lineHeight": "1.25rem",
897
+ "fontWeight": "500",
898
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
899
+ },
900
+ ".txt-xsmall-plus": {
901
+ "fontSize": "0.75rem",
902
+ "lineHeight": "1.25rem",
903
+ "fontWeight": "500",
904
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
905
+ },
906
+ ".txt-compact-xlarge": {
907
+ "fontSize": "1.125rem",
908
+ "lineHeight": "1.25rem",
909
+ "fontWeight": "400",
910
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
911
+ },
912
+ ".txt-small-plus": {
913
+ "fontSize": "0.8125rem",
914
+ "lineHeight": "1.375rem",
915
+ "fontWeight": "500",
916
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
917
+ },
918
+ ".txt-small": {
919
+ "fontSize": "0.8125rem",
920
+ "lineHeight": "1.375rem",
921
+ "fontWeight": "400",
922
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
923
+ },
924
+ ".txt-xsmall": {
925
+ "fontSize": "0.75rem",
926
+ "lineHeight": "1.25rem",
927
+ "fontWeight": "400",
928
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
929
+ },
930
+ ".txt-compact-large-plus": {
816
931
  "fontSize": "1rem",
817
932
  "lineHeight": "1.25rem",
818
933
  "fontWeight": "500",
@@ -844,10 +959,10 @@ var init_plugin = __esm({
844
959
  borderColor: "var(--border-base)"
845
960
  }
846
961
  });
847
- addComponents(components);
848
962
  addComponents(typography);
849
963
  addBase({
850
- ":root": { ...colors.light, ...effects.light }
964
+ ":root": { ...colors.light, ...effects.light },
965
+ ...components.light
851
966
  });
852
967
  if (darkMode === "class") {
853
968
  addBase({
@@ -856,7 +971,8 @@ var init_plugin = __esm({
856
971
  } else {
857
972
  addBase({
858
973
  "@media (prefers-color-scheme: dark)": {
859
- ":root": { ...colors.dark, ...effects.dark }
974
+ ":root": { ...colors.dark, ...effects.dark },
975
+ ...components.dark
860
976
  }
861
977
  });
862
978
  }
@@ -870,7 +986,21 @@ var init_plugin = __esm({
870
986
  mono: FONT_FAMILY_MONO
871
987
  },
872
988
  transitionProperty: {
873
- fg: "color, background-color, border-color, box-shadow"
989
+ fg: "color, background-color, border-color, box-shadow, opacity"
990
+ },
991
+ keyframes: {
992
+ "accordion-down": {
993
+ from: { height: "0px" },
994
+ to: { height: "var(--radix-accordion-content-height)" }
995
+ },
996
+ "accordion-up": {
997
+ from: { height: "var(--radix-accordion-content-height)" },
998
+ to: { height: "0px" }
999
+ }
1000
+ },
1001
+ animation: {
1002
+ "accordion-down": "accordion-down 0.2s ease-out",
1003
+ "accordion-up": "accordion-up 0.2s ease-out"
874
1004
  }
875
1005
  }
876
1006
  }