Skip to content

Blankslate: make compact styling the default #4110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dylanatsmith wants to merge 5 commits into
base: main
Choose a base branch
from
+7 −53
Draft

Blankslate: make compact styling the default #4110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2149a73
Blankslate: make compact styling the default
dylanatsmith Jun 23, 2026
65353cb
Remove needless primer/spacing stylelint disables in Blankslate
dylanatsmith Jun 23, 2026
d63215c
Revert Blankslate padding changes
dylanatsmith Jun 24, 2026
540d034
Revert Blankslate action margin changes
dylanatsmith Jun 24, 2026
77a775b
Narrow Blankslate changeset to typography scope
dylanatsmith Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/blankslate-size-scale.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@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
55 changes: 2 additions & 53 deletions app/components/primer/beta/blankslate.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

/* stylelint-disable-next-line selector-max-type */
& p {
font-size: var(--text-body-size-large);
font-size: var(--text-body-size-medium);
color: var(--fgColor-muted);
}

Expand All @@ -37,23 +37,19 @@
}

.blankslate-icon {
/* stylelint-disable-next-line primer/spacing */
margin-right: var(--control-small-gap);
/* stylelint-disable-next-line primer/spacing */
margin-bottom: var(--stack-gap-condensed);
/* stylelint-disable-next-line primer/spacing */
margin-left: var(--control-small-gap);
color: var(--fgColor-muted);
}

.blankslate-image {
/* stylelint-disable-next-line primer/spacing */
margin-bottom: var(--stack-gap-normal);
}

.blankslate-heading {
margin-bottom: var(--base-size-4);
font-size: var(--text-title-size-medium);
font-size: var(--text-title-size-small);
font-weight: var(--text-title-weight-medium);
text-wrap: balance;
}
Expand All @@ -63,16 +59,13 @@
}

.blankslate-action {
/* stylelint-disable-next-line primer/spacing */
margin-top: var(--stack-gap-normal);

&:first-of-type {
/* stylelint-disable-next-line primer/spacing */
margin-top: var(--stack-gap-spacious);
}

&:last-of-type {
/* stylelint-disable-next-line primer/spacing */
margin-bottom: var(--stack-gap-condensed);
}
}
Expand Down Expand Up @@ -102,7 +95,6 @@

/* stylelint-disable-next-line selector-max-type */
& h3 {
/* stylelint-disable-next-line primer/spacing */
margin: var(--stack-gap-normal) 0;

/* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
Expand All @@ -121,46 +113,3 @@
.blankslate-clean-background {
border: 0;
}

/* At the time these styles were written,
`34rem` was our "small" breakpoint width */
@container (max-width: 34rem) {
.blankslate {
--blankslate-outer-padding-block: var(--base-size-20);
--blankslate-outer-padding-inline: var(--base-size-20);
}

.blankslate-spacious {
--blankslate-outer-padding-block: var(--base-size-44);
--blankslate-outer-padding-inline: var(--base-size-28);
}

.blankslate-icon {
/* stylelint-disable-next-line primer/spacing */
margin-bottom: var(--stack-gap-condensed);
}

.blankslate-heading {
font-size: var(--text-title-size-small);
}

/* stylelint-disable-next-line selector-max-type */
.blankslate p {
font-size: var(--text-body-size-medium);
}

.blankslate-action {
/* stylelint-disable-next-line primer/spacing */
margin-top: var(--stack-gap-condensed);

&:first-of-type {
/* stylelint-disable-next-line primer/spacing */
margin-top: var(--stack-gap-normal);
}

&:last-of-type {
/* stylelint-disable-next-line primer/spacing */
margin-bottom: calc(var(--stack-gap-condensed) / 2);
}
}
}
Loading