mod-base 1.0.67 → 1.0.68-beta.10

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+# 1.0.68
+- Adding dark mode support for the new elements (`callout`, `overlay` and `background image`) added to banner accessible component.
+
 ## 1.0.67
 
 - Add dark mode support for `.helper-text` class that can be added to radio buttons

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mod-base",
-    "version": "1.0.67",
+    "version": "1.0.68-beta.10",
     "description": "Base Styles for S3 Sites",
     "author": "",
     "license": "ISC"

package/src/styles/templates/_dark-mode.scss

@@ -44,6 +44,15 @@ $contact-us-blue-light: #8498E7;
 	$background: $color-charcoal8,
 	$base-color: null,
 	$bbb-img-filter: grayscale(1) invert(.915) brightness(1.5),
+	// Banner
+	$banner-overlay-background: linear-gradient(90deg, $background  17%, rgba($background, .5) 100%),
+	$banner-callout-background: $color-grey-300,
+	$banner-callout-border-color: $color-grey-700,
+	$banner-callout-text-color: null,
+	$banner-has-background-title-color: null,
+	$banner-has-background-subtitle-color: null,
+	$banner-has-background-description-color: null,
+	$banner-has-background-callout-text-color: null,
 	$color-btn: null,
 	$color-btn-text: null,
 	$checkbox-label-color: null,
@@ -143,6 +152,26 @@ $contact-us-blue-light: #8498E7;
 		$radio-btn-standard-hover-select-background-color: lighten($radio-btn-checked-border-color, 5%);
 	}
 
+	@if ($banner-callout-text-color == null) {
+		$banner-callout-text-color: $foreground;
+	}
+
+	@if ($banner-has-background-title-color == null) {
+		$banner-has-background-title-color: $foreground;
+	}
+
+	@if ($banner-has-background-subtitle-color == null) {
+		$banner-has-background-subtitle-color: $foreground;
+	}
+
+	@if ($banner-has-background-description-color == null) {
+		$banner-has-background-description-color: $foreground;
+	}
+
+	@if ($banner-has-background-callout-text-color == null) {
+		$banner-has-background-callout-text-color: $foreground;
+	}
+
 	// Most common selectors list
 	$content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,.modal-body p,legend,[class^="loader__"],table tr,.tile__text,.select,.hiw-block__title,.hiw-card__title,.hiw-card__description,.banner__title,.banner__description,.accordion__title,.reviews__title,.accordion .expand-collapse__toggle,.accordion__content p,.accordion__content li,.result__title,.result__subtitle,.result__call-text';
 	$background-selectors: '.form,.header,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,&.form-in-progress:not(.fixed-width-desktop) .hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr,.form-control,.accordion,.hiw-block,.reviews';
@@ -163,6 +192,38 @@ $contact-us-blue-light: #8498E7;
 				color: $text-color;
 			}
 
+			.banner {
+				&__background-overlay {
+					background: $banner-overlay-background;
+				}
+
+				&__callout {
+					background-color: $banner-callout-background;
+					border-color: $banner-callout-border-color;
+					color: $banner-callout-text-color;
+				}
+
+				&.banner--has-background {
+					.banner {
+						&__callout {
+							color: $banner-has-background-callout-text-color;
+						}
+
+						&__title {
+							color: $banner-has-background-title-color;
+						}
+
+						&__subtitle {
+							color: $banner-has-background-subtitle-color;
+						}
+
+						&__description {
+							color: $banner-has-background-description-color;
+						}
+					}
+				}
+			}
+
 			.checkbox {
 				color: $checkbox-label-color;
 			}