Added font color and size styles to form input placeholder (#4667)

* Added font color and size styles to form input placeholder

* Update quadrat/sass/elements/_forms.scss

* Quadrat: Fix search form placeholder color in the editor

* Quadrat: Remove accidental theme.json changes

* Move fix to blockbase

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>

blockbase/assets/ponyfill.css

@@ -331,6 +331,27 @@ button:focus {
 	outline-offset: 2px;
 }
 
+input.wp-block-search__input::placeholder,
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="url"]::placeholder,
+input[type="password"]::placeholder,
+input[type="search"]::placeholder,
+input[type="number"]::placeholder,
+input[type="tel"]::placeholder,
+input[type="range"]::placeholder,
+input[type="date"]::placeholder,
+input[type="month"]::placeholder,
+input[type="week"]::placeholder,
+input[type="time"]::placeholder,
+input[type="datetime"]::placeholder,
+input[type="datetime-local"]::placeholder,
+input[type="color"]::placeholder,
+textarea::placeholder {
+	color: var(--wp--custom--form--color--text);
+	opacity: 0.66;
+}
+
 select {
 	font-family: inherit;
 	font-size: 100%;
@@ -822,6 +843,11 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
 	line-height: 0;
 }
 
+.wp-block-search .wp-block-search__input::placeholder {
+	color: var(--wp--custom--form--color--text);
+	opacity: 0.66;
+}
+
 .wp-block-separator {
 	margin: var(--wp--custom--separator--margin);
 	opacity: var(--wp--custom--separator--opacity);

blockbase/sass/blocks/_search.scss

@@ -29,4 +29,10 @@
 		}
 	}
 
-}
+	.wp-block-search__input {
+		&::placeholder {
+			color: var(--wp--custom--form--color--text);
+			opacity: 0.66;
+		}
+	}
+}

blockbase/sass/elements/_forms.scss

@@ -38,6 +38,11 @@ button {
 		outline: 1px dotted currentColor;
 		outline-offset: 2px;
 	}
+
+	&::placeholder {
+		color: var(--wp--custom--form--color--text);
+		opacity: 0.66;
+	}
 }
 
 select {

quadrat/assets/theme.css

@@ -486,6 +486,26 @@ a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen
 	text-decoration: none;
 }
 
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="submit"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+textarea {
+	font-size: var(--wp--preset--font-size--normal);
+}
+
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="url"]:focus,

quadrat/sass/blocks/_search.scss

@@ -1,3 +1,5 @@
-.wp-block-search .wp-block-search__button {
-	border: none;
+.wp-block-search {
+	.wp-block-search__button {
+		border: none;
+	}
 }

quadrat/sass/elements/_forms.scss

@@ -19,4 +19,5 @@ textarea {
 	&:focus {
 		outline: 1px dotted currentColor;
 	}
+	font-size: var(--wp--preset--font-size--normal);
 }