Set the markdown <hr> thickness to 1px ($border-width) - #3157
Open
dapirian wants to merge 1 commit into
Open
Conversation
🦋 Changeset detectedLatest commit: c884d48 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 |
dapirian
temporarily deployed
to
github-pages
September 2, 2026 04:00 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
The markdown thematic break (hr) rendered at 4px via the $em-spacer-3 spacing token, roughly 4x the ~1px used by every other markdown renderer and by Primer's own rules (headings, tables, and blockquote all use $border-width). Use $border-width for the hr so it matches the system's line weight and tracks the token if it ever changes. Only the existing $border-width token is used; no new tokens or API. Passes stylelint with no new disables.
dapirian
force-pushed
the
dapirian/markdown-hr-thickness
branch
from
September 2, 2026 04:20
c48978d to
c884d48
Compare
dapirian
marked this pull request as ready for review
September 2, 2026 04:38
dapirian
requested review from
joshfarrant and
llastflowers
and
a lite review from Copilot
September 2, 2026 04:38
Contributor
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The change is minimal, token-consistent with existing Primer borders, and includes an appropriate changeset entry.
Review tier: Lite
Findings: None
What changed in this PR
Adjusts Primer’s rendered markdown thematic break (<hr>) to use the standard border thickness token, bringing .markdown-body in line with the rest of the system’s rule/edge styling.
Changes:
- Update
.markdown-body hrheight from$em-spacer-3(4px) to$border-width(1px). - Add a changeset to publish the visual adjustment as a patch release for
@primer/css.
| File | Description |
|---|---|
| src/markdown/markdown-body.scss | Switches <hr> thickness to $border-width while keeping existing spacing/color behavior. |
| .changeset/markdown-hr-thickness.md | Records the change for a patch release of @primer/css. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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.
---(the markdown thematic break) currently renders as a 4px solid bar. This changes it to a standard 1px rule.I did not expect to develop strong feelings about a four-pixel line this week, and yet.
Everywhere else in the system, rules and edges use the
$border-width(1px) border token: headings, tables, blockquote. The<hr>is the exception. It uses a spacing token,$em-spacer-3(0.25em / 4px), as a thickness, which makes it roughly 4x heavier than the equivalent line in every other markdown renderer.Change: set the
<hr>thickness to$border-width(1px) instead of$em-spacer-3(0.25em / 4px). That is the only change: same margins, same full width, same solid fill, just 1px.$border-widthis Primer's line-thickness token (already used for the system's other rules), so the divider tracks it if it ever changes, rather than borrowing a spacing token as a thickness.Why
$border-width(1px) is the token used for every other rule in the system; the<hr>is the only place a spacing token stands in for a line weight.Why this belongs in
@primer/css(which is in KTLO mode). There is no newer package for it to move to..markdown-bodystyles server-rendered markdown output, plain HTML emitted by the markdown pipeline, whichprimer/reactandprimer/view_componentscomponents do not produce and cannot style. It is a global stylesheet concern, which is what@primer/cssstill owns, so a one-line tweak to this existing, still-shipped rule belongs here rather than as new work in a component library.Heads-up for reviewers:
.markdown-bodyis a widely-inherited default, so this is a visible change anywhere Primer-styled markdown renders. Flagging for design review rather than treating it as routine.Evidence: how other renderers and design systems draw this line
hrweightprose)<hr>