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

package/src/tailwind/base/addColorModeVars.ts

@@ -1,23 +0,0 @@
-import { getColorModeStyles } from '@yahoo/uds/tailwind/utils';
-import {
-  DARK_COLOR_MODE_CLASSNAME,
-  DEFAULT_COLOR_MODE,
-  LIGHT_COLOR_MODE_CLASSNAME,
-} from '@yahoo/uds/tokens';
-import type { WebTokens } from '@yahoo/uds/tokens/parseTokens';
-
-import type { TailwindPluginFns } from './types';
-
-export function addColorModeVars(
-  tokens: WebTokens,
-  { addBase, addRootVariables }: TailwindPluginFns,
-) {
-  const styles = getColorModeStyles(tokens);
-
-  addRootVariables(styles[DEFAULT_COLOR_MODE]);
-
-  addBase({
-    [`.${LIGHT_COLOR_MODE_CLASSNAME}`]: styles.light,
-    [`.${DARK_COLOR_MODE_CLASSNAME}`]: styles.dark,
-  });
-}

package/src/tailwind/base/addColorModeVarsV2.ts

@@ -1,57 +0,0 @@
-import { getColorModeStyles } from '@yahoo/uds/tailwind/utils';
-import {
-  DARK_COLOR_MODE_CLASSNAME,
-  DEFAULT_COLOR_MODE,
-  INVERT_COLOR_MODE_CLASSNAME,
-  LIGHT_COLOR_MODE_CLASSNAME,
-  SYSTEM_COLOR_MODE_CLASSNAME,
-} from '@yahoo/uds/tokens';
-import type { WebTokens } from '@yahoo/uds/tokens/parseTokens';
-
-import type { TailwindPluginFns } from './types';
-
-export function addColorModeVarsV2(
-  tokens: WebTokens,
-  { addBase, addRootVariables }: TailwindPluginFns,
-) {
-  const styles = getColorModeStyles(tokens);
-
-  const stylesWithInvert = (key: keyof typeof styles) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { colorScheme: _, ...stylesDefault } = styles[key];
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { colorScheme: __, ...stylesInvert } = styles[key === 'light' ? 'dark' : 'light'];
-
-    return {
-      ...stylesDefault,
-      [`.${INVERT_COLOR_MODE_CLASSNAME}`]: stylesInvert,
-    };
-  };
-
-  const lightWithInvert = stylesWithInvert('light');
-  const darkWithInvert = stylesWithInvert('dark');
-
-  addRootVariables({
-    colorScheme: DEFAULT_COLOR_MODE,
-    ...stylesWithInvert(DEFAULT_COLOR_MODE),
-  });
-
-  addBase({
-    [`.${SYSTEM_COLOR_MODE_CLASSNAME}`]: {
-      colorScheme: 'light dark',
-      '@media (prefers-color-scheme: dark)': darkWithInvert,
-    },
-
-    [`.${LIGHT_COLOR_MODE_CLASSNAME}`]: {
-      colorScheme: 'light',
-      ...lightWithInvert,
-      // '@media (prefers-color-scheme: dark)': lightWithInvert,
-    },
-
-    [`.${DARK_COLOR_MODE_CLASSNAME}`]: {
-      colorScheme: 'dark',
-      ...darkWithInvert,
-    },
-  });
-}

package/src/tailwind/base/addFontFaceDeclarations.ts

@@ -1,13 +0,0 @@
-import type { FontID } from '@yahoo/uds/tokens';
-
-import { getFontFaceDeclarations } from '../utils';
-import type { TailwindPluginFns } from './types';
-
-export function addFontFaceDeclarations(fontIds: FontID[], { addBase }: TailwindPluginFns) {
-  const declarations = getFontFaceDeclarations(fontIds);
-  for (const declaration of declarations) {
-    addBase({
-      '@font-face': declaration,
-    });
-  }
-}

package/src/tailwind/base/addFontVars.ts

@@ -1,9 +0,0 @@
-import { getFontStyles } from '@yahoo/uds/tailwind/utils';
-import type { FontConfig } from '@yahoo/uds/tokens';
-
-import type { TailwindPluginFns } from './types';
-
-export function addFontVars(config: FontConfig, { addRootVariables }: TailwindPluginFns) {
-  const styles = getFontStyles(config);
-  addRootVariables(styles);
-}

package/src/tailwind/base/addMotionVars.ts

