@medusajs/ui-preset 1.0.1 → 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 (10) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +23 -0
  3. package/dist/index.js +210 -73
  4. package/dist/index.mjs +210 -73
  5. package/package.json +1 -1
  6. package/src/plugin.ts +3 -2
  7. package/src/theme/extension/theme.ts +58 -26
  8. package/src/theme/tokens/colors.ts +47 -7
  9. package/src/theme/tokens/components.ts +74 -10
  10. package/src/theme/tokens/effects.ts +26 -26
package/.turbo/turbo-build.log CHANGED
@@ -6,11 +6,11 @@ CLI Target: node16
6
6
  CLI Cleaning output folder
7
7
  CJS Build start
8
8
  ESM Build start
9
- CJS dist/index.js 37.32 KB
10
- CJS ⚡️ Build success in 10ms
11
- ESM dist/index.mjs 40.91 KB
12
- ESM ⚡️ Build success in 10ms
9
+ CJS dist/index.js 45.02 KB
10
+ CJS ⚡️ Build success in 16ms
11
+ ESM dist/index.mjs 49.15 KB
12
+ ESM ⚡️ Build success in 18ms
13
13
  DTS Build start
14
- DTS ⚡️ Build success in 1386ms
14
+ DTS ⚡️ Build success in 1645ms
15
15
  DTS dist/index.d.ts 12.00 B
16
16
  DTS dist/index.d.mts 12.00 B
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @medusajs/ui-preset
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 035fa72: feat(ui,ui-preset): Release 2.1.0
8
+
9
+ ## `@medusajs/ui`
10
+
11
+ - The styling of buttons, inputs, and the CommandBar has been adjusted to have a more consistent look and feel.
12
+ - Fixed an issue that caused DropdownMenu.Content to overflow the viewport.
13
+ - Fixed an issue with the DatePicker component where deleting a time segment would throw an error.
14
+ - The Text component now accepts a `leading` prop to adjust the line height. It can be set to `normal` (default) or `compact`. This change in the API is fully backwards compatible.
15
+ - Adds a new subcomponent to RadioGroup called RadioGroup.ChoiceBox. This component wraps the RadioGroup.Item component with a mandatory label and description.
16
+
17
+ ## `@medusajs/ui-preset`
18
+
19
+ - Updated several colors, shadows, and gradient effects.
20
+
21
+ ## `@medusajs/icons`
22
+
23
+ - Introduces 6 new icons: QuestionMark, SparklesMiniSolid, SparklesMini, ThumbDown, ThumbUp, and UserCircleMini.
24
+ - There have been slight adjustments made to ArrowPathMini, EllipseBlueSolid, EllipseGreenSolid, EllipseGreySolid, EllipseOrangeSolid, EllipsePurpleSolid, and EllipseRedSolid.
25
+
3
26
  ## 1.0.1
4
27
 
5
28
  ### Patch Changes
