1

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); }

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.