Description

Discovered while working on #60275

Not sure what the plans are for the InputControl and TextareaControl components, especially regarding the CSS-in-JS part. I seem to recall there was an ongoing discussion about not using CSS-in-JS for the future so this may need to wait for a decision.

Anyways:

TextareaControl does set a default color for the placeholder text:

InputControl doesn't, so it uses the browser default:

https://github.com/WordPress/gutenberg/blob/7a4b5aa5d8a63d97b084e1339e6ce544dfc944bb/packages/components/src/input-control/styles/input-control-styles.tsx

It's important to remind that the placeholder text should have a sufficient color contrast. That's the reason why Core and the Editor provide CSS to set the color by targeting the prefixed CSS selectors for -webkit, -moz, and -ms.

I would say the two components should behave consistently. They either should provide a default color or should not and delegate the styling to the consumers.

Note: according to #69311 the opacity is no longer needed for Firefox.

Cc @WordPress/gutenberg-components

Step-by-step reproduction instructions

• Go to the InputControl in the Storybook: https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-inputcontrol--docs
• Compare the placeholder text color in Chrome and Firefox.
• Observe the color is slightly different. Use a color measurement tool if necessary e.g. Digital Color Meter on macOS, as the color difference is hard to perceive for the eye.
• Go to the TextareaControl in the Storybook: https://wordpress.github.io/gutenberg/?path=/docs/components-textareacontrol--docs
• Compare the placeholder text color in Chrome and Firefox.
• Observe it's the same color, because it's provided by the TextareaControl component.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure