Make color styles inherit

WordPress · Mar 30, 2020 · c2d2a8a · c2d2a8a
1 parent 3cd2a17
commit c2d2a8a
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -144,6 +144,10 @@ $navigation-sub-menu-width: $grid-unit-10 * 25;
 			align-items: center;
 			width: max-content;
 			padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+
+			// Inherit colors from the parent nav block. Overrides some
+			// default styling on `<a>` elements that sets the color to blue.
+			color: inherit;
 		}
 
 		// Submenu links only
@@ -194,28 +198,34 @@ $navigation-sub-menu-width: $grid-unit-10 * 25;
 .wp-block-navigation {
 
 	// Default / Light styles
-	.wp-block-navigation-link,
-	&.is-style-light .wp-block-navigation-link {
+	&:not(.has-text-color) .wp-block-navigation-link,
+	&:not(.has-text-color).is-style-light .wp-block-navigation-link {
 		//  No text color
-		&:not(.has-text-color) > .wp-block-navigation__container {
+		> .wp-block-navigation__container {
 			color: $light-style-sub-menu-text-color;
 		}
+	}
 
+	// Default / Light styles
+	&:not(.has-background) .wp-block-navigation-link,
+	&:not(.has-background).is-style-light .wp-block-navigation-link {
 		// No background color
 		&:not(.has-background) > .wp-block-navigation__container {
 			background-color: $light-style-sub-menu-background-color;
 		}
 	}
 
 	// Dark styles.
-	&.is-style-dark .wp-block-navigation-link {
+	&:not(.has-text-color).is-style-dark .wp-block-navigation-link {
 		// No text color
-		&:not(.has-text-color) > .wp-block-navigation__container {
+		> .wp-block-navigation__container {
 			color: $dark-style-sub-menu-text-color;
 		}
+	}
 
+	&:not(.has-background).is-style-dark .wp-block-navigation-link {
 		// No background color
-		&:not(.has-background) > .wp-block-navigation__container {
+		> .wp-block-navigation__container {
 			background-color: $dark-style-sub-menu-background-color;
 		}
 	}