@onereach/styles 3.2.0 → 3.2.1-beta.3200.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "3.2.0",
+  "version": "3.2.1-beta.3200.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",
@@ -8,24 +8,23 @@
   "style": "./main.css",
   "files": [
     "dist",
-    "src",
     "icons",
-    "main.css",
-    "rollup-plugin-tailwindcss-cli.css",
-    "tw-color-variables.css",
+    "src",
+    "tailwind/**",
+    "base.layer.css",
+    "font.css",
     "legacy-ui-warning.scss",
+    "main-v3.css",
+    "main.css",
     "preflight-revert.css",
+    "rollup-plugin-tailwindcss-cli.css",
+    "scrollbar.css",
     "tailwind.config.js",
     "tailwind.config.json",
     "tailwind.config.preset.js",
-    "tailwind-screens.js",
-    "tailwind-utils.js",
-    "tokens.css",
-    "main-v3.css",
-    "font.css",
-    "scrollbar.css",
     "temporary-dark-v2.css",
-    "base.layer.css"
+    "tokens.css",
+    "tw-color-variables.css"
   ],
   "scripts": {
     "dev": "pnpm build:scss -- --watch",
@@ -58,6 +57,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "a168a9cba9af592f41064e7e88e92851d4c92d7f"
+  }
 }

package/tailwind/plugins/core.js

@@ -0,0 +1,88 @@
+const plugin = require('tailwindcss/plugin');
+
+const screens = {
+  'sm': '640px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1280px',
+  '2xl': '1536px',
+};
+
+const variants = {
+  'hover': [
+    '&:not(.interactivity-none):hover',
+    '&:not(.interactivity-none)[force-state="hover"]',
+  ],
+
+  'focus': [
+    '&:not(.interactivity-none):focus',
+    '&:not(.interactivity-none)[force-state="focus"]',
+  ],
+
+  'focus-within': [
+    '&:not(.interactivity-none):focus-within',
+    '&:not(.interactivity-none)[force-state="focus-within"]',
+  ],
+
+  'focus-visible': [
+    '&:not(.interactivity-none):focus-visible',
+    '&:not(.interactivity-none)[force-state="focus-visible"]',
+  ],
+
+  'active': [
+    '&:not(.interactivity-none):active',
+    '&:not(.interactivity-none)[force-state="active"]',
+  ],
+
+  'checked': ['&[checked]', '&:checked'],
+  'selected': ['&[selected]', '&:checked'],
+  'activated': ['&[activated]'],
+
+  'valid': ['&:not([invalid])'],
+  'invalid': ['&[invalid]'],
+
+  'required': ['&[required]'],
+  'optional': ['&:not([required])'],
+
+  'read-write': ['&:not([readonly])'],
+  'read-only': ['&[readonly]'],
+
+  'enabled': ['&:not([disabled])'],
+  'disabled': ['&[disabled]'],
+
+  'children': ['& > *'],
+
+  'first-child': ['& > *:first-child'],
+  'middle-child': ['& > *:not(:first-child, :last-child)'],
+  'last-child': ['& > *:last-child'],
+
+  'links': ['& :any-link'],
+};
+
+module.exports = {
+  screens,
+  variants,
+
+  plugin: plugin(({ addVariant, addUtilities }) => {
+    Object.entries(screens).forEach(([breakpoint, width]) => {
+      addVariant(breakpoint, [
+        `@media (min-width: ${width})`,
+        `[force-screen~="${breakpoint}"] &`,
+        `&[force-screen~="${breakpoint}"]`,
+      ]);
+    });
+
+    Object.entries(variants).forEach(([modifier, selectors]) => {
+      addVariant(modifier, selectors);
+    });
+
+    // TODO: Remove when migration complete
+    addUtilities({
+      '.visually-hidden': {
+        width: 0,
+        height: 0,
+        visibility: 'hidden',
+      },
+    });
+  }),
+};

package/tailwind/plugins/iconography.js

@@ -0,0 +1,22 @@
+const plugin = require('tailwindcss/plugin');
+
+const values = {
+  'outlined': '"opsz" 24, "wght" 400, "FILL" 0, "GRAD" 0',
+  'outlined-bold': '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
+
+  'filled': '"opsz" 24, "wght" 400, "FILL" 1, "GRAD" 0',
+  'filled-bold': '"opsz" 24, "wght" 700, "FILL" 1, "GRAD" 0',
+
+  'inherit': 'inherit',
+};
+
+module.exports = {
+  plugin: plugin(({ matchUtilities }) => {
+    matchUtilities({
+      'iconography': (value) => ({
+        fontFamily: '"Material Symbols Outlined"',
+        fontVariationSettings: value,
+      }),
+    }, { values });
+  }),
+};

