@onereach/styles 6.2.1-beta.3669.0 → 6.2.1-beta.3672.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 (7) hide show
  1. package/package.json +1 -1
  2. package/tailwind/plugins/theme-background.js +1 -1
  3. package/tailwind/plugins/theme-border.js +6 -6
  4. package/tailwind/plugins/theme-divider.js +2 -2
  5. package/tailwind/plugins/theme-foreground.js +1 -1
  6. package/tailwind/plugins/theme-outline.js +18 -36
  7. package/tailwind/plugins/theme-preset.js +4 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "6.2.1-beta.3669.0",
3
+ "version": "6.2.1-beta.3672.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
package/tailwind/plugins/theme-background.js CHANGED
@@ -171,7 +171,7 @@ module.exports = {
171
171
  backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
172
172
  },
173
173
 
174
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
174
+ transitionProperty: 'color, background-color, border-color, outline-color',
175
175
  transitionDuration: theme('transitionDuration.short'),
176
176
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
177
177
  };
package/tailwind/plugins/theme-border.js CHANGED
@@ -45,15 +45,15 @@ module.exports = {
45
45
  const [token, suffix = ''] = value.split('..');
46
46
 
47
47
  return {
48
- borderWidth: '1px',
49
48
  borderStyle: 'solid',
49
+ borderWidth: '1px',
50
50
  borderColor: theme(`borderColor.${token}` + suffix, token),
51
51
 
52
52
  [variants['disabled']]: {
53
53
  borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
54
54
  },
55
55
 
56
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
56
+ transitionProperty: 'color, background-color, border-color, outline-color',
57
57
  transitionDuration: theme('transitionDuration.short'),
58
58
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
59
59
  };
@@ -65,15 +65,15 @@ module.exports = {
65
65
  const [token, suffix = ''] = value.split('..');
66
66
 
67
67
  return {
68
- borderWidth: '2px',
69
68
  borderStyle: 'solid',
69
+ borderWidth: '2px',
70
70
  borderColor: theme(`borderColor.${token}` + suffix, token),
71
71
 
72
72
  [variants['disabled']]: {
73
73
  borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
74
74
  },
75
75
 
76
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
76
+ transitionProperty: 'color, background-color, border-color, outline-color',
77
77
  transitionDuration: theme('transitionDuration.short'),
78
78
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
79
79
  };
@@ -85,15 +85,15 @@ module.exports = {
85
85
  const [token, suffix = ''] = value.split('..');
86
86
 
87
87
  return {
88
- borderWidth: '4px',
89
88
  borderStyle: 'solid',
89
+ borderWidth: '4px',
90
90
  borderColor: theme(`borderColor.${token}` + suffix, token),
91
91
 
92
92
  [variants['disabled']]: {
93
93
  borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
94
94
  },
95
95
 
96
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
96
+ transitionProperty: 'color, background-color, border-color, outline-color',
97
97
  transitionDuration: theme('transitionDuration.short'),
98
98
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
99
99
  };
package/tailwind/plugins/theme-divider.js CHANGED
@@ -47,8 +47,8 @@ module.exports = {
47
47
  return {
48
48
  [variants['children']]: {
49
49
  '&:not(:first-child)': {
50
- borderInlineStartWidth: '1px',
51
50
  borderInlineStartStyle: 'solid',
51
+ borderInlineStartWidth: '1px',
52
52
  borderInlineStartColor: theme(`borderColor.${token}` + suffix, token),
53
53
  },
54
54
 
@@ -56,7 +56,7 @@ module.exports = {
56
56
  borderInlineEndStyle: 'none !important',
57
57
  },
58
58
 
59
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
59
+ transitionProperty: 'color, background-color, border-color, outline-color',
60
60
  transitionDuration: theme('transitionDuration.short'),
61
61
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
62
62
  },
package/tailwind/plugins/theme-foreground.js CHANGED
@@ -123,7 +123,7 @@ module.exports = {
123
123
  color: `${theme('textColor.on-disabled' + suffix)} !important`,
124
124
  },
125
125
 
126
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
126
+ transitionProperty: 'color, background-color, border-color, outline-color',
127
127
  transitionDuration: theme('transitionDuration.short'),
128
128
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
129
129
  };
package/tailwind/plugins/theme-outline.js CHANGED
@@ -39,22 +39,16 @@ module.exports = {
39
39
  const [token, suffix = ''] = value.split('..');
40
40
 
41
41
  return {
42
- // In Safari outline doesn't follow current border-radius
43
- // It seems like this is already fixed in Safari Technology Preview (Release 157)
44
- // Stay tuned for Safari updates
45
-
46
- boxShadow: `0 0 0 1px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
47
- // outlineOffset: '0',
48
- // outlineWidth: '1px',
49
- // outlineStyle: 'solid',
50
- // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
42
+ outlineOffset: '0',
43
+ outlineStyle: 'solid',
44
+ outlineWidth: '1px',
45
+ outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
51
46
 
52
47
  [variants['disabled']]: {
53
- boxShadow: 'none !important',
54
- // outlineColor: 'transparent !important',
48
+ outlineColor: 'transparent !important',
55
49
  },
56
50
 
57
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
51
+ transitionProperty: 'color, background-color, border-color, outline-color',
58
52
  transitionDuration: theme('transitionDuration.short'),
59
53
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
60
54
  };
@@ -66,22 +60,16 @@ module.exports = {
66
60
  const [token, suffix = ''] = value.split('..');
67
61
 
68
62
  return {
69
- // In Safari outline doesn't follow current border-radius
70
- // It seems like this is already fixed in Safari Technology Preview (Release 157)
71
- // Stay tuned for Safari updates
72
-
73
- boxShadow: `0 0 0 2px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
74
- // outlineOffset: '0',
75
- // outlineWidth: '2px',
76
- // outlineStyle: 'solid',
77
- // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
63
+ outlineOffset: '0',
64
+ outlineStyle: 'solid',
65
+ outlineWidth: '2px',
66
+ outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
78
67
 
79
68
  [variants['disabled']]: {
80
- boxShadow: 'none !important',
81
- // outlineColor: 'transparent !important',
69
+ outlineColor: 'transparent !important',
82
70
  },
83
71
 
84
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
72
+ transitionProperty: 'color, background-color, border-color, outline-color',
85
73
  transitionDuration: theme('transitionDuration.short'),
86
74
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
87
75
  };
@@ -93,22 +81,16 @@ module.exports = {
93
81
  const [token, suffix = ''] = value.split('..');
94
82
 
95
83
  return {
96
- // In Safari outline doesn't follow current border-radius
97
- // It seems like this is already fixed in Safari Technology Preview (Release 157)
98
- // Stay tuned for Safari updates
99
-
100
- boxShadow: `0 0 0 10px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
101
- // outlineOffset: '0',
102
- // outlineWidth: '10px',
103
- // outlineStyle: 'solid',
104
- // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
84
+ outlineOffset: '0',
85
+ outlineStyle: 'solid',
86
+ outlineWidth: '10px',
87
+ outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
105
88
 
106
89
  [variants['disabled']]: {
107
- boxShadow: 'none !important',
108
- // outlineColor: 'transparent !important',
90
+ outlineColor: 'transparent !important',
109
91
  },
110
92
 
111
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
93
+ transitionProperty: 'color, background-color, border-color, outline-color',
112
94
  transitionDuration: theme('transitionDuration.short'),
113
95
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
114
96
  };
package/tailwind/plugins/theme-preset.js CHANGED
@@ -37,32 +37,20 @@ module.exports = {
37
37
  outlineStyle: 'none',
38
38
 
39
39
  [variants['active']]: {
40
- position: 'relative',
41
- zIndex: '1',
42
-
43
40
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
44
41
  },
45
42
 
46
43
  // Desktop
47
44
  '@media (any-hover: hover)': {
48
45
  [variants['hover']]: {
49
- position: 'relative',
50
- zIndex: '1',
51
-
52
46
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
53
47
  },
54
48
 
55
49
  [variants['focus-visible']]: {
56
- position: 'relative',
57
- zIndex: '1',
58
-
59
50
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
60
51
  },
61
52
 
62
53
  [variants['active']]: {
63
- position: 'relative',
64
- zIndex: '1',
65
-
66
54
  backgroundColor: theme(`backgroundColor.${token}` + suffix),
67
55
  },
68
56
  },
@@ -72,7 +60,7 @@ module.exports = {
72
60
  backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
73
61
  },
74
62
 
75
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
63
+ transitionProperty: 'color, background-color, border-color, outline-color',
76
64
  transitionDuration: theme('transitionDuration.short'),
77
65
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
78
66
  };
@@ -89,32 +77,20 @@ module.exports = {
89
77
  outlineStyle: 'none',
90
78
 
91
79
  [variants['active']]: {
92
- position: 'relative',
93
- zIndex: '1',
94
-
95
80
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
96
81
  },
97
82
 
98
83
  // Desktop
99
84
  '@media (any-hover: hover)': {
100
85
  [variants['hover']]: {
101
- position: 'relative',
102
- zIndex: '1',
103
-
104
86
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
105
87
  },
106
88
 
107
89
  [variants['focus-visible']]: {
108
- position: 'relative',
109
- zIndex: '1',
110
-
111
90
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
112
91
  },
113
92
 
114
93
  [variants['active']]: {
115
- position: 'relative',
116
- zIndex: '1',
117
-
118
94
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
119
95
  },
120
96
  },
@@ -124,7 +100,7 @@ module.exports = {
124
100
  backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
125
101
  },
126
102
 
127
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
103
+ transitionProperty: 'color, background-color, border-color, outline-color',
128
104
  transitionDuration: theme('transitionDuration.short'),
129
105
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
130
106
  };
@@ -141,32 +117,20 @@ module.exports = {
141
117
  outlineStyle: 'none',
142
118
 
143
119
  [variants['active']]: {
144
- position: 'relative',
145
- zIndex: '1',
146
-
147
120
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
148
121
  },
149
122
 
150
123
  // Desktop
151
124
  '@media (any-hover: hover)': {
152
125
  [variants['hover']]: {
153
- position: 'relative',
154
- zIndex: '1',
155
-
156
126
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
157
127
  },
158
128
 
159
129
  [variants['focus-visible']]: {
160
- position: 'relative',
161
- zIndex: '1',
162
-
163
130
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
164
131
  },
165
132
 
166
133
  [variants['active']]: {
167
- position: 'relative',
168
- zIndex: '1',
169
-
170
134
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
171
135
  },
172
136
  },
@@ -176,7 +140,7 @@ module.exports = {
176
140
  backgroundColor: 'transparent !important',
177
141
  },
178
142
 
179
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
143
+ transitionProperty: 'color, background-color, border-color, outline-color',
180
144
  transitionDuration: theme('transitionDuration.short'),
181
145
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
182
146
  };
@@ -193,32 +157,20 @@ module.exports = {
193
157
  outlineStyle: 'none',
194
158
 
195
159
  [variants['active']]: {
196
- position: 'relative',
197
- zIndex: '1',
198
-
199
160
  color: theme(`textColor.${token}-hover` + suffix),
200
161
  },
201
162
 
202
163
  // Desktop
203
164
  '@media (any-hover: hover)': {
204
165
  [variants['hover']]: {
205
- position: 'relative',
206
- zIndex: '1',
207
-
208
166
  color: theme(`textColor.${token}-hover` + suffix),
209
167
  },
210
168
 
211
169
  [variants['focus-visible']]: {
212
- position: 'relative',
213
- zIndex: '1',
214
-
215
170
  color: theme(`textColor.${token}-hover` + suffix),
216
171
  },
217
172
 
218
173
  [variants['active']]: {
219
- position: 'relative',
220
- zIndex: '1',
221
-
222
174
  color: theme(`textColor.${token}` + suffix),
223
175
  },
224
176
  },
@@ -228,7 +180,7 @@ module.exports = {
228
180
  backgroundColor: 'transparent !important',
229
181
  },
230
182
 
231
- transitionProperty: 'box-shadow, color, background-color, border-color, outline-color',
183
+ transitionProperty: 'color, background-color, border-color, outline-color',
232
184
  transitionDuration: theme('transitionDuration.short'),
233
185
  transitionTimingFunction: theme('transitionTimingFunction.standard'),
234
186
  };