Merge pull request #3338 from Automattic/fix/3250

Varia: Fix link and button color settings

dalston/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.3.6
+Version: 1.3.7
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

dalston/style-editor.css

@@ -193,6 +193,10 @@ a:hover {
 	color: #005177;
 }
 
+.has-primary-background-color a:not(.has-text-color) {
+	color: #FFFFFF;
+}
+
 button,
 a {
 	cursor: pointer;
@@ -571,6 +575,11 @@ object {
 	background: transparent;
 }
 
+.has-primary-background-color .wp-block-button__link.is-style-outline:not(.has-text-color), .has-primary-background-color
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #FFFFFF;
+}
+
 .wp-block-button__link.is-style-squared,
 .is-style-squared .wp-block-button__link {
 	border-radius: 0;

dalston/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.3.6
+Version: 1.3.7
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -685,6 +685,10 @@ a:hover {
 	color: #005177;
 }
 
+.has-primary-background-color a:not(.has-text-color) {
+	color: #FFFFFF;
+}
+
 button,
 a {
 	cursor: pointer;
@@ -1437,7 +1441,7 @@ button[data-load-more-btn], .button {
 
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
-	color: #0073AA;
+	color: #FFFFFF;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
@@ -1447,6 +1451,11 @@ button[data-load-more-btn], .button {
 	color: #005177;
 }
 
+.has-primary-background-color .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color), .has-primary-background-color
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #FFFFFF;
+}
+
 .wp-block-button.is-style-squared,
 .wp-block-button.is-style-squared .wp-block-button__link {
 	border-radius: 0;

dalston/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.3.6
+Version: 1.3.7
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -685,6 +685,10 @@ a:hover {
 	color: #005177;
 }
 
+.has-primary-background-color a:not(.has-text-color) {
+	color: #FFFFFF;
+}
+
 button,
 a {
 	cursor: pointer;
@@ -1437,7 +1441,7 @@ button[data-load-more-btn], .button {
 
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
-	color: #0073AA;
+	color: #FFFFFF;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
@@ -1447,6 +1451,11 @@ button[data-load-more-btn], .button {
 	color: #005177;
 }
 
+.has-primary-background-color .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color), .has-primary-background-color
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #FFFFFF;
+}
+
 .wp-block-button.is-style-squared,
 .wp-block-button.is-style-squared .wp-block-button__link {
 	border-radius: 0;

morden/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business's online presence.
 Requires at least: WordPress 4.9.6
-Version: 1.6.6
+Version: 1.6.7
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

morden/style-editor.css

@@ -220,6 +220,10 @@ a:hover {
 	color: var(--wp--preset--color--primary-hover);
 }
 
+.has-primary-background-color a:not(.has-text-color) {
+	color: var(--wp--preset--color--background);
+}
+
 button,
 a {
 	cursor: pointer;
@@ -598,6 +602,11 @@ object {
 	background: transparent;
 }
 
+.has-primary-background-color .wp-block-button__link.is-style-outline:not(.has-text-color), .has-primary-background-color
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: var(--wp--preset--color--background);
+}
+
 .wp-block-button__link.is-style-squared,
 .is-style-squared .wp-block-button__link {
 	border-radius: 0;

morden/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business's online presence.
 Requires at least: WordPress 4.9.6
-Version: 1.6.6
+Version: 1.6.7
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -713,6 +713,10 @@ a:hover {
 	color: var(--wp--preset--color--primary-hover);
 }
 
+.has-primary-background-color a:not(.has-text-color) {
+	color: var(--wp--preset--color--background);
+}
+
 button,
 a {
 	cursor: pointer;
@@ -1475,6 +1479,11 @@ button[data-load-more-btn], .button {
 	color: var(--wp--preset--color--primary-hover);
 }
 
+.has-primary-background-color .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color), .has-primary-background-color
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: var(--wp--preset--color--background);
+}
+
 .wp-block-button.is-style-squared,
 .wp-block-button.is-style-squared .wp-block-button__link {
 	border-radius: 0;

morden/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business's online presence.
 Requires at least: WordPress 4.9.6
-Version: 1.6.6
+Version: 1.6.7
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -713,6 +713,10 @@ a:hover {
 	color: var(--wp--preset--color--primary-hover);
 }
 
+.has-primary-background-color a:not(.has-text-color) {
+	color: var(--wp--preset--color--background);
+}
+
 button,
 a {
 	cursor: pointer;
@@ -1475,6 +1479,11 @@ button[data-load-more-btn], .button {
 	color: var(--wp--preset--color--primary-hover);
 }
 
+.has-primary-background-color .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color), .has-primary-background-color
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: var(--wp--preset--color--background);
+}
+
 .wp-block-button.is-style-squared,
 .wp-block-button.is-style-squared .wp-block-button__link {
 	border-radius: 0;

varia/sass/base/_editor.scss

@@ -26,6 +26,10 @@ a {
 	&:hover {
 		color: #{map-deep-get($config-global, "color", "primary", "hover")};
 	}
+
+	.has-primary-background-color &:not(.has-text-color) {
+		color: #{map-deep-get($config-global, "color", "background", "default")};
+	}
 }
 
 button,

varia/sass/base/_reset.scss

@@ -88,6 +88,10 @@ a {
 	&:hover {
 		color: #{map-deep-get($config-global, "color", "primary", "hover")};
 	}
+
+	.has-primary-background-color &:not(.has-text-color) {
+		color: #{map-deep-get($config-global, "color", "background", "default")};
+	}
 }
 
 button,

varia/sass/blocks/button/_editor.scss

@@ -41,6 +41,10 @@
 			color: #{map-deep-get($config-global, "color", "primary", "hover")};
 			background: transparent;
 		}
+
+		.has-primary-background-color &:not(.has-text-color) {
+			color: #{map-deep-get($config-button, "color", "text")};
+		}
 	}
 
 	/* Squared Style */

varia/sass/blocks/button/_style.scss

@@ -38,6 +38,10 @@ input[type="submit"],
 		&.has-focus {
 			color: #{map-deep-get($config-button, "color", "background-hover")};
 		}
+
+		.has-primary-background-color &:not(.has-text-color) {
+			color: #{map-deep-get($config-button, "color", "text")};
+		}
 	}
 
 	// Squared Style