Global styles: Lower selector specificity for declaring CSS properties (CSS variables)

[webmandesign]

Description

Currently WordPress global styles declare CSS properties/variables on body selector:

body {
	--wp--preset--color--black: #000000;
	...
}

This seems to be quite high specificity as themes and plugins can not use :root or html now to override those CSS variables.

It would be great if WordPress CSS variables in global styles are declared on :where(:root) selector, which provides low enough specificity:

:where(:root) {
	--wp--preset--color--black: #000000;
	...
}

That way also :root selector used in themes and plugins can override WordPress global styles CSS variables with ease.

There is really no need to set such high specificity (meaning using body selector) for declaring default CSS variables in my opinion.

Step-by-step reproduction instructions

Not applicable here.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.9+

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[markhowellsmead]

See also #35840.

[skorasaurus]

Hi,

This overlaps quite a bit with #35840 ; mind if I close this out and keep track of progress in that issue?

[webmandesign]

@skorasaurus Sure, go ahead. I'll post a comment at #35840. Sorry for duplicate.