@@ -1,9 +0,0 @@
-import { getMotionStyles } from '@yahoo/uds/tailwind/utils';
-import type { MotionConfig } from '@yahoo/uds/tokens';
-
-import type { TailwindPluginFns } from './types';
-
-export function addMotionVars(config: MotionConfig, { addRootVariables }: TailwindPluginFns) {
-  const styles = getMotionStyles(config);
-  addRootVariables(styles);
-}

package/src/tailwind/base/addScaleModeVars.ts

@@ -1,33 +0,0 @@
-import { getScaleModeStyles } from '@yahoo/uds/tailwind/utils';
-import {
-  DEFAULT_SCALE_MODE,
-  LARGE_SCALE_MODE_CLASSNAME,
-  MEDIUM_SCALE_MODE_CLASSNAME,
-  SMALL_SCALE_MODE_CLASSNAME,
-  XLARGE_SCALE_MODE_CLASSNAME,
-  XSMALL_SCALE_MODE_CLASSNAME,
-  XXLARGE_SCALE_MODE_CLASSNAME,
-  XXXLARGE_SCALE_MODE_CLASSNAME,
-} from '@yahoo/uds/tokens';
-import type { WebTokens } from '@yahoo/uds/tokens/parseTokens';
-
-import type { TailwindPluginFns } from './types';
-
-export function addScaleModeVars(
-  tokens: WebTokens,
-  { addBase, addRootVariables }: TailwindPluginFns,
-) {
-  const styles = getScaleModeStyles(tokens);
-
-  addRootVariables(styles[DEFAULT_SCALE_MODE]);
-
-  addBase({
-    [`.${XSMALL_SCALE_MODE_CLASSNAME}`]: styles.xSmall,
-    [`.${SMALL_SCALE_MODE_CLASSNAME}`]: styles.small,
-    [`.${MEDIUM_SCALE_MODE_CLASSNAME}`]: styles.medium,
-    [`.${LARGE_SCALE_MODE_CLASSNAME}`]: styles.large,
-    [`.${XLARGE_SCALE_MODE_CLASSNAME}`]: styles.xLarge,
-    [`.${XXLARGE_SCALE_MODE_CLASSNAME}`]: styles.xxLarge,
-    [`.${XXXLARGE_SCALE_MODE_CLASSNAME}`]: styles.xxxLarge,
-  });
-}

package/src/tailwind/base/types.ts

@@ -1,8 +0,0 @@
-import type { CSSRuleObject } from 'tailwindcss/types/config';
-
-export interface TailwindPluginFns {
-  addRootVariables: (base: CSSRuleObject) => void;
-  addBase: (base: CSSRuleObject | CSSRuleObject[]) => void;
-  addComponents: (base: CSSRuleObject | CSSRuleObject[]) => void;
-  addUtilities: (base: CSSRuleObject | CSSRuleObject[]) => void;
-}

package/src/tailwind/components/getButtonStyles.ts

