many changes for modules widgets and colors and styling

docs/plans/MIGRATION_GUIDE_VERIFIACTION_REQURIED_IF ALEAYD_IMPLEMENTD.md

@@ -0,0 +1,216 @@
+# 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.
+