Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
theme-import
Apply a DTCG (Design Tokens Community Group, stable 2025.10) tokens.json file to a preview scope. Sibling of
Overview
The <theme-import> component takes DTCG JSON via paste, file upload, or URL fetch and applies the resulting tokens to a target preview scope. Tokens that don't map to a known VB prefix are surfaced in a collapsible “ignored” panel rather than dropped silently. Round-trip lossless for VB-authored DTCG — $extensions["com.vanilla-breeze"] preserves relative-color expressions, light-dark() literals, and em/% units.
It's the ad-hoc-input sibling of <theme-catalog> (curated public design systems) and <theme-export> (the inverse direction). Together they cover the full DTCG round-trip surface.
Live demo
The Theme Composer page mounts <theme-import> in its aside.
Three input modes
- Paste — drop DTCG JSON into the textarea and click Apply.
- File — native
<input type="file">accepts.json,.tokens,.tokens.json. - URL — fetch from a CORS-permitted host. Useful for grabbing a published token set without saving locally first.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
target |
string (CSS selector) | #preview |
Scope to apply tokens to. Tokens land as inline custom properties on this element. Never writes to :root by default — import experiments don't leak into the live site. |
placeholder |
string | "Paste DTCG tokens.json here…" |
Placeholder text for the paste textarea. |
Events
| Event | Detail | When |
|---|---|---|
theme-import:applied |
{ tokens, applied, ignored, source } |
Tokens applied to the target. source is 'paste' | 'file' | 'url'. |
theme-import:error |
{ error, phase } |
Parse / fetch / apply failure. phase identifies which step. |
What happens to "foreign" DTCG
The deserializer reverses the prefix mapping established by <theme-export format="dtcg">. DTCG tokens that don't map to a known VB CSS-variable prefix land in an “ignored” panel rather than being silently dropped — the user always sees what was lost. The importer never writes new VB token names, only known-good ones from the prefix map. This preserves the “themes override existing tokens only” contract from src/tokens/index.css.
Composite typography unpacking
DTCG's composite typography token bundles font-family, size, weight, line-height, and letter-spacing into one object. VB stores these as separate scalars. On import, composite typography unpacks into --font-{name}, --font-size-{name}, --font-weight-{name}, --line-height-{name}, and --letter-spacing-{name} as appropriate.
Companion components
<theme-catalog>— curated public design systems in a tile grid; one-click apply<theme-export>— export the current scope as DTCG (or CSS, JSON)<theme-picker>— the user-facing theme switcher with per-theme DTCG download links- Theme Library — full list of VB themes with downloads
See also
- DTCG concept page — what DTCG is, what VB supports, the parametric round-trip story
- Theme Composer — the integrated workflow (composes import + catalog + export)