Skip to content

feat(theme): add a text-heading-3xl rung above the heading ladder - #1045

Open
gabriel-lisboa-azion wants to merge 2 commits into
mainfrom
feat/theme-heading-3xl
Open

gabriel-lisboa-azion wants to merge 2 commits into
mainfrom
feat/theme-heading-3xl

Conversation

@gabriel-lisboa-azion

Copy link
Copy Markdown
Contributor

Summary

  • Adds text-heading-3xl, which takes over the display size text-heading-2xl had (3xl / 5xl / 6xl, tight leading), for the one headline a page opens on.
  • text-heading-2xl becomes a step smaller (3xl / 4xl / 5xl, no leading), and tracking.tighter tightens from −0.05rem to −0.16rem for these two display rungs; xl and below now set tracking.normal.

How to test

  1. pnpm --filter @aziontech/theme build:tokens → dist/v4/globals.css gains the text-heading-3xl utility; node --test "test/**/*.test.mjs" in packages/theme → 17 pass.
  2. Storybook → Foundations → Typography → the ladder shows Heading 3xl above Heading 2xl, each with its new size and tracking.
  3. Storybook → Components/Content/HeroTitle and Components/Documentation/DocPageHeader → the headline renders one step smaller (both use text-heading-2xl).

Notes

  • Visual change for every text-heading-2xl consumer (hero-title, doc-page-header, doc-prose's h1): they render a step smaller. Move a headline to text-heading-3xl to keep the old size. Expect the visual job to need a baseline regen for those stories.
  • packages/webkit/catalog.json is regenerated for the new token, so the squash also touches webkit.

The display size that text-heading-2xl carried moves up to a new text-heading-3xl, and
text-heading-2xl becomes a step smaller (3xl / 4xl / 5xl). tracking.tighter tightens to
-0.16rem and is kept for those two display rungs; the rest of the heading ladder sets
tracking.normal.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants