docs: apply eng review fixes - slate-300 context rule, annotated audit, visual smoke checklist
This commit is contained in:
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user