mod-base 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mod-base",
-    "version": "1.0.20",
+    "version": "1.0.22",
     "description": "Base Styles for S3 Sites",
     "author": "",
     "license": "ISC"

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

@@ -24,7 +24,7 @@ $contact-us-blue-light: #8498E7;
 	$color-button: $color-btn !global;
 
 	// Most common selectors list
-	$selectors: '.header,.step__title,.step__subtitle,.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,.form-input-group__icon, .expand-collapse__icon, .expand-collapse__label, .hero__content,.information__content,.information__block, .information__title,.information__summary,.featured-block__description';
+	$selectors: '.header,.step__title,.step__subtitle,.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--submitting .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, .expand-collapse__icon, .expand-collapse__label, .hero__content,.information__content,.information__block, .information__title,.information__summary,.featured-block__description';
 
 	@media (prefers-color-scheme: dark){
 		body[data-color-scheme="system"] {
@@ -53,7 +53,9 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
-			.secure-text {
+			.secure-text,
+			.step__secure-text,
+			.modal-subtitle {
 				color: $color-charcoal2;
 			}
 
@@ -68,7 +70,7 @@ $contact-us-blue-light: #8498E7;
 
 			.progress-bar {
 				&__background {
-					background-color: lighten($background-color, 15%);
+					background-color: lighten($background-color, 20%);
 				}
 			}
 
@@ -80,16 +82,19 @@ $contact-us-blue-light: #8498E7;
 				}
 
 				&-group {
-
 					&__label-input {
-						color: $color-charcoal3;
 						z-index: 1;
 					}
 
 					&:not(.has-error) {
+						.form-group__label-input {
+							color: $color-charcoal2;
+							z-index: 1;
+						}
+
 						.form-input,
 						.form-radio label {
-							border-color: $color-charcoal3;
+							border-color: $color-charcoal2;
 						}
 
 						.form-input {
@@ -120,6 +125,42 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
+			.form-input-group__icon {
+				color: $color-charcoal2;
+			}
+
+			.has-error {
+				.form-input {
+					border-color: $color-red4;
+				}
+
+				.form-input-group__icon {
+					color: $color-red4;
+				}
+
+				.form-group__label-input {
+					color: $color-red4;
+				}
+
+				.form-input-group {
+					&--includes-label {
+						.form-input:focus {
+							~ .form-input-group__icon {
+								color: $color-red4;
+							}
+
+							+ label {
+								color: $color-red4;
+							}
+						}
+					}
+				}
+			}
+
+			.form-group__error-message {
+				color: $color-red4;
+			}
+
 			.hero__background-image {
 				filter: $background-img-brightness;
 			}
@@ -152,6 +193,18 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
+			.modal-header--close,
+			.modal-phone,
+			legend {
+				color: $foreground;
+			}
+
+			.modal-header--close {
+				&:hover {
+					color: $color-charcoal2;
+				}
+			}
+
 			.modal {
 				&-backdrop {
 					opacity: .8;
@@ -351,15 +404,39 @@ $contact-us-blue-light: #8498E7;
 			.zip-control__location,
 			.zip-control__icon {
 				color: lighten($accent-color, 25%);
+
+				&:hover {
+					color: $accent-color;
+				}
+			}
+
+			.zip-control__button {
+				&:hover {
+					.zip-control__location,
+					.zip-control__icon {
+						color: darken($accent-color, 5%);
+					}
+				}
+			}
+
+			.partners {
+				&__title,
+				&__logo {
+					color: $foreground;
+				}
 			}
 
 			.featured-block {
 				background-color: $background;
 				color: $foreground;
 
+				&__title {
+					color: $foreground;
+				}
+
 				&__btn {
 					background-color: $color-btn;
-					
+
 					&:hover {
 						background-color: darken($color-btn, 5%);
 					}
@@ -385,6 +462,13 @@ $contact-us-blue-light: #8498E7;
 					.form-input:not(:placeholder-shown) {
 						background-color: $background-color;
 					}
+
+					.form-input:not(:placeholder-shown),
+					.form-input:focus {
+						+ label {
+							color: $color-white;
+						}
+					}
 				}
 			}