Update CSS for `::-moz-placeholder` color

[afercia]

See related GitHub issue for the block editor: ​https://github.com/WordPress/gutenberg/issues/69311

This applies to both Core and Bundled Themes.

Firefox changed their implementation for the native placeholder attribute color, see ​https://github.com/mozilla/gecko-dev/commit/2af3322dbe9ac09d6117faba6ce21494e53ef7a2

Instead of using opacity: 0.54; Firefox now uses a color-mix value with an equivalent opacity:

color: color-mix(in srgb, currentColor 54%, transparent);

Core and Themes used to override the Firefox opacity to opacity: 1; to make sure the placeholder text color has sufficient contrast ratio.

Given the upstream change:

• The opacity: 1; is no longer necessary. It doesn't do anything and can be safely removed.
• For themes: the opacity can be removed as well but themes that don't set a color should now set one otherwise the default Firefox color is used instead and it doesn't have a sufficient color contrast. For example. Twenty Twemty-One does use an opacity ​but it doesn't use a color.

Note:
If you're curious to check the Firefox default stylesheet for form elements, you can access the Firefox forms.css stylesheet by entering this resource URL in your Firefox address bar: resource://gre-resources/forms.css

Trac ticket: https://core.trac.wordpress.org/ticket/63030

[abcd95]

Hi again @afercia and Thanks for opening the issue for core.

themes that don't set a color should now set one otherwise the default Firefox color is used

What color do you think would be best from an accessibility point of view?

FYI, the core is using ​#646970

[sabernhardt]

The theme styles should be considered separately. Firefox just changed the opacity and color a few months ago, and it could be too soon to remove opacity: 1 on the front end. About ​18% of Firefox users have a version before the browser's style change. Also, five themes (T13 to T17) still have the older :-moz-placeholder syntax.

The priority for themes is adding a color in Twenty Twenty-One to override Firefox's color-mix(in srgb, currentColor 54%, transparent). Try to use a relative color (possibly the color-mix with a higher percentage) so it works with the theme's default and dark mode, plus any custom colors.

[afercia]

it could be too soon to remove opacity: 1 on the front end. About 18% of Firefox users have a version before the browser's style change.

Sure. The WordPress admin supports the last two versions of the major browsers. The Themes support is unclear to me. Anyways, there's no need to rush.

Re: the color, I guess it should be a color that fits with the theme's color palette so that I'm not sure all themes can use the same color. Also, some themes use a light gray background color for the inputs (for example: Twenty Sixteen). In these cases the placeholder text color should still provide a sufficient color contrast with that specific background color.

[aialvi]

I have some thoughts to share. The current approach needs to consider compatibility with legacy Firefox versions that still represent about 18% of users. I'd recommend keeping the opacity: 1 property temporarily with a clear deprecation timeline and documenting the planned removal date in code comments. For theme implementation, using

color-mix(in srgb, currentColor 75%, transparent)

provides better contrast while maintaining compatibility across themes. For the core implementation, we should retain the #646970 color for the admin area while adding progressive enhancement for newer Firefox versions, making sure we meet WCAG AA compliance for color contrast. Theme authors would benefit from guidance on implementing relative color values using color-mix, which automatically supports both light and dark modes.