@onereach/styles 2.19.1-beta.1301.0 → 2.19.1-beta.1303.0

package/package.json

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

package/tailwind.config.preset.js

@@ -24,28 +24,17 @@ 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',
     },
 
@@ -53,28 +42,20 @@ 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: {
@@ -133,8 +114,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: {
@@ -146,24 +127,89 @@ module.exports = {
     fontSize: {
       ...parseFontSizeTokens(typographyTokens),
       'icon': ['1.15em', { lineHeight: 1 }],
-      'inherit': 'inherit',
+      'inherit': ['inherit', { lineHeight: 'inherit' }],
     },
 
     fontWeight: {
       ...parseFontWeightTokens(typographyTokens),
+      'icon': undefined,
       'inherit': 'inherit',
     },
 
-    letterSpacing: false,
+    transitionDuration: {
+      'short': '100ms',
+      'medium': '250ms',
+      'long': '400ms',
+    },
 
-    lineHeight: {
-      'inherit': 'inherit',
+    transitionTimingFunction: {
+      'standard': 'cubic-bezier(0.2, 0, 0, 1)',
     },
   },
 
   plugins: [
-    plugin(({ addBase, addUtilities, addVariant, theme }) => {
+    // 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 }) => {
       addBase({
+        '*': {
+          userSelect: 'none',
+        },
+
         ':root': {
           fontFamily: theme('fontFamily.body-1-regular'),
           fontSize: theme('fontSize.body-1-regular'),
@@ -171,62 +217,506 @@ module.exports = {
         },
       });
 
-      addUtilities({
-        '.font-icon-outlined': {
-          fontVariationSettings: '"opsz" 48, "wght" 400, "FILL" 0, "GRAD" 0',
+      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'),
+          };
         },
 
-        '.font-icon-outlined-bold': {
-          fontVariationSettings: '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
+        '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'),
+          };
         },
 
-        '.font-icon-filled': {
-          fontVariationSettings: '"opsz" 48, "wght" 400, "FILL" 1, "GRAD" 0',
+        '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',
 
-        '.font-icon-filled-bold': {
-          fontVariationSettings: '"opsz" 24, "wght" 700, "FILL" 1, "GRAD" 0',
+          // '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',
+        },
+      });
+
+      // 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`,
+            },
+          };
+        },
+      }, {
+        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',
+        },
+      });
+
+      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',
         },
       });
 
-      // TODO: Remove when migration complete
       addUtilities({
-        '.visually-hidden': {
-          width: 0,
-          height: 0,
-          visibility: 'hidden',
+        '.theme-border-underline': {
+          borderStyle: 'none',
+          borderBottomStyle: 'solid',
         },
       });
 
-      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)');
+      // 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('active', [
-        '&:active:not(.pointer-events-none)',
-        '&[active]:not(.pointer-events-none)',
-      ]);
+          'secondary': 'secondary',
+          'secondary-dark': 'secondary..-dark',
 
-      addVariant('enabled', '&:not([disabled])');
-      addVariant('disabled', '&[disabled]');
+          'tertiary': 'tertiary',
+          'tertiary-dark': 'tertiary..-dark',
 
-      addVariant('valid', '&:not([invalid])');
-      addVariant('invalid', '&[invalid]');
+          'success': 'success',
+          'success-dark': 'success..-dark',
 
-      addVariant('readwrite', '&:not([readonly])');
-      addVariant('readonly', '&[readonly]');
+          'warning': 'warning',
+          'warning-dark': 'warning..-dark',
 
-      addVariant('checked', [
-        '&[type="checkbox"]:checked:not(:indeterminate)',
-        '&[type="radio"]:checked',
-      ]);
-    }),
-  ],
+          'error': 'error',
+          'error-dark': 'error..-dark',
 
-  safelist: [
-    {
-      pattern: /^text-(.+)$/,
-      variants: ['hover'],
-    },
+          'transparent': 'transparent',
+          'current': 'current',
+        },
+      });
+    }),
   ],
 };