fix: Add consistent color for placeholder

WordPress · Jan 21, 2025 · e9cb9b9 · e9cb9b9
1 parent be5ce8a
commit e9cb9b9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -286,6 +286,16 @@ export const Input = styled.input< InputProps >`
 
 		&::-webkit-input-placeholder {
 			line-height: normal;
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.darkGrayPlaceholder };
 		}
 
 		&[type='email'],

diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
@@ -27,4 +27,18 @@
 		padding-left: $grid-unit-15;
 		padding-right: $grid-unit-15;
 	}
+
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
+
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: $dark-gray-placeholder;
+	}
+
+	&:-ms-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
 }