@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/src/fixtures/macros/typesToConstants.ts

@@ -1,42 +0,0 @@
-import path from 'node:path';
-
-import { Project } from 'ts-morph';
-
-const typesFile = path.resolve(__dirname, '../../tokens/types.ts');
-const iconsTypeFile = path.resolve(__dirname, '../../../../icons/src/types.ts');
-
-const project = new Project();
-const typeFile = project.addSourceFileAtPath(typesFile);
-
-/** Ensure the @yahoo/uds-icons/types are accessible when generating fixtures */
-const iconTypesFile = project.addSourceFileAtPath(iconsTypeFile);
-/** Remove imports from icon types since we are going to manually add to uds types so they are accessible */
-typeFile.getImportDeclarations().forEach((importDeclaration) => {
-  const isIconType = importDeclaration.getModuleSpecifierValue() === '@yahoo/uds-icons/types';
-  if (isIconType) {
-    importDeclaration.remove();
-  }
-});
-/** Add icon types directly to uds types so they are accessible */
-typeFile.addStatements(iconTypesFile.getFullText());
-
-export function typesToConstants<TypeToReturn>(typeName: string): TypeToReturn[] {
-  const typeAlias = typeFile.getTypeAliasOrThrow(typeName);
-  const type = typeAlias.getType();
-
-  // Handle string literal types
-  if (type.isUnion()) {
-    return type
-      .getUnionTypes()
-      .map((t) => t.getLiteralValue() as TypeToReturn)
-      .filter(Boolean);
-  }
-
-  // Handle object types
-  const properties = type.getProperties();
-  if (properties.length > 0) {
-    return properties.map((prop) => prop.getName() as TypeToReturn);
-  }
-
-  throw new Error(`Unsupported type: ${typeName}`);
-}

package/src/fixtures/utils/getScaleModeRamp.ts

@@ -1,48 +0,0 @@
-import type { BorderRadius, BorderWidth, ScaleMode } from '@yahoo/uds/tokens';
-
-import { scaleMode } from '../../tokens/configs/scaleMode';
-import { entries } from '../../utils/entries';
-
-const borderWidthMap = {
-  xSmall: scaleMode.xSmall.borderWidth,
-  small: scaleMode.small.borderWidth,
-  medium: scaleMode.medium.borderWidth,
-  large: scaleMode.large.borderWidth,
-  xLarge: scaleMode.xLarge.borderWidth,
-  xxLarge: scaleMode.xxLarge.borderWidth,
-  xxxLarge: scaleMode.xxxLarge.borderWidth,
-} as Record<ScaleMode, Record<BorderWidth, number>>;
-
-const borderRadiusMap = {
-  xSmall: scaleMode.xSmall.borderRadius,
-  small: scaleMode.small.borderRadius,
-  medium: scaleMode.medium.borderRadius,
-  large: scaleMode.large.borderRadius,
-  xLarge: scaleMode.xLarge.borderRadius,
-  xxLarge: scaleMode.xxLarge.borderRadius,
-  xxxLarge: scaleMode.xxxLarge.borderRadius,
-} as Record<ScaleMode, Record<BorderRadius, number>>;
-
-export function getBorderWidthRamp(scaleMode: ScaleMode) {
-  return entries(borderWidthMap.large).reduce(
-    (prev, [alias, baseBorderWidth]) => {
-      return {
-        ...prev,
-        [alias]: borderWidthMap[scaleMode][alias] - baseBorderWidth,
-      };
-    },
-    {} as Record<BorderWidth, number>,
-  );
-}
-
-export function getBorderRadiusRamp(scaleMode: ScaleMode) {
-  return entries(borderRadiusMap.large).reduce(
-    (prev, [alias, baseBorderRadius]) => {
-      return {
-        ...prev,
-        [alias]: borderRadiusMap[scaleMode][alias] - baseBorderRadius,
-      };
-    },
-    {} as Record<BorderRadius, number>,
-  );
-}

package/src/fixtures/utils/getTailwindAsUdsColors.ts

