@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/dist/index.mjs CHANGED
@@ -36,11 +36,11 @@ var init_theme = __esm({
36
36
  "button": {
37
37
  "inverted": {
38
38
  "DEFAULT": "var(--button-inverted)",
39
- "hover": {
40
- "DEFAULT": "var(--button-inverted-hover)"
41
- },
42
39
  "pressed": {
43
40
  "DEFAULT": "var(--button-inverted-pressed)"
41
+ },
42
+ "hover": {
43
+ "DEFAULT": "var(--button-inverted-hover)"
44
44
  }
45
45
  },
46
46
  "transparent": {
@@ -52,22 +52,22 @@ var init_theme = __esm({
52
52
  "DEFAULT": "var(--button-transparent-pressed)"
53
53
  }
54
54
  },
55
- "danger": {
55
+ "neutral": {
56
56
  "pressed": {
57
- "DEFAULT": "var(--button-danger-pressed)"
57
+ "DEFAULT": "var(--button-neutral-pressed)"
58
58
  },
59
- "DEFAULT": "var(--button-danger)",
59
+ "DEFAULT": "var(--button-neutral)",
60
60
  "hover": {
61
- "DEFAULT": "var(--button-danger-hover)"
61
+ "DEFAULT": "var(--button-neutral-hover)"
62
62
  }
63
63
  },
64
- "neutral": {
64
+ "danger": {
65
+ "DEFAULT": "var(--button-danger)",
65
66
  "pressed": {
66
- "DEFAULT": "var(--button-neutral-pressed)"
67
+ "DEFAULT": "var(--button-danger-pressed)"
67
68
  },
68
- "DEFAULT": "var(--button-neutral)",
69
69
  "hover": {
70
- "DEFAULT": "var(--button-neutral-hover)"
70
+ "DEFAULT": "var(--button-danger-hover)"
71
71
  }
72
72
  }
73
73
  },
@@ -304,31 +304,63 @@ var init_theme = __esm({
304
304
  "muted": {
305
305
  "DEFAULT": "var(--fg-muted)"
306
306
  }
307
+ },
308
+ "contrast": {
309
+ "bg": {
310
+ "subtle": {
311
+ "DEFAULT": "var(--contrast-bg-subtle)"
312
+ },
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
+ }
321
+ },
322
+ "highlight": {
323
+ "DEFAULT": "var(--contrast-bg-highlight)"
324
+ }
325
+ },
326
+ "border": {
327
+ "base": {
328
+ "DEFAULT": "var(--contrast-border-base)"
329
+ }
330
+ },
331
+ "fg": {
332
+ "primary": {
333
+ "DEFAULT": "var(--contrast-fg-primary)"
334
+ },
335
+ "secondary": {
336
+ "DEFAULT": "var(--contrast-fg-secondary)"
337
+ }
338
+ }
307
339
  }
308
340
  }
309
341
  },
310
342
  "boxShadow": {
311
- "elevation-flyout": "var(--elevation-flyout)",
312
- "elevation-tooltip": "var(--elevation-tooltip)",
343
+ "elevation-card-hover": "var(--elevation-card-hover)",
344
+ "elevation-modal": "var(--elevation-modal)",
345
+ "buttons-inverted": "var(--buttons-inverted)",
313
346
  "elevation-card-rest": "var(--elevation-card-rest)",
314
347
  "buttons-neutral-focus": "var(--buttons-neutral-focus)",
315
- "borders-focus": "var(--borders-focus)",
316
- "borders-interactive": "var(--borders-interactive)",
317
- "borders-active": "var(--borders-active)",
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)",
318
352
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
319
- "borders-error": "var(--borders-error)",
320
- "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
321
353
  "details-switch-handle": "var(--details-switch-handle)",
322
- "details-switch-background-focus": "var(--details-switch-background-focus)",
323
- "borders-base": "var(--borders-base)",
324
- "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
325
- "elevation-card-hover": "var(--elevation-card-hover)",
326
- "elevation-modal": "var(--elevation-modal)",
327
354
  "buttons-neutral": "var(--buttons-neutral)",
328
- "buttons-colored": "var(--buttons-colored)",
329
- "borders-base-with-shadow": "var(--borders-base-with-shadow)",
355
+ "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
356
+ "details-switch-background-focus": "var(--details-switch-background-focus)",
357
+ "borders-error": "var(--borders-error)",
358
+ "buttons-inverted-focus": "var(--buttons-inverted-focus)",
359
+ "borders-focus": "var(--borders-focus)",
330
360
  "details-switch-background": "var(--details-switch-background)",
331
- "buttons-colored-focus": "var(--buttons-colored-focus)"
361
+ "elevation-tooltip": "var(--elevation-tooltip)",
362
+ "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
363
+ "elevation-flyout": "var(--elevation-flyout)"
332
364
  }
333
365
  }
