feat(nexus): design system phase 3 raw utility sweep
Third phase of the DESIGN.md migration. Removes every raw Tailwind
color palette utility (bg-red-*, text-amber-*, border-blue-*, etc.)
from component source and replaces them with the semantic tokens
introduced in phases 1 and 2.
Scope:
- 84 files touched under ui/src/
- ~420 raw palette utility instances replaced
- 23 hardcoded hex fallbacks replaced with var(--token) refs
- Zero raw palette utilities remain in component source
(verified with rg '(bg|text|border|ring)-(red|blue|green|amber|
yellow|cyan|violet|purple|pink|slate|zinc|neutral|sky|teal|
emerald|indigo|rose|orange|fuchsia)-[0-9]+' ui/src)
Mapping rules applied:
- red-* -> destructive
- amber-/yellow-/orange-* -> warning
- green-/emerald-* -> success
- blue-/cyan-/sky-* -> primary (info/in-progress) or muted-foreground
- slate-/gray-/zinc-/neutral-* -> muted / muted-foreground / border
- violet-/purple-/pink-/indigo-/rose-/teal-* -> collapsed to
primary or muted (most were one-off decorative choices, not
role-bearing). Role-bearing uses go through lib/agent-role-colors
which was rewritten in phase 2.
- Opacity modifiers preserved (/10, /15, /20, etc.)
- dark: variant duplicates removed (theme tokens auto-switch)
Hardcoded hex fallbacks fixed:
- #6366f1 (indigo) -> var(--primary) / var(--volt)
- #64748b (slate) -> var(--muted-foreground) / var(--silver)
- #4f46e5 (indigo) -> var(--primary)
- #89b4fa (old Catppuccin blue) -> var(--primary) / #faff69
- OrgChart status dots (#22d3ee/#4ade80/#facc15/#f87171/#a3a3a3)
-> var(--primary) / var(--success) / var(--warning) /
var(--destructive) / var(--muted-foreground) per status
- VoiceWaveform fallback #89b4fa -> #faff69 (volt)
Legitimate hex values left untouched (12 total):
- lib/color-contrast.ts WCAG reference constants
- lib/worktree-branding.ts contrast fallback references
- lib/mention-chips.ts runtime-generated SVG fills
- context/ThemeContext.tsx theme metadata brand hexes
- components/ThemeSeedInput.tsx user-facing hex picker
Ambiguous decisions (flagged for visual QA):
- AgentDetail.tsx invocation-source badges (timer/assignment/
on_demand) collapsed to primary/muted — visual distinction
is reduced, labels still differ. Consider chart-role slots
if differentiation matters.
- AgentDetail.tsx mixed-opacity amber banners: bg-warning/60
against new warning base reads heavier than original amber-50
base.
- Live-state dots in KanbanBoard/AgentDetail: bg-blue-* ->
bg-primary — will glow volt in dark mode, probably desirable.
Verification:
- npx tsc --noEmit in ui/ — zero errors introduced. Pre-existing
errors in AgentConfigForm, command.tsx, useKeyboardShortcuts,
usePiperTts, useVadRecorder, PersonalAssistant remain, all
unrelated to color work.
- Dev server on :6100 returns 200.
Not changed in this commit:
- ui/src/lib/company-routes.ts — separate routing fix for broken
Assistant/ContentStudio/Convert links, committed next.
- Test files — a few will need assertion updates but are out of
phase 3 scope.
Phase 4 follow-ups (rounded-xl/2xl collapse, soft shadow removal,
gradient removal) noted in .planning/AUDIT-RADIUS-SHADOWS.md.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
3a41ec7b9c