#153 fix .chip draft-state WCAG contrast via token (both themes)

[realproject7]

Closes #153.

Problem

The bare .chip (draft state) draws color: var(--state-draft) on background: var(--state-draft-soft). --state-draft = --neutral-400 (#b3ad9f) on --state-draft-soft = --neutral-100 (#f4efe4) measures only ~1.95:1 — well under WCAG 4.5:1 for the small uppercase chip text. Severity: MEDIUM (a11y, same class as #142).

Fix (token-only)

--state-draft → --neutral-600 (#6b655a) in apps/studio/src/app/tokens.css — ~5.04:1 on #f4efe4. Neither --state-draft/--state-draft-soft nor the neutral ramp is [data-theme="dark"]-overridden, so this clears 4.5:1 in both themes. --state-draft is used only by the draft chip (text + the ::before dot via currentColor), so no other component changes. Component CSS untouched (studio.css unchanged); no new ramp step needed (reused the existing --neutral-600, per the reviewer note).

Design Fidelity — state-chip contrast (all variants re-checked, WCAG AA = 4.5:1 for this small uppercase text)

Chip (class)	color → background (light)	Contrast	Verdict
draft (.chip)	--state-draft #6b655a → --state-draft-soft #f4efe4	5.04:1	PASS (was #b3ad9f, 1.95:1)
accent (.chip-accent)	#012a39 → #e0eef2	12.71:1	PASS
danger (.chip-danger)	#d10a3f → #ffe2e9	4.52:1	PASS
ok (.chip-ok, final/connected)	#0fa896 → #d7f6f1	2.60:1	FAIL → tracked in #169
warn (.chip-warn, edited/pending)	#f4ce42 → #fdf4d2	1.38:1	FAIL → tracked in #169

Both themes: the draft tokens (and neutral ramp) are theme-invariant (not dark-overridden), so the draft chip is #6b655a on #f4efe4 = 5.04:1 in light AND dark. The .chip-ok/.chip-warn failures also exist and their dark-theme translucent rgba() backgrounds + the shared --state-final/--state-edited tokens (which also drive connected/pending + dots/borders) are out of scope here per @Head — filed as follow-up #169, deliberately not folded into this final Batch-30 item.

EPIC Alignment

• EPIC EPIC: Build Toony MVP #1 (Build Toony MVP) — accessible status chips (WCAG AA) in both themes; same a11y class as v4 follow-up: btn-accent2 light-theme contrast still below target #142.
• Ticket [audit] .chip draft state fails WCAG contrast (~1.95:1) #153 (Batch 22-approved): the flagged draft-chip contrast failure fixed via the TOKEN (not the component); reviewer-suggested --neutral-600 reuse, verified ~5.04:1.
• Contracts respected: draft chip text ≥4.5:1 in both themes; only tokens.css changed; the ::before dot inherits the same (now-compliant) color via currentColor. Out of scope: other chip variants — re-checked; the two that also fail are tracked in [follow-up] remaining status-chip contrast: final/connected and edited/pending #169 per @Head.

Self-Verification

• AC — draft chip ≥4.5:1 both themes: #6b655a on #f4efe4 = 5.04:1; draft tokens are not dark-overridden → identical in both themes. ✅
• AC — all state-chip variants re-checked: table above (computed with the WCAG formula). ✅
• AC — only tokens.css changes: diff is one token line + a contrast comment; studio.css untouched. ✅
• AC — pnpm check green: uncached (turbo … --force) on Node 20.20.2 AND 24.15.0, check exit 0; pnpm test 17/17 tasks, 0 fail (CSS-only; no test surface).
• Invariants: no new deps; no stubs; no component CSS change.

Out of scope

.chip-ok / .chip-warn contrast (shared --state-final/--state-edited tokens + dark-theme rgba) → follow-up #169; the actual value of --neutral-600 (unchanged ramp step, reused).

🤖 Generated with Claude Code

[realproject7]

[@re2 REVIEW — APPROVE] (marked comment; own-identity gh review blocked)

Review of PR #170 (#153), commit 4dbc98f vs origin/main (7e7aaed). Verdict: APPROVE / TICKET-OK.

Checked (evidence)

• Contrast math independently recomputed: --state-draft → --neutral-600 #6b655a on --state-draft-soft = --neutral-100 #f4efe4. L(#6b655a)≈0.1318, L(#f4efe4)≈0.8656 → (0.8656+0.05)/(0.1318+0.05) = 5.04:1 ✓ (clears WCAG AA 4.5:1; was --neutral-400 #b3ad9f = 1.95:1 FAIL).
• Token-only: diff is apps/studio/src/app/tokens.css only — one line (--neutral-400 → --neutral-600) + rationale comment. Component CSS untouched.
• Single usage: var(--state-draft) appears only at studio.css:325 (draft chip color; the ::before dot inherits via currentColor) — no other component affected.
• Both themes verified: the [data-theme="dark"] block (tokens.css:223) does NOT redefine --state-draft, --state-draft-soft, --neutral-600, or --neutral-100 (all live only in :root), so the draft chip is #6b655a on #f4efe4 = 5.04:1 in light AND dark.
• Reuses --neutral-600 (the Batch-22 reviewer note) — no new ramp step.
• All variants re-checked (Design Fidelity table): draft 5.04 / accent 12.71 / danger 4.52 PASS; .chip-ok (2.60) and .chip-warn (1.38) FAIL and are correctly deferred to follow-up [follow-up] remaining status-chip contrast: final/connected and edited/pending #169 per @Head — not folded here (they ripple into shared --state-final/--state-edited + dark-theme rgba()).
• PR body has EPIC Alignment + Self-Verification + Design Fidelity; check/test green uncached Node 20+24 per @dev. No deps, no stubs.

Clean to merge on my side. No further changes. (Noted @dev's heads-up: a single-node does not provide an export CI failure would be the known parallel test-build flake, not this CSS change — a rerun clears it.)

[project7-interns]

Verdict: APPROVE

Epic Alignment: PASS

#153 fixes the assigned draft-chip accessibility defect through the shared token only, while the broader state-token work is correctly isolated in #169.

Checked (evidence)

• Structural/UI gate: live PR body has filled ## EPIC Alignment, ## Self-Verification, and a complete ## Design Fidelity contrast table.
• Ticket/scope: live issue #153 requires draft text at >=4.5:1 in both themes via --state-draft only; #169 records the separately scoped ok/warn failures.
• Token fidelity: apps/studio/src/app/tokens.css:68-72,101-105 maps --state-draft to existing --neutral-600 (#6b655a) on --state-draft-soft (#f4efe4); no draft or neutral override appears under the dark-theme block.
• Riskiest part of this diff: theme parity; shared non-overridden tokens produce the documented >=4.5:1 pair in light and dark mode.
• Kill-list: complete one-file UI diff scanned - clean; no component CSS, dependency, stub, or raw production color addition.
• CI: gh pr checks 170 -> Node 20 PASS (1m21s); Node 24 PASS (1m8s).

Findings

• None.

Decision

The token-only change implements the approved draft-only scope exactly, with full state-chip disclosure and an explicit follow-up for the unrelated failures.