makepad-ports/plans/005-polish-pass.md

005 — Polish pass: color tokens, concentric radii, icons, tabular figures

• Status: TODO
• Commit: d50006e
• Severity: LOW (bundled per template rule: same fix pattern across crates)
• Category: Cohesion & tokens / surfaces / typography
• Estimated scope: 3 × app.rs DSL-only edits (~200 touched lines), no Rust logic changes

Problem

1. Hex soup — brand/status colors are repeated literals: insurance/src/app.rs:31,108,122,170 (#ffffff, #f7a982, #7b5cf6, #8a74ff), and equivalents across rider/koboyo. Unthemable; drift guaranteed.
2. Radius clashes — nested rounded surfaces ignore outer = inner + padding:

   // insurance/src/app.rs:262 — current: outer 20, padding-top 14, inner 13 (concentric ⇒ 27 or 6)
   draw_bg +: { color: #xffedf3 radius: 20.0 }
   …
   RoundedView{ width: 38 height: 38 draw_bg +: { color: #ffffff radius: 13.0 } … }
   

   Sibling tiles at :273+ repeat it. Card(20)/IconTile(15)/RoundBtn(19) nestings need the same audit. (Side paddings must be measured per tile before changing values.)
3. Emoji as icons — insurance/src/app.rs:139 (🔔), :264 (❤), koboyo tool glyphs: no stroke weight, ignore the palette, platform-dependent rendering, no state recoloring.
4. Numbers that tick aren't tabular — prices/percentages/timers (e.g. rider ETA, insurance stats column noted in README bug 7) shift layout as digits change. Not verified per-label; sweep required.

Target

1. Every color in the three apps' DSL references a mod.craft.* token (added in plan 000's token module): color_brand (#7b5cf6), color_brand_soft (#8a74ff), color_accent_warm (#f7a982), color_surface, color_ink (#191a24), per-app extras defined once at the top of each app's script_mod!. Zero raw hex in widget bodies (data-driven colors from model.rs are exempt).
2. Every nested rounded pair within 24px of visible even inset satisfies outer = inner + padding (measure the real padding; adjust the inner radius first so outer silhouettes don't change screen layout). Flush-nested equal-size pairs (e.g. app.rs:138–139, both radius 19, zero inset) are compliant — leave them.
3. Icons: replace emoji labels with SDF-drawn glyphs (Makepad Icon/custom pixel fn) or packaged SVG assets — one asset per icon, recolored per state via a color instance; outline default, fill = active. Match visual stroke weight to adjacent text weight.
4. Any label whose text is numeric-and-changing gets tabular figures (font feature tnum via the text style if the shipped font supports it; otherwise a fixed-advance numeric font fallback — report which path the font allows). Ellipsis: … character, never ....

Repo conventions to follow

• DSL-only: draw_bg +: { color: mod.craft.color_brand } merge style, per AGENTS.md.
• Keep the let Card = RoundedView{…} local-component pattern (insurance/src/app.rs:28–47) — tokens feed those definitions, then tiles inherit.
• README bug 7: when touching stat columns, labels keep intrinsic width (no width: Fill inside width: Fit columns).

Steps

1. Plan-000 token module: add the color roles above (names + values enumerated there).
2. insurance sweep: replace hex → tokens; fix tile radii at :262, :273+ after measuring each tile's real inset; icon swap for 🔔/❤/quick-action glyphs; tabular sweep of the stats/price labels.
3. rider sweep: same (map shader colors stay literal — they're scene data, not chrome).
4. koboyo sweep: same; tool-rail icons get the outline/fill active convention.
5. Screenshot the home screen of each app before/after (headless screenshot or windowed) and attach to the PR — radius and icon changes are eyeball-verified.

Boundaries

• Do NOT change layout sizes, spacing, or copy.
• Do NOT restyle the HTML originals' look — tokens must reproduce today's rendered colors exactly (this plan is refactor + correctness, not a redesign).
• Do NOT touch model.rs in any crate.
• If a font lacks tnum and no acceptable numeric fallback ships with Makepad, STOP on step 4 and report — do not swap the app font for this.

Verification

• Mechanical: full matrix green (DSL changes can break text_exact locators — update test strings deliberately, e.g. emoji removed from "🔋 89% Charged"-style labels, README bug 9). grep -En "#[0-9a-fA-F]{3,8}\b" */src/app.rs → only model-driven/scene exemptions.
• Feel check: nested corners look concentric at 200% zoom; icons recolor on hover/active instead of swapping glyphs; a ticking number no longer makes its row breathe.
• Done when: token grep is clean, radius table in the PR lists every nested pair with its measured inner + padding = outer, and tests are green.