@@ -1,240 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                                BUTTON STYLES                               */
-/* -------------------------------------------------------------------------- */
-
-import { buttonPalettes, buttonVariants } from '@yahoo/uds/fixtures';
-import type {
-  ButtonBaseConfig,
-  ButtonClassMap,
-  ButtonColorPropertyConfig,
-  ButtonConfig,
-  ButtonMotionPropertyConfig,
-  ButtonPalette,
-  ButtonShadowPropertyConfig,
-  ButtonSize,
-  ButtonVariant,
-} from '@yahoo/uds/tokens';
-import { BUTTON_CSS_VAR_MAP, entries, PSEUDO_STYLE_SELECTOR_MAP } from '@yahoo/uds/tokens';
-
-import type { CssStyleObject, ThemeFn } from './types';
-import { getButtonColorForProperty, getButtonScale, getButtonShadowVar, getVar } from './utils';
-
-function getStateStyles(
-  {
-    backgroundColor,
-    borderColor,
-    color,
-    borderRadius,
-    borderWidth,
-    dropShadow,
-    insetShadow,
-  }: ButtonMotionPropertyConfig &
-    ButtonColorPropertyConfig &
-    ButtonShadowPropertyConfig &
-    Partial<ButtonBaseConfig>,
-  theme: ThemeFn,
-) {
-  return {
-    [BUTTON_CSS_VAR_MAP.backgroundColor]: getButtonColorForProperty(
-      'backgroundColor',
-      backgroundColor,
-      theme,
-    ),
-    [BUTTON_CSS_VAR_MAP.borderColor]: getButtonColorForProperty('borderColor', borderColor, theme),
-    [BUTTON_CSS_VAR_MAP.color]: getButtonColorForProperty('color', color, theme),
-    ...(dropShadow
-      ? {
-          [BUTTON_CSS_VAR_MAP.dropShadow]: getButtonShadowVar('dropShadow', {
-            dropShadow,
-            insetShadow,
-          }),
-        }
-      : {}),
-    ...(insetShadow
-      ? {
-          [BUTTON_CSS_VAR_MAP.insetShadow]: getButtonShadowVar('insetShadow', {
-            dropShadow,
-            insetShadow,
-          }),
-        }
-      : {}),
-    ...(borderRadius
-      ? {
-          [BUTTON_CSS_VAR_MAP.borderRadius]: theme(`borderRadius.${borderRadius}`),
-        }
-      : {}),
-    ...(borderWidth
-      ? {
-          [BUTTON_CSS_VAR_MAP.borderWidth]: theme(`borderWidth.${borderWidth}`),
-        }
-      : {}),
-  };
-}
-
-function getSizeStyles(sizeConfig: ButtonConfig['size'][ButtonSize], theme: ThemeFn) {
-  const { spacingHorizontal, spacingVertical, gap, textVariant, iconSize } = sizeConfig;
-  const lineHeightVarValue = theme(`typography.lineHeight.${textVariant}`);
-  const iconSizeVarValue = theme(`sizing.icon.${iconSize}`);
-  return {
-    [BUTTON_CSS_VAR_MAP.padding]: `${theme(`spacing[${spacingVertical}]`)} ${theme(`spacing[${spacingHorizontal}]`)}`,
-    [BUTTON_CSS_VAR_MAP.columnGap]: theme(`spacing[${gap}]`),
-    [BUTTON_CSS_VAR_MAP.fontFamily]: theme(`typography.fontFamily.${textVariant}`),
-    [BUTTON_CSS_VAR_MAP.fontWeight]: theme(`typography.fontWeight.${textVariant}`),
-    [BUTTON_CSS_VAR_MAP.fontWidth]: theme(`typography.fontWidth.${textVariant}`),
-    [BUTTON_CSS_VAR_MAP.fontSlant]: theme(`typography.fontSlant.${textVariant}`),
-    [BUTTON_CSS_VAR_MAP.fontSize]: theme(`typography.fontSize.${textVariant}`),
-    [BUTTON_CSS_VAR_MAP.lineHeight]: `max(${lineHeightVarValue}, ${iconSizeVarValue})`,
-    [BUTTON_CSS_VAR_MAP.textTransform]: theme(`typography.textTransform.${textVariant}`),
-    [BUTTON_CSS_VAR_MAP.iconSize]: theme(`sizing.icon.${iconSize}`),
-  };
-}
-
-function getButtonStyles(button: ButtonConfig, theme: ThemeFn) {
-  const defaultVariantConfig = button.palette[button.defaults.palette][button.defaults.variant];
-  const defaultSize = button.size[button.defaults.size];
-  const defaultRestScale = defaultVariantConfig.base.scale;
-  const defaultHoverScale = defaultVariantConfig.effect.hover.scale.value;
-  const defaultPressedScale = defaultVariantConfig.effect.pressed.scale.value;
-
-  const variables = {
-    ...getStateStyles(defaultVariantConfig.base, theme),
-    ...getSizeStyles(defaultSize, theme),
-    // Set the default scale states
-    [BUTTON_CSS_VAR_MAP.effects.scale.rest]: getButtonScale({ scale: defaultRestScale }),
-    [BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: defaultHoverScale }),
-    [BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: defaultPressedScale }),
-  };
-
-  // TODO remove these when UD-736 is resolved
-  const TMP_transitionStyles = {
-    transitionProperty:
-      'color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke',
-    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    transitionDuration: '220ms',
-  };
-
-  /**
-   * Box shadow rule houses three concerns:
-   * 1. Border
-   * 2. Shadow
-   * 3. Inset shadow
-   *
-   * IMPORTANT: DO NOT SPLIT INTO MULTIPLE LINES, IT CAN BREAK POSTCSS.
-   */
-  const boxShadow = `inset 0 0 0 ${getVar(BUTTON_CSS_VAR_MAP, 'borderWidth', variables)} ${getVar(BUTTON_CSS_VAR_MAP, 'borderColor', variables)}, ${getVar(BUTTON_CSS_VAR_MAP, 'dropShadow', variables)}, ${getVar(BUTTON_CSS_VAR_MAP, 'insetShadow', variables)}`;
-
-  /** Assign variables to configurable properties and fallback with default value */
-  const defaultStyles = {
-    borderRadius: getVar(BUTTON_CSS_VAR_MAP, 'borderRadius', variables),
-    boxShadow,
-    color: getVar(BUTTON_CSS_VAR_MAP, 'color', variables),
-    backgroundColor: getVar(BUTTON_CSS_VAR_MAP, 'backgroundColor', variables),
-    padding: getVar(BUTTON_CSS_VAR_MAP, 'padding', variables),
-    fontFamily: getVar(BUTTON_CSS_VAR_MAP, 'fontFamily', variables),
-    fontWeight: getVar(BUTTON_CSS_VAR_MAP, 'fontWeight', variables),
-    fontSize: getVar(BUTTON_CSS_VAR_MAP, 'fontSize', variables),
-    lineHeight: getVar(BUTTON_CSS_VAR_MAP, 'lineHeight', variables),
-    textTransform: getVar(BUTTON_CSS_VAR_MAP, 'textTransform', variables),
-    display: 'inline-flex',
-    justifyContent: 'center',
-    overflow: 'hidden', // Ensure truncation works
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    'font-variation-settings': `"wght" ${getVar(BUTTON_CSS_VAR_MAP, 'fontWeight', variables)}, "slnt" ${getVar(BUTTON_CSS_VAR_MAP, 'fontSlant', variables)}, "wdth" ${getVar(BUTTON_CSS_VAR_MAP, 'fontWidth', variables)}`,
-    // Ensure our default vars are _always_ set on the button
-    ...variables,
-    ...TMP_transitionStyles,
-  };
-
-  const hoverStyles = getStateStyles(defaultVariantConfig.state.hover, theme);
-  const pressedStyles = getStateStyles(defaultVariantConfig.state.pressed, theme);
-
-  const disabledStyles = {
-    cursor: 'not-allowed',
-    opacity: '0.2',
-    [BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: 'none' }),
-    [BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: 'none' }),
-  };
-
-  const css: CssStyleObject = {
-    ['.uds-button']: defaultStyles,
-    ['.uds-button .uds-button-icon']: {
-      width: getVar(BUTTON_CSS_VAR_MAP, 'iconSize', variables),
-      height: getVar(BUTTON_CSS_VAR_MAP, 'iconSize', variables),
-    },
-    [`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.hover}`]: hoverStyles,
-    [`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.pressed}`]: pressedStyles,
-    [`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.disabled}`]: disabledStyles,
-    ['.disabled .uds-button']: disabledStyles,
-  };
-
-  const pseudoCss = {
-    ['.hover']: { ['.uds-button']: hoverStyles } as CssStyleObject,
-    ['.pressed']: { ['.uds-button']: pressedStyles } as CssStyleObject,
-  };
-
-  // Generate styles for each size
-  for (const [size, sizeConfig] of entries(button.size)) {
-    css[`.uds-button-${size}`] = getSizeStyles(sizeConfig, theme);
-  }
-
-  // Iterate over user config and update variant styles
-  function setVariantStyles(
-    className: `.${string}`,
-    { palette, variant }: { palette: ButtonPalette; variant: ButtonVariant },
-  ) {
-    const variantConfig = button.palette[palette][variant];
-    const base = variantConfig.base;
-    const states = variantConfig.state;
-    const effects = variantConfig.effect;
-    const stateStyles = {
-      rest: {
-        ...getStateStyles(base, theme),
-      },
-      restScale: {
-        [BUTTON_CSS_VAR_MAP.effects.scale.rest]: getButtonScale({ scale: base.scale }),
-        [BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({
-          scale: effects.hover.scale.value,
-        }),
-        [BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({
-          scale: effects.pressed.scale.value,
-        }),
-      },
-      hover: getStateStyles(states.hover, theme),
-      pressed: getStateStyles(states.pressed, theme),
-    };
-
-    css[className] = stateStyles.rest;
-    css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.notDisabled}`] = stateStyles.restScale;
-    css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.hover}`] = stateStyles.hover;
-    css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.pressed}`] = stateStyles.pressed;
-    pseudoCss['.hover'][className] = stateStyles.hover;
-    pseudoCss['.pressed'][className] = stateStyles.pressed;
-  }
-
-  // Generate styles for each palette and variant
-  for (const palette of buttonPalettes) {
-    // Generate styles for each palette and with default variant
-    setVariantStyles(`.uds-button-${palette}`, { palette, variant: button.defaults.variant });
-
-    // Generate styles for each palette and variant combo
-    for (const variant of buttonVariants) {
-      setVariantStyles(`.uds-button-${palette}.uds-button-${variant}`, { palette, variant });
-
-      // Generate styles for each variant for default palette
-      if (palette === button.defaults.palette) {
-        setVariantStyles(`.uds-button-${variant}`, { palette, variant });
-      }
-    }
-  }
-
-  /** TODO: figure out way to ensure this classMap and what's really being set here is in sync */
-  return { ...css, ...pseudoCss } as ButtonClassMap;
-}
-
-function getTailwindButtonStyles(button: ButtonConfig, theme: ThemeFn) {
-  return getButtonStyles(button, theme) as CssStyleObject;
-}
-
-export { getButtonStyles, getTailwindButtonStyles };

package/src/tailwind/components/getFocusRingStyles.ts

@@ -1,32 +0,0 @@
-import { PSEUDO_STYLE_SELECTOR_MAP } from '@yahoo/uds/tokens';
-
-import type { CssStyleObject, ThemeFn } from './types';
-
-// Using css vars so consumers have a css only path to customize
-const ringStyles = {
-  outlineOffset: 'var(--uds-outline-offset)',
-  outlineWidth: 'var(--uds-outline-width)',
-  outlineColor: 'var(--uds-outline-color)',
-  outlineStyle: 'var(--uds-outline-style)',
-};
-
-/**
- * Generates focus ring styles using Tailwind theme values and CSS variables.
- */
-function getFocusRingStyles({ theme }: { theme: ThemeFn }) {
-  return {
-    /** Setup vars */
-    '.uds-ring': {
-      '--uds-outline-offset': theme('outlineOffset.DEFAULT'),
-      '--uds-outline-width': theme('outlineWidth.DEFAULT'),
-      '--uds-outline-color': theme('outlineColor.DEFAULT'),
-      '--uds-outline-style': 'solid', // outlineStyle isn't in the tailwind theme
-    },
-    /** Apply styles */
-    [`.uds-ring${PSEUDO_STYLE_SELECTOR_MAP.focused}`]: ringStyles,
-    ['.focused .uds-ring']: ringStyles,
-    [`.uds-ring.uds-ring-within${PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}`]: ringStyles,
-  } as CssStyleObject;
-}
-
-export { getFocusRingStyles };

package/src/tailwind/components/getGroupedTextStyles.ts

@@ -1,29 +0,0 @@
-import { textVariants } from '@yahoo/uds/fixtures';
-
-import {
-  FONT_FAMILY_PREFIX,
-  FONT_SIZE_PREFIX,
-  FONT_SLANT_PREFIX,
-  FONT_WEIGHT_PREFIX,
-  FONT_WIDTH_PREFIX,
-  LINE_HEIGHT_PREFIX,
-  TEXT_TRANSFORM_PREFIX,
-} from '../../tokens/consts/cssTokens';
-import { textVariantsSafe } from './getResponsiveTextStyles';
-
-const getGroupedTextStyles = () =>
-  Object.fromEntries(
-    textVariants.map(textVariantsSafe).map((variant) => [
-      `.uds-text-${variant}`,
-      {
-        fontFamily: `var(--${FONT_FAMILY_PREFIX}-${variant})`,
-        fontSize: `var(--${FONT_SIZE_PREFIX}-${variant})`,
-        fontWeight: `var(--${FONT_WEIGHT_PREFIX}-${variant})`,
-        fontVariationSettings: `"wght" var(--${FONT_WEIGHT_PREFIX}-${variant}), "slnt" var(--${FONT_SLANT_PREFIX}-${variant}), "wdth" var(--${FONT_WIDTH_PREFIX}-${variant})`,
-        lineHeight: `var(--${LINE_HEIGHT_PREFIX}-${variant})`,
-        textTransform: `var(--${TEXT_TRANSFORM_PREFIX}-${variant})`,
-      },
-    ]),
-  );
-
-export { getGroupedTextStyles };

package/src/tailwind/components/getHitTargetStyles.ts

@@ -1,23 +0,0 @@
-import type { CssStyleObject } from './types';
-
-const MINIMUM_TAP_TARGET = '44px';
-function getHitTargetStyles() {
-  return {
-    ['.uds-hit-target']: {
-      position: 'relative',
-    },
-    ['.uds-hit-target::before']: {
-      '@media (hover: none)': {
-        content: `''`,
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        width: `max(${MINIMUM_TAP_TARGET}, 100%)`,
-        height: `max(${MINIMUM_TAP_TARGET}, 100%)`,
-        transform: 'translate(-50%, -50%)',
-      },
-    },
-  } as CssStyleObject;
-}
-
-export { getHitTargetStyles, MINIMUM_TAP_TARGET };

package/src/tailwind/components/getIconButtonStyles.ts

@@ -1,49 +0,0 @@
-import type { IconButtonClassMap, IconButtonSize, UniversalTokensConfig } from '@yahoo/uds/tokens';
-import { entries, ICON_BUTTON_CSS_VAR_MAP } from '@yahoo/uds/tokens';
-
-import type { CssStyleObject, ThemeFn } from './types';
-import { getVar } from './utils';
-type IconButtonConfig = Exclude<UniversalTokensConfig['iconButton'], undefined>;
-
-function getSizeStyles(sizeConfig: IconButtonConfig['size'][IconButtonSize], theme: ThemeFn) {
-  const { spacing, iconSize } = sizeConfig;
-  return {
-    [ICON_BUTTON_CSS_VAR_MAP.padding]: theme(`spacing[${spacing}]`),
-    [ICON_BUTTON_CSS_VAR_MAP.iconSize]: theme(`sizing.icon.${iconSize}`),
-  };
-}
-
-function getIconButtonStyles(iconButton: IconButtonConfig, theme: ThemeFn) {
-  const defaultSize = iconButton.size[iconButton.defaults.size];
-  const variables = getSizeStyles(defaultSize, theme);
-
-  /** Assign variables to configurable properties and fallback with default value */
-  const defaultStyles = {
-    padding: getVar(ICON_BUTTON_CSS_VAR_MAP, 'padding', variables),
-  };
-
-  const css: CssStyleObject = {
-    [`.uds-icon-button`]: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      ...defaultStyles,
-    },
-    ['.uds-icon-button .uds-button-icon']: {
-      width: getVar(ICON_BUTTON_CSS_VAR_MAP, 'iconSize', variables),
-      height: getVar(ICON_BUTTON_CSS_VAR_MAP, 'iconSize', variables),
-    },
-  };
-
-  // Generate styles for each size
-  for (const [size, sizeConfig] of entries(iconButton.size)) {
-    css[`.uds-icon-button-${size}`] = getSizeStyles(sizeConfig, theme);
-  }
-
-  return css as IconButtonClassMap;
-}
-
-function getTailwindIconButtonStyles(iconButton: IconButtonConfig, theme: ThemeFn) {
-  return getIconButtonStyles(iconButton, theme) as CssStyleObject;
-}
-
-export { getIconButtonStyles, getTailwindIconButtonStyles };

package/src/tailwind/components/getIconStyles.ts

@@ -1,13 +0,0 @@
-import type { CssStyleObject } from './types';
-
-/**
- * Generates icon styles for light/dark mode using CSS variables
- */
-function getIconStyles() {
-  return {
-    '.uds-light-mode-icon': { display: 'var(--uds-light-mode-icon, inline)' },
-    '.uds-dark-mode-icon': { display: 'var(--uds-dark-mode-icon, none)' },
-  } as CssStyleObject;
-}
-
-export { getIconStyles };

package/src/tailwind/components/getInputStyles.ts

@@ -1,20 +0,0 @@
-import type { CssStyleObject } from './types';
-
-/**
- * Generates input styles
- */
-function getInputStyles() {
-  return {
-    ['.uds-input[list]::-webkit-calendar-picker-indicator']: {
-      blockSize: '100% !important', // Fix datalist dropdown arrow positioning.
-    },
-    ['.uds-input::-webkit-datetime-edit']: {
-      color: `rgb(var(--uds-foreground-color-muted))`,
-    },
-    ['.uds-input::-webkit-calendar-picker-indicator']: {
-      display: 'none',
-    },
-  } as CssStyleObject;
-}
-
-export { getInputStyles };