# CSS Migration Guide

This guide documents the migration from legacy `.igny8-*` classes and `--igny8-*` variables to the new standardized design token system.

## Overview

All design tokens are now centralized in `/src/styles/tokens.css` with plain naming (no "igny8" prefix). The legacy `igny8-colors.css` file is maintained for backward compatibility but should not be used in new code.

## Color Token Migration

### CSS Variables

**Before:**
```tsx
<div className="bg-[var(--igny8-blue)]">Content</div>
```

**After:**
```tsx
<div className="bg-[var(--color-primary)]">Content</div>
```

### Complete Variable Mapping

| Legacy Variable | New Token | Usage |
|----------------|-----------|-------|
| `--igny8-blue` | `--color-primary` | Primary brand color |
| `--igny8-blue-dark` | `--color-primary-dark` | Primary dark variant |
| `--igny8-green` | `--color-success` | Success states |
| `--igny8-green-dark` | `--color-success-dark` | Success dark variant |
| `--igny8-amber` | `--color-warning` | Warning states |
| `--igny8-amber-dark` | `--color-warning-dark` | Warning dark variant |
| `--igny8-red` | `--color-danger` | Danger/error states |
| `--igny8-red-dark` | `--color-danger-dark` | Danger dark variant |
| `--igny8-purple` | `--color-purple` | Purple accent |
| `--igny8-purple-dark` | `--color-purple-dark` | Purple dark variant |

## Utility Class Migration

### Background Colors

**Before:**
```tsx
<div className="igny8-bg-blue">Content</div>
```

**After (Option 1 - Tailwind):**
```tsx
<div className="bg-brand-500">Content</div>
```

**After (Option 2 - CSS Variable):**
```tsx
<div className="bg-[var(--color-primary)]">Content</div>
```

### Text Colors

**Before:**
```tsx
<span className="igny8-text-blue">Text</span>
```

**After (Option 1 - Tailwind):**
```tsx
<span className="text-brand-500">Text</span>
```

**After (Option 2 - CSS Variable):**
```tsx
<span className="text-[var(--color-primary)]">Text</span>
```

### Border Colors

**Before:**
```tsx
<div className="igny8-border-blue">Content</div>
```

**After (Option 1 - Tailwind):**
```tsx
<div className="border-brand-500">Content</div>
```

**After (Option 2 - CSS Variable):**
```tsx
<div className="border-[var(--color-primary)]">Content</div>
```

## Component Migration

### Buttons

**Before:**
```tsx
<a className="inline-flex items-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-6 py-3">
  Click me
</a>
```

**After:**
```tsx
import Button from '@/components/ui/button/Button';

<Button
  variant="gradient"
  tone="brand"
  shape="pill"
  size="lg"
  as="a"
  href="/path"
>
  Click me
</Button>
```

### Badges

**Before:**
```tsx
<span className="igny8-badge igny8-badge-primary">New</span>
```

**After:**
```tsx
import Badge from '@/components/ui/badge/Badge';

<Badge variant="solid" tone="brand">New</Badge>
```

### Cards

**Before:**
```tsx
<div className="igny8-card">
  <div className="igny8-card-header">Title</div>
  Content
</div>
```

**After:**
```tsx
import { Card, CardTitle, CardContent } from '@/components/ui/card/Card';

<Card>
  <CardTitle>Title</CardTitle>
  <CardContent>Content</CardContent>
</Card>
```

## Gradients

**Before:**
```tsx
<div className="bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]">
  Content
</div>
```

**After:**
```tsx
<div className="bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)]">
  Content
</div>
```

Or use the Button component with `variant="gradient"`:
```tsx
<Button variant="gradient" tone="brand">Content</Button>
```

## Active Classes (Still in Use)

These classes are still actively used and should continue to be used:

- `.igny8-table-container` - Table wrapper with loading states
- `.igny8-table-wrapper` - Table scroll wrapper
- `.igny8-table-compact` - Compact table styling
- `.igny8-table-smooth` - Smooth table transitions
- `.igny8-table-body` - Table body styling
- `.igny8-skeleton-row` - Loading skeleton rows
- `.igny8-header-metrics` - Header metrics container
- `.igny8-header-metric` - Individual metric
- `.igny8-header-metric-accent` - Metric accent color
- `.igny8-header-metric-label` - Metric label
- `.igny8-header-metric-value` - Metric value
- `.igny8-header-metric-separator` - Metric separator

## Migration Checklist

When updating a file:

- [ ] Replace `--igny8-*` variables with `--color-*` tokens
- [ ] Replace `.igny8-bg-*` with `bg-brand-500` or `bg-[var(--color-primary)]`
- [ ] Replace `.igny8-text-*` with `text-brand-500` or `text-[var(--color-primary)]`
- [ ] Replace `.igny8-border-*` with `border-brand-500` or `border-[var(--color-primary)]`
- [ ] Replace hardcoded buttons with `<Button>` component
- [ ] Replace hardcoded badges with `<Badge>` component
- [ ] Replace hardcoded cards with `<Card>` component
- [ ] Keep `.igny8-table-*` and `.igny8-header-metric-*` classes as-is
- [ ] Test visual appearance matches (no color changes)

## Benefits of Migration

✅ **Single source of truth** - All colors defined in one place  
✅ **Type safety** - React components provide prop validation  
✅ **Consistency** - Standardized components across marketing and dashboard  
✅ **Maintainability** - Easier to update colors globally  
✅ **Performance** - Tailwind utilities are optimized  
✅ **Developer experience** - Better autocomplete and IntelliSense

## Questions?

See `DESIGN_SYSTEM.md` for complete design system guidelines.