@onereach/styles 2.37.4-beta.2568.0 → 2.37.4-beta.2579.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/tailwind.config.preset.js +239 -130
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "2.37.4-beta.2568.0",
3
+ "version": "2.37.4-beta.2579.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
package/tailwind.config.preset.js CHANGED
@@ -37,32 +37,37 @@ module.exports = {
37
37
  ...parseSpacingTokens(spacingTokens),
38
38
  },
39
39
 
40
+ textColor: {
41
+ ...parseColorTokens(colorTokens, ['generic', 'text']),
42
+ 'transparent': 'transparent',
43
+ 'current': 'currentColor',
44
+ 'inherit': 'inherit',
45
+ },
46
+
40
47
  backgroundColor: {
41
48
  // Avoid using `text` colors as a background (only for corner cases)
42
49
  ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
43
50
  'transparent': 'transparent',
51
+ 'current': 'currentColor',
52
+ 'inherit': 'inherit',
44
53
  },
45
54
 
46
55
  backgroundImage: {
47
- ...parseColorTokens(gradientTokens, ['generic', 'background']),
48
- },
49
-
50
- textColor: {
51
- ...parseColorTokens(colorTokens, ['generic', 'text']),
52
- 'transparent': 'transparent',
53
- 'inherit': 'inherit',
56
+ ...parseColorTokens(gradientTokens, ['generic']),
54
57
  },
55
58
 
56
59
  borderColor: {
57
60
  ...parseColorTokens(colorTokens, ['generic']),
58
61
  'transparent': 'transparent',
59
62
  'current': 'currentColor',
63
+ 'inherit': 'inherit',
60
64
  },
61
65
 
62
66
  outlineColor: {
63
67
  ...parseColorTokens(colorTokens, ['generic']),
64
68
  'transparent': 'transparent',
65
69
  'current': 'currentColor',
70
+ 'inherit': 'inherit',
66
71
  },
67
72
 
