VB Design System

<theme-catalog>

Browse and apply curated public design-system token sets — Material, IBM Carbon, Salesforce Lightning, GOV.UK, Atlassian, Tailwind, Bootstrap, Catppuccin Mocha — to a preview scope.

Overview

The <theme-catalog> component renders a tile grid of curated public design-system token sets — Material, IBM Carbon, Salesforce Lightning, GOV.UK, Atlassian, Tailwind, Bootstrap, and Catppuccin Mocha. Clicking a tile fetches that entry's DTCG tokens.json, runs it through the same deserializer <theme-import> uses, and applies the resulting custom properties to a target preview scope.

It is the curated quick-start companion to theme-import: theme-import handles ad-hoc paste/file/URL imports, while theme-catalog gives visitors a one-click way to try a known system. Tokens land on the host's preview scope (default #preview), never on :root, so trying a catalog entry never leaks into the live site.

  • primary
  • secondary
  • accent
  • success
  • border

Sample content in the preview scope — apply a set above and the swatches, buttons, surface, and text recolor. Tokens land here as inline custom properties, never on the live page.

Attributes

Attribute Type Default Description
target string #preview CSS selector for the scope to apply tokens to. Tokens are written as inline custom properties on this element.
catalog-base string /cdn/themes/catalog Base URL for the catalog files (manifest.json + entry *.tokens.json). Override for hosted contexts where the catalog is served from a different path.

How it works

On connect, theme-catalog fetches manifest.json from its catalog base and renders one tile per entry, showing the system name, summary, license, and tags. Clicking a tile's Apply button fetches that entry's .tokens.json, deserializes it, and writes each resulting custom property onto the target element. The result panel reports how many tokens were applied, shows the entry's attribution line, and lists any ignored tokens in a collapsible details panel.

Events

Event Detail Description
theme-catalog:applied { id, applied, ignored, tokens, source } Fires after a catalog entry is applied. source is always catalog.
theme-catalog:error { id, error, phase } Fires when fetching, parsing, or applying a catalog entry fails.

Design system workflow

Use theme-catalog alongside <theme-import> and <theme-export>:

  1. Start from a known system with theme-catalog to see how a curated set of tokens looks against your components.
  2. Refine further with theme-import if you have a custom or edited tokens.json.
  3. Export the result with theme-export once you've settled on a direction.

Accessibility

  • Each catalog tile is an <article> inside a role="list" grid, with a labelled <button> (aria-label="Apply <name> tokens").
  • Apply results, attribution, and ignored-token counts are announced via an <output> element.
↑