# Design System Migration Log

Migration from legacy CSS (`index.css`, `#0c4f6f` palette) to Seahaven DS tokens. Strategy: **MUI-only**.

## Phase 1 — Foundation

| File                        | Action     | Reason                                                                |
| --------------------------- | ---------- | --------------------------------------------------------------------- |
| `src/styles/theme.css`      | Created    | SoT: 131+ Seahaven tokens + layout/typography/elevation extensions    |
| `src/styles/fonts.css`      | Created    | Montserrat, DM Sans, JetBrains Mono via `@fontsource`                 |
| `src/styles/typography.css` | Created    | Base html/body/heading/caption/label styles                           |
| `src/styles/motion.css`     | Created    | Duration and easing tokens                                            |
| `src/styles/globals.css`    | Refactored | Import chain + `@custom-variant dark`; removed legacy `@theme` tokens |
| `src/lib/utils.ts`          | Created    | `cn()` with clsx + tailwind-merge                                     |
| `src/lib/theme/css-vars.ts` | Created    | `getCssVar()` helper for MUI bridge                                   |
| `package.json`              | Modified   | Added `@fontsource/*`, `clsx`, `tailwind-merge`                       |

## Phase 2 — MUI Bridge

| File                         | Action   | Reason                                                          |
| ---------------------------- | -------- | --------------------------------------------------------------- |
| `src/lib/theme/mui-theme.ts` | Expanded | Full palette, typography, shape, shadows, 8 component overrides |

## Phase 3 — App Shell

| File                                      | Action   | Reason                                             |
| ----------------------------------------- | -------- | -------------------------------------------------- |
| `src/components/layout/app-sidebar.tsx`   | Created  | MUI Drawer + sidebar tokens; replaces `Sidebar.js` |
| `src/components/layout/app-topbar.tsx`    | Created  | MUI AppBar + header gradient; replaces `Topbar.js` |
| `src/app/(protected)/_layout.tsx`         | Modified | Uses new layout components                         |
| `src/main.tsx`                            | Modified | Removed `index.css` import                         |
| `src/app/v/_components/vendor-portal.css` | Modified | Re-tokenized with Seahaven CSS vars                |
| `src/index.css`                           | Deleted  | ~487 lines migrated to tokens + TSX shell          |
| `src/components/Sidebar.js`               | Deleted  | Replaced by `app-sidebar.tsx`                      |
| `src/components/Topbar.js`                | Deleted  | Replaced by `app-topbar.tsx`                       |
| `src/styles/FormPage.css`                 | Deleted  | Unused (no imports in codebase)                    |

## Phase 4 — Shared UI

| File                                       | Action   | Reason                                       |
| ------------------------------------------ | -------- | -------------------------------------------- |
| `src/components/ui/button.tsx`             | Created  | MUI Button wrapper                           |
| `src/components/ui/badge.tsx`              | Created  | MUI Chip wrapper                             |
| `src/components/ui/page-header.tsx`        | Created  | PATTERN_001                                  |
| `src/components/ui/empty-state.tsx`        | Created  | PATTERN_003                                  |
| `src/components/ui/form-field.tsx`         | Created  | PATTERN_004                                  |
| `src/components/domain/type-badge.tsx`     | Created  | WO type tokens                               |
| `src/components/domain/status-badge.tsx`   | Created  | WO status tokens + API aliases               |
| `src/components/domain/doc-badge.tsx`      | Created  | Completion doc tokens (MUI icons)            |
| `src/app/(protected)/workorders/index.tsx` | Modified | `WorkOrderStatusBadge` replaces generic Chip |

## Phase 5 — Page refactor

| File                                                                   | Action   | Reason                                     |
| ---------------------------------------------------------------------- | -------- | ------------------------------------------ |
| `src/app/(auth)/login.tsx`                                             | Modified | `#1a3a5c` → `var(--color-header-bg-start)` |
| `src/app/(protected)/dashboard.tsx`                                    | Modified | `border-gray-*` → `border-border`          |
| `src/app/(protected)/index.tsx`                                        | Modified | Same as dashboard                          |
| `src/app/(protected)/settings/dropdowns.tsx`                           | Modified | Semantic sidebar + active states           |
| `src/app/(protected)/settings/task-templates.tsx`                      | Modified | Semantic borders/text                      |
| `src/components/common/settings-nav.tsx`                               | Modified | `text-primary`, `border-border`            |
| `src/components/common/calendar/calendar-utils.ts`                     | Modified | Bootstrap hex → Seahaven CSS vars          |
| `src/components/common/calendar/calendar-action-bar.tsx`               | Modified | Semantic surface classes                   |
| `src/components/common/calendar/event-calendar.tsx`                    | Modified | Semantic surface classes                   |
| `src/components/common/signature-capture.tsx`                          | Modified | Canvas colors from CSS vars                |
| `src/app/(protected)/workorders/_components/dispatch-create-modal.tsx` | Modified | Semantic borders/hover                     |
| `src/app/(protected)/workorders/_components/dispatch-detail-modal.tsx` | Modified | Semantic borders                           |
| `src/app/(protected)/workorders/[id].tsx`                              | Modified | Semantic borders                           |
| `src/app/(protected)/vendor-pos/[id].tsx`                              | Modified | Semantic borders                           |

## Phase 6 — Docs & validation

| File                              | Action  | Reason                          |
| --------------------------------- | ------- | ------------------------------- |
| `docs/DESIGN_SYSTEM.md`           | Created | Token reference and usage guide |
| `docs/DESIGN_SYSTEM_MIGRATION.md` | Created | This file                       |

## Visual impact summary

- Primary color: `#0c4f6f` → `#1c75bc` (expected, documented)
- Body font: Segoe UI 13px → DM Sans 14px
- Sidebar: `#fbfbfb` → `#f6f8fb` with Seahaven active/hover states
- Header: flat blue gradient → Seahaven multi-stop gradient

## Not migrated (intentional)

- CRUD list pages using default MUI theming — inherit via `mui-theme.ts` without JSX changes
- `src/app/v/_components/signature-pad.tsx` — vendor portal isolated; minor `#111` stroke remains