Design system migration: component and token alignment (tracking)

[joshsadam]

Problem

PR #87 rewrote the design-system docs around quiet, precise, accessible, compact, and trustworthy UI. Several components, tokens, and previews still lag behind that direction.

We need a clear order to close the gap without creating one giant PR.

What we will build

Nothing new in this issue. This tracks the migration work split into PR-sized issues.

Completed

Issue	Work	Landed in
#88	CSS token baseline fixes (hover, focus, page heading) + Button verification	PR #83
#89	Button verification (folded into #88)	PR #83
#90	Form semantic tokens (FormStyles, switch, form-builder checkboxes)	PR #113
#91	Tabs semantic tokens (TabsStyles, focus ring, lazy-panel skeleton)	PR #72
#92	Link semantic accent and shared focus ring	PR #114

Recommended order (remaining)

1. refactor(tokens): clean up Tooltip and DataGrid token hygiene #93 — Small token-hygiene pass for Tooltip and DataGrid radius/shadow/motion values.
2. refactor(typography): migrate to semantic colour tokens #95 — Typography semantic colour tail (CodeBlock and any remaining neutral utilities). Type scale landed in PR Align typography with role-based type scale #101; colour alignment remains.
3. refactor(previews): align Tabs, Tooltip, and Typography examples with design system #99 — Tabs, Tooltip, and Typography preview surfaces. Tabs previews largely cleaned in PR Cleanup of Tabs Styling #72; Tooltip previews still drift.
4. feat(tokens): add success and warning four-step colour ladder #96 — Success/warning four-step tokens before any filled status UI.

flowchart TD
  Done88["#88 done (PR #83)"]
  Done90["#90 done (PR #113)"]
  Done91["#91 done (PR #72)"]
  Done92["#92 done (PR #114)"]
  H93["#93 Tooltip and DataGrid token hygiene"]
  Ty95["#95 Typography colour tail"]
  P99["#99 Preview cleanup"]
  T96["#96 Success/warning ladder"]
  FutureUI["Future status UI"]

  Done88 --> Done90
  Done88 --> Done92
  Done88 --> Ty95
  Done92 --> P99
  H93 --> P99
  Ty95 --> P99
  Done91 -.-> P99
  Done90 -.-> P99
  T96 -.-> FutureUI

Loading

Source of truth

Lookbook design-system docs on main (merged via PR #87). Docs lead for listed migration targets; code catches up per child issue.

Done when

All child issues are closed and docs/lookbook/design_system/02-tokens.md.erb has no open rows in What's On Our List.

Child issues: #88 ✅ #90 ✅ #91 ✅ #92 ✅ #93 #95 #96 #99.

Folded issues: #89 is folded into #88. #94 is folded into #93.