@@ -1,115 +0,0 @@
-import { createRequire } from 'node:module';
-
-import type tailwindColors from 'tailwindcss/colors';
-import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
-
-import { lightSpectrum } from '../../tokens/configs/spectrum';
-import { SPECTRUM_COLOR_PREFIX } from '../../tokens/consts/cssTokens';
-import type { SpectrumConfig } from '../../tokens/types';
-import { entries } from '../../utils/entries';
-import { mapValues } from '../../utils/mapValues';
-
-/**
- * Bun isn't working with deleting object properties via esm import so we need to use node's require.
- * The object properties are being deleted to avoid logging Tailwind deprecation warnings.
- * https://github.com/nuxt/ui/issues/809#issuecomment-1921810965
- */
-const _require = createRequire(import.meta.url);
-
-const tailwindColorsConfig = _require('tailwindcss/colors.js') as typeof tailwindColors;
-
-type KeyValueMap = Record<string, string>;
-type Rgb = { r: number; g: number; b: number };
-const udsLightColors = spaceSeparatedRgbToRgbObject(lightSpectrum);
-
-function spaceSeparatedRgbToRgbObject(spectrum: SpectrumConfig) {
-  const flatConfig = flattenColorPalette(spectrum);
-  return mapValues<KeyValueMap, (val: string) => Rgb>(flattenColorPalette(flatConfig), (val) => {
-    const [red, green, blue] = val.split(' ');
-    return {
-      r: Number(red),
-      g: Number(green),
-      b: Number(blue),
-    };
-  });
-}
-
-function hexToRgb(hex: string) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
-function getDiffColor(a: Rgb, b: Rgb) {
-  return Math.sqrt(Math.pow(a.r - b.r, 2) + Math.pow(a.g - b.g, 2) + Math.pow(a.b - b.b, 2));
-}
-
-const getClosestUdsColor = (targetColor: string) => {
-  // Convert target color from hex string to RGB values
-  const targetRgb = hexToRgb(targetColor);
-
-  let closestDistance = null;
-  let closestColor: string[] = [];
-
-  for (const [name, color] of entries(udsLightColors)) {
-    const varName = `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${name}))`;
-    const distance = getDiffColor(color, targetRgb!);
-    if (closestDistance === null || distance < closestDistance) {
-      closestDistance = distance;
-      closestColor = [varName];
-    } else if (closestDistance === distance) {
-      closestColor.push(varName);
-    }
-  }
-
-  return closestColor[0];
-};
-
-type DeprecatedTailwindHue = 'lightBlue' | 'warmGray' | 'trueGray' | 'coolGray' | 'blueGray';
-type TailwindHue = Exclude<keyof typeof tailwindColors, DeprecatedTailwindHue>;
-type TailwindHueStep = keyof (typeof tailwindColors)['gray'];
-
-export function getTailwindAsUdsColors() {
-  const tailwindColorsAsUds = {} as Record<TailwindHue, Record<TailwindHueStep, string>>;
-
-  /** Avoid logging deprecation warnings */
-  // @ts-expect-error ts doesn't like deleting properties from an object
-  delete tailwindColorsConfig['lightBlue'];
-  // @ts-expect-error ts doesn't like deleting properties from an object
-  delete tailwindColorsConfig['warmGray'];
-  // @ts-expect-error ts doesn't like deleting properties from an object
-  delete tailwindColorsConfig['trueGray'];
-  // @ts-expect-error ts doesn't like deleting properties from an object
-  delete tailwindColorsConfig['coolGray'];
-  // @ts-expect-error ts doesn't like deleting properties from an object
-  delete tailwindColorsConfig['blueGray'];
-
-  for (const [name, colorOrConfig] of entries(tailwindColorsConfig)) {
-    if (typeof colorOrConfig === 'object') {
-      if (
-        name === 'lightBlue' ||
-        name === 'warmGray' ||
-        name === 'trueGray' ||
-        name === 'coolGray' ||
-        name === 'blueGray'
-      ) {
-        continue;
-      } else {
-        for (const [shade, color] of entries(colorOrConfig)) {
-          if (!tailwindColorsAsUds[name]) {
-            tailwindColorsAsUds[name] = {} as Record<TailwindHueStep, string>;
-          }
-          tailwindColorsAsUds[name][shade] = getClosestUdsColor(color);
-        }
-        continue;
-      }
-    }
-  }
-
-  return tailwindColorsAsUds;
-}

package/src/flags.ts

@@ -1,45 +0,0 @@
-const isNode = typeof process !== 'undefined';
-
-interface FeatureFlags {
-  /**
-   * Setting to true enables a specialized cache for calls to getStyle(),
-   * which can improve performance of component render times.
-   * @default false
-   **/
-  useGetStylesCache?: boolean;
-
-  /**
-   * Setting to true skips twMerge for calls to cx(),
-   * which can improve performance of component render times.
-   * @default false
-   **/
-  skipTailwindMerge?: boolean;
-}
-
-/** UDS feature flags */
-let featureFlags: FeatureFlags = {
-  /**
-   * Note: some env variables are prefixed with "NEXT_PUBLIC_" so NextJS can
-   * inline those values into client code.
-   * See https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables*/
-  useGetStylesCache: isNode
-    ? process.env.NEXT_PUBLIC_UDS_FEATURE_USE_STYLE_CACHE === 'true'
-    : false,
-  skipTailwindMerge: isNode
-    ? process.env.NEXT_PUBLIC_UDS_FEATURE_SKIP_TAILWIND_MERGE === 'true'
-    : false,
-};
-
-/**
- * Sets/overrides feature flags
- * @param flags Flag overrides
- * @returns Updated feature flags
- */
-const updateFeatureFlags = (flags: Partial<FeatureFlags>) => {
-  featureFlags = { ...featureFlags, ...flags };
-  return featureFlags;
-};
-
-const getFeatureFlags = () => featureFlags;
-
-export { type FeatureFlags, getFeatureFlags, updateFeatureFlags };

