@onereach/styles 27.0.2-beta.6112.0 → 27.0.2-beta.6121.0

package/README.md

@@ -1,15 +0,0 @@
-# @onereach/styles
-
-Shared UI Next design tokens, base styles, and Tailwind presets.
-
-## Tailwind CSS
-
-UI Next uses Tailwind CSS 4 at runtime. Use `main-v4.css` and
-`tailwind.config.preset.v4.js`.
-
-Existing template classes remain supported through the compatibility layer.
-The Tailwind CSS 3 compiler is not supported.
-
-See [Migrate to Tailwind CSS 4](./MIGRATION_TAILWIND_V4.md) for copyable
-dependency, PostCSS, config, CSS, source-scanning, dark-mode, and legacy
-utility compatibility setup.

package/base.layer.css

@@ -1,4 +1,3 @@
-/* stylelint-disable at-rule-no-deprecated */
 @layer base {
 
   .light-scheme {
@@ -12,12 +11,8 @@
   body {
     @apply text-on-background dark:text-on-background-dark;
     @apply typography-body-1-regular;
+    @apply light-scheme dark:dark-scheme;
 
-    color-scheme: only light;
     @apply overscroll-none overflow-hidden;
   }
-
-  :is(.dark, [data-theme="dark"]) body {
-    color-scheme: only dark;
-  }
 }

package/main-v3.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+
+@import "tokens-v3.css";
+@import "font.css";
+
+@import "base.layer.css";

package/package.json

@@ -1,64 +1,51 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6112.0",
+  "version": "27.0.2-beta.6121.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
   "files": [
     "dist",
-    "MIGRATION_TAILWIND_V4.md",
     "icons",
     "src",
     "tailwind/**",
-    "compat",
     "base.layer.css",
     "font.css",
     "legacy-ui-warning.scss",
-    "main-v4.css",
-    "postcss",
+    "main-v3.css",
     "preflight-revert.css",
     "rollup-plugin-tailwindcss-cli.css",
     "scrollbar.css",
     "tailwind.config.js",
     "tailwind.config.json",
     "tailwind.config.preset.js",
-    "tailwind.config.preset.v4.js",
-    "tailwind.reference.css",
     "temporary-dark-v2.css",
     "tokens.css",
     "tokens-v3.css",
     "tw-color-variables.css",
     "screens.json"
   ],
-  "scripts": {
-    "build": "npm-run-all build:tokens:css build:tokens:css:v3 build:resolve-config build:compat",
-    "build:compat": "node ./scripts/generateLegacyCompatibility.js",
-    "build:resolve-config": "node ./scripts/resolveConfig.js",
-    "build:tokens:css": "node ./utils/makeCssVaribales.js",
-    "build:tokens:css:v3": "node ./utils/makeCssVariablesV3.js",
-    "clean": "rimraf dist",
-    "fix": "stylelint --fix '**/*.scss'",
-    "lint": "stylelint '**/*.scss'",
-    "test:contract": "node --test tests/*.test.cjs"
-  },
   "dependencies": {
-    "@onereach/font-icons": "^27.0.2-beta.6112.0",
-    "postcss-nested": "6.2.0",
-    "tailwindcss": "4.3.2"
+    "@onereach/font-icons": "^27.0.2-beta.6121.0",
+    "tailwindcss": "3.4.16"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.3.2",
     "npm-run-all": "^4.1.5",
     "postcss": "8.4.32",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-preset-env": "^9.1.0",
-    "sass": "^1.63.4",
-    "tailwindcss-v3": "npm:tailwindcss@3.4.16"
-  },
-  "peerDependencies": {
-    "postcss": "^8.4.32"
+    "sass": "^1.63.4"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "npm-run-all build:tokens:css build:tokens:css:v3 build:resolve-config",
+    "build:resolve-config": "node ./scripts/resolveConfig.js",
+    "build:tokens:css": "node ./utils/makeCssVaribales.js",
+    "build:tokens:css:v3": "node ./utils/makeCssVariablesV3.js",
+    "clean": "rimraf dist",
+    "fix": "stylelint --fix '**/*.scss'",
+    "lint": "stylelint '**/*.scss'"
   }
-}
+}

