Merge pull request #3236 from Automattic/fix/3232

Fix button discrepancies in Varia

hever/style-editor.css

@@ -491,7 +491,11 @@ object {
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-.wp-block-a8c-blog-posts + .button, .fse-template-part .main-navigation .button {
+.wp-block-a8c-blog-posts + .button, button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .fse-template-part .main-navigation .button {
 	line-height: 1;
 	color: var(--wp--preset--color--background);
 	cursor: pointer;
@@ -506,22 +510,50 @@ object {
 	padding: 16px 24px;
 }
 
-.wp-block-a8c-blog-posts + .button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .fse-template-part .main-navigation .button:after {
+.wp-block-a8c-blog-posts + .button:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
 	content: '';
 	display: block;
 	height: 0;
 	width: 0;
 }
 
-.wp-block-a8c-blog-posts + .button:before, .fse-template-part .main-navigation .button:before {
+.wp-block-a8c-blog-posts + .button:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .fse-template-part .main-navigation .button:before {
 	margin-bottom: -0.12em;
 }
 
-.wp-block-a8c-blog-posts + .button:after, .fse-template-part .main-navigation .button:after {
+.wp-block-a8c-blog-posts + .button:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
 	margin-top: -0.11em;
 }
 
-.wp-block-a8c-blog-posts + .button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .fse-template-part .main-navigation .has-focus.button {
+button:not(.has-background):hover,
+.button:not(.has-background):hover,
+input:not(.has-background):hover[type="submit"],
+.wp-block-button__link:not(.has-background):hover,
+.wp-block-file__button:not(.has-background):hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .fse-template-part .main-navigation .button:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .fse-template-part .main-navigation .has-focus.button {
 	color: var(--wp--preset--color--background);
 	background-color: var(--wp--preset--color--primary-hover);
 }
@@ -549,6 +581,9 @@ object {
 	color: currentColor;
 }
 
+/**
+ * Button
+ */
 /* Default Style */
 .wp-block-button__link {
 	color: var(--wp--preset--color--background);
@@ -574,6 +609,11 @@ object {
 	border: 2px solid currentcolor;
 }
 
+.wp-block-button__link.is-style-outline:not(.has-text-color),
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: var(--wp--preset--color--primary);
+}
+
 .wp-block-button__link.is-style-outline:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus,
 .is-style-outline .wp-block-button__link:hover,
 .is-style-outline .wp-block-button__link:focus,
@@ -1658,7 +1698,10 @@ pre.wp-block-verse {
 	width: 100%;
 }
 
-.fse-template-part .main-navigation .button {
+.fse-template-part .main-navigation button,
+.fse-template-part .main-navigation input[type="submit"],
+.fse-template-part .main-navigation .wp-block-button__link,
+.fse-template-part .main-navigation .wp-block-file__button, .fse-template-part .main-navigation .button {
 	line-height: 1;
 	color: var(--wp--preset--color--background);
 	cursor: pointer;
@@ -1673,22 +1716,43 @@ pre.wp-block-verse {
 	padding: 16px 24px;
 }
 
-.fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .button:after {
+.fse-template-part .main-navigation button:before,
+.fse-template-part .main-navigation input[type="submit"]:before,
+.fse-template-part .main-navigation .wp-block-button__link:before,
+.fse-template-part .main-navigation .wp-block-file__button:before, .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation button:after,
+.fse-template-part .main-navigation input[type="submit"]:after,
+.fse-template-part .main-navigation .wp-block-button__link:after,
+.fse-template-part .main-navigation .wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
 	content: '';
 	display: block;
 	height: 0;
 	width: 0;
 }
 
-.fse-template-part .main-navigation .button:before {
+.fse-template-part .main-navigation button:before,
+.fse-template-part .main-navigation input[type="submit"]:before,
+.fse-template-part .main-navigation .wp-block-button__link:before,
+.fse-template-part .main-navigation .wp-block-file__button:before, .fse-template-part .main-navigation .button:before {
 	margin-bottom: -0.12em;
 }
 
-.fse-template-part .main-navigation .button:after {
+.fse-template-part .main-navigation button:after,
+.fse-template-part .main-navigation input[type="submit"]:after,
+.fse-template-part .main-navigation .wp-block-button__link:after,
+.fse-template-part .main-navigation .wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
 	margin-top: -0.11em;
 }
 
-.fse-template-part .main-navigation .button:not(.has-background):hover, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.button {
+.fse-template-part .main-navigation button:not(.has-background):hover,
+.fse-template-part .main-navigation input:not(.has-background):hover[type="submit"],
+.fse-template-part .main-navigation .wp-block-button__link:not(.has-background):hover,
+.fse-template-part .main-navigation .wp-block-file__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .fse-template-part .main-navigation button:focus,
+.fse-template-part .main-navigation input:focus[type="submit"],
+.fse-template-part .main-navigation .wp-block-button__link:focus,
+.fse-template-part .main-navigation .wp-block-file__button:focus, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation button.has-focus,
+.fse-template-part .main-navigation input.has-focus[type="submit"],
+.fse-template-part .main-navigation .has-focus.wp-block-button__link,
+.fse-template-part .main-navigation .has-focus.wp-block-file__button, .fse-template-part .main-navigation .has-focus.button {
 	color: var(--wp--preset--color--background);
 	background-color: var(--wp--preset--color--primary-hover);
 }

hever/style-rtl.css

@@ -1449,7 +1449,6 @@ button[data-load-more-btn], .button {
  */
 .wp-block-button.is-style-outline.wp-block-button__link,
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: inherit;
 	border: 2px solid currentcolor;
 	padding: 14px 24px;
 }

hever/style.css

@@ -1449,7 +1449,6 @@ button[data-load-more-btn], .button {
  */
 .wp-block-button.is-style-outline.wp-block-button__link,
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: inherit;
 	border: 2px solid currentcolor;
 	padding: 14px 24px;
 }

varia/sass/blocks/button/_editor.scss

@@ -1,3 +1,15 @@
+/**
+ * Button
+ */
+ button,
+ .button,
+ input[type="submit"],
+ .wp-block-button__link,
+ .wp-block-file__button {
+	 // Extend button style
+	 @extend %button-style;
+ }
+
 /* Default Style */
 .wp-block-button__link {
 	color: #{map-deep-get($config-button, "color", "text")};
@@ -22,6 +34,10 @@
 
 		border: 2px solid currentcolor;
 
+		&:not(.has-text-color) {
+			color: #{map-deep-get($config-button, "color", "background")};
+		}
+
 		&:hover,
 		&:focus,
 		&.has-focus {

varia/sass/blocks/button/_style.scss

@@ -18,8 +18,6 @@ input[type="submit"],
 	// Outline Style
 	&.is-style-outline.wp-block-button__link,
 	&.is-style-outline .wp-block-button__link {
-
-		color: inherit;
 		border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
 		padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};