[css-variables][css-cascade] When are variables computed?

[chharvey]

I’m a bit confused by “var() functions are substituted at computed-value time” and how it relates to inheritance.

div {
  --color-accent: lime;
  --color-text: var(--color-base);
  --color-bg: var(--color-accent);
}
figure.theme-american {
  --color-base: red;
  --color-accent: blue;
}
figure.theme-irish {
  --color-base: green;
  --color-accent: orange;
}
p {
  /* isn’t --color-text: var(--color-base); inherited here? */
  /* isn’t --color-bg: var(--color-accent); inherited here? */
  color: var(--color-text);
  background-color: var(--color-bg);
}

<div>
  <figure class="theme-american">
    <p>My text should be red, and my background should be blue.</p>
    <!-- They’re not. The text is black (inherited) and the background is lime. -->
  </figure>
</div>

CodePen

I thought all custom properties inherit, so wouldn’t the paragraph inherit the --color-text and --color-bg properties from the div? Since it also inherits the --color-base and --color-accent from the figure, shouldn’t the color be red and the background-color be blue?

Sources:

• https://drafts.csswg.org/css-cascade/#value-stages
• https://drafts.csswg.org/css-variables/#substitute-a-var

[tabatkins]

What's happening is:

1. On the div, --color-text becomes "invalid at computed value time", because --color-base doesn't exist on the div, and so it doesn't define a variable. --color-bg is set to lime, the current value of --color-accent.

2. On the figure, --color-base and --color-accent get set. (--color-bg is inherited from the div.)

3. On the p, all the custom properties inherit. --color-text is still not set to anything, so color is "invalid at computed value time" and becomes the initial value (black). --color-bg is still lime, which it was set to on the div, so background-color is set to lime. --color-accent isn't used for anything.

Remember that inheritance uses computed values, and variables are substituted as part of the computed-value stage, so the child elements don't see any variables. There's no way to set up a property on a parent element so that it'll inherit and grab a variable in a child.

[chharvey]

@tabatkins Thanks for your explanation. It sounds like when people say “custom properties are inherited” what they really mean is “child elements inherit the computed value of custom properties” (as opposed to the declared value).

Do you recommend another mechanism that does what I’m trying to achieve? I have functional colors set (text, background, emphasis, etc.) on the application level, and then within the application I have containers of varying themes (American, Irish, etc.). Then elements within all the themed containers have the actual css properties set. In other words, what I’m thinking is:

“On the application level, set the Text Color to Base Color, no matter what that is or what it will be in the future (Base Color could be determined by a theme later on). Then elements can use Text Color on any css property they want.”

Last question… You said that the reason the paragraph color was black was that since color was invalid at computed time, it takes the initial value. But in my CodePen, when I add figure { color: purple; }, the p is made purple instead of black. Is this because the initial value of color is currentColor, or is it because color an inherited property and the invalid value is actually defaulting to inherit instead of initial?

[tabatkins]

what they really mean is “child elements inherit the computed value of custom properties” (as opposed to the declared value).

Yes, but that's what inheritance always means, so there's no need for people to explicitly say it. Declared values are never inherited (see the Cascade module).

Do you recommend another mechanism that does what I’m trying to achieve?

There's no way to do what you want in the way that you want it. If you want something to respond to variable, it has to be set on the element that declares that variable (or a child that inherits it). You can't set up a custom property somewhere high in the tree that automatically takes on changing values of variables lower in the tree. (In other words, there's no "late binding" of variables. They resolve immediately upon use.)

In other words, do all your var() usage lower in the tree, on the actual elements that either set or consume the variables.

Is this because the initial value of color is currentColor, or is it because color an inherited property and the invalid value is actually defaulting to inherit instead of initial?

See https://drafts.csswg.org/css-variables/#invalid-variables - when a property is "invalid at computed value time", it computes to either its inherited or initial value, depending on whether it's an inherited property or not. color is inherited, so in your example it grabs the (inherited) black that comes from the figure. If you set figure to color: purple;, then yeah, it'll inherit that purple instead.