Semantic Tokens

Semantic tokens express intent rather than raw values. They reference primitive tokens via var(), so theming only requires redefining this layer — not touching component code.

Import in your stylesheet:

@import '@latty-ds/tokens/semantic.css';

Or generate them at runtime with your own color palette:

import { configure } from '@latty-ds/tokens/configure';

configure({ colors: { primary: '#6366f1' } });

TextForeground / text colors. Use these instead of raw color steps for typography.

BackgroundSurface and fill colors for layouts, cards, and status regions.

BorderStroke colors for inputs, dividers, and focus rings.

InteractiveHover and active state backgrounds for buttons and clickable elements.