started styling all the possible combinations for search block

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

@@ -5,15 +5,16 @@
 
 .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);
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			padding: 0;
+			.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__icon-button.wp-block-search__button-inside {
 
 		.wp-block-search__inside-wrapper{
 			flex-direction: row-reverse;
@@ -32,15 +33,9 @@
 			&.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;
-				svg {
-					width: 14px;
-					height: 14px;
-				}
 			}
 		}
 	}
@@ -49,9 +44,12 @@
 		border: none;
 		box-shadow: none;
 		&.has-icon {
+			min-height: calc(2* var(--button--padding-vertical) + 16px);
+			padding: var(--button--padding-vertical);
+			transform: scaleX(-1);
 			svg {
-				width: 24px;
-				height: 24px;
+				width: 29px;
+				height: 29px;
 			}
 		}
 	}
@@ -63,6 +61,8 @@
 
 	.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,36 +404,33 @@ 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);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .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__icon-button.wp-block-search__button-inside .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__icon-button.wp-block-search__button-inside .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 {
@@ -441,9 +438,15 @@ ul.wp-block-categories,
 	box-shadow: none;
 }
 
+.wp-block-search .wp-block-search__button.has-icon {
+	min-height: calc(2* var(--button--padding-vertical) + 16px);
+	padding: var(--button--padding-vertical);
+	transform: scaleX(-1);
+}
+
 .wp-block-search .wp-block-search__button.has-icon svg {
-	width: 24px;
-	height: 24px;
+	width: 29px;
+	height: 29px;
 }
 
 .wp-block-search .wp-block-search__inside-wrapper {
@@ -455,6 +458,8 @@ ul.wp-block-categories,
 .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,36 +404,33 @@ 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);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__icon-button.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);
 }
 
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .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__icon-button.wp-block-search__button-inside .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 {
@@ -441,9 +438,15 @@ ul.wp-block-categories,
 	box-shadow: none;
 }
 
+.wp-block-search .wp-block-search__button.has-icon {
+	min-height: calc(2* var(--button--padding-vertical) + 16px);
+	padding: var(--button--padding-vertical);
+	transform: scaleX(-1);
+}
+
 .wp-block-search .wp-block-search__button.has-icon svg {
-	width: 24px;
-	height: 24px;
+	width: 29px;
+	height: 29px;
 }
 
 .wp-block-search .wp-block-search__inside-wrapper {
@@ -455,6 +458,8 @@ ul.wp-block-categories,
 .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);
 
 }