Reads the live MJ theme (--mj-* custom properties on the document root) and
layers it over SetupStyles(), producing a ComponentStyles that follows the
host's active theme — including dark mode and interactive-state (hover/active/
focus) families — instead of the frozen default palette. This is the Phase 1
theme bridge that gives generated components shell↔content cohesion.
DOM-guarded: in non-DOM environments (Node test harness, SSR) there is no
computed theme to read, so it returns SetupStyles() unchanged. Any individual
token that is absent falls back to its SetupStyles() default, so a page
without MJ tokens loaded also degrades cleanly.
Reading tokens from somewhere other than the DOM
A host without CSS custom properties — React Native is the one that exists — still has the same
--mj-* token VALUES, just not in a stylesheet. Passing a ThemeTokenReader feeds those
values through the identical mapping below, so a native surface and a browser derive
ComponentStyles from one table rather than from two that drift. Nothing about the mapping is
DOM-specific; only the lookup was.
Parameters
Optionalsource: Element|ThemeTokenReader
optional element to read tokens from (defaults to the document root), or a reader
function for hosts that hold their token values outside CSS.
Reads the live MJ theme (
--mj-*custom properties on the document root) and layers it overSetupStyles(), producing aComponentStylesthat follows the host's active theme — including dark mode and interactive-state (hover/active/ focus) families — instead of the frozen default palette. This is the Phase 1 theme bridge that gives generated components shell↔content cohesion.DOM-guarded: in non-DOM environments (Node test harness, SSR) there is no computed theme to read, so it returns
SetupStyles()unchanged. Any individual token that is absent falls back to itsSetupStyles()default, so a page without MJ tokens loaded also degrades cleanly.Reading tokens from somewhere other than the DOM
A host without CSS custom properties — React Native is the one that exists — still has the same
--mj-*token VALUES, just not in a stylesheet. Passing a ThemeTokenReader feeds those values through the identical mapping below, so a native surface and a browser deriveComponentStylesfrom one table rather than from two that drift. Nothing about the mapping is DOM-specific; only the lookup was.