Blankslate: make compact styling the default#4110
Open
dylanatsmith wants to merge 5 commits into
Open
Conversation
Mirrors primer/react#8034. The default Blankslate now uses the compact padding, heading, and body text styles, and the redundant responsive @container block has been removed since the compact presentation it produced is now the default. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 77a775b 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 |
The pinned @primer/stylelint-config no longer flags these spacing-token values, so the disable comments are reported as needless. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
13 tasks
Keep the original default (32) and spacious (80/40) padding values; only the heading, body text, and action margins remain compacted. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Restore the original .blankslate-action margins; only the heading and body text sizes remain compacted. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Padding and action margins were reverted, so the changeset now only describes the heading and body text size changes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the default Primer::Beta::Blankslate styling to use the “compact” typography scale by default (smaller heading and body font sizes), aligning view_components with the upstream Primer React change. It also adds a changeset entry documenting the restyle.
Changes:
- Change the default Blankslate body text size from
--text-body-size-largeto--text-body-size-medium. - Change the default Blankslate heading size from
--text-title-size-mediumto--text-title-size-small. - Remove the previous
@container (max-width: 34rem)block and add a changeset describing the update.
Show a summary per file
| File | Description |
|---|---|
| app/components/primer/beta/blankslate.pcss | Updates default typography sizes and removes the responsive @container block. |
| .changeset/blankslate-size-scale.md | Documents the Blankslate default typography restyle as a minor changeset. |
Review details
- Files reviewed: 2/2 changed files
- Comments generated: 2
- Review effort level: Low
Comment on lines
111
to
115
| /* was .clean-background | ||
| ** TO DO: deprecate this and use utility instead */ | ||
| .blankslate-clean-background { | ||
| border: 0; | ||
| } |
| "@primer/view-components": minor | ||
| --- | ||
|
|
||
| `Blankslate`: The heading and body text now use the smaller compact sizes by default, and the redundant responsive `@container` block has been removed since the compact typography it produced is now the default |
llastflowers
approved these changes
Jun 26, 2026
llastflowers
left a comment
llastflowers
left a comment
Contributor
There was a problem hiding this comment.
Looks good to me! ✨
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.
What are you trying to accomplish?
Mirrors primer/react#8034 for view_components. That PR shifts the
Blankslatesize scale so the compact presentation becomes the default. view_components has nosizeprop, so the portable part of that change is: make the compact typography the default and drop the now-redundant responsive block.The default
Blankslateheading and body text now render at the smaller compact sizes (text-title-size-medium->smallfor the heading,text-body-size-large->mediumfor body copy). Padding, spacious padding, and action margins are unchanged from their previous defaults.Screenshots
N/A (visual change is a typography restyle of the default; no committed Playwright snapshots exist for Blankslate to regenerate).
Integration
This restyles the default
Blankslatetypography everywhere it is used. No API changes, so no consumer code updates are required.List the issues that this change affects.
N/A
Risk Assessment
What approach did you choose and why?
The previous CSS produced the compact typography only below the
34rem@containerbreakpoint. Since the compact heading and body sizes are now the intended default at all widths, I promoted those values into the base.blankslate-headingand& prules and deleted the@container (max-width: 34rem)block entirely, rather than leaving a redundant override. I also removed severalprimer/spacingstylelint disable comments that the pinned@primer/stylelint-confignow reports as needless.Unlike primer/react#8034, there is no
sizeprop,BlankslateContext, orsmall/medium/largescale to rescale here, andprimary_actionalready renders a:mediumbutton, so those parts of the upstream PR do not apply.Anything you want to highlight for special attention from reviewers?
The scope here is narrower than the upstream React PR: only the heading and body typography become compact by default. Padding (default and spacious) and action margins are deliberately left at their existing values.
One judgement call: I marked the changeset as
minorrather thanmajor. primer/react wentmajorbecause it removed thesize="small"API; view_components has no such API, so this is a visual restyle with no breaking change. Happy to adjust if you would prefer a different bump.Accessibility
Merge checklist