@vesture/theme-retro
A warm, terracotta-and-serif theme implementing the @vesture/tokens
contract. It exists to prove the theming system actually works for swapping
brands — every @vesture/react component reads from vars.*, never fixed
values, so this package needs nothing but token values to produce a
completely different look.
Usage
import "@vesture/theme-retro/styles.css";
import { retroThemeClass } from "@vesture/theme-retro";
document.documentElement.classList.add(retroThemeClass);Apply the class to document.documentElement (or another true ancestor of
document.body), not an inner <div> — see the
@vesture/react README
for why this matters when components render through portals (Modal, Tooltip,
Popover, DropdownMenu, Toast).
What's different from the default theme
- Warm cream background and terracotta primary color instead of neutral black/white
- Serif display font (
Georgia) for headings - Larger border radius and heavier border widths for a chunkier look
- A bouncier motion easing curve
Every other structural decision — spacing scale, font size scale, line heights — matches the default theme, since components rely on those values being consistent across themes for layout to hold.