@cassa/tokens

The foundation of the design system. All visual values — color, spacing, radius, shadow — are defined here and compiled into CSS variables, JavaScript exports, and a Tailwind v4 @theme block.

Outputs

File	Use
dist/tokens.css	Import in globals.css — sets CSS custom properties on :root (+ dark overrides)
dist/theme.css	Tailwind v4 @theme block — maps token variables to color utilities
dist/index.js	JS/TS named exports for runtime token access

Setup

/* globals.css — Tailwind v4, no config file */
@import 'tailwindcss';
@import '@cassa/tokens/css';
@import '@cassa/tokens/theme';

@source '../../../packages';

Using tokens in code

// Tailwind classes (most common)
<div className="bg-brand-primary text-brand-primary-foreground rounded-lg p-4" />

// CSS variables directly
<div style={{ color: 'var(--color-brand-primary)' }} />

// JS imports
import { colorBrandPrimary } from '@cassa/tokens';
<div style={{ color: colorBrandPrimary }} />

Color swatches

brand.primary

brand.secondary

brand.accent

semantic.success

semantic.warning

semantic.error

semantic.info

neutral.900