recipe-manager/.harness/docs/t05-legacy-style-debt-cleanup.md

T05 — Legacy Style Debt Cleanup

Date: 2026-03-27
Project: recipe-manager/frontend

Scope

Conservative cleanup of clearly obsolete style artifacts after token/primitive contract stabilization.

Changes made

1) Removed unused legacy scaffold stylesheet

• Deleted: frontend/src/App.css
• Rationale: file contained Vite starter/demo selectors (.hero, .counter, #next-steps, etc.) and is not imported by main.tsx or App.tsx.
• Risk: low (no import path, no app references).

2) Removed dead legacy helper selector from global stylesheet

• Updated: frontend/src/index.css
• Removed legacy .card selector alias block and kept .shadow-card (still actively used).
• Before: .card, .shadow-card { ... } plus .shadow-card { ... }
• After: .shadow-card { ... } only.
• Rationale: avoid duplicate/ambiguous card styling pathways now that ui-card is the primitive contract.

Validation

• Verified no App.css imports in current frontend source.
• Verified no className="card" usage in current frontend source.
• Build check: npm run build passes.

Deferred legacy debt (intentionally not removed)

1. .shadow-card utility in index.css — still used across pages/components (RecipeForm, RecipeListPage, RecipeDetailPage), so not safe to remove in T05.
2. .animate-slide-in + @keyframes slide-in — used by components/Toast.tsx; retained.
3. Residual inline style usage from theme.ts (e.g., Toast, RecipeCard) — not removed here to avoid broader UI behavior changes; belongs to follow-up conversion task.
4. Responsive global utility overrides in index.css (.max-w-*, .p-*) — potentially legacy/scaffold-ish but high blast-radius; defer pending design QA.

Recommendation (next task)

Proceed with T06 — Guardrails + Lightweight Governance:

• codify that new UI must use ui-*/primitives and tokenized vars,
• add a checklist to prevent re-introducing dead aliases and raw palette drift.

Ready for review

Yes