package/rollup-plugin-tailwindcss-cli.css

@@ -1,6 +1,4 @@
-/* stylelint-disable scss/at-rule-no-unknown */
-@import "tailwindcss/theme";
-@import "tailwindcss/utilities";
-@import "./dist/index.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
 
-@config "./tailwind.config.js";
+@import "./dist/index.css";

package/tailwind/plugins/animation-delay.js

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
-const animationDelay = plugin(function ({ matchUtilities, theme }) {
+const animationDelay = plugin(function ({ addUtilities, theme, e }) {
   const defaultValues = {
     'none': '0s',
     75: '75ms',
@@ -36,9 +36,11 @@ const animationDelay = plugin(function ({ matchUtilities, theme }) {
     ...userValues,
   };
 
-  matchUtilities({
-    'animation-delay': (value) => ({ animationDelay: value }),
-  }, { values });
+  const utilities = Object.entries(values).map(([key, value]) => ({
+    [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
+  }));
+
+  addUtilities(utilities);
 });
 
 module.exports = {

package/tailwind/plugins/iconography.js

@@ -1,7 +1,5 @@
 const plugin = require('tailwindcss/plugin');
 
-const { markComponent } = require('./component-marker');
-
 const values = {
   'outlined': '"opsz" 24, "wght" 400, "FILL" 0, "GRAD" 0',
   'outlined-bold': '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
@@ -13,20 +11,18 @@ const values = {
 };
 
 module.exports = {
-  values,
-
   plugin: plugin(({ matchComponents, addComponents }) => {
     matchComponents({
-      'iconography': (value) => markComponent({
+      'iconography': (value) => ({
         fontFamily: '"Material Symbols Outlined"',
         fontVariationSettings: value,
       }),
     }, { values });
 
     addComponents({
-      '.iconography-onereach': markComponent({
+      '.iconography-onereach': {
         fontFamily: '"OneReach Icons"',
-      }),
+      },
     });
   }),
 };

package/tailwind/plugins/layout.js

@@ -1,7 +1,5 @@
 const plugin = require('tailwindcss/plugin');
 
-const { markComponent } = require('./component-marker');
-
 const values = {
   'row': 'row',
   'row-reverse': 'row-reverse',
@@ -24,7 +22,7 @@ module.exports = {
       'layout': (value) => {
         const { prefix = '', direction, suffix = '' } = /^(?:(?<prefix>inline-)\.\.)?(?<direction>row|column)(?<suffix>-reverse)?$/.exec(value).groups;
 
-        return markComponent({
+        return {
           flexGrow: prefix === 'inline-' ? '0' : null,
           flexShrink: prefix === 'inline-' ? '0' : null,
           flexBasis: prefix === 'inline-' ? 'auto' : null,
@@ -39,7 +37,7 @@ module.exports = {
 
           minWidth: prefix === 'inline-' ? 'auto' : null,
           maxWidth: prefix === 'inline-' ? '100%' : null,
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/theme-background.js

@@ -1,9 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
-const { markComponent } = require('./component-marker');
 const { variants } = require('./core');
 
 const values = {
@@ -202,17 +197,17 @@ module.exports = {
       'theme-background': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
-          backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix, token),
+        return {
+          backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
 
-          [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : markImportant({
-            backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
-          }),
+          [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : {
+            backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/theme-border.js

@@ -1,9 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
-const { markComponent } = require('./component-marker');
 const { variants } = require('./core');
 
 const values = {
@@ -52,18 +47,18 @@ module.exports = {
       'theme-border': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
+        return {
           borderStyle: 'solid',
-          borderColor: resolveThemeValue(theme, `borderColor.${token}` + suffix, token),
+          borderColor: theme(`borderColor.${token}` + suffix, token),
 
-          [variants['disabled']]: ['transparent'].includes(token) ? null : markImportant({
-            borderColor: resolveThemeValue(theme, 'borderColor.disabled' + suffix),
-          }),
+          [variants['disabled']]: ['transparent'].includes(token) ? null : {
+            borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/theme-divider.js

@@ -1,9 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
-const { markComponent } = require('./component-marker');
 const { variants } = require('./core');
 
 const values = {
@@ -52,16 +47,16 @@ module.exports = {
       'theme-divider': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
+        return {
           [variants['children']]: {
-            '&:not(:first-child)': markImportant({
-              borderInlineStartStyle: 'none',
-            }),
+            '&:not(:first-child)': {
+              borderInlineStartStyle: 'none !important',
+            },
 
             '&:not(:last-child)': {
               borderInlineEndStyle: 'solid',
               borderInlineEndWidth: '1px',
-              borderInlineEndColor: resolveThemeValue(theme, `borderColor.${token}` + suffix, token),
+              borderInlineEndColor: theme(`borderColor.${token}` + suffix, token),
             },
 
             transitionProperty: 'color, background-color, border-color, outline-color',
@@ -71,12 +66,12 @@ module.exports = {
 
           [variants['disabled']]: ['transparent'].includes(token) ? null : {
             [variants['children']]: {
-              '&:not(:last-child)': markImportant({
-                borderInlineEndColor: resolveThemeValue(theme, 'borderColor.disabled' + suffix),
-              }),
+              '&:not(:last-child)': {
+                borderInlineEndColor: `${theme('borderColor.disabled' + suffix)} !important`,
+              },
             },
           },
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/theme-foreground.js

@@ -1,9 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
-const { markComponent } = require('./component-marker');
 const { variants } = require('./core');
 
 const values = {
@@ -199,17 +194,17 @@ module.exports = {
       'theme-foreground': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix, token),
+        return {
+          color: theme(`textColor.${token}` + suffix, token),
 
-          [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : markImportant({
-            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
-          }),
+          [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : {
+            color: `${theme('textColor.on-disabled' + suffix)} !important`,
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/theme-outline.js

@@ -1,9 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
-const { markComponent } = require('./component-marker');
 const { variants } = require('./core');
 
 const values = {
@@ -43,18 +38,18 @@ module.exports = {
       'theme-outline': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
+        return {
           outlineStyle: 'solid',
-          outlineColor: resolveThemeValue(theme, `outlineColor.${token}` + suffix, token),
+          outlineColor: theme(`outlineColor.${token}` + suffix, token),
 
-          [variants['disabled']]: ['transparent'].includes(token) ? null : markImportant({
-            outlineColor: resolveThemeValue(theme, 'outlineColor.transparent' + suffix),
-          }),
+          [variants['disabled']]: ['transparent'].includes(token) ? null : {
+            outlineColor: `${theme('outlineColor.transparent' + suffix)} !important`,
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/theme-preset.js

@@ -1,9 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
-const { markComponent } = require('./component-marker');
 const { variants } = require('./core');
 
 const values = {
@@ -34,90 +29,90 @@ module.exports = {
       'theme-preset-1': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
-          color: resolveThemeValue(theme, `textColor.on-${token}` + suffix),
-          backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
+        return {
+          color: theme(`textColor.on-${token}` + suffix),
+          backgroundColor: theme(`backgroundColor.${token}` + suffix),
 
           borderStyle: 'none',
           outlineStyle: 'none',
 
           [variants['mobile']]: {
             [variants['active']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
             },
           },
 
           [variants['desktop']]: {
             [variants['hover']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
             },
 
             [variants['focus-visible']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-hover` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
             },
 
             [variants['active']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}` + suffix),
             },
           },
 
-          [variants['disabled']]: markImportant({
-            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
-            backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
-          }),
+          [variants['disabled']]: {
+            color: `${theme('textColor.on-disabled' + suffix)} !important`,
+            backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
 
       'theme-preset-2': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix),
-          backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
+        return {
+          color: theme(`textColor.${token}` + suffix),
+          backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
 
           borderStyle: 'none',
           outlineStyle: 'none',
 
           [variants['mobile']]: {
             [variants['active']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
             },
           },
 
           [variants['desktop']]: {
             [variants['hover']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
             },
 
             [variants['focus-visible']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-12` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
             },
 
             [variants['active']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-16` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
             },
           },
 
-          [variants['disabled']]: markImportant({
-            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
-            backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
-          }),
+          [variants['disabled']]: {
+            color: `${theme('textColor.on-disabled' + suffix)} !important`,
+            backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
 
       'theme-preset-3': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix),
+        return {
+          color: theme(`textColor.${token}` + suffix),
           backgroundColor: 'transparent',
 
           borderStyle: 'none',
@@ -125,40 +120,40 @@ module.exports = {
 
           [variants['mobile']]: {
             [variants['active']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
             },
           },
 
           [variants['desktop']]: {
             [variants['hover']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
             },
 
             [variants['focus-visible']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
             },
 
             [variants['active']]: {
-              backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-16` + suffix),
+              backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
             },
           },
 
-          [variants['disabled']]: markImportant({
-            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
-            backgroundColor: 'transparent',
-          }),
+          [variants['disabled']]: {
+            color: `${theme('textColor.on-disabled' + suffix)} !important`,
+            backgroundColor: 'transparent !important',
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
 
       'theme-preset-4': (value) => {
         const [token, suffix = ''] = value.split('..');
 
-        return markComponent({
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix),
+        return {
+          color: theme(`textColor.${token}` + suffix),
           backgroundColor: 'transparent',
 
           borderStyle: 'none',
@@ -166,33 +161,33 @@ module.exports = {
 
           [variants['mobile']]: {
             [variants['active']]: {
-              color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
+              color: theme(`textColor.${token}-hover` + suffix),
             },
           },
 
           [variants['desktop']]: {
             [variants['hover']]: {
-              color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
+              color: theme(`textColor.${token}-hover` + suffix),
             },
 
             [variants['focus-visible']]: {
-              color: resolveThemeValue(theme, `textColor.${token}-hover` + suffix),
+              color: theme(`textColor.${token}-hover` + suffix),
             },
 
             [variants['active']]: {
-              color: resolveThemeValue(theme, `textColor.${token}` + suffix),
+              color: theme(`textColor.${token}` + suffix),
             },
           },
 
-          [variants['disabled']]: markImportant({
-            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
-            backgroundColor: 'transparent',
-          }),
+          [variants['disabled']]: {
+            color: `${theme('textColor.on-disabled' + suffix)} !important`,
+            backgroundColor: 'transparent !important',
+          },
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
           transitionTimingFunction: theme('transitionTimingFunction.standard'),
-        });
+        };
       },
     }, { values });
   }),

package/tailwind/plugins/typography.js

@@ -1,9 +1,6 @@
 const plugin = require('tailwindcss/plugin');
-
 const screens = require('../../screens.json');
 
-const { markComponent } = require('./component-marker');
-
 const values = {
   'display-large': 'display-large',
   'display-medium': 'display-medium',
@@ -42,7 +39,7 @@ module.exports = {
         const [fontSizeDesktop, optionsDesktop] = fontSizeConfig[value] ?? [];
         const [fontSizeMobile, optionsMobile] = fontSizeConfig[`mobile-${value}`] ?? [];
 
-        return markComponent({
+        return {
           fontFamily: theme(`fontFamily.mobile-${value}`) ?? theme(`fontFamily.${value}`),
           fontWeight: theme(`fontWeight.mobile-${value}`) ?? theme(`fontWeight.${value}`),
           fontSize: fontSizeMobile ?? fontSizeDesktop,
@@ -69,7 +66,7 @@ module.exports = {
             fontSize: fontSizeDesktop,
             lineHeight: optionsDesktop?.lineHeight,
           },
-        });
+        };
       },
     }, { values });
   }),