Fix outline buttons and links inside elements with a primary background color

dalston/style-editor.css

@@ -193,6 +193,10 @@ a:hover {
 	color: #005177;
 }
 
+.has-primary-background-color a {
+	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

@@ -685,6 +685,10 @@ a:hover {
 	color: #005177;
 }
 
+.has-primary-background-color a {
+	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

@@ -685,6 +685,10 @@ a:hover {
 	color: #005177;
 }
 
+.has-primary-background-color a {
+	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;

varia/sass/base/_editor.scss

@@ -26,6 +26,10 @@ a {
 	&:hover {
 		color: #{map-deep-get($config-global, "color", "primary", "hover")};
 	}
+
+	.has-primary-background-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 & {
+		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

@@ -30,7 +30,7 @@ input[type="submit"],
 		}
 
 		&:active {
-			color: #{map-deep-get($config-button, "color", "background")};
+			color: #{map-deep-get($config-button, "color", "text")};
 		}
 
 		&:hover,
@@ -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