@onereach/styles 27.0.2-beta.6103.0 → 27.0.2-beta.6105.0

package/tailwind.config.preset.js

@@ -1,230 +1 @@
-const customTokens = require('./src/variables/tokens/custom-tokens.json');
-const {
-  SpacePatterns: spacingTokens,
-  colors: colorTokens,
-  Gradients: gradientTokens,
-  BorderRadiuses: borderRadiusTokens,
-  Borders: borderWidthTokens,
-  Shadows: boxShadowTokens,
-  typeStyles: typographyTokens,
-} = require('./src/variables/tokens/design-tokens-next.json');
-const { plugin: animationDelay } = require('./tailwind/plugins/animation-delay');
-const { plugin: core } = require('./tailwind/plugins/core');
-const { plugin: iconography } = require('./tailwind/plugins/iconography');
-const { plugin: interactivity } = require('./tailwind/plugins/interactivity');
-const { plugin: layout } = require('./tailwind/plugins/layout');
-const { plugin: legacySpacing } = require('./tailwind/plugins/legacy-spacing');
-const { plugin: themeResponsive } = require('./tailwind/plugins/responsive');
-const { plugin: scrollbar } = require('./tailwind/plugins/scrollbar');
-const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
-const { plugin: themeBorder } = require('./tailwind/plugins/theme-border');
-const { plugin: themeDivider } = require('./tailwind/plugins/theme-divider');
-const { plugin: themeForeground } = require('./tailwind/plugins/theme-foreground');
-const { plugin: themeOutline } = require('./tailwind/plugins/theme-outline');
-const { plugin: themePreset } = require('./tailwind/plugins/theme-preset');
-const { plugin: typography } = require('./tailwind/plugins/typography');
-const {
-  parseBorderWidthTokens,
-  parseBoxShadowTokens,
-  parseFontFamilyTokens,
-  parseFontSizeTokens,
-  parseFontWeightTokens,
-  parseColorTokensNames,
-  parseSpacingTokensNames,
-  parseBorderRadiusTokensNames,
-  parseCustomTokensNames,
-} = require('./tailwind/utils');
-
-
-module.exports = {
-  darkMode: ['variant', '&:is(.dark *), &:is([data-theme="dark"] *)'],
-
-  theme: {
-    tokens: {
-      ...parseCustomTokensNames(customTokens),
-    },
-
-    screens: {},
-
-    spacing: {
-      'none': '0px', // Deprecated, major update required
-      ...parseSpacingTokensNames(spacingTokens),
-    },
-
-    colors: {},
-
-    textColor: {
-      ...parseColorTokensNames(colorTokens, ['generic', 'text']),
-      'transparent': 'transparent',
-      'current': 'currentColor',
-      'inherit': 'inherit',
-    },
-
-    backgroundColor: {
-      // Avoid using `text` colors as a background (only for corner cases)
-      ...parseColorTokensNames(colorTokens, ['generic', 'background', 'text']),
-      'transparent': 'transparent',
-      'current': 'currentColor',
-      'inherit': 'inherit',
-    },
-
-    backgroundImage: {
-      ...parseColorTokensNames(gradientTokens, ['generic']),
-    },
-
-    borderColor: {
-      ...parseColorTokensNames(colorTokens, ['generic', 'text']),
-      'transparent': 'transparent',
-      'current': 'currentColor',
-      'inherit': 'inherit',
-    },
-
-    outlineColor: {
-      ...parseColorTokensNames(colorTokens, ['generic']),
-      'transparent': 'transparent',
-      'current': 'currentColor',
-      'inherit': 'inherit',
-    },
-
-    fill: {
-      ...parseColorTokensNames(colorTokens, ['generic', 'background', 'text']),
-    },
-
-    stroke: {
-      ...parseColorTokensNames(colorTokens, ['generic', 'background', 'text']),
-    },
-
-    content: {
-      'checkbox-checked': '"check_small"',
-      'checkbox-indeterminate': '"check_indeterminate_small"',
-    },
-
-    animation: {
-      'circular-loader': 'circular-loader 1400ms linear infinite',
-      'linear-loader': 'linear-loader 1400ms linear infinite',
-      'skeleton-loader': 'skeleton-loader 1400ms linear infinite',
-      'pulse': 'pulse 1s ease-in-out infinite',
-    },
-
-    keyframes: {
-      'circular-loader': {
-        '0%': {
-          transform: 'rotate(0deg)',
-          strokeDasharray: '0, 200',
-          strokeDashoffset: '0',
-        },
-
-        '50%': {
-          transform: 'rotate(180deg)',
-          strokeDasharray: '100, 200',
-          strokeDashoffset: 'calc((50% - 2px) * -3.14)',
-        },
-
-        '100%': {
-          transform: 'rotate(360deg)',
-          strokeDasharray: '100, 200',
-          strokeDashoffset: 'calc((100% - 2px) * -3.14)',
-        },
-      },
-
-      'linear-loader': {
-        '0%': {
-          strokeDasharray: '25%, 100%',
-          strokeDashoffset: '0',
-        },
-
-        '100%': {
-          strokeDasharray: '25%, 100%',
-          strokeDashoffset: 'calc((100% - 0px) * -2.5)', // Workaround for Safari
-        },
-      },
-
-      'skeleton-loader': {
-        '0%': {
-          backgroundPosition: '100% 50%',
-        },
-
-        '100%': {
-          backgroundPosition: '-100% 50%',
-        },
-      },
-      pulse: {
-        '0%': { opacity: 0 },
-        '25%': { opacity: 0.5 },
-        '50%': { opacity: 1 },
-        '75%': { opacity: 0.5 },
-        '100%': { opacity: 0 },
-      },
-    },
-
-    borderRadius: {
-      'none': '0px', // Deprecated, major update required
-      '0': '0px',
-      ...parseBorderRadiusTokensNames(borderRadiusTokens),
-      'full': '9999px',
-    },
-
-    borderWidth: {
-      '0': '0px',
-      ...parseBorderWidthTokens(borderWidthTokens),
-      '4': '4px',
-    },
-
-    boxShadow: {
-      'none': '0 0 #00000000',
-      ...parseBoxShadowTokens(boxShadowTokens),
-      DEFAULT: '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
-    },
-
-    fontFamily: {
-      ...parseFontFamilyTokens(typographyTokens),
-      'inherit': 'inherit',
-    },
-
-    fontSize: {
-      ...parseFontSizeTokens(typographyTokens),
-      'inherit': ['inherit', { lineHeight: 'inherit' }],
-    },
-
-    fontWeight: {
-      ...parseFontWeightTokens(typographyTokens),
-      'inherit': 'inherit',
-    },
-
-    outlineWidth: {
-      '0': '0px',
-      ...parseBorderWidthTokens(borderWidthTokens),
-      '10': '10px',
-    },
-
-    transitionDuration: {
-      'short': '100ms',
-      'medium': '250ms',
-      'long': '400ms',
-    },
-
-    transitionTimingFunction: {
-      'standard': 'cubic-bezier(0.2, 0, 0, 1)',
-    },
-  },
-
-  plugins: [
-    core,
-    layout,
-    scrollbar,
-    interactivity,
-    typography,
-    iconography,
-    legacySpacing,
-
-    animationDelay,
-
-    themePreset,
-    themeForeground,
-    themeBackground,
-    themeBorder,
-    themeDivider,
-    themeOutline,
-    themeResponsive,
-  ],
-};
+module.exports = require('./tailwind.config.preset.v4.js');

