Theming

All visual values come from @cassa/tokens. Change the tokens, change everything.

How it works

Tokens are defined in JSON and compiled by Style Dictionary into three outputs:

packages/tokens/
  src/tokens.json   ← source (light) + tokens.dark.json (dark overrides)
  dist/
    tokens.css      ← CSS custom properties (:root { --color-brand-primary: … })
    theme.css       ← Tailwind v4 @theme block, maps tokens → utilities
    index.js        ← JS/TS named exports

Setup in your app

Tailwind v4 is CSS-first — no tailwind.config.js. Import Tailwind, the token variables, and the theme bridge in your global stylesheet:

/* globals.css */
@import 'tailwindcss';
@import '@cassa/tokens/css';
@import '@cassa/tokens/theme';

/* workspace packages resolve through node_modules symlinks,
   which Tailwind skips — point it at the packages tree */
@source '../../../packages';

Color tokens

Every color maps to a CSS custom property. Override them in your own CSS to rebrand:

brand.primary

--color-brand-primary

brand.secondary

--color-brand-secondary

brand.accent

--color-brand-accent

semantic.success

--color-success

semantic.warning

--color-warning

semantic.error

--color-error

semantic.info

--color-info

Customizing tokens

Override any token in your app's CSS after importing the base tokens:

/* globals.css — after the @import lines above */
:root {
  --color-brand-primary: #7c3aed;    /* your brand color */
  --color-brand-secondary: #6d28d9;
}

All components that use text-brand-primary, bg-brand-primary, etc. will automatically pick up the new value.