package/tailwind/plugins/interactivity.js

@@ -0,0 +1,27 @@
+const plugin = require('tailwindcss/plugin');
+const { variants } = require('./core');
+
+module.exports = {
+  plugin: plugin(({ addUtilities }) => {
+    addUtilities({
+      '.interactivity-auto': {
+        pointerEvents: 'auto',
+        cursor: 'pointer',
+
+        [variants['disabled']]: {
+          pointerEvents: 'none',
+          cursor: 'default',
+        },
+
+        userSelect: 'none',
+      },
+
+      '.interactivity-none': {
+        pointerEvents: 'none',
+        cursor: 'default',
+
+        userSelect: 'none',
+      },
+    });
+  }),
+};

package/tailwind/plugins/layout.js

@@ -0,0 +1,39 @@
+const plugin = require('tailwindcss/plugin');
+
+const values = {
+  'row': 'row',
+  'row-reverse': 'row-reverse',
+
+  'column': 'column',
+  'column-reverse': 'column-reverse',
+
+  'inline-row': 'inline-..row',
+  'inline-row-reverse': 'inline-..row-reverse',
+
+  'inline-column': 'inline-..column',
+  'inline-column-reverse': 'inline-..column-reverse',
+};
+
+module.exports = {
+  values,
+
+  plugin: plugin(({ matchUtilities }) => {
+    matchUtilities({
+      'layout': (value) => {
+        const { prefix = '', direction } = /^(?:(?<prefix>inline-)\.\.)?(?<direction>.+)$/.exec(value).groups;
+
+        return {
+          display: prefix + 'flex',
+
+          flexFlow: `${direction} nowrap`,
+          flex: prefix === 'inline-' ? '0 0 auto' : undefined,
+
+          alignContent: direction === 'row' ? 'center' : undefined,
+          alignItems: direction === 'row' ? 'center' : undefined,
+
+          maxWidth: prefix === 'inline-' ? '100%' : undefined,
+        };
+      },
+    }, { values });
+  }),
+};

package/tailwind/plugins/theme-background.js

