# Design Tokens & Styles This directory contains the centralized design token system and legacy compatibility styles. ## Files - `tokens.css` - **Single source of truth** for all design tokens (colors, gradients, shadows) - `igny8-colors.css` - Legacy compatibility file (deprecated - use tokens.css instead) - `global.css` - Global base styles ## Design Tokens (`tokens.css`) All design tokens use plain naming (no "igny8" prefix): ### Color Tokens - `--color-primary` - Primary brand blue (#0693e3) - `--color-primary-dark` - Primary dark variant (#0472b8) - `--color-success` - Success green (#0bbf87) - `--color-warning` - Warning amber (#ff7a00) - `--color-danger` - Danger red (#ef4444) - `--color-purple` - Purple accent (#5d4ae3) ### Usage **✅ DO:** ```tsx // Use Tailwind utilities
Content
// Use CSS variables for custom values
Content
// Use React components ``` **❌ DON'T:** ```tsx // Don't use deprecated utility classes
Content
// Don't hardcode colors
Content
``` ## Legacy File (`igny8-colors.css`) ⚠️ **DEPRECATED** - This file is maintained for backward compatibility only. - Legacy variable aliases (`--igny8-*` → `--color-*`) - Active utility classes (`.igny8-table-*`, `.igny8-header-metric-*`) - Deprecated utility classes (marked - do not use in new code) See `MIGRATION_GUIDE.md` for migration instructions. ## Migration All new code should use: 1. Design tokens from `tokens.css` 2. Tailwind utilities (`bg-brand-500`, `text-brand-500`) 3. React components (`Button`, `Badge`, `Card`) See `../MIGRATION_GUIDE.md` for complete migration guide.