Navigation

theme-export

Collects VB custom property overrides from a scope and emits them as a theme.css block or JSON. The assembly glue for the Theme Composer.

Overview

The <theme-export> component turns a page full of editable specimens into a downloadable theme. It scans a scope (default :root) for VB custom property overrides and emits either a :root { ... } CSS block or a flat JSON object.

When paired with editable type-specimen, spacing-specimen, token-specimen, and semantic-palette components, it forms the backbone of the Theme Composer: specimens write overrides, theme-export collects them.

Edit any token below to see it appear in the export above.

Attributes

Attribute	Type	Default	Description
`scope`	string	`:root`	CSS selector for the element to read overrides from.
`selector`	string	`:root`	Selector written in the emitted CSS output.
`include`	string	All VB prefixes	Comma-separated prefixes to collect: `--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-`.
`format`	enum	`css`	`css` or `json`.
`label`	string	—	Optional heading label.
`live`	boolean	—	Re-scan whenever an editable specimen on the page fires a `:change` event.

Scoping to a Subtree

Pass scope and selector to collect overrides from a subtree and emit them targeting a different selector — useful for building theme stylesheets from a preview block.

JSON Format

Switch to format="json" for a design tokens pipeline.

Events

Event	Detail	Description
`theme-export:change`	`{ output, format, tokens }`	Fires whenever the output is regenerated.