Merge pull request #2610 from Automattic/update/spearhead-more-search-blocks-styles

Spearhead: Style all possible search block combinations

seedlet/assets/css/style-editor.css

@@ -319,7 +319,7 @@ a {
 	cursor: pointer;
 }
 
-.wp-block-search .wp-block-search__button, .wp-block-a8c-blog-posts + .button {
+.wp-block-a8c-blog-posts + .button {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -333,27 +333,27 @@ a {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+.wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts + .button:after {
 	content: '';
 	display: block;
 	height: 0;
 	width: 0;
 }
 
-.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before {
+.wp-block-a8c-blog-posts + .button:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
-.wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+.wp-block-a8c-blog-posts + .button:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-search .wp-block-search__button:active, .wp-block-a8c-blog-posts + .button:active {
+.wp-block-a8c-blog-posts + .button:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-search .wp-block-search__button:hover, .wp-block-a8c-blog-posts + .button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-a8c-blog-posts + .button:focus, .wp-block-search .has-focus.wp-block-search__button, .wp-block-a8c-blog-posts + .has-focus.button {
+.wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts + .has-focus.button {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1066,8 +1066,25 @@ p.has-background {
 }
 
 .wp-block-search {
-	display: flex;
-	max-width: var(--responsive--aligndefault-width);
+	flex-wrap: wrap;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: transparent;
+	border: var(--form--border-width) solid var(--form--border-color);
+	border-radius: var(--form--border-radius);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: var(--form--spacing-unit);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
+	padding: 0;
 }
 
 .wp-block-search .wp-block-search__label {
@@ -1075,20 +1092,78 @@ p.has-background {
 }
 
 .wp-block-search .wp-block-search__input {
-	border: var(--form--border-width) solid var(--form--border-color);
-	border-radius: var(--form--border-radius);
 	font-family: var(--form--font-family);
 	font-size: var(--form--font-size);
 	line-height: var(--form--line-height);
+	border: var(--form--border-width) solid var(--form--border-color);
+	border-radius: var(--form--border-radius);
+	color: var(--form--color-text);
+	line-height: var(--global--line-height-body);
 	max-width: inherit;
 	margin-right: calc( .66 * var(--global--spacing-horizontal));
 	padding: var(--form--spacing-unit);
+	background: transparent;
 }
 
 .wp-block-search .wp-block-search__input:focus {
+	color: var(--form--color-text);
 	border-color: var(--form--border-color);
 }
 
+.wp-block-search .wp-block-search__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-search .wp-block-search__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-search .wp-block-search__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-search .wp-block-search__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.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(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	transform: scaleX(-1);
+	padding: 0;
+	min-width: calc(2* var(--button--padding-vertical) + 16px);
+	min-height: calc(2* var(--button--padding-vertical) + 16px);
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	fill: currentColor;
+	width: 29px;
+	height: 29px;
+}
+
 .wp-block-separator,
 hr {
 	border-bottom: var(--separator--height) solid var(--separator--border-color);
@@ -1880,7 +1955,7 @@ pre.wp-block-verse {
 	}
 }
 
-.wp-block-search .wp-block-search__button, .wp-block-a8c-blog-posts + .button {
+.wp-block-a8c-blog-posts + .button {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -1894,27 +1969,27 @@ pre.wp-block-verse {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+.wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts + .button:after {
 	content: '';
 	display: block;
 	height: 0;
 	width: 0;
 }
 
-.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before {
+.wp-block-a8c-blog-posts + .button:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
-.wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+.wp-block-a8c-blog-posts + .button:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-search .wp-block-search__button:active, .wp-block-a8c-blog-posts + .button:active {
+.wp-block-a8c-blog-posts + .button:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-search .wp-block-search__button:hover, .wp-block-a8c-blog-posts + .button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-a8c-blog-posts + .button:focus, .wp-block-search .has-focus.wp-block-search__button, .wp-block-a8c-blog-posts + .has-focus.button {
+.wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts + .has-focus.button {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

seedlet/assets/sass/blocks/_editor.scss

@@ -23,7 +23,7 @@
 @import "posts-list/editor";
 @import "pullquote/editor";
 @import "quote/editor";
-@import "search/editor";
+@import "search/style";
 @import "separator/editor";
 @import "slideshow/editor";
 @import "subscription/editor";

seedlet/assets/sass/blocks/search/_editor.scss

@@ -1,24 +0,0 @@
-.wp-block-search {
-    display: flex;
-    max-width: var(--responsive--aligndefault-width);
-    .wp-block-search__label {
-        font-weight: normal;
-    }
-    .wp-block-search__input {
-        border: var(--form--border-width) solid var(--form--border-color);
-        border-radius: var(--form--border-radius);
-        font-family: var(--form--font-family);
-        font-size: var(--form--font-size);
-        line-height: var(--form--line-height);
-        max-width: inherit;
-        margin-right: calc( .66 * var(--global--spacing-horizontal) );
-        padding: var(--form--spacing-unit);
-
-        &:focus {
-            border-color: var(--form--border-color);
-        }
-    }
-    .wp-block-search__button {
-        @extend %button-style;
-    }
-}

seedlet/assets/sass/blocks/search/_style.scss

@@ -1,21 +1,58 @@
 .wp-block-search {
-    display: flex;
-    max-width: var(--responsive--aligndefault-width);
-    .wp-block-search__label {
-        font-weight: normal;
-    }
-    .wp-block-search__input {
-        border: var(--form--border-width) solid var(--form--border-color);
-        border-radius: var(--form--border-radius);
-        color: var(--form--color-text);
-        line-height: var(--global--line-height-body);
-        max-width: inherit;
-        margin-right: calc( .66 * var(--global--spacing-horizontal) );
-        padding: var(--form--spacing-unit);
+	flex-wrap: wrap;
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			background: transparent;
+			border: var(--form--border-width) solid var(--form--border-color);
+			border-radius: var(--form--border-radius);
+			.wp-block-search__input {
+				padding: var(--form--spacing-unit);
+			}
+			.wp-block-search__button {
+				padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+				&.has-icon {
+					padding: 0;
+				}
+			}
+		}
+	}
 
-        &:focus {
-            color: var(--form--color-text);
-            border-color: var(--form--border-color);
-        }
-    }
+	.wp-block-search__label {
+		font-weight: normal;
+	}
+
+	.wp-block-search__input {
+		font-family: var(--form--font-family);
+		font-size: var(--form--font-size);
+		line-height: var(--form--line-height);
+		border: var(--form--border-width) solid var(--form--border-color);
+		border-radius: var(--form--border-radius);
+		color: var(--form--color-text);
+		line-height: var(--global--line-height-body);
+		max-width: inherit;
+		margin-right: calc( .66 * var(--global--spacing-horizontal) );
+		padding: var(--form--spacing-unit);
+		background: transparent;
+
+		&:focus {
+			color: var(--form--color-text);
+			border-color: var(--form--border-color);
+		}
+	}
+	.wp-block-search__button {
+		@include button-style();
+		border: none;
+		box-shadow: none;
+		&.has-icon {
+			transform: scaleX(-1);	
+			padding: 0;		
+			min-width: calc(2* var(--button--padding-vertical) + 16px);
+			min-height: calc(2* var(--button--padding-vertical) + 16px);
+			svg {
+				fill: currentColor;
+				width: 29px;
+				height: 29px;
+			}
+		}
+	}
 }

seedlet/style-rtl.css

@@ -2269,8 +2269,25 @@ p.has-text-color a {
 }
 
 .wp-block-search {
-	display: flex;
-	max-width: var(--responsive--aligndefault-width);
+	flex-wrap: wrap;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: transparent;
+	border: var(--form--border-width) solid var(--form--border-color);
+	border-radius: var(--form--border-radius);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: var(--form--spacing-unit);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
+	padding: 0;
 }
 
 .wp-block-search .wp-block-search__label {
@@ -2278,6 +2295,9 @@ p.has-text-color a {
 }
 
 .wp-block-search .wp-block-search__input {
+	font-family: var(--form--font-family);
+	font-size: var(--form--font-size);
+	line-height: var(--form--line-height);
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
 	color: var(--form--color-text);
@@ -2285,6 +2305,7 @@ p.has-text-color a {
 	max-width: inherit;
 	margin-left: calc( .66 * var(--global--spacing-horizontal));
 	padding: var(--form--spacing-unit);
+	background: transparent;
 }
 
 .wp-block-search .wp-block-search__input:focus {
@@ -2292,6 +2313,60 @@ p.has-text-color a {
 	border-color: var(--form--border-color);
 }
 
+.wp-block-search .wp-block-search__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-search .wp-block-search__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-search .wp-block-search__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-search .wp-block-search__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.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(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	transform: scaleX(-1);
+	padding: 0;
+	min-width: calc(2* var(--button--padding-vertical) + 16px);
+	min-height: calc(2* var(--button--padding-vertical) + 16px);
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	fill: currentColor;
+	width: 29px;
+	height: 29px;
+}
+
 hr {
 	border-style: none;
 	border-bottom: var(--separator--height) solid var(--separator--border-color);

seedlet/style.css

@@ -2269,8 +2269,25 @@ p.has-text-color a {
 }
 
 .wp-block-search {
-	display: flex;
-	max-width: var(--responsive--aligndefault-width);
+	flex-wrap: wrap;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: transparent;
+	border: var(--form--border-width) solid var(--form--border-color);
+	border-radius: var(--form--border-radius);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: var(--form--spacing-unit);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
+	padding: 0;
 }
 
 .wp-block-search .wp-block-search__label {
@@ -2278,6 +2295,9 @@ p.has-text-color a {
 }
 
 .wp-block-search .wp-block-search__input {
+	font-family: var(--form--font-family);
+	font-size: var(--form--font-size);
+	line-height: var(--form--line-height);
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
 	color: var(--form--color-text);
@@ -2285,6 +2305,7 @@ p.has-text-color a {
 	max-width: inherit;
 	margin-right: calc( .66 * var(--global--spacing-horizontal));
 	padding: var(--form--spacing-unit);
+	background: transparent;
 }
 
 .wp-block-search .wp-block-search__input:focus {
@@ -2292,6 +2313,60 @@ p.has-text-color a {
 	border-color: var(--form--border-color);
 }
 
+.wp-block-search .wp-block-search__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-search .wp-block-search__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-search .wp-block-search__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-search .wp-block-search__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.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(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	transform: scaleX(-1);
+	padding: 0;
+	min-width: calc(2* var(--button--padding-vertical) + 16px);
+	min-height: calc(2* var(--button--padding-vertical) + 16px);
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	fill: currentColor;
+	width: 29px;
+	height: 29px;
+}
+
 hr {
 	border-style: none;
 	border-bottom: var(--separator--height) solid var(--separator--border-color);

spearhead/assets/sass/block-extends/_search.scss

@@ -1,68 +1,61 @@
-@mixin input-search-style() {
-	background: transparent;
-	color: var(--global--color-secondary);
-}
-
 .wp-block-search {
 
-	// wrong class on gutenberg editor, we'll need to change it after that's fixed
-	&.wp-block-search__icon-button.wp-block-search__button-inside {
-		.wp-block-search__button {
-			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-		}
-	}
-
-	// wrong class on gutenberg editor, we'll need to change it after that's fixed
-	&.wp-block-search__text-button.wp-block-search__button-inside {
-
+	&.wp-block-search__button-inside {
 		.wp-block-search__inside-wrapper{
-			flex-direction: row-reverse;
-			padding-left: 0;
-			border: none;
-			border-bottom: var(--form--border-width) solid var(--form--border-color);
+			padding: 0;
+			.wp-block-search__button {
+				padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				margin: -1px -1px -1px 0;
+			}
 		}
 
-		.wp-block-search__input {
-			border: none;
-			padding: 0 0 0 10px;
-			font-size: var(--global--font-size-sm);
+		&:not(.wp-block-search__icon-button) {
+			.wp-block-search__inside-wrapper{
+				border-radius: var(--button--border-radius);
+			}
 		}
 
-		.wp-block-search__button {
-			&.has-icon {
-				margin-left: 0;
-				background: transparent;
-				color: var(--entry-header--color);
-				padding: 0;
+		&.wp-block-search__icon-button {
+
+			.wp-block-search__inside-wrapper{
+				flex-direction: row-reverse;
+				padding-left: 0;
 				border: none;
-				transform: scaleX(-1);
-				min-width: 14px;
-				svg {
-					width: 14px;
-					height: 14px;
+				border-bottom: var(--form--border-width) solid var(--form--border-color);
+			}
+	
+			.wp-block-search__input {
+				border: none;
+				padding: 0 0 0 10px;
+			}
+	
+			.wp-block-search__button {
+				&.has-icon {
+					margin-left: 0;
+					background: transparent;
+					color: var(--form--border-color);
+					padding: 0;
+					border: none;
 				}
 			}
-		}
-	}
 
-	.wp-block-search__button {
-		border: none;
-		box-shadow: none;
-		&.has-icon {
-			svg {
-				width: 24px;
-				height: 24px;
-			}
 		}
 	}
 
 	.wp-block-search__inside-wrapper {
-		@include input-search-style();
+		color: var(--global--color-secondary);
 		align-items: center;
 	}
 
+	.wp-block-search__label {
+		margin-bottom: 1rem;
+	}
+
 	.wp-block-search__input {
-		@include input-search-style();
+		color: var(--form--color-text);
+		margin-right: calc( .1 * var(--global--spacing-horizontal));
 		border: none;
 		border-bottom: var(--form--border-width) solid var(--form--border-color);
 	}

spearhead/style-rtl.css

@@ -404,57 +404,53 @@ ul.wp-block-categories,
 	text-transform: uppercase;
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 0;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	margin: -1px 0 -1px -1px;
+}
+
+.wp-block-search.wp-block-search__button-inside:not(.wp-block-search__icon-button) .wp-block-search__inside-wrapper {
+	border-radius: var(--button--border-radius);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
 	flex-direction: row-reverse;
 	padding-right: 0;
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__input {
 	border: none;
 	padding: 0 10px 0 0;
-	font-size: var(--global--font-size-sm);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button.has-icon {
 	margin-right: 0;
 	background: transparent;
-	color: var(--entry-header--color);
+	color: var(--form--border-color);
 	padding: 0;
 	border: none;
-	transform: scaleX(-1);
-	min-width: 14px;
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
-	width: 14px;
-	height: 14px;
-}
-
-.wp-block-search .wp-block-search__button {
-	border: none;
-	box-shadow: none;
-}
-
-.wp-block-search .wp-block-search__button.has-icon svg {
-	width: 24px;
-	height: 24px;
 }
 
 .wp-block-search .wp-block-search__inside-wrapper {
-	background: transparent;
 	color: var(--global--color-secondary);
 	align-items: center;
 }
 
+.wp-block-search .wp-block-search__label {
+	margin-bottom: 1rem;
+}
+
 .wp-block-search .wp-block-search__input {
-	background: transparent;
-	color: var(--global--color-secondary);
+	color: var(--form--color-text);
+	margin-left: calc( .1 * var(--global--spacing-horizontal));
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }

spearhead/style.css

@@ -404,57 +404,53 @@ ul.wp-block-categories,
 	text-transform: uppercase;
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 0;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	margin: -1px -1px -1px 0;
+}
+
+.wp-block-search.wp-block-search__button-inside:not(.wp-block-search__icon-button) .wp-block-search__inside-wrapper {
+	border-radius: var(--button--border-radius);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
 	flex-direction: row-reverse;
 	padding-left: 0;
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__input {
 	border: none;
 	padding: 0 0 0 10px;
-	font-size: var(--global--font-size-sm);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button.has-icon {
 	margin-left: 0;
 	background: transparent;
-	color: var(--entry-header--color);
+	color: var(--form--border-color);
 	padding: 0;
 	border: none;
-	transform: scaleX(-1);
-	min-width: 14px;
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
-	width: 14px;
-	height: 14px;
-}
-
-.wp-block-search .wp-block-search__button {
-	border: none;
-	box-shadow: none;
-}
-
-.wp-block-search .wp-block-search__button.has-icon svg {
-	width: 24px;
-	height: 24px;
 }
 
 .wp-block-search .wp-block-search__inside-wrapper {
-	background: transparent;
 	color: var(--global--color-secondary);
 	align-items: center;
 }
 
+.wp-block-search .wp-block-search__label {
+	margin-bottom: 1rem;
+}
+
 .wp-block-search .wp-block-search__input {
-	background: transparent;
-	color: var(--global--color-secondary);
+	color: var(--form--color-text);
+	margin-right: calc( .1 * var(--global--spacing-horizontal));
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }

spearhead/variables.css

@@ -53,11 +53,11 @@
 	--button--border-radius: 0px;
 	--button--color-text: var(--global--color-background);
 	--button--color-background: var(--global--color-primary);
-	--button--font-weight: bold;
+	--button--font-weight: normal;
 	--button--font-family: var(--global--font-secondary);
 	--button--font-size: var(--global--font-size-sm);
 	--button--border-radius: 3px;
-	--button--padding-vertical: 24px;
+	--button--padding-vertical: 16px;
 	--button--padding-horizontal: 32px;
 
 	--cover--color-foreground: var(--global--color-background);
@@ -90,11 +90,8 @@
 	/* Forms */
 	--form--border-color: var(--global--color-secondary);
 	--form--border-width: 1px;
-
-	/* Buttons */
 	--form--spacing-unit: 6px;
-	--button--padding-vertical: var(--form--spacing-unit);
-	--button--padding-horizontal: var(--form--spacing-unit);
+	--form--color-text: var(--global--color-secondary);
 
 }