Special thanks to @Quiddity for the great catch and for filing an initial report: T312291

For your interest, you can inspect Shadow DOM in Firefox by enabling two settings.

Thanks, @Volker_E! 😄

Relevant PRs:
Updating the tokens in Input component: https://github.com/wmde/wikit/pull/624
Updating the tokens in TextArea component: https://github.com/wmde/wikit/pull/627
Wikit pre-release for Vue3: https://github.com/wmde/wikit/pull/625
Update Wikit in special-new-lexeme: https://github.com/wmde/new-lexeme-special-page/pull/262
Wikit pre-release for Vue2: https://github.com/wmde/wikit/pull/628
Update wikit version in Wikidata Mismatch Finder: https://github.com/wmde/wikidata-mismatch-finder/pull/395
Update wikit in Query Builder: https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/822343

Hello @Sarai-WMDE, I have added the placeholder color property to the input component, could you check that it looks fine? This is the deployed address: https://2385b85125ce066b1c16e699afb51fc3822b1764--wmde-wikit.netlify.app. It looks fine now in Chrome but I am not sure about the contrast in Firefox, even though the inspector is showing the right color, it doesn't look like the contrast is very strong in my local version of Chrome.

Thanks for the change, @guergana.tzatchkova! Looks like the inputs' placeholders now display the right color in Chrome and Safari. The problem with Firefox is that the browser applies an opacity of 0.54 by default, that's what causing the lower contrast:

I think we should specify that the placeholder has full opacity at the component level, something like:

&::placeholder {
		color: $wikit-Input-placeholder-color;
                opacity: $wikit-Input-placeholder-opacity; [NEW]
	}

This involves creating a couple of tokens:

The new component token $wikit-Input-placeholder-opacity will consume a new alias token called $opacity-base, that will need to be added to the alias.json file. The latter alias token should consume the global token $opacity-100.

@Sarai-WMDE upon checking this behavior in Mismatch Finder, I noticed that the color in the TextArea is right but the opacity is still not 1.

Oh! Makes sense because these are different components. I totally forgot to check. We should create and apply an opacity component token for TextArea, same we did for Input. Should we apply changes in the same patch?

TextInput, Lookup and TextArea have been fixed in WiKit, and they now display the right placeholder color (#72777d). The elements in the Special:NewLexeme page in Beta are displaying the right styles, and so is the TextArea in Mismatch finder.

I believe, though, that the version of Wikit hasn't been updated in Query Builder (see last AC): the input elements included there are not aligned with the latest changes.

Thanks for verifying this @Sarai-WMDE , I will move this back to todo so that the query builder can be updated

In T312633#8193019, @Sarai-WMDE wrote:

TextInput, Lookup and TextArea have been fixed in WiKit, and they now display the right placeholder color (#72777d). The elements in the Special:NewLexeme page in Beta are displaying the right styles, and so is the TextArea in Mismatch finder.

I believe, though, that the version of Wikit hasn't been updated in Query Builder (see last AC): the input elements included there are not aligned with the latest changes.

I forgot to update the ticket but the changes have been applied. The last build (#13) of query-builder to production was made on June 22. I am creating a new query builder build for production (#14), then you will be able to see the changes in https://query.wikidata.org/querybuilder/?uselang=en

The new Query Builder build (no pun intended) has been created
Wikimedia CI build: https://integration.wikimedia.org/ci/job/wikidata-query-builder-build/lastBuild/
Deploy ticket: https://gerrit.wikimedia.org/r/c/wikidata/query-builder/deploy/+/828048

All up to date! Input-type components now display the right placeholder color (and opacity) in the last Query builder build (pun always intended). Thanks @guergana.tzatchkova!

(Verified in Chrome v104, Safari v15.6 and Firefox Nightly v106 on macOS Monterey)