Re: [csswg-drafts] [css-variables-2] Lazy / Late resolving variable mappings (#11543)

Another day, another bug report rooted in this.

User: "Why doesn't my code work to use a larger shadow with a bigger spread?"

Their code:

```css
wa-avatar {
    box-shadow: var(--wa-shadow-l);
    --wa-shadow-spread-l: 2.0rem;
}
```

The relevant design tokens:

```css
:where(:root),
:host {
  --wa-shadow-spread-scale: -0.5;
  --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
    var(--wa-shadow-spread-l) var(--wa-color-shadow);
}
```

Without including every possible mapping in every component's shadow root (so that `:host` applies), the mapping is only performed in `:root` and thus overriding it has no effect.

And even if it were included in every shadow root, this does not help with any other element.

Including every mapping on `*` is the only real solution, but that is a very heavyweight solution AND cancels inheritance.

Ideally, it should be possible for people to set either of these tokens at any level of the hierarchy, and have `--wa-shadow-l` just adapt unless _its own_ value is explicitly overridden.

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11543#issuecomment-2628330555 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 January 2025 20:17:29 UTC