A thin React wrapper around the CSS-variable theme model — the ergonomic form of the hand-written
<style> + data-sxl-theme-* ceremony (see the "CSS Variables" story). It builds the --sxl-* stylesheet
from light/dark token sets (via buildThemeCSS) and injects it, so the common flow is: render a
workbook, wrap it, pass your brand tokens. It renders no DOM box of its own — when a mode/surface is
pinned or the instance is isolated, those attributes are cloned onto its single child instead.
Remarks
Resolution stays in CSS — this only emits CSS and publishes a TokenThemeContextValue handle.
The default is an override layer over a wrapped component that already defines base + surfaces (Studio /
WorkbookElement); base/surfaces are the from-scratch escape hatch. Nesting is a shallow input merge
(base/parent ⊕ own) — a TokenTheme is flat, so a shallow spread is the correct merge (the one array token
color-series is replaced wholesale by design). There is intentionally no shared-theme prop: put
shared tokens in both modes, or in a parent provider both modes inherit (nesting IS the shared layer).
A thin React wrapper around the CSS-variable theme model — the ergonomic form of the hand-written
<style>+data-sxl-theme-*ceremony (see the "CSS Variables" story). It builds the--sxl-*stylesheet fromlight/darktoken sets (via buildThemeCSS) and injects it, so the common flow is: render a workbook, wrap it, pass your brand tokens. It renders no DOM box of its own — when a mode/surface is pinned or the instance isisolated, those attributes are cloned onto its single child instead.Remarks
Resolution stays in CSS — this only emits CSS and publishes a TokenThemeContextValue handle. The default is an override layer over a wrapped component that already defines base + surfaces (Studio / WorkbookElement);
base/surfacesare the from-scratch escape hatch. Nesting is a shallow input merge (base/parent ⊕ own) — aTokenThemeis flat, so a shallow spread is the correct merge (the one array tokencolor-seriesis replaced wholesale by design). There is intentionally no shared-themeprop: put shared tokens in both modes, or in a parent provider both modes inherit (nesting IS the shared layer).