From 9445634e0c9e21942d5806606aa7e0422d6b5df5 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Fri, 30 Aug 2019 19:14:23 +0000
Subject: [PATCH] Twenty Nineteen: Improve compatibility with custom colors in
 the separator block.

Props kjellr.
Fixes #47811.

git-svn-id: https://develop.svn.wordpress.org/trunk@45920 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentynineteen/sass/blocks/_blocks.scss        | 6 +++++-
 src/wp-content/themes/twentynineteen/style-editor.css     | 8 ++++++--
 src/wp-content/themes/twentynineteen/style-editor.scss    | 8 ++++++--
 src/wp-content/themes/twentynineteen/style-rtl.css        | 6 +++++-
 src/wp-content/themes/twentynineteen/style.css            | 6 +++++-
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
index e59eb470cd..0a5920f6dd 100644
--- a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
+++ b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
@@ -691,8 +691,12 @@
 			height: inherit;
 			text-align: center;
 
-			&:before {
+			// Only apply the default dot color if there's no separator color specified.
+			&:not(.has-text-color):not(.has-background) {
 				color: $color__text-light;
+			}
+
+			&:before {
 				font-size: $font__size-lg;
 				letter-spacing: $font__size-sm;
 				padding-left: $font__size-sm;
diff --git a/src/wp-content/themes/twentynineteen/style-editor.css b/src/wp-content/themes/twentynineteen/style-editor.css
index 557402f56b..a229b79ea3 100644
--- a/src/wp-content/themes/twentynineteen/style-editor.css
+++ b/src/wp-content/themes/twentynineteen/style-editor.css
@@ -1135,7 +1135,8 @@ figcaption,
 
 /** === Separator === */
 .wp-block-separator:not(.is-style-dots) {
-  border-bottom: 2px solid #767676;
+  background-color: #767676;
+  height: 2px;
 }
 
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
@@ -1143,8 +1144,11 @@ figcaption,
   margin-left: 0;
 }
 
-.wp-block-separator.is-style-dots:before {
+.wp-block-separator.is-style-dots {
   color: #767676;
+}
+
+.wp-block-separator.is-style-dots:before {
   font-size: 1.6875em;
   letter-spacing: calc(2 * 1rem);
   padding-left: calc(2 * 1rem);
diff --git a/src/wp-content/themes/twentynineteen/style-editor.scss b/src/wp-content/themes/twentynineteen/style-editor.scss
index dd1103e753..1c6c4de53d 100644
--- a/src/wp-content/themes/twentynineteen/style-editor.scss
+++ b/src/wp-content/themes/twentynineteen/style-editor.scss
@@ -588,7 +588,8 @@ figcaption,
 .wp-block-separator {
 
 	&:not(.is-style-dots) {
-		border-bottom: 2px solid $color__text-light;
+		background-color: $color__text-light;
+		height: 2px;
 	}
 
 	&:not(.is-style-wide):not(.is-style-dots) {
@@ -596,8 +597,11 @@ figcaption,
 		margin-left: 0;
 	}
 
-	&.is-style-dots:before {
+	&.is-style-dots {
 		color: $color__text-light;
+	}
+
+	&.is-style-dots:before {
 		font-size: $font__size-lg;
 		letter-spacing: calc(2 * #{$size__spacing-unit});
 		padding-left: calc(2 * #{$size__spacing-unit});
diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css
index fb6db2b98b..f9c7c41acc 100644
--- a/src/wp-content/themes/twentynineteen/style-rtl.css
+++ b/src/wp-content/themes/twentynineteen/style-rtl.css
@@ -6010,9 +6010,13 @@ body.page .main-navigation {
   }
 }
 
+.entry .entry-content .wp-block-separator.is-style-dots:not(.has-text-color):not(.has-background),
+.entry .entry-content hr.is-style-dots:not(.has-text-color):not(.has-background) {
+  color: #767676;
+}
+
 .entry .entry-content .wp-block-separator.is-style-dots:before,
 .entry .entry-content hr.is-style-dots:before {
-  color: #767676;
   font-size: 1.6875em;
   letter-spacing: 0.88889em;
   padding-right: 0.88889em;
diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css
index c48af2552d..7835272d92 100644
--- a/src/wp-content/themes/twentynineteen/style.css
+++ b/src/wp-content/themes/twentynineteen/style.css
@@ -6022,9 +6022,13 @@ body.page .main-navigation {
   }
 }
 
+.entry .entry-content .wp-block-separator.is-style-dots:not(.has-text-color):not(.has-background),
+.entry .entry-content hr.is-style-dots:not(.has-text-color):not(.has-background) {
+  color: #767676;
+}
+
 .entry .entry-content .wp-block-separator.is-style-dots:before,
 .entry .entry-content hr.is-style-dots:before {
-  color: #767676;
   font-size: 1.6875em;
   letter-spacing: 0.88889em;
   padding-left: 0.88889em;