@onereach/styles 27.0.1 → 27.0.2-beta.6094.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 +5 -5
  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 -40
  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",
3
+ "version": "27.0.2-beta.6094.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",
38
- "tailwindcss": "3.4.16"
37
+ "@onereach/font-icons": "^27.0.2-beta.6094.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",
@@ -47,6 +48,5 @@
47
48
  },
48
49
  "publishConfig": {
49
50
  "access": "public"
50
- },
51
- "gitHead": "23b145e496e8d5b417f0c43827eb8a1c7a920830"
51
+ }
52
52
  }
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,32 @@ 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),
35
-
36
- borderStyle: 'none',
37
- outlineStyle: 'none',
36
+ color: resolveThemeValue(theme, `textColor.on-${token}` + suffix),
37
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
38
38
 
39
39
  [variants['mobile']]: {
40
40
  [variants['active']]: {
41
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
41
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
42
42
  },
43
43
  },
44
44
 
45
45
  [variants['desktop']]: {
46
46
  [variants['hover']]: {
47
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
47
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
48
48
  },
49
49
 
50
50
  [variants['focus-visible']]: {
51
- backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
51
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
52
52
  },
53
53
 
54
54
  [variants['active']]: {
55
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
55
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
56
56
  },
57
57
  },
58
58
 
59
59
  [variants['disabled']]: {
60
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
61
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
60
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
61
+ backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
62
62
  },
63
63
 
64
64
  transitionProperty: 'color, background-color, border-color, outline-color',
@@ -71,35 +71,32 @@ module.exports = {
71
71
  const [token, suffix = ''] = value.split('..');
72
72
 
73
73
  return {
74
- color: theme(`textColor.${token}` + suffix),
75
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
76
-
77
- borderStyle: 'none',
78
- outlineStyle: 'none',
74
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
75
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
79
76
 
80
77
  [variants['mobile']]: {
81
78
  [variants['active']]: {
82
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
79
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
83
80
  },
84
81
  },
85
82
 
86
83
  [variants['desktop']]: {
87
84
  [variants['hover']]: {
88
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
85
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
89
86
  },
90
87
 
91
88
  [variants['focus-visible']]: {
92
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
89
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
93
90
  },
94
91
 
95
92
  [variants['active']]: {
96
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
93
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-16` + suffix),
97
94
  },
98
95
  },
99
96
 
100
97
  [variants['disabled']]: {
101
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
102
- backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
98
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
99
+ backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
103
100
  },
104
101
 
105
102
  transitionProperty: 'color, background-color, border-color, outline-color',
@@ -112,34 +109,31 @@ module.exports = {
112
109
  const [token, suffix = ''] = value.split('..');
113
110
 
114
111
  return {
115
- color: theme(`textColor.${token}` + suffix),
112
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
116
113
  backgroundColor: 'transparent',
117
114
 
118
- borderStyle: 'none',
119
- outlineStyle: 'none',
120
-
121
115
  [variants['mobile']]: {
122
116
  [variants['active']]: {
123
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
117
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
124
118
  },
125
119
  },
126
120
 
127
121
  [variants['desktop']]: {
128
122
  [variants['hover']]: {
129
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
123
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
130
124
  },
131
125
 
132
126
  [variants['focus-visible']]: {
133
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
127
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
134
128
  },
135
129
 
136
130
  [variants['active']]: {
137
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
131
+ backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-16` + suffix),
138
132
  },
139
133
  },
140
134
 
141
135
  [variants['disabled']]: {
142
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
136
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
143
137
  backgroundColor: 'transparent !important',
144
138
  },
145
139
 
@@ -153,34 +147,31 @@ module.exports = {
153
147
  const [token, suffix = ''] = value.split('..');
154
148
 
155
149
  return {
156
- color: theme(`textColor.${token}` + suffix),
150
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
157
151
  backgroundColor: 'transparent',
158
152
 
159
- borderStyle: 'none',
160
- outlineStyle: 'none',
161
-
162
153
  [variants['mobile']]: {
163
154
  [variants['active']]: {
164
- color: theme(`textColor.${token}-hover` + suffix),
155
+ color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
165
156
  },
166
157
  },
167
158
 
168
159
  [variants['desktop']]: {
169
160
  [variants['hover']]: {
170
- color: theme(`textColor.${token}-hover` + suffix),
161
+ color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
171
162
  },
172
163
 
173
164
  [variants['focus-visible']]: {
174
- color: theme(`textColor.${token}-hover` + suffix),
165
+ color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
175
166
  },
176
167
 
177
168
  [variants['active']]: {
178
- color: theme(`textColor.${token}` + suffix),
169
+ color: resolveThemeValue(theme, `textColor.${token}` + suffix),
179
170
  },
180
171
  },
181
172
 
182
173
  [variants['disabled']]: {
183
- color: `${theme('textColor.on-disabled' + suffix)} !important`,
174
+ color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
184
175
  backgroundColor: 'transparent !important',
185
176
  },
186
177
 
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
  };