mod-base 1.0.72-beta.2 → 1.0.72-beta.3

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - Adding dark mode support for the input component when the input is active or focused.
 
+## 1.0.71
+
+- Hero wave dark mode support
+
 ## 1.0.70
 
 - Adding support for custom background color and fill on progress bars in dark mode.

package/package.json

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

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

@@ -61,6 +61,8 @@ $contact-us-blue-light: #8498E7;
 	$form-input-border-color: null,
 	$form-focus-border-color: $color-grey-400,
 	$hero-content-box-shadow-mobile: null,
+	$hero-wave-accent: null,
+	$hero-wave-base: null,
 	$interactive-text-color: $color-grey-500,
 	$interactive-text-color-hover: lighten($interactive-text-color, 20%),
 	$logo-filter: invert(1) hue-rotate(180deg),
@@ -120,6 +122,14 @@ $contact-us-blue-light: #8498E7;
 		$theme: $base-color !global;
 	}
 
+	@if $hero-wave-accent == null {
+		$hero-wave-accent: $accent-color;
+	}
+
+	@if $hero-wave-base == null {
+		$hero-wave-base: $background;
+	}
+
 	@if $reviews-card-active-star-color == null {
 		@if $theme != null {
 			$reviews-card-active-star-color: $theme;
@@ -555,6 +565,14 @@ $contact-us-blue-light: #8498E7;
 				filter: $background-img-brightness;
 			}
 
+			.hero__wave-accent {
+				fill: $hero-wave-accent;
+			}
+
+			.hero__wave-base {
+				fill: $hero-wave-base;
+			}
+
 			@if $color-btn != null {
 				.btn--primary,
 				.btn-primary,