Use inverse-text colour in Notification Banner

Move the definition of the background next to the text colour adjustment to reduce risk of contrast issues. Because of how spacing is applied, this meant moving the code to the `__header` element rather than the `__title`.

To coordinate colours between the border and the title background, introduce a local `--govuk-notification-banner-colour`, which also allows to reduce the amount of CSS neeed to swap to a `success` notification banner.

Author: romaricpascal

packages/govuk-frontend/src/govuk/components/notification-banner/_mixin.scss

@@ -5,13 +5,13 @@
 /// @access private
 @mixin styles {
   .govuk-notification-banner {
+    --govuk-notification-banner-colour: #{base.govuk-functional-colour(brand)};
+
     @include base.govuk-font($size: 19);
     @include base.govuk-responsive-margin(8, "bottom");
 
     border: base.$govuk-border-width solid;
-    border-color: base.govuk-functional-colour(brand);
-
-    background-color: base.govuk-functional-colour(brand);
+    border-color: var(--govuk-notification-banner-colour);
 
     &:focus {
       outline: base.$govuk-focus-width solid;
@@ -26,6 +26,10 @@
     // text in high contrast mode
     border-bottom: 1px solid transparent;
 
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+    color: base.govuk-functional-colour(text);
+    background-color: var(--govuk-notification-banner-colour);
+
     @media #{base.govuk-from-breakpoint(tablet)} {
       padding: 2px base.govuk-spacing(4) base.govuk-spacing(1);
     }
@@ -38,7 +42,6 @@
     @include base.govuk-typography-weight-bold;
     margin: 0;
     padding: 0;
-    color: base.govuk-colour("white");
   }
 
   .govuk-notification-banner__content {
@@ -87,9 +90,7 @@
   }
 
   .govuk-notification-banner--success {
-    border-color: base.govuk-functional-colour(success);
-
-    background-color: base.govuk-functional-colour(success);
+    --govuk-notification-banner-colour: #{base.govuk-functional-colour(success)};
 
     .govuk-notification-banner__link {
       @include base.govuk-link-style-success;