Batch fix for review-visual-flow's two P0 + five P1 findings across the
Chat / Rubrics / Growth surfaces. Everything routes through tokens — no
new hex family, no gradient hero, no violet competing with --accent.
P0-1 blue collision — plan-signal chip shared the exact --accent hue
with --turn-action-edge, so a .sig-plan chip inside an action turn fused
visually with the turn's left rail. Introduces --signal-plan-fg / -bg /
-border (+ restart variants) on a teal axis (light #0f766e, dark
#5eead4), rewires .turn-signal-chip.sig-plan, .sig-plan-restart, their
dark override, and the .trace-timeline-signal-badge / .trace-graph-
signal-ring SVG variants to the tokens. Now the four signal families
(error red / loop red / redundant amber / plan teal) all sit off the
blue axis so the turn-edge blue keeps its exclusive whole-turn-action
semantic.
P0-2 rubric-hint-card hero — was a full-width purple gradient banner
(12px radius, 20px icon, primary CTA) violating spec §2 'L1 material
styled as L0 hero'. Repainted as a 28px compact row: single hairline on
--surface, 4px radius, downgraded icon to '·', inlined title+subtitle,
CTA to ghost small. Reads as a Fields-tree-grade nudge, not page chrome.
P1 batch (5 CSS token conversions):
1. .rubric-tile-stats-rate/-dot .pass/.fail: raw #79d17b/#f96e6e →
--status-ok-fg / --status-err-fg.
2. .rubrics-empty-illust svg [fill]: raw #a89a83 → --icon-mute.
3. .growth-filter-chip.active: raw --accent-* → --nav-item-active-*.
4. .kb-tabs .active hue: raw --accent-fg → --text.
5. .rubric-grid-name size: 15px → 14px (three-size rule).
7 renderer test file (visual-consistency-polish.test.js) locks all the
above via style.css AST assertions. 3 shots + 3 before shots under
docs/qa-visual-fix/ document the delta on chat / rubrics / growth.
10 files, +400/-49. Visual-only, no behavioral changes.
ZiyaZhang
767d65465d