@onereach/styles 2.19.1-beta.1289.0 → 2.19.1-beta.1291.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.19.1-beta.1289.0",
+  "version": "2.19.1-beta.1291.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",

package/tailwind.config.preset.js

@@ -24,17 +24,28 @@ module.exports = {
   darkMode: ['class', '[data-theme="dark"]'],
 
   theme: {
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
+
     spacing: parseSpacingTokens(spacingTokens),
 
     backgroundColor: {
       // Avoid using `text` colors as a background (only for corner cases)
       ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
       'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
     },
 
     textColor: {
       ...parseColorTokens(colorTokens, ['generic', 'text']),
       'transparent': 'transparent',
+      'current': 'currentColor',
       'inherit': 'inherit',
     },
 
@@ -42,20 +53,28 @@ module.exports = {
       ...parseColorTokens(colorTokens, ['generic']),
       'transparent': 'transparent',
       'current': 'currentColor',
+      'inherit': 'inherit',
     },
 
     outlineColor: {
       ...parseColorTokens(colorTokens, ['generic']),
       'transparent': 'transparent',
       'current': 'currentColor',
+      'inherit': 'inherit',
     },
 
     fill: {
       ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
+      'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
     },
 
     stroke: {
       ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
+      'transparent': 'transparent',
+      'current': 'currentColor',
+      'inherit': 'inherit',
     },
 
     content: {
@@ -114,8 +133,8 @@ module.exports = {
     },
 
     boxShadow: {
+      'generic': '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
       ...parseBoxShadowTokens(boxShadowTokens),
-      DEFAULT: '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
     },
 
     fontFamily: {
@@ -127,89 +146,24 @@ module.exports = {
     fontSize: {
       ...parseFontSizeTokens(typographyTokens),
       'icon': ['1.15em', { lineHeight: 1 }],
-      'inherit': ['inherit', { lineHeight: 'inherit' }],
+      'inherit': 'inherit',
     },
 
     fontWeight: {
       ...parseFontWeightTokens(typographyTokens),
-      'icon': undefined,
       'inherit': 'inherit',
     },
 
-    transitionDuration: {
-      'short': '100ms',
-      'medium': '250ms',
-      'long': '400ms',
-    },
+    letterSpacing: false,
 
-    transitionTimingFunction: {
-      'standard': 'cubic-bezier(0.2, 0, 0, 1)',
+    lineHeight: {
+      'inherit': 'inherit',
     },
   },
 
   plugins: [
-    // Core
-    plugin(({ addUtilities, addVariant }) => {
-      addVariant('enabled', '&:not([disabled])');
-      addVariant('disabled', '&[disabled]');
-
-      addVariant('read-write', '&:not([readonly])');
-      addVariant('read-only', '&[readonly]');
-
-      addVariant('valid', '&:not([invalid])');
-      addVariant('invalid', '&[invalid]');
-
-      addVariant('required', '&[required]');
-      addVariant('optional', '&:not([required])');
-
-      addVariant('checked', ['&[checked]', '&:checked']);
-      addVariant('selected', ['&[selected]', '&:checked']);
-      addVariant('activated', ['&[activated]']);
-
-      addVariant('hover', '&:hover:not(.interactivity-none)');
-      addVariant('focus', '&:focus-visible:not(.interactivity-none)');
-      addVariant('focus-within', '&:focus-within:not(.interactivity-none)');
-      addVariant('active', '&:active:not(.interactivity-none)');
-
-      addVariant('link', '& :any-link');
-
-      // TODO: Remove when migration complete
-      addUtilities({
-        '.visually-hidden': {
-          width: 0,
-          height: 0,
-          visibility: 'hidden',
-        },
-      });
-    }),
-
-    // Interactivity
-    plugin(({ addUtilities }) => {
-      addUtilities({
-        '.interactivity-auto': {
-          pointerEvents: 'auto',
-          cursor: 'pointer',
-
-          '&[disabled]': {
-            pointerEvents: 'none',
-            cursor: 'default',
-          },
-        },
-
-        '.interactivity-none': {
-          pointerEvents: 'none',
-          cursor: 'default',
-        },
-      });
-    }),
-
-    // Typography
-    plugin(({ addBase, matchUtilities, theme }) => {
+    plugin(({ addBase, addUtilities, addVariant, theme }) => {
       addBase({
-        '*': {
-          userSelect: 'none',
-        },
-
         ':root': {
           fontFamily: theme('fontFamily.body-1-regular'),
           fontSize: theme('fontSize.body-1-regular'),
@@ -217,506 +171,62 @@ module.exports = {
         },
       });
 
-      matchUtilities({
-        'typography': (value) => {
-          const fontSizeConfig = theme('fontSize');
-
-          const [fontSizeDesktop, optionsDesktop] = fontSizeConfig[value] ?? [];
-          const [fontSizeMobile, optionsMobile] = fontSizeConfig[`mobile-${value}`] ?? [];
-
-          return {
-            fontFamily: theme(`fontFamily.mobile-${value}`) ?? theme(`fontFamily.${value}`),
-            fontWeight: theme(`fontWeight.mobile-${value}`) ?? theme(`fontWeight.${value}`),
-            fontSize: fontSizeMobile ?? fontSizeDesktop,
-            lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
-
-            [`@media (min-width: ${theme('screens.md')})`]: {
-              fontFamily: theme(`fontFamily.${value}`),
-              fontWeight: theme(`fontWeight.${value}`),
-              fontSize: fontSizeDesktop,
-              lineHeight: optionsDesktop?.lineHeight,
-            },
-          };
-        },
-      }, {
-        values: {
-          'headline-1': 'headline-1',
-          'headline-2': 'headline-2',
-          'headline-3': 'headline-3',
-          'headline-4': 'headline-4',
-          'body-1-regular': 'body-1-regular',
-          'body-1-semibold': 'body-1-semibold',
-          'body-1-bold': 'body-1-bold',
-          'body-2-regular': 'body-2-regular',
-          'body-2-semibold': 'body-2-semibold',
-          'body-2-bold': 'body-2-bold',
-          'caption-regular': 'caption-regular',
-          'caption-semibold': 'caption-semibold',
-          'caption-bold': 'caption-bold',
-          'button': 'button',
-          'icon': 'icon',
-
-          'inherit': 'inherit',
-        },
-      });
-    }),
-
-    // Iconography
-    plugin(({ matchUtilities }) => {
-      matchUtilities({
-        'iconography': (value) => ({
-          fontVariationSettings: value,
-        }),
-      }, {
-        values: {
-          'outlined': '"opsz" 48, "wght" 400, "FILL" 0, "GRAD" 0',
-          'outlined-bold': '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
-
-          'filled': '"opsz" 48, "wght" 400, "FILL" 1, "GRAD" 0',
-          'filled-bold': '"opsz" 24, "wght" 700, "FILL" 1, "GRAD" 0',
-
-          'inherit': 'inherit',
-        },
-      });
-    }),
-
-    // Theme
-    plugin(({ addUtilities, matchUtilities, theme }) => {
-      // Presets
-      matchUtilities({
-        'theme-preset-1': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            backgroundColor: theme(`backgroundColor.${color}` + suffix),
-            color: theme(`textColor.on-${color}` + suffix),
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:hover, &:focus-visible': {
-                backgroundColor: theme(`backgroundColor.${color}-hover` + suffix),
-              },
-
-              '&:active': {
-                backgroundColor: theme(`backgroundColor.${color}` + suffix),
-              },
-            },
-
-            transitionProperty: 'all',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-
-        'theme-preset-2': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            backgroundColor: theme(`backgroundColor.${color}-opacity-0-08` + suffix),
-            color: theme(`textColor.${color}` + suffix),
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:hover, &:focus-visible': {
-                backgroundColor: theme(`backgroundColor.${color}-opacity-0-12` + suffix),
-              },
-
-              '&:active': {
-                backgroundColor: theme(`backgroundColor.${color}-opacity-0-16` + suffix),
-              },
-            },
-
-            transitionProperty: 'all',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-
-        'theme-preset-3': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            backgroundColor: 'transparent',
-            color: theme(`textColor.${color}` + suffix),
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:hover, &:focus-visible': {
-                backgroundColor: theme(`backgroundColor.${color}-opacity-0-08` + suffix),
-              },
-
-              '&:active': {
-                backgroundColor: theme(`backgroundColor.${color}-opacity-0-16` + suffix),
-              },
-            },
-
-            transitionProperty: 'all',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-
-        'theme-preset-4': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            backgroundColor: 'transparent',
-            color: theme(`textColor.${color}` + suffix),
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:hover, &:focus-visible': {
-                color: theme(`textColor.${color}-hover` + suffix),
-              },
-
-              '&:active': {
-                color: theme(`textColor.${color}` + suffix),
-              },
-            },
-
-            transitionProperty: 'all',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-      }, {
-        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',
-        },
-      });
-
-      // Backgrounds
-      matchUtilities({
-        'theme-background': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            backgroundColor: theme(`backgroundColor.${color}` + suffix, color),
-
-            '&[disabled]': {
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
-            },
-          };
-        },
-      }, {
-        values: {
-          'default': 'background',
-          'default-dark': 'background..-dark',
-
-          'disabled': 'disabled',
-          'disabled-dark': 'disabled..-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-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',
-
-          'primary-tinting': 'primary-opacity-0-08',
-          'primary-tinting-dark': 'primary-opacity-0-08..-dark',
-
-          // 'secondary-tinting': 'secondary-opacity-0-08',
-          // 'secondary-tinting-dark': 'secondary-opacity-0-08..-dark',
-
-          // 'tertiary-tinting': 'tertiary-opacity-0-08',
-          // 'tertiary-tinting-dark': 'tertiary-opacity-0-08..-dark',
-
-          'success-tinting': 'success-opacity-0-08',
-          'success-tinting-dark': 'success-opacity-0-08..-dark',
-
-          'warning-tinting': 'warning-opacity-0-08',
-          'warning-tinting-dark': 'warning-opacity-0-08..-dark',
-
-          'error-tinting': 'error-opacity-0-08',
-          'error-tinting-dark': 'error-opacity-0-08..-dark',
-
-          'transparent': 'transparent',
-        },
-      });
-
-      // Foregrounds
-      matchUtilities({
-        'theme-foreground': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            color: theme(`textColor.${color}` + suffix, color),
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-            },
-          };
-        },
-      }, {
-        values: {
-          'default': 'on-background',
-          'default-dark': 'on-background..-dark',
-
-          'disabled': 'on-disabled',
-          'disabled-dark': 'on-disabled..-dark',
-
-          'outline': 'outline',
-          'outline-dark': 'outline..-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',
-
-          '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',
-
-          'transparent': 'transparent',
-          'inherit': 'inherit',
+      addUtilities({
+        '.font-icon-outlined': {
+          fontVariationSettings: '"opsz" 48, "wght" 400, "FILL" 0, "GRAD" 0',
         },
-      });
-
-      // Borders
-      matchUtilities({
-        'theme-border-1': (value) => {
-          const [color, suffix = ''] = value.split('..');
 
-          return {
-            borderColor: theme(`borderColor.${color}` + suffix, color),
-            borderStyle: 'solid',
-            borderWidth: 1,
-
-            '&[disabled]': {
-              borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
-            },
-          };
+        '.font-icon-outlined-bold': {
+          fontVariationSettings: '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
         },
-      }, {
-        values: {
-          'outline': 'outline',
-          'outline-dark': 'outline..-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',
-
-          'transparent': 'transparent',
-          'current': 'current',
+        '.font-icon-filled': {
+          fontVariationSettings: '"opsz" 48, "wght" 400, "FILL" 1, "GRAD" 0',
         },
-      });
 
-      matchUtilities({
-        'theme-border-2': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            borderColor: theme(`borderColor.${color}` + suffix, color),
-            borderStyle: 'solid',
-            borderWidth: 2,
-
-            '&[disabled]': {
-              borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
-            },
-          };
-        },
-      }, {
-        values: {
-          'outline': 'outline',
-          'outline-dark': 'outline..-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',
-
-          'transparent': 'transparent',
-          'current': 'current',
+        '.font-icon-filled-bold': {
+          fontVariationSettings: '"opsz" 24, "wght" 700, "FILL" 1, "GRAD" 0',
         },
       });
 
+      // TODO: Remove when migration complete
       addUtilities({
-        '.theme-border-underline': {
-          borderStyle: 'none',
-          borderBottomStyle: 'solid',
+        '.visually-hidden': {
+          width: 0,
+          height: 0,
+          visibility: 'hidden',
         },
       });
 
-      // Outlines
-      matchUtilities({
-        'theme-outline': (value) => {
-          const [color, suffix = ''] = value.split('..');
-
-          return {
-            outlineColor: theme(`outlineColor.${color}-opacity-0-16` + suffix, color),
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-            outlineOffset: 0,
-          };
-        },
-      }, {
-        values: {
-          'primary': 'primary',
-          'primary-dark': 'primary..-dark',
+      addVariant('hover', '&:hover:not(.pointer-events-none)');
+      addVariant('focus-visible', '&:focus-visible:not(.pointer-events-none)');
+      addVariant('focus-within', '&:focus-within:not(.pointer-events-none)');
 
-          'secondary': 'secondary',
-          'secondary-dark': 'secondary..-dark',
+      addVariant('active', [
+        '&:active:not(.pointer-events-none)',
+        '&[active]:not(.pointer-events-none)',
+      ]);
 
-          'tertiary': 'tertiary',
-          'tertiary-dark': 'tertiary..-dark',
-
-          'success': 'success',
-          'success-dark': 'success..-dark',
+      addVariant('enabled', '&:not([disabled])');
+      addVariant('disabled', '&[disabled]');
 
-          'warning': 'warning',
-          'warning-dark': 'warning..-dark',
+      addVariant('valid', '&:not([invalid])');
+      addVariant('invalid', '&[invalid]');
 
-          'error': 'error',
-          'error-dark': 'error..-dark',
+      addVariant('readwrite', '&:not([readonly])');
+      addVariant('readonly', '&[readonly]');
 
-          'transparent': 'transparent',
-          'current': 'current',
-        },
-      });
+      addVariant('checked', [
+        '&[type="checkbox"]:checked:not(:indeterminate)',
+        '&[type="radio"]:checked',
+      ]);
     }),
   ],
+
+  safelist: [
+    {
+      pattern: /^text-(.+)$/,
+      variants: ['hover'],
+    },
+  ],
 };