5c9772f66a
Maps every color token from old values to new, identifies all migration layers (CSS vars, hardcoded hex, Tailwind classes, config). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4.0 KiB
Color Migration v5→v6 — Design Spec
Date: 2026-03-29 Status: Approved Scope: Migrate all color values from design system v5 (ember orange accent) to v6 (electric blue accent, cyan info, amber warning, deeper surfaces)
Problem
DESIGN-SYSTEM.md was updated to v6 with new color values, but the actual CSS variables and hardcoded color references in the codebase still use v5 values. The UI still renders with ember orange accent, old surface depths, yellow warnings, and no info color.
Color Mapping
Accent (orange → blue)
| Token | v5 (old) | v6 dark | v6 light |
|---|---|---|---|
| accent | #f97316 | #60a5fa | #2563eb |
| accent-hover | #ea580c | #3b82f6 | #1d4ed8 |
| accent-dim | rgba(249,115,22,0.10) | rgba(96,165,250,0.10) | rgba(37,99,235,0.07) |
| accent-text | #fdba74 | #93c5fd | #1d4ed8 |
| accent-glow | — | rgba(96,165,250,0.15) | rgba(37,99,235,0.10) |
Surfaces (deeper charcoal)
| Token | v5 (old) | v6 |
|---|---|---|
| page | #1a1c23 | #16181f |
| sidebar | #10121a | #0e1016 |
| card | #22252e | #1e2028 |
| card-hover | #282b35 | #252830 |
| input | #282b35 | #252830 |
| code | #14161e | #12141a |
| elevated | #2e3140 | #2a2d38 |
| surface-raised (NEW) | — | #303442 |
| border-default | #2e3240 | #2a2e3a |
Warning (yellow → amber)
| Token | v5 (old) | v6 dark | v6 light |
|---|---|---|---|
| warning | #eab308 | #fbbf24 | #d97706 |
| warning-dim | rgba(234,179,8,0.10) | rgba(251,191,36,0.10) | rgba(217,119,6,0.07) |
Info (NEW — cyan)
| Token | v6 dark | v6 light |
|---|---|---|
| info | #67e8f9 | #0891b2 |
| info-dim | rgba(103,232,249,0.10) | rgba(8,145,178,0.07) |
Semantic (light mode variants added)
| Token | v6 dark (unchanged) | v6 light (new) |
|---|---|---|
| success | #34d399 | #059669 |
| success-dim | rgba(52,211,153,0.10) | rgba(5,150,105,0.07) |
| danger | #f87171 | #dc2626 |
| danger-dim | rgba(248,113,113,0.10) | rgba(220,38,38,0.07) |
Migration Layers
Layer 1: CSS Custom Properties (index.css)
The @theme block in frontend/src/index.css defines all design tokens. Updating these cascades to ~80% of the codebase automatically via Tailwind utility classes (bg-accent, text-primary, border-default, etc.).
Changes: Swap all color values per the mapping above. Add info and info-dim tokens. Add surface-raised token. Add light mode accent/semantic variants.
Layer 2: Hardcoded Hex Values
Files that bypass CSS variables with inline hex colors:
frontend/src/components/common/BrandLogo.tsx— logo gradient (#ea580c,#f97316)frontend/src/pages/LandingPage.tsx— inline styles with#f97316frontend/src/constants/categoryColors.ts— color array with#ea580c,#f97316frontend/src/styles/landing.css(if exists) — orange rgba values in shadows/glows- Any component with
rgba(249,115,22,...)inline
Layer 3: Tailwind Color Classes
~21 files using orange-500, orange-600, orange-400 Tailwind classes. Replace with blue-400, blue-500, blue-600 equivalents.
Layer 4: Configuration
frontend/index.html—meta theme-colorvalue- Any PWA manifest colors
File Changes
Primary
frontend/src/index.css— CSS custom properties (the big one)frontend/index.html— meta theme-color
Hardcoded Colors
frontend/src/components/common/BrandLogo.tsx— logo gradientfrontend/src/pages/LandingPage.tsx— inline stylesfrontend/src/constants/categoryColors.ts— color array- Any landing.css / component CSS files with hardcoded orange
Tailwind Classes (grep for orange-400/500/600)
- ~21 component files — mechanical find-and-replace
Warning Yellow
- Any files with hardcoded
#eab308— replace with#fbbf24
Out of Scope
- Typography changes (none in v6)
- Layout/spacing changes (none in v6)
- Component structure changes (none in v6)
- Adding the light mode toggle UI (separate feature)