Theme reference

At a glance

Live component preview

Wrapped in themePreviewStyle so the canvas matches marketing and doc previews. Toggle theme and mode above to compare catalog themes and saved custom themes.

Canvas: Three-stop linear gradient from canvas → secondary → tertiary (typical dashboard page chrome).

Surface roles

How ink, surface, canvas, and accent relate on a typical page — rendered with the active theme tokens.

Color palette

Injected on each component via themeStyleVars(theme, mode).

Light vs dark

Core colors for both modes — use the mode toggle to preview components; this table showsraw token values from sites.ts.

Typography

Shape

Motion

Easing and durations drive buttons, panels, tabs, and accordion height transitions.

Control scale

Minimum heights and type sizes from recipes/button.ts and recipes/field.ts for this theme.

Recipe modules

Shared branches apply to every theme; dedicated files override chrome for catalog moods.

Usage in your app

Pass theme and mode on each component — no global globals.css token block required after copying core once.

import { Button } from "@/app/ui/button";
import { themeStyleVars } from "@/app/ui/core/themes";

<div style={themeStyleVars("atelier", "light")}>
  <Button theme="atelier" mode="light" variant="primary">
    Save
  </Button>
</div>

CSS variables (light)

Full set written by themeStyleVars("atelier", "light").