Swap bg-gradient with bg-color for Banner/Flash (#2643)

Author: langermank

.changeset/yellow-rings-approve.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Swap bg-gradient with bg-color for Banner/Flash

app/components/primer/alpha/banner.pcss

@@ -5,7 +5,7 @@
   display: grid;
   padding: var(--base-size-8);
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  background-color: var(--bgColor-accent-muted);
   border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);
   border-radius: var(--borderRadius-medium);
   grid-auto-flow: column;
@@ -78,7 +78,7 @@
 
   &.Banner--warning {
     color: var(--fgColor-default);
-    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+    background-color: var(--bgColor-attention-muted);
     border-color: var(--borderColor-attention-muted);
 
     & .Banner-visual .octicon {
@@ -88,7 +88,7 @@
 
   &.Banner--error {
     color: var(--fgColor-default);
-    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+    background-color: var(--bgColor-danger-muted);
     border-color: var(--borderColor-danger-muted);
 
     & .Banner-visual .octicon {
@@ -98,7 +98,7 @@
 
   &.Banner--success {
     color: var(--fgColor-default);
-    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+    background-color: var(--bgColor-success-muted);
     border-color: var(--borderColor-success-muted);
 
     & .Banner-visual .octicon {

app/components/primer/beta/flash.pcss

@@ -10,7 +10,7 @@
 
   /* Default color */
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  background-color: var(--bgColor-accent-muted);
   border-color: var(--borderColor-accent-muted);
 
   & .octicon {
@@ -78,7 +78,7 @@
 
 .flash-warn:not(.Banner) {
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+  background-color: var(--bgColor-attention-muted);
   border-color: var(--borderColor-attention-muted);
 
   & .octicon {
@@ -88,7 +88,7 @@
 
 .flash-error:not(.Banner) {
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+  background-color: var(--bgColor-danger-muted);
   border-color: var(--borderColor-danger-muted);
 
   & .octicon {
@@ -98,7 +98,7 @@
 
 .flash-success:not(.Banner) {
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+  background-color: var(--bgColor-success-muted);
   border-color: var(--borderColor-success-muted);
 
   & .octicon {