Tailwind v4 Color Template

This isn't an issue, but I wanted to put this here to share with anyone else looking for how to use Radix colors in Tailwind v4. The key part is using the inline keyword when defining the theme. https://tailwindcss.com/docs/theme#referencing-other-variables This template replies on having the Radix color vars in the document already, I have a list of those imports here also for convenience. ## Tailwind v4 Theme Configuration ```css @theme inline { --color-slate-1: var(--slate-1); --color-slate-2: var(--slate-2); --color-slate-3: var(--slate-3); --color-slate-4: var(--slate-4); --color-slate-5: var(--slate-5); --color-slate-6: var(--slate-6); --color-slate-7: var(--slate-7); --color-slate-8: var(--slate-8); --color-slate-9: var(--slate-9); --color-slate-10: var(--slate-10); --color-slate-11: var(--slate-11); --color-slate-12: var(--slate-12); --color-slateA-1: var(--slate-a1); --color-slateA-2: var(--slate-a2); --color-slateA-3: var(--slate-a3); --color-slateA-4: var(--slate-a4); --color-slateA-5: var(--slate-a5); --color-slateA-6: var(--slate-a6); --color-slateA-7: var(--slate-a7); --color-slateA-8: var(--slate-a8); --color-slateA-9: var(--slate-a9); --color-slateA-10: var(--slate-a10); --color-slateA-11: var(--slate-a11); --color-slateA-12: var(--slate-a12); --color-red-1: var(--red-1); --color-red-2: var(--red-2); --color-red-3: var(--red-3); --color-red-4: var(--red-4); --color-red-5: var(--red-5); --color-red-6: var(--red-6); --color-red-7: var(--red-7); --color-red-8: var(--red-8); --color-red-9: var(--red-9); --color-red-10: var(--red-10); --color-red-11: var(--red-11); --color-red-12: var(--red-12); --color-redA-1: var(--red-a1); --color-redA-2: var(--red-a2); --color-redA-3: var(--red-a3); --color-redA-4: var(--red-a4); --color-redA-5: var(--red-a5); --color-redA-6: var(--red-a6); --color-redA-7: var(--red-a7); --color-redA-8: var(--red-a8); --color-redA-9: var(--red-a9); --color-redA-10: var(--red-a10); --color-redA-11: var(--red-a11); --color-redA-12: var(--red-a12); --color-tomato-1: var(--tomato-1); --color-tomato-2: var(--tomato-2); --color-tomato-3: var(--tomato-3); --color-tomato-4: var(--tomato-4); --color-tomato-5: var(--tomato-5); --color-tomato-6: var(--tomato-6); --color-tomato-7: var(--tomato-7); --color-tomato-8: var(--tomato-8); --color-tomato-9: var(--tomato-9); --color-tomato-10: var(--tomato-10); --color-tomato-11: var(--tomato-11); --color-tomato-12: var(--tomato-12); --color-tomatoA-1: var(--tomato-a1); --color-tomatoA-2: var(--tomato-a2); --color-tomatoA-3: var(--tomato-a3); --color-tomatoA-4: var(--tomato-a4); --color-tomatoA-5: var(--tomato-a5); --color-tomatoA-6: var(--tomato-a6); --color-tomatoA-7: var(--tomato-a7); --color-tomatoA-8: var(--tomato-a8); --color-tomatoA-9: var(--tomato-a9); --color-tomatoA-10: var(--tomato-a10); --color-tomatoA-11: var(--tomato-a11); --color-tomatoA-12: var(--tomato-a12); --color-ruby-1: var(--ruby-1); --color-ruby-2: var(--ruby-2); --color-ruby-3: var(--ruby-3); --color-ruby-4: var(--ruby-4); --color-ruby-5: var(--ruby-5); --color-ruby-6: var(--ruby-6); --color-ruby-7: var(--ruby-7); --color-ruby-8: var(--ruby-8); --color-ruby-9: var(--ruby-9); --color-ruby-10: var(--ruby-10); --color-ruby-11: var(--ruby-11); --color-ruby-12: var(--ruby-12); --color-rubyA-1: var(--ruby-a1); --color-rubyA-2: var(--ruby-a2); --color-rubyA-3: var(--ruby-a3); --color-rubyA-4: var(--ruby-a4); --color-rubyA-5: var(--ruby-a5); --color-rubyA-6: var(--ruby-a6); --color-rubyA-7: var(--ruby-a7); --color-rubyA-8: var(--ruby-a8); --color-rubyA-9: var(--ruby-a9); --color-rubyA-10: var(--ruby-a10); --color-rubyA-11: var(--ruby-a11); --color-rubyA-12: var(--ruby-a12); --color-crimson-1: var(--crimson-1); --color-crimson-2: var(--crimson-2); --color-crimson-3: var(--crimson-3); --color-crimson-4: var(--crimson-4); --color-crimson-5: var(--crimson-5); --color-crimson-6: var(--crimson-6); --color-crimson-7: var(--crimson-7); --color-crimson-8: var(--crimson-8); --color-crimson-9: var(--crimson-9); --color-crimson-10: var(--crimson-10); --color-crimson-11: var(--crimson-11); --color-crimson-12: var(--crimson-12); --color-crimsonA-1: var(--crimson-a1); --color-crimsonA-2: var(--crimson-a2); --color-crimsonA-3: var(--crimson-a3); --color-crimsonA-4: var(--crimson-a4); --color-crimsonA-5: var(--crimson-a5); --color-crimsonA-6: var(--crimson-a6); --color-crimsonA-7: var(--crimson-a7); --color-crimsonA-8: var(--crimson-a8); --color-crimsonA-9: var(--crimson-a9); --color-crimsonA-10: var(--crimson-a10); --color-crimsonA-11: var(--crimson-a11); --color-crimsonA-12: var(--crimson-a12); --color-pink-1: var(--pink-1); --color-pink-2: var(--pink-2); --color-pink-3: var(--pink-3); --color-pink-4: var(--pink-4); --color-pink-5: var(--pink-5); --color-pink-6: var(--pink-6); --color-pink-7: var(--pink-7); --color-pink-8: var(--pink-8); --color-pink-9: var(--pink-9); --color-pink-10: var(--pink-10); --color-pink-11: var(--pink-11); --color-pink-12: var(--pink-12); --color-pinkA-1: var(--pink-a1); --color-pinkA-2: var(--pink-a2); --color-pinkA-3: var(--pink-a3); --color-pinkA-4: var(--pink-a4); --color-pinkA-5: var(--pink-a5); --color-pinkA-6: var(--pink-a6); --color-pinkA-7: var(--pink-a7); --color-pinkA-8: var(--pink-a8); --color-pinkA-9: var(--pink-a9); --color-pinkA-10: var(--pink-a10); --color-pinkA-11: var(--pink-a11); --color-pinkA-12: var(--pink-a12); --color-plum-1: var(--plum-1); --color-plum-2: var(--plum-2); --color-plum-3: var(--plum-3); --color-plum-4: var(--plum-4); --color-plum-5: var(--plum-5); --color-plum-6: var(--plum-6); --color-plum-7: var(--plum-7); --color-plum-8: var(--plum-8); --color-plum-9: var(--plum-9); --color-plum-10: var(--plum-10); --color-plum-11: var(--plum-11); --color-plum-12: var(--plum-12); --color-plumA-1: var(--plum-a1); --color-plumA-2: var(--plum-a2); --color-plumA-3: var(--plum-a3); --color-plumA-4: var(--plum-a4); --color-plumA-5: var(--plum-a5); --color-plumA-6: var(--plum-a6); --color-plumA-7: var(--plum-a7); --color-plumA-8: var(--plum-a8); --color-plumA-9: var(--plum-a9); --color-plumA-10: var(--plum-a10); --color-plumA-11: var(--plum-a11); --color-plumA-12: var(--plum-a12); --color-purple-1: var(--purple-1); --color-purple-2: var(--purple-2); --color-purple-3: var(--purple-3); --color-purple-4: var(--purple-4); --color-purple-5: var(--purple-5); --color-purple-6: var(--purple-6); --color-purple-7: var(--purple-7); --color-purple-8: var(--purple-8); --color-purple-9: var(--purple-9); --color-purple-10: var(--purple-10); --color-purple-11: var(--purple-11); --color-purple-12: var(--purple-12); --color-purpleA-1: var(--purple-a1); --color-purpleA-2: var(--purple-a2); --color-purpleA-3: var(--purple-a3); --color-purpleA-4: var(--purple-a4); --color-purpleA-5: var(--purple-a5); --color-purpleA-6: var(--purple-a6); --color-purpleA-7: var(--purple-a7); --color-purpleA-8: var(--purple-a8); --color-purpleA-9: var(--purple-a9); --color-purpleA-10: var(--purple-a10); --color-purpleA-11: var(--purple-a11); --color-purpleA-12: var(--purple-a12); --color-violet-1: var(--violet-1); --color-violet-2: var(--violet-2); --color-violet-3: var(--violet-3); --color-violet-4: var(--violet-4); --color-violet-5: var(--violet-5); --color-violet-6: var(--violet-6); --color-violet-7: var(--violet-7); --color-violet-8: var(--violet-8); --color-violet-9: var(--violet-9); --color-violet-10: var(--violet-10); --color-violet-11: var(--violet-11); --color-violet-12: var(--violet-12); --color-violetA-1: var(--violet-a1); --color-violetA-2: var(--violet-a2); --color-violetA-3: var(--violet-a3); --color-violetA-4: var(--violet-a4); --color-violetA-5: var(--violet-a5); --color-violetA-6: var(--violet-a6); --color-violetA-7: var(--violet-a7); --color-violetA-8: var(--violet-a8); --color-violetA-9: var(--violet-a9); --color-violetA-10: var(--violet-a10); --color-violetA-11: var(--violet-a11); --color-violetA-12: var(--violet-a12); --color-iris-1: var(--iris-1); --color-iris-2: var(--iris-2); --color-iris-3: var(--iris-3); --color-iris-4: var(--iris-4); --color-iris-5: var(--iris-5); --color-iris-6: var(--iris-6); --color-iris-7: var(--iris-7); --color-iris-8: var(--iris-8); --color-iris-9: var(--iris-9); --color-iris-10: var(--iris-10); --color-iris-11: var(--iris-11); --color-iris-12: var(--iris-12); --color-irisA-1: var(--iris-a1); --color-irisA-2: var(--iris-a2); --color-irisA-3: var(--iris-a3); --color-irisA-4: var(--iris-a4); --color-irisA-5: var(--iris-a5); --color-irisA-6: var(--iris-a6); --color-irisA-7: var(--iris-a7); --color-irisA-8: var(--iris-a8); --color-irisA-9: var(--iris-a9); --color-irisA-10: var(--iris-a10); --color-irisA-11: var(--iris-a11); --color-irisA-12: var(--iris-a12); --color-indigo-1: var(--indigo-1); --color-indigo-2: var(--indigo-2); --color-indigo-3: var(--indigo-3); --color-indigo-4: var(--indigo-4); --color-indigo-5: var(--indigo-5); --color-indigo-6: var(--indigo-6); --color-indigo-7: var(--indigo-7); --color-indigo-8: var(--indigo-8); --color-indigo-9: var(--indigo-9); --color-indigo-10: var(--indigo-10); --color-indigo-11: var(--indigo-11); --color-indigo-12: var(--indigo-12); --color-indigoA-1: var(--indigo-a1); --color-indigoA-2: var(--indigo-a2); --color-indigoA-3: var(--indigo-a3); --color-indigoA-4: var(--indigo-a4); --color-indigoA-5: var(--indigo-a5); --color-indigoA-6: var(--indigo-a6); --color-indigoA-7: var(--indigo-a7); --color-indigoA-8: var(--indigo-a8); --color-indigoA-9: var(--indigo-a9); --color-indigoA-10: var(--indigo-a10); --color-indigoA-11: var(--indigo-a11); --color-indigoA-12: var(--indigo-a12); --color-blue-1: var(--blue-1); --color-blue-2: var(--blue-2); --color-blue-3: var(--blue-3); --color-blue-4: var(--blue-4); --color-blue-5: var(--blue-5); --color-blue-6: var(--blue-6); --color-blue-7: var(--blue-7); --color-blue-8: var(--blue-8); --color-blue-9: var(--blue-9); --color-blue-10: var(--blue-10); --color-blue-11: var(--blue-11); --color-blue-12: var(--blue-12); --color-blueA-1: var(--blue-a1); --color-blueA-2: var(--blue-a2); --color-blueA-3: var(--blue-a3); --color-blueA-4: var(--blue-a4); --color-blueA-5: var(--blue-a5); --color-blueA-6: var(--blue-a6); --color-blueA-7: var(--blue-a7); --color-blueA-8: var(--blue-a8); --color-blueA-9: var(--blue-a9); --color-blueA-10: var(--blue-a10); --color-blueA-11: var(--blue-a11); --color-blueA-12: var(--blue-a12); --color-cyan-1: var(--cyan-1); --color-cyan-2: var(--cyan-2); --color-cyan-3: var(--cyan-3); --color-cyan-4: var(--cyan-4); --color-cyan-5: var(--cyan-5); --color-cyan-6: var(--cyan-6); --color-cyan-7: var(--cyan-7); --color-cyan-8: var(--cyan-8); --color-cyan-9: var(--cyan-9); --color-cyan-10: var(--cyan-10); --color-cyan-11: var(--cyan-11); --color-cyan-12: var(--cyan-12); --color-cyanA-1: var(--cyan-a1); --color-cyanA-2: var(--cyan-a2); --color-cyanA-3: var(--cyan-a3); --color-cyanA-4: var(--cyan-a4); --color-cyanA-5: var(--cyan-a5); --color-cyanA-6: var(--cyan-a6); --color-cyanA-7: var(--cyan-a7); --color-cyanA-8: var(--cyan-a8); --color-cyanA-9: var(--cyan-a9); --color-cyanA-10: var(--cyan-a10); --color-cyanA-11: var(--cyan-a11); --color-cyanA-12: var(--cyan-a12); --color-teal-1: var(--teal-1); --color-teal-2: var(--teal-2); --color-teal-3: var(--teal-3); --color-teal-4: var(--teal-4); --color-teal-5: var(--teal-5); --color-teal-6: var(--teal-6); --color-teal-7: var(--teal-7); --color-teal-8: var(--teal-8); --color-teal-9: var(--teal-9); --color-teal-10: var(--teal-10); --color-teal-11: var(--teal-11); --color-teal-12: var(--teal-12); --color-tealA-1: var(--teal-a1); --color-tealA-2: var(--teal-a2); --color-tealA-3: var(--teal-a3); --color-tealA-4: var(--teal-a4); --color-tealA-5: var(--teal-a5); --color-tealA-6: var(--teal-a6); --color-tealA-7: var(--teal-a7); --color-tealA-8: var(--teal-a8); --color-tealA-9: var(--teal-a9); --color-tealA-10: var(--teal-a10); --color-tealA-11: var(--teal-a11); --color-tealA-12: var(--teal-a12); --color-jade-1: var(--jade-1); --color-jade-2: var(--jade-2); --color-jade-3: var(--jade-3); --color-jade-4: var(--jade-4); --color-jade-5: var(--jade-5); --color-jade-6: var(--jade-6); --color-jade-7: var(--jade-7); --color-jade-8: var(--jade-8); --color-jade-9: var(--jade-9); --color-jade-10: var(--jade-10); --color-jade-11: var(--jade-11); --color-jade-12: var(--jade-12); --color-jadeA-1: var(--jade-a1); --color-jadeA-2: var(--jade-a2); --color-jadeA-3: var(--jade-a3); --color-jadeA-4: var(--jade-a4); --color-jadeA-5: var(--jade-a5); --color-jadeA-6: var(--jade-a6); --color-jadeA-7: var(--jade-a7); --color-jadeA-8: var(--jade-a8); --color-jadeA-9: var(--jade-a9); --color-jadeA-10: var(--jade-a10); --color-jadeA-11: var(--jade-a11); --color-jadeA-12: var(--jade-a12); --color-green-1: var(--green-1); --color-green-2: var(--green-2); --color-green-3: var(--green-3); --color-green-4: var(--green-4); --color-green-5: var(--green-5); --color-green-6: var(--green-6); --color-green-7: var(--green-7); --color-green-8: var(--green-8); --color-green-9: var(--green-9); --color-green-10: var(--green-10); --color-green-11: var(--green-11); --color-green-12: var(--green-12); --color-greenA-1: var(--green-a1); --color-greenA-2: var(--green-a2); --color-greenA-3: var(--green-a3); --color-greenA-4: var(--green-a4); --color-greenA-5: var(--green-a5); --color-greenA-6: var(--green-a6); --color-greenA-7: var(--green-a7); --color-greenA-8: var(--green-a8); --color-greenA-9: var(--green-a9); --color-greenA-10: var(--green-a10); --color-greenA-11: var(--green-a11); --color-greenA-12: var(--green-a12); --color-grass-1: var(--grass-1); --color-grass-2: var(--grass-2); --color-grass-3: var(--grass-3); --color-grass-4: var(--grass-4); --color-grass-5: var(--grass-5); --color-grass-6: var(--grass-6); --color-grass-7: var(--grass-7); --color-grass-8: var(--grass-8); --color-grass-9: var(--grass-9); --color-grass-10: var(--grass-10); --color-grass-11: var(--grass-11); --color-grass-12: var(--grass-12); --color-grassA-1: var(--grass-a1); --color-grassA-2: var(--grass-a2); --color-grassA-3: var(--grass-a3); --color-grassA-4: var(--grass-a4); --color-grassA-5: var(--grass-a5); --color-grassA-6: var(--grass-a6); --color-grassA-7: var(--grass-a7); --color-grassA-8: var(--grass-a8); --color-grassA-9: var(--grass-a9); --color-grassA-10: var(--grass-a10); --color-grassA-11: var(--grass-a11); --color-grassA-12: var(--grass-a12); --color-brown-1: var(--brown-1); --color-brown-2: var(--brown-2); --color-brown-3: var(--brown-3); --color-brown-4: var(--brown-4); --color-brown-5: var(--brown-5); --color-brown-6: var(--brown-6); --color-brown-7: var(--brown-7); --color-brown-8: var(--brown-8); --color-brown-9: var(--brown-9); --color-brown-10: var(--brown-10); --color-brown-11: var(--brown-11); --color-brown-12: var(--brown-12); --color-brownA-1: var(--brown-a1); --color-brownA-2: var(--brown-a2); --color-brownA-3: var(--brown-a3); --color-brownA-4: var(--brown-a4); --color-brownA-5: var(--brown-a5); --color-brownA-6: var(--brown-a6); --color-brownA-7: var(--brown-a7); --color-brownA-8: var(--brown-a8); --color-brownA-9: var(--brown-a9); --color-brownA-10: var(--brown-a10); --color-brownA-11: var(--brown-a11); --color-brownA-12: var(--brown-a12); --color-orange-1: var(--orange-1); --color-orange-2: var(--orange-2); --color-orange-3: var(--orange-3); --color-orange-4: var(--orange-4); --color-orange-5: var(--orange-5); --color-orange-6: var(--orange-6); --color-orange-7: var(--orange-7); --color-orange-8: var(--orange-8); --color-orange-9: var(--orange-9); --color-orange-10: var(--orange-10); --color-orange-11: var(--orange-11); --color-orange-12: var(--orange-12); --color-orangeA-1: var(--orange-a1); --color-orangeA-2: var(--orange-a2); --color-orangeA-3: var(--orange-a3); --color-orangeA-4: var(--orange-a4); --color-orangeA-5: var(--orange-a5); --color-orangeA-6: var(--orange-a6); --color-orangeA-7: var(--orange-a7); --color-orangeA-8: var(--orange-a8); --color-orangeA-9: var(--orange-a9); --color-orangeA-10: var(--orange-a10); --color-orangeA-11: var(--orange-a11); --color-orangeA-12: var(--orange-a12); --color-sky-1: var(--sky-1); --color-sky-2: var(--sky-2); --color-sky-3: var(--sky-3); --color-sky-4: var(--sky-4); --color-sky-5: var(--sky-5); --color-sky-6: var(--sky-6); --color-sky-7: var(--sky-7); --color-sky-8: var(--sky-8); --color-sky-9: var(--sky-9); --color-sky-10: var(--sky-10); --color-sky-11: var(--sky-11); --color-sky-12: var(--sky-12); --color-skyA-1: var(--sky-a1); --color-skyA-2: var(--sky-a2); --color-skyA-3: var(--sky-a3); --color-skyA-4: var(--sky-a4); --color-skyA-5: var(--sky-a5); --color-skyA-6: var(--sky-a6); --color-skyA-7: var(--sky-a7); --color-skyA-8: var(--sky-a8); --color-skyA-9: var(--sky-a9); --color-skyA-10: var(--sky-a10); --color-skyA-11: var(--sky-a11); --color-skyA-12: var(--sky-a12); --color-mint-1: var(--mint-1); --color-mint-2: var(--mint-2); --color-mint-3: var(--mint-3); --color-mint-4: var(--mint-4); --color-mint-5: var(--mint-5); --color-mint-6: var(--mint-6); --color-mint-7: var(--mint-7); --color-mint-8: var(--mint-8); --color-mint-9: var(--mint-9); --color-mint-10: var(--mint-10); --color-mint-11: var(--mint-11); --color-mint-12: var(--mint-12); --color-mintA-1: var(--mint-a1); --color-mintA-2: var(--mint-a2); --color-mintA-3: var(--mint-a3); --color-mintA-4: var(--mint-a4); --color-mintA-5: var(--mint-a5); --color-mintA-6: var(--mint-a6); --color-mintA-7: var(--mint-a7); --color-mintA-8: var(--mint-a8); --color-mintA-9: var(--mint-a9); --color-mintA-10: var(--mint-a10); --color-mintA-11: var(--mint-a11); --color-mintA-12: var(--mint-a12); --color-lime-1: var(--lime-1); --color-lime-2: var(--lime-2); --color-lime-3: var(--lime-3); --color-lime-4: var(--lime-4); --color-lime-5: var(--lime-5); --color-lime-6: var(--lime-6); --color-lime-7: var(--lime-7); --color-lime-8: var(--lime-8); --color-lime-9: var(--lime-9); --color-lime-10: var(--lime-10); --color-lime-11: var(--lime-11); --color-lime-12: var(--lime-12); --color-limeA-1: var(--lime-a1); --color-limeA-2: var(--lime-a2); --color-limeA-3: var(--lime-a3); --color-limeA-4: var(--lime-a4); --color-limeA-5: var(--lime-a5); --color-limeA-6: var(--lime-a6); --color-limeA-7: var(--lime-a7); --color-limeA-8: var(--lime-a8); --color-limeA-9: var(--lime-a9); --color-limeA-10: var(--lime-a10); --color-limeA-11: var(--lime-a11); --color-limeA-12: var(--lime-a12); --color-yellow-1: var(--yellow-1); --color-yellow-2: var(--yellow-2); --color-yellow-3: var(--yellow-3); --color-yellow-4: var(--yellow-4); --color-yellow-5: var(--yellow-5); --color-yellow-6: var(--yellow-6); --color-yellow-7: var(--yellow-7); --color-yellow-8: var(--yellow-8); --color-yellow-9: var(--yellow-9); --color-yellow-10: var(--yellow-10); --color-yellow-11: var(--yellow-11); --color-yellow-12: var(--yellow-12); --color-yellowA-1: var(--yellow-a1); --color-yellowA-2: var(--yellow-a2); --color-yellowA-3: var(--yellow-a3); --color-yellowA-4: var(--yellow-a4); --color-yellowA-5: var(--yellow-a5); --color-yellowA-6: var(--yellow-a6); --color-yellowA-7: var(--yellow-a7); --color-yellowA-8: var(--yellow-a8); --color-yellowA-9: var(--yellow-a9); --color-yellowA-10: var(--yellow-a10); --color-yellowA-11: var(--yellow-a11); --color-yellowA-12: var(--yellow-a12); --color-amber-1: var(--amber-1); --color-amber-2: var(--amber-2); --color-amber-3: var(--amber-3); --color-amber-4: var(--amber-4); --color-amber-5: var(--amber-5); --color-amber-6: var(--amber-6); --color-amber-7: var(--amber-7); --color-amber-8: var(--amber-8); --color-amber-9: var(--amber-9); --color-amber-10: var(--amber-10); --color-amber-11: var(--amber-11); --color-amber-12: var(--amber-12); --color-amberA-1: var(--amber-a1); --color-amberA-2: var(--amber-a2); --color-amberA-3: var(--amber-a3); --color-amberA-4: var(--amber-a4); --color-amberA-5: var(--amber-a5); --color-amberA-6: var(--amber-a6); --color-amberA-7: var(--amber-a7); --color-amberA-8: var(--amber-a8); --color-amberA-9: var(--amber-a9); --color-amberA-10: var(--amber-a10); --color-amberA-11: var(--amber-a11); --color-amberA-12: var(--amber-a12); --color-whiteA-1: var(--white-a1); --color-whiteA-2: var(--white-a2); --color-whiteA-3: var(--white-a3); --color-whiteA-4: var(--white-a4); --color-whiteA-5: var(--white-a5); --color-whiteA-6: var(--white-a6); --color-whiteA-7: var(--white-a7); --color-whiteA-8: var(--white-a8); --color-whiteA-9: var(--white-a9); --color-whiteA-10: var(--white-a10); --color-whiteA-11: var(--white-a11); --color-whiteA-12: var(--white-a12); --color-blackA-1: var(--black-a1); --color-blackA-2: var(--black-a2); --color-blackA-3: var(--black-a3); --color-blackA-4: var(--black-a4); --color-blackA-5: var(--black-a5); --color-blackA-6: var(--black-a6); --color-blackA-7: var(--black-a7); --color-blackA-8: var(--black-a8); --color-blackA-9: var(--black-a9); --color-blackA-10: var(--black-a10); --color-blackA-11: var(--black-a11); --color-blackA-12: var(--black-a12); } ```