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

package/src/tailwind/theme/getFontFamilyTheme.ts

@@ -1,28 +0,0 @@
-import { fontAliases, textVariants } from '@yahoo/uds/fixtures';
-import { FONT_FAMILY_PREFIX } from '@yahoo/uds/tokens';
-import type { ThemeConfig } from 'tailwindcss/types/config';
-
-import { textVariantsSafe } from '../components/getResponsiveTextStyles';
-
-export function getFontFamilyTheme(): ThemeConfig['fontFamily'] {
-  /** Global font family aliases i.e. font-sans, font-serif, etc */
-  const globalFonts = Object.fromEntries(
-    fontAliases.map((fontAlias) => {
-      const cssVar = `var(--${FONT_FAMILY_PREFIX}-${fontAlias})` as const;
-      return [fontAlias, cssVar] as const;
-    }),
-  );
-
-  /** Text variant font family assignments i.e. font-display1 */
-  const textVariantFonts = Object.fromEntries(
-    textVariants.map(textVariantsSafe).map((textVariant) => {
-      const cssVar = `var(--${FONT_FAMILY_PREFIX}-${textVariant})` as const;
-      return [textVariant, cssVar] as const;
-    }),
-  );
-
-  return {
-    ...globalFonts,
-    ...textVariantFonts,
-  };
-}

package/src/tailwind/tsMorph.ts

@@ -1 +0,0 @@
-export * from '../../scripts/utils/tsMorph';

package/src/tailwind/uds.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/tailwind/utils/addFontsPlugin.ts

@@ -1,17 +0,0 @@
-import type { FontID } from '@yahoo/uds/tokens';
-// Tailwind 3.x poorly supports ESM modules so we must include the .js extension when importing.
-import plugin from 'tailwindcss/plugin.js';
-
-import { addFontFaceDeclarations } from '../base/addFontFaceDeclarations';
-import type { TailwindPluginFns } from '../base/types';
-
-export interface AddFontsPluginOptions {
-  fontIds: FontID[];
-}
-export const addFontsPlugin = plugin.withOptions(function addFontsPlugin({
-  fontIds,
-}: AddFontsPluginOptions) {
-  return function ({ addBase }) {
-    addFontFaceDeclarations(fontIds, { addBase } as TailwindPluginFns);
-  };
-});

package/src/tailwind/utils/getColorModeStyles.ts

@@ -1,21 +0,0 @@
-import type { WebTokens } from '@yahoo/uds/tokens/parseTokens';
-
-export function getColorModeStyles(tokens: WebTokens) {
-  const lightStyles = {
-    colorScheme: 'light',
-    '--uds-light-mode-icon': 'inline',
-    '--uds-dark-mode-icon': 'none',
-    ...tokens.colorMode.light._vars,
-  };
-  const darkStyles = {
-    colorScheme: 'dark',
-    '--uds-light-mode-icon': 'none',
-    '--uds-dark-mode-icon': 'inline',
-    ...tokens.colorMode.dark._vars,
-  };
-
-  return {
-    light: lightStyles,
-    dark: darkStyles,
-  };
-}

package/src/tailwind/utils/getFontFaceDeclarations.ts

@@ -1,12 +0,0 @@
-import type { FontDeclarationItemConfig, FontID } from '@yahoo/uds/tokens';
-import { FONT_DECLARATIONS_MAP } from '@yahoo/uds/tokens';
-
-/**
- * Get all font face declarations for a given set of font IDs.
- */
-export function getFontFaceDeclarations(fontIds: FontID[]): FontDeclarationItemConfig[] {
-  return fontIds.flatMap((fontID) => {
-    const { declarations, fontFamily } = FONT_DECLARATIONS_MAP[fontID];
-    return declarations.map((declaration) => ({ fontFamily, fontDisplay: 'swap', ...declaration }));
-  });
-}

package/src/tailwind/utils/getFontStyles.ts