334
366
  };
@@ -350,6 +382,8 @@ var init_colors = __esm({
350
382
  "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
351
383
  "--fg-on-color": "rgba(255, 255, 255, 1)",
352
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)",
353
387
  "--bg-switch-off": "rgba(53, 55, 60, 1)",
354
388
  "--border-strong": "rgba(53, 55, 60, 1)",
355
389
  "--fg-subtle": "rgba(173, 177, 184, 1)",
@@ -363,6 +397,8 @@ var init_colors = __esm({
363
397
  "--tag-neutral-text": "rgba(173, 177, 184, 1)",
364
398
  "--fg-muted": "rgba(105, 110, 119, 1)",
365
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)",
366
402
  "--code-bg-header": "rgba(24, 24, 26, 1)",
367
403
  "--border-loud": "rgba(237, 238, 240, 1)",
368
404
  "--bg-base-pressed": "rgba(46, 48, 53, 1)",
@@ -383,6 +419,8 @@ var init_colors = __esm({
383
419
  "--bg-overlay": "rgba(24, 24, 26, 0.7)",
384
420
  "--fg-on-inverted": "rgba(24, 24, 26, 1)",
385
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)",
386
424
  "--tag-red-border": "rgba(136, 19, 55, 1)",
387
425
  "--tag-red-bg": "rgba(76, 5, 25, 1)",
388
426
  "--button-transparent-hover": "rgba(39, 40, 45, 1)",
@@ -414,8 +452,14 @@ var init_colors = __esm({
414
452
  "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
415
453
  "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
416
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)",
417
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)",
418
460
  "--button-danger-hover": "rgba(190, 18, 60, 1)",
461
+ "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
462
+ "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
419
463
  "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
420
464
  "--tag-blue-icon": "rgba(59, 130, 246, 1)",
421
465
  "--tag-red-icon": "rgba(244, 63, 94, 1)",
@@ -427,13 +471,20 @@ var init_colors = __esm({
427
471
  "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
428
472
  "--bg-component": "rgba(39, 40, 45, 1)",
429
473
  "--bg-field": "rgba(39, 40, 45, 1)",
430
- "--bg-field-hover": "rgba(46, 48, 53, 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)"
431
483
  },
432
484
  "light": {
433
485
  "--button-inverted": "rgba(3, 7, 18, 1)",
434
486
  "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
435
487
  "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
436
- "--button-inverted-hover": "rgba(31, 41, 55, 1)",
437
488
  "--code-text-base": "rgba(249, 250, 251, 1)",
438
489
  "--tag-green-bg": "rgba(209, 250, 229, 1)",
439
490
  "--border-strong": "rgba(209, 213, 219, 1)",
@@ -459,7 +510,6 @@ var init_colors = __esm({
459
510
  "--fg-on-inverted": "rgba(255, 255, 255, 1)",
460
511
  "--fg-on-color": "rgba(255, 255, 255, 1)",
461
512
  "--button-transparent": "rgba(255, 255, 255, 0)",
462
- "--button-danger-pressed": "rgba(190, 18, 60, 1)",
463
513
  "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
464
514
  "--fg-interactive": "rgba(59, 130, 246, 1)",
465
515
  "--fg-error": "rgba(225, 29, 72, 1)",
@@ -498,15 +548,29 @@ var init_colors = __esm({
498
548
  "--code-border": "rgba(55, 65, 81, 1)",
499
549
  "--code-icon": "rgba(107, 114, 128, 1)",
500
550
  "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
501
- "--button-inverted-pressed": "rgba(55, 65, 81, 1)",
551
+ "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
552
+ "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
502
553
  "--button-neutral": "rgba(255, 255, 255, 1)",
503
554
  "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
504
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)",
505
559
  "--button-danger": "rgba(225, 29, 72, 1)",
506
560
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
507
561
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
508
- "--button-neutral-hover": "rgba(249, 250, 251, 1)",
509
- "--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)",
572
+ "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
573
+ "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
510
574
  "--bg-component": "rgba(241, 243, 245, 1)",
511
575
  "--bg-overlay": "rgba(3, 7, 18, 0.4)",
512
576
  "--bg-switch-off": "rgba(229, 231, 235, 1)",
@@ -515,7 +579,15 @@ var init_colors = __esm({
515
579
  "--bg-interactive": "rgba(59, 130, 246, 1)",
516
580
  "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
517
581
  "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
518
- "--bg-disabled": "rgba(243, 244, 246, 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)"
519
591
  }
520
592
  };
521
593
  }
@@ -527,17 +599,81 @@ var init_components = __esm({
527
599
  "src/theme/tokens/components.ts"() {
528
600
  "use strict";
529
601
  components = {
530
- ".button-inverted-gradient": {
531
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
532
- "opacity": "12%"
533
- },
534
- ".button-danger-gradient": {
535
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
536
- "opacity": "16%"
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
+ }
537
639
  },
538
- ".button-neutral-gradient": {
539
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
540
- "opacity": "6%"
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
+ }
541
677
  }
542
678
  };
543
679
  }
@@ -551,49 +687,49 @@ var init_effects = __esm({
551
687
  effects = {
552
688
  "dark": {
553
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)",
554
- "--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)",
555
- "--borders-base": "0px 0px 0px 1px rgba(46, 48, 53, 1)",
556
- "--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)",
557
- "--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)",
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)",
558
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)",
559
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)",
560
694
  "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
561
- "--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)",
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)",
562
701
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)",
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)",
563
703
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
564
- "--borders-interactive": "0px 0px 0px 1px rgba(96, 165, 250, 1)",
565
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)",
566
705
  "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
567
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.25)",
568
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
569
706
  "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
570
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)",
571
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)",
572
- "--buttons-colored": "0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6)",
573
- "--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)"
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)"
574
710
  },