package/src/hooks/useForkRef.ts

@@ -1,34 +0,0 @@
-import type { MutableRefObject, Ref, RefCallback } from 'react';
-import { useMemo } from 'react';
-
-const setRef = <T>(
-  ref: MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,
-  value: T | null,
-) => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-};
-
-export const useForkRef = <Instance>(
-  ...refs: Array<Ref<Instance> | undefined>
-): RefCallback<Instance> | null => {
-  /**
-   * This will create a new function if the refs passed to this hook change and are all defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
-  return useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null;
-    }
-
-    return (instance) => {
-      refs.forEach((ref) => {
-        setRef(ref, instance);
-      });
-    };
-  }, [refs]);
-};

package/src/hooks/useNestedBorderRadius.ts

@@ -1,138 +0,0 @@
-import type { BorderRadius } from '@yahoo/uds/tokens';
-
-/**
- * 🐍 Generate border radius that works nicely with the parents border-radius
- *
- * When nesting elements with border radius, using the same radius value for both
- * parent and child creates an awkward visual gap in the corners (known as the "snake belly" effect).
- *
- * The solution is to make the inner element's border radius smaller than the parent's
- * by subtracting the spacing between elements. This creates a smooth transition between the nested elements.
- *
- * For common spacing values ('px', 0.5, 1, 2, 2.5, 3, 3.5, 4), we use calc() to subtract the spacing.
- * For other cases, we use simpler Tailwind classes that work well visually.
- *
- * We use CSS max() to ensure the border radius never gets too small, which is especially
- * important for small spacing values. For example, with spacing=2px and a large border radius,
- * the calculated value might become too small to look good. max() ensures we maintain
- * a minimum border radius that scales with the parent's border radius size.
- *
- * @example
- * Parent: border-radius: 8px, spacing: 4px
- * Child: max(2px, calc(8px - 4px)) // Ensures minimum of 2px
- *
- * @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
- */
-
-export const useNestedBorderRadius = ({
-  borderRadius,
-  spacing,
-}: {
-  borderRadius: BorderRadius;
-  spacing?: string;
-}) => {
-  // Handle undefined or zero spacing
-  if (spacing === undefined || spacing === '0') {
-    switch (borderRadius) {
-      case 'xs':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]';
-      case 'sm':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]';
-      case 'md':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]';
-      case 'lg':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]';
-      case 'xl':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]';
-    }
-  }
-
-  if (spacing === 'px' || spacing === '0.5') {
-    switch (borderRadius) {
-      case 'xs':
-        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]';
-      case 'sm':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]';
-      case 'md':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]';
-      case 'lg':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]';
-      case 'xl':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]';
-    }
-  }
-
-  if (spacing === '1' || spacing === '1.5') {
-    switch (borderRadius) {
-      case 'xs':
-        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]';
-      case 'sm':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]';
-      case 'md':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]';
-      case 'lg':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]';
-      case 'xl':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]';
-    }
-  }
-
-  if (spacing === '2' || spacing === '2.5') {
-    switch (borderRadius) {
-      case 'xs':
-        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]';
-      case 'sm':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]';
-      case 'md':
-        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]';
-      case 'lg':
-        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]';
-      case 'xl':
-        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]';
-    }
-  }
-
-  if (spacing === '3' || spacing === '3.5') {
-    switch (borderRadius) {
-      case 'xs':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]';
-      case 'sm':
-        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]';
-      case 'md':
-        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]';
-      case 'lg':
-        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]';
-      case 'xl':
-        return '[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]';
-    }
-  }
-
-  if (spacing === '4') {
-    switch (borderRadius) {
-      case 'xs':
-        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]';
-      case 'sm':
-        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]';
-      case 'md':
-        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]';
-      case 'lg':
-        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]';
-      case 'xl':
-        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]';
-    }
-  }
-
-  // Fallback for other spacing values
-  switch (borderRadius) {
-    case 'xs':
-      return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]';
-    case 'sm':
-      return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]';
-    case 'md':
-      return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]';
-    case 'lg':
-      return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]';
-    case 'xl':
-      return '[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]';
-  }
-};

