@nnc-digital/nnc-design-system 0.4.35 → 0.4.37

package/build/index.esm.js

@@ -23817,11 +23817,11 @@ const Container$E = styled.div`
   padding: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
   background: ${(props) =>
     props.alertType === 'alert'
-      ? props.theme.theme_vars.colours.negative
+      ? props.theme.theme_vars.colours.alert_background
       : props.alertType === 'warning'
-      ? props.theme.theme_vars.colours.focus
+      ? props.theme.theme_vars.colours.warning_background
       : props.alertType === 'positive'
-      ? props.theme.theme_vars.colours.positive
+      ? props.theme.theme_vars.colours.positive_background
       : props.alertType === 'london_bridge'
       ? props.theme.theme_vars.colours.black
       : props.theme.theme_vars.colours.negative};
@@ -23829,7 +23829,7 @@ const Container$E = styled.div`
   button {
     line-height: 1.3;
     color: ${(props) =>
-      props.alertType === 'warning'
+      props.alertType === 'warning' || props.alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
   }
@@ -23837,7 +23837,7 @@ const Container$E = styled.div`
   a {
     ${(props) => props.theme.linkStyles}
     color: ${(props) =>
-      props.alertType === 'warning'
+      props.alertType === 'warning' || props.alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
 
@@ -23847,13 +23847,13 @@ const Container$E = styled.div`
     &:focus {
       ${(props) => props.theme.linkStylesFocus}
       color: ${(props) =>
-        props.alertType === 'warning'
+        props.alertType === 'warning' || props.alertType === 'positive'
           ? props.theme.theme_vars.colours.white
           : props.theme.theme_vars.colours.black} !important;
       background: ${(props) =>
-        props.alertType === 'warning'
+        props.alertType === 'warning' || props.alertType === 'positive'
           ? props.theme.theme_vars.colours.action
-          : props.theme.theme_vars.colours.focus} !important;
+          : props.theme.theme_vars.colours.warning_background} !important;
     }
     &:active {
       ${(props) => props.theme.linkStylesActive}
@@ -23862,7 +23862,7 @@ const Container$E = styled.div`
 
   svg {
     fill: ${(props) =>
-      props.alertType === 'warning'
+      props.alertType === 'warning' || props.alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
   }
@@ -23906,19 +23906,19 @@ const HideLink = styled.button`
     outline: none;
     border-radius: ${(props) => props.theme.theme_vars.border_radius};
     color: ${(props) =>
-      props.alertType === 'warning'
+      props.alertType === 'warning' || props.alertType === 'positive'
         ? props.theme.theme_vars.colours.white
         : props.theme.theme_vars.colours.black} !important;
     background: ${(props) =>
-      props.alertType === 'warning'
+      props.alertType === 'warning' || props.alertType === 'positive'
         ? props.theme.theme_vars.colours.action
-        : props.theme.theme_vars.colours.focus} !important;
+        : props.theme.theme_vars.colours.warning_background} !important;
     border-bottom: 3px solid ${(props) => props.theme.theme_vars.colours.black};
 
     svg {
       path {
         fill: ${(props) =>
-          props.alertType === 'warning'
+          props.alertType === 'warning' || props.alertType === 'positive'
             ? props.theme.theme_vars.colours.white
             : props.theme.theme_vars.colours.black} !important;
       }
@@ -24064,7 +24064,7 @@ var AlertBanner = function (_a) {
                     React.createElement(BannerTitle, null, title),
                     React.createElement(BannerContent, { ref: elementRef }, children)),
                 React.createElement(HideLink, { title: "Click to dismiss this alert banner", onClick: hideClickHandler, alertType: alertType },
-                    React.createElement(IconDownload$1, { colourFill: alertType === 'warning'
+                    React.createElement(IconDownload$1, { colourFill: alertType === 'warning' || alertType === 'positive'
                             ? themeContext.theme_vars.colours.black
                             : themeContext.theme_vars.colours.white }),
                     React.createElement("br", null),
@@ -28393,6 +28393,9 @@ const north_vars = {
     placeholder: '#585656',
 
     secondary: '#1A9DD9',
+    alert_background: '#B20613',
+    warning_background: '#F69F14',
+    positive_background: '#A0D9EF'
   },
   fontstack: 'Arial, Helvetica, sans-serif',
   fontSizes: {