How does currentcolor work?

“How does Warhol handle special CSS keywords like currentcolor and initial?”

Magic CSS values like currentcolor, inherit and initial set CSS properties to computed values that depend on other CSS properties or on the context the element is in. For example the computed value of currentcolor is always the current text color (color).

But just like CSS variables, these keywords hold no special meaning for Warhol. Warhol only uses computed values for comparisons, while the original specified values are only really relevant for showing better error messages (if possible). There is two reasons for this. On one hand values like currentcolor are so dynamic that they are hard to reason about. On the other hand: when it comes to enforcing design consistency, the actual keywords that were used to define a particular computed value are best treated as an implementation detail. The precise nature of CSS is not visible to a human user of your pattern library - they only see (and care about) the visible effects your CSS has.

While you can do all sorts of magic tricks with currentcolor and friends, there is only one way to do so responsibly: by including examples of all of the magic tricks in your pattern library. You can only expect everybody (humans and Warhol) to know all possible permutations of a CSS variable when each and every permutation is represented in the pattern library.

See also #

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.