@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tailwind/base/addColorModeVars.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,240 @@
+/* -------------------------------------------------------------------------- */
+/*                                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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,20 @@
+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 };