From 2149a73897c0fcc3ce986990c0379be52d580da5 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Tue, 23 Jun 2026 21:12:54 +0100 Subject: [PATCH 1/5] Blankslate: make compact styling the default 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/blankslate-size-scale.md | 5 ++ app/components/primer/beta/blankslate.pcss | 61 ++++------------------ 2 files changed, 14 insertions(+), 52 deletions(-) create mode 100644 .changeset/blankslate-size-scale.md diff --git a/.changeset/blankslate-size-scale.md b/.changeset/blankslate-size-scale.md new file mode 100644 index 0000000000..e80ab5fd83 --- /dev/null +++ b/.changeset/blankslate-size-scale.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": minor +--- + +`Blankslate`: The compact styling is now the default. Padding, heading, and body text are reduced, and the redundant responsive `@container` block has been removed since the compact presentation it produced is now the default diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss index d5c833ff25..c3b96f5b8b 100644 --- a/app/components/primer/beta/blankslate.pcss +++ b/app/components/primer/beta/blankslate.pcss @@ -6,8 +6,8 @@ } .blankslate { - --blankslate-outer-padding-block: var(--base-size-32); - --blankslate-outer-padding-inline: var(--base-size-32); + --blankslate-outer-padding-block: var(--base-size-20); + --blankslate-outer-padding-inline: var(--base-size-20); position: relative; /* stylelint-disable-next-line primer/spacing */ @@ -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); } @@ -53,7 +53,7 @@ .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; } @@ -64,16 +64,16 @@ .blankslate-action { /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--stack-gap-normal); + margin-top: var(--stack-gap-condensed); &:first-of-type { /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--stack-gap-spacious); + margin-top: var(--stack-gap-normal); } &:last-of-type { /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--stack-gap-condensed); + margin-bottom: calc(var(--stack-gap-condensed) / 2); } } @@ -82,8 +82,8 @@ } .blankslate-spacious { - --blankslate-outer-padding-block: var(--base-size-80); - --blankslate-outer-padding-inline: var(--base-size-40); + --blankslate-outer-padding-block: var(--base-size-44); + --blankslate-outer-padding-inline: var(--base-size-28); } .blankslate-narrow { @@ -121,46 +121,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); - } - } -} From 65353cbf561d0fea8c7e6e505b6c3b1601448b31 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Tue, 23 Jun 2026 22:06:52 +0100 Subject: [PATCH 2/5] Remove needless primer/spacing stylelint disables in Blankslate 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> --- app/components/primer/beta/blankslate.pcss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss index c3b96f5b8b..a417b61e50 100644 --- a/app/components/primer/beta/blankslate.pcss +++ b/app/components/primer/beta/blankslate.pcss @@ -37,17 +37,13 @@ } .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); } @@ -63,16 +59,13 @@ } .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); } } @@ -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? */ From d63215c8e6901c8aa8a6773353eafaa04aeb4769 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 24 Jun 2026 10:27:09 +0100 Subject: [PATCH 3/5] Revert Blankslate padding changes 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> --- app/components/primer/beta/blankslate.pcss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss index a417b61e50..6b03f574a2 100644 --- a/app/components/primer/beta/blankslate.pcss +++ b/app/components/primer/beta/blankslate.pcss @@ -6,8 +6,8 @@ } .blankslate { - --blankslate-outer-padding-block: var(--base-size-20); - --blankslate-outer-padding-inline: var(--base-size-20); + --blankslate-outer-padding-block: var(--base-size-32); + --blankslate-outer-padding-inline: var(--base-size-32); position: relative; /* stylelint-disable-next-line primer/spacing */ @@ -75,8 +75,8 @@ } .blankslate-spacious { - --blankslate-outer-padding-block: var(--base-size-44); - --blankslate-outer-padding-inline: var(--base-size-28); + --blankslate-outer-padding-block: var(--base-size-80); + --blankslate-outer-padding-inline: var(--base-size-40); } .blankslate-narrow { From 540d03404fd21b6c04dce2d619c856b5bd3c6e98 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 24 Jun 2026 10:53:34 +0100 Subject: [PATCH 4/5] Revert Blankslate action margin changes 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> --- app/components/primer/beta/blankslate.pcss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss index 6b03f574a2..dc30f5db0b 100644 --- a/app/components/primer/beta/blankslate.pcss +++ b/app/components/primer/beta/blankslate.pcss @@ -59,14 +59,14 @@ } .blankslate-action { - margin-top: var(--stack-gap-condensed); + margin-top: var(--stack-gap-normal); &:first-of-type { - margin-top: var(--stack-gap-normal); + margin-top: var(--stack-gap-spacious); } &:last-of-type { - margin-bottom: calc(var(--stack-gap-condensed) / 2); + margin-bottom: var(--stack-gap-condensed); } } From 77a775bbca841c7f1a35bd3103289948df3523f3 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 24 Jun 2026 10:54:42 +0100 Subject: [PATCH 5/5] Narrow Blankslate changeset to typography scope 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> --- .changeset/blankslate-size-scale.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/blankslate-size-scale.md b/.changeset/blankslate-size-scale.md index e80ab5fd83..d2245d1f22 100644 --- a/.changeset/blankslate-size-scale.md +++ b/.changeset/blankslate-size-scale.md @@ -2,4 +2,4 @@ "@primer/view-components": minor --- -`Blankslate`: The compact styling is now the default. Padding, heading, and body text are reduced, and the redundant responsive `@container` block has been removed since the compact presentation it produced is now the default +`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