search block styles started

blank-canvas-blocks/assets/ponyfill.css

@@ -127,7 +127,7 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	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);
 	color: var(--wp--custom--form--color--text);
 	padding: var(--wp--custom--form--padding);
 	background: var(--wp--custom--form--color--background);
@@ -345,6 +345,39 @@ 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);
+}
+
+.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-search .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);
+}
+
+.wp-block-search .wp-block-search__button {
+	font-weight: var(--wp--custom--button--font-weight);
+	font-family: var(--wp--custom--button--font-family);
+	font-size: var(--wp--custom--button--font-size);
+	line-height: var(--wp--custom--button--line-height);
+	border-radius: var(--wp--custom--button--border-radius);
+}
+
+.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-separator:not(.is-style-dots) {
 	border-bottom: var(--wp--custom--separator--thickness) solid var(--wp--custom--separator--color);
 }

blank-canvas-blocks/experimental-theme.json

@@ -88,7 +88,16 @@
 				"contentSize": "620px",
 				"wideSize": "1000px"
 			},
+			"custom-comments":{
+				"root": "I copied the root typography preset variables to custom until this (or a similar PR) gets merged: https://github.com/WordPress/gutenberg/pull/29714",
+				"search-block": "the core/search variables won't work until https://github.com/WordPress/gutenberg/pull/29830 is merged"
+			},
 			"custom": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"lineHeight": "1.6",
+					"fontFamily": "var(--wp--preset--font-family--base)"
+				},
 				"color": {
 					"primary": "var(--wp--preset--color--black)",
 					"secondary": "var(--wp--preset--color--blue)",
@@ -119,10 +128,11 @@
 					}
 				},
 				"form": {
-					"padding": "5px",
+					"padding": "calc( 0.5 * var(--wp--custom--padding--horizontal) )",
+					"fontSize": "var(--wp--preset--font-size--normal)",
 					"border": {
 						"radius": "0",
-						"color": "#cccccc",
+						"color": "#EFEFEF",
 						"width": "2px",
 						"style": "solid"
 					},
@@ -264,6 +274,12 @@
 				"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/_search.scss

@@ -0,0 +1,26 @@
+.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);
+			.wp-block-search__input {
+				padding: var(--wp--custom--form--padding);
+			}
+		}
+	}
+
+	.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);
+	}
+
+	.wp-block-search__button {
+		@include button-main-styles;
+		@include button-hover-styles;
+	}
+}

blank-canvas-blocks/sass/elements/_forms.scss

@@ -15,7 +15,7 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	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);
 	color: var(--wp--custom--form--color--text);
 	padding: var(--wp--custom--form--padding);
 	background: var(--wp--custom--form--color--background);