@onereach/styles 3.1.1-beta.3196.0 → 3.1.1-beta.3199.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 (10) hide show
  1. package/package.json +1 -1
  2. package/tailwind/plugins/core.js +19 -2
  3. package/tailwind/plugins/interactivity.js +2 -1
  4. package/tailwind/plugins/theme-background.js +2 -1
  5. package/tailwind/plugins/theme-border.js +3 -2
  6. package/tailwind/plugins/theme-foreground.js +2 -1
  7. package/tailwind/plugins/theme-preset.js +57 -60
  8. package/tailwind/plugins/typography.js +16 -1
  9. package/tailwind.config.json +2 -13
  10. package/tailwind.config.preset.js +1 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "3.1.1-beta.3196.0",
3
+ "version": "3.1.1-beta.3199.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
package/tailwind/plugins/core.js CHANGED
@@ -1,5 +1,13 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
+ const screens = {
4
+ 'sm': '640px',
5
+ 'md': '768px',
6
+ 'lg': '1024px',
7
+ 'xl': '1280px',
8
+ '2xl': '1536px',
9
+ };
10
+
3
11
  const variants = {
4
12
  'hover': [
5
13
  '&:not(.interactivity-none):hover',
@@ -52,11 +60,20 @@ const variants = {
52
60
  };
53
61
 
54
62
  module.exports = {
63
+ screens,
55
64
  variants,
56
65
 
57
66
  plugin: plugin(({ addVariant, addUtilities }) => {
58
- Object.entries(variants).forEach(([name, selectors]) => {
59
- addVariant(name, selectors);
67
+ Object.entries(screens).forEach(([breakpoint, width]) => {
68
+ addVariant(breakpoint, [
69
+ `@media (min-width: ${width})`,
70
+ `[force-screen~="${breakpoint}"] &`,
71
+ `&[force-screen~="${breakpoint}"]`,
72
+ ]);
73
+ });
74
+
75
+ Object.entries(variants).forEach(([modifier, selectors]) => {
76
+ addVariant(modifier, selectors);
60
77
  });
61
78
 
62
79
  // TODO: Remove when migration complete
package/tailwind/plugins/interactivity.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+ const { variants } = require('./core');
2
3
 
3
4
  module.exports = {
4
5
  plugin: plugin(({ addUtilities }) => {
@@ -7,7 +8,7 @@ module.exports = {
7
8
  pointerEvents: 'auto',
8
9
  cursor: 'pointer',
9
10
 
10
- '&[disabled]': {
11
+ [variants['disabled']]: {
11
12
  pointerEvents: 'none',
12
13
  cursor: 'default',
13
14
  },
package/tailwind/plugins/theme-background.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+ const { variants } = require('./core');
2
3
 
3
4
  const values = {
4
5
  'base': 'white',
@@ -130,7 +131,7 @@ module.exports = {
130
131
  return {
131
132
  backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
132
133
 
133
- '&[disabled]': {
134
+ [variants['disabled']]: {
134
135
  backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
135
136
  },
136
137
  };
package/tailwind/plugins/theme-border.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+ const { variants } = require('./core');
2
3
 
3
4
  const values = {
4
5
  'outline': 'outline',
@@ -66,7 +67,7 @@ module.exports = {
66
67
  borderStyle: 'solid',
67
68
  borderColor: theme(`borderColor.${token}` + suffix, token),
68
69
 
69
- '&[disabled]': {
70
+ [variants['disabled']]: {
70
71
  borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
71
72
  },
72
73
  };
@@ -82,7 +83,7 @@ module.exports = {
82
83
  borderStyle: 'solid',
83
84
  borderColor: theme(`borderColor.${token}` + suffix, token),
84
85
 
85
- '&[disabled]': {
86
+ [variants['disabled']]: {
86
87
  borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
87
88
  },
88
89
  };
package/tailwind/plugins/theme-foreground.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+ const { variants } = require('./core');
2
3
 
3
4
  const values = {
4
5
  'base': 'white',
@@ -136,7 +137,7 @@ module.exports = {
136
137
  return {
137
138
  color: theme(`textColor.${token}` + suffix, token),
138
139
 
139
- '&[disabled]': {
140
+ [variants['disabled']]: {
140
141
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
141
142
  },
142
143
  };
package/tailwind/plugins/theme-preset.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+ const { variants } = require('./core');
2
3
 
3
4
  const values = {
4
5
  'primary': 'primary',
@@ -31,32 +32,31 @@ module.exports = {
31
32
  return {
32
33
  color: theme(`textColor.on-${token}` + suffix),
33
34
  backgroundColor: theme(`backgroundColor.${token}` + suffix),
35
+
34
36
  borderStyle: 'none',
35
37
  outlineStyle: 'none',
36
38
 
37
- '&[disabled]': {
39
+ [variants['disabled']]: {
38
40
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
39
41
  backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
40
42
  },
41
43
 
42
- '&:not(.interactivity-none)': {
43
- '&:active, &[force-state="active"]': {
44
+ [variants['active']]: {
45
+ backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
46
+ },
47
+
48
+ // Desktop
49
+ '@media (any-hover: hover)': {
50
+ [variants['hover']]: {
44
51
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
45
52
  },
46
53
 
47
- // Desktop
48
- [`@media (min-width: ${theme('screens.md')})`]: {
49
- '&:hover, &[force-state="hover"]': {
50
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
51
- },
52
-
53
- '&:focus-visible, &[force-state="focus-visible"]': {
54
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
55
- },
54
+ [variants['focus-visible']]: {
55
+ backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
56
+ },
56
57
 
57
- '&:active, &[force-state="active"]': {
58
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
59
- },
58
+ [variants['active']]: {
59
+ backgroundColor: theme(`backgroundColor.${token}` + suffix),
60
60
  },
61
61
  },
62
62
 
@@ -72,32 +72,31 @@ module.exports = {
72
72
  return {
73
73
  color: theme(`textColor.${token}` + suffix),
74
74
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
75
+
75
76
  borderStyle: 'none',
76
77
  outlineStyle: 'none',
77
78
 
78
- '&[disabled]': {
79
+ [variants['disabled']]: {
79
80
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
80
81
  backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
81
82
  },
82
83
 
83
- '&:not(.interactivity-none)': {
84
- '&:active, &[force-state="active"]': {
84
+ [variants['active']]: {
85
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
86
+ },
87
+
88
+ // Desktop
89
+ '@media (any-hover: hover)': {
90
+ [variants['hover']]: {
85
91
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
86
92
  },
87
93
 
88
- // Desktop
89
- [`@media (min-width: ${theme('screens.md')})`]: {
90
- '&:hover, &[force-state="hover"]': {
91
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
92
- },
93
-
94
- '&:focus-visible, &[force-state="focus-visible"]': {
95
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
96
- },
94
+ [variants['focus-visible']]: {
95
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
96
+ },
97
97
 
98
- '&:active, &[force-state="active"]': {
99
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
100
- },
98
+ [variants['active']]: {
99
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
101
100
  },
102
101
  },
103
102
 
@@ -113,32 +112,31 @@ module.exports = {
113
112
  return {
114
113
  color: theme(`textColor.${token}` + suffix),
115
114
  backgroundColor: 'transparent',
115
+
116
116
  borderStyle: 'none',
117
117
  outlineStyle: 'none',
118
118
 
119
- '&[disabled]': {
119
+ [variants['disabled']]: {
120
120
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
121
121
  backgroundColor: 'transparent !important',
122
122
  },
123
123
 
124
- '&:not(.interactivity-none)': {
125
- '&:active, &[force-state="active"]': {
124
+ [variants['active']]: {
125
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
126
+ },
127
+
128
+ // Desktop
129
+ '@media (any-hover: hover)': {
130
+ [variants['hover']]: {
126
131
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
127
132
  },
128
133
 
129
- // Desktop
130
- [`@media (min-width: ${theme('screens.md')})`]: {
131
- '&:hover, &[force-state="hover"]': {
132
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
133
- },
134
-
135
- '&:focus-visible, &[force-state="focus-visible"]': {
136
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
137
- },
134
+ [variants['focus-visible']]: {
135
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
136
+ },
138
137
 
139
- '&:active, &[force-state="active"]': {
140
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
141
- },
138
+ [variants['active']]: {
139
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
142
140
  },
143
141
  },
144
142
 
@@ -154,32 +152,31 @@ module.exports = {
154
152
  return {
155
153
  color: theme(`textColor.${token}` + suffix),
156
154
  backgroundColor: 'transparent',
155
+
157
156
  borderStyle: 'none',
158
157
  outlineStyle: 'none',
159
158
 
160
- '&[disabled]': {
159
+ [variants['disabled']]: {
161
160
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
162
161
  backgroundColor: 'transparent !important',
163
162
  },
164
163
 
165
- '&:not(.interactivity-none)': {
166
- '&:active, &[force-state="active"]': {
164
+ [variants['active']]: {
165
+ color: theme(`textColor.${token}-hover` + suffix),
166
+ },
167
+
168
+ // Desktop
169
+ '@media (any-hover: hover)': {
170
+ [variants['hover']]: {
167
171
  color: theme(`textColor.${token}-hover` + suffix),
168
172
  },
169
173
 
170
- // Desktop
171
- [`@media (min-width: ${theme('screens.md')})`]: {
172
- '&:hover, &[force-state="hover"]': {
173
- color: theme(`textColor.${token}-hover` + suffix),
174
- },
175
-
176
- '&:focus-visible, &[force-state="focus-visible"]': {
177
- color: theme(`textColor.${token}-hover` + suffix),
178
- },
174
+ [variants['focus-visible']]: {
175
+ color: theme(`textColor.${token}-hover` + suffix),
176
+ },
179
177
 
180
- '&:active, &[force-state="active"]': {
181
- color: theme(`textColor.${token}` + suffix),
182
- },
178
+ [variants['active']]: {
179
+ color: theme(`textColor.${token}` + suffix),
183
180
  },
184
181
  },
185
182
 
package/tailwind/plugins/typography.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+ const { screens } = require('./core');
2
3
 
3
4
  const values = {
4
5
  'display-large': 'display-large',
@@ -45,7 +46,21 @@ module.exports = {
45
46
  lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
46
47
 
47
48
  // Desktop
48
- [`@media (min-width: ${theme('screens.md')})`]: {
49
+ [`@media (min-width: ${screens.md})`]: {
50
+ fontFamily: theme(`fontFamily.${value}`),
51
+ fontWeight: theme(`fontWeight.${value}`),
52
+ fontSize: fontSizeDesktop,
53
+ lineHeight: optionsDesktop?.lineHeight,
54
+ },
55
+
56
+ '[force-screen~="md"] &': {
57
+ fontFamily: theme(`fontFamily.${value}`),
58
+ fontWeight: theme(`fontWeight.${value}`),
59
+ fontSize: fontSizeDesktop,
60
+ lineHeight: optionsDesktop?.lineHeight,
61
+ },
62
+
63
+ '&[force-screen~="md"]': {
49
64
  fontFamily: theme(`fontFamily.${value}`),
50
65
  fontWeight: theme(`fontWeight.${value}`),
51
66
  fontSize: fontSizeDesktop,
package/tailwind.config.json CHANGED
@@ -1,12 +1,6 @@
1
1
  {
2
2
  "theme": {
3
- "screens": {
4
- "sm": "640px",
5
- "md": "768px",
6
- "lg": "1024px",
7
- "xl": "1280px",
8
- "2xl": "1536px"
9
- },
3
+ "screens": {},
10
4
  "spacing": {
11
5
  "none": "0px",
12
6
  "xs": "4px",
@@ -2990,12 +2984,7 @@
2990
2984
  "min": "min-content",
2991
2985
  "max": "max-content",
2992
2986
  "fit": "fit-content",
2993
- "prose": "65ch",
2994
- "screen-sm": "640px",
2995
- "screen-md": "768px",
2996
- "screen-lg": "1024px",
2997
- "screen-xl": "1280px",
2998
- "screen-2xl": "1536px"
2987
+ "prose": "65ch"
2999
2988
  },
3000
2989
  "minHeight": {
3001
2990
  "0": "0px",
package/tailwind.config.preset.js CHANGED
@@ -35,13 +35,7 @@ module.exports = {
35
35
  darkMode: ['class', '[data-theme="dark"]'],
36
36
 
37
37
  theme: {
38
- screens: {
39
- 'sm': '640px',
40
- 'md': '768px',
41
- 'lg': '1024px',
42
- 'xl': '1280px',
43
- '2xl': '1536px',
44
- },
38
+ screens: {},
45
39
 
46
40
  spacing: {
47
41
  ...parseSpacingTokens(spacingTokens),