Refactor button hover styles into its own custom object tree (#3881)

* Refactor button hover styles into its own custom object tree
* refactored and rebuilt quadrat to match new button styling methods

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Jeff Ong <jonger4@gmail.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -195,26 +195,128 @@ input[type=checkbox] + label {
  */
 .wp-block-button.wp-block-button__link,
 .wp-block-button .wp-block-button__link {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	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-radius: var(--wp--custom--button--border--radius);
 }
 
 .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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .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);
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.wp-block-button__link svg,
+.wp-block-button .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link,
+.wp-block-button.is-style-outline .wp-block-button__link {
+	--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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+	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);
+}
+
+.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,
+.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 {
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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,
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link svg,
+.wp-block-button.is-style-outline .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-buttons .wp-block-button:last-child {
@@ -369,26 +471,128 @@ p.has-drop-cap:not(:focus):first-letter {
  */
 .wp-block-button.wp-block-button__link,
 .wp-block-button .wp-block-button__link {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	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-radius: var(--wp--custom--button--border--radius);
 }
 
 .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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .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);
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.wp-block-button__link svg,
+.wp-block-button .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link,
+.wp-block-button.is-style-outline .wp-block-button__link {
+	--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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+	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);
+}
+
+.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,
+.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 {
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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,
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link svg,
+.wp-block-button.is-style-outline .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-buttons .wp-block-button:last-child {
@@ -404,14 +608,21 @@ p.has-drop-cap:not(:focus):first-letter {
 }
 
 .wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	padding: calc(.667em + 2px) calc(1.333em + 2px);
+	border-color: var(--wp--custom--button--border--color);
+	border-radius: var(--wp--custom--button--border--radius);
 }
 
 .wp-block-post-comments input[type="submit"] svg, .wp-block-post-comments .reply a svg {
@@ -419,22 +630,34 @@ p.has-drop-cap:not(:focus):first-letter {
 }
 
 .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .reply a: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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus svg {
-	fill: var(--wp--custom--button--color--hover-text);
+	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-post-comments input[type="submit"] {
-	border-color: var(--wp--custom--button--border--color);
-	border-style: var(--wp--custom--button--border--style);
-	border-width: var(--wp--custom--button--border--width);
+.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
 }
 
 .wp-block-post-comments .reply a {
@@ -499,26 +722,128 @@ p.has-drop-cap:not(:focus):first-letter {
  */
 .wp-block-button.wp-block-button__link,
 .wp-block-button .wp-block-button__link {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	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-radius: var(--wp--custom--button--border--radius);
 }
 
 .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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .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);
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.wp-block-button__link svg,
+.wp-block-button .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link,
+.wp-block-button.is-style-outline .wp-block-button__link {
+	--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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+	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);
+}
+
+.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,
+.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 {
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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,
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link svg,
+.wp-block-button.is-style-outline .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-buttons .wp-block-button:last-child {
@@ -542,14 +867,21 @@ p.has-drop-cap:not(:focus):first-letter {
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 .wp-block-search .wp-block-search__button {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	padding: calc(.667em + 2px) calc(1.333em + 2px);
+	border-color: var(--wp--custom--button--border--color);
+	border-radius: var(--wp--custom--button--border--radius);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
@@ -561,19 +893,40 @@ p.has-drop-cap:not(:focus):first-letter {
 .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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .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);
+	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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon,
@@ -598,26 +951,128 @@ p.has-drop-cap:not(:focus):first-letter {
  */
 .wp-block-button.wp-block-button__link,
 .wp-block-button .wp-block-button__link {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	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-radius: var(--wp--custom--button--border--radius);
 }
 
 .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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .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);
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.wp-block-button__link svg,
+.wp-block-button .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link,
+.wp-block-button.is-style-outline .wp-block-button__link {
+	--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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+	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);
+}
+
+.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,
+.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 {
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.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,
+.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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link svg,
+.wp-block-button.is-style-outline .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-buttons .wp-block-button:last-child {
@@ -625,14 +1080,21 @@ p.has-drop-cap:not(:focus):first-letter {
 }
 
 .wp-block-file .wp-block-file__button {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
+	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	padding: calc(.667em + 2px) calc(1.333em + 2px);
+	border-color: var(--wp--custom--button--border--color);
+	border-radius: var(--wp--custom--button--border--radius);
 	display: inline-block;
 }
 
@@ -641,16 +1103,34 @@ p.has-drop-cap:not(:focus):first-letter {
 }
 
 .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--border--hover-color);
-	border-style: var(--wp--custom--button--border--hover-style);
-	border-width: var(--wp--custom--button--border--hover-width);
-	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	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);
 }
 
 .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);
+	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 {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
 }
 
 .wp-block-table figcaption {

blank-canvas-blocks/experimental-theme.json

@@ -57,20 +57,28 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--button--color--text)",
-					"hoverColor": "transparent",
+					"color": "var(--wp--custom--color--foreground)",
 					"radius": "4px",
 					"style": "solid",
-					"hoverStyle": "solid",
-					"width": "0",
-					"hoverWidth": "0"
+					"width": "2px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--secondary)",
-					"hoverText": "var(--wp--custom--color--background)",
-					"hoverBackground": "#006ba1",
 					"text": "var(--wp--custom--color--background)"
 				},
+				"hover": {
+					"color": {
+						"background": "#006ba1"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "0.667em",
+						"bottom": "0.667em",
+						"left": "1.333em",
+						"right": "1.333em"
+					}
+				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--base)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
@@ -307,10 +315,7 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"color": "var(--wp--custom--button--border--color)",
-					"radius": "var(--wp--custom--button--border--radius)",
-					"style": "var(--wp--custom--button--border--style)",
-					"width": "var(--wp--custom--button--border--width)"
+					"radius": "var(--wp--custom--button--border--radius)"
 				},
 				"color": {
 					"background": "var(--wp--custom--button--color--background)",

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

@@ -4,36 +4,82 @@
 
 // NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere.  This can be removed when those no longer exist.
 @mixin button-main-styles {
- 	font-weight: var(--wp--custom--button--typography--font-weight);
-	font-family: var(--wp--custom--button--typography--font-family);
-	font-size: var(--wp--custom--button--typography--font-size);
-	line-height: var(--wp--custom--button--typography--line-height);
-	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
+	@include button-padding-styles;
+	@include button-typography-styles;
+	@include button-color-styles;
+	border-radius: var(--wp--custom--button--border--radius);
+}
+
+@mixin button-color-styles {
+	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block
+	border-color: var(--wp--custom--button--border--color);
 	svg {
 		fill: var(--wp--custom--button--color--text);
 	}
 }
 
+//standard Button padding.  Account for desired padding size and the size of the border width (so that the total height of
+//standard and outline buttons are equal.
+@mixin button-padding-styles {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) );
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) );
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) );
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) );
+}
+
+@mixin button-typography-styles {
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
+}
+
+//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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+
 // NOTE: These remain for the hover styling of blocks.  This can be removed when the button block has configurable hover states.
