Merge pull request #1430 from Automattic/fix/issue-1429

Varia: Make sure separator is always visible with background colour

varia/sass/blocks/separator/_editor.scss

@@ -1,7 +1,7 @@
 .wp-block-separator,
 hr {
-    border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};
-    clear: both;
+	border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};
+	clear: both;
 
 	&[style*="text-align:right"],
 	&[style*="text-align: right"] {
@@ -20,4 +20,9 @@ hr {
 			color: #{map-deep-get($config-global, "color", "border", "default")};
 		}
 	}
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) & {
+		border-color: currentColor;
+	}
 }

varia/sass/blocks/separator/_style.scss

@@ -27,5 +27,10 @@ hr {
 				padding-left: #{map-deep-get($config-global, "font", "size", "sm")};
 			}
 		}
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) & {
+			border-color: currentColor;
+		}
 	}
 }

varia/style-editor.css

@@ -582,6 +582,14 @@ hr.is-style-dots:before {
 	color: #DDDDDD;
 }
 
+.has-background:not(.has-background-background-color) .wp-block-separator,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-separator, .has-background:not(.has-background-background-color)
+hr,
+[class*="background-color"]:not(.has-background-background-color)
+hr {
+	border-color: currentColor;
+}
+
 table th,
 .wp-block-table th {
 	font-family: sans-serif;

varia/style-rtl.css

@@ -1887,6 +1887,11 @@ hr.wp-block-separator.is-style-dots:before {
 	padding-right: 0.83333rem;
 }
 
+.has-background:not(.has-background-background-color) hr.wp-block-separator,
+[class*="background-color"]:not(.has-background-background-color) hr.wp-block-separator {
+	border-color: currentColor;
+}
+
 .wp-block-jetpack-slideshow ul {
 	margin-right: 0;
 	margin-left: 0;

varia/style.css

@@ -1887,6 +1887,11 @@ hr.wp-block-separator.is-style-dots:before {
 	padding-left: 0.83333rem;
 }
 
+.has-background:not(.has-background-background-color) hr.wp-block-separator,
+[class*="background-color"]:not(.has-background-background-color) hr.wp-block-separator {
+	border-color: currentColor;
+}
+
 .wp-block-jetpack-slideshow ul {
 	margin-left: 0;
 	margin-right: 0;