From d3b7819df3a58a56e1135ebc9a7d5f19015eca3b Mon Sep 17 00:00:00 2001 From: Frank Tovar Date: Sat, 21 Mar 2026 13:09:07 +0100 Subject: [PATCH] Update frontend typography system --- ...s_frontend_overhaul_implementation_plan.md | 4 ++- src/RolemasterDb.App/Components/App.razor | 2 +- src/RolemasterDb.App/wwwroot/app.css | 28 +++++++++++++------ 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/docs/tables_frontend_overhaul_implementation_plan.md b/docs/tables_frontend_overhaul_implementation_plan.md index bce6aee..d69e550 100644 --- a/docs/tables_frontend_overhaul_implementation_plan.md +++ b/docs/tables_frontend_overhaul_implementation_plan.md @@ -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. | diff --git a/src/RolemasterDb.App/Components/App.razor b/src/RolemasterDb.App/Components/App.razor index f5d8dba..a6c6d18 100644 --- a/src/RolemasterDb.App/Components/App.razor +++ b/src/RolemasterDb.App/Components/App.razor @@ -8,7 +8,7 @@ - + diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css index f8f5d45..2030e5d 100644 --- a/src/RolemasterDb.App/wwwroot/app.css +++ b/src/RolemasterDb.App/wwwroot/app.css @@ -35,8 +35,10 @@ --info-1: #e5eef4; --info-2: #9fb8c8; --info-3: #4f7086; - --font-body: "Domine", Georgia, serif; - --font-heading: "Source Sans 3", "Segoe UI", sans-serif; + --font-display: "Fraunces", Georgia, serif; + --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; + --font-ui: "IBM Plex Sans", "Segoe UI", sans-serif; + --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace; /* Temporary compatibility aliases while existing page styles are migrated. */ --paper: var(--bg-canvas); @@ -79,12 +81,16 @@ h3, h4, h5, h6, +.panel-title { + font-family: var(--font-display); + font-weight: 500; +} + label, button, summary, th, .eyebrow, -.panel-title, .detail-label, .branch-condition, .critical-branch-condition, @@ -95,8 +101,8 @@ th, .affix-badge, .table-list-title, .legend-label { - font-family: var(--font-heading); - font-weight: 400; + font-family: var(--font-ui); + font-weight: 500; } strong, @@ -119,6 +125,12 @@ textarea { font: inherit; } +code, +pre, +.code-block { + font-family: var(--font-mono); +} + .dashboard-grid { display: grid; gap: 1.25rem; @@ -647,7 +659,7 @@ textarea { .table-select-trigger-title { color: var(--ink); - font-family: var(--font-heading); + font-family: var(--font-ui); } .table-select-trigger-chips, @@ -733,7 +745,7 @@ textarea { .table-select-option-title { color: var(--ink); - font-family: var(--font-heading); + font-family: var(--font-ui); font-weight: 400; white-space: nowrap; overflow: hidden; @@ -1290,7 +1302,7 @@ textarea { padding: 0.9rem 1rem; cursor: pointer; list-style: none; - font-family: var(--font-heading); + font-family: var(--font-ui); color: #5b4327; }