@onereach/styles 27.0.2-beta.6102.0 → 27.0.2-beta.6104.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 (21) hide show
  1. package/MIGRATION_TAILWIND_V4.md +149 -0
  2. package/README.md +14 -0
  3. package/compat/tailwind-v3-utilities.css +1 -0
  4. package/main-v3.css +1 -1
  5. package/main-v4.css +3 -0
  6. package/package.json +17 -6
  7. package/postcss/tailwind-v4-compat.cjs +420 -0
  8. package/rollup-plugin-tailwindcss-cli.css +2 -1
  9. package/tailwind/compatibility/important.js +13 -0
  10. package/tailwind/compatibility/legacy-spacing.js +133 -0
  11. package/tailwind/plugins/theme-background.js +4 -3
  12. package/tailwind/plugins/theme-border.js +4 -3
  13. package/tailwind/plugins/theme-divider.js +7 -6
  14. package/tailwind/plugins/theme-foreground.js +4 -3
  15. package/tailwind/plugins/theme-outline.js +4 -3
  16. package/tailwind/plugins/theme-preset.js +17 -16
  17. package/tailwind.config.js +1 -3
  18. package/tailwind.config.json +2681 -1030
  19. package/tailwind.config.preset.js +1 -230
  20. package/tailwind.config.preset.v4.js +231 -0
  21. package/legacy-utilities.layer.css +0 -67219
package/tailwind/plugins/theme-divider.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
+ const { markImportant } = require('../compatibility/important');
3
4
  const { resolveThemeValue } = require('../utils');
4
5
 
5
6
  const { variants } = require('./core');
@@ -52,9 +53,9 @@ module.exports = {
52
53
 
53
54
  return {
54
55
  [variants['children']]: {
55
- '&:not(:first-child)': {
56
- borderInlineStartStyle: 'none !important',
57
- },
56
+ '&:not(:first-child)': markImportant({
57
+ borderInlineStartStyle: 'none',
58
+ }),
58
59
 
59
60
  '&:not(:last-child)': {
60
61
  borderInlineEndStyle: 'solid',
@@ -69,9 +70,9 @@ module.exports = {
69
70
 
70
71
  [variants['disabled']]: ['transparent'].includes(token) ? null : {
71
72
  [variants['children']]: {
72
- '&:not(:last-child)': {
73
- borderInlineEndColor: `${resolveThemeValue(theme, 'borderColor.disabled' + suffix)} !important`,
74
- },
73
+ '&:not(:last-child)': markImportant({
74
+ borderInlineEndColor: resolveThemeValue(theme, 'borderColor.disabled' + suffix),
75
+ }),
75
76
  },
76
77
  },
77
78
  };
package/tailwind/plugins/theme-foreground.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
+ const { markImportant } = require('../compatibility/important');
3
4
  const { resolveThemeValue } = require('../utils');
4
5
 
5
6
  const { variants } = require('./core');
@@ -200,9 +201,9 @@ module.exports = {
200
201
  return {
201
202
  color: resolveThemeValue(theme, `textColor.${token}` + suffix, token),
202
203
 
203
- [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : {
204
- color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
205
- },
204
+ [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : markImportant({
205
+ color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
206
+ }),
206
207
 
207
208
  transitionProperty: 'color, background-color, border-color, outline-color',
208
209
  transitionDuration: theme('transitionDuration.short'),
package/tailwind/plugins/theme-outline.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
+ const { markImportant } = require('../compatibility/important');
3
4
  const { resolveThemeValue } = require('../utils');
4
5
 
5
6
  const { variants } = require('./core');
@@ -45,9 +46,9 @@ module.exports = {
45
46
  outlineStyle: 'solid',
46
47
  outlineColor: resolveThemeValue(theme, `outlineColor.${token}` + suffix, token),
47
48
 
48
- [variants['disabled']]: ['transparent'].includes(token) ? null : {
49
- outlineColor: `${resolveThemeValue(theme, 'outlineColor.transparent' + suffix)} !important`,
50
- },
49
+ [variants['disabled']]: ['transparent'].includes(token) ? null : markImportant({
50
+ outlineColor: resolveThemeValue(theme, 'outlineColor.transparent' + suffix),
51
+ }),
51
52
 
52
53
  transitionProperty: 'color, background-color, border-color, outline-color',
53
54
  transitionDuration: theme('transitionDuration.short'),
package/tailwind/plugins/theme-preset.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
+ const { markImportant } = require('../compatibility/important');
3
4
  const { resolveThemeValue } = require('../utils');
4
5
 
5
6
  const { variants } = require('./core');
@@ -58,10 +59,10 @@ module.exports = {
58
59
  },
59
60
  },
60
61
 
61
- [variants['disabled']]: {
62
- color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
63
- backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
64
- },
62
+ [variants['disabled']]: markImportant({
63
+ color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
64
+ backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
65
+ }),
65
66
 
66
67
  transitionProperty: 'color, background-color, border-color, outline-color',
67
68
  transitionDuration: theme('transitionDuration.short'),
@@ -98,10 +99,10 @@ module.exports = {
98
99
  },
99
100
  },
100
101
 
101
- [variants['disabled']]: {
102
- color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
103
- backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
104
- },
102
+ [variants['disabled']]: markImportant({
103
+ color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
104
+ backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
105
+ }),
105
106
 
106
107
  transitionProperty: 'color, background-color, border-color, outline-color',
107
108
  transitionDuration: theme('transitionDuration.short'),
@@ -138,10 +139,10 @@ module.exports = {
138
139
  },
139
140
  },
140
141
 
141
- [variants['disabled']]: {
142
- color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
143
- backgroundColor: 'transparent !important',
144
- },
142
+ [variants['disabled']]: markImportant({
143
+ color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
144
+ backgroundColor: 'transparent',
145
+ }),
145
146
 
146
147
  transitionProperty: 'color, background-color, border-color, outline-color',
147
148
  transitionDuration: theme('transitionDuration.short'),
@@ -178,10 +179,10 @@ module.exports = {
178
179
  },
179
180
  },
180
181
 
181
- [variants['disabled']]: {
182
- color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
183
- backgroundColor: 'transparent !important',
184
- },
182
+ [variants['disabled']]: markImportant({
183
+ color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
184
+ backgroundColor: 'transparent',
185
+ }),
185
186
 
186
187
  transitionProperty: 'color, background-color, border-color, outline-color',
187
188
  transitionDuration: theme('transitionDuration.short'),
package/tailwind.config.js CHANGED
@@ -8,7 +8,5 @@ module.exports = {
8
8
  './node_modules/@onereach/auth-ui-module/dist/auto/**/*.{vue,js,mjs,ts,jsx,tsx}',
9
9
  './node_modules/@onereach/ui-components/dist/esm/**/*.{vue,js,mjs,ts,jsx,tsx}',
10
10
  ],
11
- presets: [
12
- require('@onereach/styles/tailwind.config.preset.js'),
13
- ],
11
+ presets: [require('./tailwind.config.preset.v4.js')],
14
12
  };