Blank Canvas Blocks: Remove hover states for buttons with custom background colors

blank-canvas-blocks/assets/ponyfill.css

@@ -232,20 +232,18 @@ input[type=checkbox] + label {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link.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):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:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
-.wp-block-button .wp-block-button__link:hover svg,
-.wp-block-button .wp-block-button__link:focus svg,
-.wp-block-button .wp-block-button__link.has-focus svg {
-	fill: var(--wp--custom--button--color--hover-text);
+.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-buttons .wp-block-button:last-child {
@@ -459,20 +457,18 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link.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):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:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
-.wp-block-button .wp-block-button__link:hover svg,
-.wp-block-button .wp-block-button__link:focus svg,
-.wp-block-button .wp-block-button__link.has-focus svg {
-	fill: var(--wp--custom--button--color--hover-text);
+.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-buttons .wp-block-button:last-child {
@@ -513,20 +509,18 @@ 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:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button:focus,
-.wp-block-search .wp-block-search__button.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):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:hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus svg,
-.wp-block-search .wp-block-search__button:hover svg,
-.wp-block-search .wp-block-search__button:focus svg,
-.wp-block-search .wp-block-search__button.has-focus svg {
-	fill: var(--wp--custom--button--color--hover-text);
+.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.has-icon,
@@ -554,20 +548,18 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link.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):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:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
-.wp-block-button .wp-block-button__link:hover svg,
-.wp-block-button .wp-block-button__link:focus svg,
-.wp-block-button .wp-block-button__link.has-focus svg {
-	fill: var(--wp--custom--button--color--hover-text);
+.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-buttons .wp-block-button:last-child {
@@ -592,14 +584,14 @@ p.has-drop-cap:not(:focus):first-letter {
 	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.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):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
 }
 
-.wp-block-file .wp-block-file__button:hover svg, .wp-block-file .wp-block-file__button:focus svg, .wp-block-file .wp-block-file__button.has-focus svg {
-	fill: var(--wp--custom--button--color--hover-text);
+.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-table figcaption {

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

@@ -21,14 +21,17 @@
 
 // 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 {
-	&:hover,
-	&:focus,
-	&.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);
-		svg {
-			fill: var(--wp--custom--button--color--hover-text);
+	&:not(.has-background) {
+		&:active {
+			color: var(--button--color-text-active);
+			background-color: var(--button--color-background-active);
+		}
+
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: var(--button--color-text-hover);
+			background-color: var(--button--color-background-hover);
 		}
 	}
 }