@@ -1,38 +0,0 @@
-import type { FontConfig } from '@yahoo/uds/tokens';
-import { entries, FONT_DECLARATIONS_MAP, FONT_FAMILY_PREFIX, fromEntries } from '@yahoo/uds/tokens';
-
-/**
- * Tailwind does not automatically escape font names for you.
- * If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
- * @link https://tailwindcss.com/docs/font-family#customizing-your-theme:~:text=Tailwind%20does%20not%20automatically
- */
-function escapeFontFamilyName(fontFamily: string) {
-  return `"${fontFamily}"`;
-}
-
-/**
- * Return CSS variables object based on font config.
- * i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
- *
- * @example
- * // 1. Use return value in style prop of an html element to assign font variables at runtime
- *
- * const fontVars = getFontStyles(fontConfig);
- * <body style={fontVars}> {...} </body>
- *
- * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
- *
- * const fontVars = getFontStyles(fontConfig);
- * addRootVariables(fontVars);
- *
- */
-export function getFontStyles(fontConfig: FontConfig) {
-  return fromEntries(
-    entries(fontConfig).map(([fontAlias, fontID]) => {
-      const cssVar = `--${FONT_FAMILY_PREFIX}-${fontAlias}` as const;
-      const font = FONT_DECLARATIONS_MAP[fontID];
-      const value = [font.fontFamily, ...font.fallback].map(escapeFontFamilyName).join(', ');
-      return [cssVar, value] as const;
-    }),
-  );
-}

package/src/tailwind/utils/getMotionStyles.ts

@@ -1,35 +0,0 @@
-import { motionSpringConfigOptions } from '@yahoo/uds/fixtures';
-import type { MotionConfig, MotionCssVar } from '@yahoo/uds/tokens';
-import { entries, fromEntries } from '@yahoo/uds/tokens';
-
-import { getMotionVar } from '../../utils/getMotionVar';
-
-/**
- * Return CSS variables object based on the motion config.
- * i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
- *
- * @example
- * // 1. Use return value in style prop of an html element to assign motion variables at runtime
- *
- * const motionVars = getMotionStyles(motionConfig);
- * <body style={motionVars}> {...} </body>
- *
- * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
- *
- * const motionVars = getMotionStyles(motionConfig);
- * addRootVariables(motionVars);
- *
- */
-export function getMotionStyles(motionConfig: MotionConfig) {
-  const motionEntries = entries(motionConfig).flatMap(([variant, speeds]) =>
-    entries(speeds).flatMap(([speed, config]) => {
-      return motionSpringConfigOptions.map((control) => {
-        const cssVar = getMotionVar({ variant, speed, control });
-        // Keep the unit wrapped in quotes to avoid tailwind from adding units (px/rem)
-        return [cssVar, `${config[control]}`];
-      });
-    }),
-  ) as [MotionCssVar, string][];
-
-  return fromEntries(motionEntries);
-}

package/src/tailwind/utils/getScaleModeStyles.ts

@@ -1,23 +0,0 @@
-import type { ScaleMode } from '@yahoo/uds/tokens';
-import type { WebTokens } from '@yahoo/uds/tokens/parseTokens';
-
-function getStylesForScaleMode(config: WebTokens['scaleMode'][ScaleMode]) {
-  return {
-    ...config.borderRadius._vars,
-    ...config.borderWidth._vars,
-    ...config.avatarSizes._vars,
-    ...config.iconSizes._vars,
-  };
-}
-
-export function getScaleModeStyles(tokens: WebTokens) {
-  return {
-    xSmall: getStylesForScaleMode(tokens.scaleMode.xSmall),
-    small: getStylesForScaleMode(tokens.scaleMode.small),
-    medium: getStylesForScaleMode(tokens.scaleMode.medium),
-    large: getStylesForScaleMode(tokens.scaleMode.large),
-    xLarge: getStylesForScaleMode(tokens.scaleMode.xLarge),
-    xxLarge: getStylesForScaleMode(tokens.scaleMode.xxLarge),
-    xxxLarge: getStylesForScaleMode(tokens.scaleMode.xxxLarge),
-  };
-}

package/src/tailwind/utils/getShadowPresetValues.ts

