The theme editor depends on @ragbaz/bazweave-font for shared font specimens, so theme examples show the same type vocabulary as the font chooser without copying components. Source templates come from the Articulate universe storefront style editor — role-based typography presets for Display, Heading, Subheading, Body, and Button text.

All 6 Theme Presets​

Compact specimen cards for quick visual comparison. Each uses its own typography palette, font roles, and accent colors.

Interactive Template Deck​

Click a preset card to update the role matrix and inline specimen below.

Role Matrix​

Five font roles map to CSS custom properties at theme-apply time. Each role controls a distinct surface: display headlines, section headings, subheadings, body copy, and button text.

Below is the role map for the technical preset:

The same matrix works for any preset by passing its id as the theme prop:

Surface Specimens​

The full specimen suite previews a theme across five surfaces in one view: prose/article, product card, command/data panel, button set, and form controls.

theme.apply({
  display: "var(--bt-font-display)",
  accent: "#8b6f47",
  suite: "docs + card + form"
});

Try the same suite with a different theme:

theme.apply({
  display: "var(--bt-font-display)",
  accent: "#3b3b4f",
  suite: "docs + card + form"
});

CSS Custom Properties​

When a theme is applied, the buildThemeCssVars(theme) helper produces these CSS custom properties. They drive every specimen and surface above.

Full Workbench​

The workbench combines preset selector, palette color pickers, font role selectors (from a curated list of 12 Google Fonts), and a JSON editor with save/load/copy/export actions.

theme.apply({
  display: "var(--bt-font-display)",
  accent: "#3b3b4f",
  suite: "docs + card + form"
});

Changes made in the workbench update the role matrix and specimen suite beneath it in real time.

Font Integration​

The theme package delegates large font specimens to @ragbaz/bazweave-font/mdx. This avoids duplicating the font display engine while keeping theme and font documentation in sync.

Font Chooser Theme Deck​

The font chooser has its own theme deck with four surface variants: Slate (default), Elegant, Tufte (light/paper variant), and Formal (executive dark).

Click a theme card to see the font specimen update. The font chooser themes are independent from the typography presets — they control the background surface for font previews rather than font role mappings.

Font Families​

Variable Axis Example​

Copyable MDX Example​

This section shows a complete interactive workbench and its import pattern together — the same pattern you would paste into your own MDX page.

theme.apply({
  display: "var(--bt-font-display)",
  accent: "#3b3b4f",
  suite: "docs + card + form"
});

import { ThemeEditorWorkbench } from '@ragbaz/bazweave-theme/mdx';

<ThemeEditorWorkbench active="technical" />

Import Reference​

// Theme presets + interactive workbench
import {
  ThemeEditorWorkbench,
  ThemeEditorTemplateDeck,
  ThemeFontDependencyExample,
  ThemeMdxExample,
  ThemeRoleMatrix,
  ThemeSpecimen,
  ThemeSpecimenSuite,
} from '@ragbaz/bazweave-theme/mdx';

// Font chooser (for integrated specimens)
import {
  FontChooserThemeDeck,
  FontChooserSpecimen,
  FontChooserFamilyMatrix,
  FontChooserAxisExample,
} from '@ragbaz/bazweave-font/mdx';