@onereach/styles 6.1.1-beta.3637.0 → 6.2.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.
- package/package.json +6 -5
- package/tailwind/plugins/theme-background.js +1 -1
- package/tailwind/plugins/theme-divider.js +71 -0
- package/tailwind/plugins/theme-foreground.js +1 -1
- package/tailwind/plugins/theme-preset.js +48 -0
- package/tailwind.config.json +2 -0
- package/tailwind.config.preset.js +3 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/styles",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.2.0",
|
|
4
4
|
"description": "Styles for or-ui-next",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "./main.css",
|
|
@@ -41,20 +41,21 @@
|
|
|
41
41
|
"json-to-scss": "json-to-scss mock/design-tokens.json src/variables/tokens"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"tailwindcss": "
|
|
44
|
+
"tailwindcss": "3.3.3"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"autoprefixer": "^10.2.5",
|
|
48
48
|
"clean-css-cli": "^5.2.2",
|
|
49
49
|
"json-to-scss": "^1.6.2",
|
|
50
50
|
"npm-run-all": "^4.1.5",
|
|
51
|
-
"postcss": "^8.4.
|
|
51
|
+
"postcss": "^8.4.27",
|
|
52
52
|
"postcss-cli": "^10.1.0",
|
|
53
53
|
"postcss-import": "^15.1.0",
|
|
54
|
-
"postcss-preset-env": "^
|
|
54
|
+
"postcss-preset-env": "^9.1.0",
|
|
55
55
|
"sass": "^1.63.4"
|
|
56
56
|
},
|
|
57
57
|
"publishConfig": {
|
|
58
58
|
"access": "public"
|
|
59
|
-
}
|
|
59
|
+
},
|
|
60
|
+
"gitHead": "0fc64d18ab0c24071522b472b494df37c4541771"
|
|
60
61
|
}
|
|
@@ -167,7 +167,7 @@ module.exports = {
|
|
|
167
167
|
return {
|
|
168
168
|
backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
|
|
169
169
|
|
|
170
|
-
[variants['disabled']]:
|
|
170
|
+
[variants['disabled']]: {
|
|
171
171
|
backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
|
|
172
172
|
},
|
|
173
173
|
};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
const plugin = require('tailwindcss/plugin');
|
|
2
|
+
const { variants } = require('./core');
|
|
3
|
+
|
|
4
|
+
const values = {
|
|
5
|
+
'outline': 'outline',
|
|
6
|
+
'outline-dark': 'outline..-dark',
|
|
7
|
+
|
|
8
|
+
'outline-variant': 'outline-variant',
|
|
9
|
+
'outline-variant-dark': 'outline-variant..-dark',
|
|
10
|
+
|
|
11
|
+
'primary': 'primary',
|
|
12
|
+
'primary-dark': 'primary..-dark',
|
|
13
|
+
|
|
14
|
+
// 'secondary': 'secondary',
|
|
15
|
+
// 'secondary-dark': 'secondary..-dark',
|
|
16
|
+
|
|
17
|
+
// 'tertiary': 'tertiary',
|
|
18
|
+
// 'tertiary-dark': 'tertiary..-dark',
|
|
19
|
+
|
|
20
|
+
'success': 'success',
|
|
21
|
+
'success-dark': 'success..-dark',
|
|
22
|
+
|
|
23
|
+
'warning': 'warning',
|
|
24
|
+
'warning-dark': 'warning..-dark',
|
|
25
|
+
|
|
26
|
+
'error': 'error',
|
|
27
|
+
'error-dark': 'error..-dark',
|
|
28
|
+
|
|
29
|
+
'transparent': 'transparent',
|
|
30
|
+
'transparent-dark': 'transparent..-dark',
|
|
31
|
+
|
|
32
|
+
'current': 'current',
|
|
33
|
+
'current-dark': 'current..-dark',
|
|
34
|
+
|
|
35
|
+
'inherit': 'inherit',
|
|
36
|
+
'inherit-dark': 'inherit..-dark',
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
module.exports = {
|
|
40
|
+
values,
|
|
41
|
+
|
|
42
|
+
plugin: plugin(({ matchComponents, theme }) => {
|
|
43
|
+
matchComponents({
|
|
44
|
+
'theme-divider': (value) => {
|
|
45
|
+
const [token, suffix = ''] = value.split('..');
|
|
46
|
+
|
|
47
|
+
return {
|
|
48
|
+
[variants['children']]: {
|
|
49
|
+
'&:not(:first-child)': {
|
|
50
|
+
borderInlineStartWidth: '1px',
|
|
51
|
+
borderInlineStartStyle: 'solid',
|
|
52
|
+
borderInlineStartColor: theme(`borderColor.${token}` + suffix, token),
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
'&:not(:last-child)': {
|
|
56
|
+
borderInlineEndStyle: 'none !important',
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
[variants['disabled']]: {
|
|
61
|
+
[variants['children']]: {
|
|
62
|
+
'&:not(:first-child)': {
|
|
63
|
+
borderInlineStartColor: `${theme('borderColor.disabled' + suffix)} !important`,
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
},
|
|
69
|
+
}, { values });
|
|
70
|
+
}),
|
|
71
|
+
};
|
|
@@ -119,7 +119,7 @@ module.exports = {
|
|
|
119
119
|
return {
|
|
120
120
|
color: theme(`textColor.${token}` + suffix, token),
|
|
121
121
|
|
|
122
|
-
[variants['disabled']]:
|
|
122
|
+
[variants['disabled']]: {
|
|
123
123
|
color: `${theme('textColor.on-disabled' + suffix)} !important`,
|
|
124
124
|
},
|
|
125
125
|
};
|
|
@@ -37,20 +37,32 @@ module.exports = {
|
|
|
37
37
|
outlineStyle: 'none',
|
|
38
38
|
|
|
39
39
|
[variants['active']]: {
|
|
40
|
+
position: 'relative',
|
|
41
|
+
zIndex: '1',
|
|
42
|
+
|
|
40
43
|
backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
|
|
41
44
|
},
|
|
42
45
|
|
|
43
46
|
// Desktop
|
|
44
47
|
'@media (any-hover: hover)': {
|
|
45
48
|
[variants['hover']]: {
|
|
49
|
+
position: 'relative',
|
|
50
|
+
zIndex: '1',
|
|
51
|
+
|
|
46
52
|
backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
|
|
47
53
|
},
|
|
48
54
|
|
|
49
55
|
[variants['focus-visible']]: {
|
|
56
|
+
position: 'relative',
|
|
57
|
+
zIndex: '1',
|
|
58
|
+
|
|
50
59
|
backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
|
|
51
60
|
},
|
|
52
61
|
|
|
53
62
|
[variants['active']]: {
|
|
63
|
+
position: 'relative',
|
|
64
|
+
zIndex: '1',
|
|
65
|
+
|
|
54
66
|
backgroundColor: theme(`backgroundColor.${token}` + suffix),
|
|
55
67
|
},
|
|
56
68
|
},
|
|
@@ -77,20 +89,32 @@ module.exports = {
|
|
|
77
89
|
outlineStyle: 'none',
|
|
78
90
|
|
|
79
91
|
[variants['active']]: {
|
|
92
|
+
position: 'relative',
|
|
93
|
+
zIndex: '1',
|
|
94
|
+
|
|
80
95
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
|
|
81
96
|
},
|
|
82
97
|
|
|
83
98
|
// Desktop
|
|
84
99
|
'@media (any-hover: hover)': {
|
|
85
100
|
[variants['hover']]: {
|
|
101
|
+
position: 'relative',
|
|
102
|
+
zIndex: '1',
|
|
103
|
+
|
|
86
104
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
|
|
87
105
|
},
|
|
88
106
|
|
|
89
107
|
[variants['focus-visible']]: {
|
|
108
|
+
position: 'relative',
|
|
109
|
+
zIndex: '1',
|
|
110
|
+
|
|
90
111
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
|
|
91
112
|
},
|
|
92
113
|
|
|
93
114
|
[variants['active']]: {
|
|
115
|
+
position: 'relative',
|
|
116
|
+
zIndex: '1',
|
|
117
|
+
|
|
94
118
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
|
|
95
119
|
},
|
|
96
120
|
},
|
|
@@ -117,20 +141,32 @@ module.exports = {
|
|
|
117
141
|
outlineStyle: 'none',
|
|
118
142
|
|
|
119
143
|
[variants['active']]: {
|
|
144
|
+
position: 'relative',
|
|
145
|
+
zIndex: '1',
|
|
146
|
+
|
|
120
147
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
|
|
121
148
|
},
|
|
122
149
|
|
|
123
150
|
// Desktop
|
|
124
151
|
'@media (any-hover: hover)': {
|
|
125
152
|
[variants['hover']]: {
|
|
153
|
+
position: 'relative',
|
|
154
|
+
zIndex: '1',
|
|
155
|
+
|
|
126
156
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
|
|
127
157
|
},
|
|
128
158
|
|
|
129
159
|
[variants['focus-visible']]: {
|
|
160
|
+
position: 'relative',
|
|
161
|
+
zIndex: '1',
|
|
162
|
+
|
|
130
163
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
|
|
131
164
|
},
|
|
132
165
|
|
|
133
166
|
[variants['active']]: {
|
|
167
|
+
position: 'relative',
|
|
168
|
+
zIndex: '1',
|
|
169
|
+
|
|
134
170
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
|
|
135
171
|
},
|
|
136
172
|
},
|
|
@@ -157,20 +193,32 @@ module.exports = {
|
|
|
157
193
|
outlineStyle: 'none',
|
|
158
194
|
|
|
159
195
|
[variants['active']]: {
|
|
196
|
+
position: 'relative',
|
|
197
|
+
zIndex: '1',
|
|
198
|
+
|
|
160
199
|
color: theme(`textColor.${token}-hover` + suffix),
|
|
161
200
|
},
|
|
162
201
|
|
|
163
202
|
// Desktop
|
|
164
203
|
'@media (any-hover: hover)': {
|
|
165
204
|
[variants['hover']]: {
|
|
205
|
+
position: 'relative',
|
|
206
|
+
zIndex: '1',
|
|
207
|
+
|
|
166
208
|
color: theme(`textColor.${token}-hover` + suffix),
|
|
167
209
|
},
|
|
168
210
|
|
|
169
211
|
[variants['focus-visible']]: {
|
|
212
|
+
position: 'relative',
|
|
213
|
+
zIndex: '1',
|
|
214
|
+
|
|
170
215
|
color: theme(`textColor.${token}-hover` + suffix),
|
|
171
216
|
},
|
|
172
217
|
|
|
173
218
|
[variants['active']]: {
|
|
219
|
+
position: 'relative',
|
|
220
|
+
zIndex: '1',
|
|
221
|
+
|
|
174
222
|
color: theme(`textColor.${token}` + suffix),
|
|
175
223
|
},
|
|
176
224
|
},
|
package/tailwind.config.json
CHANGED
|
@@ -2048,6 +2048,7 @@
|
|
|
2048
2048
|
"auto": "auto"
|
|
2049
2049
|
},
|
|
2050
2050
|
"aria": {
|
|
2051
|
+
"busy": "busy=\"true\"",
|
|
2051
2052
|
"checked": "checked=\"true\"",
|
|
2052
2053
|
"disabled": "disabled=\"true\"",
|
|
2053
2054
|
"expanded": "expanded=\"true\"",
|
|
@@ -3685,6 +3686,7 @@
|
|
|
3685
3686
|
{},
|
|
3686
3687
|
{},
|
|
3687
3688
|
{},
|
|
3689
|
+
{},
|
|
3688
3690
|
{}
|
|
3689
3691
|
],
|
|
3690
3692
|
"darkMode": [
|
|
@@ -5,9 +5,10 @@ const { plugin: typography } = require('./tailwind/plugins/typography');
|
|
|
5
5
|
const { plugin: iconography } = require('./tailwind/plugins/iconography');
|
|
6
6
|
|
|
7
7
|
const { plugin: themePreset } = require('./tailwind/plugins/theme-preset');
|
|
8
|
-
const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
|
|
9
8
|
const { plugin: themeForeground } = require('./tailwind/plugins/theme-foreground');
|
|
9
|
+
const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
|
|
10
10
|
const { plugin: themeBorder } = require('./tailwind/plugins/theme-border');
|
|
11
|
+
const { plugin: themeDivider } = require('./tailwind/plugins/theme-divider');
|
|
11
12
|
const { plugin: themeOutline } = require('./tailwind/plugins/theme-outline');
|
|
12
13
|
|
|
13
14
|
const {
|
|
@@ -201,6 +202,7 @@ module.exports = {
|
|
|
201
202
|
themeForeground,
|
|
202
203
|
themeBackground,
|
|
203
204
|
themeBorder,
|
|
205
|
+
themeDivider,
|
|
204
206
|
themeOutline,
|
|
205
207
|
],
|
|
206
208
|
};
|