Skip to content

refactor(desktop): consolidate type ramp to 6 prose sizes + 1 mono #3797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thomaspblock wants to merge 2 commits into
base: main
Choose a base branch
from
+30 −9
Open

refactor(desktop): consolidate type ramp to 6 prose sizes + 1 mono #3797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bc0f89
refactor(desktop): consolidate type ramp to 6 prose sizes + 1 mono
Jul 30, 2026
5f2dbdc
test(desktop): update narrow-view description height for Body 14
Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 27 additions & 8 deletions desktop/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <html> 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 <html> 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
Expand Down
4 changes: 3 additions & 1 deletion desktop/tests/e2e/agents.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -723,9 +723,11 @@ test("moves agent actions into an overflow menu in a narrow view", async ({
});

await expect(page.getByTestId("agent-defaults-button")).toBeVisible();
// One line of the page description: text-base is Body 14 on the
// consolidated ramp, whose line-height is 1.25rem (20px).
await expect(
page.getByText("Set up and manage your agents.", { exact: true }),
).toHaveJSProperty("scrollHeight", 24);
).toHaveJSProperty("scrollHeight", 20);

await page.getByTestId("agents-page-content").evaluate((element) => {
(element as HTMLElement).style.width = "600px";
Expand Down
Loading