There are some CSS variables, like --core-header-buttons-background, which definition is derivated from other variables (in this case, --core-header-toolbar-background).

Given that variables are defined under the :root selector, this means that to properly customize variables, the same scope needs to be used or the relationship not be respected properly for children elements. In our case, this is a problem because we're recommending customizing variables using the body tag.

However, updating the documentation does not completely solve the problem, because there are some situations that require using classes in the body tag (for example, targeting specific app versions).

Keeping that in mind, we'll probably need to:

• Update the documentation to reflect proper usage of selectors.
• Move contextual classes to the html tag, or declare variables in the body tag.
• If classes are moved to the html tag, we should set up a deprecation policy for body classes (document in the migration guides, etc.).