Move flash styles to PVC

.changeset/famous-maps-joke.md

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

app/components/primer/beta/flash.pcss

@@ -0,0 +1,143 @@
+/* flash */
+
+/* Default flash */
+.flash:not(.Banner) {
+  position: relative;
+  padding: var(--base-size-20, 20px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+
+  /* Default color */
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
+
+  & .octicon {
+    color: var(--color-accent-fg);
+    margin-right: var(--base-size-12, 12px);
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Contain the flash messages */
+.flash-messages {
+  margin-bottom: var(--primer-stack-gap-spacious, 24px);
+}
+
+/* Close button */
+.flash-close:not(.Banner-close) {
+  float: right;
+  padding: var(--primer-control-medium-paddingInline-spacious, 16px);
+  margin: calc(var(--primer-control-medium-paddingInline-spacious, 16px) * -1);
+  text-align: center;
+  cursor: pointer;
+
+  /* Undo `<button>` styles */
+  background: none;
+  border: 0;
+  appearance: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+
+  & .octicon {
+    margin-right: 0;
+  }
+}
+
+/* Action button */
+.flash-action:not(.Banner-actions) {
+  float: right;
+  margin-top: -3px;
+  margin-left: var(--primer-stack-gap-spacious, 24px);
+  background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: var(--primer-control-small-gap, 4px);
+    color: var(--color-fg-muted);
+  }
+
+  &.btn-primary {
+    background-clip: border-box;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+}
+
+
+/* Color variations */
+
+.flash-warn:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
+
+  & .octicon {
+    color: var(--color-attention-fg);
+  }
+}
+
+.flash-error:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+  border-color: var(--color-danger-muted);
+
+  & .octicon {
+    color: var(--color-danger-fg);
+  }
+}
+
+.flash-success:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+  border-color: var(--color-success-muted);
+
+  & .octicon {
+    color: var(--color-success-fg);
+  }
+}
+
+/* Layout variations */
+
+.flash-full:not(.Banner) {
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  border-width: var(--primer-borderWidth-thin, 1px) 0;
+  border-radius: 0;
+}
+
+/* A banner rendered at the top of the page. */
+.flash-banner {
+  position: fixed;
+  top: 0;
+  z-index: 90;
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+/* Makes sure the background is opaque to cover any content underneath */
+.flash-full,
+.flash-banner {
+  background-color: var(--color-canvas-default);
+}
+
+/* FIXME deprecate this */
+.warning {
+  padding: 0.5em;
+  margin-bottom: 0.8em;
+  font-weight: var(--base-text-weight-semibold, 600);
+  background-color: var(--color-attention-subtle);
+}

app/components/primer/primer.pcss

@@ -6,6 +6,7 @@
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";
+@import "./beta/flash.pcss";
 @import "./beta/label.pcss";
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";

demo/app/assets/stylesheets/application.css

@@ -15,7 +15,6 @@
  *= require @primer/css/dist/tooltips.css
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.css
- *= require @primer/css/dist/alerts.css
  *= require @primer/css/dist/autocomplete.css
  *= require @primer/css/dist/avatars.css
  *= require @primer/css/dist/branch-name.css