Page MenuHomePhabricator

Placeholder text color
Closed, DuplicatePublic

Description

I was looking at https://wikidata.beta.wmflabs.org/wiki/Special:NewLexemeAlpha and finding the placeholder text slightly hard to read.
Using my browser's eyedropper tool, it appears that text is using #858687 which has low contrast, and that color doesn't appear within https://doc.wikimedia.org/codex/main/design-tokens/color.html
I believe it ought to be using color-placeholder or #72777d per that link.

Event Timeline

Thanks for the catch, @Quiddity! Before anything, allow me to clarify that the new Special:NewLexemeAlpha page is based off of a library called WiKit (the WD design system) and not (yet) Codex. Nevertheless, WiKit component styles should be aligned with those of Codex, so the linked source is still correct and relevant. Placeholders are not an exception: they should indeed display the color #72777d, as you well indicate. Nevertheless, that doesn't seem to be the case. I even noticed that different browsers seem to be applying a different shades of gray:

ChromeSafari
Screenshot 2022-07-07 at 21.37.50.png (1×3 px, 826 KB)
Screenshot 2022-07-07 at 21.47.50.png (1×2 px, 593 KB)

(Couldn't verify this in Firefox due to the inability to check the user agent shadow DOM there)

We'll open a bug report to ensure that the right color is applied to input placeholders in all browsers. Taking full responsibility of this, as this issue should have been discovered during manual testing quite a long time ago.
Thanks again very much for your help! 😄

(Couldn't verify this in Firefox due to the inability to check the user agent shadow DOM there)

Indeed! That's why I had to resort to the Eyedropper tool (and had to remind myself whether there was a built-in version, or if I needed to re-enable the old Colorzilla extension! It turns out there is a built-in, within "Tools->Browser Tools->Eyedropper". :-) )
Glad I could help!

Good to know! :-) Thanks so much again.

The bug is now filed here: T312633