575
711
  "light": {
576
- "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
577
- "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
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)",
578
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)",
579
- "--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)",
580
- "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
581
- "--borders-interactive": "0px 0px 0px 1px rgba(59, 130, 246, 1)",
582
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.2)",
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)",
583
721
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
584
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
585
- "--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)",
586
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)",
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)",
587
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)",
588
- "--borders-base": "0px 0px 0px 1px rgba(229, 231, 235, 1)",
589
- "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
590
- "--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)",
591
- "--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)",
592
- "--buttons-neutral": "0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16)",
593
- "--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)",
594
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(229, 231, 235, 1)",
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)",
595
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)",
596
- "--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)"
730
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
731
+ "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
732
+ "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
597
733
  }
598
734
  };
599
735
  }
@@ -823,10 +959,10 @@ var init_plugin = __esm({
823
959
  borderColor: "var(--border-base)"
824
960
  }
825
961
  });
826
- addComponents(components);
827
962
  addComponents(typography);
828
963
  addBase({
829
- ":root": { ...colors.light, ...effects.light }
964
+ ":root": { ...colors.light, ...effects.light },
965
+ ...components.light
830
966
  });
831
967
  if (darkMode === "class") {
832
968
  addBase({
@@ -835,7 +971,8 @@ var init_plugin = __esm({
835
971
  } else {
836
972
  addBase({
837
973
  "@media (prefers-color-scheme: dark)": {
838
- ":root": { ...colors.dark, ...effects.dark }
974
+ ":root": { ...colors.dark, ...effects.dark },
975
+ ...components.dark
839
976
  }
840
977
  });
841
978
  }
@@ -849,7 +986,7 @@ var init_plugin = __esm({
849
986
  mono: FONT_FAMILY_MONO
850
987
  },
851
988
  transitionProperty: {
852
- fg: "color, background-color, border-color, box-shadow"
989
+ fg: "color, background-color, border-color, box-shadow, opacity"
853
990
  },
854
991
  keyframes: {
855
992
  "accordion-down": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medusajs/ui-preset",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Medusa UI preset",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/plugin.ts CHANGED
@@ -18,11 +18,11 @@ export default plugin(
18
18
  },
19
19
  })
20
20
 
21
- addComponents(components)
22
21
  addComponents(typography)
23
22
 
24
23
  addBase({
25
24
  ":root": { ...colors.light, ...effects.light },
25
+ ...components.light,
26
26
  })
27
27
 
28
28
  if (darkMode === "class") {
@@ -33,6 +33,7 @@ export default plugin(
33
33
  addBase({
34
34
  "@media (prefers-color-scheme: dark)": {
35
35
  ":root": { ...colors.dark, ...effects.dark },
36
+ ...components.dark,
36
37
  },
37
38
  })
38
39
  }
@@ -46,7 +47,7 @@ export default plugin(
46
47
  mono: FONT_FAMILY_MONO,
47
48
  },
48
49
  transitionProperty: {
49
- fg: "color, background-color, border-color, box-shadow",
50
+ fg: "color, background-color, border-color, box-shadow, opacity",
50
51
  },
51
52
  keyframes: {
52
53
  "accordion-down": {
package/src/theme/extension/theme.ts CHANGED
@@ -5,11 +5,11 @@ export const theme = {
5
5
  "button": {
6
6
  "inverted": {
7
7
  "DEFAULT": "var(--button-inverted)",
8
- "hover": {
9
- "DEFAULT": "var(--button-inverted-hover)"
10
- },
11
8
  "pressed": {
12
9
  "DEFAULT": "var(--button-inverted-pressed)"
10
+ },
11
+ "hover": {
12
+ "DEFAULT": "var(--button-inverted-hover)"
13
13
  }
14
14
  },
15
15
  "transparent": {
@@ -21,22 +21,22 @@ export const theme = {
21
21
  "DEFAULT": "var(--button-transparent-pressed)"
22
22
  }
23
23
  },
24
- "danger": {
24
+ "neutral": {
25
25
  "pressed": {
26
- "DEFAULT": "var(--button-danger-pressed)"
26
+ "DEFAULT": "var(--button-neutral-pressed)"
27
27
  },
28
- "DEFAULT": "var(--button-danger)",
28
+ "DEFAULT": "var(--button-neutral)",
29
29
  "hover": {
30
- "DEFAULT": "var(--button-danger-hover)"
30
+ "DEFAULT": "var(--button-neutral-hover)"
31
31
  }
32
32
  },
33
- "neutral": {
33
+ "danger": {
34
+ "DEFAULT": "var(--button-danger)",
34
35
  "pressed": {
35
- "DEFAULT": "var(--button-neutral-pressed)"
36
+ "DEFAULT": "var(--button-danger-pressed)"
36
37
  },
37
- "DEFAULT": "var(--button-neutral)",
38
38
  "hover": {
39
- "DEFAULT": "var(--button-neutral-hover)"
39
+ "DEFAULT": "var(--button-danger-hover)"
40
40
  }
41
41
  }
42
42
  },
@@ -273,31 +273,63 @@ export const theme = {
273
273
  "muted": {
274
274
  "DEFAULT": "var(--fg-muted)"
275
275
  }
276
+ },
277
+ "contrast": {
278
+ "bg": {
279
+ "subtle": {
280
+ "DEFAULT": "var(--contrast-bg-subtle)"
281
+ },
282
+ "base": {
283
+ "DEFAULT": "var(--contrast-bg-base)",
284
+ "pressed": {
285
+ "DEFAULT": "var(--contrast-bg-base-pressed)"
286
+ },
287
+ "hover": {
288
+ "DEFAULT": "var(--contrast-bg-base-hover)"
289
+ }
290
+ },
291
+ "highlight": {
292
+ "DEFAULT": "var(--contrast-bg-highlight)"
293
+ }
294
+ },
295
+ "border": {
296
+ "base": {
297
+ "DEFAULT": "var(--contrast-border-base)"
298
+ }
299
+ },
300
+ "fg": {
301
+ "primary": {
302
+ "DEFAULT": "var(--contrast-fg-primary)"
303
+ },
304
+ "secondary": {
305
+ "DEFAULT": "var(--contrast-fg-secondary)"
306
+ }
307
+ }
276
308
  }
277
309
  }
278
310
  },
279
311
  "boxShadow": {
280
- "elevation-flyout": "var(--elevation-flyout)",
281
- "elevation-tooltip": "var(--elevation-tooltip)",
312
+ "elevation-card-hover": "var(--elevation-card-hover)",
313
+ "elevation-modal": "var(--elevation-modal)",
314
+ "buttons-inverted": "var(--buttons-inverted)",
282
315
  "elevation-card-rest": "var(--elevation-card-rest)",
283
316
  "buttons-neutral-focus": "var(--buttons-neutral-focus)",
284
- "borders-focus": "var(--borders-focus)",
285
- "borders-interactive": "var(--borders-interactive)",
286
- "borders-active": "var(--borders-active)",
317
+ "borders-interactive-with-active": "var(--borders-interactive-with-active)",
318
+ "buttons-danger-focus": "var(--buttons-danger-focus)",
319
+ "borders-base": "var(--borders-base)",
320
+ "buttons-danger": "var(--buttons-danger)",
287
321
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
288
- "borders-error": "var(--borders-error)",
289
- "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
290
322
  "details-switch-handle": "var(--details-switch-handle)",
291
- "details-switch-background-focus": "var(--details-switch-background-focus)",
292
- "borders-base": "var(--borders-base)",
293
- "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
294
- "elevation-card-hover": "var(--elevation-card-hover)",
295
- "elevation-modal": "var(--elevation-modal)",
296
323
  "buttons-neutral": "var(--buttons-neutral)",
297
- "buttons-colored": "var(--buttons-colored)",
298
- "borders-base-with-shadow": "var(--borders-base-with-shadow)",
324
+ "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
325
+ "details-switch-background-focus": "var(--details-switch-background-focus)",
326
+ "borders-error": "var(--borders-error)",
327
+ "buttons-inverted-focus": "var(--buttons-inverted-focus)",
328
+ "borders-focus": "var(--borders-focus)",
299
329
  "details-switch-background": "var(--details-switch-background)",
300
- "buttons-colored-focus": "var(--buttons-colored-focus)"
330
+ "elevation-tooltip": "var(--elevation-tooltip)",
331
+ "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
332
+ "elevation-flyout": "var(--elevation-flyout)"
301
333
  }
302
334
  }
303
335
  }