Theming — Podium Tokens and WCL Surfaces

WCL composes Podium (@nike/podium) for primitives and design tokens. WCL adds MUI theme integration and composition-level styling for complex components.

When to use Podium tokens directly

Use Podium CSS custom properties (--pds-*) and Podium components when:

• Building layout, forms, or actions inside a WCL shell (buttons, inputs, text)
• Styling custom module UI that sits beside WCL widgets
• Setting colors on StatusBadge, AccentCard accent stripes, or chart fills

Reference: Podium tokens docs (@nike/podium consumer AGENTS.md / tokens reference).

When WCL provides composition styling

WCL-owned surfaces bake in token usage so consumers do not reimplement:

Surface	Token usage
StatusBadge	--pds-color-* mixes for variant backgrounds
DataTable	Podium table density, filter inputs, pagination
DateRangePicker	Podium field + MUI calendar skinning
SegmentedQuantity	Podium typography tokens via font prop
SimpleHorizontalBarChart	Nike palette bars with Podium text

Override with explicit color / backgroundColor props only when design requires exceptions — prefer variants and tokens first.

MUI theme (useNikeTheme)

useNikeTheme returns an MUI theme aligned with Podium tokens and the active TranslationProvider locale (LTR/RTL). Use for MUI components inside modules that are not covered by a WCL wrapper.

import { useNikeTheme } from '@nike/whisker-component-library';
import { ThemeProvider } from '@mui/material/styles';

const theme = useNikeTheme();
<ThemeProvider theme={theme}>{children}</ThemeProvider>;

Nike fonts CDN

Load Nike Design System fonts from CDN (not bundled):

import { loadNikeFonts, useNikeFonts } from '@nike/whisker-component-library';

// App entry
loadNikeFonts('en-us');

// Or hook in a localized subtree
useNikeFonts(locale);

Match font locale to TranslationProvider locale for CJK and RTL markets.

Extending tokens for WCL-specific UI

For module-specific UI outside WCL components:

1. Use Podium primitives and --pds-* variables first.
2. Do not fork WCL component CSS — wrap in layout and pass token-based overrides.
3. New shared patterns belong in WCL with Storybook + agent docs, not in consumer repos.

Peer dependencies

"@nike/podium": "^1.2.1",
"@mui/material": "^9.1.2",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0"

Import Podium styles in the host per Podium usage.md before rendering WCL.