Color & Backgrounds
color
Setting foreground color and color alpha.
Overview
| Class | Declarations |
|---|---|
Aafg:transparent | color: transparent;
|
Aafg-current | color: currentColor;
|
Aafg-black | color: oklch(0% 0 none);
|
Aafg-white | color: oklch(100% 0 none);
|
Aafg-stone | color: var(--color-stone);
|
Aafg-gray | color: var(--color-gray);
|
Aafg-neutral | color: var(--color-neutral);
|
Aafg-slate | color: var(--color-slate);
|
Aafg-brown | color: var(--color-brown);
|
Aafg-orange | color: var(--color-orange);
|
Aafg-amber | color: var(--color-amber);
|
Aafg-yellow | color: var(--color-yellow);
|
Aafg-lime | color: var(--color-lime);
|
Aafg-green | color: var(--color-green);
|
Aafg-beryl | color: var(--color-beryl);
|
Aafg-teal | color: var(--color-teal);
|
Aafg-cyan | color: var(--color-cyan);
|
Aafg-sky | color: var(--color-sky);
|
Aafg-blue | color: var(--color-blue);
|
Aafg-indigo | color: var(--color-indigo);
|
Aafg-violet | color: var(--color-violet);
|
Aafg-purple | color: var(--color-purple);
|
Aafg-fuchsia | color: var(--color-fuchsia);
|
Aafg-pink | color: var(--color-pink);
|
Aafg-crimson | color: var(--color-crimson);
|
Aafg-red | color: var(--color-red);
|
Aafg-stone-0 | color: var(--color-stone-0);
|
Aafg-stone-5 | color: var(--color-stone-5);
|
Aafg-stone-10 | color: var(--color-stone-10);
|
Aafg-stone-20 | color: var(--color-stone-20);
|
Aafg-stone-30 | color: var(--color-stone-30);
|
Aafg-stone-40 | color: var(--color-stone-40);
|
Aafg-stone-50 | color: var(--color-stone-50);
|
Aafg-stone-60 | color: var(--color-stone-60);
|
Aafg-stone-70 | color: var(--color-stone-70);
|
Aafg-stone-80 | color: var(--color-stone-80);
|
Aafg-stone-90 | color: var(--color-stone-90);
|
Aafg-stone-95 | color: var(--color-stone-95);
|
Aafg-stone-100 | color: var(--color-stone-100);
|
Aafg-gray-0 | color: var(--color-gray-0);
|
Aafg-gray-5 | color: var(--color-gray-5);
|
Aafg-gray-10 | color: var(--color-gray-10);
|
Aafg-gray-20 | color: var(--color-gray-20);
|
Aafg-gray-30 | color: var(--color-gray-30);
|
Aafg-gray-40 | color: var(--color-gray-40);
|
Aafg-gray-50 | color: var(--color-gray-50);
|
Aafg-gray-60 | color: var(--color-gray-60);
|
Aafg-gray-70 | color: var(--color-gray-70);
|
Aafg-gray-80 | color: var(--color-gray-80);
|
Aafg-gray-90 | color: var(--color-gray-90);
|
Aafg-gray-95 | color: var(--color-gray-95);
|
Aafg-gray-100 | color: var(--color-gray-100);
|
Aafg-neutral-0 | color: var(--color-neutral-0);
|
Aafg-neutral-5 | color: var(--color-neutral-5);
|
Aafg-neutral-10 | color: var(--color-neutral-10);
|
Aafg-neutral-20 | color: var(--color-neutral-20);
|
Aafg-neutral-30 | color: var(--color-neutral-30);
|
Aafg-neutral-40 | color: var(--color-neutral-40);
|
Aafg-neutral-50 | color: var(--color-neutral-50);
|
Aafg-neutral-60 | color: var(--color-neutral-60);
|
Aafg-neutral-70 | color: var(--color-neutral-70);
|
Aafg-neutral-80 | color: var(--color-neutral-80);
|
Aafg-neutral-90 | color: var(--color-neutral-90);
|
Aafg-neutral-95 | color: var(--color-neutral-95);
|
Aafg-neutral-100 | color: var(--color-neutral-100);
|
Aafg-slate-0 | color: var(--color-slate-0);
|
Aafg-slate-5 | color: var(--color-slate-5);
|
Aafg-slate-10 | color: var(--color-slate-10);
|
Aafg-slate-20 | color: var(--color-slate-20);
|
Aafg-slate-30 | color: var(--color-slate-30);
|
Aafg-slate-40 | color: var(--color-slate-40);
|
Aafg-slate-50 | color: var(--color-slate-50);
|
Aafg-slate-60 | color: var(--color-slate-60);
|
Aafg-slate-70 | color: var(--color-slate-70);
|
Aafg-slate-80 | color: var(--color-slate-80);
|
Aafg-slate-90 | color: var(--color-slate-90);
|
Aafg-slate-95 | color: var(--color-slate-95);
|
Aafg-slate-100 | color: var(--color-slate-100);
|
Aafg-brown-0 | color: var(--color-brown-0);
|
Aafg-brown-5 | color: var(--color-brown-5);
|
Aafg-brown-10 | color: var(--color-brown-10);
|
Aafg-brown-20 | color: var(--color-brown-20);
|
Aafg-brown-30 | color: var(--color-brown-30);
|
Aafg-brown-40 | color: var(--color-brown-40);
|
Aafg-brown-50 | color: var(--color-brown-50);
|
Aafg-brown-60 | color: var(--color-brown-60);
|
Aafg-brown-70 | color: var(--color-brown-70);
|
Aafg-brown-80 | color: var(--color-brown-80);
|
Aafg-brown-90 | color: var(--color-brown-90);
|
Aafg-brown-95 | color: var(--color-brown-95);
|
Aafg-brown-100 | color: var(--color-brown-100);
|
Aafg-orange-0 | color: var(--color-orange-0);
|
Aafg-orange-5 | color: var(--color-orange-5);
|
Aafg-orange-10 | color: var(--color-orange-10);
|
Aafg-orange-20 | color: var(--color-orange-20);
|
Aafg-orange-30 | color: var(--color-orange-30);
|
Aafg-orange-40 | color: var(--color-orange-40);
|
Aafg-orange-50 | color: var(--color-orange-50);
|
Aafg-orange-60 | color: var(--color-orange-60);
|
Aafg-orange-70 | color: var(--color-orange-70);
|
Aafg-orange-80 | color: var(--color-orange-80);
|
Aafg-orange-90 | color: var(--color-orange-90);
|
Aafg-orange-95 | color: var(--color-orange-95);
|
Aafg-orange-100 | color: var(--color-orange-100);
|
Aafg-amber-0 | color: var(--color-amber-0);
|
Aafg-amber-5 | color: var(--color-amber-5);
|
Aafg-amber-10 | color: var(--color-amber-10);
|
Aafg-amber-20 | color: var(--color-amber-20);
|
Aafg-amber-30 | color: var(--color-amber-30);
|
Aafg-amber-40 | color: var(--color-amber-40);
|
Aafg-amber-50 | color: var(--color-amber-50);
|
Aafg-amber-60 | color: var(--color-amber-60);
|
Aafg-amber-70 | color: var(--color-amber-70);
|
Aafg-amber-80 | color: var(--color-amber-80);
|
Aafg-amber-90 | color: var(--color-amber-90);
|
Aafg-amber-95 | color: var(--color-amber-95);
|
Aafg-amber-100 | color: var(--color-amber-100);
|
Aafg-yellow-0 | color: var(--color-yellow-0);
|
Aafg-yellow-5 | color: var(--color-yellow-5);
|
Aafg-yellow-10 | color: var(--color-yellow-10);
|
Aafg-yellow-20 | color: var(--color-yellow-20);
|
Aafg-yellow-30 | color: var(--color-yellow-30);
|
Aafg-yellow-40 | color: var(--color-yellow-40);
|
Aafg-yellow-50 | color: var(--color-yellow-50);
|
Aafg-yellow-60 | color: var(--color-yellow-60);
|
Aafg-yellow-70 | color: var(--color-yellow-70);
|
Aafg-yellow-80 | color: var(--color-yellow-80);
|
Aafg-yellow-90 | color: var(--color-yellow-90);
|
Aafg-yellow-95 | color: var(--color-yellow-95);
|
Aafg-yellow-100 | color: var(--color-yellow-100);
|
Aafg-lime-0 | color: var(--color-lime-0);
|
Aafg-lime-5 | color: var(--color-lime-5);
|
Aafg-lime-10 | color: var(--color-lime-10);
|
Aafg-lime-20 | color: var(--color-lime-20);
|
Aafg-lime-30 | color: var(--color-lime-30);
|
Aafg-lime-40 | color: var(--color-lime-40);
|
Aafg-lime-50 | color: var(--color-lime-50);
|
Aafg-lime-60 | color: var(--color-lime-60);
|
Aafg-lime-70 | color: var(--color-lime-70);
|
Aafg-lime-80 | color: var(--color-lime-80);
|
Aafg-lime-90 | color: var(--color-lime-90);
|
Aafg-lime-95 | color: var(--color-lime-95);
|
Aafg-lime-100 | color: var(--color-lime-100);
|
Aafg-green-0 | color: var(--color-green-0);
|
Aafg-green-5 | color: var(--color-green-5);
|
Aafg-green-10 | color: var(--color-green-10);
|
Aafg-green-20 | color: var(--color-green-20);
|
Aafg-green-30 | color: var(--color-green-30);
|
Aafg-green-40 | color: var(--color-green-40);
|
Aafg-green-50 | color: var(--color-green-50);
|
Aafg-green-60 | color: var(--color-green-60);
|
Aafg-green-70 | color: var(--color-green-70);
|
Aafg-green-80 | color: var(--color-green-80);
|
Aafg-green-90 | color: var(--color-green-90);
|
Aafg-green-95 | color: var(--color-green-95);
|
Aafg-green-100 | color: var(--color-green-100);
|
Aafg-beryl-0 | color: var(--color-beryl-0);
|
Aafg-beryl-5 | color: var(--color-beryl-5);
|
Aafg-beryl-10 | color: var(--color-beryl-10);
|
Aafg-beryl-20 | color: var(--color-beryl-20);
|
Aafg-beryl-30 | color: var(--color-beryl-30);
|
Aafg-beryl-40 | color: var(--color-beryl-40);
|
Aafg-beryl-50 | color: var(--color-beryl-50);
|
Aafg-beryl-60 | color: var(--color-beryl-60);
|
Aafg-beryl-70 | color: var(--color-beryl-70);
|
Aafg-beryl-80 | color: var(--color-beryl-80);
|
Aafg-beryl-90 | color: var(--color-beryl-90);
|
Aafg-beryl-95 | color: var(--color-beryl-95);
|
Aafg-beryl-100 | color: var(--color-beryl-100);
|
Aafg-teal-0 | color: var(--color-teal-0);
|
Aafg-teal-5 | color: var(--color-teal-5);
|
Aafg-teal-10 | color: var(--color-teal-10);
|
Aafg-teal-20 | color: var(--color-teal-20);
|
Aafg-teal-30 | color: var(--color-teal-30);
|
Aafg-teal-40 | color: var(--color-teal-40);
|
Aafg-teal-50 | color: var(--color-teal-50);
|
Aafg-teal-60 | color: var(--color-teal-60);
|
Aafg-teal-70 | color: var(--color-teal-70);
|
Aafg-teal-80 | color: var(--color-teal-80);
|
Aafg-teal-90 | color: var(--color-teal-90);
|
Aafg-teal-95 | color: var(--color-teal-95);
|
Aafg-teal-100 | color: var(--color-teal-100);
|
Aafg-cyan-0 | color: var(--color-cyan-0);
|
Aafg-cyan-5 | color: var(--color-cyan-5);
|
Aafg-cyan-10 | color: var(--color-cyan-10);
|
Aafg-cyan-20 | color: var(--color-cyan-20);
|
Aafg-cyan-30 | color: var(--color-cyan-30);
|
Aafg-cyan-40 | color: var(--color-cyan-40);
|
Aafg-cyan-50 | color: var(--color-cyan-50);
|
Aafg-cyan-60 | color: var(--color-cyan-60);
|
Aafg-cyan-70 | color: var(--color-cyan-70);
|
Aafg-cyan-80 | color: var(--color-cyan-80);
|
Aafg-cyan-90 | color: var(--color-cyan-90);
|
Aafg-cyan-95 | color: var(--color-cyan-95);
|
Aafg-cyan-100 | color: var(--color-cyan-100);
|
Aafg-sky-0 | color: var(--color-sky-0);
|
Aafg-sky-5 | color: var(--color-sky-5);
|
Aafg-sky-10 | color: var(--color-sky-10);
|
Aafg-sky-20 | color: var(--color-sky-20);
|
Aafg-sky-30 | color: var(--color-sky-30);
|
Aafg-sky-40 | color: var(--color-sky-40);
|
Aafg-sky-50 | color: var(--color-sky-50);
|
Aafg-sky-60 | color: var(--color-sky-60);
|
Aafg-sky-70 | color: var(--color-sky-70);
|
Aafg-sky-80 | color: var(--color-sky-80);
|
Aafg-sky-90 | color: var(--color-sky-90);
|
Aafg-sky-95 | color: var(--color-sky-95);
|
Aafg-sky-100 | color: var(--color-sky-100);
|
Aafg-blue-0 | color: var(--color-blue-0);
|
Aafg-blue-5 | color: var(--color-blue-5);
|
Aafg-blue-10 | color: var(--color-blue-10);
|
Aafg-blue-20 | color: var(--color-blue-20);
|
Aafg-blue-30 | color: var(--color-blue-30);
|
Aafg-blue-40 | color: var(--color-blue-40);
|
Aafg-blue-50 | color: var(--color-blue-50);
|
Aafg-blue-60 | color: var(--color-blue-60);
|
Aafg-blue-70 | color: var(--color-blue-70);
|
Aafg-blue-80 | color: var(--color-blue-80);
|
Aafg-blue-90 | color: var(--color-blue-90);
|
Aafg-blue-95 | color: var(--color-blue-95);
|
Aafg-blue-100 | color: var(--color-blue-100);
|
Aafg-indigo-0 | color: var(--color-indigo-0);
|
Aafg-indigo-5 | color: var(--color-indigo-5);
|
Aafg-indigo-10 | color: var(--color-indigo-10);
|
Aafg-indigo-20 | color: var(--color-indigo-20);
|
Aafg-indigo-30 | color: var(--color-indigo-30);
|
Aafg-indigo-40 | color: var(--color-indigo-40);
|
Aafg-indigo-50 | color: var(--color-indigo-50);
|
Aafg-indigo-60 | color: var(--color-indigo-60);
|
Aafg-indigo-70 | color: var(--color-indigo-70);
|
Aafg-indigo-80 | color: var(--color-indigo-80);
|
Aafg-indigo-90 | color: var(--color-indigo-90);
|
Aafg-indigo-95 | color: var(--color-indigo-95);
|
Aafg-indigo-100 | color: var(--color-indigo-100);
|
Aafg-violet-0 | color: var(--color-violet-0);
|
Aafg-violet-5 | color: var(--color-violet-5);
|
Aafg-violet-10 | color: var(--color-violet-10);
|
Aafg-violet-20 | color: var(--color-violet-20);
|
Aafg-violet-30 | color: var(--color-violet-30);
|
Aafg-violet-40 | color: var(--color-violet-40);
|
Aafg-violet-50 | color: var(--color-violet-50);
|
Aafg-violet-60 | color: var(--color-violet-60);
|
Aafg-violet-70 | color: var(--color-violet-70);
|
Aafg-violet-80 | color: var(--color-violet-80);
|
Aafg-violet-90 | color: var(--color-violet-90);
|
Aafg-violet-95 | color: var(--color-violet-95);
|
Aafg-violet-100 | color: var(--color-violet-100);
|
Aafg-purple-0 | color: var(--color-purple-0);
|
Aafg-purple-5 | color: var(--color-purple-5);
|
Aafg-purple-10 | color: var(--color-purple-10);
|
Aafg-purple-20 | color: var(--color-purple-20);
|
Aafg-purple-30 | color: var(--color-purple-30);
|
Aafg-purple-40 | color: var(--color-purple-40);
|
Aafg-purple-50 | color: var(--color-purple-50);
|
Aafg-purple-60 | color: var(--color-purple-60);
|
Aafg-purple-70 | color: var(--color-purple-70);
|
Aafg-purple-80 | color: var(--color-purple-80);
|
Aafg-purple-90 | color: var(--color-purple-90);
|
Aafg-purple-95 | color: var(--color-purple-95);
|
Aafg-purple-100 | color: var(--color-purple-100);
|
Aafg-fuchsia-0 | color: var(--color-fuchsia-0);
|
Aafg-fuchsia-5 | color: var(--color-fuchsia-5);
|
Aafg-fuchsia-10 | color: var(--color-fuchsia-10);
|
Aafg-fuchsia-20 | color: var(--color-fuchsia-20);
|
Aafg-fuchsia-30 | color: var(--color-fuchsia-30);
|
Aafg-fuchsia-40 | color: var(--color-fuchsia-40);
|
Aafg-fuchsia-50 | color: var(--color-fuchsia-50);
|
Aafg-fuchsia-60 | color: var(--color-fuchsia-60);
|
Aafg-fuchsia-70 | color: var(--color-fuchsia-70);
|
Aafg-fuchsia-80 | color: var(--color-fuchsia-80);
|
Aafg-fuchsia-90 | color: var(--color-fuchsia-90);
|
Aafg-fuchsia-95 | color: var(--color-fuchsia-95);
|
Aafg-fuchsia-100 | color: var(--color-fuchsia-100);
|
Aafg-pink-0 | color: var(--color-pink-0);
|
Aafg-pink-5 | color: var(--color-pink-5);
|
Aafg-pink-10 | color: var(--color-pink-10);
|
Aafg-pink-20 | color: var(--color-pink-20);
|
Aafg-pink-30 | color: var(--color-pink-30);
|
Aafg-pink-40 | color: var(--color-pink-40);
|
Aafg-pink-50 | color: var(--color-pink-50);
|
Aafg-pink-60 | color: var(--color-pink-60);
|
Aafg-pink-70 | color: var(--color-pink-70);
|
Aafg-pink-80 | color: var(--color-pink-80);
|
Aafg-pink-90 | color: var(--color-pink-90);
|
Aafg-pink-95 | color: var(--color-pink-95);
|
Aafg-pink-100 | color: var(--color-pink-100);
|
Aafg-crimson-0 | color: var(--color-crimson-0);
|
Aafg-crimson-5 | color: var(--color-crimson-5);
|
Aafg-crimson-10 | color: var(--color-crimson-10);
|
Aafg-crimson-20 | color: var(--color-crimson-20);
|
Aafg-crimson-30 | color: var(--color-crimson-30);
|
Aafg-crimson-40 | color: var(--color-crimson-40);
|
Aafg-crimson-50 | color: var(--color-crimson-50);
|
Aafg-crimson-60 | color: var(--color-crimson-60);
|
Aafg-crimson-70 | color: var(--color-crimson-70);
|
Aafg-crimson-80 | color: var(--color-crimson-80);
|
Aafg-crimson-90 | color: var(--color-crimson-90);
|
Aafg-crimson-95 | color: var(--color-crimson-95);
|
Aafg-crimson-100 | color: var(--color-crimson-100);
|
Aafg-red-0 | color: var(--color-red-0);
|
Aafg-red-5 | color: var(--color-red-5);
|
Aafg-red-10 | color: var(--color-red-10);
|
Aafg-red-20 | color: var(--color-red-20);
|
Aafg-red-30 | color: var(--color-red-30);
|
Aafg-red-40 | color: var(--color-red-40);
|
Aafg-red-50 | color: var(--color-red-50);
|
Aafg-red-60 | color: var(--color-red-60);
|
Aafg-red-70 | color: var(--color-red-70);
|
Aafg-red-80 | color: var(--color-red-80);
|
Aafg-red-90 | color: var(--color-red-90);
|
Aafg-red-95 | color: var(--color-red-95);
|
Aafg-red-100 | color: var(--color-red-100);
|
Aafg-sand-0 | color: var(--color-sand-0);
|
Aafg-sand-5 | color: var(--color-sand-5);
|
Aafg-sand-10 | color: var(--color-sand-10);
|
Aafg-sand-20 | color: var(--color-sand-20);
|
Aafg-sand-30 | color: var(--color-sand-30);
|
Aafg-sand-40 | color: var(--color-sand-40);
|
Aafg-sand-50 | color: var(--color-sand-50);
|
Aafg-sand-60 | color: var(--color-sand-60);
|
Aafg-sand-70 | color: var(--color-sand-70);
|
Aafg-sand-80 | color: var(--color-sand-80);
|
Aafg-sand-90 | color: var(--color-sand-90);
|
Aafg-sand-95 | color: var(--color-sand-95);
|
Aafg-sand-100 | color: var(--color-sand-100);
|
Aafg-taupe-0 | color: var(--color-taupe-0);
|
Aafg-taupe-5 | color: var(--color-taupe-5);
|
Aafg-taupe-10 | color: var(--color-taupe-10);
|
Aafg-taupe-20 | color: var(--color-taupe-20);
|
Aafg-taupe-30 | color: var(--color-taupe-30);
|
Aafg-taupe-40 | color: var(--color-taupe-40);
|
Aafg-taupe-50 | color: var(--color-taupe-50);
|
Aafg-taupe-60 | color: var(--color-taupe-60);
|
Aafg-taupe-70 | color: var(--color-taupe-70);
|
Aafg-taupe-80 | color: var(--color-taupe-80);
|
Aafg-taupe-90 | color: var(--color-taupe-90);
|
Aafg-taupe-95 | color: var(--color-taupe-95);
|
Aafg-taupe-100 | color: var(--color-taupe-100);
|
Aafg-olive-0 | color: var(--color-olive-0);
|
Aafg-olive-5 | color: var(--color-olive-5);
|
Aafg-olive-10 | color: var(--color-olive-10);
|
Aafg-olive-20 | color: var(--color-olive-20);
|
Aafg-olive-30 | color: var(--color-olive-30);
|
Aafg-olive-40 | color: var(--color-olive-40);
|
Aafg-olive-50 | color: var(--color-olive-50);
|
Aafg-olive-60 | color: var(--color-olive-60);
|
Aafg-olive-70 | color: var(--color-olive-70);
|
Aafg-olive-80 | color: var(--color-olive-80);
|
Aafg-olive-90 | color: var(--color-olive-90);
|
Aafg-olive-95 | color: var(--color-olive-95);
|
Aafg-olive-100 | color: var(--color-olive-100);
|
Aafg-sage-0 | color: var(--color-sage-0);
|
Aafg-sage-5 | color: var(--color-sage-5);
|
Aafg-sage-10 | color: var(--color-sage-10);
|
Aafg-sage-20 | color: var(--color-sage-20);
|
Aafg-sage-30 | color: var(--color-sage-30);
|
Aafg-sage-40 | color: var(--color-sage-40);
|
Aafg-sage-50 | color: var(--color-sage-50);
|
Aafg-sage-60 | color: var(--color-sage-60);
|
Aafg-sage-70 | color: var(--color-sage-70);
|
Aafg-sage-80 | color: var(--color-sage-80);
|
Aafg-sage-90 | color: var(--color-sage-90);
|
Aafg-sage-95 | color: var(--color-sage-95);
|
Aafg-sage-100 | color: var(--color-sage-100);
|
Aafg-moss-0 | color: var(--color-moss-0);
|
Aafg-moss-5 | color: var(--color-moss-5);
|
Aafg-moss-10 | color: var(--color-moss-10);
|
Aafg-moss-20 | color: var(--color-moss-20);
|
Aafg-moss-30 | color: var(--color-moss-30);
|
Aafg-moss-40 | color: var(--color-moss-40);
|
Aafg-moss-50 | color: var(--color-moss-50);
|
Aafg-moss-60 | color: var(--color-moss-60);
|
Aafg-moss-70 | color: var(--color-moss-70);
|
Aafg-moss-80 | color: var(--color-moss-80);
|
Aafg-moss-90 | color: var(--color-moss-90);
|
Aafg-moss-95 | color: var(--color-moss-95);
|
Aafg-moss-100 | color: var(--color-moss-100);
|
Aafg-petrol-0 | color: var(--color-petrol-0);
|
Aafg-petrol-5 | color: var(--color-petrol-5);
|
Aafg-petrol-10 | color: var(--color-petrol-10);
|
Aafg-petrol-20 | color: var(--color-petrol-20);
|
Aafg-petrol-30 | color: var(--color-petrol-30);
|
Aafg-petrol-40 | color: var(--color-petrol-40);
|
Aafg-petrol-50 | color: var(--color-petrol-50);
|
Aafg-petrol-60 | color: var(--color-petrol-60);
|
Aafg-petrol-70 | color: var(--color-petrol-70);
|
Aafg-petrol-80 | color: var(--color-petrol-80);
|
Aafg-petrol-90 | color: var(--color-petrol-90);
|
Aafg-petrol-95 | color: var(--color-petrol-95);
|
Aafg-petrol-100 | color: var(--color-petrol-100);
|
Aafg-copper-0 | color: var(--color-copper-0);
|
Aafg-copper-5 | color: var(--color-copper-5);
|
Aafg-copper-10 | color: var(--color-copper-10);
|
Aafg-copper-20 | color: var(--color-copper-20);
|
Aafg-copper-30 | color: var(--color-copper-30);
|
Aafg-copper-40 | color: var(--color-copper-40);
|
Aafg-copper-50 | color: var(--color-copper-50);
|
Aafg-copper-60 | color: var(--color-copper-60);
|
Aafg-copper-70 | color: var(--color-copper-70);
|
Aafg-copper-80 | color: var(--color-copper-80);
|
Aafg-copper-90 | color: var(--color-copper-90);
|
Aafg-copper-95 | color: var(--color-copper-95);
|
Aafg-copper-100 | color: var(--color-copper-100);
|
Aafg-terracotta-0 | color: var(--color-terracotta-0);
|
Aafg-terracotta-5 | color: var(--color-terracotta-5);
|
Aafg-terracotta-10 | color: var(--color-terracotta-10);
|
Aafg-terracotta-20 | color: var(--color-terracotta-20);
|
Aafg-terracotta-30 | color: var(--color-terracotta-30);
|
Aafg-terracotta-40 | color: var(--color-terracotta-40);
|
Aafg-terracotta-50 | color: var(--color-terracotta-50);
|
Aafg-terracotta-60 | color: var(--color-terracotta-60);
|
Aafg-terracotta-70 | color: var(--color-terracotta-70);
|
Aafg-terracotta-80 | color: var(--color-terracotta-80);
|
Aafg-terracotta-90 | color: var(--color-terracotta-90);
|
Aafg-terracotta-95 | color: var(--color-terracotta-95);
|
Aafg-terracotta-100 | color: var(--color-terracotta-100);
|
Aatext-body | color: var(--color-text-body);
|
Aatext-strong | color: var(--color-text-strong);
|
Aatext-muted | color: var(--color-text-muted);
|
Aatext-subtle | color: var(--color-text-subtle);
|
Aatext-disabled | color: var(--color-text-disabled);
|
Aatext-placeholder | color: var(--color-text-placeholder);
|
Aatext-inverse | color: var(--color-text-inverse);
|
Aatext-link | color: var(--color-text-link);
|
Aatext-link-hover | color: var(--color-text-link-hover);
|
Aatext-stone | color: var(--color-text-stone);
|
Aatext-gray | color: var(--color-text-gray);
|
Aatext-neutral | color: var(--color-text-neutral);
|
Aatext-slate | color: var(--color-text-slate);
|
Aatext-brown | color: var(--color-text-brown);
|
Aatext-orange | color: var(--color-text-orange);
|
Aatext-amber | color: var(--color-text-amber);
|
Aatext-yellow | color: var(--color-text-yellow);
|
Aatext-lime | color: var(--color-text-lime);
|
Aatext-green | color: var(--color-text-green);
|
Aatext-beryl | color: var(--color-text-beryl);
|
Aatext-teal | color: var(--color-text-teal);
|
Aatext-cyan | color: var(--color-text-cyan);
|
Aatext-sky | color: var(--color-text-sky);
|
Aatext-blue | color: var(--color-text-blue);
|
Aatext-indigo | color: var(--color-text-indigo);
|
Aatext-violet | color: var(--color-text-violet);
|
Aatext-purple | color: var(--color-text-purple);
|
Aatext-fuchsia | color: var(--color-text-fuchsia);
|
Aatext-pink | color: var(--color-text-pink);
|
Aatext-crimson | color: var(--color-text-crimson);
|
Aatext-red | color: var(--color-text-red);
|
Aatext-sand | color: var(--color-text-sand);
|
Aatext-taupe | color: var(--color-text-taupe);
|
Aatext-olive | color: var(--color-text-olive);
|
Aatext-sage | color: var(--color-text-sage);
|
Aatext-moss | color: var(--color-text-moss);
|
Aatext-petrol | color: var(--color-text-petrol);
|
Aatext-copper | color: var(--color-text-copper);
|
Aatext-terracotta | color: var(--color-text-terracotta);
|
fg:<color> | color: <color>;
|
Examples
With opacity
Append /alpha to a color to make its paint translucent. Compare the same blue at full opacity and at 40%; the element itself keeps opacity:1.
With opacity
The foreground and element opacity are independent readings. The specimen keeps the actual authored theme and interaction rules.
<!-- Opaque foreground --><p id="target" class="m:0 font-2xl leading-lg text-blue">A shared design language.</p><!-- 40% foreground alpha --><p id="target" class="m:0 font-2xl leading-lg text-blue/.4">A shared design language.</p>The low-alpha sample intentionally has reduced contrast. Choose sufficient contrast against the final surface for meaningful text. A color’s alpha differs from element opacity, which composites the whole element and its descendants.
Apply conditionally
Hover or focus this button to change its foreground. Switch the preview theme to compare the resting color; print restores a solid black label.
Apply conditionally
The foreground and element opacity are independent readings. The specimen keeps the actual authored theme and interaction rules.
<!-- Pointer, keyboard and theme --><button id="target" type="button" class="font-md text-body fg-black@print text-violet@screen@dark text-blue:hover@screen text-blue:focus-visible@screen">Preview details</button>The foreground does not change the button’s background. Use selectors for real interaction and conditions for theme or media changes.
Customization
Use custom text colors
Define a semantic name in color-text, then compile the theme with the class that consumes it. This token follows the preset’s light and dark text-blue values.
Use custom text colors
The foreground and element opacity are independent readings. The specimen keeps the actual authored theme and interaction rules.
@theme { --color-text-primary: var(--color-text-blue);}<!-- Configured text namespace --><p id="target" class="m:0 font-2xl leading-lg text-primary">A shared design language.</p><!-- Explicit variable reference --><p id="target" class="m:0 font-2xl leading-lg fg:var(--color-text-primary,var(--color-text-blue))">A shared design language.</p>The current preset exposes this namespace through -webkit-text-fill-color:, caret-color:, color:, fg:, text:, text-decoration:, text-decoration-color:, text-fill-color:. These consumers are derived from public native namespaces, aliases and manifest utilities. text-primary selects the contextual text token; fg:var(--color-text-primary,var(--color-text-blue)) requests the variable explicitly and supplies a fallback if the custom token is absent. Use text fill color for the separate WebKit glyph-fill property.