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/
  tokens/           ← source JSON files
  dist/
    tokens.css      ← CSS custom properties (:root { --color-brand-primary: … })
    index.js        ← JS/TS named exports
    tailwind.js     ← Tailwind preset (extends theme with token values)

Setup in your app

Import the CSS file in your root layout, and extend Tailwind with the preset:

// globals.css
@import '@cassa/tokens/dist/tokens.css';

// tailwind.config.js
import tokenPreset from '@cassa/tokens/tailwind';

export default {
  content: ['./app/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],
  presets: [tokenPreset],
};

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 */
@import '@cassa/tokens/dist/tokens.css';

: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.