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:

// Use Tailwind utilities
<div className="bg-brand-500 text-white">Content</div>

// Use CSS variables for custom values
<div className="bg-[var(--color-primary)]">Content</div>

// Use React components
<Button tone="brand" variant="gradient">Click me</Button>

❌ DON'T:

// Don't use deprecated utility classes
<div className="igny8-bg-blue">Content</div>

// Don't hardcode colors
<div className="bg-[#0693e3]">Content</div>

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:

Design tokens from tokens.css
Tailwind utilities (bg-brand-500, text-brand-500)
React components (Button, Badge, Card)

See ../MIGRATION_GUIDE.md for complete migration guide.

README.md