mod-base 1.0.14 → 1.0.15

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.15
+
+- Dark-mode updates: background-color, color & filters for new selectors in form, radiobuttons, header and featured-block
+
 ## 1.0.14
 
 - Correcting grey color vars

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mod-base",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "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,.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';
+	$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';
 
 	@media (prefers-color-scheme: dark){
 		body[data-color-scheme="system"] {
@@ -46,11 +46,19 @@ $contact-us-blue-light: #8498E7;
 				color: $foreground;
 			}
 
+			.header {
+				&__logo img,
+				&__logo svg {
+					filter: $img-filter;
+				}
+			}
+
 			.secure-text {
 				color: $color-charcoal2;
 			}
 
-			.step__supertitle {
+			.step__supertitle,
+			.progress-bar__percentage {
 				background-color: $accent-color;
 			}
 
@@ -328,6 +336,89 @@ $contact-us-blue-light: #8498E7;
 				}
 			}
 
+			.bbb-logo,
+			.header__bbb-logo {
+				filter: invert(.9) brightness(2);
+			}
+
+			.back-btn,
+			.btn--back,
+			.zip-control__location,
+			.zip-control__icon {
+				color: lighten($accent-color, 25%);
+			}
+
+			.featured-block {
+				background-color: $background;
+				color: $foreground;
+
+				&__btn {
+					background-color: $color-btn;
+					
+					&:hover {
+						background-color: darken($color-btn, 5%);
+					}
+				}
+			}
+
+			.form-tcpa {
+				label {
+					a {
+						color: $color-charcoal1;
+					}
+				}
+			}
+
+			&.form-in-progress {
+				.hero {
+					border-color: $color-charcoal4;
+				}
+			}
+
+			.form-input-group {
+				&--includes-label {
+					.form-input:not(:placeholder-shown) {
+						background-color: $background-color;
+					}
+				}
+			}
+
+			.radio {
+				&__button {
+					label {
+						input[type=radio] {
+							+ span {
+								color: $text-color;
+
+								&::before {
+									background-color: transparent;
+								}
+							}
+
+							&:checked,
+							&:hover {
+								+ span {
+									color: $text-color;
+								}
+							}
+						}
+					}
+
+					.tile {
+						&__icon {
+							border-radius: 10px;
+							padding: 3px;
+						}
+
+						&__text {
+							&::before {
+								border-radius: 10px;
+							}
+						}
+					}
+				}
+			}
+
 			@include breakpoint-phone {
 				.hero--full {
 					background-color: $background;
@@ -338,6 +429,12 @@ $contact-us-blue-light: #8498E7;
 						box-shadow: none;
 					}
 				}
+
+				&.form-in-progress {
+					.hero {
+						background-color: $background-color;
+					}
+				}
 			}
 			// To load additional site-level style blocks
 			@content;