+// The mechanism below ONLY CHANGES CSS VARIABLES that are already applied to properties (above)
 @mixin button-hover-styles {
+	//The following changes should ONLY be changed if the user has NOT set a custom color
 	&:not(.has-background):not(.has-text-color) {
 		&: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--border--hover-color);
-			border-style: var(--wp--custom--button--border--hover-style);
-			border-width: var(--wp--custom--button--border--hover-width);
-			padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width)); //The padding found on an unmodified Button Block
-			svg {
-				fill: var(--wp--custom--button--color--hover-text);
-			}
+			//change the color variables to the hover equivalent
+			--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+			--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;
 		}
 	}
+	//The following styles can ALWAYS be changed, even if the user has set a custom color.
+	&:hover,
+	&:focus,
+	&.has-focus {
+		--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+		--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+		--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+		--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+		--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+ 		--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+		--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+		--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+		@include button-typography-styles;
+	}
 }
 
 /**
@@ -43,7 +89,17 @@
 	&.wp-block-button__link,
 	.wp-block-button__link {
 		@include button-hover-styles;
-		text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
+		@include button-main-styles;
+	}
+	&.is-style-outline {
+		&.wp-block-button__link,
+		.wp-block-button__link {
+			--wp--custom--button--color--text: var(--wp--custom--button--border--color);
+			--wp--custom--button--color--background: transparent;
+			@include button-border-styles;
+			@include button-hover-styles;
+			@include button-color-styles;
+		}
 	}
 }
 

blank-canvas-blocks/sass/blocks/_post-comments.scss

@@ -14,12 +14,6 @@
 		@include button-hover-styles;
 	}
 
-	input[type="submit"] {
-		border-color: var(--wp--custom--button--border--color);
-		border-style: var(--wp--custom--button--border--style);
-		border-width: var(--wp--custom--button--border--width);
-	}
-
 	.reply a {
 		display: inline-block;
 	}

mayland-blocks/child-experimental-theme.json

@@ -50,8 +50,32 @@
 		},
 		"custom": {
 			"button": {
+				"border": {
+					"radius": "5px"
+				},
 				"color": {
-					"hoverBackground": "var(--wp--custom--color--tertiary)"
+					"text": "var(--wp--custom--color--background)",
+					"background": "var(--wp--custom--color--foreground)"
+				},
+				"hover": {
+					"color": {
+						"background": "var(--wp--custom--color--tertiary)"
+					},
+					"border": {
+						"color": "var(--wp--custom--color--tertiary)"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "4px",
+						"bottom": "4px",
+						"left": "14px",
+						"right": "14px"
+					}
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"fontWeight": 600
 				}
 			},
 			"color": {

mayland-blocks/experimental-theme.json

@@ -61,24 +61,35 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--button--color--text)",
-					"hoverColor": "transparent",
-					"radius": "4px",
+					"color": "var(--wp--custom--color--foreground)",
+					"radius": "5px",
 					"style": "solid",
-					"hoverStyle": "solid",
-					"width": "0",
-					"hoverWidth": "0"
+					"width": "2px"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)",
-					"hoverText": "var(--wp--custom--color--background)",
-					"hoverBackground": "var(--wp--custom--color--tertiary)",
+					"background": "var(--wp--custom--color--foreground)",
 					"text": "var(--wp--custom--color--background)"
 				},
+				"hover": {
+					"color": {
+						"background": "var(--wp--custom--color--tertiary)"
+					},
+					"border": {
+						"color": "var(--wp--custom--color--tertiary)"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "4px",
+						"bottom": "4px",
+						"left": "14px",
+						"right": "14px"
+					}
+				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--base)",
-					"fontSize": "var(--wp--preset--font-size--normal)",
-					"fontWeight": "normal",
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"fontWeight": 600,
 					"lineHeight": 2
 				}
 			},
@@ -333,10 +344,7 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"color": "var(--wp--custom--button--border--color)",
-					"radius": "var(--wp--custom--button--border--radius)",
-					"style": "var(--wp--custom--button--border--style)",
-					"width": "var(--wp--custom--button--border--width)"
+					"radius": "var(--wp--custom--button--border--radius)"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--primary)",

quadrat/assets/theme.css

@@ -41,19 +41,58 @@
 	text-align: right;
 }
 
-.wp-block-button.is-style-outline.wp-block-button__link,
-.wp-block-button.is-style-outline .wp-block-button__link {
-	border: 2px solid 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,
-.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 {
-	border: none;
-	color: var(--wp--custom--color--background);
-	background: var(--wp--custom--color--primary);
-	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+.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 {
+	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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.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 {
+	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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.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 {
+	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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
+	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);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--background);
+	background-color: var(--wp--custom--button--color--text);
 }
 
 .wp-block-calendar table caption {
@@ -133,7 +172,7 @@ ul ul {
 	color: var(--wp--custom--color--primary);
 }
 
-.wp-block-post-comments .reply a {
+.wp-block-post-comments .reply a, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a:active {
 	font-size: 1em;
 	line-height: 1.2;
 }

quadrat/child-experimental-theme.json

@@ -33,17 +33,20 @@
 		"custom": {
 			"button": {
 				"border": {
-					"color": "transparent",
-					"hoverColor": "var(--wp--custom--color--foreground)",
+					"color": "var(--wp--custom--color--foreground)",
 					"radius": "0",
-					"hoverWidth": "2px"
+					"width": "3px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--foreground)",
-					"hoverText": "var(--wp--custom--color--foreground)",
-					"hoverBackground": "transparent",
 					"text": "var(--wp--custom--color--background)"
 				},
+				"hover": {
+					"color": {
+						"text": "var(--wp--custom--color--foreground)",
+						"background": "var(--wp--custom--color--background)"
+					}
+				},
 				"typography": {
 					"fontSize": "20px",
 					"fontWeight": "700"

quadrat/experimental-theme.json

@@ -57,20 +57,29 @@
 			},
 			"button": {
 				"border": {
-					"color": "transparent",
-					"hoverColor": "var(--wp--custom--color--foreground)",
+					"color": "var(--wp--custom--color--foreground)",
 					"radius": "0",
 					"style": "solid",
-					"hoverStyle": "solid",
-					"width": "0",
-					"hoverWidth": "2px"
+					"width": "3px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--foreground)",
-					"hoverText": "var(--wp--custom--color--foreground)",
-					"hoverBackground": "transparent",
 					"text": "var(--wp--custom--color--background)"
 				},
+				"hover": {
+					"color": {
+						"background": "var(--wp--custom--color--background)",
+						"text": "var(--wp--custom--color--foreground)"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "0.667em",
+						"bottom": "0.667em",
+						"left": "1.333em",
+						"right": "1.333em"
+					}
+				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--base)",
 					"fontSize": "20px",
@@ -336,10 +345,7 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"color": "var(--wp--custom--button--border--color)",
-					"radius": "var(--wp--custom--button--border--radius)",
-					"style": "var(--wp--custom--button--border--style)",
-					"width": "var(--wp--custom--button--border--width)"
+					"radius": "var(--wp--custom--button--border--radius)"
 				},
 				"color": {
 					"background": "var(--wp--custom--button--color--background)",

quadrat/sass/blocks/_buttons.scss

@@ -1,15 +1,52 @@
-.wp-block-button.is-style-outline {
-	&.wp-block-button__link,
-	.wp-block-button__link {
-		border: 2px solid currentColor; // The priority of global styles in the post editor overrides the outline style variation, so this line is needed.
+@mixin quadrat_button_hover_styles {
+	&:hover,
+	&:focus,
+	&.has-focus {
+		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);
+		padding-left: var(--wp--custom--button--spacing--padding--left);
+		padding-right: var(--wp--custom--button--spacing--padding--right);
+	}
+}
+.wp-block-button {
+ 	&.wp-block-button__link,
+ 	.wp-block-button__link {
+		&:not(.has-background):not(.has-text-color) {
+			@include quadrat_button_hover_styles;
+		}
+	}
+}
+.wp-block-file .wp-block-file__button {
+	@include quadrat_button_hover_styles;
+}	
+
+.wp-block-search {
+	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+	.wp-block-search__button {
+		@include quadrat_button_hover_styles;
+	}
+}
+
+.wp-block-post-comments {
+	input[type="submit"], .reply a {
+		@include quadrat_button_hover_styles;
+	}
+}
+
+//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
+//as an alternative to !important.  Only needed for the editor.
+.wp-block-button.wp-block-button.is-style-outline {
+ 	&.wp-block-button__link,
+ 	.wp-block-button__link {
 		&:not(.has-background):not(.has-text-color) {
 			&:hover,
 			&:focus,
 			&.has-focus {
-				border: none;
-				color: var(--wp--custom--color--background);
-				background: var(--wp--custom--color--primary);
-				padding: calc(0.667em + 2px) calc(1.333em + 2px);
+				color: var(--wp--custom--button--color--background);
+				background-color: var(--wp--custom--button--color--text);
 			}
 		}
 	}

quadrat/sass/blocks/_post-comments.scss

@@ -1,7 +1,12 @@
 .wp-block-post-comments {
 	.reply a {
-		font-size: 1em;
-		line-height: 1.2;
+		& ,
+		&:hover,
+		&:focus,
+		&:active {
+			font-size: 1em;
+			line-height: 1.2;
+		}
 	}
 
 	form {

seedlet-blocks/assets/theme.css

@@ -148,17 +148,17 @@
 /**
  * Links in Content
  */
