From 70a6dee654562b505ac17991a53d1039c57f81e3 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:43:55 -0800
Subject: [PATCH] Swap bg-gradient with bg-color for Banner/Flash (#2643)

---
 .changeset/yellow-rings-approve.md      | 5 +++++
 app/components/primer/alpha/banner.pcss | 8 ++++----
 app/components/primer/beta/flash.pcss   | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/yellow-rings-approve.md

diff --git a/.changeset/yellow-rings-approve.md b/.changeset/yellow-rings-approve.md
new file mode 100644
index 0000000000..7a34142c15
--- /dev/null
+++ b/.changeset/yellow-rings-approve.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Swap bg-gradient with bg-color for Banner/Flash
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
index c60c63dd2e..cb60752cde 100644
--- a/app/components/primer/alpha/banner.pcss
+++ b/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 {
diff --git a/app/components/primer/beta/flash.pcss b/app/components/primer/beta/flash.pcss
index b4ca1d0db5..a884f4d5c1 100644
--- a/app/components/primer/beta/flash.pcss
+++ b/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 {