package/dist/index.js CHANGED
@@ -38,11 +38,11 @@ var theme = {
38
38
  "button": {
39
39
  "inverted": {
40
40
  "DEFAULT": "var(--button-inverted)",
41
- "hover": {
42
- "DEFAULT": "var(--button-inverted-hover)"
43
- },
44
41
  "pressed": {
45
42
  "DEFAULT": "var(--button-inverted-pressed)"
43
+ },
44
+ "hover": {
45
+ "DEFAULT": "var(--button-inverted-hover)"
46
46
  }
47
47
  },
48
48
  "transparent": {
@@ -54,22 +54,22 @@ var theme = {
54
54
  "DEFAULT": "var(--button-transparent-pressed)"
55
55
  }
56
56
  },
57
- "danger": {
57
+ "neutral": {
58
58
  "pressed": {
59
- "DEFAULT": "var(--button-danger-pressed)"
59
+ "DEFAULT": "var(--button-neutral-pressed)"
60
60
  },
61
- "DEFAULT": "var(--button-danger)",
61
+ "DEFAULT": "var(--button-neutral)",
62
62
  "hover": {
63
- "DEFAULT": "var(--button-danger-hover)"
63
+ "DEFAULT": "var(--button-neutral-hover)"
64
64
  }
65
65
  },
66
- "neutral": {
66
+ "danger": {
67
+ "DEFAULT": "var(--button-danger)",
67
68
  "pressed": {
68
- "DEFAULT": "var(--button-neutral-pressed)"
69
+ "DEFAULT": "var(--button-danger-pressed)"
69
70
  },
70
- "DEFAULT": "var(--button-neutral)",
71
71
  "hover": {
72
- "DEFAULT": "var(--button-neutral-hover)"
72
+ "DEFAULT": "var(--button-danger-hover)"
73
73
  }
74
74
  }
75
75
  },
@@ -306,31 +306,63 @@ var theme = {
306
306
  "muted": {
307
307
  "DEFAULT": "var(--fg-muted)"
308
308
  }
309
+ },
310
+ "contrast": {
311
+ "bg": {
312
+ "subtle": {
313
+ "DEFAULT": "var(--contrast-bg-subtle)"
314
+ },
315
+ "base": {
316
+ "DEFAULT": "var(--contrast-bg-base)",
317
+ "pressed": {
318
+ "DEFAULT": "var(--contrast-bg-base-pressed)"
319
+ },
320
+ "hover": {
321
+ "DEFAULT": "var(--contrast-bg-base-hover)"
322
+ }
323
+ },
324
+ "highlight": {
325
+ "DEFAULT": "var(--contrast-bg-highlight)"
326
+ }
327
+ },
328
+ "border": {
329
+ "base": {
330
+ "DEFAULT": "var(--contrast-border-base)"
331
+ }
332
+ },
333
+ "fg": {
334
+ "primary": {
335
+ "DEFAULT": "var(--contrast-fg-primary)"
336
+ },
337
+ "secondary": {
338
+ "DEFAULT": "var(--contrast-fg-secondary)"
339
+ }
340
+ }
309
341
  }
310
342
  }
311
343
  },
312
344
  "boxShadow": {
313
- "elevation-flyout": "var(--elevation-flyout)",
314
- "elevation-tooltip": "var(--elevation-tooltip)",
345
+ "elevation-card-hover": "var(--elevation-card-hover)",
346
+ "elevation-modal": "var(--elevation-modal)",
347
+ "buttons-inverted": "var(--buttons-inverted)",
315
348
  "elevation-card-rest": "var(--elevation-card-rest)",
316
349
  "buttons-neutral-focus": "var(--buttons-neutral-focus)",
317
- "borders-focus": "var(--borders-focus)",
318
- "borders-interactive": "var(--borders-interactive)",
319
- "borders-active": "var(--borders-active)",
350
+ "borders-interactive-with-active": "var(--borders-interactive-with-active)",
351
+ "buttons-danger-focus": "var(--buttons-danger-focus)",
352
+ "borders-base": "var(--borders-base)",
353
+ "buttons-danger": "var(--buttons-danger)",
320
354
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
321
- "borders-error": "var(--borders-error)",
322
- "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
323
355
  "details-switch-handle": "var(--details-switch-handle)",
324
- "details-switch-background-focus": "var(--details-switch-background-focus)",
325
- "borders-base": "var(--borders-base)",
326
- "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
327
- "elevation-card-hover": "var(--elevation-card-hover)",
328
- "elevation-modal": "var(--elevation-modal)",
329
356
  "buttons-neutral": "var(--buttons-neutral)",
330
- "buttons-colored": "var(--buttons-colored)",
331
- "borders-base-with-shadow": "var(--borders-base-with-shadow)",
357
+ "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
358
+ "details-switch-background-focus": "var(--details-switch-background-focus)",
359
+ "borders-error": "var(--borders-error)",
360
+ "buttons-inverted-focus": "var(--buttons-inverted-focus)",
361
+ "borders-focus": "var(--borders-focus)",
332
362
  "details-switch-background": "var(--details-switch-background)",
333
- "buttons-colored-focus": "var(--buttons-colored-focus)"
363
+ "elevation-tooltip": "var(--elevation-tooltip)",
364
+ "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
365
+ "elevation-flyout": "var(--elevation-flyout)"
334
366
  }
335
367
  }
