Move blankslate styles to PVC (#1584)

.changeset/many-turtles-taste.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `blankslate` styles to PVC

app/components/primer/beta/blankslate.pcss

@@ -0,0 +1,90 @@
+/* blankslate */
+
+.blankslate {
+  position: relative;
+  padding: var(--base-size-32, 32px);
+  text-align: center;
+
+  & p {
+    color: var(--color-fg-muted);
+  }
+
+  & code {
+    padding: 2px 5px 3px;
+    font-size: var(--primer-text-body-size-medium, 14px);
+    background: var(--color-canvas-default);
+    border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+    border-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  & img {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.blankslate-icon {
+  margin-right: var(--primer-control-small-gap, 4px);
+  margin-bottom: var(--primer-stack-gap-condensed, 8px);
+  margin-left: var(--primer-control-small-gap, 4px);
+  color: var(--color-fg-muted);
+}
+
+.blankslate-image {
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+}
+
+.blankslate-heading {
+  margin-bottom: var(--base-size-4, 4px);
+}
+
+.blankslate-action {
+  margin-top: var(--primer-stack-gap-normal, 16px);
+
+  &:first-of-type {
+    margin-top: var(--primer-stack-gap-spacious, 24px);
+  }
+
+  &:last-of-type {
+    margin-bottom: var(--primer-stack-gap-condensed, 8px);
+  }
+}
+
+.blankslate-capped {
+  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+}
+
+.blankslate-spacious {
+  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+/* was .large-format
+** QUESTION: should we deprecate this? */
+.blankslate-large {
+  & img {
+    width: 80px;
+    height: 80px;
+  }
+
+  & h3 {
+    margin: var(--primer-stack-gap-normal, 16px) 0;
+
+    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
+    font-size: 24px;
+  }
+
+  & p {
+    font-size: var(--primer-text-body-size-large, 16px);
+  }
+}
+
+/* was .clean-background
+** TO DO: deprecate this and use utility instead */
+.blankslate-clean-background {
+  border: 0;
+}

app/components/primer/primer.pcss

@@ -3,4 +3,5 @@
 @import "./alpha/banner.pcss";
 @import './alpha/segmented_control.pcss';
 @import "./beta/button.pcss";
+@import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";

demo/app/assets/stylesheets/application.css

@@ -20,7 +20,6 @@
  *= require @primer/css/dist/alerts.css
  *= require @primer/css/dist/autocomplete.css
  *= require @primer/css/dist/avatars.css
- *= require @primer/css/dist/blankslate.css
  *= require @primer/css/dist/branch-name.css
  *= require @primer/css/dist/dropdown.css
  *= require @primer/css/dist/header.css