diff --git a/docs/superpowers/plans/2026-04-19-ui-uniformity.md b/docs/superpowers/plans/2026-04-19-ui-uniformity.md index 88964970..88f15633 100644 --- a/docs/superpowers/plans/2026-04-19-ui-uniformity.md +++ b/docs/superpowers/plans/2026-04-19-ui-uniformity.md @@ -26,11 +26,14 @@ The design tokens already exist in `frontend/tailwind.config.ts`. Use these and **Replace these hardcoded classes with the tokens above:** - `text-slate-100`, `text-slate-200` → `text-secondary` (secondary text) -- `text-slate-300` → `text-secondary` (secondary text, slightly darker) +- `text-slate-300` in **label/secondary text context** → `text-secondary` +- `text-slate-300` in **placeholder/disabled/hint context** → `text-muted` ⚠️ check context first - `text-slate-400`, `text-slate-500` → `text-muted` (muted/hint) - `text-slate-700` (on light bg) → keep as-is (inverted context) - `text-white` on headings → keep (page titles only) +> **⚠️ slate-300 context rule:** `text-slate-300` serves two purposes. If it's on a label, heading, or value display → use `text-secondary`. If it's on placeholder text, a disabled input, or a loading skeleton → use `text-muted`. When in doubt, check whether the element is interactive/disabled. + **Font weight standard:** - Page titles (main heading per page): `text-2xl font-black` or `text-3xl font-black` - Section labels: `text-xs font-black text-muted` @@ -74,6 +77,10 @@ cd frontend && grep -rn \ echo "Lines found: $(wc -l < ../docs/superpowers/plans/ui-uniformity-audit.txt)" ``` +**Then manually annotate `ui-uniformity-audit.txt` for each `text-slate-300` line:** +Add a comment at the end of the line: `# LABEL` (use text-secondary) or `# PLACEHOLDER` (use text-muted). +This takes 5 minutes and prevents contrast regressions in disabled form fields. + Commit: ```bash git add docs/superpowers/plans/ui-uniformity-audit.txt docs/superpowers/plans/2026-04-19-ui-uniformity.md @@ -270,9 +277,20 @@ git commit -m "style: step 11 - uniform text tokens in remaining components" ```bash cd frontend && npm run build 2>&1 | tail -10 cd frontend && npm run test -- --run 2>&1 | tail -5 -# Manually verify: login page, main page, inventory, admin, at least one modal +# Must: 0 build errors, 291 tests passing ``` +**Visual smoke checklist (open the app, check each item):** +- [ ] Login page: disabled inputs look visibly dimmer than active inputs +- [ ] Login page: placeholder text is lighter than typed text +- [ ] Main page (scanner): section labels are clearly smaller/lighter than page title +- [ ] Inventory page: table row text reads at consistent weight/color throughout +- [ ] Admin page: error messages appear in red, not muted gray +- [ ] Any modal (e.g., Create User): modal title is clearly the largest text inside it +- [ ] `text-muted` elements are visibly lighter than `text-secondary` elements anywhere on same page + +All 7 must pass visually before marking this step complete. + Update this file: mark all steps done. Then update `dev_docs/SESSION_STATE.md`. Commit: