mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 16:13:12 +00:00
042b9db2ac
* fix: correct Sea Haven branding in page title and wordmark * chore: use correct company name in docs and comments * docs: rewrite README * docs: add README badge block per github-standards * fix: update command syntax in deployment instructions * fix: replace template PWA icons and manifest branding * test: assert PWA manifest branding
88 lines
6.9 KiB
Markdown
88 lines
6.9 KiB
Markdown
# Design System Migration Log
|
|
|
|
Migration from legacy CSS (`index.css`, `#0c4f6f` palette) to Sea Haven DS tokens. Strategy: **MUI-only**.
|
|
|
|
## Phase 1 — Foundation
|
|
|
|
| File | Action | Reason |
|
|
| --------------------------- | ---------- | --------------------------------------------------------------------- |
|
|
| `src/styles/theme.css` | Created | SoT: 131+ Sea Haven 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 Sea Haven 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 → Sea Haven 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 Sea Haven active/hover states
|
|
- Header: flat blue gradient → Sea Haven 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
|