mod-base 1.0.68 → 1.0.70-beta.1

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
-# 1.0.68
+## 1.0.70
+- Adding support for custom background color and fill on progress bars in dark mode.
+
+## 1.0.68
 - Adding dark mode support for the new elements (`callout`, `overlay` and `background image`) added to banner accessible component.
 
 ## 1.0.67

package/package.json

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

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

@@ -92,7 +92,9 @@ $contact-us-blue-light: #8498E7;
 	$reviews-card-inactive-text-color: rgba($foreground, .3),
 	$reviews-card-inactive-verified-color: null,
 	$tcpa-color: lighten($color-grey-500, 2%),
-	$value-props-background: null
+	$value-props-background: null,
+	$progress-bar-background-color: null,
+	$progress-bar-fill-color: null
 	) {
 	// Theme global variables if required to use after including the mixin
 	$background-color: $background !global;
@@ -172,6 +174,14 @@ $contact-us-blue-light: #8498E7;
 		$banner-has-background-callout-text-color: $foreground;
 	}
 
+	@if ($progress-bar-background-color == null) {
+		$progress-bar-background-color: lighten($color-grey-700, 10%);
+	}
+
+	@if ($progress-bar-fill-color == null) {
+		$progress-bar-fill-color: $base-color;
+	}
+
 	// 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';
@@ -378,11 +388,11 @@ $contact-us-blue-light: #8498E7;
 
 			.progress-bar {
 				&__background {
-					background-color: lighten($color-grey-700, 10%);
+					background-color: $progress-bar-background-color;
 				}
 
 				&__fill {
-					background-color: $base-color;
+					background-color: $progress-bar-fill-color;
 				}
 			}