I found that this CSS doesn’t work in all browsers:
.broken {
--base: oklch(70% 0.1 30);
background: oklch(from var(--base) calc(l - 10%) c h); /* browsers ignore it */
}
The only way to change lightness is to avoid % by using calc(l - 0.1).
It looks confusing to me. But I don’t know what part of the spec prohibits it.
Demo: https://codepen.io/iskin/pen/GRabXPr