From 440ab7eab5b23082a6fd665fe246e86c0c9dcdbb Mon Sep 17 00:00:00 2001
From: Ans <git@anselmbradford.com>
Date: Thu, 8 Aug 2024 13:22:56 -0400
Subject: [PATCH] Update banner color scheme

---
 .../components/cfpb-notifications/banner.scss | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/cfpb-design-system/src/components/cfpb-notifications/banner.scss b/packages/cfpb-design-system/src/components/cfpb-notifications/banner.scss
index 8d0987f87d..c90d1ec97a 100644
--- a/packages/cfpb-design-system/src/components/cfpb-notifications/banner.scss
+++ b/packages/cfpb-design-system/src/components/cfpb-notifications/banner.scss
@@ -8,6 +8,9 @@
 // Global banner in the header.
 //
 
+$banner-dark-background: var(--teal-dark);
+$banner-dark-foreground: var(--white);
+
 .o-banner {
   padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em 0;
   background: var(--gold-10);
@@ -26,26 +29,26 @@
   }
 
   &--dark {
-    background: var(--teal-mid-dark);
-    border-color: var(--teal-mid-dark);
-    color: var(--white);
-
-    a {
-      // Colors for :link, :visited, :hover, :focus, :active.
-      @include u-link-colors(
-        var(--white),
-        var(--white),
-        var(--gray-15),
-        var(--white),
-        var(--gray-15)
-      );
-    }
+    background: $banner-dark-background;
+    border-color: $banner-dark-background;
+    color: $banner-dark-foreground;
 
     .m-notification {
-      background: var(--teal-mid-dark);
+      background: $banner-dark-background;
 
       .cf-icon-svg {
-        fill: var(--white);
+        fill: $banner-dark-foreground;
+      }
+
+      a {
+        // Colors for :link, :visited, :hover, :focus, :active.
+        @include u-link-colors(
+          $banner-dark-foreground,
+          var(--teal-40),
+          var(--gray-15),
+          var(--white),
+          var(--gray-15)
+        );
       }
     }
   }