From 4bc0f890f77bccd3239f64265071c8fb0a9419e7 Mon Sep 17 00:00:00 2001 From: npub1cr79sy35cdv9vqsnnmkrgl8d0wp27edk7mqsw2p5s52upsrv28pszw3kur Date: Thu, 30 Jul 2026 22:10:19 +0200 Subject: [PATCH] refactor(desktop): consolidate type ramp to 6 prose sizes + 1 mono MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The desktop app had 13 distinct in-use text sizes. Collapse them to a single 7-step ramp — Meta 12, Body 14, Title 18, Section 24, Page 30, Display 40, plus the 36px mono nsec key — by remapping the size tokens in tailwind.config.js so existing class names compile onto the new steps. No component files are touched. The remap: - Sub-12 meta band folds up to Meta 12: text-3xs (8px), text-badge (10px), text-2xs (11px) become aliases of the 12px xs step. - text-base (16px) folds down to Body 14, so descriptions sit one clean step below their 18px headers. - text-xl (20px) folds down to Title 18. - text-4xl (36px) and text-5xl (48px) fold to a single Display 40, matching text-title. Body 14 and Meta 12 carry ~95% of all text, so most screens barely move; the two visible deltas are descriptions 16→14 and the meta band lifting to 12. Every remaining prose step is ≥1.17x its neighbor. Before/after captures of all 13 settings screens and 5 daily-driver surfaces (from the running app via the Playwright e2e harness, with the token remap as the only variable) are attached to the PR. Co-authored-by: Thomas Petersen Signed-off-by: Thomas Petersen --- desktop/tailwind.config.js | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/desktop/tailwind.config.js b/desktop/tailwind.config.js index 8905fc16c..71d93a18a 100644 --- a/desktop/tailwind.config.js +++ b/desktop/tailwind.config.js @@ -2,15 +2,34 @@ export default { theme: { extend: { - // Sub-`text-xs` ramp for meta text (timestamps, count badges, tracking - // labels) and tiny glyphs. Defined in rem so Cmd +/- zoom — which scales - // the root font-size — keeps scaling them. Do NOT reintroduce - // arbitrary `text-[…rem]` / `text-[…px]` literals; the px-text guard - // rejects them. Stock scale picks up from here: xs (12px), sm (14px)… + // Consolidated type ramp: 6 prose sizes + 1 mono. Every text class in + // the app compiles onto one of these steps: + // + // Meta 12 (xs) · Body 14 (sm) · Title 18 (lg) · Section 24 (2xl) · + // Page 30 (3xl) · Display 40 (title) · Key 36 (nsec-key, mono) + // + // Legacy class names are remapped here instead of rewritten at every + // call site: the sub-12 meta band (3xs 8px, badge 10px, 2xs 11px) folds + // up to Meta 12, `text-base` (16px) folds down to Body 14, `text-xl` + // (20px) folds down to Title 18, and `text-4xl` (36px) / `text-5xl` + // (48px) fold to Display 40. Defined in rem so Cmd +/- zoom — which + // scales the root font-size — keeps scaling them. Do NOT + // reintroduce arbitrary `text-[…rem]` / `text-[…px]` literals; the + // px-text guard rejects them. fontSize: { - "2xs": "0.6875rem", // 11px — meta-text workhorse (timestamps, badges) - "3xs": "0.5rem", // 8px — tiny glyphs / micro labels - badge: "0.625rem", // 10px — compact status badges + // Meta 12 — timestamps, count badges, tracking labels, tiny glyphs. + // Aliases of the stock `text-xs` step. + "2xs": "0.75rem", + "3xs": "0.75rem", + badge: "0.75rem", + // Body 14 — folds the old 16px body/description step down one clean + // step below its 18px header. Matches stock `text-sm` exactly. + base: ["0.875rem", { lineHeight: "1.25rem" }], + // Title 18 — folds the old 20px step onto stock `text-lg`. + xl: ["1.125rem", { lineHeight: "1.75rem" }], + // Display 40 — the single large display step (was 36/40/48). + "4xl": ["2.5rem", { lineHeight: "1.15" }], + "5xl": ["2.5rem", { lineHeight: "1.15" }], // 40px — onboarding page titles (tightened tracking for large display type) title: ["2.5rem", { lineHeight: "1.15", letterSpacing: "-0.02em" }], // 36px — the backup-step private key, shown large in monospace