[Style] - Inline style !important and CSS variable scope

[webexpr-dhenriet]

Is there any reason to put a !important on all inline styles generated by theme.json ?

.has-black-800-color {
    color: var(--wp--preset--color--black-800) !important;
}

this should be enough ? Would it be possible to remove !important ?

.has-black-800-color {
    color: var(--wp--preset--color--black-800);
}

For CSS variables, why is the scope body and not :root ?

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

Would it be possible to encapsulate them in :root ?

:root {
    --wp--preset--color--black: #000000;
}

[Mamaduka]

I've seen a similar discussion somewhere but can't find it now.

@ndiego, do you remember anything related/similar?

[skorasaurus]

@Mamaduka -

It's been a source of frustration for myself and several others but the reasons are outlined in #37590 (comment)

[Gierand]

For CSS variables, why is the scope body and not :root ?

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

Would it be possible to encapsulate them in :root ?

:root {
    --wp--preset--color--black: #000000;
}

This has now been fixed (with Gutenberg plugin or WP 6.6).

[webexpr-dhenriet]

@Gierand thanks for your feedback