Repository navigation
Update tokens to use lineHeight scale - #1297
Merged
Merged
Conversation
lukasoppermann
requested review from
Copilot and
jonrohan
and removed request for
Copilot
January 22, 2026 08:41
🦋 Changeset detectedLatest commit: c95aa6c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
lukasoppermann
temporarily deployed
to
github-pages
January 22, 2026 08:43 — with 
GitHub Actions
Inactive
Contributor
Design Token Diff (CSS)
|
Contributor
Design Token Diff (StyleLint)
|
Contributor
Design Token Diff (Figma)
|
Contributor
Design Token Diff (Fallbacks)
|
lukasoppermann
temporarily deployed
to
github-pages
January 22, 2026 11:17 — with
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request introduces a new set of base line-height tokens (tight, snug, normal, relaxed, loose) and refactors functional typography tokens to reference these new base tokens instead of using hardcoded numeric values. The goal is to improve consistency and maintainability of line-height values across the design system.
Changes:
- Added five new base line-height tokens with descriptive names and clear usage guidance
- Updated functional typography tokens across display, title, subtitle, body, caption, and codeBlock styles to reference the new base tokens
- Added a changeset documenting the changes
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/tokens/base/typography/typography.json5 | Introduces five new base lineHeight tokens (tight: 1.25, snug: 1.375, normal: 1.5, relaxed: 1.625, loose: 1.75) with comprehensive descriptions for each |
| src/tokens/functional/typography/typography.json5 | Updates all functional typography lineHeight values to reference the new base tokens, resulting in value changes for most typography styles |
| .changeset/upset-ends-switch.md | Documents the addition of lineHeight tokens as a minor version change |
Comments suppressed due to low confidence (7)
src/tokens/functional/typography/typography.json5:462
- The line-height value changes from 1.5385 to 1.5 (normal token). This is a breaking change that will affect the visual appearance of codeBlock text. The difference is approximately 0.04, which could affect code readability. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether the original value should be preserved or if a new base token should be created.
$value: '{base.text.lineHeight.normal}',
src/tokens/functional/typography/typography.json5:71
- The line-height value changes from 1.4 to 1.375 (snug token). This is a breaking change that will affect the visual appearance of display text. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether a new base token with value 1.4 should be created, or if the snug token value should be adjusted to 1.4.
$value: '{base.text.lineHeight.snug}',
src/tokens/functional/typography/typography.json5:336
- The line-height value changes from 1.42857 to 1.5 (normal token). This is a breaking change that will affect the visual appearance of body medium text. The difference is approximately 0.07, which is significant. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether the original value should be preserved or if a new base token should be created.
$value: '{base.text.lineHeight.normal}',
src/tokens/functional/typography/typography.json5:47
- The line-height value changes from 1.4 to 1.375 (snug token). This is a breaking change that will affect the visual appearance of display text. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether a new base token with value 1.4 should be created, or if the snug token value should be adjusted to 1.4.
$value: '{base.text.lineHeight.snug}',
src/tokens/functional/typography/typography.json5:152
- The line-height value changes from 1.6 to 1.625 (relaxed token). This is a breaking change that will affect the visual appearance of title medium text. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether a new base token with value 1.6 should be created, or if the relaxed token value should be adjusted to 1.6.
$value: '{base.text.lineHeight.relaxed}',
src/tokens/functional/typography/typography.json5:255
- The line-height value changes from 1.6 to 1.625 (relaxed token). This is a breaking change that will affect the visual appearance of subtitle text. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether a new base token with value 1.6 should be created, or if the relaxed token value should be adjusted to 1.6.
$value: '{base.text.lineHeight.relaxed}',
src/tokens/functional/typography/typography.json5:349
- The line-height value changes from 1.66667 to 1.625 (relaxed token). This is a breaking change that will affect the visual appearance of body small text. The difference is approximately 0.04, which could affect readability. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether the original value should be preserved or if a new base token should be created.
$value: '{base.text.lineHeight.relaxed}',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| }, | ||
| lineHeight: { | ||
| $value: 1.3333, | ||
| $value: '{base.text.lineHeight.tight}', |
There was a problem hiding this comment.
The line-height value changes from 1.3333 to 1.25 (tight token). This is a breaking change that will affect the visual appearance of caption text. The difference is approximately 0.08, which is significant and will make the text more compact. If this is intentional to standardize line-heights, it should be clearly documented in the changeset. If the goal is to maintain the exact same visual appearance, consider whether the original value should be preserved or if a new base token should be created.
This issue also appears in the following locations of the same file:
- line 462
- line 71
- line 336
- line 47
- line 152
- ...and 2 more
Suggested change
| $value: '{base.text.lineHeight.tight}', | |
| $value: '1.3333', |
| '@primer/primitives': minor | ||
| --- | ||
|
|
||
| Added lineHeight tokens |
There was a problem hiding this comment.
The changeset description "Added lineHeight tokens" is incomplete and potentially misleading. This PR not only adds new base lineHeight tokens but also updates existing functional typography tokens to reference them, which results in breaking changes to actual line-height values (e.g., 1.4 to 1.375, 1.6 to 1.625, 1.42857 to 1.5, etc.). The changeset should clearly document these breaking changes so consumers of this package are aware that upgrading will affect visual appearance.
Suggested change
| Added lineHeight tokens | |
| Added base `lineHeight` tokens and updated existing functional typography tokens to reference them. | |
| This changes some actual line-height values (for example: `1.4` → `1.375`, `1.6` → `1.625`, `1.42857` → `1.5`), | |
| which will slightly adjust text vertical spacing. Consumers using these typography tokens should be aware | |
| that upgrading may result in visible changes to line-height. |
lukasoppermann
temporarily deployed
to
github-pages
January 22, 2026 14:49 — with
GitHub Actions
Inactive
Merged
This branch was previously deployed
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
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
This pull request introduces a set of new base line-height tokens for typography and updates the functional typography tokens to reference these new base tokens. This change improves consistency, maintainability, and reusability of line-height values across the codebase by centralizing their definitions.