Philosophy

Sisyphos UI does not ship a theme provider. Every token is a plain CSS variable on :root. You can override it with a style attribute, a stylesheet, or a <link> tag. No React context, no cascading re-renders, no runtime cost.

applyTheme

For cases where you want to flip the theme from JavaScript (e.g. a user-selected brand color), import the applyTheme helper:

snippet.tsxtsx

import { applyTheme } from "@sisyphos-ui/ui";

applyTheme({
  colors: {
    primary: "#0284c7",   // swap the brand color
    success: "#16a34a",
  },
  borderRadius: { md: 6 },   // tighter corners
  spacing: { md: 14 },        // looser spacing
});

applyTheme writes the CSS variables to document.documentElement. All components pick up the change instantly — no re-render required.

CSS override

Prefer declarative theming? Set the variables directly in your stylesheet:

app/globals.csscss

:root {
  --sisyphos-color-primary: #0284c7;
  --sisyphos-color-success: #16a34a;
  --sisyphos-radius-md: 6px;
  --sisyphos-spacing-md: 14px;
}

Token reference

Every component reads from this token pool. Any variable with the --sisyphos-* prefix is overridable.

Colors

Each semantic color has six shades: base, light, lighter, dark, darker, contained.

snippet.csscss

--sisyphos-color-primary: #ff7022;
--sisyphos-color-primary-light, -lighter, -dark, -darker, -contained;

--sisyphos-color-success: #22c55e;
--sisyphos-color-error:   #fb3748;
--sisyphos-color-warning: #ffab00;
--sisyphos-color-info:    #00b8d9;

/* Surfaces */
--sisyphos-color-neutral: #f9fafb;
--sisyphos-color-neutral-light, -lighter, -dark, -darker;
--sisyphos-color-border:  #c4cdd5;

Spacing & radius

snippet.csscss

--sisyphos-spacing-xxs: 4px;
--sisyphos-spacing-xs:  8px;
--sisyphos-spacing-s:   10px;
--sisyphos-spacing-md:  16px;
--sisyphos-spacing-lg:  24px;
--sisyphos-spacing-xl:  32px;
--sisyphos-spacing-2xl: 40px;
--sisyphos-spacing-3xl: 64px;

--sisyphos-radius-xxs: 4px;
--sisyphos-radius-xs:  6px;
--sisyphos-radius-s:   8px;
--sisyphos-radius-md:  12px;
--sisyphos-radius-lg:  16px;
--sisyphos-radius-xl:  24px;
--sisyphos-radius-full: 9999px;

Typography

snippet.csscss

--sisyphos-font-family: "Manrope", system-ui, sans-serif;
--sisyphos-font-size-xs:   10px;
--sisyphos-font-size-sm:   12px;
--sisyphos-font-size-md:   14px;
--sisyphos-font-size-base: 16px;
--sisyphos-font-size-lg:   18px;
--sisyphos-font-size-h3:   24px;
--sisyphos-font-size-h2:   32px;
--sisyphos-font-size-h1:   40px;
--sisyphos-font-size-hero: 48px;

Scoped themes

Variables cascade, so you can scope a theme to any DOM subtree. Useful for preview panes, settings dialogs, or multi-brand dashboards:

snippet.tsxtsx

<section style={{ "--sisyphos-color-primary": "#0ea5e9" } as React.CSSProperties}>
  <Button>Uses sky-blue primary</Button>
</section>