Input placeholder lacks sufficient contrast ratio - a11y

[Wagner3UB]

Description:

Fixes #8043

What changed:

In themes/default/globals/site.variables:

@inputColor changed from @textColor to #000000, making it explicit and independent from the global text color

@inputPlaceholderColor changed from lighten(@inputColor, 75) to lighten(@inputColor, 45), darker default placeholder for sufficient contrast

@inputPlaceholderFocusColor changed from lighten(@inputColor, 45) to lighten(@inputColor, 75), lighter on focus, correctly making the placeholder less prominent once the field is active

In themes/pastanaga/globals/site.variables:

Removed hardcoded @inputPlaceholderColor: #B8C6C8 and the entire /* Input Text Color */ block, these values are now correctly inherited from the default theme

Why:

The previous configuration had two problems:

The hardcoded #B8C6C8 in Pastanaga failed WCAG 2.1 contrast requirements, not reaching even Level A
The focus/default placeholder logic was inverted, the focused state was darker than the default

Visual impact:

This is a visual breaking change. All input placeholders using @inputPlaceholderColor and @inputPlaceholderFocusColor will have their colors inverted. Custom themes overriding these variables are not affected.

Examples:

Share page input
without focus:

with focus:

Site search without and with focus inside:

[stevepiercy]

With this minor change to the news, I approve. Thank you!

[stevepiercy]

I think this should be backported to 18, too.

One note, we've ripped out Semantic UI for Seven, so it would be good to check on the seven branch if this fix is needed, and if so, then adapt it to the new theming system. This would be a good sprint task. Maybe @pnicolli or @sneridagh can point y'all toward the proper CMSUI theming story. I found this: https://volto.readthedocs.io/seven/conceptual-guides/seven-vs-volto-differences.html#tailwind-css

[Wagner3UB]

I think this should be backported to 18, too.

One note, we've ripped out Semantic UI for Seven, so it would be good to check on the seven branch if this fix is needed, and if so, then adapt it to the new theming system. This would be a good sprint task. Maybe @pnicolli or @sneridagh can point y'all toward the proper CMSUI theming story. I found this: https://volto.readthedocs.io/seven/conceptual-guides/seven-vs-volto-differences.html#tailwind-css

@stevepiercy It will. Just to let you know, all our accessibility interventions will be present in both versions 18 and 19, without exception. Our goal at RedTurtle is to have these fixes ready for version 18 soon, followed by version 19 after its official release.