chore: aligned header background-colors (#110)

chore: aligned background-color by header area and mainnavigation component

Author: mfranzke

source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss

@@ -3,6 +3,7 @@
 @import "../../00-base/icons/icons.helpers";
 
 $header-big-link-paddingTop: 32 * 0.0625 !default;
+$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
 
 // * reduced height
 // $header-big-link-paddingTop: 19*0.0625 !default;

source/_patterns/02-components/mainnavigation/mainnavigation.scss

@@ -36,7 +36,7 @@
 		@include icon(glyph(menu), 24, "outline", $partial: $partial);
 		@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
 
-		background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
+		background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
 
 		border-bottom: 1px solid $db-color-warm-gray-100;
 
@@ -79,7 +79,7 @@
 	}
 
 	ul {
-		background-color: #fff;
+		background-color: $header---backgroundColor;
 	}
 
 	// Multiple level navigation

source/_patterns/03-areas/00-header/_header.variables.scss

@@ -13,5 +13,3 @@ $header---borderBottom: #{to-rem(
 $header---marginBottom: to-rem(
 	$pxValue: 16
 ) !default;
-
-$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color