-.is-root-container a,
-.wp-block-post-content a {
+.is-root-container a:not(.wp-block-button__link):not([download]),
+.wp-block-post-content a:not(.wp-block-button__link):not([download]) {
 	color: var(--wp--custom--color--primary);
 	text-decoration-color: var(--wp--style--color--link);
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.2em;
 }
 
-.is-root-container a:focus, .is-root-container a:hover,
-.wp-block-post-content a:focus,
-.wp-block-post-content a:hover {
+.is-root-container a:not(.wp-block-button__link):not([download]):focus, .is-root-container a:not(.wp-block-button__link):not([download]):hover,
+.wp-block-post-content a:not(.wp-block-button__link):not([download]):focus,
+.wp-block-post-content a:not(.wp-block-button__link):not([download]):hover {
 	color: var(--wp--style--color--link);
 }
 

seedlet-blocks/child-experimental-theme.json

@@ -89,8 +89,16 @@
 		},
 		"custom": {
 			"button": {
-				"color": {
-					"hoverBackground": "#336D58"
+				"border": {
+					"color": "var(--wp--custom--color--secondary)"
+				},
+				"hover": {
+					"color": {
+						"background": "#336D58"
+					},
+					"border": {
+						"color": "#336D58"
+					}
 				}
 			},
 			"color": {

seedlet-blocks/experimental-theme.json

@@ -99,20 +99,31 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--button--color--text)",
-					"hoverColor": "transparent",
+					"color": "var(--wp--custom--color--secondary)",
 					"radius": "4px",
 					"style": "solid",
-					"hoverStyle": "solid",
-					"width": "0",
-					"hoverWidth": "0"
+					"width": "2px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--secondary)",
-					"hoverText": "var(--wp--custom--color--background)",
-					"hoverBackground": "#336D58",
 					"text": "var(--wp--custom--color--background)"
 				},
+				"hover": {
+					"color": {
+						"background": "#336D58"
+					},
+					"border": {
+						"color": "#336D58"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "0.667em",
+						"bottom": "0.667em",
+						"left": "1.333em",
+						"right": "1.333em"
+					}
+				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--base)",
 					"fontSize": "var(--wp--preset--font-size--normal)",
@@ -363,10 +374,7 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"color": "var(--wp--custom--button--border--color)",
-					"radius": "var(--wp--custom--button--border--radius)",
-					"style": "var(--wp--custom--button--border--style)",
-					"width": "var(--wp--custom--button--border--width)"
+					"radius": "var(--wp--custom--button--border--radius)"
 				},
 				"color": {
 					"background": "var(--wp--custom--button--color--background)",

seedlet-blocks/sass/blocks/_links.scss

@@ -15,7 +15,7 @@
  */
 .is-root-container, // Editor class hack.
 .wp-block-post-content {
-	a {
+	a:not(.wp-block-button__link):not([download]) {
 		color: var(--wp--custom--color--primary);
 		text-decoration-color: var(--wp--style--color--link);
 		text-decoration-thickness: 1px;