package/tailwind.config.preset.v4.js

@@ -0,0 +1,231 @@
+const customTokens = require('./src/variables/tokens/custom-tokens.json');
+const {
+  SpacePatterns: spacingTokens,
+  colors: colorTokens,
+  Gradients: gradientTokens,
+  BorderRadiuses: borderRadiusTokens,
+  Borders: borderWidthTokens,
+  Shadows: boxShadowTokens,
+  typeStyles: typographyTokens,
+} = require('./src/variables/tokens/design-tokens-next.json');
+const {
+  withLegacySpacingAliases,
+} = require('./tailwind/compatibility/legacy-spacing');
+const { plugin: animationDelay } = require('./tailwind/plugins/animation-delay');
+const { plugin: core } = require('./tailwind/plugins/core');
+const { plugin: iconography } = require('./tailwind/plugins/iconography');
+const { plugin: interactivity } = require('./tailwind/plugins/interactivity');
+const { plugin: layout } = require('./tailwind/plugins/layout');
+const { plugin: themeResponsive } = require('./tailwind/plugins/responsive');
+const { plugin: scrollbar } = require('./tailwind/plugins/scrollbar');
+const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
+const { plugin: themeBorder } = require('./tailwind/plugins/theme-border');
+const { plugin: themeDivider } = require('./tailwind/plugins/theme-divider');
+const { plugin: themeForeground } = require('./tailwind/plugins/theme-foreground');
+const { plugin: themeOutline } = require('./tailwind/plugins/theme-outline');
+const { plugin: themePreset } = require('./tailwind/plugins/theme-preset');
+const { plugin: typography } = require('./tailwind/plugins/typography');
+const {
+  parseBorderWidthTokens,
+  parseBoxShadowTokens,
+  parseFontFamilyTokens,
+  parseFontSizeTokens,
+  parseFontWeightTokens,
+  parseColorTokensNames,
+  parseSpacingTokensNames,
+  parseBorderRadiusTokensNames,
+  parseCustomTokensNames,
+} = require('./tailwind/utils');
+
+
+module.exports = {
+  darkMode: ['variant', '&:is(.dark *, [data-theme="dark"] *)'],
+
+  theme: {
+    tokens: {
+      ...parseCustomTokensNames(customTokens),
+    },
+
+    screens: {},
+
+    spacing: withLegacySpacingAliases({
+      'none': '0px', // Deprecated, major update required
+      ...parseSpacingTokensNames(spacingTokens),
+    }),
+
+    colors: {},
+
+    textColor: {
+      ...parseColorTokensNames(colorTokens, ['generic', 'text']),
+      'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
+    },
+
+    backgroundColor: {
+      // Avoid using `text` colors as a background (only for corner cases)
+      ...parseColorTokensNames(colorTokens, ['generic', 'background', 'text']),
+      'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
+    },
+
+    backgroundImage: {
+      ...parseColorTokensNames(gradientTokens, ['generic']),
+    },
+
+    borderColor: {
+      ...parseColorTokensNames(colorTokens, ['generic', 'text']),
+      'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
+    },
+
+    outlineColor: {
+      ...parseColorTokensNames(colorTokens, ['generic']),
+      'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
+    },
+
+    fill: {
+      ...parseColorTokensNames(colorTokens, ['generic', 'background', 'text']),
+    },
+
+    stroke: {
+      ...parseColorTokensNames(colorTokens, ['generic', 'background', 'text']),
+    },
+
+    content: {
+      'checkbox-checked': '"check_small"',
+      'checkbox-indeterminate': '"check_indeterminate_small"',
+    },
+
+    animation: {
+      'circular-loader': 'circular-loader 1400ms linear infinite',
+      'linear-loader': 'linear-loader 1400ms linear infinite',
+      'skeleton-loader': 'skeleton-loader 1400ms linear infinite',
+      'pulse': 'pulse 1s ease-in-out infinite',
+    },
+
+    keyframes: {
+      'circular-loader': {
+        '0%': {
+          transform: 'rotate(0deg)',
+          strokeDasharray: '0, 200',
+          strokeDashoffset: '0',
+        },
+
+        '50%': {
+          transform: 'rotate(180deg)',
+          strokeDasharray: '100, 200',
+          strokeDashoffset: 'calc((50% - 2px) * -3.14)',
+        },
+
+        '100%': {
+          transform: 'rotate(360deg)',
+          strokeDasharray: '100, 200',
+          strokeDashoffset: 'calc((100% - 2px) * -3.14)',
+        },
+      },
+
+      'linear-loader': {
+        '0%': {
+          strokeDasharray: '25%, 100%',
+          strokeDashoffset: '0',
+        },
+
+        '100%': {
+          strokeDasharray: '25%, 100%',
+          strokeDashoffset: 'calc((100% - 0px) * -2.5)', // Workaround for Safari
+        },
+      },
+
+      'skeleton-loader': {
+        '0%': {
+          backgroundPosition: '100% 50%',
+        },
+
+        '100%': {
+          backgroundPosition: '-100% 50%',
+        },
+      },
+      pulse: {
+        '0%': { opacity: 0 },
+        '25%': { opacity: 0.5 },
+        '50%': { opacity: 1 },
+        '75%': { opacity: 0.5 },
+        '100%': { opacity: 0 },
+      },
+    },
+
+    borderRadius: {
+      'none': '0px', // Deprecated, major update required
+      '0': '0px',
+      ...parseBorderRadiusTokensNames(borderRadiusTokens),
+      'full': '9999px',
+    },
+
+    borderWidth: {
+      '0': '0px',
+      ...parseBorderWidthTokens(borderWidthTokens),
+      '4': '4px',
+    },
+
+    boxShadow: {
+      'none': '0 0 #00000000',
+      ...parseBoxShadowTokens(boxShadowTokens),
+      DEFAULT: '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
+    },
+
+    fontFamily: {
+      ...parseFontFamilyTokens(typographyTokens),
+      'inherit': 'inherit',
+    },
+
+    fontSize: {
+      ...parseFontSizeTokens(typographyTokens),
+      'inherit': ['inherit', { lineHeight: 'inherit' }],
+    },
+
+    fontWeight: {
+      ...parseFontWeightTokens(typographyTokens),
+      'inherit': 'inherit',
+    },
+
+    outlineWidth: {
+      '0': '0px',
+      ...parseBorderWidthTokens(borderWidthTokens),
+      '10': '10px',
+    },
+
+    transitionDuration: {
+      'short': '100ms',
+      'medium': '250ms',
+      'long': '400ms',
+    },
+
+    transitionTimingFunction: {
+      'standard': 'cubic-bezier(0.2, 0, 0, 1)',
+    },
+  },
+
+  plugins: [
+    core,
+    layout,
+    scrollbar,
+    interactivity,
+    typography,
+    iconography,
+
+    animationDelay,
+
+    themePreset,
+    themeForeground,
+    themeBackground,
+    themeBorder,
+    themeDivider,
+    themeOutline,
+    themeResponsive,
+  ],
+};