@@ -1,133 +0,0 @@
-import { shadowOffsetMap, shadowSpreadRadiusMap, spacingMap } from '@yahoo/uds/fixtures';
-import type {
-  AlwaysPaletteAlias,
-  ShadowPreset,
-  ShadowType,
-  UniversalTokensConfig,
-} from '@yahoo/uds/tokens';
-import { entries } from '@yahoo/uds/tokens';
-
-const ALWAYS_AS_RGB = { black: '0 0 0', white: '255 255 255' } as Record<
-  AlwaysPaletteAlias,
-  string
->;
-
-/**
- * Generate a single shadow value from a shadow preset configuration
- *
- * @param preset - The shadow preset configuration
- * @param index - Optional index for numbered shadows (2-5)
- * @param shadowType - The type of shadow (drop or inset)
- * @returns A CSS box-shadow value string
- */
-function getShadowLayerValue({
-  preset,
-  prefix,
-  shadowType,
-}: {
-  preset: ShadowPreset;
-  prefix?: string;
-  shadowType: ShadowType;
-}) {
-  // Generate a prefix for the shadow layer or use an empty string if it's the first shadow
-  // Use different variable prefixes for regular vs inset shadows
-  // Note: We still use the same color variables for both types
-  const varPrefix = `--uds-${shadowType}-shadow-`;
-
-  // For colors, we always use the shared color variables
-  const isPaletteColor = preset.color?.type === 'palette';
-  const isAlwaysColor = preset.color?.type === 'always';
-
-  let shadowColor = `var(--uds-${isPaletteColor ? 'shadow' : 'spectrum'}-color-${preset?.color?.value})`;
-
-  // We need white in rgb format for the shadow to be visible
-  if (isAlwaysColor) {
-    shadowColor = ALWAYS_AS_RGB[preset.color.value as AlwaysPaletteAlias];
-  }
-
-  const defaultColor = `var(${varPrefix}${prefix ? `${prefix}-` : ''}color, ${shadowColor})`;
-
-  // Define shadow properties in a structured way
-  const shadowProps = [
-    `${shadowOffsetMap[preset.offsetX]}px`,
-    `${shadowOffsetMap[preset.offsetY]}px`,
-    `${spacingMap[preset.blur]}px`,
-    `${shadowSpreadRadiusMap[preset.spread]}px`,
-  ] as const;
-
-  // Generate CSS variables with fallbacks, using the appropriate prefix
-  const cssValues = shadowProps.map((value) => value).join(' ');
-
-  // Add the color/opacity component
-  // Note: We use the appropriate variable prefix for opacity, but keep the shared color variables
-  const colorValue = `rgb(${defaultColor} / var(${varPrefix}${prefix ? `${prefix}-` : ''}opacity, ${
-    Number(preset.opacity) / 100
-  }))`;
-
-  // Return the final value with inset keyword if needed
-  // The 'inset' keyword must be at the beginning of the shadow value for CSS to recognize it as an inset shadow
-  return `${shadowType === 'inset' ? 'inset ' : ''}${cssValues} ${colorValue}`;
-}
-
-/**
- * Generate shadow values from the shadow config presets.
- * Each size can have multiple shadow presets that are combined into a single box-shadow.
- *
- * For regular shadows:
- * - Uses the outer shadow configuration from the shadow config
- * - Uses CSS variables with the --uds-shadow-* prefix for shadow properties
- * - The first shadow uses default variable names, subsequent shadows are numbered (e.g. --uds-shadow-2-*)
- * - Shadow colors are scoped to the element, allowing for instance-specific colors
- *
- * For inset shadows:
- * - Uses the inner shadow configuration from the shadow config
- * - Uses CSS variables with the --uds-inset-shadow-* prefix for shadow properties
- * - Adds the 'inset' keyword to each shadow value
- * - Shadow colors are scoped to the element, allowing for instance-specific colors
- *
- * This approach ensures that both regular and inset shadows use the correct CSS variables
- * set by the shadow utilities, while allowing for instance-specific color customization.
- * The separation of variable namespaces allows both shadow types to be used together on the same element.
- *
- * When both shadow and inset-shadow utilities are used together on an element,
- * they combine to create a box-shadow with both outer and inner shadows.
- *
- * @returns A record of shadow values by size (xs, sm, md, etc.)
- */
-function getShadowPresetValues({
-  config,
-  shadowType,
-}: {
-  config: UniversalTokensConfig;
-  shadowType: ShadowType;
-}) {
-  const presets = config?.shadow?.[shadowType];
-
-  // Bail fast if no presets
-  if (!presets) {
-    return {};
-  }
-
-  const result: Record<string, string> = {};
-
-  // Process shadows
-  entries(presets).forEach(([key, presetArray]) => {
-    // Special case for none - always use transparent shadow to avoid breaking combined box-shadows
-    if (key === 'none') {
-      result[`--uds-${shadowType}-shadow-${key}`] = '0 0 transparent';
-      return;
-    }
-
-    const shadowValues = presetArray.map((preset, index) =>
-      getShadowLayerValue({ preset, prefix: index > 0 ? `${index + 1}` : undefined, shadowType }),
-    );
-
-    // Join the shadow values with the appropriate separator
-    // For inset shadows, we ensure each shadow has the 'inset' keyword
-    result[`--uds-${shadowType}-shadow-${key}`] = `${shadowValues.join(', ')}`;
-  });
-
-  return result;
-}
-
-export { getShadowLayerValue, getShadowPresetValues };

