@onereach/styles 27.0.1-beta.6090.0 → 27.0.2-beta.6093.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 (13) hide show
  1. package/base.layer.css +6 -1
  2. package/main-v3.css +6 -6
  3. package/package.json +4 -3
  4. package/rollup-plugin-tailwindcss-cli.css +4 -3
  5. package/tailwind/plugins/animation-delay.js +4 -6
  6. package/tailwind/plugins/theme-background.js +5 -2
  7. package/tailwind/plugins/theme-border.js +5 -2
  8. package/tailwind/plugins/theme-divider.js +5 -2
  9. package/tailwind/plugins/theme-foreground.js +5 -2
  10. package/tailwind/plugins/theme-outline.js +5 -2
  11. package/tailwind/plugins/theme-preset.js +31 -28
  12. package/tailwind/utils.js +13 -0
  13. package/tailwind.config.json +1546 -2912
package/base.layer.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* stylelint-disable at-rule-no-deprecated */
1
2
  @layer base {
2
3
 
3
4
  .light-scheme {
@@ -11,8 +12,12 @@
11
12
  body {
12
13
  @apply text-on-background dark:text-on-background-dark;
13
14
  @apply typography-body-1-regular;
14
- @apply light-scheme dark:dark-scheme;
15
15
 
16
+ color-scheme: only light;
16
17
  @apply overscroll-none overflow-hidden;
17
18
  }
19
+
20
+ :is(.dark, [data-theme="dark"]) body {
21
+ color-scheme: only dark;
22
+ }
18
23
  }
package/main-v3.css CHANGED
@@ -1,8 +1,8 @@
1
- @import "tailwindcss/base.css";
2
- @import "tailwindcss/components.css";
3
- @import "tailwindcss/utilities.css";
1
+ /* stylelint-disable scss/at-rule-no-unknown */
2
+ @import "tailwindcss";
3
+ @import "./tokens-v3.css";
4
+ @import "./font.css";
4
5
 
5
- @import "tokens-v3.css";
6
- @import "font.css";
6
+ @import "./base.layer.css";
7
7
 
8
- @import "base.layer.css";
8
+ @config "./tailwind.config.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "27.0.1-beta.6090.0",
3
+ "version": "27.0.2-beta.6093.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "Apache-2.0",
6
6
  "files": [
@@ -34,10 +34,11 @@
34
34
  "lint": "stylelint '**/*.scss'"
35
35
  },
36
36
  "dependencies": {
37
- "@onereach/font-icons": "^27.0.1-beta.6090.0",
38
- "tailwindcss": "3.4.16"
37
+ "@onereach/font-icons": "^27.0.2-beta.6093.0",
38
+ "tailwindcss": "4.3.2"
39
39
  },
40
40
  "devDependencies": {
41
+ "@tailwindcss/postcss": "4.3.2",
41
42
  "npm-run-all": "^4.1.5",
42
43
  "postcss": "8.4.32",
43
44
  "postcss-cli": "^10.1.0",
package/rollup-plugin-tailwindcss-cli.css CHANGED
@@ -1,4 +1,5 @@
1
- @import "tailwindcss/components.css";
2
- @import "tailwindcss/utilities.css";
3
-
1
+ /* stylelint-disable scss/at-rule-no-unknown */
2
+ @import "tailwindcss";
4
3
  @import "./dist/index.css";
4
+
5
+ @config "./tailwind.config.js";
package/tailwind/plugins/animation-delay.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
- const animationDelay = plugin(function ({ addUtilities, theme, e }) {
3
+ const animationDelay = plugin(function ({ matchUtilities, theme }) {
4
4
  const defaultValues = {
5
5
  'none': '0s',
6
6
  75: '75ms',
@@ -36,11 +36,9 @@ const animationDelay = plugin(function ({ addUtilities, theme, e }) {
36
36
  ...userValues,
37
37
  };
38
38
 
39
- const utilities = Object.entries(values).map(([key, value]) => ({
40
- [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
41
- }));
42
-
43
- addUtilities(utilities);
39
+ matchUtilities({
40
+ 'animation-delay': (value) => ({ animationDelay: value }),
41
+ }, { values });
44
42
  });
45
43
 
46
44
  module.exports = {
package/tailwind/plugins/theme-background.js CHANGED
@@ -1,4 +1,7 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+
3
+ const { resolveThemeValue } = require('../utils');
4
+
2
5
  const { variants } = require('./core');
3
6
 
4
7
  const values = {
@@ -198,10 +201,10 @@ module.exports = {
198
201
  const [token, suffix = ''] = value.split('..');
199
202
 
200
203
  return {
201
- backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
204
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix, token),
202
205
 
203
206
  [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : {
204
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
207
+ backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
205
208
  },
206
209
 
207
210
  transitionProperty: 'color, background-color, border-color, outline-color',
package/tailwind/plugins/theme-border.js CHANGED
@@ -1,4 +1,7 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+
3
+ const { resolveThemeValue } = require('../utils');
4
+
2
5
  const { variants } = require('./core');
3
6
 
4
7
  const values = {
@@ -49,10 +52,10 @@ module.exports = {
49
52
 
50
53
  return {
51
54
  borderStyle: 'solid',
52
- borderColor: theme(`borderColor.${token}` + suffix, token),
55
+ borderColor: resolveThemeValue(theme, `borderColor.${token}` + suffix, token),
53
56
 
54
57
  [variants['disabled']]: ['transparent'].includes(token) ? null : {
55
- borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
58
+ borderColor: `${resolveThemeValue(theme, 'borderColor.disabled' + suffix)} !important`,
56
59
  },
57
60
 
58
61
  transitionProperty: 'color, background-color, border-color, outline-color',
package/tailwind/plugins/theme-divider.js CHANGED
@@ -1,4 +1,7 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+
3
+ const { resolveThemeValue } = require('../utils');
4
+
2
5
  const { variants } = require('./core');
3
6
 
4
7
  const values = {
@@ -56,7 +59,7 @@ module.exports = {
56
59
  '&:not(:last-child)': {
57
60
  borderInlineEndStyle: 'solid',
58
61
  borderInlineEndWidth: '1px',
59
- borderInlineEndColor: theme(`borderColor.${token}` + suffix, token),
62
+ borderInlineEndColor: resolveThemeValue(theme, `borderColor.${token}` + suffix, token),
60
63
  },
61
64
 
62
65
  transitionProperty: 'color, background-color, border-color, outline-color',
@@ -67,7 +70,7 @@ module.exports = {
67
70
  [variants['disabled']]: ['transparent'].includes(token) ? null : {
68
71
  [variants['children']]: {
69
72
  '&:not(:last-child)': {
70
- borderInlineEndColor: `${theme('borderColor.disabled' + suffix)} !important`,
73
+ borderInlineEndColor: `${resolveThemeValue(theme, 'borderColor.disabled' + suffix)} !important`,
71
74
  },
72
75
  },
73
76
  },
package/tailwind/plugins/theme-foreground.js CHANGED
@@ -1,4 +1,7 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+
3
+ const { resolveThemeValue } = require('../utils');
4
+
2
5
  const { variants } = require('./core');
3
6
 
4
7
  const values = {
@@ -195,10 +198,10 @@ module.exports = {
195
198
  const [token, suffix = ''] = value.split('..');
196
199
 
197
200
  return {
198
- color: theme(`textColor.${token}` + suffix, token),
201
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix, token),
199
202
 
200
203
  [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : {
201
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
204
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
202
205
  },
203
206
 
204
207
  transitionProperty: 'color, background-color, border-color, outline-color',
package/tailwind/plugins/theme-outline.js CHANGED
@@ -1,4 +1,7 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+
3
+ const { resolveThemeValue } = require('../utils');
4
+
2
5
  const { variants } = require('./core');
3
6
 
4
7
  const values = {
@@ -40,10 +43,10 @@ module.exports = {
40
43
 
41
44
  return {
42
45
  outlineStyle: 'solid',
43
- outlineColor: theme(`outlineColor.${token}` + suffix, token),
46
+ outlineColor: resolveThemeValue(theme, `outlineColor.${token}` + suffix, token),
44
47
 
45
48
  [variants['disabled']]: ['transparent'].includes(token) ? null : {
46
- outlineColor: `${theme('outlineColor.transparent' + suffix)} !important`,
49
+ outlineColor: `${resolveThemeValue(theme, 'outlineColor.transparent' + suffix)} !important`,
47
50
  },
48
51
 
49
52
  transitionProperty: 'color, background-color, border-color, outline-color',
package/tailwind/plugins/theme-preset.js CHANGED
@@ -1,4 +1,7 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
+
3
+ const { resolveThemeValue } = require('../utils');
4
+
2
5
  const { variants } = require('./core');
3
6
 
4
7
  const values = {
@@ -30,35 +33,35 @@ module.exports = {
30
33
  const [token, suffix = ''] = value.split('..');
31
34
 
32
35
  return {
33
- color: theme(`textColor.on-${token}` + suffix),
34
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
36
+ color: resolveThemeValue(theme, `textColor.on-${token}` + suffix),
37
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
35
38
 
36
39
  borderStyle: 'none',
37
40
  outlineStyle: 'none',
38
41
 
39
42
  [variants['mobile']]: {
40
43
  [variants['active']]: {
41
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
44
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
42
45
  },
43
46
  },
44
47
 
45
48
  [variants['desktop']]: {
46
49
  [variants['hover']]: {
47
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
50
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
48
51
  },
49
52
 
50
53
  [variants['focus-visible']]: {
51
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
54
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
52
55
  },
53
56
 
54
57
  [variants['active']]: {
55
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
58
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
56
59
  },
57
60
  },
58
61
 
59
62
  [variants['disabled']]: {
60
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
61
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
63
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
64
+ backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
62
65
  },
63
66
 
64
67
  transitionProperty: 'color, background-color, border-color, outline-color',
@@ -71,35 +74,35 @@ module.exports = {
71
74
  const [token, suffix = ''] = value.split('..');
72
75
 
73
76
  return {
74
- color: theme(`textColor.${token}` + suffix),
75
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
77
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
78
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
76
79
 
77
80
  borderStyle: 'none',
78
81
  outlineStyle: 'none',
79
82
 
80
83
  [variants['mobile']]: {
81
84
  [variants['active']]: {
82
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
85
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
83
86
  },
84
87
  },
85
88
 
86
89
  [variants['desktop']]: {
87
90
  [variants['hover']]: {
88
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
91
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
89
92
  },
90
93
 
91
94
  [variants['focus-visible']]: {
92
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
95
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
93
96
  },
94
97
 
95
98
  [variants['active']]: {
96
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
99
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-16` + suffix),
97
100
  },
98
101
  },
99
102
 
100
103
  [variants['disabled']]: {
101
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
102
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
104
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
105
+ backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
103
106
  },
104
107
 
105
108
  transitionProperty: 'color, background-color, border-color, outline-color',
@@ -112,7 +115,7 @@ module.exports = {
112
115
  const [token, suffix = ''] = value.split('..');
113
116
 
114
117
  return {
115
- color: theme(`textColor.${token}` + suffix),
118
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
116
119
  backgroundColor: 'transparent',
117
120
 
118
121
  borderStyle: 'none',
@@ -120,26 +123,26 @@ module.exports = {
120
123
 
121
124
  [variants['mobile']]: {
122
125
  [variants['active']]: {
123
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
126
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
124
127
  },
125
128
  },
126
129
 
127
130
  [variants['desktop']]: {
128
131
  [variants['hover']]: {
129
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
132
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
130
133
  },
131
134
 
132
135
  [variants['focus-visible']]: {
133
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
136
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
134
137
  },
135
138
 
136
139
  [variants['active']]: {
137
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
140
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-16` + suffix),
138
141
  },
139
142
  },
140
143
 
141
144
  [variants['disabled']]: {
142
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
145
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
143
146
  backgroundColor: 'transparent !important',
144
147
  },
145
148
 
@@ -153,7 +156,7 @@ module.exports = {
153
156
  const [token, suffix = ''] = value.split('..');
154
157
 
155
158
  return {
156
- color: theme(`textColor.${token}` + suffix),
159
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
157
160
  backgroundColor: 'transparent',
158
161
 
159
162
  borderStyle: 'none',
@@ -161,26 +164,26 @@ module.exports = {
161
164
 
162
165
  [variants['mobile']]: {
163
166
  [variants['active']]: {
164
- color: theme(`textColor.${token}-hover` + suffix),
167
+ color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
165
168
  },
166
169
  },
167
170
 
168
171
  [variants['desktop']]: {
169
172
  [variants['hover']]: {
170
- color: theme(`textColor.${token}-hover` + suffix),
173
+ color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
171
174
  },
172
175
 
173
176
  [variants['focus-visible']]: {
174
- color: theme(`textColor.${token}-hover` + suffix),
177
+ color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
175
178
  },
176
179
 
177
180
  [variants['active']]: {
178
- color: theme(`textColor.${token}` + suffix),
181
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
179
182
  },
180
183
  },
181
184
 
182
185
  [variants['disabled']]: {
183
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
186
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
184
187
  backgroundColor: 'transparent !important',
185
188
  },
186
189
 
package/tailwind/utils.js CHANGED
@@ -246,4 +246,17 @@ module.exports = {
246
246
  return preset;
247
247
  }, {});
248
248
  },
249
+
250
+ resolveThemeValue(theme, path, fallback) {
251
+ const value = theme(path, fallback);
252
+
253
+ if (!value || typeof value !== 'object') {
254
+ return value ?? fallback;
255
+ }
256
+
257
+ return value.DEFAULT
258
+ ?? value.default
259
+ ?? value['-d-e-f-a-u-l-t']
260
+ ?? fallback;
261
+ },
249
262
  };