Refactored Search block to minimize overrides and pull details from form.

blank-canvas-blocks/assets/ponyfill.css

@@ -191,6 +191,13 @@ input[type=checkbox] + label {
 	border-color: var(--wp--custom--button--color--hover-background);
 }
 
+.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-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption {
 	font-size: var(--wp--custom--gallery--caption--font-size);
@@ -345,29 +352,49 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
-	border-radius: var(--wp--custom--form--border-radius);
+/**
+ * Button
+ */
+/**
+ * Block Options
+ */
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link {
+	text-decoration: none;
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
-	padding: var(--wp--custom--form--padding);
+.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-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
-	padding: var(--wp--custom--search--button--padding);
+.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-search .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: var(--wp--custom--form--padding);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border--radius);
-	color: var(--wp--custom--form--color--text);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: 0;
+}
+
+.wp-block-search .wp-block-search__input {
 	padding: var(--wp--custom--form--padding);
-	background: var(--wp--custom--form--color--background);
-	font-size: var(--wp--custom--form--font-size);
-	line-height: var(--wp--custom--typography--line-height);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 }
 
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 .wp-block-search .wp-block-search__button {
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
@@ -375,17 +402,37 @@ p.has-drop-cap:not(:focus):first-letter {
 	border-radius: var(--wp--custom--button--border--radius);
 	line-height: var(--wp--custom--button--border--line-height);
 	text-decoration: none;
-	padding: var(--wp--custom--search--button--padding);
-	margin: var(--wp--custom--search--button--margin);
-	line-height: var(--wp--custom--search--button--line-height);
+	color: var(--wp--custom--button--color--text);
+	border-color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
+.wp-block-search .wp-block-search__button svg {
+	fill: var(--wp--custom--button--color--text);
 }
 
-.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-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: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.has-icon,
+.wp-block-search .wp-block-search__button.has-icon {
+	line-height: 0;
+}
+
 .wp-block-separator:not(.is-style-dots) {
 	border-bottom: var(--wp--custom--separator--thickness) solid var(--wp--custom--separator--color);
 }

blank-canvas-blocks/experimental-theme.json

@@ -128,8 +128,7 @@
 					}
 				},
 				"form": {
-					"padding": "calc( 0.5 * var(--wp--custom--padding--horizontal) )",
-					"fontSize": "var(--wp--preset--font-size--normal)",
+					"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 					"border": {
 						"radius": "0",
 						"color": "#EFEFEF",
@@ -170,13 +169,6 @@
 					"thickness": "2px",
 					"width": "150px"
 				},
-				"search": {
-					"button": {
-						"lineHeight": "27px",
-						"padding": "calc( .9 * var(--wp--custom--padding--horizontal) )",
-						"margin": "0 0 0 calc( 1.4 * var(--wp--custom--padding--horizontal))"
-					}
-				},
 				"video": {
 					"caption": {
 						"margin": "var(--wp--custom--margin--vertical) auto",
@@ -281,12 +273,6 @@
 				"radius": "var(--wp--custom--button--border--radius)"
 			}
 		},
-		"core/search": {
-			"color": {
-				"text": "var(--wp--custom--color--background)",
-				"background": "var(--wp--custom--color--secondary)"
-			}
-		},
 		"core/heading/h1": {
 			"typography": {
 				"fontSize": "48px",

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

@@ -8,9 +8,14 @@
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	border-radius: var(--wp--custom--button--border--radius);
-	//border-width: var(--wp--custom--button--border--width); //TODO: <---- that
 	line-height: var(--wp--custom--button--border--line-height);
 	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
+	color: var(--wp--custom--button--color--text);
+	border-color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	svg {
+		fill: var(--wp--custom--button--color--text);
+	}
 }
 
 // NOTE: These remain for the hover styling of blocks.  This can be removed when the button block has configurable hover states.
@@ -21,6 +26,9 @@
 		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);
+		}
 	}
 }
 

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

@@ -1,32 +1,30 @@
+@import 'button';
+
 .wp-block-search {
+
 	&.wp-block-search__button-inside {
 		.wp-block-search__inside-wrapper{
+			padding: var(--wp--custom--form--padding);
 			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
-			border-radius: var(--wp--custom--form--border-radius);
+			border-radius: var(--wp--custom--form--border--radius);
 			.wp-block-search__input {
-				padding: var(--wp--custom--form--padding);
-			}
-			.wp-block-search__button {
-				padding: var(--wp--custom--search--button--padding);
+				padding: 0;
 			}
 		}
 	}
 
 	.wp-block-search__input {
-		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
-		border-radius: var(--wp--custom--form--border--radius);
-		color: var(--wp--custom--form--color--text);
 		padding: var(--wp--custom--form--padding);
-		background: var(--wp--custom--form--color--background);	
-		font-size: var(--wp--custom--form--font-size);
-		line-height: var(--wp--custom--typography--line-height);
+		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	}
 
+	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 	.wp-block-search__button {
 		@include button-main-styles;
 		@include button-hover-styles;
-		padding: var(--wp--custom--search--button--padding);
-		margin: var(--wp--custom--search--button--margin);
-		line-height: var(--wp--custom--search--button--line-height);
+		&.has-icon {
+			line-height: 0;
+		}
 	}
+
 }