@onereach/styles 3.1.0 → 3.1.1-beta.3176.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "3.1.0",
+  "version": "3.1.1-beta.3176.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",
@@ -10,6 +10,7 @@
     "dist",
     "src",
     "icons",
+    "tailwind/**",
     "main.css",
     "rollup-plugin-tailwindcss-cli.css",
     "tw-color-variables.css",
@@ -18,7 +19,6 @@
     "tailwind.config.js",
     "tailwind.config.json",
     "tailwind.config.preset.js",
-    "tailwind-utils.js",
     "tokens.css",
     "main-v3.css",
     "font.css",
@@ -58,6 +58,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "f33688dd9302588085b19a107cbb992847e9d0f1"
+  }
 }

package/tailwind/plugins/core.js

@@ -0,0 +1,69 @@
+const plugin = require('tailwindcss/plugin');
+
+const enabledSelectors = ['&:not([disabled])'];
+const disabledSelectors = ['&[disabled]'];
+
+const readWriteSelectors = ['&:not([readonly])'];
+const readOnlySelectors = ['&[readonly]'];
+
+const validSelectors = ['&:not([invalid])'];
+const invalidSelectors = ['&[invalid]'];
+
+const requiredSelectors = ['&[required]'];
+const optionalSelectors = ['&:not([required])'];
+
+module.exports = {
+  plugin: plugin(({ addVariant, addUtilities }) => {
+    addVariant('enabled', enabledSelectors);
+    addVariant('disabled', disabledSelectors);
+
+    addVariant('read-write', readWriteSelectors);
+    addVariant('read-only', readOnlySelectors);
+
+    addVariant('valid', validSelectors);
+    addVariant('invalid', invalidSelectors);
+
+    addVariant('required', requiredSelectors);
+    addVariant('optional', optionalSelectors);
+
+    addVariant('checked', ['&[checked]', '&:checked']);
+    addVariant('selected', ['&[selected]', '&:checked']);
+    addVariant('activated', ['&[activated]']);
+
+    addVariant('hover', [
+      '&:not(.interactivity-none):hover',
+      '&:not(.interactivity-none)[force-state="hover"]',
+    ]);
+
+    addVariant('focus', [
+      '&:not(.interactivity-none):focus-visible',
+      '&:not(.interactivity-none)[force-state="focus"]',
+    ]);
+
+    addVariant('focus-within', [
+      '&:not(.interactivity-none):focus-within',
+      '&:not(.interactivity-none)[force-state="focus-within"]',
+    ]);
+
+    addVariant('active', [
+      '&:not(.interactivity-none):active',
+      '&:not(.interactivity-none)[force-state="active"]',
+    ]);
+
+    addVariant('children', ['& > *']);
+    addVariant('first-child', ['& > *:first-child']);
+    addVariant('intermediate-child', ['& > *:not(:first-child):not(:last-child)']);
+    addVariant('last-child', ['& > *:last-child']);
+
+    addVariant('links', ['& :any-link']);
+
+    // 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,26 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+  plugin: plugin(({ addUtilities }) => {
+    addUtilities({
+      '.interactivity-auto': {
+        pointerEvents: 'auto',
+        cursor: 'pointer',
+
+        '&[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,140 @@
+const plugin = require('tailwindcss/plugin');
+
+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),
+
+          '&[disabled]': {
+            backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+          },
+        };
+      },
+    }, { values });
+  }),
+};

package/tailwind/plugins/theme-border.js

@@ -0,0 +1,104 @@
+const plugin = require('tailwindcss/plugin');
+
+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),
+
+          '&[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),
+
+          '&[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,146 @@
+const plugin = require('tailwindcss/plugin');
+
+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),
+
+          '&[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 });
+  }),
+};