@@ -0,0 +1,141 @@
+const plugin = require('tailwindcss/plugin');
+const { variants } = require('./core');
+
+const values = {
+  'base': 'white',
+  'base-dark': 'black',
+
+  'default': 'background',
+  'default-dark': 'background..-dark',
+
+  'disabled': 'disabled',
+  'disabled-dark': 'disabled..-dark',
+
+  'overlay': 'overlay',
+  'overlay-dark': 'overlay..-dark',
+
+  'primary': 'primary',
+  'primary-dark': 'primary..-dark',
+
+  'secondary': 'secondary',
+  'secondary-dark': 'secondary..-dark',
+
+  'tertiary': 'tertiary',
+  'tertiary-dark': 'tertiary..-dark',
+
+  'success': 'success',
+  'success-dark': 'success..-dark',
+
+  'warning': 'warning',
+  'warning-dark': 'warning..-dark',
+
+  'error': 'error',
+  'error-dark': 'error..-dark',
+
+  'primary-hover': 'primary-hover',
+  'primary-hover-dark': 'primary-hover..-dark',
+
+  // 'secondary-hover': 'secondary-hover',
+  // 'secondary-hover-dark': 'secondary-hover..-dark',
+
+  // 'tertiary-hover': 'tertiary-hover',
+  // 'tertiary-hover-dark': 'tertiary-hover..-dark',
+
+  'success-hover': 'success-hover',
+  'success-hover-dark': 'success-hover..-dark',
+
+  'warning-hover': 'warning-hover',
+  'warning-hover-dark': 'warning-hover..-dark',
+
+  'error-hover': 'error-hover',
+  'error-hover-dark': 'error-hover..-dark',
+
+  'primary-translucent': 'primary-opacity-0-08',
+  'primary-translucent-dark': 'primary-opacity-0-08..-dark',
+
+  // 'secondary-translucent': 'secondary-opacity-0-08',
+  // 'secondary-translucent-dark': 'secondary-opacity-0-08..-dark',
+
+  // 'tertiary-translucent': 'tertiary-opacity-0-08',
+  // 'tertiary-translucent-dark': 'tertiary-opacity-0-08..-dark',
+
+  'success-translucent': 'success-opacity-0-08',
+  'success-translucent-dark': 'success-opacity-0-08..-dark',
+
+  'warning-translucent': 'warning-opacity-0-08',
+  'warning-translucent-dark': 'warning-opacity-0-08..-dark',
+
+  'error-translucent': 'error-opacity-0-08',
+  'error-translucent-dark': 'error-opacity-0-08..-dark',
+
+  'primary-container': 'primary-container',
+  'primary-container-dark': 'primary-container..-dark',
+
+  'secondary-container': 'secondary-container',
+  'secondary-container-dark': 'secondary-container..-dark',
+
+  'tertiary-container': 'tertiary-container',
+  'tertiary-container-dark': 'tertiary-container..-dark',
+
+  'success-container': 'success-container',
+  'success-container-dark': 'success-container..-dark',
+
+  'warning-container': 'warning-container',
+  'warning-container-dark': 'warning-container..-dark',
+
+  'error-container': 'error-container',
+  'error-container-dark': 'error-container..-dark',
+
+  'surface': 'surface',
+  'surface-dark': 'surface..-dark',
+
+  'surface-1': 'surface-1',
+  'surface-1-dark': 'surface-1..-dark',
+
+  'surface-2': 'surface-2',
+  'surface-2-dark': 'surface-2..-dark',
+
+  'surface-3': 'surface-3',
+  'surface-3-dark': 'surface-3..-dark',
+
+  'surface-4': 'surface-4',
+  'surface-4-dark': 'surface-4..-dark',
+
+  'surface-5': 'surface-5',
+  'surface-5-dark': 'surface-5..-dark',
+
+  'surface-variant': 'surface-variant',
+  'surface-variant-dark': 'surface-variant..-dark',
+
+  'surface-inverse': 'inverse-surface',
+  'surface-inverse-dark': 'inverse-surface..-dark',
+
+  'transparent': 'transparent',
+  'transparent-dark': 'transparent..-dark',
+
+  'current': 'current',
+  'current-dark': 'current..-dark',
+
+  'inherit': 'inherit',
+  'inherit-dark': 'inherit..-dark',
+};
+
+module.exports = {
+  values,
+
+  plugin: plugin(({ matchUtilities, theme }) => {
+    matchUtilities({
+      'theme-background': (value) => {
+        const [token, suffix = ''] = value.split('..');
+
+        return {
+          backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
+
+          [variants['disabled']]: {
+            backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+          },
+        };
+      },
+    }, { values });
+  }),
+};

package/tailwind/plugins/theme-border.js

@@ -0,0 +1,105 @@
+const plugin = require('tailwindcss/plugin');
+const { variants } = require('./core');
+
+const values = {
+  'outline': 'outline',
+  'outline-dark': 'outline..-dark',
+
+  'outline-variant': 'outline-variant',
+  'outline-variant-dark': 'outline-variant..-dark',
+
+  'primary': 'primary',
+  'primary-dark': 'primary..-dark',
+
+  'secondary': 'secondary',
+  'secondary-dark': 'secondary..-dark',
+
+  'tertiary': 'tertiary',
+  'tertiary-dark': 'tertiary..-dark',
+
+  'success': 'success',
+  'success-dark': 'success..-dark',
+
+  'warning': 'warning',
+  'warning-dark': 'warning..-dark',
+
+  'error': 'error',
+  'error-dark': 'error..-dark',
+
+  'primary-translucent': 'primary-opacity-0-16',
+  'primary-translucent-dark': 'primary-opacity-0-16..-dark',
+
+  // 'secondary-translucent': 'secondary-opacity-0-16',
+  // 'secondary-translucent-dark': 'secondary-opacity-0-16..-dark',
+
+  // 'tertiary-translucent': 'tertiary-opacity-0-16',
+  // 'tertiary-translucent-dark': 'tertiary-opacity-0-16..-dark',
+
+  'success-translucent': 'success-opacity-0-16',
+  'success-translucent-dark': 'success-opacity-0-16..-dark',
+
+  'warning-translucent': 'warning-opacity-0-16',
+  'warning-translucent-dark': 'warning-opacity-0-16..-dark',
+
+  'error-translucent': 'error-opacity-0-16',
+  'error-translucent-dark': 'error-opacity-0-16..-dark',
+
+  'transparent': 'transparent',
+  'transparent-dark': 'transparent..-dark',
+
+  'current': 'current',
+  'current-dark': 'current..-dark',
+
+  'inherit': 'inherit',
+  'inherit-dark': 'inherit..-dark',
+};
+
+module.exports = {
+  values,
+
+  plugin: plugin(({ matchUtilities, addUtilities, theme }) => {
+    matchUtilities({
+      'theme-border-1': (value) => {
+        const [token, suffix = ''] = value.split('..');
+
+        return {
+          borderWidth: theme('borderWidth.1'),
+          borderStyle: 'solid',
+          borderColor: theme(`borderColor.${token}` + suffix, token),
+
+          [variants['disabled']]: {
+            borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
+          },
+        };
+      },
+    }, { values });
+
+    matchUtilities({
+      'theme-border-2': (value) => {
+        const [token, suffix = ''] = value.split('..');
+
+        return {
+          borderWidth: theme('borderWidth.2'),
+          borderStyle: 'solid',
+          borderColor: theme(`borderColor.${token}` + suffix, token),
+
+          [variants['disabled']]: {
+            borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
+          },
+        };
+      },
+    }, { values });
+
+    addUtilities({
+      '.theme-border-overline': {
+        borderStyle: 'none !important',
+        borderTopStyle: 'solid !important',
+      },
+
+      '.theme-border-underline': {
+        borderStyle: 'none !important',
+        borderBottomStyle: 'solid !important',
+      },
+    });
+  }),
+};

