Root
<esp-root>
Root container for the Espalier design system.
Provides the full design-token pipeline — colors, scales, and fonts — to every descendant component. All tokens are JS-computed from a pair of Base64-encoded theme objects and emitted as CSS custom properties on the host element.
Theme API
Supply a light-theme and/or dark-theme attribute containing
a Base64-encoded JSON partial theme. Fields you omit fall
back to built-in defaults. Switch between them with scheme.
Slots
<esp-root> has a slot:
Default
Place Espalier components and content here.
Attributes
<esp-root> has the following attributes:
light-theme
light-theme has a default value of "".
Base64-encoded JSON partial theme for the light scheme.
Only fields you wish to override need to be present — all others inherit from the built-in light defaults.
dark-theme
dark-theme has a default value of "".
Base64-encoded JSON partial theme for the dark scheme.
font-css-root
font-css-root has a default value of "/css/fonts/".
Root path for locally-cached font CSS files used by
<esp-font-picker> to load font previews.
The directory must contain the individual font CSS files
generated by npm run build-fonts. These files must be
served at stable, predictable paths (no filename hashing)
because the picker constructs URLs by font family name.
font-definitions-url
font-definitions-url has a default value of "".
Full URL to the font-definitions.json catalog used by
<esp-font-picker>.
When set, the picker fetches from this URL instead of
{fontCSSRoot}font-definitions.json. This allows the JSON
to be served through a cache-busting asset pipeline while
the individual font CSS files remain at stable paths.
scheme
scheme has a default value of "light".
The active color scheme.
Light scheme
Dark scheme