@classic-homes/theme-tokens
Design tokens for the Classic Theme system, exported as TypeScript constants, CSS custom properties, and WCAG contrast helpers.
Installation
npm install @classic-homes/theme-tokens
Quick Start
import { colors, spacing, tokens } from '@classic-homes/theme-tokens';
const primary = colors.teal[500];
Load the CSS variables once in your app:
@import '@classic-homes/theme-tokens/css';
Exports
| Import | Contents |
|---|---|
@classic-homes/theme-tokens | Token objects: colors, brandColors, statusColors, semanticColors, layoutColors, fontFamily, fontSize, fontWeight, spacing, borderRadius, boxShadow, zIndex, aspectRatio, breakpoints, transition, focusRing, animation, and the combined tokens (also the default export) |
@classic-homes/theme-tokens/contrast | getContrastRatio, getLuminance, meetsWCAGContrast, validateContrast, getContrastTextColor, suggestContrastAdjustment |
@classic-homes/theme-tokens/css | dist/tokens.css: CSS custom properties for the tokens |
Contrast check:
import { getContrastRatio } from '@classic-homes/theme-tokens/contrast';
const ratio = getContrastRatio('#3ba4a7', '#ffffff');