package/tailwind/plugins/theme-foreground.js

@@ -0,0 +1,147 @@
+const plugin = require('tailwindcss/plugin');
+const { variants } = require('./core');
+
+const values = {
+  'base': 'white',
+  'base-dark': 'black',
+
+  'default': 'on-background',
+  'default-dark': 'on-background..-dark',
+
+  'disabled': 'on-disabled',
+  'disabled-dark': 'on-disabled..-dark',
+
+  'outline': 'outline',
+  'outline-dark': 'outline..-dark',
+
+  'outline-variant': 'outline-variant',
+  'outline-variant-dark': 'outline-variant..-dark',
+
+  'primary': 'primary',
+  'primary-dark': 'primary..-dark',
+
+  'secondary': 'secondary',
+  'secondary-dark': 'secondary..-dark',
+
+  'tertiary': 'tertiary',
+  'tertiary-dark': 'tertiary..-dark',
+
+  'success': 'success',
+  'success-dark': 'success..-dark',
+
+  'warning': 'warning',
+  'warning-dark': 'warning..-dark',
+
+  'error': 'error',
+  'error-dark': 'error..-dark',
+
+  'primary-hover': 'primary-hover',
+  'primary-hover-dark': 'primary-hover..-dark',
+
+  // 'secondary-hover': 'secondary-hover',
+  // 'secondary-hover-dark': 'secondary-hover..-dark',
+
+  // 'tertiary-hover': 'tertiary-hover',
+  // 'tertiary-hover-dark': 'tertiary-hover..-dark',
+
+  'success-hover': 'success-hover',
+  'success-hover-dark': 'success-hover..-dark',
+
+  'warning-hover': 'warning-hover',
+  'warning-hover-dark': 'warning-hover..-dark',
+
+  'error-hover': 'error-hover',
+  'error-hover-dark': 'error-hover..-dark',
+
+  'primary-inverse': 'primary-inverse',
+  'primary-inverse-dark': 'primary-inverse..-dark',
+
+  // 'secondary-inverse': 'secondary-inverse',
+  // 'secondary-inverse-dark': 'secondary-inverse..-dark',
+
+  // 'tertiary-inverse': 'tertiary-inverse',
+  // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
+
+  // 'success-inverse': 'success-inverse',
+  // 'success-inverse-dark': 'success-inverse..-dark',
+
+  // 'warning-inverse': 'warning-inverse',
+  // 'warning-inverse-dark': 'warning-inverse..-dark',
+
+  // 'error-inverse': 'error-inverse',
+  // 'error-inverse-dark': 'error-inverse..-dark',
+
+  'on-primary': 'on-primary',
+  'on-primary-dark': 'on-primary..-dark',
+
+  'on-secondary': 'on-secondary',
+  'on-secondary-dark': 'on-secondary..-dark',
+
+  'on-tertiary': 'on-tertiary',
+  'on-tertiary-dark': 'on-tertiary..-dark',
+
+  'on-success': 'on-success',
+  'on-success-dark': 'on-success..-dark',
+
+  'on-warning': 'on-warning',
+  'on-warning-dark': 'on-warning..-dark',
+
+  'on-error': 'on-error',
+  'on-error-dark': 'on-error..-dark',
+
+  'on-primary-container': 'on-primary-container',
+  'on-primary-container-dark': 'on-primary-container..-dark',
+
+  'on-secondary-container': 'on-secondary-container',
+  'on-secondary-container-dark': 'on-secondary-container..-dark',
+
+  'on-tertiary-container': 'on-tertiary-container',
+  'on-tertiary-container-dark': 'on-tertiary-container..-dark',
+
+  'on-success-container': 'on-success-container',
+  'on-success-container-dark': 'on-success-container..-dark',
+
+  'on-warning-container': 'on-warning-container',
+  'on-warning-container-dark': 'on-warning-container..-dark',
+
+  'on-error-container': 'on-error-container',
+  'on-error-container-dark': 'on-error-container..-dark',
+
+  'on-surface': 'on-surface',
+  'on-surface-dark': 'on-surface..-dark',
+
+  'on-surface-variant': 'on-surface-variant',
+  'on-surface-variant-dark': 'on-surface-variant..-dark',
+
+  'on-surface-inverse': 'inverse-on-surface',
+  'on-surface-inverse-dark': 'inverse-on-surface..-dark',
+
+  'transparent': 'transparent',
+  'transparent-dark': 'transparent..-dark',
+
+  'current': 'current',
+  'current-dark': 'current..-dark',
+
+  'inherit': 'inherit',
+  'inherit-dark': 'inherit..-dark',
+};
+
+module.exports = {
+  values,
+
+  plugin: plugin(({ matchUtilities, theme }) => {
+    matchUtilities({
+      'theme-foreground': (value) => {
+        const [token, suffix = ''] = value.split('..');
+
+        return {
+          color: theme(`textColor.${token}` + suffix, token),
+
+          [variants['disabled']]: {
+            color: `${theme('textColor.on-disabled' + suffix)} !important`,
+          },
+        };
+      },
+    }, { values });
+  }),
+};

