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

package/src/tailwind/tailwindPlugin.ts

@@ -0,0 +1,724 @@
+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';