@yahoo/uds 3.59.0-beta.1 → 3.59.0-beta.2

package/src/tailwind/tailwindPlugin.ts

@@ -1,724 +0,0 @@
-import {
-  shadowOffsetMap,
-  shadowOpacityMap,
-  shadowSpreadRadiusMap,
-  tailwindColorsAsUds,
-  textVariants,
-} from '@yahoo/uds/fixtures';
-import type {
-  BorderRadius,
-  BorderWidth,
-  BreakpointWithBase,
-  FontWeightDescriptive,
-  TextVariant,
-  UniversalTokensConfig,
-} from '@yahoo/uds/tokens';
-import {
-  alwaysPalette,
-  BORDER_RADIUS_PREFIX,
-  BORDER_WIDTH_PREFIX,
-  DARK_COLOR_MODE_CLASSNAME,
-  DEFAULT_COLOR_MODE,
-  DEFAULT_SCALE_MODE,
-  entries,
-  FONT_SIZE_PREFIX,
-  fromEntries,
-  generateStyles,
-  INVERT_COLOR_MODE_CLASSNAME,
-  LIGHT_COLOR_MODE_CLASSNAME,
-  LINE_HEIGHT_PREFIX,
-  mapValues,
-  SYSTEM_COLOR_MODE_CLASSNAME,
-  TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES,
-  TEXT_RESPONSIVE_CLASSNAME,
-} from '@yahoo/uds/tokens';
-import { parseTokens } from '@yahoo/uds/tokens/parseTokens';
-import { isString } from 'lodash';
-import type { Config } from 'tailwindcss';
-// Tailwind 3.x poorly supports ESM modules so we must include the .js extension when importing.
-import plugin from 'tailwindcss/plugin.js';
-import type { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
-
-import {
-  AvatarConfig,
-  BadgeConfig,
-  CheckboxConfig,
-  ChipConfig,
-  DividerConfig,
-  InputConfig,
-  LinkConfig,
-  MenuConfig,
-  RadioConfig,
-  SwitchConfig,
-} from '../../generated/generatedConfigs';
-import { fontWeightMap } from '../tokens/configs/typography';
-import { assertUnreachable } from '../utils/assertUnreachable';
-import { addColorModeVars } from './base/addColorModeVars';
-import { addColorModeVarsV2 } from './base/addColorModeVarsV2';
-import { addFontFaceDeclarations } from './base/addFontFaceDeclarations';
-import { addFontVars } from './base/addFontVars';
-import { addMotionVars } from './base/addMotionVars';
-import { addScaleModeVars } from './base/addScaleModeVars';
-import type { TailwindPluginFns } from './base/types';
-import { getButtonStyles, getTailwindButtonStyles } from './components/getButtonStyles';
-import { getFocusRingStyles } from './components/getFocusRingStyles';
-import { getGroupedTextStyles } from './components/getGroupedTextStyles';
-import { getHitTargetStyles } from './components/getHitTargetStyles';
-import { getIconButtonStyles, getTailwindIconButtonStyles } from './components/getIconButtonStyles';
-import { getIconStyles } from './components/getIconStyles';
-import { getInputStyles } from './components/getInputStyles';
-import {
-  getBaseTextVars,
-  getResponsiveTextStyles,
-  RESPONSIVE_TAILWIND_CONFIG_MAP,
-  textVariantsSafe,
-} from './components/getResponsiveTextStyles';
-import { udsToTailwindMap } from './defaultTailwindThemeAsUdsConfig';
-import { getFontFamilyTheme } from './theme/getFontFamilyTheme';
-import { getShadowPresetValues } from './utils/getShadowPresetValues';
-import { getShadowStyles } from './utils/getShadowStyles';
-
-interface TailwindPluginOptions {
-  config?: UniversalTokensConfig;
-  /**
-   * Safelisting is a last-resort, and should only be used in situations where
-   * it’s impossible to scan certain content for class names. These situations
-   * are rare, and you should almost never need this feature.
-   *
-   * {@link https://v3.tailwindcss.com/docs/content-configuration#safelisting-classes}
-   */
-  safelist?: Config['safelist'];
-  /**
-   * Disable generating font face declarations through Tailwind
-   * @default false
-   */
-  disableFontFaceDeclarations?: boolean;
-
-  /**
-   * Enable responsive type ramp styles.
-   * @default false
-   * @deprecated This is now set in the uds.config
-   */
-  enableResponsiveTypeRamp?: boolean;
-
-  /**
-   * Enable opt-in automatice color mode based on media query.
-   * @default false
-   */
-  enableSystemColorMode?: boolean;
-
-  previewOptions?: {
-    /**
-     * Generates CSS classes for visually forcing components into a pseudo state (hover, focus, etc)
-     * @default false
-     */
-    generatePseudoStateClassModifier: boolean;
-  };
-}
-
-const tailwindPlugin = plugin.withOptions(
-  function ({
-    config,
-    disableFontFaceDeclarations = false,
-    enableSystemColorMode = false,
-    previewOptions = {
-      generatePseudoStateClassModifier: false,
-    },
-  }: TailwindPluginOptions) {
-    if (!config) {
-      throw new Error(
-        "`tailwindPlugin` requires a config object. If your project has not yet sync'd a config, you can import `defaultTokensConfig` from `@yahoo/uds/defaultTokensConfig` and pass it to `tailwindPlugin`.",
-      );
-    }
-
-    return function ({
-      addBase: addBase_,
-      addUtilities: addUtilities_,
-      addComponents: addComponents_,
-      matchUtilities,
-      theme,
-      config: getRootConfig,
-    }) {
-      const parentConfigImportant = getRootConfig().important;
-      const useImportNamespace = isString(parentConfigImportant);
-      const rootSelector = useImportNamespace ? parentConfigImportant : ':root';
-
-      const fns: TailwindPluginFns = {
-        addRootVariables(css) {
-          addBase_({
-            [rootSelector]: css,
-          });
-        },
-
-        addBase: addBase_,
-
-        addComponents(css) {
-          addComponents_(css, {
-            respectImportant: useImportNamespace,
-          });
-        },
-
-        addUtilities(css) {
-          addUtilities_(css, {
-            respectPrefix: true,
-            respectImportant: useImportNamespace,
-          });
-        },
-      };
-
-      const { addRootVariables, addBase, addComponents, addUtilities } = fns;
-
-      const tokens = parseTokens(config);
-      const fontIds = Object.values(config.font);
-
-      // TODO: Skip when `useImportNamespace`?
-      if (disableFontFaceDeclarations === false) {
-        addFontFaceDeclarations(fontIds, fns);
-      }
-
-      addFontVars(config.font, fns);
-      addScaleModeVars(tokens, fns);
-
-      if (enableSystemColorMode) {
-        addColorModeVarsV2(tokens, fns);
-      } else {
-        addColorModeVars(tokens, fns);
-      }
-
-      // Use the base typography to setup text styles (no longer using scaleMode.large)
-      addRootVariables(getBaseTextVars(config));
-
-      // TODO: Skip when `useImportNamespace`?
-      // Utility short-hand for grouped text styles
-      addBase(getGroupedTextStyles());
-
-      // Add responsive text styles
-      const enableResponsiveTypeRamp = config.globalDefaults.enableResponsiveType ?? false;
-      if (enableResponsiveTypeRamp && config.typography && config.breakpoints) {
-        addComponents(getResponsiveTextStyles(config));
-      }
-
-      /** Add shadow utilities to make shadow props available in Tailwind */
-      if (config.shadow) {
-        // Add _all_ shadow variables (drop & inset) variants to the root
-        const dropShadowVariables = getShadowPresetValues({ config, shadowType: 'drop' });
-        const insetShadowVariables = getShadowPresetValues({ config, shadowType: 'inset' });
-        addRootVariables({ ...dropShadowVariables, ...insetShadowVariables });
-
-        // Setup variants for drop & inset shadows
-        const dropShadowStyles = getShadowStyles({ config, shadowType: 'drop' });
-        const insetShadowStyles = getShadowStyles({ config, shadowType: 'inset' });
-        addUtilities({ ...dropShadowStyles, ...insetShadowStyles });
-      }
-
-      if (config.button) {
-        const buttonStyles = getTailwindButtonStyles(config.button, theme);
-        addComponents(buttonStyles);
-      }
-
-      if (config.iconButton) {
-        const iconButtonStyles = getTailwindIconButtonStyles(config.iconButton, theme);
-        addComponents(iconButtonStyles);
-      }
-
-      // TODO: figure out if this can be automated
-      if (config?.divider) {
-        const dividerStyles = generateStyles(DividerConfig, config.divider, theme, previewOptions);
-        addComponents(dividerStyles);
-      }
-
-      if (config?.link) {
-        const linkStyles = generateStyles(LinkConfig, config.link, theme, previewOptions);
-        addComponents(linkStyles);
-      }
-
-      if (config?.badge) {
-        const badgeStyles = generateStyles(BadgeConfig, config.badge, theme, previewOptions);
-        addComponents(badgeStyles);
-      }
-
-      if (config?.radio) {
-        const radioStyles = generateStyles(RadioConfig, config.radio, theme, previewOptions);
-        addComponents(radioStyles);
-      }
-
-      if (config?.avatar) {
-        const avatarStyles = generateStyles(AvatarConfig, config.avatar, theme, previewOptions);
-        addComponents(avatarStyles);
-      }
-
-      if (config?.chip) {
-        const chipStyles = generateStyles(ChipConfig, config.chip, theme, previewOptions);
-        addComponents(chipStyles);
-      }
-
-      if (config?.switch) {
-        const chipStyles = generateStyles(SwitchConfig, config.switch, theme, previewOptions);
-        addComponents(chipStyles);
-      }
-
-      if (config?.checkbox) {
-        const checkboxStyles = generateStyles(
-          CheckboxConfig,
-          config.checkbox,
-          theme,
-          previewOptions,
-        );
-        addComponents(checkboxStyles);
-      }
-
-      // TODO: May need to ensure portal is inside a importNamespace class
-      if (config?.menu) {
-        const menuStyles = generateStyles(MenuConfig, config.menu, theme, previewOptions);
-        addComponents(menuStyles);
-      }
-
-      if (config?.input) {
-        const inputStyles = generateStyles(InputConfig, config.input, theme, previewOptions);
-        addComponents(inputStyles);
-      }
-
-      if (config.motion) {
-        addMotionVars(config.motion, fns);
-      }
-
-      // TODO: Skip when `useImportNamespace`?
-      const hitTargetStyles = getHitTargetStyles();
-      addComponents(hitTargetStyles);
-
-      // TODO: Skip when `useImportNamespace`?
-      const focusRingStyles = getFocusRingStyles({ theme });
-      addComponents(focusRingStyles);
-
-      // TODO: Skip when `useImportNamespace`?
-      const inputStyles = getInputStyles();
-      addComponents(inputStyles);
-
-      const iconStyles = getIconStyles();
-      addBase(iconStyles);
-
-      matchUtilities(
-        {
-          iconSize: (value) => ({
-            width: value,
-            height: value,
-            fontSize: value,
-            lineHeight: value,
-          }),
-        },
-        {
-          values: theme('sizing.icon'),
-        },
-      );
-
-      matchUtilities(
-        {
-          avatarSize: (value) => ({
-            width: value,
-            height: value,
-          }),
-        },
-        {
-          values: theme('sizing.avatar'),
-        },
-      );
-
-      matchUtilities(
-        {
-          case: (value) => ({
-            'text-transform': value,
-          }),
-        },
-        {
-          values: theme('typography.textTransform'),
-        },
-      );
-
-      // Retrieve the font weight map from the tailwind config
-      const namedFontWeightsFromPlugin =
-        (theme('typography.fontWeight') as Record<
-          FontWeightDescriptive | TextVariant | string,
-          string
-        >) || {};
-
-      // Combine any of the named font weights passed into the plugin (label1, myCrazyFontWeight)
-      // with the default font weight map (thin, extralight, light, regular, medium, semibold, bold, extrabold, black)
-      const fontWeightsWithDescriptives = {
-        ...fontWeightMap, // Remove when fontWeightMap is deprecated
-        ...namedFontWeightsFromPlugin,
-      };
-
-      Object.entries(fontWeightsWithDescriptives).forEach(([fontWeight, value]) => {
-        const styles: Record<string, string> = {};
-
-        // If this font weight is one of the text variants, we need to use font-variation-settings
-        if (textVariants.map(textVariantsSafe).includes(fontWeight as TextVariant)) {
-          const textVariant = fontWeight as TextVariant;
-          styles['font-weight'] = value;
-          styles['font-variation-settings'] =
-            `"wght" ${value}, "slnt" ${theme(`typography.fontSlant.${textVariant}`)}, "wdth" ${theme(`typography.fontWidth.${textVariant}`)}`;
-        } else {
-          // Otherwise, we can just use the font-weight property
-          styles['font-weight'] = value;
-        }
-
-        // add .font-weight-bold, .font-weight-label1, .font-weight-myCrazyFontWeight, etc.
-        addUtilities({ [`.font-weight-${fontWeight}`]: styles });
-      });
-
-      matchUtilities(
-        {
-          'font-size': (value) => ({
-            'font-size': value,
-          }),
-        },
-        {
-          values: theme('typography.fontSize'),
-        },
-      );
-    };
-  },
-  function ({ config, safelist = [] }: TailwindPluginOptions) {
-    if (!config) {
-      throw new Error('No config provided');
-    }
-
-    const enableResponsiveTypeRamp = config.globalDefaults.enableResponsiveType ?? false;
-
-    const tokens = parseTokens(config);
-    const colorModeToken = tokens.colorMode[DEFAULT_COLOR_MODE].tailwindConfig;
-    const scaleModeToken = tokens.scaleMode[DEFAULT_SCALE_MODE];
-    const spectrumWithTailwind = mapValues(colorModeToken.spectrum, (hueConfig, hue) => {
-      return {
-        ...hueConfig,
-        ...tailwindColorsAsUds[hue as keyof typeof tailwindColorsAsUds]!,
-      };
-    });
-
-    /* --------------------------------- COLORS --------------------------------- */
-    // Shared across all color groups (i.e. text color, border, background, etc)
-    const colors = {
-      ...tailwindColorsAsUds,
-      ...spectrumWithTailwind,
-      ...alwaysPalette,
-    };
-    const textColors = colorModeToken.palette.foreground;
-    const backgroundColors = colorModeToken.palette.background;
-    const borderColors = colorModeToken.palette.line;
-
-    /* -------------------------------- FONT SIZE ------------------------------- */
-    /**
-     * UDS does not offer enough text variants to cover all of Tailwind's font sizes
-     * so we are going to exclude the following from the UDS config:
-     */
-    type ExcludedTwFontSizes = '7xl' | '8xl' | '9xl';
-    type TwFontSizeAlias = Exclude<keyof DefaultTheme['fontSize'], ExcludedTwFontSizes>;
-    type TwFontSizeConfig = Record<TwFontSizeAlias, [string, { lineHeight: string }]>;
-
-    /**
-     * Reassign Tailwind's font size aliases to UDS's font size aliases
-     * This makes it so UDS configs can power both Tailwind and UDS components
-     */
-    const tailwindFontSize: TwFontSizeConfig = fromEntries(
-      entries(udsToTailwindMap.fontSize).map(([udsAlias, twAlias]) => {
-        return [
-          twAlias,
-          [
-            `var(--${FONT_SIZE_PREFIX}-${textVariantsSafe(udsAlias)})`,
-            { lineHeight: `var(--${LINE_HEIGHT_PREFIX}-${textVariantsSafe(udsAlias)})` },
-          ],
-        ] as const;
-      }),
-    );
-
-    /**
-     * TODO: use tuple format like tailwind does to reduce having to use
-     * separate className utils for font size & line height
-     */
-    const fontSize = tailwindFontSize;
-
-    /* ------------------------------ BORDER RADIUS ----------------------------- */
-    type ExcludedTwBorderRadii = '2xl' | '3xl';
-    type TwBorderRadiusAlias = Exclude<keyof DefaultTheme['borderRadius'], ExcludedTwBorderRadii>;
-    type TwBorderRadiusCollisions = Extract<BorderRadius, TwBorderRadiusAlias>;
-    type TwOnlyBorderRadiusAlias = Exclude<TwBorderRadiusAlias, TwBorderRadiusCollisions>;
-    type TwBorderRadiusOverride = `var(--${typeof BORDER_RADIUS_PREFIX}-${BorderRadius})`;
-    type TwBorderRadiusOverrideConfig = Record<TwOnlyBorderRadiusAlias, TwBorderRadiusOverride>;
-    /**
-     * The following tokens do not collide with UDS's border radius
-     * so we are not going to try and map them:
-     *  - '2xl': 16,
-     *  - '3xl': 24,
-     */
-    const tailwindBorderRadius: TwBorderRadiusOverrideConfig = fromEntries(
-      entries(udsToTailwindMap.borderRadius).map(([udsAlias, twAlias]) => {
-        return [twAlias, `var(--${BORDER_RADIUS_PREFIX}-${udsAlias})`] as const;
-      }),
-    );
-
-    const borderRadius = {
-      ...scaleModeToken.borderRadius.tailwindConfig,
-      ...tailwindBorderRadius,
-    };
-
-    /* ------------------------------ BORDER WIDTH ------------------------------ */
-    type ExcludedTwBorderWidth = '0' | '8';
-    type TwBorderWidthAlias = Exclude<keyof DefaultTheme['borderWidth'], ExcludedTwBorderWidth>;
-    type TwBorderWidthCollisions = Extract<BorderWidth, TwBorderWidthAlias>;
-    type TwOnlyBorderWidthAlias = Exclude<TwBorderWidthAlias, TwBorderWidthCollisions>;
-    type TwBorderWidthOverride = `var(--${typeof BORDER_WIDTH_PREFIX}-${BorderWidth})`;
-    type TwBorderWidthOverrideConfig = Record<TwOnlyBorderWidthAlias, TwBorderWidthOverride>;
-    /**
-     * Reassign Tailwind's border width aliases to UDS's border width aliases
-     * This makes it so UDS configs can power both Tailwind and UDS components
-     */
-    const tailwindBorderWidth: TwBorderWidthOverrideConfig = fromEntries(
-      entries(udsToTailwindMap.borderWidth).map(([udsAlias, twAlias]) => {
-        return [twAlias, `var(--${BORDER_WIDTH_PREFIX}-${udsAlias})`] as const;
-      }),
-    );
-
-    const borderWidth = {
-      ...scaleModeToken.borderWidth.tailwindConfig,
-      ...tailwindBorderWidth,
-    };
-
-    const textClasses = textVariants.map((variant) => `uds-text-${textVariantsSafe(variant)}`);
-    const responsiveTextClasses = [
-      TEXT_RESPONSIVE_CLASSNAME,
-      ...Object.keys(TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES).map(
-        (variant) => TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES[variant as BreakpointWithBase],
-      ),
-    ];
-
-    return {
-      darkMode: ['class', DARK_COLOR_MODE_CLASSNAME],
-      // Guarantee that the dark mode class is not purged
-      safelist: [
-        'uds-hit-target',
-        'uds-ring',
-        'uds-switch-handle-icon',
-        'uds-input[list]::-webkit-calendar-picker-indicator',
-        'uds-input::-webkit-datetime-edit',
-        'uds-input::-webkit-calendar-picker-indicator',
-        // Guarantee that the light and dark mode class is not purged
-        LIGHT_COLOR_MODE_CLASSNAME,
-        DARK_COLOR_MODE_CLASSNAME,
-        INVERT_COLOR_MODE_CLASSNAME,
-        SYSTEM_COLOR_MODE_CLASSNAME,
-        // NOTE: THESE ICON CLASSES ARE USED IN THE ICON CODEGEN - DO NOT CHANGE THEM
-        'uds-light-mode-icon',
-        'uds-dark-mode-icon',
-        ...textClasses,
-        ...responsiveTextClasses,
-        ...safelist,
-      ],
-      theme: {
-        /**
-         * Preserve the default values from Tailwind, but also add new values
-         * https://tailwindcss.com/docs/theme#extending-the-default-theme
-         */
-        extend: {
-          spacing: {
-            '4.5': '1.125rem',
-            '5.5': '1.375rem',
-          },
-
-          /**
-           * Use breakpoints from configurator.
-           */
-          ...(enableResponsiveTypeRamp
-            ? {
-                screens: mapValues(config.breakpoints, (breakpoint) => {
-                  switch (breakpoint.type) {
-                    case 'px':
-                      return `${breakpoint.value}px`;
-                  }
-
-                  return assertUnreachable(breakpoint.type);
-                }),
-              }
-            : {}),
-
-          /**
-           * Used in @ariakit/react https://ariakit.org/guide/styling#aria
-           * By default, Tailwind offers all of these. Including in this config
-           * to provide links to ariakit docs for ones that are shared between the two.
-           * This is not exhaustive, and only includes the shared ones at the moment.
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L17
-           */
-          aria: {
-            /** https://ariakit.org/guide/styling#aria-checked */
-            checked: 'checked="true"',
-            /** https://ariakit.org/guide/styling#aria-disabled */
-            disabled: 'disabled="true"',
-            /** https://ariakit.org/guide/styling#aria-expanded */
-            expanded: 'expanded="true"',
-            /** https://ariakit.org/guide/styling#aria-invalid */
-            invalid: 'aria-invalid="true"',
-          },
-          /**
-           * Used in @ariakit/react https://ariakit.org/guide/styling#css-selectors
-           * By default, Tailwind does not include any values for this option
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L888
-           */
-          data: {
-            active: 'active="true"',
-            'active-item': 'active-item="true"',
-            autofill: 'autofill="true"',
-            backdrop: 'backdrop="true"',
-            enter: 'enter="true"',
-            leave: 'leave="true"',
-            'focus-visible': 'focus-visible="true"',
-          },
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L87
-           */
-          borderRadius,
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L101
-           */
-          borderWidth,
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L751
-           */
-          outlineWidth: {
-            ...borderWidth,
-            // Set the default to 2px regardless of size config
-            DEFAULT: '2px',
-          },
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L744
-           */
-          outlineOffset: {
-            ...borderWidth,
-            // Set the default to 2px regardless of size config
-            DEFAULT: '2px',
-          },
-          /**
-           * Colors object is included by default, but that does not include UDS semantic border colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L743
-           */
-          outlineColor: ({ theme }) => ({
-            ...borderColors,
-            DEFAULT: theme('colors.gray.15'),
-          }),
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L302
-           */
-          fontFamily: getFontFamilyTheme(),
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L324
-           */
-          fontSize,
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L605
-           */
-          lineHeight: RESPONSIVE_TAILWIND_CONFIG_MAP.lineHeight,
-          /**
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L133
-           */
-          colors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic background colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L42
-           */
-          backgroundColor: backgroundColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic text colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L889
-           */
-          textColor: textColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic border colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L82
-           */
-          borderColor: borderColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic background colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L253
-           */
-          fill: backgroundColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic text colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L132
-           */
-          caretColor: textColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic text colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L759
-           */
-          placeholderColor: textColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic text colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L890
-           */
-          textDecorationColor: textColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic border colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L241
-           */
-          divideColor: borderColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic border colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L761
-           */
-          ringColor: borderColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic border colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L765
-           */
-          ringOffsetColor: borderColors,
-          /**
-           * Colors object is included by default, but that does not include UDS semantic border colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L878
-           */
-          stroke: borderColors,
-          /**
-           * Gradient color stops object is included by default, but that does not include UDS palette background colors
-           * https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L42
-           */
-          gradientColorStops: ({ theme }) => ({
-            ...backgroundColors,
-            ...theme('colors'),
-          }),
-          /**
-           * Custom typography object added to theme so we can access these values using Tailwind's theme function.
-           *
-           * Tailwind's className conventions would cause collisions (i.e .font-body1 for fontWeight and .font-body1 for fontSize)
-           * if we were to use our naming conventions with Tailwind's theme shape.
-           */
-          typography: RESPONSIVE_TAILWIND_CONFIG_MAP,
-          sizing: {
-            icon: scaleModeToken.iconSizes.tailwindConfig,
-            avatar: scaleModeToken.avatarSizes.tailwindConfig,
-          },
-          shadowOpacity: shadowOpacityMap,
-          shadowSpread: shadowSpreadRadiusMap,
-          shadowOffset: shadowOffsetMap,
-          shadowBlur: shadowOffsetMap,
-        },
-      },
-    };
-  },
-);
-
-/**
- * Use in `tailwindConfig.content` to ensure UDS package(s) styles are
- * included in the app.
- * Note: wrapped in a function so client side usage of the tailwind plugin package
- * (e.g. configurator) doesn't error out on require() being undefined.
- * */
-const getUDSContent = () => {
-  return [require.resolve('@yahoo/uds').replace('/dist/index.cjs', '/dist/**/*.{js,cjs}')];
-};
-
-export {
-  getButtonStyles,
-  getIconButtonStyles,
-  getInputStyles,
-  getUDSContent,
-  tailwindPlugin,
-  udsToTailwindMap,
-};
-export { getButtonColorForProperty } from './components/utils';