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-catalog
Browse and apply curated public design-system token sets (Material 3, IBM Carbon, Salesforce Lightning, GOV.UK, Atlassian, Tailwind, Bootstrap, Catppuccin Mocha). Tile grid; clicking applies the entry's DTCG file to a target preview scope via the same deserializer
Overview
The <theme-catalog> component renders a tile grid of curated public design systems shipped as DTCG token files. Clicking a tile fetches the entry, runs it through the same deserializer <theme-import> uses, and applies the resulting tokens to a target preview scope. Provenance (homepage, source URL, license, attribution) is surfaced after each apply so users always see the credit chain.
It's the quick-start surface alongside <theme-import>, which handles ad-hoc paste / file / URL imports. Both feed the Theme Composer or any preview-scope target.
Live demo
The Theme Composer page mounts <theme-catalog> in its aside.
Catalog entries
Eight vendored systems ship in src/web-components/theme-import/catalog/; copied to dist/cdn/themes/catalog/ at build time. Refresh from upstream sources via npm run sync:tokens (manual; not in CI).
- Material Design 3 — Google Material 3 (Apache-2.0)
- IBM Carbon — Carbon Design System (Apache-2.0)
- Salesforce Lightning — SLDS tokens (BSD-3-Clause)
- GOV.UK — UK government design system (MIT, Open Government Licence v3.0)
- Atlassian — Atlassian Design Tokens (Apache-2.0)
- Tailwind defaults — synthesized from Tailwind's default theme (MIT)
- Bootstrap defaults — synthesized from Bootstrap 5 variables (MIT)
- Catppuccin Mocha — the soothing dark Catppuccin flavor (MIT)
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
target |
string (CSS selector) | #preview |
Scope to apply tokens to. Tokens land as inline custom properties on this element. |
catalog-base |
string (URL) | /cdn/themes/catalog |
Base URL for catalog files (manifest.json + entry .tokens.json). Override for hosted contexts where the CDN lives elsewhere. |
Events
| Event | Detail | When |
|---|---|---|
theme-catalog:applied |
{ id, applied, ignored, tokens, source } |
After an entry is applied to the target scope. |
theme-catalog:error |
{ id, error, phase } |
When fetch / parse / apply fails. |
Companion components
<theme-import>— ad-hoc DTCG import via paste / file / URL<theme-export>— export the current scope as DTCG (or CSS, JSON)<theme-picker>— the user-facing theme switcher; 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, parametric round-trip story
- Theme Composer — the integrated workflow (composes catalog + import + export)