Changed CSS and variable handling so that the color of the border and text of a button in 'outline mode' matches the background color of the button when not. (#3972)

blockbase/assets/ponyfill.css

@@ -225,7 +225,7 @@ input[type=checkbox] + label {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -239,6 +239,7 @@ input[type=checkbox] + label {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -279,7 +280,6 @@ input[type=checkbox] + label {
 	--wp--custom--button--color--text: var(--wp--custom--button--border--color);
 	--wp--custom--button--color--background: transparent;
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@@ -288,7 +288,7 @@ input[type=checkbox] + label {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@@ -301,6 +301,7 @@ input[type=checkbox] + label {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -415,7 +416,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -429,6 +430,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -469,7 +471,6 @@ p.has-drop-cap:not(:focus):first-letter {
 	--wp--custom--button--color--text: var(--wp--custom--button--border--color);
 	--wp--custom--button--color--background: transparent;
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@@ -478,7 +479,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@@ -491,6 +492,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -552,7 +554,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -567,6 +569,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -666,7 +669,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -680,6 +683,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -720,7 +724,6 @@ p.has-drop-cap:not(:focus):first-letter {
 	--wp--custom--button--color--text: var(--wp--custom--button--border--color);
 	--wp--custom--button--color--background: transparent;
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@@ -729,7 +732,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@@ -742,6 +745,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -811,7 +815,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -830,6 +834,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -895,7 +900,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -909,6 +914,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -949,7 +955,6 @@ p.has-drop-cap:not(:focus):first-letter {
 	--wp--custom--button--color--text: var(--wp--custom--button--border--color);
 	--wp--custom--button--color--background: transparent;
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@@ -958,7 +963,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@@ -971,6 +976,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -1024,7 +1030,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 	display: inline-block;
 }
@@ -1040,6 +1046,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 

blockbase/sass/blocks/_button.scss

@@ -14,7 +14,7 @@
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	svg {
 		fill: var(--wp--custom--button--color--text);
 	}
@@ -41,7 +41,6 @@
 //apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
 @mixin button-border-styles {
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@@ -63,6 +62,7 @@
 			--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
 			--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
 			@include button-color-styles;
+			border-color: var(--wp--custom--button--border--color);
 		}
 	}
 	//The following styles can ALWAYS be changed, even if the user has set a custom color.

blockbase/theme.json

@@ -57,7 +57,7 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--color--foreground)",
+					"color": "var(--wp--custom--color--secondary)",
 					"radius": "4px",
 					"style": "solid",
 					"width": "2px"
@@ -69,6 +69,9 @@
 				"hover": {
 					"color": {
 						"background": "#006ba1"
+					},
+					"border": {
+						"color": "#006ba1"
 					}
 				},
 				"spacing": {

mayland-blocks/theme.json

@@ -61,7 +61,7 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--color--foreground)",
+					"color": "var(--wp--custom--color--secondary)",
 					"radius": "5px",
 					"style": "solid",
 					"width": "2px"

quadrat/assets/theme.css

@@ -230,7 +230,7 @@ ul ul {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
@@ -244,6 +244,7 @@ ul ul {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -284,7 +285,6 @@ ul ul {
 	--wp--custom--button--color--text: var(--wp--custom--button--border--color);
 	--wp--custom--button--color--background: transparent;
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@@ -293,7 +293,7 @@ ul ul {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: var(--wp--custom--button--border--color);
+	border-color: currentColor;
 }
 
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@@ -306,6 +306,7 @@ ul ul {
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
+	border-color: currentColor;
 	border-color: var(--wp--custom--button--border--color);
 }
 
@@ -353,7 +354,6 @@ ul ul {
 .wp-block-post-comments .reply a {
 	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
 	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
 	padding-top: var(--wp--custom--button--spacing--padding--top);
 	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);

quadrat/child-theme.json

@@ -45,6 +45,9 @@
 					"color": {
 						"text": "var(--wp--custom--color--foreground)",
 						"background": "var(--wp--custom--color--background)"
+					},
+					"border": {
+						"color": "var(--wp--custom--color--foreground)"
 					}
 				},
 				"typography": {

quadrat/theme.json

@@ -70,6 +70,9 @@
 					"color": {
 						"background": "var(--wp--custom--color--background)",
 						"text": "var(--wp--custom--color--foreground)"
+					},
+					"border": {
+						"color": "var(--wp--custom--color--foreground)"
 					}
 				},
 				"spacing": {