Varia: Allow custom colors in separator Block.

varia/sass/blocks/separator/_editor.scss

@@ -16,6 +16,15 @@ hr {
 
 		border-bottom: none;
 
+		&.has-background,
+		&.has-text-color {
+			background-color: transparent !important;
+
+			&:before {
+				color: currentColor !important;
+			}
+		}
+
 		&:before {
 			color: #{map-deep-get($config-global, "color", "border", "default")};
 		}

varia/sass/blocks/separator/_style.scss

@@ -20,6 +20,15 @@ hr {
 
 		&.is-style-dots {
 
+			&.has-background,
+			&.has-text-color {
+				background-color: transparent !important;
+
+				&:before {
+					color: currentColor !important;
+				}
+			}
+
 			&:before {
 				color: #{map-deep-get($config-global, "color", "border", "default")};
 				font-size: #{map-deep-get($config-global, "font", "size", "xl")};

varia/style-editor.css

@@ -740,6 +740,18 @@ hr.is-style-dots {
 	border-bottom: none;
 }
 
+.wp-block-separator.is-style-dots.has-background, .wp-block-separator.is-style-dots.has-text-color,
+hr.is-style-dots.has-background,
+hr.is-style-dots.has-text-color {
+	background-color: transparent !important;
+}
+
+.wp-block-separator.is-style-dots.has-background:before, .wp-block-separator.is-style-dots.has-text-color:before,
+hr.is-style-dots.has-background:before,
+hr.is-style-dots.has-text-color:before {
+	color: currentColor !important;
+}
+
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
 	color: #DDDDDD;

varia/style-rtl.css

@@ -2021,6 +2021,14 @@ hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
 	max-width: 96px;
 }
 
+hr.wp-block-separator.is-style-dots.has-background, hr.wp-block-separator.is-style-dots.has-text-color {
+	background-color: transparent !important;
+}
+
+hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator.is-style-dots.has-text-color:before {
+	color: currentColor !important;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 	color: #DDDDDD;
 	font-size: 1.728rem;

varia/style.css

@@ -2021,6 +2021,14 @@ hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
 	max-width: 96px;
 }
 
+hr.wp-block-separator.is-style-dots.has-background, hr.wp-block-separator.is-style-dots.has-text-color {
+	background-color: transparent !important;
+}
+
+hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator.is-style-dots.has-text-color:before {
+	color: currentColor !important;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 	color: #DDDDDD;
 	font-size: 1.728rem;