Use the regular color for placeholder text (#2908)

connor-baer · web-flow · commit 2b0d27ca122f · 2025-01-22T12:57:36.000+01:00
diff --git a/.changeset/cuddly-lemons-rhyme.md b/.changeset/cuddly-lemons-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': patch
+---
+
+Removed the Input component's red or yellow placeholder color when invalid or with a warning. Previously, the placeholder text could be confused for a user entered value.
diff --git a/packages/circuit-ui/components/Input/Input.module.css b/packages/circuit-ui/components/Input/Input.module.css
@@ -53,10 +53,6 @@
   box-shadow: inset 0 0 0 1px var(--cui-border-danger);
 }
 
-.base[aria-invalid="true"]:not(:focus):not([disabled])::placeholder {
-  color: var(--cui-fg-danger);
-}
-
 .warning {
   border: 1px solid var(--cui-border-warning);
 }
@@ -70,10 +66,6 @@
   box-shadow: inset 0 0 0 1px var(--cui-border-warning);
 }
 
-.warning:not(:focus):not([disabled])::placeholder {
-  color: var(--cui-fg-warning);
-}
-
 /* Disabled */
 
 .base:disabled,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sumup-oss/circuit-ui': patch
 +---
++
 +Removed the Input component's red or yellow placeholder color when invalid or with a warning. Previously, the placeholder text could be confused for a user entered value.
Original file line number	Diff line number	Diff line change
`@@ -53,10 +53,6 @@`
`53`	`53`	`box-shadow: inset 0 0 0 1px var(--cui-border-danger);`
`54`	`54`	`}`
`55`	`55`
`56`		`-.base[aria-invalid="true"]:not(:focus):not([disabled])::placeholder {`
`57`		`- color: var(--cui-fg-danger);`
`58`		`-}`
`59`		`-`
`60`	`56`	`.warning {`
`61`	`57`	`border: 1px solid var(--cui-border-warning);`
`62`	`58`	`}`
`@@ -70,10 +66,6 @@`
`70`	`66`	`box-shadow: inset 0 0 0 1px var(--cui-border-warning);`
`71`	`67`	`}`
`72`	`68`
`73`		`-.warning:not(:focus):not([disabled])::placeholder {`
`74`		`- color: var(--cui-fg-warning);`
`75`		`-}`
`76`		`-`
`77`	`69`	`/* Disabled */`
`78`	`70`
`79`	`71`	`.base:disabled,`