**Approach (brief)** Design a ThemeProvider that stores immutable base tokens and accepts component-level token overrides as shallow maps. Use context with a memoized selector to avoid re-renders; compute merged tokens on demand. For SSR, serialize the resolved tokens into HTML and hydrate deterministically.**Pseudocode (high-level, TypeScript-like)**ts
// token types
type Tokens = { [key: string]: string | number };
type OverrideMap = { [componentId: string]: Tokens };
// provider (React-style)
function ThemeProvider({ baseTokens, overrides, children }) {
// store baseTokens immutable, and overrides as ref to avoid value changes triggering rerenders
const baseRef = useRef(baseTokens);
const overridesRef = useRef(overrides);
overridesRef.current = overrides;
// cache for merged tokens per component id
const mergedCache = useRef<Map<string, Tokens>>(new Map());
function getTokensFor(componentId: string) {
// fast path: cached
if (mergedCache.current.has(componentId)) return mergedCache.current.get(componentId)!;
const override = overridesRef.current[componentId] || {};
const merged = { ...baseRef.current, ...override };
mergedCache.current.set(componentId, merged);
return merged;
}
// context exposes selector to components
const contextValue = useMemo(() => ({ getTokensFor }), []);
return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
}
// component usage (selective subscribe)
function useComponentTokens(componentId: string) {
const { getTokensFor } = useContext(ThemeContext);
// returns stable object; components read only what they need
return useMemo(() => getTokensFor(componentId), [componentId, getTokensFor]);
}
