kimtth Goal: consistent, themeable UI without per-component drift.
Use for:
- standardizing spacing, color, and typography across a project
- building reusable components with controlled variants
- replacing scattered ad hoc classes with a system
Workflow:
- Define tokens in the theme: color, spacing, radius, type scale.
- Drive components from tokens, not hard-coded values.
- Encode variants with a variants helper (e.g. cva).
- Centralize class composition; merge conflicts predictably.
- Support theming via CSS variables for light/dark.
- Document the allowed variants and when to use each.
Patterns:
- semantic token names (bg-surface, text-muted) over raw scales
- variant maps for size/intent/state
- class-merge utility to resolve overrides
- CSS variables for runtime theme switching
Rules:
- no magic numbers; use the spacing and type scale
- keep variants finite and intentional
- avoid duplicating tokens across components
- a new visual value belongs in the theme, not inline