How does currentcolor work?
“How does Warhol handle special CSS keywords like
Magic CSS values like
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 (
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.