336
368
  };
@@ -346,6 +378,8 @@ var colors = {
346
378
  "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
347
379
  "--fg-on-color": "rgba(255, 255, 255, 1)",
348
380
  "--button-neutral-hover": "rgba(53, 55, 60, 1)",
381
+ "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
382
+ "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
349
383
  "--bg-switch-off": "rgba(53, 55, 60, 1)",
350
384
  "--border-strong": "rgba(53, 55, 60, 1)",
351
385
  "--fg-subtle": "rgba(173, 177, 184, 1)",
@@ -359,6 +393,8 @@ var colors = {
359
393
  "--tag-neutral-text": "rgba(173, 177, 184, 1)",
360
394
  "--fg-muted": "rgba(105, 110, 119, 1)",
361
395
  "--button-danger-pressed": "rgba(225, 29, 72, 1)",
396
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
397
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
362
398
  "--code-bg-header": "rgba(24, 24, 26, 1)",
363
399
  "--border-loud": "rgba(237, 238, 240, 1)",
364
400
  "--bg-base-pressed": "rgba(46, 48, 53, 1)",
@@ -379,6 +415,8 @@ var colors = {
379
415
  "--bg-overlay": "rgba(24, 24, 26, 0.7)",
380
416
  "--fg-on-inverted": "rgba(24, 24, 26, 1)",
381
417
  "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
418
+ "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
419
+ "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
382
420
  "--tag-red-border": "rgba(136, 19, 55, 1)",
383
421
  "--tag-red-bg": "rgba(76, 5, 25, 1)",
384
422
  "--button-transparent-hover": "rgba(39, 40, 45, 1)",
@@ -410,8 +448,14 @@ var colors = {
410
448
  "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
411
449
  "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
412
450
  "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
451
+ "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
452
+ "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
413
453
  "--button-inverted-hover": "rgba(255, 255, 255, 1)",
454
+ "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
455
+ "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
414
456
  "--button-danger-hover": "rgba(190, 18, 60, 1)",
457
+ "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
458
+ "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
415
459
  "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
416
460
  "--tag-blue-icon": "rgba(59, 130, 246, 1)",
417
461
  "--tag-red-icon": "rgba(244, 63, 94, 1)",
@@ -423,13 +467,20 @@ var colors = {
423
467
  "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
424
468
  "--bg-component": "rgba(39, 40, 45, 1)",
425
469
  "--bg-field": "rgba(39, 40, 45, 1)",
426
- "--bg-field-hover": "rgba(46, 48, 53, 1)"
470
+ "--bg-field-hover": "rgba(46, 48, 53, 1)",
471
+ "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
472
+ "--contrast-bg-base": "rgba(228, 228, 233, 1)",
473
+ "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
474
+ "--contrast-border-base": "rgba(185, 187, 198, 1)",
475
+ "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
476
+ "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
477
+ "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
478
+ "--contrast-bg-highlight": "rgba(242, 242, 245, 1)"
427
479
  },
428
480
  "light": {
429
481
  "--button-inverted": "rgba(3, 7, 18, 1)",
430
482
  "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
431
483
  "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
432
- "--button-inverted-hover": "rgba(31, 41, 55, 1)",
433
484
  "--code-text-base": "rgba(249, 250, 251, 1)",
434
485
  "--tag-green-bg": "rgba(209, 250, 229, 1)",
435
486
  "--border-strong": "rgba(209, 213, 219, 1)",
@@ -455,7 +506,6 @@ var colors = {
455
506
  "--fg-on-inverted": "rgba(255, 255, 255, 1)",
456
507
  "--fg-on-color": "rgba(255, 255, 255, 1)",
457
508
  "--button-transparent": "rgba(255, 255, 255, 0)",
458
- "--button-danger-pressed": "rgba(190, 18, 60, 1)",
459
509
  "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
460
510
  "--fg-interactive": "rgba(59, 130, 246, 1)",
461
511
  "--fg-error": "rgba(225, 29, 72, 1)",
@@ -494,15 +544,29 @@ var colors = {
494
544
  "--code-border": "rgba(55, 65, 81, 1)",
495
545
  "--code-icon": "rgba(107, 114, 128, 1)",
496
546
  "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
497
- "--button-inverted-pressed": "rgba(55, 65, 81, 1)",
547
+ "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
548
+ "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
498
549
  "--button-neutral": "rgba(255, 255, 255, 1)",
499
550
  "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
500
551
  "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
552
+ "--button-neutral-hover": "rgba(249, 250, 251, 1)",
553
+ "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
554
+ "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
501
555
  "--button-danger": "rgba(225, 29, 72, 1)",
502
556
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
503
557
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
504
- "--button-neutral-hover": "rgba(249, 250, 251, 1)",
505
- "--button-danger-hover": "rgba(225, 29, 72, 1)",
558
+ "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
559
+ "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
560
+ "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
561
+ "--button-danger-pressed": "rgba(159, 18, 57, 1)",
562
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
563
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
564
+ "--button-inverted-hover": "rgba(17, 24, 39, 1)",
565
+ "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
566
+ "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
567
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
568
+ "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
569
+ "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
506
570
  "--bg-component": "rgba(241, 243, 245, 1)",
507
571
  "--bg-overlay": "rgba(3, 7, 18, 0.4)",
508
572
  "--bg-switch-off": "rgba(229, 231, 235, 1)",
@@ -511,23 +575,95 @@ var colors = {
511
575
  "--bg-interactive": "rgba(59, 130, 246, 1)",
512
576
  "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
513
577
  "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
514
- "--bg-disabled": "rgba(243, 244, 246, 1)"
578
+ "--bg-disabled": "rgba(243, 244, 246, 1)",
579
+ "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
580
+ "--contrast-bg-base": "rgba(27, 27, 31, 1)",
581
+ "--contrast-border-base": "rgba(60, 63, 68, 1)",
582
+ "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
583
+ "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
584
+ "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
585
+ "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
586
+ "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
515
587
  }
516
588
  };
517
589
 
518
590
  // src/theme/tokens/components.ts
519
591
  var components = {
520
- ".button-inverted-gradient": {
521
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
522
- "opacity": "12%"
523
- },
524
- ".button-danger-gradient": {
525
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
526
- "opacity": "16%"
592
+ "dark": {
593
+ ".button-neutral-hover-gradient": {
594
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
595
+ "opacity": "6%"
596
+ },
597
+ ".button-danger-pressed-gradient": {
598
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
599
+ "opacity": "10%"
600
+ },
601
+ ".button-danger-gradient": {
602
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
603
+ "opacity": "10%"
604
+ },
605
+ ".button-neutral-pressed-gradient": {
606
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
607
+ "opacity": "6%"
608
+ },
609
+ ".button-neutral-gradient": {
610
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
611
+ "opacity": "6%"
612
+ },
613
+ ".button-inverted-pressed-gradient": {
614
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
615
+ "opacity": "12%"
616
+ },
617
+ ".button-inverted-hover-gradient": {
618
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
619
+ "opacity": "12%"
620
+ },
621
+ ".button-danger-hover-gradient": {
622
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
623
+ "opacity": "10%"
624
+ },
625
+ ".button-inverted-gradient": {
626
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
627
+ "opacity": "12%"
628
+ }
527
629
  },
528
- ".button-neutral-gradient": {
529
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
530
- "opacity": "6%"
630
+ "light": {
631
+ ".button-inverted-gradient": {
632
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
633
+ "opacity": "16%"
634
+ },
635
+ ".button-neutral-pressed-gradient": {
636
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
637
+ "opacity": "3%"
638
+ },
639
+ ".button-neutral-gradient": {
640
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
641
+ "opacity": "3%"
642
+ },
643
+ ".button-neutral-hover-gradient": {
644
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
645
+ "opacity": "3%"
646
+ },
647
+ ".button-danger-gradient": {
648
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
649
+ "opacity": "16%"
650
+ },
651
+ ".button-inverted-pressed-gradient": {
652
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
653
+ "opacity": "16%"
654
+ },
655
+ ".button-danger-pressed-gradient": {
656
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
657
+ "opacity": "16%"
658
+ },
659
+ ".button-inverted-hover-gradient": {
660
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
661
+ "opacity": "16%"
662
+ },
663
+ ".button-danger-hover-gradient": {
664
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
665
+ "opacity": "16%"
666
+ }
531
667
  }
532
668
  };
533
669
 
@@ -535,49 +671,49 @@ var components = {
535
671
  var effects = {
536
672
  "dark": {
537
673
  "--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)",
538
- "--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)",
539
- "--borders-base": "0px 0px 0px 1px rgba(46, 48, 53, 1)",
540
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
541
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(46, 48, 53, 1), 0px 0.5px 0px 1.5px rgba(0, 0, 0, 0.4)",
674
+ "--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)",
542
675
  "--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)",
543
676
  "--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)",
677
+ "--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)",
544
678
  "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
545
- "--buttons-colored-focus": "0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
679
+ "--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)",
680
+ "--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)",
681
+ "--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)",
682
+ "--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)",
683
+ "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
684
+ "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
546
685
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)",
686
+ "--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)",
547
687
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
548
- "--borders-interactive": "0px 0px 0px 1px rgba(96, 165, 250, 1)",
549
688
  "--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)",
550
689
  "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
551
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.25)",
552
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
553
690
  "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
554
691
  "--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)",
555
692
  "--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)",
556
- "--buttons-colored": "0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6)",
557
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6)"
693
+ "--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)"
558
694
  },
559
695
  "light": {
560
- "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
561
- "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
696
+ "--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)",
697
+ "--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)",
698
+ "--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)",
562
699
  "--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)",
563
- "--buttons-neutral-focus": "0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
564
- "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
565
- "--borders-interactive": "0px 0px 0px 1px rgba(59, 130, 246, 1)",
566
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.2)",
700
+ "--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)",
701
+ "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",
702
+ "--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)",
703
+ "--borders-base": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
704
+ "--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)",
567
705
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
568
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
569
- "--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)",
570
706
  "--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)",
707
+ "--buttons-neutral": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
708
+ "--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)",
571
709
  "--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)",
572
- "--borders-base": "0px 0px 0px 1px rgba(229, 231, 235, 1)",
573
- "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
574
- "--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)",
575
- "--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)",
576
- "--buttons-neutral": "0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16)",
577
- "--buttons-colored": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16)",
578
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(229, 231, 235, 1)",
710
+ "--borders-error": "0px 0px 0px 1px rgba(225, 29, 72, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
711
+ "--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)",
712
+ "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
579
713
  "--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)",
580
- "--buttons-colored-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.25px 0px 0px rgba(3, 7, 18, 0.2), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)"
714
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
715
+ "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
716
+ "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
581
717
  }
582
718
  };
583
719
 
@@ -788,10 +924,10 @@ var plugin_default = (0, import_plugin.default)(
788
924
  borderColor: "var(--border-base)"
789
925
  }
790
926
  });
791
- addComponents(components);
792
927
  addComponents(typography);
793
928
  addBase({
794
- ":root": { ...colors.light, ...effects.light }
929
+ ":root": { ...colors.light, ...effects.light },
930
+ ...components.light
795
931
  });
796
932
  if (darkMode === "class") {
797
933
  addBase({
@@ -800,7 +936,8 @@ var plugin_default = (0, import_plugin.default)(
800
936
  } else {
801
937
  addBase({
802
938
  "@media (prefers-color-scheme: dark)": {
803
- ":root": { ...colors.dark, ...effects.dark }
939
+ ":root": { ...colors.dark, ...effects.dark },
940
+ ...components.dark
804
941
  }
805
942
  });
806
943
  }
@@ -814,7 +951,7 @@ var plugin_default = (0, import_plugin.default)(
814
951
  mono: FONT_FAMILY_MONO
815
952
  },
816
953
  transitionProperty: {
817
- fg: "color, background-color, border-color, box-shadow"
954
+ fg: "color, background-color, border-color, box-shadow, opacity"
818
955
  },
819
956
  keyframes: {
820
957
  "accordion-down": {