@onereach/styles 2.37.4-beta.2590.0 → 2.37.4

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