package/tailwind/plugins/theme-outline.js

@@ -0,0 +1,70 @@
+const plugin = require('tailwindcss/plugin');
+
+const values = {
+  'primary': 'primary',
+  'primary-dark': 'primary..-dark',
+
+  'secondary': 'secondary',
+  'secondary-dark': 'secondary..-dark',
+
+  'tertiary': 'tertiary',
+  'tertiary-dark': 'tertiary..-dark',
+
+  'success': 'success',
+  'success-dark': 'success..-dark',
+
+  'warning': 'warning',
+  'warning-dark': 'warning..-dark',
+
+  'error': 'error',
+  'error-dark': 'error..-dark',
+
+  'transparent': 'transparent',
+  'transparent-dark': 'transparent..-dark',
+
+  'current': 'current',
+  'current-dark': 'current..-dark',
+
+  'inherit': 'inherit',
+  'inherit-dark': 'inherit..-dark',
+};
+
+module.exports = {
+  values,
+
+  plugin: plugin(({ matchUtilities, theme }) => {
+    matchUtilities({
+      'theme-outline-1': (value) => {
+        const [token, suffix = ''] = value.split('..');
+
+        return {
+          // In Safari outline doesn't follow current border-radius
+          // It seems like this is already fixed in Safari Technology Preview (Release 157)
+          // Stay tuned for Safari updates
+          boxShadow: `0 0 0 1px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
+          // outlineOffset: '0',
+          // outlineWidth: theme('outlineWidth.2'),
+          // outlineStyle: 'solid',
+          // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
+        };
+      },
+    }, { values });
+
+    matchUtilities({
+      'theme-outline-2': (value) => {
+        const [token, suffix = ''] = value.split('..');
+
+        return {
+          // In Safari outline doesn't follow current border-radius
+          // It seems like this is already fixed in Safari Technology Preview (Release 157)
+          // Stay tuned for Safari updates
+          boxShadow: `0 0 0 2px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
+          // outlineOffset: '0',
+          // outlineWidth: theme('outlineWidth.2'),
+          // outlineStyle: 'solid',
+          // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
+        };
+      },
+    }, { values });
+  }),
+};