@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/fixtures/macros/typesToConstants.ts

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

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

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

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

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

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

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

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

package/src/providers/ColorModeProvider.tsx

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

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

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