Make input placeholder appear lighter

[thet]

The current placeholder styles make them look like normal input:

This adds an opacity of 0.5 to them to distinguish them better from normal input:

This uses @plone-gray-lighter color instead of opacity (current version of this PR):

@polyester please comment if you see any accessibility issues here.

@agitator after discussion of the implications we should forward port that to the master branch.

Setting input darker, keeping placeholder as-is:

[vincentfretin]

I almost can't read the text with @plone-gray-lighter on my screen.

[vincentfretin]

I see that plone-gray-lighter is used mainly for background and border. Please don't use it for text, this is too light.

[thet]

@vincentfretin I'd use the opacity version. May even set it to 0.6 instead 0.5.

[polyester]

Placeholder text must still satisfy a11y contrast rules, which this doesn't.
Generally, that would mean #767676 is the lightest you can go, for small text.
One could make the text bigger and say it's "large text", where the contrast needed is 3:1, and the lightest you can go is #959595, but the general assumption is that "large text" should be 20px minimum.

[vincentfretin]

See
https://codepen.io/ericwbailey/pen/dKbbEV/
and
https://webaim.org/resources/contrastchecker/?fcolor=757575&bcolor=FFFFFF
to see if it at least pass WCAG AA

[vincentfretin]

You're right #767676 is the minimum.

[vincentfretin]

The text in a document is using #4d4d4d (body { color }). Some paragraph is using #696969 (.documentDescription { color })
We could define the input color as #4d4d4d so it will be darker than the current placeholder color.

[vincentfretin]

FYI, I almost don't see a different on my desktop screen between
@plone-gray: lighten(#000, 41%); #696969
@plone-gray-light: lighten(#000, 46.5%); #767676 (@plone-input-color-placeholder is currently on this one)

If you use
@plone-input-color: @plone-gray-dark; (instead of current @plone-gray)
it's fine for me.

@plone-gray-dark: lighten(#000, 30%); is #4d4d4d

and this matches the current color for:
@plone-legend-color: @plone-gray-dark;
@plone-text-color: @plone-gray-dark;

[vincentfretin]

I would revert this back to @plone-gray-light
and use @plone-input-color: @plone-gray-dark; above.

[vincentfretin]

Can you update the comment line 6 for @plone-gray-dark it says 4c4c4c but it actually generates 4d4d4d?
Can you please use this command to generate the bundle and sourcemap (I added them in the README a few days ago, I didn't know about the grunt command):

cd plonetheme.barceloneta/plonetheme/barceloneta/theme/less
npx lessc --source-map=barceloneta-compiled.css.map barceloneta.plone.local.less barceloneta-compiled.css

The grunt command generate wrong urls in the sourcemap if you over the css rule in chrome inspector.

[thet]

Awesome finding!
I fixed the grunt task also - it's documented in https://github.com/plone/plonetheme.barceloneta/blob/2.x/HOWTO_DEVELOP.rst and for 2.x the development workflow should stay the same.
In master/barceloneta-lts grunt isn't used anymore.

[vincentfretin]

Cool you fixed the grunt task as well.
😢 I missed completely this HOWTO_DEVELOP.rst file, I didn't see it. I'm looking first for README and CONTRIBUTING.
Why don't we put the content of HOWTO_DEVELOP.rst in CONTRIBUTING.rst? CONTRIBUTING.rst contains only a link.

[vincentfretin]

Your sourcemap has indeed the correct path now. And I see it includes the source code. This is apparently not necessary because we can access the source less files already. With npx lessc the source are not included.

[vincentfretin]

Otherwise the changes looks good. You can merge.

[vincentfretin]

Ok I see that the file CONTRIBUTING.rst is the same in all packages, so we probably don't want to put additional stuff there if next time we update this file in all repositories.
I added a link to HOWTO_DEVELOP.rst from the README in #208