So I'm trying to apply a series of modifications to a color via a custom property, but as far as I can tell it can only go one level deep.
Unless I can find a way to extract the color value from the custom variable, the subsequent use of the --color references the function and not the value of the function.
May just be my mental model for this is off, or it is in fact a limitation of the Level 5 Color spec, based on "compatibility", since custom properties are treated as strings.
Any thoughts on how to do this correctly?
https://www.w3.org/TR/css-color-5/#relative-colors
:root{
--hot-red:#ff0000;
/* the use of custom property here seems to cause the relative color to show up as invalid property */
--color:color-mix(in srgb,var(--hot-red),#000 20%);
}
/* this gives a css error in chrome 120 */
body{ color: oklch(from var(--color) calc(l + 25) c h); }