68
73
  fill: {
@@ -83,7 +88,7 @@ module.exports = {
83
88
  animation: {
84
89
  'circular-loader': 'circular-loader 1400ms linear infinite',
85
90
  'linear-loader': 'linear-loader 1400ms linear infinite',
86
- 'skeleton-loader': 'skeleton-loader 1.5s linear 0s infinite normal forwards',
91
+ 'skeleton-loader': 'skeleton-loader 1400ms linear infinite',
87
92
  },
88
93
 
89
94
  keyframes: {
@@ -115,8 +120,7 @@ module.exports = {
115
120
 
116
121
  '100%': {
117
122
  strokeDasharray: '25%, 100%',
118
- // calc added here only for safari support
119
- strokeDashoffset: 'calc((100% - 0px) * -2.5)',
123
+ strokeDashoffset: 'calc((100% - 0px) * -2.5)', // Workaround for Safari
120
124
  },
121
125
  },
122
126
 
@@ -143,7 +147,7 @@ module.exports = {
143
147
  },
144
148
 
145
149
  boxShadow: {
146
- 'none': '0 0 #0000',
150
+ 'none': '0 0 #00000000',
147
151
  ...parseBoxShadowTokens(boxShadowTokens),
148
152
  DEFAULT: '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
149
153
  },
@@ -243,7 +247,7 @@ module.exports = {
243
247
 
244
248
  return {
245
249
  display: prefix + 'flex',
246
- flexDirection: direction,
250
+ flexFlow: `${direction} nowrap`,
247
251
  flex: prefix === 'inline-' ? '0 0 auto' : undefined,
248
252
  alignItems: direction === 'row' ? 'center' : undefined,
249
253
  };
@@ -346,10 +350,10 @@ module.exports = {
346
350
  }),
347
351
  }, {
348
352
  values: {
349
- 'outlined': '"opsz" 24, "wght" 400, "FILL" 0, "GRAD" 0',
353
+ 'outlined': '"opsz" 48, "wght" 400, "FILL" 0, "GRAD" 0',
350
354
  'outlined-bold': '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
351
355
 
352
- 'filled': '"opsz" 24, "wght" 400, "FILL" 1, "GRAD" 0',
356
+ 'filled': '"opsz" 48, "wght" 400, "FILL" 1, "GRAD" 0',
353
357
  'filled-bold': '"opsz" 24, "wght" 700, "FILL" 1, "GRAD" 0',
354
358
 
355
359
  'inherit': 'inherit',
@@ -365,15 +369,15 @@ module.exports = {
365
369
  const [token, suffix = ''] = value.split('..');
366
370
 
367
371
  return {
368
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
369
372
  color: theme(`textColor.on-${token}` + suffix),
373
+ backgroundColor: theme(`backgroundColor.${token}` + suffix),
370
374
 
371
375
  borderStyle: 'none',
372
376
  outlineStyle: 'none',
373
377
 
374
378
  '&[disabled]': {
375
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
376
379
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
380
+ backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
377
381
  },
378
382
 
379
383
  '&:not(.interactivity-none)': {
@@ -396,15 +400,15 @@ module.exports = {
396
400
  const [token, suffix = ''] = value.split('..');
397
401
 
398
402
  return {
399
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
400
403
  color: theme(`textColor.${token}` + suffix),
404
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
401
405
 
402
406
  borderStyle: 'none',
403
407
  outlineStyle: 'none',
404
408
 
405
409
  '&[disabled]': {
406
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
407
410
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
411
+ backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
408
412
  },
409
413
 
410
414
  '&:not(.interactivity-none)': {
@@ -427,15 +431,15 @@ module.exports = {
427
431
  const [token, suffix = ''] = value.split('..');
428
432
 
429
433
  return {
430
- backgroundColor: 'transparent',
431
434
  color: theme(`textColor.${token}` + suffix),
435
+ backgroundColor: 'transparent',
432
436
 
433
437
  borderStyle: 'none',
434
438
  outlineStyle: 'none',
435
439
 
436
440
  '&[disabled]': {
437
- backgroundColor: 'transparent !important',
438
441
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
442
+ backgroundColor: 'transparent !important',
439
443
  },
440
444
 
441
445
  '&:not(.interactivity-none)': {
@@ -458,15 +462,15 @@ module.exports = {
458
462
  const [token, suffix = ''] = value.split('..');
459
463
 
460
464
  return {
461
- backgroundColor: 'transparent',
462
465
  color: theme(`textColor.${token}` + suffix),
466
+ backgroundColor: 'transparent',
463
467
 
464
468
  borderStyle: 'none',
465
469
  outlineStyle: 'none',
466
470
 
467
471
  '&[disabled]': {
468
- backgroundColor: 'transparent !important',
469
472
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
473
+ backgroundColor: 'transparent !important',
470
474
  },
471
475
 
472
476
  '&:not(.interactivity-none)': {
@@ -506,26 +510,32 @@ module.exports = {
506
510
  },
507
511
  });
508
512
 
509
- // Backgrounds
513
+ // Foregrounds
510
514
  matchUtilities({
511
- 'theme-background': (value) => {
515
+ 'theme-foreground': (value) => {
512
516
  const [token, suffix = ''] = value.split('..');
513
517
 
514
518
  return {
515
- backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
519
+ color: theme(`textColor.${token}` + suffix, token),
516
520
 
517
521
  '&[disabled]': {
518
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
522
+ color: `${theme('textColor.on-disabled' + suffix)} !important`,
519
523
  },
520
524
  };
521
525
  },
522
526
  }, {
523
527
  values: {
524
- 'default': 'background',
525
- 'default-dark': 'background..-dark',
528
+ 'default': 'on-background',
529
+ 'default-dark': 'on-background..-dark',
526
530
 
527
- 'disabled': 'disabled',
528
- 'disabled-dark': 'disabled..-dark',
531
+ 'disabled': 'on-disabled',
532
+ 'disabled-dark': 'on-disabled..-dark',
533
+
534
+ 'outline': 'outline',
535
+ 'outline-dark': 'outline..-dark',
536
+
537
+ 'outline-variant': 'outline-variant',
538
+ 'outline-variant-dark': 'outline-variant..-dark',
529
539
 
530
540
  'primary': 'primary',
531
541
  'primary-dark': 'primary..-dark',
@@ -563,97 +573,100 @@ module.exports = {
563
573
  'error-hover': 'error-hover',
564
574
  'error-hover-dark': 'error-hover..-dark',
565
575
 
566
- 'primary-opacity': 'primary-opacity-0-08',
567
- 'primary-opacity-dark': 'primary-opacity-0-08..-dark',
576
+ 'primary-inverse': 'primary-inverse',
577
+ 'primary-inverse-dark': 'primary-inverse..-dark',
568
578
 
569
- // 'secondary-opacity': 'secondary-opacity-0-08',
570
- // 'secondary-opacity-dark': 'secondary-opacity-0-08..-dark',
579
+ // 'secondary-inverse': 'secondary-inverse',
580
+ // 'secondary-inverse-dark': 'secondary-inverse..-dark',
571
581
 
572
- // 'tertiary-opacity': 'tertiary-opacity-0-08',
573
- // 'tertiary-opacity-dark': 'tertiary-opacity-0-08..-dark',
582
+ // 'tertiary-inverse': 'tertiary-inverse',
583
+ // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
574
584
 
575
- 'success-opacity': 'success-opacity-0-08',
576
- 'success-opacity-dark': 'success-opacity-0-08..-dark',
585
+ // 'success-inverse': 'success-inverse',
586
+ // 'success-inverse-dark': 'success-inverse..-dark',
577
587
 
578
- 'warning-opacity': 'warning-opacity-0-08',
579
- 'warning-opacity-dark': 'warning-opacity-0-08..-dark',
588
+ // 'warning-inverse': 'warning-inverse',
589
+ // 'warning-inverse-dark': 'warning-inverse..-dark',
580
590
 
581
- 'error-opacity': 'error-opacity-0-08',
582
- 'error-opacity-dark': 'error-opacity-0-08..-dark',
591
+ // 'error-inverse': 'error-inverse',
592
+ // 'error-inverse-dark': 'error-inverse..-dark',
583
593
 
584
- 'primary-container': 'primary-container',
585
- 'primary-container-dark': 'primary-container..-dark',
594
+ 'on-primary': 'on-primary',
595
+ 'on-primary-dark': 'on-primary..-dark',
586
596
 
587
- 'secondary-container': 'secondary-container',
588
- 'secondary-container-dark': 'secondary-container..-dark',
597
+ 'on-secondary': 'on-secondary',
598
+ 'on-secondary-dark': 'on-secondary..-dark',
589
599
 
590
- 'tertiary-container': 'tertiary-container',
591
- 'tertiary-container-dark': 'tertiary-container..-dark',
600
+ 'on-tertiary': 'on-tertiary',
601
+ 'on-tertiary-dark': 'on-tertiary..-dark',
592
602
 
593
- 'success-container': 'success-container',
594
- 'success-container-dark': 'success-container..-dark',
603
+ 'on-success': 'on-success',
604
+ 'on-success-dark': 'on-success..-dark',
595
605
 
596
- 'warning-container': 'warning-container',
597
- 'warning-container-dark': 'warning-container..-dark',
606
+ 'on-warning': 'on-warning',
607
+ 'on-warning-dark': 'on-warning..-dark',
598
608
 
599
- 'error-container': 'error-container',
600
- 'error-container-dark': 'error-container..-dark',
609
+ 'on-error': 'on-error',
610
+ 'on-error-dark': 'on-error..-dark',
601
611
 
602
- 'surface': 'surface',
603
- 'surface-dark': 'surface..-dark',
612
+ 'on-primary-container': 'on-primary-container',
613
+ 'on-primary-container-dark': 'on-primary-container..-dark',
604
614
 
605
- 'surface-1': 'surface-1',
606
- 'surface-1-dark': 'surface-1..-dark',
615
+ 'on-secondary-container': 'on-secondary-container',
616
+ 'on-secondary-container-dark': 'on-secondary-container..-dark',
607
617
 
608
- 'surface-2': 'surface-2',
609
- 'surface-2-dark': 'surface-2..-dark',
618
+ 'on-tertiary-container': 'on-tertiary-container',
619
+ 'on-tertiary-container-dark': 'on-tertiary-container..-dark',
610
620
 
611
- 'surface-3': 'surface-3',
612
- 'surface-3-dark': 'surface-3..-dark',
621
+ 'on-success-container': 'on-success-container',
622
+ 'on-success-container-dark': 'on-success-container..-dark',
613
623
 
614
- 'surface-4': 'surface-4',
615
- 'surface-4-dark': 'surface-4..-dark',
624
+ 'on-warning-container': 'on-warning-container',
625
+ 'on-warning-container-dark': 'on-warning-container..-dark',
616
626
 
617
- 'surface-5': 'surface-5',
618
- 'surface-5-dark': 'surface-5..-dark',
627
+ 'on-error-container': 'on-error-container',
628
+ 'on-error-container-dark': 'on-error-container..-dark',
619
629
 
620
- 'surface-variant': 'surface-variant',
621
- 'surface-variant-dark': 'surface-variant..-dark',
630
+ 'on-surface': 'on-surface',
631
+ 'on-surface-dark': 'on-surface..-dark',
622
632
 
623
- 'surface-inverse': 'inverse-surface',
624
- 'surface-inverse-dark': 'inverse-surface..-dark',
633
+ 'on-surface-variant': 'on-surface-variant',
634
+ 'on-surface-variant-dark': 'on-surface-variant..-dark',
635
+
636
+ 'on-surface-inverse': 'inverse-on-surface',
637
+ 'on-surface-inverse-dark': 'inverse-on-surface..-dark',
625
638
 
626
639
  'transparent': 'transparent',
627
640
  'transparent-dark': 'transparent..-dark',
641
+
642
+ 'current': 'current',
643
+ 'current-dark': 'current..-dark',
644
+
645
+ 'inherit': 'inherit',
646
+ 'inherit-dark': 'inherit..-dark',
628
647
  },
629
648
  });
630
649
 
631
- // Foregrounds
650
+ // Backgrounds
632
651
  matchUtilities({
633
- 'theme-foreground': (value) => {
652
+ 'theme-background': (value) => {
634
653
  const [token, suffix = ''] = value.split('..');
635
654
 
636
655
  return {
637
- color: theme(`textColor.${token}` + suffix, token),
656
+ backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
638
657
 
639
658
  '&[disabled]': {
640
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
659
+ backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
641
660
  },
642
661
  };
643
662
  },
644
663
  }, {
645
664
  values: {
646
- 'default': 'on-background',
647
- 'default-dark': 'on-background..-dark',
648
-
649
- 'disabled': 'on-disabled',
650
- 'disabled-dark': 'on-disabled..-dark',
651
-
652
- 'outline': 'outline',
653
- 'outline-dark': 'outline..-dark',
665
+ 'default': 'background',
666
+ 'default-dark': 'background..-dark',
654
667
 
655
- 'outline-variant': 'outline-variant',
656
- 'outline-variant-dark': 'outline-variant..-dark',
668
+ 'disabled': 'disabled',
669
+ 'disabled-dark': 'disabled..-dark',
657
670
 
658
671
  'primary': 'primary',
659
672
  'primary-dark': 'primary..-dark',
@@ -691,72 +704,72 @@ module.exports = {
691
704
  'error-hover': 'error-hover',
692
705
  'error-hover-dark': 'error-hover..-dark',
693
706
 
694
- 'primary-inverse': 'primary-inverse',
695
- 'primary-inverse-dark': 'primary-inverse..-dark',
707
+ 'primary-translucent': 'primary-opacity-0-08',
708
+ 'primary-translucent-dark': 'primary-opacity-0-08..-dark',
696
709
 
697
- // 'secondary-inverse': 'secondary-inverse',
698
- // 'secondary-inverse-dark': 'secondary-inverse..-dark',
710
+ // 'secondary-translucent': 'secondary-opacity-0-08',
711
+ // 'secondary-translucent-dark': 'secondary-opacity-0-08..-dark',
699
712
 
700
- // 'tertiary-inverse': 'tertiary-inverse',
701
- // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
713
+ // 'tertiary-translucent': 'tertiary-opacity-0-08',
714
+ // 'tertiary-translucent-dark': 'tertiary-opacity-0-08..-dark',
702
715
 
703
- // 'success-inverse': 'success-inverse',
704
- // 'success-inverse-dark': 'success-inverse..-dark',
716
+ 'success-translucent': 'success-opacity-0-08',
717
+ 'success-translucent-dark': 'success-opacity-0-08..-dark',
705
718
 
706
- // 'warning-inverse': 'warning-inverse',
707
- // 'warning-inverse-dark': 'warning-inverse..-dark',
719
+ 'warning-translucent': 'warning-opacity-0-08',
720
+ 'warning-translucent-dark': 'warning-opacity-0-08..-dark',
708
721
 
709
- // 'error-inverse': 'error-inverse',
710
- // 'error-inverse-dark': 'error-inverse..-dark',
722
+ 'error-translucent': 'error-opacity-0-08',
723
+ 'error-translucent-dark': 'error-opacity-0-08..-dark',
711
724
 
712
- 'on-primary': 'on-primary',
713
- 'on-primary-dark': 'on-primary..-dark',
714
-
715
- 'on-secondary': 'on-secondary',
716
- 'on-secondary-dark': 'on-secondary..-dark',
725
+ 'primary-container': 'primary-container',
726
+ 'primary-container-dark': 'primary-container..-dark',
717
727
 
718
- 'on-tertiary': 'on-tertiary',
719
- 'on-tertiary-dark': 'on-tertiary..-dark',
728
+ 'secondary-container': 'secondary-container',
729
+ 'secondary-container-dark': 'secondary-container..-dark',
720
730
 
721
- 'on-success': 'on-success',
722
- 'on-success-dark': 'on-success..-dark',
731
+ 'tertiary-container': 'tertiary-container',
732
+ 'tertiary-container-dark': 'tertiary-container..-dark',
723
733
 
724
- 'on-warning': 'on-warning',
725
- 'on-warning-dark': 'on-warning..-dark',
734
+ 'success-container': 'success-container',
735
+ 'success-container-dark': 'success-container..-dark',
726
736
 
727
- 'on-error': 'on-error',
728
- 'on-error-dark': 'on-error..-dark',
737
+ 'warning-container': 'warning-container',
738
+ 'warning-container-dark': 'warning-container..-dark',
729
739
 
730
- 'on-primary-container': 'on-primary-container',
731
- 'on-primary-container-dark': 'on-primary-container..-dark',
740
+ 'error-container': 'error-container',
741
+ 'error-container-dark': 'error-container..-dark',
732
742
 
733
- 'on-secondary-container': 'on-secondary-container',
734
- 'on-secondary-container-dark': 'on-secondary-container..-dark',
743
+ 'surface': 'surface',
744
+ 'surface-dark': 'surface..-dark',
735
745
 
736
- 'on-tertiary-container': 'on-tertiary-container',
737
- 'on-tertiary-container-dark': 'on-tertiary-container..-dark',
746
+ 'surface-1': 'surface-1',
747
+ 'surface-1-dark': 'surface-1..-dark',
738
748
 
739
- 'on-success-container': 'on-success-container',
740
- 'on-success-container-dark': 'on-success-container..-dark',
749
+ 'surface-2': 'surface-2',
750
+ 'surface-2-dark': 'surface-2..-dark',
741
751
 
742
- 'on-warning-container': 'on-warning-container',
743
- 'on-warning-container-dark': 'on-warning-container..-dark',
752
+ 'surface-3': 'surface-3',
753
+ 'surface-3-dark': 'surface-3..-dark',
744
754
 
745
- 'on-error-container': 'on-error-container',
746
- 'on-error-container-dark': 'on-error-container..-dark',
755
+ 'surface-4': 'surface-4',
756
+ 'surface-4-dark': 'surface-4..-dark',
747
757
 
748
- 'on-surface': 'on-surface',
749
- 'on-surface-dark': 'on-surface..-dark',
758
+ 'surface-5': 'surface-5',
759
+ 'surface-5-dark': 'surface-5..-dark',
750
760
 
751
- 'on-surface-variant': 'on-surface-variant',
752
- 'on-surface-variant-dark': 'on-surface-variant..-dark',
761
+ 'surface-variant': 'surface-variant',
762
+ 'surface-variant-dark': 'surface-variant..-dark',
753
763
 
754
- 'on-surface-inverse': 'inverse-on-surface',
755
- 'on-surface-inverse-dark': 'inverse-on-surface..-dark',
764
+ 'surface-inverse': 'inverse-surface',
765
+ 'surface-inverse-dark': 'inverse-surface..-dark',
756
766
 
757
767
  'transparent': 'transparent',
758
768
  'transparent-dark': 'transparent..-dark',
759
769
 
770
+ 'current': 'current',
771
+ 'current-dark': 'current..-dark',
772
+
760
773
  'inherit': 'inherit',
761
774
  'inherit-dark': 'inherit..-dark',
762
775
  },
@@ -803,11 +816,32 @@ module.exports = {
803
816
  'error': 'error',
804
817
  'error-dark': 'error..-dark',
805
818
 
819
+ 'primary-translucent': 'primary-opacity-0-16',
820
+ 'primary-translucent-dark': 'primary-opacity-0-16..-dark',
821
+
822
+ // 'secondary-translucent': 'secondary-opacity-0-16',
823
+ // 'secondary-translucent-dark': 'secondary-opacity-0-16..-dark',
824
+
825
+ // 'tertiary-translucent': 'tertiary-opacity-0-16',
826
+ // 'tertiary-translucent-dark': 'tertiary-opacity-0-16..-dark',
827
+
828
+ 'success-translucent': 'success-opacity-0-16',
829
+ 'success-translucent-dark': 'success-opacity-0-16..-dark',
830
+
831
+ 'warning-translucent': 'warning-opacity-0-16',
832
+ 'warning-translucent-dark': 'warning-opacity-0-16..-dark',
833
+
834
+ 'error-translucent': 'error-opacity-0-16',
835
+ 'error-translucent-dark': 'error-opacity-0-16..-dark',
836
+
806
837
  'transparent': 'transparent',
807
838
  'transparent-dark': 'transparent..-dark',
808
839
 
809
840
  'current': 'current',
810
841
  'current-dark': 'current..-dark',
842
+
843
+ 'inherit': 'inherit',
844
+ 'inherit-dark': 'inherit..-dark',
811
845
  },
812
846
  });
813
847
 
@@ -851,24 +885,96 @@ module.exports = {
851
885
  'error': 'error',
852
886
  'error-dark': 'error..-dark',
853
887
 
888
+ 'primary-translucent': 'primary-opacity-0-16',
889
+ 'primary-translucent-dark': 'primary-opacity-0-16..-dark',
890
+
891
+ // 'secondary-translucent': 'secondary-opacity-0-16',
892
+ // 'secondary-translucent-dark': 'secondary-opacity-0-16..-dark',
893
+
894
+ // 'tertiary-translucent': 'tertiary-opacity-0-16',
895
+ // 'tertiary-translucent-dark': 'tertiary-opacity-0-16..-dark',
896
+
897
+ 'success-translucent': 'success-opacity-0-16',
898
+ 'success-translucent-dark': 'success-opacity-0-16..-dark',
899
+
900
+ 'warning-translucent': 'warning-opacity-0-16',
901
+ 'warning-translucent-dark': 'warning-opacity-0-16..-dark',
902
+
903
+ 'error-translucent': 'error-opacity-0-16',
904
+ 'error-translucent-dark': 'error-opacity-0-16..-dark',
905
+
854
906
  'transparent': 'transparent',
855
907
  'transparent-dark': 'transparent..-dark',
856
908
 
857
909
  'current': 'current',
858
910
  'current-dark': 'current..-dark',
911
+
912
+ 'inherit': 'inherit',
913
+ 'inherit-dark': 'inherit..-dark',
859
914
  },
860
915
  });
861
916
 
862
917
  addUtilities({
918
+ '.theme-border-overline': {
919
+ borderStyle: 'none !important',
920
+ borderTopStyle: 'solid !important',
921
+ },
922
+
863
923
  '.theme-border-underline': {
864
- borderStyle: 'none',
865
- borderBottomStyle: 'solid',
924
+ borderStyle: 'none !important',
925
+ borderBottomStyle: 'solid !important',
866
926
  },
867
927
  });
868
928
 
869
929
  // Outlines
870
930
  matchUtilities({
871
- 'theme-outline': (value) => {
931
+ 'theme-outline-1': (value) => {
932
+ const [token, suffix = ''] = value.split('..');
933
+
934
+ return {
935
+ // In Safari outline doesn't follow current border-radius
936
+ // It seems like this is already fixed in Safari Technology Preview (Release 157)
937
+ // Stay tuned for Safari updates
938
+ boxShadow: `0 0 0 1px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
939
+ // outlineOffset: '0',
940
+ // outlineWidth: theme('outlineWidth.2'),
941
+ // outlineStyle: 'solid',
942
+ // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
943
+ };
944
+ },
945
+ }, {
946
+ values: {
947
+ 'primary': 'primary',
948
+ 'primary-dark': 'primary..-dark',
949
+
950
+ 'secondary': 'secondary',
951
+ 'secondary-dark': 'secondary..-dark',
952
+
953
+ 'tertiary': 'tertiary',
954
+ 'tertiary-dark': 'tertiary..-dark',
955
+
956
+ 'success': 'success',
957
+ 'success-dark': 'success..-dark',
958
+
959
+ 'warning': 'warning',
960
+ 'warning-dark': 'warning..-dark',
961
+
962
+ 'error': 'error',
963
+ 'error-dark': 'error..-dark',
964
+
965
+ 'transparent': 'transparent',
966
+ 'transparent-dark': 'transparent..-dark',
967
+
968
+ 'current': 'current',
969
+ 'current-dark': 'current..-dark',
970
+
971
+ 'inherit': 'inherit',
972
+ 'inherit-dark': 'inherit..-dark',
973
+ },
974
+ });
975
+
976
+ matchUtilities({
977
+ 'theme-outline-2': (value) => {
872
978
  const [token, suffix = ''] = value.split('..');
873
979
 
874
980
  return {
@@ -907,6 +1013,9 @@ module.exports = {
907
1013
 
908
1014
  'current': 'current',
909
1015
  'current-dark': 'current..-dark',
1016
+
1017
+ 'inherit': 'inherit',
1018
+ 'inherit-dark': 'inherit..-dark',
910
1019
  },
911
1020
  });
912
1021
  }),