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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.67
+
+- Add support for `.helper-text` class that can be added to radio buttons
+
+## 1.0.66
+
+- Updated dark mode color for checkbox disclaimer
+
 ## 1.0.65
 
 - Updated dark mode colors for review cards

package/package.json

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

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

@@ -145,7 +145,7 @@ $contact-us-blue-light: #8498E7;
 
 	// 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,.cards';
+	$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';
 
 	@media (prefers-color-scheme: dark){
 		body[data-color-scheme='system'] {
@@ -167,6 +167,10 @@ $contact-us-blue-light: #8498E7;
 				color: $checkbox-label-color;
 			}
 
+			.checkbox__disclaimer {
+				color: $color-grey-500;
+			}
+
 			.checkbox--multi-select-options {
 				.checkbox__label-text {
 					color: $color-grey-300;
@@ -174,26 +178,43 @@ $contact-us-blue-light: #8498E7;
 
 				label {
 					input[type="checkbox"] {
-						&:not(:checked) {
-							&::before {
-								background: transparent;
-								border: 1px solid $color-grey-500;
-							}
+						&::before {
+							background: transparent;
+							border: 1px solid $radio-btn-border-color;
 						}
-
+		
 						~ .checkbox__label-text {
 							&::before {
-								border: 1px solid $color-grey-500;
+								border: 1px solid $radio-btn-border-color;
 							}
 						}
-
+		
 						&:active,
-						&:focus,
 						&:hover,
+						&:focus-visible {
+							&::before {
+								background: $radio-btn-standard-hover-select-background-color;
+								border: 1px solid $radio-btn-standard-hover-select-background-color;
+							}
+						}
+		
 						&:checked {
 							~ .checkbox__label-text {
 								&::before {
-									border: 1px solid $radio-btn-standard-hover-select-background-color;
+									border: 1px solid $radio-btn-checked-border-color;
+								}
+							}
+		
+							&::before {
+								background: $radio-btn-checked-border-color;
+								border: 1px solid $radio-btn-checked-border-color;
+							}
+						}
+
+						&:focus-visible {
+							~ .checkbox__label-text {
+								&::before {
+									border: 1px solid $radio-btn-checked-border-color;
 								}
 							}
 						}
@@ -229,10 +250,6 @@ $contact-us-blue-light: #8498E7;
 				background-color: transparent;
 			}
 
-			.card__picture img {
-				filter: $background-img-brightness;
-			}
-
 			.icon-close,
 			.progress-bar__title,
 			.header__back-button,
@@ -844,6 +861,10 @@ $contact-us-blue-light: #8498E7;
 						&:checked + .radio__button-text {
 							color: $radio-btn-checked-text-color;
 
+							.helper-text {
+								color: $radio-btn-checked-text-color;
+							}
+
 							+ span {
 								background-color: $radio-btn-checked-icon-background-color;
 
@@ -910,6 +931,10 @@ $contact-us-blue-light: #8498E7;
 								+ span {
 									color: $radio-btn-text-color;
 
+									.helper-text {
+										color: $radio-btn-text-color;
+									}
+
 									&::before {
 										background-color: $radio-btn-background-color;
 										border-color: $radio-btn-border-color;