mod-base 1.0.3-beta.7 → 1.0.4-9.beta-1

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

@@ -10,57 +10,225 @@ $color-button: null;
 
 $contact-us-blue-light: #8498E7;
 
-@mixin dark-mode($background: $color-charcoal7, $foreground: $color-ivory1, $accent-color: $color-blue6, $color-btn: $color-orange6) {
+@function colorContrast($base-color, $light-color, $dark-color) {
+  $result: $light-color;
+  @if (lightness($base-color) > 45) {
+    $result: $dark-color;
+  }
+  @return $result;
+}
+
+@mixin btnStyles($color-btn, $color-btn-text) {
+	background-color: $color-btn;
+	color: $color-btn-text;
+
+	.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;
+		}
+	}
+}
+
+@mixin dark-mode(
+	$accent-color: null,
+	$back-btn-background-color: null,
+	$background: $color-charcoal8,
+	$base-color: null,
+	$bbb-img-filter: grayscale(1) invert(.915) brightness(1.5),
+	$color-btn: null,
+	$color-btn-text: null,
+	$checkbox-label-color: null,
+	$footer-background: $color-charcoal9,
+	$foreground: $color-grey-300,
+	$form-focus-border-color: $color-grey-400,
+	$hero-content-box-shadow-mobile: null,
+	$interactive-text-color: $color-grey-500,
+	$interactive-text-color-hover: lighten($interactive-text-color, 20%),
+	$logo-filter: invert(1) hue-rotate(180deg),
+	$partners-logo-filter: grayscale(1) invert(.9),
+	$radio-btn-background-color: $background,
+	$radio-btn-border-color: $color-grey-300,
+	$radio-btn-checked-background-color: null,
+	$radio-btn-checked-border-color: null,
+	$radio-btn-checked-icon-background-color: null,
+	$radio-btn-checked-icon-color: $color-grey-300,
+	$radio-btn-checked-text-color: $color-grey-300,
+	$radio-btn-focus-box-shadow: null,
+	$radio-btn-icon-background: transparent,
+	$radio-btn-icon-color: $background,
+	$radio-btn-text-color: $color-grey-300,
+	$tcpa-color: lighten($color-grey-500, 2%),
+	$value-props-background: null
+	) {
 	// Theme global variables if required to use after including the mixin
 	$background-color: $background !global;
-	$text-color: $foreground !global;
-	$theme: $accent-color !global;
-	$value-background: rgba($accent-color, .7) !global;
-	$box-shadow-color: rgba($foreground,  20%) !global;
-	$background-img-brightness: brightness(75%) !global;
+	$background-img-brightness: brightness(60%) !global;
+	$base-color: $base-color !global;
+	$bbb-img-filter: $bbb-img-filter;
+	$box-shadow-color: rgba($color-black, 60%) !global;
 	$button-saturation: saturate(70%) !global;
-	$img-filter: invert(1) hue-rotate(180deg) !global;
-	$bbb-img-filter: grayscale(1) invert(1) !global;
 	$color-button: $color-btn !global;
+	$img-filter: invert(1) hue-rotate(180deg) !global;
+	$text-color: $foreground !global;
+	$value-props-background: $value-props-background;
+
+	@if ($color-btn != null and $color-btn-text == null) {
+		$color-btn-text: colorContrast($color-btn, $foreground, $background);
+	}
+
+	@if ($base-color == null and $accent-color != null) {
+		$theme: $accent-color !global;
+	} @else {
+		$theme: $base-color !global;
+	}
+
+	@if ($checkbox-label-color == null) {
+		$checkbox-label-color: $text-color;
+	}
 
 	// Most common selectors list
-	$selectors: '.header,.step__title,.form,.form-radio label,.form-input,.form-input:focus,.progress-bar__content,.progress-bar__text,.progress-bar__percentage,.partners,.guarantee,.guarantee__text,.information,.information__header::before,.modal-content,.modal-content .icon-close,.matched-steps,.form--inverted .loader,.form-groups,.step__windowtype label,.form-control,.form-group__label,.step__overview,.progress-bar__title,.checkbox,#tcpa-copy,body .modal-body ul,body .modal-body p,.modal-body ul,.modal-body p,.modal-body .contact-us .step__list a,.form-group__tooltip-message,.form__qualify--step span,.form-group__city-state,.hero__background, .modal-body table tr';
+	$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';
+	$background-selectors: '.form,.header,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr,.form-control';
 
 	@media (prefers-color-scheme: dark){
-		body[data-color-scheme="system"] {
+		body[data-color-scheme='system'] {
 			color-scheme: dark;
 			color: $text-color;
 			background-color: $background-color;
 
-			// Default styling for most common selectors/sections start
-			#{$selectors} {
-				color: $foreground;
+			// Change background color of listed selectors
+			#{$background-selectors} {
+				background-color: $background-color;
 			}
 
-			// Change background color of listed selectors
-			#{$selectors} {
-				background-color: $background;
+			// Change text color of listed selectors
+			#{$content-selectors} {
+				color: $text-color;
+			}
+
+			.checkbox {
+				color: $checkbox-label-color;
+			}
+
+			.partners {
+				background-color: darken($background, 2%);
+
+				&__logo img {
+					filter: $partners-logo-filter;
+				}
 			}
 
-			.toggle-wrapper {
-				color: $foreground;
+			.featured-block__image img,
+			.featured-block__media img {
+				filter: $background-img-brightness;
+			}
+
+			.header__logo img,
+			.header__logo svg {
+				filter: $logo-filter;
+			}
+
+			.form-input-group__icon {
+				background-color: transparent;
+			}
+
+			.icon-close,
+			.progress-bar__title,
+			.header__back-button,
+			.form-input-group__icon,
+			.secure-text,
+			.step__secure-text,
+			.modal-subtitle {
+				color: $color-grey-500;
+			}
+
+			.tcpa{
+				color:	$tcpa-color;
+
+				a,
+				.checkbox {
+					color: $tcpa-color;
+				}
+
+				input[type=checkbox]::before  {
+					border-color: $tcpa-color;
+					color: $tcpa-color;
+				}
+
+				a,
+				input[type=checkbox] {
+					&:focus {
+						outline-color: $color-white;
+					}
+				}
 			}
 
-			.secure-text {
-				color: $color-charcoal2;
+			.icon-close:hover {
+				color: $color-grey-400;
 			}
 
+			.step__header,
 			.step__supertitle {
-				background-color: $accent-color;
+				background-color: $base-color;
+			}
+
+			@if ($base-color != null) {
+				.step__header-title,
+				.step__supertitle {
+					color: colorContrast($base-color, $foreground, $background);
+				}
 			}
 
-			.value {
-				background-color: $value-background;
+			.value-props {
+				background: $value-props-background;
+
+				@if type_of($value-props-background) == 'color' {
+					color: colorContrast($value-props-background, $foreground, $background);
+
+					@if (lightness($value-props-background) > 45) {
+						&__icon {
+							filter: invert(1);
+						}
+					}
+				}
 			}
 
 			.progress-bar {
 				&__background {
-					background-color: lighten($background-color, 15%);
+					background-color: lighten($color-grey-700, 10%);
+				}
+
+				&__fill {
+					background-color: $base-color;
+				}
+			}
+
+			.information,
+			.expand-collapse__icon {
+				border-color: $color-grey-700;
+			}
+
+			.expand-collapse__icon {
+				color: $color-grey-500;
+			}
+
+			.expand-collapse__toggle {
+				color: $color-grey-500;
+
+				&:hover {
+					&,
+					.expand-collapse__icon {
+						color: $color-grey-600;
+					}
 				}
 			}
 
@@ -68,56 +236,110 @@ $contact-us-blue-light: #8498E7;
 				border: 0;
 
 				&--inverted {
-					box-shadow:  0 2px 4px $box-shadow-color;
+					box-shadow: 0 2px 4px $box-shadow-color;
 				}
+			}
 
-				&-group {
+			.form-group {
+				&__label-input {
+					z-index: 1;
+				}
 
-					&:not(.has-error) {
-						.form-input,
-						.form-radio label {
-							border-color: $color-charcoal3;
-						}
+				&:not(.has-error) {
+					.form-group__label-input {
+						color: $color-grey-500;
+						z-index: 1;
+					}
 
-						.form-input {
-							&:focus {
-								border-color: $color-charcoal1;
-							}
-						}
+					.form-input,
+					.form-input-group--icon,
+					.form-radio label,
+					.select {
+						border-color: $color-grey-500;
 					}
 
-					&__tooltip-message {
-						color: $color-ivory6;
-						border-color: $color-charcoal5;
-						box-shadow: 0 4px 8px rgba($color-ivory6,  10%);
+					.form-input-group--icon,
+					.form-input {
+						&:-webkit-autofill,
+						&:not(:placeholder-shown),
+						&:focus {
+							border-color: $form-focus-border-color;
 
-						&::after {
-							border-bottom-color: $background;
-						}
+							+ label {
+								color: $form-focus-border-color;
+							}
 
-						&::before {
-							border-bottom-color: $color-charcoal5;
+							~ .form-input-group__icon {
+								color: $form-focus-border-color;
+							}
 						}
+					}
+				}
+
+				&__tooltip-message {
+					color: $color-ivory6;
+					border-color: $color-grey-700;
+					box-shadow: 0 4px 8px rgba($color-ivory6, 10%);
+
+					&::after {
+						border-bottom-color: $background;
+					}
 
+					&::before {
+						border-bottom-color: $color-grey-700;
 					}
+
 				}
+			}
 
-				&__bbb-logo {
-					filter: $bbb-img-filter;
+			.has-error {
+				.form-input,
+				.select,
+				.form-input:-webkit-autofill {
+					border-color: $color-salmon-500;
+					color: $color-salmon-500;
+				}
+
+				.form-input-group__icon,
+				.form-group__label-input {
+					color: $color-salmon-500;
+				}
+
+				.form-input-group {
+					&--includes-label {
+						.form-input:focus,
+						.form-input:not(:placeholder-shown) {
+							~ .form-input-group__icon {
+								color: $color-salmon-500;
+							}
+
+							+ label {
+								color: $color-salmon-500;
+							}
+						}
+					}
 				}
 			}
 
+			.form-group__error-message {
+				color: $color-salmon-500;
+			}
+
 			.hero__background-image {
 				filter: $background-img-brightness;
 			}
 
-			.btn {
-				&-primary,
-				&-next {
-					background-color: $color-btn;
-
-					&:hover {
-						background-color: darken($color-btn, 5%);
+			@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 $color-grey-200;
+						border-right-color: $background;
+						border-top-color: $background;
 					}
 				}
 			}
@@ -126,7 +348,7 @@ $contact-us-blue-light: #8498E7;
 				background-color: $color-charcoal8;
 
 				&__title {
-					color: $foreground;
+					color: $text-color;
 				}
 
 				&__subtitle,
@@ -172,50 +394,53 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
-			.reviews {
-				&-card {
-					background-color: $background;
-					border-color: $color-charcoal4;
-					box-shadow: 0px 8px 16px 0px rgba($color-charcoal2, 10%);
-					color: $foreground;
+			.reviews-card {
+				background-color: $background;
+				border-color: $color-grey-700;
+				box-shadow: 0px 8px 16px 0px rgba($color-grey-500, 10%);
+				color: $text-color;
 
-					&__avatar img {
-						filter: unset;
-					}
+				&__avatar img {
+					filter: unset;
+				}
+
+				&__author-name {
+					border-color: $color-grey-600;
+				}
+
+				&__review,
+				&__author,
+				.star-rating__text {
+					color: $text-color;
 				}
 			}
 
 			.matched,
 			.unmatched {
-				border-color: $color-charcoal4;
+				border-color: $color-grey-700;
 			}
 
 			.footer {
-				background-color: $color-charcoal8;
-
-				&__bbb {
-					filter: $bbb-img-filter;
-				}
+				background-color: $footer-background;
 
 				&__links,
 				&__head-link,
 				&__copyright,
 				&__captcha-disclosure {
-					color: $foreground;
+					color: $text-color;
 				}
 
 				&__links li a,
 				&__head-link a {
-					color: $foreground !important;
-
+					&,
 					&:visited {
-						color: $foreground !important;
+						color: $text-color !important;
 					}
 
 					&:active,
 					&:hover,
 					&:focus {
-						color: $color-charcoal3 !important;
+						color: $color-grey-500 !important;
 					}
 				}
 
@@ -250,17 +475,17 @@ $contact-us-blue-light: #8498E7;
 
 				.form-group {
 					label {
-						color: $foreground;
+						color: $text-color;
 					}
 				}
 
 				legend {
 					border-bottom: 0;
-					color: $foreground;
+					color: $text-color;
 				}
 
 				.field {
-					border-color: $color-charcoal3;
+					border-color: $color-grey-500;
 
 					input:checked {
 						+ label {
@@ -272,31 +497,31 @@ $contact-us-blue-light: #8498E7;
 					}
 
 					&:hover {
-						background-color: rgba($color-white, .2);
-						border-color: $foreground;
+						background-color: rgba($color-grey-200, .2);
+						border-color: $text-color;
 					}
 
 					&:focus-within {
-						outline-color: $color-white;
+						outline-color: $color-grey-200;
 					}
 				}
 
 				.form-control {
-					border-color: $color-charcoal3;
+					border-color: $color-grey-500;
 
 					&:hover,
 					&:focus {
-						border-color: $foreground;
+						border-color: $text-color;
 					}
 
 					&:focus {
-						background-color: rgba($color-white, .2);
+						background-color: rgba($color-grey-200, .2);
 					}
 				}
 
 				.btn-back {
-					border-color: $foreground;
-					color: $foreground;
+					border-color: $text-color;
+					color: $text-color;
 
 					&:hover,
 					&:focus {
@@ -318,24 +543,248 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
+			.loader {
+				image {
+					filter: invert(1) hue-rotate(180deg) brightness(2);
+				}
+
+				#Circle {
+					filter: invert(1);
+				}
+
+				#Left-Arrow,
+				#Right-Arrow {
+					path {
+						fill: $color-lavender-500;
+
+						&:not(:first-of-type) {
+							stroke: $color-lavender-500;
+						}
+					}
+				}
+			}
+
 			/* Need to overwrite inline styles of double submission block */
 			.duplicate-submission {
 				background-color: $background-color !important;
 				color: $text-color !important;
 
-				& * {
+				h3,
+				p {
 					color: $text-color !important;
 				}
 			}
 
+			.form__bbb-logo,
+			.footer__bbb,
+			.bbb-logo,
+			.header__bbb-logo {
+				filter: $bbb-img-filter;
+			}
+
+			.header__back-button {
+				border-right-color: $color-grey-500;
+			}
+
+			.back-btn,
+			.btn--back,
+			.zip-control__location,
+			.zip-control__icon {
+				color: $interactive-text-color;
+			}
+
+			.back-btn,
+			.btn--back,
+			.zip-control__button {
+				&:hover,
+				&:focus {
+					color: $color-white;
+					outline-color: $color-grey-500;
+
+					.zip-control__location,
+					.zip-control__icon {
+						color: $interactive-text-color-hover;
+					}
+				}
+			}
+
+			@if $back-btn-background-color != null {
+				.btn-back {
+					background-color: $back-btn-background-color;
+					&:hover {
+						background-color: darken($back-btn-background-color, 5%);
+					}
+				}
+			}
+
+			&.form-in-progress {
+				.hero {
+					border-color: $color-grey-700;
+				}
+			}
+
+			.form-input-group {
+				&--includes-label {
+					.form-input:not(:placeholder-shown) {
+						background-color: $background-color;
+					}
+
+					.form-input:not(:placeholder-shown),
+					.form-input:focus {
+						+ label {
+							color: $color-grey-200;
+						}
+					}
+				}
+			}
+
+			.radio__button {
+				label {
+					input[type='radio'] {
+						&:hover {
+							&:not(:checked) + .radio__button-text {
+								color: $radio-btn-checked-text-color;
+
+								&::before {
+									background-color: $radio-btn-checked-background-color;
+									border-color: $radio-btn-checked-border-color;
+								}
+
+								+ span {
+									background-color: $radio-btn-checked-icon-background-color;
+
+									&::before {
+										color: $radio-btn-checked-icon-color;
+									}
+								}
+							}
+						}
+
+						&:focus + span::before {
+							box-shadow: $radio-btn-focus-box-shadow;
+						}
+
+						&:not(:hover,:checked) {
+							+ .radio__button-text {
+								color: $radio-btn-text-color;
+
+								&::before {
+									background-color: $background;
+									border-color: $radio-btn-border-color;
+								}
+
+								// Icon
+								+ span {
+									background-color: $radio-btn-icon-background;
+
+									&::before {
+										color: $radio-btn-icon-color;
+										transition: color .15s ease;
+									}
+								}
+							}
+						}
+
+						&:checked + .radio__button-text {
+							color: $radio-btn-checked-text-color;
+
+							+ span {
+								background-color: $radio-btn-checked-icon-background-color;
+
+								&::before {
+									color: $radio-btn-checked-icon-color;
+								}
+							}
+
+							&::before {
+								border-color: $radio-btn-checked-border-color;
+								background-color: $radio-btn-checked-background-color;
+							}
+						}
+					}
+				}
+
+				.tile {
+					&__icon {
+						border-radius: 10px;
+						padding: 3px;
+					}
+
+					&__text {
+						&::before {
+							border-radius: 10px;
+						}
+					}
+				}
+			}
+
+			// Ketch Preference dashboard styles
+			#lanyard_root * {
+				background-color: $color-black !important;
+				color: $color-white !important;
+				outline-color: $color-white !important;
+
+				button {
+					background-color: $color-charcoal7 !important;
+
+					* {
+						background-color: $color-charcoal7 !important;
+					}
+
+					input[type="checkbox"] ~ span {
+						background:  transparent !important;
+
+						svg {
+							background:  transparent !important;
+						}
+					}
+
+					input[type="checkbox"]:not(:checked) + div {
+						background-color: $color-charcoal8 !important;
+					}
+				}
+
+				button[aria-label='Reject All'],
+				button[aria-label='Accept All'],
+				button[aria-label='Save'] {
+					background-color: $color-white !important;
+					color: $color-black !important;
+				}
+
+				button[aria-label='Exit'] {
+					div {
+						svg {
+							path {
+								filter: invert(1) !important;
+							}
+						}
+					}
+
+				}
+
+				a[aria-label='Learn more about Ketch for data privacy'] {
+					svg {
+						filter: brightness(5);
+					}
+				}
+			}
+
 			@include breakpoint-phone {
 				.hero--full {
 					background-color: $background;
 				}
 
-				.form {
-					&--inverted {
-						box-shadow: none;
+				.hero__content {
+					box-shadow: $hero-content-box-shadow-mobile;
+				}
+
+				.form--inverted {
+					box-shadow: none;
+				}
+
+				&.form-in-progress {
+					.hero {
+						background-color: $background-color;
 					}
 				}
 			}