fixed hover states for buttons on bcb

blank-canvas-blocks/assets/ponyfill.css

@@ -232,24 +232,19 @@ input[type=checkbox] + label {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:not(.has-background):active,
-.wp-block-button .wp-block-button__link:not(.has-background):active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
-}
-
-.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
-.wp-block-button .wp-block-button__link:not(.has-background):hover,
-.wp-block-button .wp-block-button__link:not(.has-background):focus,
-.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
-	color: var(--button--color-text-hover);
-	background-color: var(--button--color-background-hover);
-}
-
-.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
-.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
-.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
-.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
+}
+
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -464,24 +459,19 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:not(.has-background):active,
-.wp-block-button .wp-block-button__link:not(.has-background):active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
-}
-
-.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
-.wp-block-button .wp-block-button__link:not(.has-background):hover,
-.wp-block-button .wp-block-button__link:not(.has-background):focus,
-.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
-	color: var(--button--color-text-hover);
-	background-color: var(--button--color-background-hover);
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
 }
 
-.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
-.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
-.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
-.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -523,24 +513,19 @@ p.has-drop-cap:not(:focus):first-letter {
 	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):active,
-.wp-block-search .wp-block-search__button:not(.has-background):active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover,
+.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus,
+.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus,
-.wp-block-search .wp-block-search__button:not(.has-background):hover,
-.wp-block-search .wp-block-search__button:not(.has-background):focus,
-.wp-block-search .wp-block-search__button:not(.has-background).has-focus {
-	color: var(--button--color-text-hover);
-	background-color: var(--button--color-background-hover);
-}
-
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus svg,
-.wp-block-search .wp-block-search__button:not(.has-background):hover svg,
-.wp-block-search .wp-block-search__button:not(.has-background):focus svg,
-.wp-block-search .wp-block-search__button:not(.has-background).has-focus svg {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -569,24 +554,19 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:not(.has-background):active,
-.wp-block-button .wp-block-button__link:not(.has-background):active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
-}
-
-.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
-.wp-block-button .wp-block-button__link:not(.has-background):hover,
-.wp-block-button .wp-block-button__link:not(.has-background):focus,
-.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
-	color: var(--button--color-text-hover);
-	background-color: var(--button--color-background-hover);
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
 }
 
-.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
-.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
-.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
-.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -612,17 +592,13 @@ p.has-drop-cap:not(:focus):first-letter {
 	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-file .wp-block-file__button:not(.has-background):active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
-}
-
-.wp-block-file .wp-block-file__button:not(.has-background):hover, .wp-block-file .wp-block-file__button:not(.has-background):focus, .wp-block-file .wp-block-file__button:not(.has-background).has-focus {
-	color: var(--button--color-text-hover);
-	background-color: var(--button--color-background-hover);
+.wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
 }
 
-.wp-block-file .wp-block-file__button:not(.has-background):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):focus svg, .wp-block-file .wp-block-file__button:not(.has-background).has-focus svg {
+.wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 

blank-canvas-blocks/sass/blocks/_button.scss

@@ -21,17 +21,13 @@
 
 // NOTE: These remain for the hover styling of blocks.  This can be removed when the button block has configurable hover states.
 @mixin button-hover-styles {
-	&:not(.has-background) {
-		&:active {
-			color: var(--button--color-text-active);
-			background-color: var(--button--color-background-active);
-		}
-
+	&:not(.has-background):not(.has-text-color) {
 		&:hover,
 		&:focus,
 		&.has-focus {
-			color: var(--button--color-text-hover);
-			background-color: var(--button--color-background-hover);
+			color: var(--wp--custom--button--color--hover-text);
+			background-color: var(--wp--custom--button--color--hover-background);
+			border-color: var(--wp--custom--button--color--hover-background);
 			svg {
 				fill: var(--wp--custom--button--color--hover-text);
 			}