@onereach/styles 2.37.4-beta.2525.0 → 2.37.4-beta.2533.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 +143 -120
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "2.37.4-beta.2525.0",
3
+ "version": "2.37.4-beta.2533.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: {
@@ -364,15 +369,15 @@ module.exports = {
364
369
  const [token, suffix = ''] = value.split('..');
365
370
 
366
371
  return {
367
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
368
372
  color: theme(`textColor.on-${token}` + suffix),
373
+ backgroundColor: theme(`backgroundColor.${token}` + suffix),
369
374
 
370
375
  borderStyle: 'none',
371
376
  outlineStyle: 'none',
372
377
 
373
378
  '&[disabled]': {
374
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
375
379
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
380
+ backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
376
381
  },
377
382
 
378
383
  '&:not(.interactivity-none)': {
@@ -395,15 +400,15 @@ module.exports = {
395
400
  const [token, suffix = ''] = value.split('..');
396
401
 
397
402
  return {
398
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
399
403
  color: theme(`textColor.${token}` + suffix),
404
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
400
405
 
401
406
  borderStyle: 'none',
402
407
  outlineStyle: 'none',
403
408
 
404
409
  '&[disabled]': {
405
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
406
410
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
411
+ backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
407
412
  },
408
413
 
409
414
  '&:not(.interactivity-none)': {
@@ -426,15 +431,15 @@ module.exports = {
426
431
  const [token, suffix = ''] = value.split('..');
427
432
 
428
433
  return {
429
- backgroundColor: 'transparent',
430
434
  color: theme(`textColor.${token}` + suffix),
435
+ backgroundColor: 'transparent',
431
436
 
432
437
  borderStyle: 'none',
433
438
  outlineStyle: 'none',
434
439
 
435
440
  '&[disabled]': {
436
- backgroundColor: 'transparent !important',
437
441
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
442
+ backgroundColor: 'transparent !important',
438
443
  },
439
444
 
440
445
  '&:not(.interactivity-none)': {
@@ -457,15 +462,15 @@ module.exports = {
457
462
  const [token, suffix = ''] = value.split('..');
458
463
 
459
464
  return {
460
- backgroundColor: 'transparent',
461
465
  color: theme(`textColor.${token}` + suffix),
466
+ backgroundColor: 'transparent',
462
467
 
463
468
  borderStyle: 'none',
464
469
  outlineStyle: 'none',
465
470
 
466
471
  '&[disabled]': {
467
- backgroundColor: 'transparent !important',
468
472
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
473
+ backgroundColor: 'transparent !important',
469
474
  },
470
475
 
471
476
  '&:not(.interactivity-none)': {
@@ -505,26 +510,32 @@ module.exports = {
505
510
  },
506
511
  });
507
512
 
508
- // Backgrounds
513
+ // Foregrounds
509
514
  matchUtilities({
510
- 'theme-background': (value) => {
515
+ 'theme-foreground': (value) => {
511
516
  const [token, suffix = ''] = value.split('..');
512
517
 
513
518
  return {
514
- backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
519
+ color: theme(`textColor.${token}` + suffix, token),
515
520
 
516
521
  '&[disabled]': {
517
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
522
+ color: `${theme('textColor.on-disabled' + suffix)} !important`,
518
523
  },
519
524
  };
520
525
  },
521
526
  }, {
522
527
  values: {
523
- 'default': 'background',
524
- 'default-dark': 'background..-dark',
528
+ 'default': 'on-background',
529
+ 'default-dark': 'on-background..-dark',
525
530
 
526
- 'disabled': 'disabled',
527
- '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',
528
539
 
529
540
  'primary': 'primary',
530
541
  'primary-dark': 'primary..-dark',
@@ -562,97 +573,100 @@ module.exports = {
562
573
  'error-hover': 'error-hover',
563
574
  'error-hover-dark': 'error-hover..-dark',
564
575
 
565
- 'primary-opacity': 'primary-opacity-0-08',
566
- 'primary-opacity-dark': 'primary-opacity-0-08..-dark',
576
+ 'primary-inverse': 'primary-inverse',
577
+ 'primary-inverse-dark': 'primary-inverse..-dark',
567
578
 
568
- // 'secondary-opacity': 'secondary-opacity-0-08',
569
- // 'secondary-opacity-dark': 'secondary-opacity-0-08..-dark',
579
+ // 'secondary-inverse': 'secondary-inverse',
580
+ // 'secondary-inverse-dark': 'secondary-inverse..-dark',
570
581
 
571
- // 'tertiary-opacity': 'tertiary-opacity-0-08',
572
- // 'tertiary-opacity-dark': 'tertiary-opacity-0-08..-dark',
582
+ // 'tertiary-inverse': 'tertiary-inverse',
583
+ // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
573
584
 
574
- 'success-opacity': 'success-opacity-0-08',
575
- 'success-opacity-dark': 'success-opacity-0-08..-dark',
585
+ // 'success-inverse': 'success-inverse',
586
+ // 'success-inverse-dark': 'success-inverse..-dark',
576
587
 
577
- 'warning-opacity': 'warning-opacity-0-08',
578
- 'warning-opacity-dark': 'warning-opacity-0-08..-dark',
588
+ // 'warning-inverse': 'warning-inverse',
589
+ // 'warning-inverse-dark': 'warning-inverse..-dark',
579
590
 
580
- 'error-opacity': 'error-opacity-0-08',
581
- 'error-opacity-dark': 'error-opacity-0-08..-dark',
591
+ // 'error-inverse': 'error-inverse',
592
+ // 'error-inverse-dark': 'error-inverse..-dark',
582
593
 
583
- 'primary-container': 'primary-container',
584
- 'primary-container-dark': 'primary-container..-dark',
594
+ 'on-primary': 'on-primary',
595
+ 'on-primary-dark': 'on-primary..-dark',
585
596
 
586
- 'secondary-container': 'secondary-container',
587
- 'secondary-container-dark': 'secondary-container..-dark',
597
+ 'on-secondary': 'on-secondary',
598
+ 'on-secondary-dark': 'on-secondary..-dark',
588
599
 
589
- 'tertiary-container': 'tertiary-container',
590
- 'tertiary-container-dark': 'tertiary-container..-dark',
600
+ 'on-tertiary': 'on-tertiary',
601
+ 'on-tertiary-dark': 'on-tertiary..-dark',
591
602
 
592
- 'success-container': 'success-container',
593
- 'success-container-dark': 'success-container..-dark',
603
+ 'on-success': 'on-success',
604
+ 'on-success-dark': 'on-success..-dark',
594
605
 
595
- 'warning-container': 'warning-container',
596
- 'warning-container-dark': 'warning-container..-dark',
606
+ 'on-warning': 'on-warning',
607
+ 'on-warning-dark': 'on-warning..-dark',
597
608
 
598
- 'error-container': 'error-container',
599
- 'error-container-dark': 'error-container..-dark',
609
+ 'on-error': 'on-error',
610
+ 'on-error-dark': 'on-error..-dark',
600
611
 
601
- 'surface': 'surface',
602
- 'surface-dark': 'surface..-dark',
612
+ 'on-primary-container': 'on-primary-container',
613
+ 'on-primary-container-dark': 'on-primary-container..-dark',
603
614
 
604
- 'surface-1': 'surface-1',
605
- 'surface-1-dark': 'surface-1..-dark',
615
+ 'on-secondary-container': 'on-secondary-container',
616
+ 'on-secondary-container-dark': 'on-secondary-container..-dark',
606
617
 
607
- 'surface-2': 'surface-2',
608
- 'surface-2-dark': 'surface-2..-dark',
618
+ 'on-tertiary-container': 'on-tertiary-container',
619
+ 'on-tertiary-container-dark': 'on-tertiary-container..-dark',
609
620
 
610
- 'surface-3': 'surface-3',
611
- 'surface-3-dark': 'surface-3..-dark',
621
+ 'on-success-container': 'on-success-container',
622
+ 'on-success-container-dark': 'on-success-container..-dark',
612
623
 
613
- 'surface-4': 'surface-4',
614
- 'surface-4-dark': 'surface-4..-dark',
624
+ 'on-warning-container': 'on-warning-container',
625
+ 'on-warning-container-dark': 'on-warning-container..-dark',
615
626
 
616
- 'surface-5': 'surface-5',
617
- 'surface-5-dark': 'surface-5..-dark',
627
+ 'on-error-container': 'on-error-container',
628
+ 'on-error-container-dark': 'on-error-container..-dark',
618
629
 
619
- 'surface-variant': 'surface-variant',
620
- 'surface-variant-dark': 'surface-variant..-dark',
630
+ 'on-surface': 'on-surface',
631
+ 'on-surface-dark': 'on-surface..-dark',
621
632
 
622
- 'surface-inverse': 'inverse-surface',
623
- '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',
624
638
 
625
639
  'transparent': 'transparent',
626
640
  'transparent-dark': 'transparent..-dark',
641
+
642
+ 'current': 'current',
643
+ 'current-dark': 'current..-dark',
644
+
645
+ 'inherit': 'inherit',
646
+ 'inherit-dark': 'inherit..-dark',
627
647
  },
628
648
  });
629
649
 
630
- // Foregrounds
650
+ // Backgrounds
631
651
  matchUtilities({
632
- 'theme-foreground': (value) => {
652
+ 'theme-background': (value) => {
633
653
  const [token, suffix = ''] = value.split('..');
634
654
 
635
655
  return {
636
- color: theme(`textColor.${token}` + suffix, token),
656
+ backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
637
657
 
638
658
  '&[disabled]': {
639
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
659
+ backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
640
660
  },
641
661
  };
642
662
  },
643
663
  }, {
644
664
  values: {
645
- 'default': 'on-background',
646
- 'default-dark': 'on-background..-dark',
647
-
648
- 'disabled': 'on-disabled',
649
- 'disabled-dark': 'on-disabled..-dark',
650
-
651
- 'outline': 'outline',
652
- 'outline-dark': 'outline..-dark',
665
+ 'default': 'background',
666
+ 'default-dark': 'background..-dark',
653
667
 
654
- 'outline-variant': 'outline-variant',
655
- 'outline-variant-dark': 'outline-variant..-dark',
668
+ 'disabled': 'disabled',
669
+ 'disabled-dark': 'disabled..-dark',
656
670
 
657
671
  'primary': 'primary',
658
672
  'primary-dark': 'primary..-dark',
@@ -690,72 +704,72 @@ module.exports = {
690
704
  'error-hover': 'error-hover',
691
705
  'error-hover-dark': 'error-hover..-dark',
692
706
 
693
- 'primary-inverse': 'primary-inverse',
694
- 'primary-inverse-dark': 'primary-inverse..-dark',
695
-
696
- // 'secondary-inverse': 'secondary-inverse',
697
- // 'secondary-inverse-dark': 'secondary-inverse..-dark',
707
+ 'primary-opacity': 'primary-opacity-0-08',
708
+ 'primary-opacity-dark': 'primary-opacity-0-08..-dark',
698
709
 
699
- // 'tertiary-inverse': 'tertiary-inverse',
700
- // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
710
+ // 'secondary-opacity': 'secondary-opacity-0-08',
711
+ // 'secondary-opacity-dark': 'secondary-opacity-0-08..-dark',
701
712
 
702
- // 'success-inverse': 'success-inverse',
703
- // 'success-inverse-dark': 'success-inverse..-dark',
713
+ // 'tertiary-opacity': 'tertiary-opacity-0-08',
714
+ // 'tertiary-opacity-dark': 'tertiary-opacity-0-08..-dark',
704
715
 
705
- // 'warning-inverse': 'warning-inverse',
706
- // 'warning-inverse-dark': 'warning-inverse..-dark',
716
+ 'success-opacity': 'success-opacity-0-08',
717
+ 'success-opacity-dark': 'success-opacity-0-08..-dark',
707
718
 
708
- // 'error-inverse': 'error-inverse',
709
- // 'error-inverse-dark': 'error-inverse..-dark',
719
+ 'warning-opacity': 'warning-opacity-0-08',
720
+ 'warning-opacity-dark': 'warning-opacity-0-08..-dark',
710
721
 
711
- 'on-primary': 'on-primary',
712
- 'on-primary-dark': 'on-primary..-dark',
722
+ 'error-opacity': 'error-opacity-0-08',
723
+ 'error-opacity-dark': 'error-opacity-0-08..-dark',
713
724
 
714
- 'on-secondary': 'on-secondary',
715
- 'on-secondary-dark': 'on-secondary..-dark',
725
+ 'primary-container': 'primary-container',
726
+ 'primary-container-dark': 'primary-container..-dark',
716
727
 
717
- 'on-tertiary': 'on-tertiary',
718
- 'on-tertiary-dark': 'on-tertiary..-dark',
728
+ 'secondary-container': 'secondary-container',
729
+ 'secondary-container-dark': 'secondary-container..-dark',
719
730
 
720
- 'on-success': 'on-success',
721
- 'on-success-dark': 'on-success..-dark',
731
+ 'tertiary-container': 'tertiary-container',
732
+ 'tertiary-container-dark': 'tertiary-container..-dark',
722
733
 
723
- 'on-warning': 'on-warning',
724
- 'on-warning-dark': 'on-warning..-dark',
734
+ 'success-container': 'success-container',
735
+ 'success-container-dark': 'success-container..-dark',
725
736
 
726
- 'on-error': 'on-error',
727
- 'on-error-dark': 'on-error..-dark',
737
+ 'warning-container': 'warning-container',
738
+ 'warning-container-dark': 'warning-container..-dark',
728
739
 
729
- 'on-primary-container': 'on-primary-container',
730
- 'on-primary-container-dark': 'on-primary-container..-dark',
740
+ 'error-container': 'error-container',
741
+ 'error-container-dark': 'error-container..-dark',
731
742
 
732
- 'on-secondary-container': 'on-secondary-container',
733
- 'on-secondary-container-dark': 'on-secondary-container..-dark',
743
+ 'surface': 'surface',
744
+ 'surface-dark': 'surface..-dark',
734
745
 
735
- 'on-tertiary-container': 'on-tertiary-container',
736
- 'on-tertiary-container-dark': 'on-tertiary-container..-dark',
746
+ 'surface-1': 'surface-1',
747
+ 'surface-1-dark': 'surface-1..-dark',
737
748
 
738
- 'on-success-container': 'on-success-container',
739
- 'on-success-container-dark': 'on-success-container..-dark',
749
+ 'surface-2': 'surface-2',
750
+ 'surface-2-dark': 'surface-2..-dark',
740
751
 
741
- 'on-warning-container': 'on-warning-container',
742
- 'on-warning-container-dark': 'on-warning-container..-dark',
752
+ 'surface-3': 'surface-3',
753
+ 'surface-3-dark': 'surface-3..-dark',
743
754
 
744
- 'on-error-container': 'on-error-container',
745
- 'on-error-container-dark': 'on-error-container..-dark',
755
+ 'surface-4': 'surface-4',
756
+ 'surface-4-dark': 'surface-4..-dark',
746
757
 
747
- 'on-surface': 'on-surface',
748
- 'on-surface-dark': 'on-surface..-dark',
758
+ 'surface-5': 'surface-5',
759
+ 'surface-5-dark': 'surface-5..-dark',
749
760
 
750
- 'on-surface-variant': 'on-surface-variant',
751
- 'on-surface-variant-dark': 'on-surface-variant..-dark',
761
+ 'surface-variant': 'surface-variant',
762
+ 'surface-variant-dark': 'surface-variant..-dark',
752
763
 
753
- 'on-surface-inverse': 'inverse-on-surface',
754
- 'on-surface-inverse-dark': 'inverse-on-surface..-dark',
764
+ 'surface-inverse': 'inverse-surface',
765
+ 'surface-inverse-dark': 'inverse-surface..-dark',
755
766
 
756
767
  'transparent': 'transparent',
757
768
  'transparent-dark': 'transparent..-dark',
758
769
 
770
+ 'current': 'current',
771
+ 'current-dark': 'current..-dark',
772
+
759
773
  'inherit': 'inherit',
760
774
  'inherit-dark': 'inherit..-dark',
761
775
  },
@@ -807,6 +821,9 @@ module.exports = {
807
821
 
808
822
  'current': 'current',
809
823
  'current-dark': 'current..-dark',
824
+
825
+ 'inherit': 'inherit',
826
+ 'inherit-dark': 'inherit..-dark',
810
827
  },
811
828
  });
812
829
 
@@ -855,6 +872,9 @@ module.exports = {
855
872
 
856
873
  'current': 'current',
857
874
  'current-dark': 'current..-dark',
875
+
876
+ 'inherit': 'inherit',
877
+ 'inherit-dark': 'inherit..-dark',
858
878
  },
859
879
  });
860
880
 
@@ -906,6 +926,9 @@ module.exports = {
906
926
 
907
927
  'current': 'current',
908
928
  'current-dark': 'current..-dark',
929
+
930
+ 'inherit': 'inherit',
931
+ 'inherit-dark': 'inherit..-dark',
909
932
  },
910
933
  });
911
934
  }),