@onereach/styles 3.1.0 → 3.1.1-beta.3176.0

package/tailwind.config.preset.js

@@ -1,4 +1,14 @@
-const plugin = require('tailwindcss/plugin');
+const { plugin: core } = require('./tailwind/plugins/core');
+const { plugin: layout } = require('./tailwind/plugins/layout');
+const { plugin: interactivity } = require('./tailwind/plugins/interactivity');
+const { plugin: typography } = require('./tailwind/plugins/typography');
+const { plugin: iconography } = require('./tailwind/plugins/iconography');
+
+const { plugin: themePreset } = require('./tailwind/plugins/theme-preset');
+const { plugin: themeForeground } = require('./tailwind/plugins/theme-foreground');
+const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
+const { plugin: themeBorder } = require('./tailwind/plugins/theme-border');
+const { plugin: themeOutline } = require('./tailwind/plugins/theme-outline');
 
 const {
   parseSpacingTokens,
@@ -9,7 +19,7 @@ const {
   parseFontFamilyTokens,
   parseFontSizeTokens,
   parseFontWeightTokens,
-} = require('./tailwind-utils');
+} = require('./tailwind/utils');
 
 const {
   SpacePatterns: spacingTokens,
@@ -186,899 +196,16 @@ module.exports = {
   },
 
   plugins: [
-    // Core
-    plugin(({ addVariant, addUtilities }) => {
-      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', [
-        '&: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',
-        },
-      });
-    }),
-
-    // Layout
-    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: {
-          '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',
-        },
-      });
-    }),
-
-    // Interactivity
-    plugin(({ addUtilities }) => {
-      addUtilities({
-        '.interactivity-auto': {
-          pointerEvents: 'auto',
-          cursor: 'pointer',
-
-          '&[disabled]': {
-            pointerEvents: 'none',
-            cursor: 'default',
-          },
-
-          userSelect: 'none',
-        },
-
-        '.interactivity-none': {
-          pointerEvents: 'none',
-          cursor: 'default',
-
-          userSelect: 'none',
-        },
-      });
-    }),
-
-    // Typography
-    plugin(({ matchUtilities, theme }) => {
-      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,
-
-            // Desktop
-            [`@media (min-width: ${theme('screens.md')})`]: {
-              fontFamily: theme(`fontFamily.${value}`),
-              fontWeight: theme(`fontWeight.${value}`),
-              fontSize: fontSizeDesktop,
-              lineHeight: optionsDesktop?.lineHeight,
-            },
-          };
-        },
-      }, {
-        values: {
-          'display-large': 'display-large',
-          'display-medium': 'display-medium',
-          'display-small': 'display-small',
-          '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',
-
-          'inherit': 'inherit',
-        },
-      });
-    }),
-
-    // Iconography
-    plugin(({ matchUtilities }) => {
-      matchUtilities({
-        'iconography': (value) => ({
-          fontFamily: '"Material Symbols Outlined"',
-          fontVariationSettings: value,
-        }),
-      }, {
-        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',
-        },
-      });
-    }),
-
-    // Theme
-    plugin(({ matchUtilities, addUtilities, theme }) => {
-      // Presets
-      matchUtilities({
-        'theme-preset-1': (value) => {
-          const [token, suffix = ''] = value.split('..');
-
-          return {
-            color: theme(`textColor.on-${token}` + suffix),
-            backgroundColor: theme(`backgroundColor.${token}` + suffix),
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
-              },
-
-              // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
-                '&:hover, &[force-state="hover"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
-                },
-
-                '&:focus-visible, &[force-state="focus"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
-                },
-
-                '&:active, &[force-state="active"]': {
-                  backgroundColor: theme(`backgroundColor.${token}` + suffix),
-                },
-              },
-            },
-
-            transitionProperty: 'color, background-color, border-color, outline-color',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-
-        'theme-preset-2': (value) => {
-          const [token, suffix = ''] = value.split('..');
-
-          return {
-            color: theme(`textColor.${token}` + suffix),
-            backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
-              },
-
-              // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
-                '&:hover, &[force-state="hover"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
-                },
-
-                '&:focus-visible, &[force-state="focus"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
-                },
-
-                '&:active, &[force-state="active"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
-                },
-              },
-            },
-
-            transitionProperty: 'color, background-color, border-color, outline-color',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-
-        'theme-preset-3': (value) => {
-          const [token, suffix = ''] = value.split('..');
-
-          return {
-            color: theme(`textColor.${token}` + suffix),
-            backgroundColor: 'transparent',
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-              backgroundColor: 'transparent !important',
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
-              },
-
-              // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
-                '&:hover, &[force-state="hover"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
-                },
-
-                '&:focus-visible, &[force-state="focus"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
-                },
-
-                '&:active, &[force-state="active"]': {
-                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
-                },
-              },
-            },
-
-            transitionProperty: 'color, background-color, border-color, outline-color',
-            transitionDuration: theme('transitionDuration.short'),
-            transitionTimingFunction: theme('transitionTimingFunction.standard'),
-          };
-        },
-
-        'theme-preset-4': (value) => {
-          const [token, suffix = ''] = value.split('..');
-
-          return {
-            color: theme(`textColor.${token}` + suffix),
-            backgroundColor: 'transparent',
-
-            borderStyle: 'none',
-            outlineStyle: 'none',
-
-            '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
-              backgroundColor: 'transparent !important',
-            },
-
-            '&:not(.interactivity-none)': {
-              '&:active, &[force-state="active"]': {
-                color: theme(`textColor.${token}-hover` + suffix),
-              },
-
-              // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
-                '&:hover, &[force-state="hover"]': {
-                  color: theme(`textColor.${token}-hover` + suffix),
-                },
-
-                '&:focus-visible, &[force-state="focus"]': {
-                  color: theme(`textColor.${token}-hover` + suffix),
-                },
-
-                '&:active, &[force-state="active"]': {
-                  color: theme(`textColor.${token}` + suffix),
-                },
-              },
-            },
-
-            transitionProperty: 'color, background-color, border-color, outline-color',
-            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',
-        },
-      });
-
-      // Foregrounds
-      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: {
-          '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',
-        },
-      });
-
-      // Backgrounds
-      matchUtilities({
-        'theme-background': (value) => {
-          const [token, suffix = ''] = value.split('..');
-
-          return {
-            backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
-
-            '&[disabled]': {
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
-            },
-          };
-        },
-      }, {
-        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',
-        },
-      });
-
-      // Borders
-      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: {
-          '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',
-        },
-      });
-
-      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: {
-          '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',
-        },
-      });
-
-      addUtilities({
-        '.theme-border-overline': {
-          borderStyle: 'none !important',
-          borderTopStyle: 'solid !important',
-        },
-
-        '.theme-border-underline': {
-          borderStyle: 'none !important',
-          borderBottomStyle: 'solid !important',
-        },
-      });
-
-      // Outlines
-      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: {
-          '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',
-        },
-      });
-
-      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: {
-          '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',
-        },
-      });
-    }),
+    core,
+    layout,
+    interactivity,
+    typography,
+    iconography,
+
+    themePreset,
+    themeForeground,
+    themeBackground,
+    themeBorder,
+    themeOutline,
   ],
 };