diff --git a/.changeset/blankslate-size-scale.md b/.changeset/blankslate-size-scale.md new file mode 100644 index 0000000000..d2245d1f22 --- /dev/null +++ b/.changeset/blankslate-size-scale.md @@ -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 diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss index d5c833ff25..dc30f5db0b 100644 --- a/app/components/primer/beta/blankslate.pcss +++ b/app/components/primer/beta/blankslate.pcss @@ -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); } @@ -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; } @@ -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); } } @@ -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? */ @@ -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); - } - } -}