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

primer · Feb 27, 2024 · 70a6dee · 70a6dee
1 parent 226481e
commit 70a6dee
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/yellow-rings-approve.md 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
@@ -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
@@ -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 {