igny8/frontend/MIGRATION_GUIDE.md

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:

<div className="bg-[var(--igny8-blue)]">Content</div>

After:

<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:

<div className="igny8-bg-blue">Content</div>

After (Option 1 - Tailwind):

<div className="bg-brand-500">Content</div>

After (Option 2 - CSS Variable):

<div className="bg-[var(--color-primary)]">Content</div>

Text Colors

Before:

<span className="igny8-text-blue">Text</span>

After (Option 1 - Tailwind):

<span className="text-brand-500">Text</span>

After (Option 2 - CSS Variable):

<span className="text-[var(--color-primary)]">Text</span>

Border Colors

Before:

<div className="igny8-border-blue">Content</div>

After (Option 1 - Tailwind):

<div className="border-brand-500">Content</div>

After (Option 2 - CSS Variable):

<div className="border-[var(--color-primary)]">Content</div>

Component Migration

Buttons

Before:

<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:

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:

<span className="igny8-badge igny8-badge-primary">New</span>

After:

import Badge from '@/components/ui/badge/Badge';

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

Cards

Before:

<div className="igny8-card">
  <div className="igny8-card-header">Title</div>
  Content
</div>

After:

import { Card, CardTitle, CardContent } from '@/components/ui/card/Card';

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

Gradients

Before:

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

After:

<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":

<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.