[IAmJSD]

The stylesheet had no body line-height (text used the browser's cramped ~1.2 default), form controls did not inherit the page font (inputs in one form rendered at 13.33px, 14.4px and 14px), and headings without a page-specific rule got browser default sizes. This PR adds a body line-height, a token-based heading scale and one font size for form controls, and swaps literal sizes and weights that exactly equal a design token for that token.

Refs #741
Partial: off-scale literal font sizes (0.8rem, 0.85rem, 0.9rem, 0.95rem, ...) are not snapped onto the token scale, because that visibly changes dozens of components and needs a design call.

What changed

• frontend/src/styles/base.css: body { line-height: var(--cudly-lh-normal) } (1.5); button, input, select, textarea { font: inherit; font-size: var(--cudly-fs-sm); line-height: var(--cudly-lh-tight) }; a zero-specificity :where(h1..h6) scale on the tokens (h1 --cudly-fs-2xl, h2 xl, h3 lg, h4 md, h5/h6 sm) with tight line-height and bold weight (3e46a9a).
• Literal font sizes equal to a --cudly-fs-* value (0.75/0.875/1/1.75rem) and all font weights (bold, 700, 600, 500) now use the matching token, about 60 lines across 6 CSS files (components, forms, modals, plans, settings, tables). Pure substitution: no computed value changes (751ea48).
• The .modal-content input rule and the bare select rule use --cudly-fs-sm (14px) instead of 14.4px, so every control in a form matches the buttons (73385ea).
• Two literals that main added and that equal a token are tokenized the same way: .account-delete-pending-total font weight 600 and .last-updated-stamp font size 0.75rem (25c2918). No computed value changes.
• .form-help (<small>) is now display: block, placed after main's .form-group [aria-invalid="true"] rule. As an inline element its wrapped lines sat 24px apart under the new line-height and its margin-top never applied (b772276).
• Tests: frontend/src/__tests__/typography.test.ts (jest, reads the stylesheets) and frontend/tests-e2e/typography.spec.ts (Playwright, checks computed fonts in Chromium, which jsdom cannot cascade).

Why this approach

The heading scale uses :where() so the ~20 existing contextual heading rules keep winning; only headings that had no rule change size. The scale tracks the browser defaults it replaces, and heading weight stays bold so headings that set only a size do not change weight. Form controls keep a tight line-height so button and input heights barely change (otherwise every button would grow about 4px). Only exact-equivalent literal-to-token swaps are included; snapping off-scale sizes would be a visible design change and would collide with most other open CSS branches.

Screenshots

Screenshots were taken before this branch was merged with main; before = main at a14dc8f. After is this branch at that time. Both are headless Chromium at 1440x900 against the repo's mocked e2e API.

Before	After

• Create API Key modal: on main the name input (14.4px) is larger than the password and date inputs (13.33px system font), and the date input uses a different face. On this branch all inputs use the page font at 14px like the buttons, and help text has block spacing.
• Admin > Users: the same page with the 1.5 body line-height instead of ~1.2. Rows and paragraphs are less cramped; this is the main site-wide change to check.

Verification

Run on this branch's head f5ba4e5d, merged with main 6122fa24:

• npm run lint: 0 errors. Typecheck and build pass.
• Jest: 4116 passed, 1 skipped, 0 failed, including the new typography.test.ts (20 tests over 13 stylesheets).
• Playwright (full e2e suite): 233 passed, 0 failed, including the 2 new typography.spec.ts tests. The input/button size check fails on main.
• Secrets scan clean.
• Merged with main at 6122fa2; conflicts in components.css, modals.css, forms.css, tables.css and tabs.css resolved, see the merge commits.

Notes for review

• Site-wide visible change: the 1.5 body line-height makes every page a bit taller, including table rows, wrapped table headers such as "Last Login", and paragraphs. All layout e2e specs still pass.
• Smaller changes: headings without a contextual rule change size slightly (h1 32px to 28px, h2 24px to 22px, h5/h6 up to 14px); bare inputs go from 13.33px to 14px; selects and modal text inputs go from 14.4px to 14px; date and number inputs use the page font instead of the system UI font.
• Not done (design call): collapsing the ~20 remaining off-scale literal sizes onto the token scale, and unifying heading weights to 600.
• Pre-existing bug seen but not addressed: in the Create API Key modal each permission checkbox sits centered on its own line above its label, because .modal-content label is display: block and the checkbox gets width: 100% from the modal input rules. That belongs to a forms/modal issue.
• Commits 751ea48 and 25c2918 are mechanical substitutions and are easy to regenerate after a rebase.
• The typography.test.ts guard against literals that duplicate a token only matches font-size: <literal>; and font-weight: <literal>;. It does not catch !important, the font: shorthand or px equivalents.
• .form-help keeps its off-scale 0.8rem size.

Overlaps

This touches base.css, components.css, forms.css, modals.css, plans.css, settings.css and tables.css. Open CSS branches that edit the same files: #737 (status badges; conflicts textually) and #743 (modal/card unification; merges cleanly with this branch today).

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

• Run on-demand review

_{This review includes 10 billable files and costs up to $2.50.}

Or wait 59 minutes for your next included review.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: LeanerCloud/cloud-commitments-platform
• Branch: main
• File: .coderabbit.yaml
• Commit: 19534fc
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 493e2295-51e6-4b2f-9a11-e061aaf5ac39

Commits

Reviewing files that changed from the base of the PR and between 19534fc and 9ffff64.

Files selected for processing: 10

• frontend/src/__tests__/typography.test.ts
• frontend/src/styles/base.css
• frontend/src/styles/charts.css
• frontend/src/styles/components.css
• frontend/src/styles/forms.css
• frontend/src/styles/modals.css
• frontend/src/styles/plans.css
• frontend/src/styles/settings.css
• frontend/src/styles/tables.css
• frontend/tests-e2e/typography.spec.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE f5ba4e5d277b577c9281024f83ecb3e9431f4342

Blocking:

• none
  Non-blocking:
• frontend/src/tests/typography.test.ts:46-47: the "no literal duplicating a token" guard only matches font-size|font-weight: <literal>;. It misses !important, the font: shorthand and px equivalents (12px/14px/16px), so new duplicates can still slip in.
• frontend/src/styles/forms.css:171: .form-help is still the off-scale 0.8rem. This is acknowledged in the body; just noting it next to the new display:block.
  Attacked: Diffed origin/main...HEAD. Every changed CSS line is either a value-identical literal-to-token swap (checked against the base.css token table) or one of the stated changes: the 0.9rem select/modal input, the base.css foundation, .form-help display:block. Merge 0c3561e: confirmed main's tokenized transitions (fix(frontend): clip rounded table corners, style headers and tidy CSS #1366), --cudly-surface-muted (fix(frontend): replace undefined CSS tokens and inline MFA panel styles #1382), and its removals of the ramp/tabs/.planned-purchases-table rules all survived, with no rules resurrected. Merge f5ba4e5: main's .form-group [aria-invalid="true"] rule (fix(frontend): rename filter Clear to Select none, inline user errors #1368) is kept ahead of .form-help, and fix(frontend): rename filter Clear to Select none, inline user errors #1368's new <small class="form-help"> usages are compatible with block display. Follow-up 25c2918 swaps two exact-equal literals (600 to semibold, 0.75rem to xs), so nothing computed changes. Newest main commit f2ab673 has no CSS, and merge-tree is clean.

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 9ffff64c814dc80e0b0961a88e8ac1d2384809c2

Blocking:

• none
  Non-blocking:
• frontend/src/tests/typography.test.ts:44-48 vs open PR chore(frontend): replace mixed Unicode glyphs with one SVG icon set #1386 (issue 751): 751 adds frontend/src/styles/icons.css with button.icon-btn { font-size: 1rem; } (icons.css:44). This guard scans every stylesheet, so whichever of chore(frontend): add typography foundation for text, headings, controls #1378/chore(frontend): replace mixed Unicode glyphs with one SVG icon set #1386 lands second turns main's jest red. I confirmed it: on the merge-tree of both heads (2996200e), typography.test.ts fails "icons.css has no literal font size or weight that duplicates a token". The fix is one line in 751 (var(--cudly-fs-md), a token already on main). Land 741 first or re-merge 751 after it.
• frontend/src/tests/typography.test.ts:46-47: as noted in the earlier review and the body, the guard misses !important, the font: shorthand and px equivalents.
• frontend/src/styles/base.css:120-127: font: inherit on all buttons means buttons inside bold or semibold contexts (th, label, .badge) now inherit that weight instead of the UA 400. This is intended and was shown in the screenshots, but it is a site-wide side effect worth one line in the body.
  Attacked: Diffed origin/main...HEAD (HEAD~1^2 == origin/main 19534fc, base == main). Every changed line is either a value-identical literal-to-token swap (checked against the token table at base.css:49-61) or one of the stated intentional changes (base.css foundation, 0.9rem -> fs-sm on select/modal inputs, .form-help display:block). I compared the branch's original hunks (a14dc8f..b772276) with the current PR diff. The only lost hunks are in rules that main deleted: the forms.css ramp block, the tabs.css .tabs/.tab-btn rules, and the tables.css th/.planned-purchases-table overrides. Nothing main removed comes back. Main's tokenized transitions, --cudly-surface-muted and the fix(frontend): rename filter Clear to Select none, inline user errors #1368 aria-invalid rule all survived. Follow-ups 25c2918 and 9ffff64 are exact-equal swaps (600 -> semibold, 500 -> medium, 0.75rem -> xs). No literal flagged by the regex remains. Open fix(frontend): status badges use four shapes and conflicting colors per status #737 (fix(frontend): render every status badge with shared tones and labels #1374) and chore(frontend): unify four modal systems and five card styles, reuse kpi-tile #743 (fix(frontend): one card and dialog surface, kpi-tile on Opportunities #1380) add no flagged literals.

[IAmJSD]

Local verification at 9ffff64c merged onto current main (2a3110e8; merge-tree ff56058f; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree ab77aa6e, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4248 passed, 4249 total), and the full Playwright suite (247 passed).
• CI is green on 9ffff64c (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 9ffff64c.