refactor(css): replace raw em values with tokens in headings.css

[Armansiddiqui9]

Closes #12372

@mekarpeles adds via @jimchamp: and possibly closes #5349

refactor

Technical

Replaces all raw em values in headings.css with design tokens and
restores correct heading hierarchy. The core bug was h3 using --font-size-label-medium (12px) — smaller than body text.

Heading Scale After This PR

Heading	Token	Size
h1	--font-size-headline-large	32px
h2	--font-size-headline-small	24px
h3	--font-size-title-large	22px
h4	--font-size-title-medium	16px
h5	--font-size-title-small	14px
h6	--font-size-label-medium	12px

Changes

• static/css/base/headings.css only — no other files touched

Testing

Run npm run lint:css — should pass with no errors
Run npm run build-assets:css — should compile successfully
Visit localhost:8080 and check

Screenshot

Before

After

Stakeholders

@RayBB @lokesh

[mekarpeles]

Thanks for the contribution, @Armansiddiqui9!

🤖 Copilot has been assigned for an initial review.

The linked issue (#12372) hasn't been triaged yet — triage happens on Mondays and Fridays. There are currently 75 open non-draft PRs ahead of yours.

PR triage checklist (maintainers / Pam)

• PR description — not empty; explains what the change does and how to verify it
• References an issue — PR body contains a #NNN reference
  • Linked issue is triaged — has a Priority: * label (not just Needs: Triage)
  • Linked issue is assigned — has at least one assignee
• Commit history clean — no WIP/fixup/conflict noise; commit messages are meaningful
• CI passing — no failing check-runs
• Test cases present — if the change touches substantive logic, test coverage exists or is explained
• Proof of testing — PR body includes a description of what was tested, a screenshot, or a video

Note

This comment was automatically generated by Pam, Open Library's Project AI Manager, on behalf of @mekarpeles. Pam is designed to provide status visibility, perform basic project management functions and relevant codebase research, and provide actionable feedback so contributors aren't left waiting.

[Copilot]

Pull request overview

Refactors headings.css to replace raw em font sizes with design-token variables and re-establish a consistent heading size hierarchy (notably increasing h3 so it’s no longer smaller than body text).

Changes:

• Replaced raw em values in heading styles with --font-size-* design tokens.
• Adjusted heading font-size assignments to follow a large → small scale (e.g., h2, h3, h4, etc.).

[mekarpeles]

Seems like a very positive change; in the issue, @RayBB tags @lokesh; I agree and am happy to defer to his decision on sizing! Thank you @Armansiddiqui9 for the PR!

[lokesh]

LGTM