package/src/tailwind/utils/getShadowStyles.ts

@@ -1,26 +0,0 @@
-import type { ShadowType, UniversalTokensConfig } from '@yahoo/uds/tokens';
-import { entries, fromEntries, UDS_PREFIX } from '@yahoo/uds/tokens';
-
-function getShadowStyles({
-  config,
-  shadowType,
-}: {
-  config: UniversalTokensConfig;
-  shadowType: ShadowType;
-}) {
-  const shadowTypeConfig = config.shadow[shadowType];
-
-  const tuple = entries(shadowTypeConfig).map(([shadowVariant]) => {
-    return [
-      `.uds-${shadowType}-shadow-${shadowVariant}`,
-      {
-        [`--uds-${shadowType}-shadow`]: `var(--${UDS_PREFIX}-${shadowType}-shadow-${shadowVariant})`,
-        boxShadow: `var(--${UDS_PREFIX}-drop-shadow, 0 0 transparent), var(--${UDS_PREFIX}-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)`,
-      },
-    ] as const;
-  });
-
-  return fromEntries(tuple);
-}
-
-export { getShadowStyles };

package/src/tailwind/utils/getShadowVars.ts

@@ -1,40 +0,0 @@
-import type { ShadowType, ShadowVariant, UniversalTokensConfig } from '@yahoo/uds/tokens';
-import { fromEntries, UDS_PREFIX } from '@yahoo/uds/tokens';
-
-function getShadowVarsForType<T extends ShadowType>(
-  shadowType: T,
-  udsConfig: UniversalTokensConfig,
-) {
-  const shadowTypeConfig = udsConfig.shadow?.[shadowType];
-
-  // Return empty object if no config for this shadow type
-  if (!shadowTypeConfig) {
-    return {};
-  }
-
-  const tuple = Object.entries(shadowTypeConfig).map(([shadowVariant, shadowPreset]) => {
-    const value = shadowPreset
-      .map((preset) => {
-        const colorVar =
-          preset.color.type === 'palette'
-            ? `--${UDS_PREFIX}-shadow-color-${preset.color.value}`
-            : `--${UDS_PREFIX}-spectrum-color-${preset.color.value}`;
-        const value = `${preset.offsetX} ${preset.offsetY} ${preset.blur} ${preset.spread} var(${colorVar})`;
-        return shadowType === 'inset' ? `inset ${value}` : value;
-      })
-      .join(',');
-    return [
-      `--${UDS_PREFIX}-${shadowType}-shadow-${shadowVariant as ShadowVariant}`,
-      value,
-    ] as const;
-  });
-
-  return fromEntries(tuple);
-}
-
-export function getShadowVars(udsConfig: UniversalTokensConfig) {
-  return {
-    ...getShadowVarsForType('drop', udsConfig),
-    ...getShadowVarsForType('inset', udsConfig),
-  };
-}

package/src/tailwind/utils/index.ts

@@ -1,9 +0,0 @@
-export { getBaseTextVars, getResponsiveTextStyles } from '../components/getResponsiveTextStyles';
-export * from './addFontsPlugin';
-export * from './getColorModeStyles';
-export * from './getFontFaceDeclarations';
-export * from './getFontStyles';
-export * from './getMotionStyles';
-export * from './getScaleModeStyles';
-export * from './getShadowPresetValues';
-export * from './getShadowStyles';