Update frontend typography system

This commit is contained in:
2026-03-21 13:09:07 +01:00
parent 26591424d0
commit d3b7819df3
3 changed files with 24 additions and 10 deletions

View File

@@ -39,6 +39,7 @@ It is intentionally implementation-focused:
| --- | --- | --- | --- |
| 2026-03-21 | Phase 0 | Completed | Created overhaul branch, audited the current frontend, and locked the route map, component boundaries, migration path, and shared-state ownership. |
| 2026-03-21 | P1.1 | Completed | Replaced the legacy token root with semantic background, surface, text, border, focus, shadow, and semantic accent ramps while keeping compatibility aliases for incremental migration. |
| 2026-03-21 | P1.2 | Completed | Switched the app to Fraunces, IBM Plex Sans, and IBM Plex Mono with distinct display, body, UI, and code font roles instead of one shared heading font. |
### Lessons Learned
@@ -47,6 +48,7 @@ It is intentionally implementation-focused:
- Existing contracts in `LookupContracts.cs` already contain the identifiers needed for deep links and cross-surface navigation: table slug, group key, column key, roll band, and result id.
- Diagnostics already behaves like a separate workflow and should be moved under `Tools` early, before the `Tables` page is rewritten further.
- `localStorage` access is currently page-local and ad hoc. Theme, recents, pins, and table context need one shared storage boundary before more UI work starts.
- The old typography setup coupled display and utility text under a single token. The new shell work needs separate display and UI font roles to avoid decorative type in controls.
## Target Outcomes
@@ -249,7 +251,7 @@ Create the implementation foundation so the visual overhaul does not start with
| Task | Status | Notes |
| --- | --- | --- |
| `P1.1` | Completed | Semantic token layer landed in `wwwroot/app.css` with compatibility aliases to keep existing pages stable. |
| `P1.2` | Pending | Typography update will change font loading and global font tokens. |
| `P1.2` | Completed | Font loading now uses Fraunces, IBM Plex Sans, and IBM Plex Mono with explicit role-based tokens. |
| `P1.3` | Pending | Theme modes will be introduced after typography is stable. |
| `P1.4` | Pending | Theme persistence depends on the theme state service. |
| `P1.5` | Pending | Shell replacement follows once tokens and theme plumbing exist. |