refactor(desktop): consolidate type ramp to 6 prose sizes + 1 mono - #3797
Open
thomaspblock wants to merge 1 commit into
Open
refactor(desktop): consolidate type ramp to 6 prose sizes + 1 mono#3797thomaspblock wants to merge 1 commit into
thomaspblock wants to merge 1 commit into
Conversation
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 <thomasp@squareup.com> Signed-off-by: Thomas Petersen <thomasp@squareup.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Consolidates the desktop app's 13 in-use text sizes into a single 7-step type ramp — 6 prose sizes + 1 mono — by remapping the size tokens in
desktop/tailwind.config.js. Existing class names compile onto the new steps, so no component files are touched.Proposed and evidenced by @jmarr with before/after captures of the running app: buzz-typeramp-diffs.zip (13 settings screens + 5 daily-driver surfaces, captured through the Playwright e2e harness at commit
4253688with the token remap as the only variable).The ramp
text-title(+text-4xl/text-5xlaliases)text-nsec-keytext-3xltext-2xltext-lg(+text-xlalias)text-sm(+text-basealias)text-xs(+text-2xs/text-3xs/text-badgealiases)The net visible change is two moves:
Body 14 and Meta 12 carry ~95% of all text (987
text-sm+ 597text-xscall sites), so most screens barely move. Every remaining prose step is ≥1.17×, most ≥1.25×.Why remap tokens instead of rewriting call sites
One file, one owner, zero churn across ~1,800 call sites. Legacy names (
text-2xs,text-badge,text-base,text-xl,text-4xl,text-5xl) become documented aliases of their ramp step; call sites can migrate to canonical names incrementally without any visual change.Verification
pnpm build(tsc + vite) ✅pnpm typecheck✅pnpm check(biome + file-sizes + px-text guard + pubkey-truncation) ✅pnpm test— 3835/3835 pass ✅.text-2xs/.text-3xs/.text-badge→ 0.75rem,.text-base→ 0.875rem,.text-xl→ 1.125rem,.text-4xl/.text-5xl→ 2.5rem, and rem-based sizing preserved so Cmd +/- zoom still scales everything.Screenshots in the linked zip are light theme; dark theme uses identical sizes so the deltas are the same.