feat(banner-message): use colour variables

projects/canopy/src/lib/banner/banner.component.scss

@@ -2,39 +2,36 @@
 
 .lg-banner {
   display: block;
-  background-color: var(--color-battleship-grey);
-  color: var(--color-white);
+  background-color: var(--banner-generic-bg-color);
+  color: var(--banner-generic-color);
   box-shadow: 0 0.25rem 0 0 rgba(0, 0, 0, 0.03);
 
   a:not(.lg-btn) {
-    border-bottom-color: var(--color-white);
-    color: var(--color-white);
-
     @include lg-link(
-      $default-color: var(--color-white),
-      $hover-color: var(--color-white),
-      $visited-color: var(--color-white),
-      $active-color: var(--color-white),
-      $active-bg-color: var(--color-charcoal),
-      $focus-color: var(--color-charcoal),
-      $focus-bg-color: var(--color-white)
+      $default-color: var(--light-foreground-link-color),
+      $hover-color: var(--light-foreground-link-hover-color),
+      $visited-color: var(--light-foreground-link-visited-color),
+      $active-color: var(--light-foreground-link-active-color),
+      $active-bg-color: var(--light-foreground-link-active-bg-color),
+      $focus-color: var(--light-foreground-link-focus-color),
+      $focus-bg-color: var(--light-foreground-link-focus-bg-color)
     );
   }
 }
 
 .lg-banner-variant--warning {
-  background-color: var(--color-dandelion-yellow);
-  color: var(--color-charcoal);
+  background-color: var(--banner-warning-bg-color);
+  color: var(--banner-warning-color);
 
   a:not(.lg-btn) {
     @include lg-link(
-      $default-color: var(--color-charcoal),
-      $hover-color: var(--color-charcoal),
-      $visited-color: var(--color-charcoal),
-      $active-color: var(--color-charcoal),
-      $active-bg-color: var(--color-white),
-      $focus-color: var(--link-focus-color),
-      $focus-bg-color: var(--color-charcoal)
+      $default-color: var(--dark-foreground-link-color),
+      $hover-color: var(--dark-foreground-link-hover-color),
+      $visited-color: var(--dark-foreground-link-visited-color),
+      $active-color: var(--dark-foreground-link-active-color),
+      $active-bg-color: var(--dark-foreground-link-active-bg-color),
+      $focus-color: var(--dark-foreground-link-focus-color),
+      $focus-bg-color: var(--dark-foreground-link-focus-bg-color)
     );
   }
 }

projects/canopy/src/styles/variables.scss

@@ -1,6 +1,7 @@
 @import 'variables/colors';
 @import 'variables/variants';
 @import 'variables/components/accordion';
+@import 'variables/components/banner';
 @import 'variables/components/breadcrumb';
 @import 'variables/components/button/main';
 @import 'variables/components/card';

projects/canopy/src/styles/variables/components/_banner.scss

@@ -0,0 +1,7 @@
+:root {
+  --banner-generic-bg-color: var(--color-battleship-grey);
+  --banner-generic-color: var(--color-white);
+
+  --banner-warning-bg-color: var(--color-dandelion-yellow);
+  --banner-warning-color: var(--color-charcoal);
+}