Theming

Shavin UI ships with 17 curated theme presets out of the box. Each preset bundles an accent color, gray scale family, radius, panel background style, and display/body typography pairing.

When you set an accent color (preset or hex), @shavin/ui dynamically computes a coordinated cluster of WCAG AAA accessible CSS custom properties:

Mount ThemeProvider once (e.g. at the app root, or drop it in bare as a fire-and-forget config step). This is exactly what the Configurator's Copy Theme button emits.

import { ThemeProvider } from "@shavin/ui";

export function App({ children }) {
  return (
    <ThemeProvider
      accentColor="Grass"        // preset name or "#rrggbb"
      grayColor="Slate"
      radius="medium"
      scaling={100}
      panelBackground="solid"
      displayFont="Space Grotesk"
      bodyFont="Inter"
    >
      {children}
    </ThemeProvider>
  );
}

Prefer no wrapper? Override the semantic variables directly — the components pick them up the same way:

:root {
  --accent: 70 167 88;      /* r g b — brand accent */
  --radius-lg: 0.5rem;
  --radius-panel: 0.75rem;
}
.dark {
  --accent: 86 202 106;     /* lighter accent for dark mode */
}

Foundation and semantic tokens are documented under Colors, Radius, and Shadows. Applying a preset name resolves to these same variables via applyAccentColor / applyGrayColor / applyThemePreset (exported for programmatic use).