@function --foo(--bar) using (
--blue-1, --blue-2, --blue-3, --blue-4, --blue-5, --blue-6, --blue-7, --blue-8, --blue-9, --blue-10, --blue-11, --blue-12,
--brown-1, --brown-2, --brown-3, --brown-4, --brown-5, --brown-6, --brown-7, --brown-8, --brown-9, --brown-10, --brown-11, --brown-12,
--camo-1, --camo-2, --camo-3, --camo-4, --camo-5, --camo-6, --camo-7, --camo-8, --camo-9, --camo-10, --camo-11, --camo-12,
--choco-1, --choco-2, --choco-3, --choco-4, --choco-5, --choco-6, --choco-7, --choco-8, --choco-9, --choco-10, --choco-11, --choco-12,
--cyan-1, --cyan-2, --cyan-3, --cyan-4, --cyan-5, --cyan-6, --cyan-7, --cyan-8, --cyan-9, --cyan-10, --cyan-11, --cyan-12,
--gray-1, --gray-2, --gray-3, --gray-4, --gray-5, --gray-6, --gray-7, --gray-8, --gray-9, --gray-10, --gray-11, --gray-12,
--green-1, --green-2, --green-3, --green-4, --green-5, --green-6, --green-7, --green-8, --green-9, --green-10, --green-11, --green-12,
--indigo-1, --indigo-2, --indigo-3, --indigo-4, --indigo-5, --indigo-6, --indigo-7, --indigo-8, --indigo-9, --indigo-10, --indigo-11, --indigo-12,
--jungle-1, --jungle-2, --jungle-3, --jungle-4, --jungle-5, --jungle-6, --jungle-7, --jungle-8, --jungle-9, --jungle-10, --jungle-11, --jungle-12,
--lime-1, --lime-2, --lime-3, --lime-4, --lime-5, --lime-6, --lime-7, --lime-8, --lime-9, --lime-10, --lime-11, --lime-12,
--orange-1, --orange-2, --orange-3, --orange-4, --orange-5, --orange-6, --orange-7, --orange-8, --orange-9, --orange-10, --orange-11, --orange-12,
--pink-1, --pink-2, --pink-3, --pink-4, --pink-5, --pink-6, --pink-7, --pink-8, --pink-9, --pink-10, --pink-11, --pink-12,
--purple-1, --purple-2, --purple-3, --purple-4, --purple-5, --purple-6, --purple-7, --purple-8, --purple-9, --purple-10, --purple-11, --purple-12,
--red-1, --red-2, --red-3, --red-4, --red-5, --red-6, --red-7, --red-8, --red-9, --red-10, --red-11, --red-12,
--sand-1, --sand-2, --sand-3, --sand-4, --sand-5, --sand-6, --sand-7, --sand-8, --sand-9, --sand-10, --sand-11, --sand-12,
--stone-1, --stone-2, --stone-3, --stone-4, --stone-5, --stone-6, --stone-7, --stone-8, --stone-9, --stone-10, --stone-11, --stone-12,
--teal-1, --teal-2, --teal-3, --teal-4, --teal-5, --teal-6, --teal-7, --teal-8, --teal-9, --teal-10, --teal-11, --teal-12,
--violet-1, --violet-2, --violet-3, --violet-4, --violet-5, --violet-6, --violet-7, --violet-8, --violet-9, --violet-10, --violet-11, --violet-12,
--yellow-1, --yellow-2, --yellow-3, --yellow-4, --yellow-5, --yellow-6, --yellow-7, --yellow-8, --yellow-9, --yellow-10, --yellow-11, --yellow-12
)
It gets even worse if you want access to other tokens too.
And for many other design systems that use some kind of prefix for all colors (e.g. --wa-color-*), it would be even simpler.
It would even allow passing all custom properties, by simply doing --*.
usingis a great first step, but in practice if you actually need access to design system variablesusingwill get extremely unwieldy.For example, this is what it would look like if you want access to Open Props colors:
It gets even worse if you want access to other tokens too.
With wildcards, it would become the much more manageable:
And for many other design systems that use some kind of prefix for all colors (e.g.
--wa-color-*), it would be even simpler.It would even allow passing all custom properties, by simply doing
--*.