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

package/README.md

@@ -1,14 +0,0 @@
-# @onereach/styles
-
-Shared UI Next design tokens, base styles, and Tailwind presets.
-
-## Tailwind CSS
-
-- Tailwind CSS 3 consumers use `main-v3.css` and
-  `tailwind.config.preset.js`.
-- Tailwind CSS 4 consumers use `main-v4.css` and
-  `tailwind.config.preset.v4.js`.
-
-See [Migrate to Tailwind CSS 4](./MIGRATION_TAILWIND_V4.md) for copyable
-dependency, PostCSS, config, CSS, source-scanning, dark-mode, and optional
-legacy utility 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

@@ -1,9 +1,8 @@
-/* stylelint-disable scss/at-rule-no-unknown */
-@import "tailwindcss";
-@import "./tokens-v3.css";
-@import "./font.css";
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
 
-@import "./base.layer.css";
-@import "./compat/tailwind-v3-utilities.css";
+@import "tokens-v3.css";
+@import "font.css";
 
-@config "./tailwind.config.js";
+@import "base.layer.css";

package/package.json

@@ -1,64 +1,51 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6111.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-v3.css",
-    "main-v4.css",
-    "postcss",
     "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",
     "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.6111.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/theme-background.js

@@ -1,8 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
 const { variants } = require('./core');
 
 const values = {
@@ -202,11 +198,11 @@ module.exports = {
         const [token, suffix = ''] = value.split('..');
 
         return {
-          backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix, token),
+          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'),

package/tailwind/plugins/theme-border.js

@@ -1,8 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
 const { variants } = require('./core');
 
 const values = {
@@ -53,11 +49,11 @@ module.exports = {
 
         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'),

package/tailwind/plugins/theme-divider.js

@@ -1,8 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
 const { variants } = require('./core');
 
 const values = {
@@ -53,14 +49,14 @@ module.exports = {
 
         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',
@@ -70,9 +66,9 @@ 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`,
+              },
             },
           },
         };

package/tailwind/plugins/theme-foreground.js

@@ -1,8 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
 const { variants } = require('./core');
 
 const values = {
@@ -199,11 +195,11 @@ module.exports = {
         const [token, suffix = ''] = value.split('..');
 
         return {
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix, token),
+          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'),

package/tailwind/plugins/theme-outline.js

@@ -1,8 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
 const { variants } = require('./core');
 
 const values = {
@@ -44,11 +40,11 @@ module.exports = {
 
         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'),

package/tailwind/plugins/theme-preset.js

@@ -1,8 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-
-const { markImportant } = require('../compatibility/important');
-const { resolveThemeValue } = require('../utils');
-
 const { variants } = require('./core');
 
 const values = {
@@ -34,36 +30,36 @@ module.exports = {
         const [token, suffix = ''] = value.split('..');
 
         return {
-          color: resolveThemeValue(theme, `textColor.on-${token}` + suffix),
-          backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
+          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'),
@@ -75,36 +71,36 @@ module.exports = {
         const [token, suffix = ''] = value.split('..');
 
         return {
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix),
-          backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
+          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'),
@@ -116,7 +112,7 @@ module.exports = {
         const [token, suffix = ''] = value.split('..');
 
         return {
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix),
+          color: theme(`textColor.${token}` + suffix),
           backgroundColor: 'transparent',
 
           borderStyle: 'none',
@@ -124,28 +120,28 @@ 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'),
@@ -157,7 +153,7 @@ module.exports = {
         const [token, suffix = ''] = value.split('..');
 
         return {
-          color: resolveThemeValue(theme, `textColor.${token}` + suffix),
+          color: theme(`textColor.${token}` + suffix),
           backgroundColor: 'transparent',
 
           borderStyle: 'none',
@@ -165,28 +161,28 @@ 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'),

package/tailwind/utils.js

@@ -246,17 +246,4 @@ module.exports = {
       return preset;
     }, {});
   },
-
-  resolveThemeValue(theme, path, fallback) {
-    const value = theme(path, fallback);
-
-    if (!value || typeof value !== 'object') {
-      return value ?? fallback;
-    }
-
-    return value.DEFAULT
-      ?? value.default
-      ?? value['-d-e-f-a-u-l-t']
-      ?? fallback;
-  },
 };

package/tailwind.config.js

@@ -8,5 +8,7 @@ module.exports = {
     './node_modules/@onereach/auth-ui-module/dist/auto/**/*.{vue,js,mjs,ts,jsx,tsx}',
     './node_modules/@onereach/ui-components/dist/esm/**/*.{vue,js,mjs,ts,jsx,tsx}',
   ],
-  presets: [require('./tailwind.config.preset.v4.js')],
+  presets: [
+    require('@onereach/styles/tailwind.config.preset.js'),
+  ],
 };