133 lines
5.8 KiB
Markdown
133 lines
5.8 KiB
Markdown
# T07 — Styling Stabilization QA Pass
|
||
|
||
Date: 2026-03-28
|
||
Task: **T07 — Stabilization QA Pass**
|
||
Scope: QA review of T02–T06 outcomes in `recipe-manager/frontend`
|
||
|
||
## What was reviewed
|
||
|
||
Read docs:
|
||
- `.harness/styling-stabilization-execution-board.md`
|
||
- `.harness/docs/styling-inventory.md`
|
||
- `.harness/docs/styling-token-contract.md`
|
||
- `.harness/docs/ui-primitive-contract.md`
|
||
- `.harness/docs/styling-governance.md`
|
||
- `.harness/docs/t05-legacy-style-debt-cleanup.md`
|
||
- `docs/visual-audit/after/homepage-qa-note-t04.md`
|
||
|
||
Inspected implementation surfaces:
|
||
- `src/styles/tokens.css`
|
||
- `src/theme.ts`
|
||
- `src/index.css`
|
||
- `src/components/ui/primitives.tsx`
|
||
- `src/App.tsx`
|
||
- `src/components/MissionControlPanel.tsx`
|
||
- `src/pages/RecipeListPage.tsx`
|
||
- `src/pages/CookModePage.tsx`
|
||
- `src/pages/ImportUrlPage.tsx`
|
||
- `src/components/RecipeCard.tsx`
|
||
- `src/components/Toast.tsx`
|
||
- `src/components/ErrorBoundary.tsx`
|
||
- `src/pages/NotFoundPage.tsx`
|
||
- `scripts/style-guardrails.mjs`
|
||
- `frontend/package.json`
|
||
|
||
Validation commands:
|
||
- `npm run style:guardrails` ✅ pass
|
||
- `npm run build` ✅ pass
|
||
- `npm run lint` ❌ fails (pre-existing non-styling issues; see findings)
|
||
- grep scan for raw palette utilities in app/page/component surfaces
|
||
|
||
---
|
||
|
||
## QA findings by severity
|
||
|
||
### High
|
||
1. **Known drift still present in unguarded surfaces (`ErrorBoundary`, `NotFoundPage`)**
|
||
- `src/components/ErrorBoundary.tsx` still uses raw Tailwind palette utilities (`bg-gray-*`, `text-gray-*`, `bg-blue-*`, `text-red-*`).
|
||
- `src/pages/NotFoundPage.tsx` still uses raw palette (`text-gray-*`, `bg-blue-*`).
|
||
- Risk: these are user-visible shell/error states and create immediate visual inconsistency with tokenized surfaces.
|
||
|
||
### Medium
|
||
2. **Guardrail scope is still too narrow for current stabilized claims**
|
||
- Current `style:guardrails` only enforces:
|
||
- `src/App.tsx`
|
||
- `src/components/MissionControlPanel.tsx`
|
||
- `src/components/ui/primitives.tsx`
|
||
- High-drift but now partially stabilized files (e.g., `RecipeListPage`, `ImportUrlPage`, `CookModePage`, `RecipeCard`) are not protected yet.
|
||
|
||
3. **Residual non-token palette usage remains in otherwise stabilized pages/components**
|
||
- `src/pages/RecipeListPage.tsx`: hero overlay gradient uses `from-slate-900...` / `via-slate-900...`.
|
||
- `src/components/RecipeCard.tsx`: card image overlay uses `from-slate-950...` / `via-slate-900...`.
|
||
- `src/components/Toast.tsx`: close button hover uses `hover:text-gray-200`.
|
||
- These are limited, but they are still direct palette leakage.
|
||
|
||
4. **Release hygiene risk: lint gate is red**
|
||
- `npm run lint` fails due to existing React/TS lint errors in `App.tsx`, `CookModePage.tsx`, `RecipeDetailPage.tsx`, `api.ts`, `types/api-aux.ts`.
|
||
- Not strictly a styling blocker, but it weakens governance confidence and CI-readiness.
|
||
|
||
### Low
|
||
5. **`theme.ts` still contains non-token hex values in `recipeAccentPalette`**
|
||
- Most token drift was eliminated correctly, but this transitional array still includes raw hex values.
|
||
- This is documented as an exception in T02; low-risk but still outside ideal contract purity.
|
||
|
||
---
|
||
|
||
## What is now considered stabilized
|
||
|
||
- **Token source authority:** `tokens.css` is effectively canonical; `theme.ts` now primarily references CSS vars instead of duplicating hardcoded token values.
|
||
- **Primitive layer exists and is adopted:** `UiPage`, `UiSection`, `UiCard`, `UiButton`, `UiChip`, `UiBadge`, `cn()` are implemented and used in key shell/surface paths.
|
||
- **App shell conversion landed:** `App.tsx` now follows tokenized/primitive-aligned styling patterns.
|
||
- **Mission Control conversion landed:** `MissionControlPanel.tsx` moved onto tokenized primitive usage.
|
||
- **Legacy cleanup landed:** `src/App.css` removed; legacy `.card` alias removed from `index.css`.
|
||
- **Governance baseline landed:** written governance + runnable guardrail command in package scripts.
|
||
|
||
---
|
||
|
||
## What still needs work
|
||
|
||
1. **Close remaining obvious drift surfaces**
|
||
- Convert `ErrorBoundary` and `NotFoundPage` to tokenized/primitive patterns.
|
||
|
||
2. **Finish palette cleanup on media overlays/edge controls**
|
||
- Replace remaining `slate-*`/`gray-*` utility references in `RecipeListPage`, `RecipeCard`, and `Toast` with semantic tokens.
|
||
|
||
3. **Expand guardrail coverage in phases**
|
||
- Add stabilized pages/components to `scripts/style-guardrails.mjs` scope incrementally (start with `NotFoundPage`, `ErrorBoundary`, `RecipeListPage`, `RecipeCard`, `Toast`).
|
||
|
||
4. **Address lint debt to improve release confidence**
|
||
- Resolve outstanding lint errors (especially `react-hooks/set-state-in-effect` and explicit `any` violations) so governance checks can become stronger CI gates.
|
||
|
||
5. **Optional contract hardening**
|
||
- Replace non-token hexes in `recipeAccentPalette` with token references.
|
||
|
||
---
|
||
|
||
## Recommended next execution-board task
|
||
|
||
**T08 (new): Guardrail Scope Expansion + Residual Drift Cleanup**
|
||
|
||
Proposed scope:
|
||
- Convert `ErrorBoundary` + `NotFoundPage` to tokenized primitives.
|
||
- Remove remaining raw palette classes in `RecipeListPage`, `RecipeCard`, `Toast`.
|
||
- Expand `style:guardrails` file scope to include these surfaces.
|
||
- Keep changes low-risk and styling-only.
|
||
|
||
If no new task id is allowed, treat this as **T07 follow-on patch set** before final signoff.
|
||
|
||
---
|
||
|
||
## Release gate status (from execution board)
|
||
|
||
- [x] One canonical token source with no major CSS/TS drift
|
||
- [x] Base primitives centralized and used across high-traffic surfaces
|
||
- [~] No new ad-hoc color classes outside tokenized set (mostly true, residual exceptions remain)
|
||
- [x] Legacy scaffold artifacts removed/documented
|
||
- [x] Governance doc + guardrail command exist
|
||
|
||
Overall: **Near-stable, not fully closed** due to residual palette drift and narrow guardrail scope.
|
||
|
||
## Ready for review
|
||
|
||
**Yes (with follow-on cleanup required before final “fully stabilized” signoff).**
|