package/src/hooks/useRtl.ts

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react';
-
-interface UseRtlOptions {
-  /** Optional explicit RTL value that takes precedence over detected direction */
-  explicit?: boolean;
-}
-
-/**
- * Gets the current RTL state from document direction
- */
-export const getDocumentDirection = (): boolean => {
-  if (typeof document === 'undefined') {
-    return false;
-  }
-  const direction = getComputedStyle(document.documentElement).direction;
-  return direction === 'rtl';
-};
-
-/**
- * Creates a mutation observer to watch for direction changes
- */
-export const createDirectionObserver = (callback: () => void): MutationObserver => {
-  const observer = new MutationObserver((mutations) => {
-    const hasDirectionChange = mutations.some(
-      (mutation) => mutation.type === 'attributes' && mutation.attributeName === 'dir',
-    );
-
-    if (hasDirectionChange) {
-      callback();
-    }
-  });
-
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['dir'],
-  });
-
-  return observer;
-};
-
-/**
- * Hook to detect RTL context from document direction or explicit override
- * @default reads from document direction
- */
-export const useRtl = (options?: UseRtlOptions): boolean => {
-  const [isRtl, setIsRtl] = useState(getDocumentDirection);
-
-  useEffect(() => {
-    // Handle explicit RTL override
-    if (options?.explicit) {
-      setIsRtl(options.explicit);
-      return;
-    }
-
-    // Watch for direction changes in document
-    const observer = createDirectionObserver(() => {
-      setIsRtl(getDocumentDirection());
-    });
-
-    return () => observer.disconnect();
-  }, [options?.explicit]);
-
-  return isRtl;
-};

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './components';
-export { cva, cx, getStyles, getStylesCacheKeySymbol } from './styles/styler';
-export * from './tokens';
-export type * from './types';

package/src/providers/ColorModeProvider.tsx

@@ -1,21 +0,0 @@
-import type { ColorMode } from '@yahoo/uds/tokens';
-import { DEFAULT_COLOR_MODE } from '@yahoo/uds/tokens';
-import { createContext, useContext } from 'react';
-
-interface ColorModeProviderProps extends React.PropsWithChildren {
-  value?: ColorMode;
-}
-
-const ColorModeContext = createContext<ColorMode>(DEFAULT_COLOR_MODE);
-
-function useColorMode() {
-  return useContext(ColorModeContext);
-}
-
-function ColorModeProvider({ value = DEFAULT_COLOR_MODE, children }: ColorModeProviderProps) {
-  return <ColorModeContext.Provider value={value}>{children}</ColorModeContext.Provider>;
-}
-
-ColorModeProvider.displayName = 'ColorModeProvider';
-
-export { ColorModeContext, ColorModeProvider, type ColorModeProviderProps, useColorMode };

package/src/providers/ScaleModeProvider.tsx

@@ -1,29 +0,0 @@
-import type { ScaleMode } from '@yahoo/uds/tokens';
-import { DEFAULT_SCALE_MODE } from '@yahoo/uds/tokens';
-import { createContext, useContext } from 'react';
-
-interface ScaleModeProviderProps extends React.PropsWithChildren {
-  value?: ScaleMode;
-}
-
-const ScaleModeContext = createContext<ScaleMode>(DEFAULT_SCALE_MODE);
-
-function useScaleMode() {
-  const context = useContext(ScaleModeContext);
-  if (!context) {
-    return DEFAULT_SCALE_MODE;
-  }
-
-  return context;
-}
-
-function ScaleModeProvider({ value, children }: ScaleModeProviderProps) {
-  const scaleMode = useScaleMode();
-  return (
-    <ScaleModeContext.Provider value={value ?? scaleMode}>{children}</ScaleModeContext.Provider>
-  );
-}
-
-ScaleModeProvider.displayName = 'ScaleModeProvider';
-
-export { ScaleModeContext, ScaleModeProvider, type ScaleModeProviderProps, useScaleMode };

package/src/providers/ThemeProvider.tsx

@@ -1,26 +0,0 @@
-import { cx, getStyles } from '../styles/styler';
-import type { ColorMode, ScaleMode } from '../tokens';
-import { DEFAULT_COLOR_MODE, DEFAULT_SCALE_MODE } from '../tokens';
-
-interface ThemeProviderProps extends React.PropsWithChildren {
-  colorMode?: ColorMode;
-  scaleMode?: ScaleMode;
-}
-
-function ThemeProvider({
-  children,
-  colorMode = DEFAULT_COLOR_MODE,
-  scaleMode = DEFAULT_SCALE_MODE,
-}: ThemeProviderProps) {
-  return (
-    <div
-      className={cx('contents', getStyles({ colorMode, scaleMode, backgroundColor: 'primary' }))}
-    >
-      {children}
-    </div>
-  );
-}
-
-ThemeProvider.displayName = 'ThemeProvider';
-
-export { ThemeProvider, type ThemeProviderProps };