mod-base 1.0.23-beta.1 → 1.0.23-beta.2

package/package.json

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

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

@@ -10,9 +10,9 @@ $color-button: null;
 
 $contact-us-blue-light: #8498E7;
 
-@function contrastText($base-color, $light-color, $dark-color) {
+@function btnColorContrast($base-color, $light-color, $dark-color) {
     $result: $light-color;
-    @if (lightness($base-color) > 50) {
+    @if (lightness($base-color) > 45) {
         $result: $dark-color;
     }
     @return $result;
@@ -25,13 +25,13 @@ $contact-us-blue-light: #8498E7;
 	.btn__text {
 		color: $color-btn-text;
 	}
-
+	
 	&:hover,
 	&:active,
 	&:focus {
 		background-color: darken($color-btn, 10%);
 		color: $color-btn-text;
-
+		
 		.btn__text {
 			color: $color-btn-text;
 		}
@@ -43,7 +43,8 @@ $contact-us-blue-light: #8498E7;
 	$foreground: $color-white,
 	$accent-color: null,
 	$color-btn: null,
-	$color-btn-text: contrastText($color-btn, $foreground, $background),
+	$base-color: null,
+	$color-btn-text: null,
 	$interactive-text-color: $color-charcoal2,
 	$interactive-text-color-hover: darken($interactive-text-color, 10%),
 	$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
@@ -66,6 +67,7 @@ $contact-us-blue-light: #8498E7;
 	$background-color: $background !global;
 	$text-color: $foreground !global;
 	$theme: $accent-color !global;
+	$base-color: $base-color !global;
 	$value-props-background: $value-props-background;
 	$box-shadow-color: rgba($color-black,  60%) !global;
 	$background-img-brightness: brightness(85%) !global;
@@ -74,6 +76,10 @@ $contact-us-blue-light: #8498E7;
 	$bbb-img-filter: $bbb-img-filter;
 	$color-button: $color-btn !global;
 
+	@if ($color-btn != null and $color-btn-text == null) {
+		$color-btn-text: btnColorContrast($color-btn, $foreground, $background);
+	}
+
 	// Most common selectors list
 	$content-selectors: 'input,.toggle-wrapper,.step__header-title,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,legend,[class^="loader__"], table tr';
 	$background-selectors: '.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input-group__icon,.form-input:focus,.expand-collapse__icon,.featured-block,table tr';
@@ -125,7 +131,7 @@ $contact-us-blue-light: #8498E7;
 
 			.step__header,
 			.step__supertitle {
-				background-color: $theme;
+				background-color: $base-color;
 			}
 
 			.value-props {
@@ -238,16 +244,18 @@ $contact-us-blue-light: #8498E7;
 				filter: $background-img-brightness;
 			}
 
-			.btn--primary,
-			.btn-primary,
-			.btn-next,
-			.featured-block__btn {
-				@include btnStyles($color-btn, $color-btn-text);
+			@if $color-btn != null {
+				.btn--primary,
+				.btn-primary,
+				.btn-next,
+				.featured-block__btn {
+					@include btnStyles($color-btn, $color-btn-text);
 
-				.btn__spinner::after {
-					border: 4px solid darken($color-btn, 20%);
-					border-right-color: contrastText($color-btn, $color-white, $color-charcoal7);
-					border-top-color:  contrastText($color-btn, $color-white, $color-charcoal7);
+					.btn__spinner::after {
+						border: 4px solid darken($color-btn, 20%);
+						border-right-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
+						border-top-color:  btnColorContrast($color-btn, $color-white, $color-charcoal7);
+					}
 				}
 			}