[css-color-5]: light-dark() doesn’t work with Relative Colors

[ai]

There is some compatibility issue between Relative Colors and light-dark() in all browsers:

.broken {
  --dynamic-bg: light-dark(oklch(70% 0 0), oklch(30% 0 0));
  background: oklch(from var(--dynamic-bg) l 0.05 160); /* browsers ignore it */
}

Maybe Relative Colors spec was created without thinking of light-dark()? But I think it really limits colors DX.

Demo: https://codepen.io/iskin/pen/yLWdxrR

[romainmenke]

This is not a spec issue.
Implementation haven't added support (yet).

This is the same underlying issue as lacking support for currentColor.

The relevant WPT tests can be found here : https://wpt.fyi/results/css/css-color/parsing/color-valid-relative-color.html?label=master&label=experimental&aligned&q=currentcolor

Each test with currentColor is failing in Chrome and Firefox, but Safari Preview just landed support.

In Safari Preview your demo also works as expected:

[ai]

Great, thanks for the explanation