Blankslate: make compact styling the default (#4110)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dylanatsmith

.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

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);
-    }
-  }
-}