Utilities
Colors
Text, background, border, ring, outline, decoration, fill, stroke and shadow colors: semantic tokens and the OKLCH palette.
2,248classes
2,699variant classes
10properties
Live example
<div class="space-y-3">
<div class="grid grid-cols-6 sm:grid-cols-11 gap-1.5">
<div class="h-10 rounded bg-sky-50"></div><div class="h-10 rounded bg-sky-100"></div><div class="h-10 rounded bg-sky-200"></div><div class="h-10 rounded bg-sky-300"></div><div class="h-10 rounded bg-sky-400"></div><div class="h-10 rounded bg-sky-500"></div><div class="h-10 rounded bg-sky-600"></div><div class="h-10 rounded bg-sky-700"></div><div class="h-10 rounded bg-sky-800"></div><div class="h-10 rounded bg-sky-900"></div><div class="h-10 rounded bg-sky-950"></div>
</div>
<div class="flex flex-wrap gap-2 text-sm font-medium">
<span class="rounded-md bg-primary text-primary-foreground px-3 py-1.5">primary</span>
<span class="rounded-md bg-accent text-accent-foreground px-3 py-1.5">accent</span>
<span class="rounded-md bg-success text-success-foreground px-3 py-1.5">success</span>
<span class="rounded-md bg-warning text-warning-foreground px-3 py-1.5">warning</span>
<span class="rounded-md bg-danger text-danger-foreground px-3 py-1.5">danger</span>
<span class="rounded-md border border-primary text-primary px-3 py-1.5">text-primary</span>
</div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example hover:text-background. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | hover:focus:focus-within:focus-visible:active:disabled: | 574 |
| Group and peer | group-hover:peer-checked: | 342 |
| Structure | first:last:odd:even: | 56 |
| Motion | not generated | 0 |
| Scheme | dark: | 593 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | forced-colors: | 116 |
Text color 518
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
text-background | color: var(--background); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-foreground | color: var(--foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-surface | color: var(--surface); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-surface-2 | color: var(--surface-2); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-surface-3 | color: var(--surface-3); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-muted | color: var(--muted); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-muted-foreground | color: var(--muted-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-border | color: var(--border); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-primary | color: var(--primary); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-primary-foreground | color: var(--primary-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-ring | color: var(--ring); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-secondary | color: var(--secondary); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-secondary-foreground | color: var(--secondary-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-accent | color: var(--accent); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-accent-foreground | color: var(--accent-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-success | color: var(--success); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-success-foreground | color: var(--success-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-warning | color: var(--warning); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-warning-foreground | color: var(--warning-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-danger | color: var(--danger); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-danger-foreground | color: var(--danger-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-info | color: var(--info); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-info-foreground | color: var(--info-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked |
text-white | color: #fff; | hover group-hover dark |
text-black | color: #000; | hover group-hover dark |
text-transparent | color: transparent; | hover group-hover dark |
text-current | color: currentColor; | |
text-inherit | color: inherit; | |
text-slate-50 | color: var(--color-slate-50); | dark |
text-slate-100 | color: var(--color-slate-100); | dark |
text-slate-200 | color: var(--color-slate-200); | dark |
text-slate-300 | color: var(--color-slate-300); | dark |
text-slate-400 | color: var(--color-slate-400); | dark |
text-slate-500 | color: var(--color-slate-500); | hover group-hover dark |
text-slate-600 | color: var(--color-slate-600); | hover group-hover dark |
text-slate-700 | color: var(--color-slate-700); | hover group-hover dark |
text-slate-800 | color: var(--color-slate-800); | dark |
text-slate-900 | color: var(--color-slate-900); | dark |
text-slate-950 | color: var(--color-slate-950); | dark |
text-gray-50 | color: var(--color-gray-50); | dark |
text-gray-100 | color: var(--color-gray-100); | dark |
text-gray-200 | color: var(--color-gray-200); | dark |
text-gray-300 | color: var(--color-gray-300); | dark |
text-gray-400 | color: var(--color-gray-400); | dark |
text-gray-500 | color: var(--color-gray-500); | hover group-hover dark |
text-gray-600 | color: var(--color-gray-600); | hover group-hover dark |
text-gray-700 | color: var(--color-gray-700); | hover group-hover dark |
text-gray-800 | color: var(--color-gray-800); | dark |
text-gray-900 | color: var(--color-gray-900); | dark |
text-gray-950 | color: var(--color-gray-950); | dark |
text-zinc-50 | color: var(--color-zinc-50); | dark |
text-zinc-100 | color: var(--color-zinc-100); | dark |
text-zinc-200 | color: var(--color-zinc-200); | dark |
text-zinc-300 | color: var(--color-zinc-300); | dark |
text-zinc-400 | color: var(--color-zinc-400); | dark |
text-zinc-500 | color: var(--color-zinc-500); | hover group-hover dark |
text-zinc-600 | color: var(--color-zinc-600); | hover group-hover dark |
text-zinc-700 | color: var(--color-zinc-700); | hover group-hover dark |
text-zinc-800 | color: var(--color-zinc-800); | dark |
text-zinc-900 | color: var(--color-zinc-900); | dark |
text-zinc-950 | color: var(--color-zinc-950); | dark |
text-neutral-50 | color: var(--color-neutral-50); | dark |
text-neutral-100 | color: var(--color-neutral-100); | dark |
text-neutral-200 | color: var(--color-neutral-200); | dark |
text-neutral-300 | color: var(--color-neutral-300); | dark |
text-neutral-400 | color: var(--color-neutral-400); | dark |
text-neutral-500 | color: var(--color-neutral-500); | hover group-hover dark |
text-neutral-600 | color: var(--color-neutral-600); | hover group-hover dark |
text-neutral-700 | color: var(--color-neutral-700); | hover group-hover dark |
text-neutral-800 | color: var(--color-neutral-800); | dark |
text-neutral-900 | color: var(--color-neutral-900); | dark |
text-neutral-950 | color: var(--color-neutral-950); | dark |
text-stone-50 | color: var(--color-stone-50); | dark |
text-stone-100 | color: var(--color-stone-100); | dark |
text-stone-200 | color: var(--color-stone-200); | dark |
text-stone-300 | color: var(--color-stone-300); | dark |
text-stone-400 | color: var(--color-stone-400); | dark |
text-stone-500 | color: var(--color-stone-500); | hover group-hover dark |
text-stone-600 | color: var(--color-stone-600); | hover group-hover dark |
text-stone-700 | color: var(--color-stone-700); | hover group-hover dark |
text-stone-800 | color: var(--color-stone-800); | dark |
text-stone-900 | color: var(--color-stone-900); | dark |
text-stone-950 | color: var(--color-stone-950); | dark |
text-red-50 | color: var(--color-red-50); | |
text-red-100 | color: var(--color-red-100); | |
text-red-200 | color: var(--color-red-200); | |
text-red-300 | color: var(--color-red-300); | dark |
text-red-400 | color: var(--color-red-400); | dark |
text-red-500 | color: var(--color-red-500); | hover group-hover dark |
text-red-600 | color: var(--color-red-600); | hover group-hover dark |
text-red-700 | color: var(--color-red-700); | hover group-hover dark |
text-red-800 | color: var(--color-red-800); | |
text-red-900 | color: var(--color-red-900); | |
text-red-950 | color: var(--color-red-950); | |
text-orange-50 | color: var(--color-orange-50); | |
text-orange-100 | color: var(--color-orange-100); | |
text-orange-200 | color: var(--color-orange-200); | |
text-orange-300 | color: var(--color-orange-300); | dark |
text-orange-400 | color: var(--color-orange-400); | dark |
text-orange-500 | color: var(--color-orange-500); | hover group-hover dark |
text-orange-600 | color: var(--color-orange-600); | hover group-hover dark |
text-orange-700 | color: var(--color-orange-700); | hover group-hover dark |
text-orange-800 | color: var(--color-orange-800); | |
text-orange-900 | color: var(--color-orange-900); | |
text-orange-950 | color: var(--color-orange-950); | |
text-amber-50 | color: var(--color-amber-50); | |
text-amber-100 | color: var(--color-amber-100); | |
text-amber-200 | color: var(--color-amber-200); | |
text-amber-300 | color: var(--color-amber-300); | dark |
text-amber-400 | color: var(--color-amber-400); | dark |
text-amber-500 | color: var(--color-amber-500); | hover group-hover dark |
text-amber-600 | color: var(--color-amber-600); | hover group-hover dark |
text-amber-700 | color: var(--color-amber-700); | hover group-hover dark |
text-amber-800 | color: var(--color-amber-800); | |
text-amber-900 | color: var(--color-amber-900); | |
text-amber-950 | color: var(--color-amber-950); | |
text-yellow-50 | color: var(--color-yellow-50); | |
text-yellow-100 | color: var(--color-yellow-100); | |
text-yellow-200 | color: var(--color-yellow-200); | |
text-yellow-300 | color: var(--color-yellow-300); | dark |
text-yellow-400 | color: var(--color-yellow-400); | dark |
text-yellow-500 | color: var(--color-yellow-500); | hover group-hover dark |
text-yellow-600 | color: var(--color-yellow-600); | hover group-hover dark |
text-yellow-700 | color: var(--color-yellow-700); | hover group-hover dark |
text-yellow-800 | color: var(--color-yellow-800); | |
text-yellow-900 | color: var(--color-yellow-900); | |
text-yellow-950 | color: var(--color-yellow-950); | |
text-lime-50 | color: var(--color-lime-50); | |
text-lime-100 | color: var(--color-lime-100); | |
text-lime-200 | color: var(--color-lime-200); | |
text-lime-300 | color: var(--color-lime-300); | dark |
text-lime-400 | color: var(--color-lime-400); | dark |
text-lime-500 | color: var(--color-lime-500); | hover group-hover dark |
text-lime-600 | color: var(--color-lime-600); | hover group-hover dark |
text-lime-700 | color: var(--color-lime-700); | hover group-hover dark |
text-lime-800 | color: var(--color-lime-800); | |
text-lime-900 | color: var(--color-lime-900); | |
text-lime-950 | color: var(--color-lime-950); | |
text-green-50 | color: var(--color-green-50); | |
text-green-100 | color: var(--color-green-100); | |
text-green-200 | color: var(--color-green-200); | |
text-green-300 | color: var(--color-green-300); | dark |
text-green-400 | color: var(--color-green-400); | dark |
text-green-500 | color: var(--color-green-500); | hover group-hover dark |
text-green-600 | color: var(--color-green-600); | hover group-hover dark |
text-green-700 | color: var(--color-green-700); | hover group-hover dark |
text-green-800 | color: var(--color-green-800); | |
text-green-900 | color: var(--color-green-900); | |
text-green-950 | color: var(--color-green-950); | |
text-emerald-50 | color: var(--color-emerald-50); | |
text-emerald-100 | color: var(--color-emerald-100); | |
text-emerald-200 | color: var(--color-emerald-200); | |
text-emerald-300 | color: var(--color-emerald-300); | dark |
text-emerald-400 | color: var(--color-emerald-400); | dark |
text-emerald-500 | color: var(--color-emerald-500); | hover group-hover dark |
text-emerald-600 | color: var(--color-emerald-600); | hover group-hover dark |
text-emerald-700 | color: var(--color-emerald-700); | hover group-hover dark |
text-emerald-800 | color: var(--color-emerald-800); | |
text-emerald-900 | color: var(--color-emerald-900); | |
text-emerald-950 | color: var(--color-emerald-950); | |
text-teal-50 | color: var(--color-teal-50); | |
text-teal-100 | color: var(--color-teal-100); | |
text-teal-200 | color: var(--color-teal-200); | |
text-teal-300 | color: var(--color-teal-300); | dark |
text-teal-400 | color: var(--color-teal-400); | dark |
text-teal-500 | color: var(--color-teal-500); | hover group-hover dark |
text-teal-600 | color: var(--color-teal-600); | hover group-hover dark |
text-teal-700 | color: var(--color-teal-700); | hover group-hover dark |
text-teal-800 | color: var(--color-teal-800); | |
text-teal-900 | color: var(--color-teal-900); | |
text-teal-950 | color: var(--color-teal-950); | |
text-cyan-50 | color: var(--color-cyan-50); | |
text-cyan-100 | color: var(--color-cyan-100); | |
text-cyan-200 | color: var(--color-cyan-200); | |
text-cyan-300 | color: var(--color-cyan-300); | dark |
text-cyan-400 | color: var(--color-cyan-400); | dark |
text-cyan-500 | color: var(--color-cyan-500); | hover group-hover dark |
text-cyan-600 | color: var(--color-cyan-600); | hover group-hover dark |
text-cyan-700 | color: var(--color-cyan-700); | hover group-hover dark |
text-cyan-800 | color: var(--color-cyan-800); | |
text-cyan-900 | color: var(--color-cyan-900); | |
text-cyan-950 | color: var(--color-cyan-950); | |
text-sky-50 | color: var(--color-sky-50); | |
text-sky-100 | color: var(--color-sky-100); | |
text-sky-200 | color: var(--color-sky-200); | |
text-sky-300 | color: var(--color-sky-300); | dark |
text-sky-400 | color: var(--color-sky-400); | dark |
text-sky-500 | color: var(--color-sky-500); | hover group-hover dark |
text-sky-600 | color: var(--color-sky-600); | hover group-hover dark |
text-sky-700 | color: var(--color-sky-700); | hover group-hover dark |
text-sky-800 | color: var(--color-sky-800); | |
text-sky-900 | color: var(--color-sky-900); | |
text-sky-950 | color: var(--color-sky-950); | |
text-blue-50 | color: var(--color-blue-50); | |
text-blue-100 | color: var(--color-blue-100); | |
text-blue-200 | color: var(--color-blue-200); | |
text-blue-300 | color: var(--color-blue-300); | dark |
text-blue-400 | color: var(--color-blue-400); | dark |
text-blue-500 | color: var(--color-blue-500); | hover group-hover dark |
text-blue-600 | color: var(--color-blue-600); | hover group-hover dark |
text-blue-700 | color: var(--color-blue-700); | hover group-hover dark |
text-blue-800 | color: var(--color-blue-800); | |
text-blue-900 | color: var(--color-blue-900); | |
text-blue-950 | color: var(--color-blue-950); | |
text-indigo-50 | color: var(--color-indigo-50); | |
text-indigo-100 | color: var(--color-indigo-100); | |
text-indigo-200 | color: var(--color-indigo-200); | |
text-indigo-300 | color: var(--color-indigo-300); | dark |
text-indigo-400 | color: var(--color-indigo-400); | dark |
text-indigo-500 | color: var(--color-indigo-500); | hover group-hover dark |
text-indigo-600 | color: var(--color-indigo-600); | hover group-hover dark |
text-indigo-700 | color: var(--color-indigo-700); | hover group-hover dark |
text-indigo-800 | color: var(--color-indigo-800); | |
text-indigo-900 | color: var(--color-indigo-900); | |
text-indigo-950 | color: var(--color-indigo-950); | |
text-violet-50 | color: var(--color-violet-50); | |
text-violet-100 | color: var(--color-violet-100); | |
text-violet-200 | color: var(--color-violet-200); | |
text-violet-300 | color: var(--color-violet-300); | dark |
text-violet-400 | color: var(--color-violet-400); | dark |
text-violet-500 | color: var(--color-violet-500); | hover group-hover dark |
text-violet-600 | color: var(--color-violet-600); | hover group-hover dark |
text-violet-700 | color: var(--color-violet-700); | hover group-hover dark |
text-violet-800 | color: var(--color-violet-800); | |
text-violet-900 | color: var(--color-violet-900); | |
text-violet-950 | color: var(--color-violet-950); | |
text-purple-50 | color: var(--color-purple-50); | |
text-purple-100 | color: var(--color-purple-100); | |
text-purple-200 | color: var(--color-purple-200); | |
text-purple-300 | color: var(--color-purple-300); | dark |
text-purple-400 | color: var(--color-purple-400); | dark |
text-purple-500 | color: var(--color-purple-500); | hover group-hover dark |
text-purple-600 | color: var(--color-purple-600); | hover group-hover dark |
text-purple-700 | color: var(--color-purple-700); | hover group-hover dark |
text-purple-800 | color: var(--color-purple-800); | |
text-purple-900 | color: var(--color-purple-900); | |
text-purple-950 | color: var(--color-purple-950); | |
text-fuchsia-50 | color: var(--color-fuchsia-50); | |
text-fuchsia-100 | color: var(--color-fuchsia-100); | |
text-fuchsia-200 | color: var(--color-fuchsia-200); | |
text-fuchsia-300 | color: var(--color-fuchsia-300); | dark |
text-fuchsia-400 | color: var(--color-fuchsia-400); | dark |
text-fuchsia-500 | color: var(--color-fuchsia-500); | hover group-hover dark |
text-fuchsia-600 | color: var(--color-fuchsia-600); | hover group-hover dark |
text-fuchsia-700 | color: var(--color-fuchsia-700); | hover group-hover dark |
text-fuchsia-800 | color: var(--color-fuchsia-800); | |
text-fuchsia-900 | color: var(--color-fuchsia-900); | |
text-fuchsia-950 | color: var(--color-fuchsia-950); | |
text-pink-50 | color: var(--color-pink-50); | |
text-pink-100 | color: var(--color-pink-100); | |
text-pink-200 | color: var(--color-pink-200); | |
text-pink-300 | color: var(--color-pink-300); | dark |
text-pink-400 | color: var(--color-pink-400); | dark |
text-pink-500 | color: var(--color-pink-500); | hover group-hover dark |
text-pink-600 | color: var(--color-pink-600); | hover group-hover dark |
text-pink-700 | color: var(--color-pink-700); | hover group-hover dark |
text-pink-800 | color: var(--color-pink-800); | |
text-pink-900 | color: var(--color-pink-900); | |
text-pink-950 | color: var(--color-pink-950); | |
text-rose-50 | color: var(--color-rose-50); | |
text-rose-100 | color: var(--color-rose-100); | |
text-rose-200 | color: var(--color-rose-200); | |
text-rose-300 | color: var(--color-rose-300); | dark |
text-rose-400 | color: var(--color-rose-400); | dark |
text-rose-500 | color: var(--color-rose-500); | hover group-hover dark |
text-rose-600 | color: var(--color-rose-600); | hover group-hover dark |
text-rose-700 | color: var(--color-rose-700); | hover group-hover dark |
text-rose-800 | color: var(--color-rose-800); | |
text-rose-900 | color: var(--color-rose-900); | |
text-rose-950 | color: var(--color-rose-950); | |
text-slate | color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); | hover group-hover |
text-gray | color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); | hover group-hover |
text-zinc | color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); | hover group-hover |
text-neutral | color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); | hover group-hover |
text-stone | color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); | hover group-hover |
text-red | color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); | hover group-hover |
text-orange | color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); | hover group-hover |
text-amber | color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); | hover group-hover |
text-yellow | color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); | hover group-hover |
text-lime | color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); | hover group-hover |
text-green | color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); | hover group-hover |
text-emerald | color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); | hover group-hover |
text-teal | color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); | hover group-hover |
text-cyan | color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); | hover group-hover |
text-sky | color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); | hover group-hover |
text-blue | color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); | hover group-hover |
text-indigo | color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); | hover group-hover |
text-violet | color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); | hover group-hover |
text-purple | color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); | hover group-hover |
text-fuchsia | color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); | hover group-hover |
text-pink | color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); | hover group-hover |
text-rose | color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); | hover group-hover |
text-background/5 | color: color-mix(in oklab, var(--background) 5%, transparent); | |
text-background/10 | color: color-mix(in oklab, var(--background) 10%, transparent); | |
text-background/20 | color: color-mix(in oklab, var(--background) 20%, transparent); | |
text-background/30 | color: color-mix(in oklab, var(--background) 30%, transparent); | |
text-background/50 | color: color-mix(in oklab, var(--background) 50%, transparent); | |
text-background/70 | color: color-mix(in oklab, var(--background) 70%, transparent); | |
text-background/80 | color: color-mix(in oklab, var(--background) 80%, transparent); | |
text-background/90 | color: color-mix(in oklab, var(--background) 90%, transparent); | |
text-foreground/5 | color: color-mix(in oklab, var(--foreground) 5%, transparent); | |
text-foreground/10 | color: color-mix(in oklab, var(--foreground) 10%, transparent); | |
text-foreground/20 | color: color-mix(in oklab, var(--foreground) 20%, transparent); | |
text-foreground/30 | color: color-mix(in oklab, var(--foreground) 30%, transparent); | |
text-foreground/50 | color: color-mix(in oklab, var(--foreground) 50%, transparent); | |
text-foreground/70 | color: color-mix(in oklab, var(--foreground) 70%, transparent); | |
text-foreground/80 | color: color-mix(in oklab, var(--foreground) 80%, transparent); | |
text-foreground/90 | color: color-mix(in oklab, var(--foreground) 90%, transparent); | |
text-surface/5 | color: color-mix(in oklab, var(--surface) 5%, transparent); | |
text-surface/10 | color: color-mix(in oklab, var(--surface) 10%, transparent); | |
text-surface/20 | color: color-mix(in oklab, var(--surface) 20%, transparent); | |
text-surface/30 | color: color-mix(in oklab, var(--surface) 30%, transparent); | |
text-surface/50 | color: color-mix(in oklab, var(--surface) 50%, transparent); | |
text-surface/70 | color: color-mix(in oklab, var(--surface) 70%, transparent); | |
text-surface/80 | color: color-mix(in oklab, var(--surface) 80%, transparent); | |
text-surface/90 | color: color-mix(in oklab, var(--surface) 90%, transparent); | |
text-surface-2/5 | color: color-mix(in oklab, var(--surface-2) 5%, transparent); | |
text-surface-2/10 | color: color-mix(in oklab, var(--surface-2) 10%, transparent); | |
text-surface-2/20 | color: color-mix(in oklab, var(--surface-2) 20%, transparent); | |
text-surface-2/30 | color: color-mix(in oklab, var(--surface-2) 30%, transparent); | |
text-surface-2/50 | color: color-mix(in oklab, var(--surface-2) 50%, transparent); | |
text-surface-2/70 | color: color-mix(in oklab, var(--surface-2) 70%, transparent); | |
text-surface-2/80 | color: color-mix(in oklab, var(--surface-2) 80%, transparent); | |
text-surface-2/90 | color: color-mix(in oklab, var(--surface-2) 90%, transparent); | |
text-surface-3/5 | color: color-mix(in oklab, var(--surface-3) 5%, transparent); | |
text-surface-3/10 | color: color-mix(in oklab, var(--surface-3) 10%, transparent); | |
text-surface-3/20 | color: color-mix(in oklab, var(--surface-3) 20%, transparent); | |
text-surface-3/30 | color: color-mix(in oklab, var(--surface-3) 30%, transparent); | |
text-surface-3/50 | color: color-mix(in oklab, var(--surface-3) 50%, transparent); | |
text-surface-3/70 | color: color-mix(in oklab, var(--surface-3) 70%, transparent); | |
text-surface-3/80 | color: color-mix(in oklab, var(--surface-3) 80%, transparent); | |
text-surface-3/90 | color: color-mix(in oklab, var(--surface-3) 90%, transparent); | |
text-muted/5 | color: color-mix(in oklab, var(--muted) 5%, transparent); | |
text-muted/10 | color: color-mix(in oklab, var(--muted) 10%, transparent); | |
text-muted/20 | color: color-mix(in oklab, var(--muted) 20%, transparent); | |
text-muted/30 | color: color-mix(in oklab, var(--muted) 30%, transparent); | |
text-muted/50 | color: color-mix(in oklab, var(--muted) 50%, transparent); | |
text-muted/70 | color: color-mix(in oklab, var(--muted) 70%, transparent); | |
text-muted/80 | color: color-mix(in oklab, var(--muted) 80%, transparent); | |
text-muted/90 | color: color-mix(in oklab, var(--muted) 90%, transparent); | |
text-muted-foreground/5 | color: color-mix(in oklab, var(--muted-foreground) 5%, transparent); | |
text-muted-foreground/10 | color: color-mix(in oklab, var(--muted-foreground) 10%, transparent); | |
text-muted-foreground/20 | color: color-mix(in oklab, var(--muted-foreground) 20%, transparent); | |
text-muted-foreground/30 | color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); | |
text-muted-foreground/50 | color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); | |
text-muted-foreground/70 | color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); | |
text-muted-foreground/80 | color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); | |
text-muted-foreground/90 | color: color-mix(in oklab, var(--muted-foreground) 90%, transparent); | |
text-border/5 | color: color-mix(in oklab, var(--border) 5%, transparent); | |
text-border/10 | color: color-mix(in oklab, var(--border) 10%, transparent); | |
text-border/20 | color: color-mix(in oklab, var(--border) 20%, transparent); | |
text-border/30 | color: color-mix(in oklab, var(--border) 30%, transparent); | |
text-border/50 | color: color-mix(in oklab, var(--border) 50%, transparent); | |
text-border/70 | color: color-mix(in oklab, var(--border) 70%, transparent); | |
text-border/80 | color: color-mix(in oklab, var(--border) 80%, transparent); | |
text-border/90 | color: color-mix(in oklab, var(--border) 90%, transparent); | |
text-primary/5 | color: color-mix(in oklab, var(--primary) 5%, transparent); | |
text-primary/10 | color: color-mix(in oklab, var(--primary) 10%, transparent); | |
text-primary/20 | color: color-mix(in oklab, var(--primary) 20%, transparent); | |
text-primary/30 | color: color-mix(in oklab, var(--primary) 30%, transparent); | |
text-primary/50 | color: color-mix(in oklab, var(--primary) 50%, transparent); | |
text-primary/70 | color: color-mix(in oklab, var(--primary) 70%, transparent); | |
text-primary/80 | color: color-mix(in oklab, var(--primary) 80%, transparent); | |
text-primary/90 | color: color-mix(in oklab, var(--primary) 90%, transparent); | |
text-primary-foreground/5 | color: color-mix(in oklab, var(--primary-foreground) 5%, transparent); | |
text-primary-foreground/10 | color: color-mix(in oklab, var(--primary-foreground) 10%, transparent); | |
text-primary-foreground/20 | color: color-mix(in oklab, var(--primary-foreground) 20%, transparent); | |
text-primary-foreground/30 | color: color-mix(in oklab, var(--primary-foreground) 30%, transparent); | |
text-primary-foreground/50 | color: color-mix(in oklab, var(--primary-foreground) 50%, transparent); | |
text-primary-foreground/70 | color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); | |
text-primary-foreground/80 | color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); | |
text-primary-foreground/90 | color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); | |
text-ring/5 | color: color-mix(in oklab, var(--ring) 5%, transparent); | |
text-ring/10 | color: color-mix(in oklab, var(--ring) 10%, transparent); | |
text-ring/20 | color: color-mix(in oklab, var(--ring) 20%, transparent); | |
text-ring/30 | color: color-mix(in oklab, var(--ring) 30%, transparent); | |
text-ring/50 | color: color-mix(in oklab, var(--ring) 50%, transparent); | |
text-ring/70 | color: color-mix(in oklab, var(--ring) 70%, transparent); | |
text-ring/80 | color: color-mix(in oklab, var(--ring) 80%, transparent); | |
text-ring/90 | color: color-mix(in oklab, var(--ring) 90%, transparent); | |
text-secondary/5 | color: color-mix(in oklab, var(--secondary) 5%, transparent); | |
text-secondary/10 | color: color-mix(in oklab, var(--secondary) 10%, transparent); | |
text-secondary/20 | color: color-mix(in oklab, var(--secondary) 20%, transparent); | |
text-secondary/30 | color: color-mix(in oklab, var(--secondary) 30%, transparent); | |
text-secondary/50 | color: color-mix(in oklab, var(--secondary) 50%, transparent); | |
text-secondary/70 | color: color-mix(in oklab, var(--secondary) 70%, transparent); | |
text-secondary/80 | color: color-mix(in oklab, var(--secondary) 80%, transparent); | |
text-secondary/90 | color: color-mix(in oklab, var(--secondary) 90%, transparent); | |
text-secondary-foreground/5 | color: color-mix(in oklab, var(--secondary-foreground) 5%, transparent); | |
text-secondary-foreground/10 | color: color-mix(in oklab, var(--secondary-foreground) 10%, transparent); | |
text-secondary-foreground/20 | color: color-mix(in oklab, var(--secondary-foreground) 20%, transparent); | |
text-secondary-foreground/30 | color: color-mix(in oklab, var(--secondary-foreground) 30%, transparent); | |
text-secondary-foreground/50 | color: color-mix(in oklab, var(--secondary-foreground) 50%, transparent); | |
text-secondary-foreground/70 | color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); | |
text-secondary-foreground/80 | color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent); | |
text-secondary-foreground/90 | color: color-mix(in oklab, var(--secondary-foreground) 90%, transparent); | |
text-accent/5 | color: color-mix(in oklab, var(--accent) 5%, transparent); | |
text-accent/10 | color: color-mix(in oklab, var(--accent) 10%, transparent); | |
text-accent/20 | color: color-mix(in oklab, var(--accent) 20%, transparent); | |
text-accent/30 | color: color-mix(in oklab, var(--accent) 30%, transparent); | |
text-accent/50 | color: color-mix(in oklab, var(--accent) 50%, transparent); | |
text-accent/70 | color: color-mix(in oklab, var(--accent) 70%, transparent); | |
text-accent/80 | color: color-mix(in oklab, var(--accent) 80%, transparent); | |
text-accent/90 | color: color-mix(in oklab, var(--accent) 90%, transparent); | |
text-accent-foreground/5 | color: color-mix(in oklab, var(--accent-foreground) 5%, transparent); | |
text-accent-foreground/10 | color: color-mix(in oklab, var(--accent-foreground) 10%, transparent); | |
text-accent-foreground/20 | color: color-mix(in oklab, var(--accent-foreground) 20%, transparent); | |
text-accent-foreground/30 | color: color-mix(in oklab, var(--accent-foreground) 30%, transparent); | |
text-accent-foreground/50 | color: color-mix(in oklab, var(--accent-foreground) 50%, transparent); | |
text-accent-foreground/70 | color: color-mix(in oklab, var(--accent-foreground) 70%, transparent); | |
text-accent-foreground/80 | color: color-mix(in oklab, var(--accent-foreground) 80%, transparent); | |
text-accent-foreground/90 | color: color-mix(in oklab, var(--accent-foreground) 90%, transparent); | |
text-success/5 | color: color-mix(in oklab, var(--success) 5%, transparent); | |
text-success/10 | color: color-mix(in oklab, var(--success) 10%, transparent); | |
text-success/20 | color: color-mix(in oklab, var(--success) 20%, transparent); | |
text-success/30 | color: color-mix(in oklab, var(--success) 30%, transparent); | |
text-success/50 | color: color-mix(in oklab, var(--success) 50%, transparent); | |
text-success/70 | color: color-mix(in oklab, var(--success) 70%, transparent); | |
text-success/80 | color: color-mix(in oklab, var(--success) 80%, transparent); | |
text-success/90 | color: color-mix(in oklab, var(--success) 90%, transparent); | |
text-success-foreground/5 | color: color-mix(in oklab, var(--success-foreground) 5%, transparent); | |
text-success-foreground/10 | color: color-mix(in oklab, var(--success-foreground) 10%, transparent); | |
text-success-foreground/20 | color: color-mix(in oklab, var(--success-foreground) 20%, transparent); | |
text-success-foreground/30 | color: color-mix(in oklab, var(--success-foreground) 30%, transparent); | |
text-success-foreground/50 | color: color-mix(in oklab, var(--success-foreground) 50%, transparent); | |
text-success-foreground/70 | color: color-mix(in oklab, var(--success-foreground) 70%, transparent); | |
text-success-foreground/80 | color: color-mix(in oklab, var(--success-foreground) 80%, transparent); | |
text-success-foreground/90 | color: color-mix(in oklab, var(--success-foreground) 90%, transparent); | |
text-warning/5 | color: color-mix(in oklab, var(--warning) 5%, transparent); | |
text-warning/10 | color: color-mix(in oklab, var(--warning) 10%, transparent); | |
text-warning/20 | color: color-mix(in oklab, var(--warning) 20%, transparent); | |
text-warning/30 | color: color-mix(in oklab, var(--warning) 30%, transparent); | |
text-warning/50 | color: color-mix(in oklab, var(--warning) 50%, transparent); | |
text-warning/70 | color: color-mix(in oklab, var(--warning) 70%, transparent); | |
text-warning/80 | color: color-mix(in oklab, var(--warning) 80%, transparent); | |
text-warning/90 | color: color-mix(in oklab, var(--warning) 90%, transparent); | |
text-warning-foreground/5 | color: color-mix(in oklab, var(--warning-foreground) 5%, transparent); | |
text-warning-foreground/10 | color: color-mix(in oklab, var(--warning-foreground) 10%, transparent); | |
text-warning-foreground/20 | color: color-mix(in oklab, var(--warning-foreground) 20%, transparent); | |
text-warning-foreground/30 | color: color-mix(in oklab, var(--warning-foreground) 30%, transparent); | |
text-warning-foreground/50 | color: color-mix(in oklab, var(--warning-foreground) 50%, transparent); | |
text-warning-foreground/70 | color: color-mix(in oklab, var(--warning-foreground) 70%, transparent); | |
text-warning-foreground/80 | color: color-mix(in oklab, var(--warning-foreground) 80%, transparent); | |
text-warning-foreground/90 | color: color-mix(in oklab, var(--warning-foreground) 90%, transparent); | |
text-danger/5 | color: color-mix(in oklab, var(--danger) 5%, transparent); | |
text-danger/10 | color: color-mix(in oklab, var(--danger) 10%, transparent); | |
text-danger/20 | color: color-mix(in oklab, var(--danger) 20%, transparent); | |
text-danger/30 | color: color-mix(in oklab, var(--danger) 30%, transparent); | |
text-danger/50 | color: color-mix(in oklab, var(--danger) 50%, transparent); | |
text-danger/70 | color: color-mix(in oklab, var(--danger) 70%, transparent); | |
text-danger/80 | color: color-mix(in oklab, var(--danger) 80%, transparent); | |
text-danger/90 | color: color-mix(in oklab, var(--danger) 90%, transparent); | |
text-danger-foreground/5 | color: color-mix(in oklab, var(--danger-foreground) 5%, transparent); | |
text-danger-foreground/10 | color: color-mix(in oklab, var(--danger-foreground) 10%, transparent); | |
text-danger-foreground/20 | color: color-mix(in oklab, var(--danger-foreground) 20%, transparent); | |
text-danger-foreground/30 | color: color-mix(in oklab, var(--danger-foreground) 30%, transparent); | |
text-danger-foreground/50 | color: color-mix(in oklab, var(--danger-foreground) 50%, transparent); | |
text-danger-foreground/70 | color: color-mix(in oklab, var(--danger-foreground) 70%, transparent); | |
text-danger-foreground/80 | color: color-mix(in oklab, var(--danger-foreground) 80%, transparent); | |
text-danger-foreground/90 | color: color-mix(in oklab, var(--danger-foreground) 90%, transparent); | |
text-info/5 | color: color-mix(in oklab, var(--info) 5%, transparent); | |
text-info/10 | color: color-mix(in oklab, var(--info) 10%, transparent); | |
text-info/20 | color: color-mix(in oklab, var(--info) 20%, transparent); | |
text-info/30 | color: color-mix(in oklab, var(--info) 30%, transparent); | |
text-info/50 | color: color-mix(in oklab, var(--info) 50%, transparent); | |
text-info/70 | color: color-mix(in oklab, var(--info) 70%, transparent); | |
text-info/80 | color: color-mix(in oklab, var(--info) 80%, transparent); | |
text-info/90 | color: color-mix(in oklab, var(--info) 90%, transparent); | |
text-info-foreground/5 | color: color-mix(in oklab, var(--info-foreground) 5%, transparent); | |
text-info-foreground/10 | color: color-mix(in oklab, var(--info-foreground) 10%, transparent); | |
text-info-foreground/20 | color: color-mix(in oklab, var(--info-foreground) 20%, transparent); | |
text-info-foreground/30 | color: color-mix(in oklab, var(--info-foreground) 30%, transparent); | |
text-info-foreground/50 | color: color-mix(in oklab, var(--info-foreground) 50%, transparent); | |
text-info-foreground/70 | color: color-mix(in oklab, var(--info-foreground) 70%, transparent); | |
text-info-foreground/80 | color: color-mix(in oklab, var(--info-foreground) 80%, transparent); | |
text-info-foreground/90 | color: color-mix(in oklab, var(--info-foreground) 90%, transparent); | |
text-white/5 | color: color-mix(in oklab, #fff 5%, transparent); | hover active dark |
text-white/10 | color: color-mix(in oklab, #fff 10%, transparent); | hover active dark |
text-white/20 | color: color-mix(in oklab, #fff 20%, transparent); | hover active dark |
text-white/30 | color: color-mix(in oklab, #fff 30%, transparent); | hover active dark |
text-white/50 | color: color-mix(in oklab, #fff 50%, transparent); | hover active dark |
text-white/70 | color: color-mix(in oklab, #fff 70%, transparent); | hover active dark |
text-white/80 | color: color-mix(in oklab, #fff 80%, transparent); | hover active dark |
text-white/90 | color: color-mix(in oklab, #fff 90%, transparent); | hover active dark |
text-black/5 | color: color-mix(in oklab, #000 5%, transparent); | hover active dark |
text-black/10 | color: color-mix(in oklab, #000 10%, transparent); | hover active dark |
text-black/20 | color: color-mix(in oklab, #000 20%, transparent); | hover active dark |
text-black/30 | color: color-mix(in oklab, #000 30%, transparent); | hover active dark |
text-black/50 | color: color-mix(in oklab, #000 50%, transparent); | hover active dark |
text-black/70 | color: color-mix(in oklab, #000 70%, transparent); | hover active dark |
text-black/80 | color: color-mix(in oklab, #000 80%, transparent); | hover active dark |
text-black/90 | color: color-mix(in oklab, #000 90%, transparent); | hover active dark |
placeholder-background | color: var(--background); | |
placeholder-foreground | color: var(--foreground); | |
placeholder-surface | color: var(--surface); | |
placeholder-surface-2 | color: var(--surface-2); | |
placeholder-surface-3 | color: var(--surface-3); | |
placeholder-muted | color: var(--muted); | |
placeholder-muted-foreground | color: var(--muted-foreground); | |
placeholder-border | color: var(--border); | |
placeholder-primary | color: var(--primary); | |
placeholder-primary-foreground | color: var(--primary-foreground); | |
placeholder-ring | color: var(--ring); | |
placeholder-secondary | color: var(--secondary); | |
placeholder-secondary-foreground | color: var(--secondary-foreground); | |
placeholder-accent | color: var(--accent); | |
placeholder-accent-foreground | color: var(--accent-foreground); | |
placeholder-success | color: var(--success); | |
placeholder-success-foreground | color: var(--success-foreground); | |
placeholder-warning | color: var(--warning); | |
placeholder-warning-foreground | color: var(--warning-foreground); | |
placeholder-danger | color: var(--danger); | |
placeholder-danger-foreground | color: var(--danger-foreground); | |
placeholder-info | color: var(--info); | |
placeholder-info-foreground | color: var(--info-foreground); | |
placeholder-white | color: #fff; | |
placeholder-black | color: #000; | |
placeholder-transparent | color: transparent; |
Background color 492
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
bg-background | background-color: var(--background); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-foreground | background-color: var(--foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-surface | background-color: var(--surface); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-surface-2 | background-color: var(--surface-2); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-surface-3 | background-color: var(--surface-3); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-muted | background-color: var(--muted); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-muted-foreground | background-color: var(--muted-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-border | background-color: var(--border); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-primary | background-color: var(--primary); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-primary-foreground | background-color: var(--primary-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-ring | background-color: var(--ring); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-secondary | background-color: var(--secondary); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-secondary-foreground | background-color: var(--secondary-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-accent | background-color: var(--accent); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-accent-foreground | background-color: var(--accent-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-success | background-color: var(--success); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-success-foreground | background-color: var(--success-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-warning | background-color: var(--warning); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-warning-foreground | background-color: var(--warning-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-danger | background-color: var(--danger); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-danger-foreground | background-color: var(--danger-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-info | background-color: var(--info); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-info-foreground | background-color: var(--info-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
bg-white | background-color: #fff; | hover group-hover dark |
bg-black | background-color: #000; | hover group-hover dark |
bg-transparent | background-color: transparent; | hover group-hover dark |
bg-current | background-color: currentColor; | |
bg-inherit | background-color: inherit; | |
bg-slate-50 | background-color: var(--color-slate-50); | first last odd even dark |
bg-slate-100 | background-color: var(--color-slate-100); | first last odd even dark |
bg-slate-200 | background-color: var(--color-slate-200); | dark |
bg-slate-300 | background-color: var(--color-slate-300); | dark |
bg-slate-400 | background-color: var(--color-slate-400); | dark |
bg-slate-500 | background-color: var(--color-slate-500); | hover group-hover dark |
bg-slate-600 | background-color: var(--color-slate-600); | hover group-hover dark |
bg-slate-700 | background-color: var(--color-slate-700); | hover group-hover dark |
bg-slate-800 | background-color: var(--color-slate-800); | dark |
bg-slate-900 | background-color: var(--color-slate-900); | dark |
bg-slate-950 | background-color: var(--color-slate-950); | dark |
bg-gray-50 | background-color: var(--color-gray-50); | first last odd even dark |
bg-gray-100 | background-color: var(--color-gray-100); | first last odd even dark |
bg-gray-200 | background-color: var(--color-gray-200); | dark |
bg-gray-300 | background-color: var(--color-gray-300); | dark |
bg-gray-400 | background-color: var(--color-gray-400); | dark |
bg-gray-500 | background-color: var(--color-gray-500); | hover group-hover dark |
bg-gray-600 | background-color: var(--color-gray-600); | hover group-hover dark |
bg-gray-700 | background-color: var(--color-gray-700); | hover group-hover dark |
bg-gray-800 | background-color: var(--color-gray-800); | dark |
bg-gray-900 | background-color: var(--color-gray-900); | dark |
bg-gray-950 | background-color: var(--color-gray-950); | dark |
bg-zinc-50 | background-color: var(--color-zinc-50); | first last odd even dark |
bg-zinc-100 | background-color: var(--color-zinc-100); | first last odd even dark |
bg-zinc-200 | background-color: var(--color-zinc-200); | dark |
bg-zinc-300 | background-color: var(--color-zinc-300); | dark |
bg-zinc-400 | background-color: var(--color-zinc-400); | dark |
bg-zinc-500 | background-color: var(--color-zinc-500); | hover group-hover dark |
bg-zinc-600 | background-color: var(--color-zinc-600); | hover group-hover dark |
bg-zinc-700 | background-color: var(--color-zinc-700); | hover group-hover dark |
bg-zinc-800 | background-color: var(--color-zinc-800); | dark |
bg-zinc-900 | background-color: var(--color-zinc-900); | dark |
bg-zinc-950 | background-color: var(--color-zinc-950); | dark |
bg-neutral-50 | background-color: var(--color-neutral-50); | first last odd even dark |
bg-neutral-100 | background-color: var(--color-neutral-100); | first last odd even dark |
bg-neutral-200 | background-color: var(--color-neutral-200); | dark |
bg-neutral-300 | background-color: var(--color-neutral-300); | dark |
bg-neutral-400 | background-color: var(--color-neutral-400); | dark |
bg-neutral-500 | background-color: var(--color-neutral-500); | hover group-hover dark |
bg-neutral-600 | background-color: var(--color-neutral-600); | hover group-hover dark |
bg-neutral-700 | background-color: var(--color-neutral-700); | hover group-hover dark |
bg-neutral-800 | background-color: var(--color-neutral-800); | dark |
bg-neutral-900 | background-color: var(--color-neutral-900); | dark |
bg-neutral-950 | background-color: var(--color-neutral-950); | dark |
bg-stone-50 | background-color: var(--color-stone-50); | first last odd even dark |
bg-stone-100 | background-color: var(--color-stone-100); | first last odd even dark |
bg-stone-200 | background-color: var(--color-stone-200); | dark |
bg-stone-300 | background-color: var(--color-stone-300); | dark |
bg-stone-400 | background-color: var(--color-stone-400); | dark |
bg-stone-500 | background-color: var(--color-stone-500); | hover group-hover dark |
bg-stone-600 | background-color: var(--color-stone-600); | hover group-hover dark |
bg-stone-700 | background-color: var(--color-stone-700); | hover group-hover dark |
bg-stone-800 | background-color: var(--color-stone-800); | dark |
bg-stone-900 | background-color: var(--color-stone-900); | dark |
bg-stone-950 | background-color: var(--color-stone-950); | dark |
bg-red-50 | background-color: var(--color-red-50); | |
bg-red-100 | background-color: var(--color-red-100); | |
bg-red-200 | background-color: var(--color-red-200); | |
bg-red-300 | background-color: var(--color-red-300); | |
bg-red-400 | background-color: var(--color-red-400); | |
bg-red-500 | background-color: var(--color-red-500); | hover group-hover dark |
bg-red-600 | background-color: var(--color-red-600); | hover group-hover dark |
bg-red-700 | background-color: var(--color-red-700); | hover group-hover dark |
bg-red-800 | background-color: var(--color-red-800); | |
bg-red-900 | background-color: var(--color-red-900); | |
bg-red-950 | background-color: var(--color-red-950); | |
bg-orange-50 | background-color: var(--color-orange-50); | |
bg-orange-100 | background-color: var(--color-orange-100); | |
bg-orange-200 | background-color: var(--color-orange-200); | |
bg-orange-300 | background-color: var(--color-orange-300); | |
bg-orange-400 | background-color: var(--color-orange-400); | |
bg-orange-500 | background-color: var(--color-orange-500); | hover group-hover dark |
bg-orange-600 | background-color: var(--color-orange-600); | hover group-hover dark |
bg-orange-700 | background-color: var(--color-orange-700); | hover group-hover dark |
bg-orange-800 | background-color: var(--color-orange-800); | |
bg-orange-900 | background-color: var(--color-orange-900); | |
bg-orange-950 | background-color: var(--color-orange-950); | |
bg-amber-50 | background-color: var(--color-amber-50); | |
bg-amber-100 | background-color: var(--color-amber-100); | |
bg-amber-200 | background-color: var(--color-amber-200); | |
bg-amber-300 | background-color: var(--color-amber-300); | |
bg-amber-400 | background-color: var(--color-amber-400); | |
bg-amber-500 | background-color: var(--color-amber-500); | hover group-hover dark |
bg-amber-600 | background-color: var(--color-amber-600); | hover group-hover dark |
bg-amber-700 | background-color: var(--color-amber-700); | hover group-hover dark |
bg-amber-800 | background-color: var(--color-amber-800); | |
bg-amber-900 | background-color: var(--color-amber-900); | |
bg-amber-950 | background-color: var(--color-amber-950); | |
bg-yellow-50 | background-color: var(--color-yellow-50); | |
bg-yellow-100 | background-color: var(--color-yellow-100); | |
bg-yellow-200 | background-color: var(--color-yellow-200); | |
bg-yellow-300 | background-color: var(--color-yellow-300); | |
bg-yellow-400 | background-color: var(--color-yellow-400); | |
bg-yellow-500 | background-color: var(--color-yellow-500); | hover group-hover dark |
bg-yellow-600 | background-color: var(--color-yellow-600); | hover group-hover dark |
bg-yellow-700 | background-color: var(--color-yellow-700); | hover group-hover dark |
bg-yellow-800 | background-color: var(--color-yellow-800); | |
bg-yellow-900 | background-color: var(--color-yellow-900); | |
bg-yellow-950 | background-color: var(--color-yellow-950); | |
bg-lime-50 | background-color: var(--color-lime-50); | |
bg-lime-100 | background-color: var(--color-lime-100); | |
bg-lime-200 | background-color: var(--color-lime-200); | |
bg-lime-300 | background-color: var(--color-lime-300); | |
bg-lime-400 | background-color: var(--color-lime-400); | |
bg-lime-500 | background-color: var(--color-lime-500); | hover group-hover dark |
bg-lime-600 | background-color: var(--color-lime-600); | hover group-hover dark |
bg-lime-700 | background-color: var(--color-lime-700); | hover group-hover dark |
bg-lime-800 | background-color: var(--color-lime-800); | |
bg-lime-900 | background-color: var(--color-lime-900); | |
bg-lime-950 | background-color: var(--color-lime-950); | |
bg-green-50 | background-color: var(--color-green-50); | |
bg-green-100 | background-color: var(--color-green-100); | |
bg-green-200 | background-color: var(--color-green-200); | |
bg-green-300 | background-color: var(--color-green-300); | |
bg-green-400 | background-color: var(--color-green-400); | |
bg-green-500 | background-color: var(--color-green-500); | hover group-hover dark |
bg-green-600 | background-color: var(--color-green-600); | hover group-hover dark |
bg-green-700 | background-color: var(--color-green-700); | hover group-hover dark |
bg-green-800 | background-color: var(--color-green-800); | |
bg-green-900 | background-color: var(--color-green-900); | |
bg-green-950 | background-color: var(--color-green-950); | |
bg-emerald-50 | background-color: var(--color-emerald-50); | |
bg-emerald-100 | background-color: var(--color-emerald-100); | |
bg-emerald-200 | background-color: var(--color-emerald-200); | |
bg-emerald-300 | background-color: var(--color-emerald-300); | |
bg-emerald-400 | background-color: var(--color-emerald-400); | |
bg-emerald-500 | background-color: var(--color-emerald-500); | hover group-hover dark |
bg-emerald-600 | background-color: var(--color-emerald-600); | hover group-hover dark |
bg-emerald-700 | background-color: var(--color-emerald-700); | hover group-hover dark |
bg-emerald-800 | background-color: var(--color-emerald-800); | |
bg-emerald-900 | background-color: var(--color-emerald-900); | |
bg-emerald-950 | background-color: var(--color-emerald-950); | |
bg-teal-50 | background-color: var(--color-teal-50); | |
bg-teal-100 | background-color: var(--color-teal-100); | |
bg-teal-200 | background-color: var(--color-teal-200); | |
bg-teal-300 | background-color: var(--color-teal-300); | |
bg-teal-400 | background-color: var(--color-teal-400); | |
bg-teal-500 | background-color: var(--color-teal-500); | hover group-hover dark |
bg-teal-600 | background-color: var(--color-teal-600); | hover group-hover dark |
bg-teal-700 | background-color: var(--color-teal-700); | hover group-hover dark |
bg-teal-800 | background-color: var(--color-teal-800); | |
bg-teal-900 | background-color: var(--color-teal-900); | |
bg-teal-950 | background-color: var(--color-teal-950); | |
bg-cyan-50 | background-color: var(--color-cyan-50); | |
bg-cyan-100 | background-color: var(--color-cyan-100); | |
bg-cyan-200 | background-color: var(--color-cyan-200); | |
bg-cyan-300 | background-color: var(--color-cyan-300); | |
bg-cyan-400 | background-color: var(--color-cyan-400); | |
bg-cyan-500 | background-color: var(--color-cyan-500); | hover group-hover dark |
bg-cyan-600 | background-color: var(--color-cyan-600); | hover group-hover dark |
bg-cyan-700 | background-color: var(--color-cyan-700); | hover group-hover dark |
bg-cyan-800 | background-color: var(--color-cyan-800); | |
bg-cyan-900 | background-color: var(--color-cyan-900); | |
bg-cyan-950 | background-color: var(--color-cyan-950); | |
bg-sky-50 | background-color: var(--color-sky-50); | |
bg-sky-100 | background-color: var(--color-sky-100); | |
bg-sky-200 | background-color: var(--color-sky-200); | |
bg-sky-300 | background-color: var(--color-sky-300); | |
bg-sky-400 | background-color: var(--color-sky-400); | |
bg-sky-500 | background-color: var(--color-sky-500); | hover group-hover dark |
bg-sky-600 | background-color: var(--color-sky-600); | hover group-hover dark |
bg-sky-700 | background-color: var(--color-sky-700); | hover group-hover dark |
bg-sky-800 | background-color: var(--color-sky-800); | |
bg-sky-900 | background-color: var(--color-sky-900); | |
bg-sky-950 | background-color: var(--color-sky-950); | |
bg-blue-50 | background-color: var(--color-blue-50); | |
bg-blue-100 | background-color: var(--color-blue-100); | |
bg-blue-200 | background-color: var(--color-blue-200); | |
bg-blue-300 | background-color: var(--color-blue-300); | |
bg-blue-400 | background-color: var(--color-blue-400); | |
bg-blue-500 | background-color: var(--color-blue-500); | hover group-hover dark |
bg-blue-600 | background-color: var(--color-blue-600); | hover group-hover dark |
bg-blue-700 | background-color: var(--color-blue-700); | hover group-hover dark |
bg-blue-800 | background-color: var(--color-blue-800); | |
bg-blue-900 | background-color: var(--color-blue-900); | |
bg-blue-950 | background-color: var(--color-blue-950); | |
bg-indigo-50 | background-color: var(--color-indigo-50); | |
bg-indigo-100 | background-color: var(--color-indigo-100); | |
bg-indigo-200 | background-color: var(--color-indigo-200); | |
bg-indigo-300 | background-color: var(--color-indigo-300); | |
bg-indigo-400 | background-color: var(--color-indigo-400); | |
bg-indigo-500 | background-color: var(--color-indigo-500); | hover group-hover dark |
bg-indigo-600 | background-color: var(--color-indigo-600); | hover group-hover dark |
bg-indigo-700 | background-color: var(--color-indigo-700); | hover group-hover dark |
bg-indigo-800 | background-color: var(--color-indigo-800); | |
bg-indigo-900 | background-color: var(--color-indigo-900); | |
bg-indigo-950 | background-color: var(--color-indigo-950); | |
bg-violet-50 | background-color: var(--color-violet-50); | |
bg-violet-100 | background-color: var(--color-violet-100); | |
bg-violet-200 | background-color: var(--color-violet-200); | |
bg-violet-300 | background-color: var(--color-violet-300); | |
bg-violet-400 | background-color: var(--color-violet-400); | |
bg-violet-500 | background-color: var(--color-violet-500); | hover group-hover dark |
bg-violet-600 | background-color: var(--color-violet-600); | hover group-hover dark |
bg-violet-700 | background-color: var(--color-violet-700); | hover group-hover dark |
bg-violet-800 | background-color: var(--color-violet-800); | |
bg-violet-900 | background-color: var(--color-violet-900); | |
bg-violet-950 | background-color: var(--color-violet-950); | |
bg-purple-50 | background-color: var(--color-purple-50); | |
bg-purple-100 | background-color: var(--color-purple-100); | |
bg-purple-200 | background-color: var(--color-purple-200); | |
bg-purple-300 | background-color: var(--color-purple-300); | |
bg-purple-400 | background-color: var(--color-purple-400); | |
bg-purple-500 | background-color: var(--color-purple-500); | hover group-hover dark |
bg-purple-600 | background-color: var(--color-purple-600); | hover group-hover dark |
bg-purple-700 | background-color: var(--color-purple-700); | hover group-hover dark |
bg-purple-800 | background-color: var(--color-purple-800); | |
bg-purple-900 | background-color: var(--color-purple-900); | |
bg-purple-950 | background-color: var(--color-purple-950); | |
bg-fuchsia-50 | background-color: var(--color-fuchsia-50); | |
bg-fuchsia-100 | background-color: var(--color-fuchsia-100); | |
bg-fuchsia-200 | background-color: var(--color-fuchsia-200); | |
bg-fuchsia-300 | background-color: var(--color-fuchsia-300); | |
bg-fuchsia-400 | background-color: var(--color-fuchsia-400); | |
bg-fuchsia-500 | background-color: var(--color-fuchsia-500); | hover group-hover dark |
bg-fuchsia-600 | background-color: var(--color-fuchsia-600); | hover group-hover dark |
bg-fuchsia-700 | background-color: var(--color-fuchsia-700); | hover group-hover dark |
bg-fuchsia-800 | background-color: var(--color-fuchsia-800); | |
bg-fuchsia-900 | background-color: var(--color-fuchsia-900); | |
bg-fuchsia-950 | background-color: var(--color-fuchsia-950); | |
bg-pink-50 | background-color: var(--color-pink-50); | |
bg-pink-100 | background-color: var(--color-pink-100); | |
bg-pink-200 | background-color: var(--color-pink-200); | |
bg-pink-300 | background-color: var(--color-pink-300); | |
bg-pink-400 | background-color: var(--color-pink-400); | |
bg-pink-500 | background-color: var(--color-pink-500); | hover group-hover dark |
bg-pink-600 | background-color: var(--color-pink-600); | hover group-hover dark |
bg-pink-700 | background-color: var(--color-pink-700); | hover group-hover dark |
bg-pink-800 | background-color: var(--color-pink-800); | |
bg-pink-900 | background-color: var(--color-pink-900); | |
bg-pink-950 | background-color: var(--color-pink-950); | |
bg-rose-50 | background-color: var(--color-rose-50); | |
bg-rose-100 | background-color: var(--color-rose-100); | |
bg-rose-200 | background-color: var(--color-rose-200); | |
bg-rose-300 | background-color: var(--color-rose-300); | |
bg-rose-400 | background-color: var(--color-rose-400); | |
bg-rose-500 | background-color: var(--color-rose-500); | hover group-hover dark |
bg-rose-600 | background-color: var(--color-rose-600); | hover group-hover dark |
bg-rose-700 | background-color: var(--color-rose-700); | hover group-hover dark |
bg-rose-800 | background-color: var(--color-rose-800); | |
bg-rose-900 | background-color: var(--color-rose-900); | |
bg-rose-950 | background-color: var(--color-rose-950); | |
bg-slate | background-color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); | hover group-hover |
bg-gray | background-color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); | hover group-hover |
bg-zinc | background-color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); | hover group-hover |
bg-neutral | background-color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); | hover group-hover |
bg-stone | background-color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); | hover group-hover |
bg-red | background-color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); | hover group-hover |
bg-orange | background-color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); | hover group-hover |
bg-amber | background-color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); | hover group-hover |
bg-yellow | background-color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); | hover group-hover |
bg-lime | background-color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); | hover group-hover |
bg-green | background-color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); | hover group-hover |
bg-emerald | background-color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); | hover group-hover |
bg-teal | background-color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); | hover group-hover |
bg-cyan | background-color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); | hover group-hover |
bg-sky | background-color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); | hover group-hover |
bg-blue | background-color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); | hover group-hover |
bg-indigo | background-color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); | hover group-hover |
bg-violet | background-color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); | hover group-hover |
bg-purple | background-color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); | hover group-hover |
bg-fuchsia | background-color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); | hover group-hover |
bg-pink | background-color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); | hover group-hover |
bg-rose | background-color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); | hover group-hover |
bg-background/5 | background-color: color-mix(in oklab, var(--background) 5%, transparent); | hover active dark |
bg-background/10 | background-color: color-mix(in oklab, var(--background) 10%, transparent); | hover active dark |
bg-background/20 | background-color: color-mix(in oklab, var(--background) 20%, transparent); | hover active dark |
bg-background/30 | background-color: color-mix(in oklab, var(--background) 30%, transparent); | hover active dark |
bg-background/50 | background-color: color-mix(in oklab, var(--background) 50%, transparent); | hover active dark |
bg-background/70 | background-color: color-mix(in oklab, var(--background) 70%, transparent); | hover active dark |
bg-background/80 | background-color: color-mix(in oklab, var(--background) 80%, transparent); | hover active dark |
bg-background/90 | background-color: color-mix(in oklab, var(--background) 90%, transparent); | hover active dark |
bg-foreground/5 | background-color: color-mix(in oklab, var(--foreground) 5%, transparent); | hover active dark |
bg-foreground/10 | background-color: color-mix(in oklab, var(--foreground) 10%, transparent); | hover active dark |
bg-foreground/20 | background-color: color-mix(in oklab, var(--foreground) 20%, transparent); | hover active dark |
bg-foreground/30 | background-color: color-mix(in oklab, var(--foreground) 30%, transparent); | hover active dark |
bg-foreground/50 | background-color: color-mix(in oklab, var(--foreground) 50%, transparent); | hover active dark |
bg-foreground/70 | background-color: color-mix(in oklab, var(--foreground) 70%, transparent); | hover active dark |
bg-foreground/80 | background-color: color-mix(in oklab, var(--foreground) 80%, transparent); | hover active dark |
bg-foreground/90 | background-color: color-mix(in oklab, var(--foreground) 90%, transparent); | hover active dark |
bg-surface/5 | background-color: color-mix(in oklab, var(--surface) 5%, transparent); | hover active dark |
bg-surface/10 | background-color: color-mix(in oklab, var(--surface) 10%, transparent); | hover active dark |
bg-surface/20 | background-color: color-mix(in oklab, var(--surface) 20%, transparent); | hover active dark |
bg-surface/30 | background-color: color-mix(in oklab, var(--surface) 30%, transparent); | hover active dark |
bg-surface/50 | background-color: color-mix(in oklab, var(--surface) 50%, transparent); | hover active dark |
bg-surface/70 | background-color: color-mix(in oklab, var(--surface) 70%, transparent); | hover active dark |
bg-surface/80 | background-color: color-mix(in oklab, var(--surface) 80%, transparent); | hover active dark |
bg-surface/90 | background-color: color-mix(in oklab, var(--surface) 90%, transparent); | hover active dark |
bg-surface-2/5 | background-color: color-mix(in oklab, var(--surface-2) 5%, transparent); | hover active dark |
bg-surface-2/10 | background-color: color-mix(in oklab, var(--surface-2) 10%, transparent); | hover active dark |
bg-surface-2/20 | background-color: color-mix(in oklab, var(--surface-2) 20%, transparent); | hover active dark |
bg-surface-2/30 | background-color: color-mix(in oklab, var(--surface-2) 30%, transparent); | hover active dark |
bg-surface-2/50 | background-color: color-mix(in oklab, var(--surface-2) 50%, transparent); | hover active dark |
bg-surface-2/70 | background-color: color-mix(in oklab, var(--surface-2) 70%, transparent); | hover active dark |
bg-surface-2/80 | background-color: color-mix(in oklab, var(--surface-2) 80%, transparent); | hover active dark |
bg-surface-2/90 | background-color: color-mix(in oklab, var(--surface-2) 90%, transparent); | hover active dark |
bg-surface-3/5 | background-color: color-mix(in oklab, var(--surface-3) 5%, transparent); | hover active dark |
bg-surface-3/10 | background-color: color-mix(in oklab, var(--surface-3) 10%, transparent); | hover active dark |
bg-surface-3/20 | background-color: color-mix(in oklab, var(--surface-3) 20%, transparent); | hover active dark |
bg-surface-3/30 | background-color: color-mix(in oklab, var(--surface-3) 30%, transparent); | hover active dark |
bg-surface-3/50 | background-color: color-mix(in oklab, var(--surface-3) 50%, transparent); | hover active dark |
bg-surface-3/70 | background-color: color-mix(in oklab, var(--surface-3) 70%, transparent); | hover active dark |
bg-surface-3/80 | background-color: color-mix(in oklab, var(--surface-3) 80%, transparent); | hover active dark |
bg-surface-3/90 | background-color: color-mix(in oklab, var(--surface-3) 90%, transparent); | hover active dark |
bg-muted/5 | background-color: color-mix(in oklab, var(--muted) 5%, transparent); | hover active dark |
bg-muted/10 | background-color: color-mix(in oklab, var(--muted) 10%, transparent); | hover active dark |
bg-muted/20 | background-color: color-mix(in oklab, var(--muted) 20%, transparent); | hover active dark |
bg-muted/30 | background-color: color-mix(in oklab, var(--muted) 30%, transparent); | hover active dark |
bg-muted/50 | background-color: color-mix(in oklab, var(--muted) 50%, transparent); | hover active dark |
bg-muted/70 | background-color: color-mix(in oklab, var(--muted) 70%, transparent); | hover active dark |
bg-muted/80 | background-color: color-mix(in oklab, var(--muted) 80%, transparent); | hover active dark |
bg-muted/90 | background-color: color-mix(in oklab, var(--muted) 90%, transparent); | hover active dark |
bg-muted-foreground/5 | background-color: color-mix(in oklab, var(--muted-foreground) 5%, transparent); | hover active dark |
bg-muted-foreground/10 | background-color: color-mix(in oklab, var(--muted-foreground) 10%, transparent); | hover active dark |
bg-muted-foreground/20 | background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent); | hover active dark |
bg-muted-foreground/30 | background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); | hover active dark |
bg-muted-foreground/50 | background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); | hover active dark |
bg-muted-foreground/70 | background-color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); | hover active dark |
bg-muted-foreground/80 | background-color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); | hover active dark |
bg-muted-foreground/90 | background-color: color-mix(in oklab, var(--muted-foreground) 90%, transparent); | hover active dark |
bg-border/5 | background-color: color-mix(in oklab, var(--border) 5%, transparent); | hover active dark |
bg-border/10 | background-color: color-mix(in oklab, var(--border) 10%, transparent); | hover active dark |
bg-border/20 | background-color: color-mix(in oklab, var(--border) 20%, transparent); | hover active dark |
bg-border/30 | background-color: color-mix(in oklab, var(--border) 30%, transparent); | hover active dark |
bg-border/50 | background-color: color-mix(in oklab, var(--border) 50%, transparent); | hover active dark |
bg-border/70 | background-color: color-mix(in oklab, var(--border) 70%, transparent); | hover active dark |
bg-border/80 | background-color: color-mix(in oklab, var(--border) 80%, transparent); | hover active dark |
bg-border/90 | background-color: color-mix(in oklab, var(--border) 90%, transparent); | hover active dark |
bg-primary/5 | background-color: color-mix(in oklab, var(--primary) 5%, transparent); | hover active dark |
bg-primary/10 | background-color: color-mix(in oklab, var(--primary) 10%, transparent); | hover active dark |
bg-primary/20 | background-color: color-mix(in oklab, var(--primary) 20%, transparent); | hover active dark |
bg-primary/30 | background-color: color-mix(in oklab, var(--primary) 30%, transparent); | hover active dark |
bg-primary/50 | background-color: color-mix(in oklab, var(--primary) 50%, transparent); | hover active dark |
bg-primary/70 | background-color: color-mix(in oklab, var(--primary) 70%, transparent); | hover active dark |
bg-primary/80 | background-color: color-mix(in oklab, var(--primary) 80%, transparent); | hover active dark |
bg-primary/90 | background-color: color-mix(in oklab, var(--primary) 90%, transparent); | hover active dark |
bg-primary-foreground/5 | background-color: color-mix(in oklab, var(--primary-foreground) 5%, transparent); | hover active dark |
bg-primary-foreground/10 | background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent); | hover active dark |
bg-primary-foreground/20 | background-color: color-mix(in oklab, var(--primary-foreground) 20%, transparent); | hover active dark |
bg-primary-foreground/30 | background-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent); | hover active dark |
bg-primary-foreground/50 | background-color: color-mix(in oklab, var(--primary-foreground) 50%, transparent); | hover active dark |
bg-primary-foreground/70 | background-color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); | hover active dark |
bg-primary-foreground/80 | background-color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); | hover active dark |
bg-primary-foreground/90 | background-color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); | hover active dark |
bg-ring/5 | background-color: color-mix(in oklab, var(--ring) 5%, transparent); | hover active dark |
bg-ring/10 | background-color: color-mix(in oklab, var(--ring) 10%, transparent); | hover active dark |
bg-ring/20 | background-color: color-mix(in oklab, var(--ring) 20%, transparent); | hover active dark |
bg-ring/30 | background-color: color-mix(in oklab, var(--ring) 30%, transparent); | hover active dark |
bg-ring/50 | background-color: color-mix(in oklab, var(--ring) 50%, transparent); | hover active dark |
bg-ring/70 | background-color: color-mix(in oklab, var(--ring) 70%, transparent); | hover active dark |
bg-ring/80 | background-color: color-mix(in oklab, var(--ring) 80%, transparent); | hover active dark |
bg-ring/90 | background-color: color-mix(in oklab, var(--ring) 90%, transparent); | hover active dark |
bg-secondary/5 | background-color: color-mix(in oklab, var(--secondary) 5%, transparent); | hover active dark |
bg-secondary/10 | background-color: color-mix(in oklab, var(--secondary) 10%, transparent); | hover active dark |
bg-secondary/20 | background-color: color-mix(in oklab, var(--secondary) 20%, transparent); | hover active dark |
bg-secondary/30 | background-color: color-mix(in oklab, var(--secondary) 30%, transparent); | hover active dark |
bg-secondary/50 | background-color: color-mix(in oklab, var(--secondary) 50%, transparent); | hover active dark |
bg-secondary/70 | background-color: color-mix(in oklab, var(--secondary) 70%, transparent); | hover active dark |
bg-secondary/80 | background-color: color-mix(in oklab, var(--secondary) 80%, transparent); | hover active dark |
bg-secondary/90 | background-color: color-mix(in oklab, var(--secondary) 90%, transparent); | hover active dark |
bg-secondary-foreground/5 | background-color: color-mix(in oklab, var(--secondary-foreground) 5%, transparent); | hover active dark |
bg-secondary-foreground/10 | background-color: color-mix(in oklab, var(--secondary-foreground) 10%, transparent); | hover active dark |
bg-secondary-foreground/20 | background-color: color-mix(in oklab, var(--secondary-foreground) 20%, transparent); | hover active dark |
bg-secondary-foreground/30 | background-color: color-mix(in oklab, var(--secondary-foreground) 30%, transparent); | hover active dark |
bg-secondary-foreground/50 | background-color: color-mix(in oklab, var(--secondary-foreground) 50%, transparent); | hover active dark |
bg-secondary-foreground/70 | background-color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); | hover active dark |
bg-secondary-foreground/80 | background-color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent); | hover active dark |
bg-secondary-foreground/90 | background-color: color-mix(in oklab, var(--secondary-foreground) 90%, transparent); | hover active dark |
bg-accent/5 | background-color: color-mix(in oklab, var(--accent) 5%, transparent); | hover active dark |
bg-accent/10 | background-color: color-mix(in oklab, var(--accent) 10%, transparent); | hover active dark |
bg-accent/20 | background-color: color-mix(in oklab, var(--accent) 20%, transparent); | hover active dark |
bg-accent/30 | background-color: color-mix(in oklab, var(--accent) 30%, transparent); | hover active dark |
bg-accent/50 | background-color: color-mix(in oklab, var(--accent) 50%, transparent); | hover active dark |
bg-accent/70 | background-color: color-mix(in oklab, var(--accent) 70%, transparent); | hover active dark |
bg-accent/80 | background-color: color-mix(in oklab, var(--accent) 80%, transparent); | hover active dark |
bg-accent/90 | background-color: color-mix(in oklab, var(--accent) 90%, transparent); | hover active dark |
bg-accent-foreground/5 | background-color: color-mix(in oklab, var(--accent-foreground) 5%, transparent); | hover active dark |
bg-accent-foreground/10 | background-color: color-mix(in oklab, var(--accent-foreground) 10%, transparent); | hover active dark |
bg-accent-foreground/20 | background-color: color-mix(in oklab, var(--accent-foreground) 20%, transparent); | hover active dark |
bg-accent-foreground/30 | background-color: color-mix(in oklab, var(--accent-foreground) 30%, transparent); | hover active dark |
bg-accent-foreground/50 | background-color: color-mix(in oklab, var(--accent-foreground) 50%, transparent); | hover active dark |
bg-accent-foreground/70 | background-color: color-mix(in oklab, var(--accent-foreground) 70%, transparent); | hover active dark |
bg-accent-foreground/80 | background-color: color-mix(in oklab, var(--accent-foreground) 80%, transparent); | hover active dark |
bg-accent-foreground/90 | background-color: color-mix(in oklab, var(--accent-foreground) 90%, transparent); | hover active dark |
bg-success/5 | background-color: color-mix(in oklab, var(--success) 5%, transparent); | hover active dark |
bg-success/10 | background-color: color-mix(in oklab, var(--success) 10%, transparent); | hover active dark |
bg-success/20 | background-color: color-mix(in oklab, var(--success) 20%, transparent); | hover active dark |
bg-success/30 | background-color: color-mix(in oklab, var(--success) 30%, transparent); | hover active dark |
bg-success/50 | background-color: color-mix(in oklab, var(--success) 50%, transparent); | hover active dark |
bg-success/70 | background-color: color-mix(in oklab, var(--success) 70%, transparent); | hover active dark |
bg-success/80 | background-color: color-mix(in oklab, var(--success) 80%, transparent); | hover active dark |
bg-success/90 | background-color: color-mix(in oklab, var(--success) 90%, transparent); | hover active dark |
bg-success-foreground/5 | background-color: color-mix(in oklab, var(--success-foreground) 5%, transparent); | hover active dark |
bg-success-foreground/10 | background-color: color-mix(in oklab, var(--success-foreground) 10%, transparent); | hover active dark |
bg-success-foreground/20 | background-color: color-mix(in oklab, var(--success-foreground) 20%, transparent); | hover active dark |
bg-success-foreground/30 | background-color: color-mix(in oklab, var(--success-foreground) 30%, transparent); | hover active dark |
bg-success-foreground/50 | background-color: color-mix(in oklab, var(--success-foreground) 50%, transparent); | hover active dark |
bg-success-foreground/70 | background-color: color-mix(in oklab, var(--success-foreground) 70%, transparent); | hover active dark |
bg-success-foreground/80 | background-color: color-mix(in oklab, var(--success-foreground) 80%, transparent); | hover active dark |
bg-success-foreground/90 | background-color: color-mix(in oklab, var(--success-foreground) 90%, transparent); | hover active dark |
bg-warning/5 | background-color: color-mix(in oklab, var(--warning) 5%, transparent); | hover active dark |
bg-warning/10 | background-color: color-mix(in oklab, var(--warning) 10%, transparent); | hover active dark |
bg-warning/20 | background-color: color-mix(in oklab, var(--warning) 20%, transparent); | hover active dark |
bg-warning/30 | background-color: color-mix(in oklab, var(--warning) 30%, transparent); | hover active dark |
bg-warning/50 | background-color: color-mix(in oklab, var(--warning) 50%, transparent); | hover active dark |
bg-warning/70 | background-color: color-mix(in oklab, var(--warning) 70%, transparent); | hover active dark |
bg-warning/80 | background-color: color-mix(in oklab, var(--warning) 80%, transparent); | hover active dark |
bg-warning/90 | background-color: color-mix(in oklab, var(--warning) 90%, transparent); | hover active dark |
bg-warning-foreground/5 | background-color: color-mix(in oklab, var(--warning-foreground) 5%, transparent); | hover active dark |
bg-warning-foreground/10 | background-color: color-mix(in oklab, var(--warning-foreground) 10%, transparent); | hover active dark |
bg-warning-foreground/20 | background-color: color-mix(in oklab, var(--warning-foreground) 20%, transparent); | hover active dark |
bg-warning-foreground/30 | background-color: color-mix(in oklab, var(--warning-foreground) 30%, transparent); | hover active dark |
bg-warning-foreground/50 | background-color: color-mix(in oklab, var(--warning-foreground) 50%, transparent); | hover active dark |
bg-warning-foreground/70 | background-color: color-mix(in oklab, var(--warning-foreground) 70%, transparent); | hover active dark |
bg-warning-foreground/80 | background-color: color-mix(in oklab, var(--warning-foreground) 80%, transparent); | hover active dark |
bg-warning-foreground/90 | background-color: color-mix(in oklab, var(--warning-foreground) 90%, transparent); | hover active dark |
bg-danger/5 | background-color: color-mix(in oklab, var(--danger) 5%, transparent); | hover active dark |
bg-danger/10 | background-color: color-mix(in oklab, var(--danger) 10%, transparent); | hover active dark |
bg-danger/20 | background-color: color-mix(in oklab, var(--danger) 20%, transparent); | hover active dark |
bg-danger/30 | background-color: color-mix(in oklab, var(--danger) 30%, transparent); | hover active dark |
bg-danger/50 | background-color: color-mix(in oklab, var(--danger) 50%, transparent); | hover active dark |
bg-danger/70 | background-color: color-mix(in oklab, var(--danger) 70%, transparent); | hover active dark |
bg-danger/80 | background-color: color-mix(in oklab, var(--danger) 80%, transparent); | hover active dark |
bg-danger/90 | background-color: color-mix(in oklab, var(--danger) 90%, transparent); | hover active dark |
bg-danger-foreground/5 | background-color: color-mix(in oklab, var(--danger-foreground) 5%, transparent); | hover active dark |
bg-danger-foreground/10 | background-color: color-mix(in oklab, var(--danger-foreground) 10%, transparent); | hover active dark |
bg-danger-foreground/20 | background-color: color-mix(in oklab, var(--danger-foreground) 20%, transparent); | hover active dark |
bg-danger-foreground/30 | background-color: color-mix(in oklab, var(--danger-foreground) 30%, transparent); | hover active dark |
bg-danger-foreground/50 | background-color: color-mix(in oklab, var(--danger-foreground) 50%, transparent); | hover active dark |
bg-danger-foreground/70 | background-color: color-mix(in oklab, var(--danger-foreground) 70%, transparent); | hover active dark |
bg-danger-foreground/80 | background-color: color-mix(in oklab, var(--danger-foreground) 80%, transparent); | hover active dark |
bg-danger-foreground/90 | background-color: color-mix(in oklab, var(--danger-foreground) 90%, transparent); | hover active dark |
bg-info/5 | background-color: color-mix(in oklab, var(--info) 5%, transparent); | hover active dark |
bg-info/10 | background-color: color-mix(in oklab, var(--info) 10%, transparent); | hover active dark |
bg-info/20 | background-color: color-mix(in oklab, var(--info) 20%, transparent); | hover active dark |
bg-info/30 | background-color: color-mix(in oklab, var(--info) 30%, transparent); | hover active dark |
bg-info/50 | background-color: color-mix(in oklab, var(--info) 50%, transparent); | hover active dark |
bg-info/70 | background-color: color-mix(in oklab, var(--info) 70%, transparent); | hover active dark |
bg-info/80 | background-color: color-mix(in oklab, var(--info) 80%, transparent); | hover active dark |
bg-info/90 | background-color: color-mix(in oklab, var(--info) 90%, transparent); | hover active dark |
bg-info-foreground/5 | background-color: color-mix(in oklab, var(--info-foreground) 5%, transparent); | hover active dark |
bg-info-foreground/10 | background-color: color-mix(in oklab, var(--info-foreground) 10%, transparent); | hover active dark |
bg-info-foreground/20 | background-color: color-mix(in oklab, var(--info-foreground) 20%, transparent); | hover active dark |
bg-info-foreground/30 | background-color: color-mix(in oklab, var(--info-foreground) 30%, transparent); | hover active dark |
bg-info-foreground/50 | background-color: color-mix(in oklab, var(--info-foreground) 50%, transparent); | hover active dark |
bg-info-foreground/70 | background-color: color-mix(in oklab, var(--info-foreground) 70%, transparent); | hover active dark |
bg-info-foreground/80 | background-color: color-mix(in oklab, var(--info-foreground) 80%, transparent); | hover active dark |
bg-info-foreground/90 | background-color: color-mix(in oklab, var(--info-foreground) 90%, transparent); | hover active dark |
bg-white/5 | background-color: color-mix(in oklab, #fff 5%, transparent); | hover active dark |
bg-white/10 | background-color: color-mix(in oklab, #fff 10%, transparent); | hover active dark |
bg-white/20 | background-color: color-mix(in oklab, #fff 20%, transparent); | hover active dark |
bg-white/30 | background-color: color-mix(in oklab, #fff 30%, transparent); | hover active dark |
bg-white/50 | background-color: color-mix(in oklab, #fff 50%, transparent); | hover active dark |
bg-white/70 | background-color: color-mix(in oklab, #fff 70%, transparent); | hover active dark |
bg-white/80 | background-color: color-mix(in oklab, #fff 80%, transparent); | hover active dark |
bg-white/90 | background-color: color-mix(in oklab, #fff 90%, transparent); | hover active dark |
bg-black/5 | background-color: color-mix(in oklab, #000 5%, transparent); | hover active dark |
bg-black/10 | background-color: color-mix(in oklab, #000 10%, transparent); | hover active dark |
bg-black/20 | background-color: color-mix(in oklab, #000 20%, transparent); | hover active dark |
bg-black/30 | background-color: color-mix(in oklab, #000 30%, transparent); | hover active dark |
bg-black/50 | background-color: color-mix(in oklab, #000 50%, transparent); | hover active dark |
bg-black/70 | background-color: color-mix(in oklab, #000 70%, transparent); | hover active dark |
bg-black/80 | background-color: color-mix(in oklab, #000 80%, transparent); | hover active dark |
bg-black/90 | background-color: color-mix(in oklab, #000 90%, transparent); | hover active dark |
Border color 518
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-background | border-color: var(--background); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-foreground | border-color: var(--foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-surface | border-color: var(--surface); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-surface-2 | border-color: var(--surface-2); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-surface-3 | border-color: var(--surface-3); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-muted | border-color: var(--muted); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-muted-foreground | border-color: var(--muted-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-border | border-color: var(--border); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-primary | border-color: var(--primary); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-primary-foreground | border-color: var(--primary-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-ring | border-color: var(--ring); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-secondary | border-color: var(--secondary); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-secondary-foreground | border-color: var(--secondary-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-accent | border-color: var(--accent); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-accent-foreground | border-color: var(--accent-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-success | border-color: var(--success); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-success-foreground | border-color: var(--success-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-warning | border-color: var(--warning); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-warning-foreground | border-color: var(--warning-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-danger | border-color: var(--danger); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-danger-foreground | border-color: var(--danger-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-info | border-color: var(--info); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-info-foreground | border-color: var(--info-foreground); | hover focus focus-within focus-visible active disabled group-hover peer-checked first last odd even |
border-white | border-color: #fff; | hover group-hover dark |
border-black | border-color: #000; | hover group-hover dark |
border-transparent | border-color: transparent; | hover group-hover dark |
border-current | border-color: currentColor; | |
border-inherit | border-color: inherit; | |
border-slate-50 | border-color: var(--color-slate-50); | dark |
border-slate-100 | border-color: var(--color-slate-100); | dark |
border-slate-200 | border-color: var(--color-slate-200); | dark |
border-slate-300 | border-color: var(--color-slate-300); | dark |
border-slate-400 | border-color: var(--color-slate-400); | dark |
border-slate-500 | border-color: var(--color-slate-500); | hover group-hover dark |
border-slate-600 | border-color: var(--color-slate-600); | hover group-hover dark |
border-slate-700 | border-color: var(--color-slate-700); | hover group-hover dark |
border-slate-800 | border-color: var(--color-slate-800); | dark |
border-slate-900 | border-color: var(--color-slate-900); | dark |
border-slate-950 | border-color: var(--color-slate-950); | dark |
border-gray-50 | border-color: var(--color-gray-50); | dark |
border-gray-100 | border-color: var(--color-gray-100); | dark |
border-gray-200 | border-color: var(--color-gray-200); | dark |
border-gray-300 | border-color: var(--color-gray-300); | dark |
border-gray-400 | border-color: var(--color-gray-400); | dark |
border-gray-500 | border-color: var(--color-gray-500); | hover group-hover dark |
border-gray-600 | border-color: var(--color-gray-600); | hover group-hover dark |
border-gray-700 | border-color: var(--color-gray-700); | hover group-hover dark |
border-gray-800 | border-color: var(--color-gray-800); | dark |
border-gray-900 | border-color: var(--color-gray-900); | dark |
border-gray-950 | border-color: var(--color-gray-950); | dark |
border-zinc-50 | border-color: var(--color-zinc-50); | dark |
border-zinc-100 | border-color: var(--color-zinc-100); | dark |
border-zinc-200 | border-color: var(--color-zinc-200); | dark |
border-zinc-300 | border-color: var(--color-zinc-300); | dark |
border-zinc-400 | border-color: var(--color-zinc-400); | dark |
border-zinc-500 | border-color: var(--color-zinc-500); | hover group-hover dark |
border-zinc-600 | border-color: var(--color-zinc-600); | hover group-hover dark |
border-zinc-700 | border-color: var(--color-zinc-700); | hover group-hover dark |
border-zinc-800 | border-color: var(--color-zinc-800); | dark |
border-zinc-900 | border-color: var(--color-zinc-900); | dark |
border-zinc-950 | border-color: var(--color-zinc-950); | dark |
border-neutral-50 | border-color: var(--color-neutral-50); | dark |
border-neutral-100 | border-color: var(--color-neutral-100); | dark |
border-neutral-200 | border-color: var(--color-neutral-200); | dark |
border-neutral-300 | border-color: var(--color-neutral-300); | dark |
border-neutral-400 | border-color: var(--color-neutral-400); | dark |
border-neutral-500 | border-color: var(--color-neutral-500); | hover group-hover dark |
border-neutral-600 | border-color: var(--color-neutral-600); | hover group-hover dark |
border-neutral-700 | border-color: var(--color-neutral-700); | hover group-hover dark |
border-neutral-800 | border-color: var(--color-neutral-800); | dark |
border-neutral-900 | border-color: var(--color-neutral-900); | dark |
border-neutral-950 | border-color: var(--color-neutral-950); | dark |
border-stone-50 | border-color: var(--color-stone-50); | dark |
border-stone-100 | border-color: var(--color-stone-100); | dark |
border-stone-200 | border-color: var(--color-stone-200); | dark |
border-stone-300 | border-color: var(--color-stone-300); | dark |
border-stone-400 | border-color: var(--color-stone-400); | dark |
border-stone-500 | border-color: var(--color-stone-500); | hover group-hover dark |
border-stone-600 | border-color: var(--color-stone-600); | hover group-hover dark |
border-stone-700 | border-color: var(--color-stone-700); | hover group-hover dark |
border-stone-800 | border-color: var(--color-stone-800); | dark |
border-stone-900 | border-color: var(--color-stone-900); | dark |
border-stone-950 | border-color: var(--color-stone-950); | dark |
border-red-50 | border-color: var(--color-red-50); | |
border-red-100 | border-color: var(--color-red-100); | |
border-red-200 | border-color: var(--color-red-200); | |
border-red-300 | border-color: var(--color-red-300); | |
border-red-400 | border-color: var(--color-red-400); | |
border-red-500 | border-color: var(--color-red-500); | hover group-hover dark |
border-red-600 | border-color: var(--color-red-600); | hover group-hover dark |
border-red-700 | border-color: var(--color-red-700); | hover group-hover dark |
border-red-800 | border-color: var(--color-red-800); | |
border-red-900 | border-color: var(--color-red-900); | |
border-red-950 | border-color: var(--color-red-950); | |
border-orange-50 | border-color: var(--color-orange-50); | |
border-orange-100 | border-color: var(--color-orange-100); | |
border-orange-200 | border-color: var(--color-orange-200); | |
border-orange-300 | border-color: var(--color-orange-300); | |
border-orange-400 | border-color: var(--color-orange-400); | |
border-orange-500 | border-color: var(--color-orange-500); | hover group-hover dark |
border-orange-600 | border-color: var(--color-orange-600); | hover group-hover dark |
border-orange-700 | border-color: var(--color-orange-700); | hover group-hover dark |
border-orange-800 | border-color: var(--color-orange-800); | |
border-orange-900 | border-color: var(--color-orange-900); | |
border-orange-950 | border-color: var(--color-orange-950); | |
border-amber-50 | border-color: var(--color-amber-50); | |
border-amber-100 | border-color: var(--color-amber-100); | |
border-amber-200 | border-color: var(--color-amber-200); | |
border-amber-300 | border-color: var(--color-amber-300); | |
border-amber-400 | border-color: var(--color-amber-400); | |
border-amber-500 | border-color: var(--color-amber-500); | hover group-hover dark |
border-amber-600 | border-color: var(--color-amber-600); | hover group-hover dark |
border-amber-700 | border-color: var(--color-amber-700); | hover group-hover dark |
border-amber-800 | border-color: var(--color-amber-800); | |
border-amber-900 | border-color: var(--color-amber-900); | |
border-amber-950 | border-color: var(--color-amber-950); | |
border-yellow-50 | border-color: var(--color-yellow-50); | |
border-yellow-100 | border-color: var(--color-yellow-100); | |
border-yellow-200 | border-color: var(--color-yellow-200); | |
border-yellow-300 | border-color: var(--color-yellow-300); | |
border-yellow-400 | border-color: var(--color-yellow-400); | |
border-yellow-500 | border-color: var(--color-yellow-500); | hover group-hover dark |
border-yellow-600 | border-color: var(--color-yellow-600); | hover group-hover dark |
border-yellow-700 | border-color: var(--color-yellow-700); | hover group-hover dark |
border-yellow-800 | border-color: var(--color-yellow-800); | |
border-yellow-900 | border-color: var(--color-yellow-900); | |
border-yellow-950 | border-color: var(--color-yellow-950); | |
border-lime-50 | border-color: var(--color-lime-50); | |
border-lime-100 | border-color: var(--color-lime-100); | |
border-lime-200 | border-color: var(--color-lime-200); | |
border-lime-300 | border-color: var(--color-lime-300); | |
border-lime-400 | border-color: var(--color-lime-400); | |
border-lime-500 | border-color: var(--color-lime-500); | hover group-hover dark |
border-lime-600 | border-color: var(--color-lime-600); | hover group-hover dark |
border-lime-700 | border-color: var(--color-lime-700); | hover group-hover dark |
border-lime-800 | border-color: var(--color-lime-800); | |
border-lime-900 | border-color: var(--color-lime-900); | |
border-lime-950 | border-color: var(--color-lime-950); | |
border-green-50 | border-color: var(--color-green-50); | |
border-green-100 | border-color: var(--color-green-100); | |
border-green-200 | border-color: var(--color-green-200); | |
border-green-300 | border-color: var(--color-green-300); | |
border-green-400 | border-color: var(--color-green-400); | |
border-green-500 | border-color: var(--color-green-500); | hover group-hover dark |
border-green-600 | border-color: var(--color-green-600); | hover group-hover dark |
border-green-700 | border-color: var(--color-green-700); | hover group-hover dark |
border-green-800 | border-color: var(--color-green-800); | |
border-green-900 | border-color: var(--color-green-900); | |
border-green-950 | border-color: var(--color-green-950); | |
border-emerald-50 | border-color: var(--color-emerald-50); | |
border-emerald-100 | border-color: var(--color-emerald-100); | |
border-emerald-200 | border-color: var(--color-emerald-200); | |
border-emerald-300 | border-color: var(--color-emerald-300); | |
border-emerald-400 | border-color: var(--color-emerald-400); | |
border-emerald-500 | border-color: var(--color-emerald-500); | hover group-hover dark |
border-emerald-600 | border-color: var(--color-emerald-600); | hover group-hover dark |
border-emerald-700 | border-color: var(--color-emerald-700); | hover group-hover dark |
border-emerald-800 | border-color: var(--color-emerald-800); | |
border-emerald-900 | border-color: var(--color-emerald-900); | |
border-emerald-950 | border-color: var(--color-emerald-950); | |
border-teal-50 | border-color: var(--color-teal-50); | |
border-teal-100 | border-color: var(--color-teal-100); | |
border-teal-200 | border-color: var(--color-teal-200); | |
border-teal-300 | border-color: var(--color-teal-300); | |
border-teal-400 | border-color: var(--color-teal-400); | |
border-teal-500 | border-color: var(--color-teal-500); | hover group-hover dark |
border-teal-600 | border-color: var(--color-teal-600); | hover group-hover dark |
border-teal-700 | border-color: var(--color-teal-700); | hover group-hover dark |
border-teal-800 | border-color: var(--color-teal-800); | |
border-teal-900 | border-color: var(--color-teal-900); | |
border-teal-950 | border-color: var(--color-teal-950); | |
border-cyan-50 | border-color: var(--color-cyan-50); | |
border-cyan-100 | border-color: var(--color-cyan-100); | |
border-cyan-200 | border-color: var(--color-cyan-200); | |
border-cyan-300 | border-color: var(--color-cyan-300); | |
border-cyan-400 | border-color: var(--color-cyan-400); | |
border-cyan-500 | border-color: var(--color-cyan-500); | hover group-hover dark |
border-cyan-600 | border-color: var(--color-cyan-600); | hover group-hover dark |
border-cyan-700 | border-color: var(--color-cyan-700); | hover group-hover dark |
border-cyan-800 | border-color: var(--color-cyan-800); | |
border-cyan-900 | border-color: var(--color-cyan-900); | |
border-cyan-950 | border-color: var(--color-cyan-950); | |
border-sky-50 | border-color: var(--color-sky-50); | |
border-sky-100 | border-color: var(--color-sky-100); | |
border-sky-200 | border-color: var(--color-sky-200); | |
border-sky-300 | border-color: var(--color-sky-300); | |
border-sky-400 | border-color: var(--color-sky-400); | |
border-sky-500 | border-color: var(--color-sky-500); | hover group-hover dark |
border-sky-600 | border-color: var(--color-sky-600); | hover group-hover dark |
border-sky-700 | border-color: var(--color-sky-700); | hover group-hover dark |
border-sky-800 | border-color: var(--color-sky-800); | |
border-sky-900 | border-color: var(--color-sky-900); | |
border-sky-950 | border-color: var(--color-sky-950); | |
border-blue-50 | border-color: var(--color-blue-50); | |
border-blue-100 | border-color: var(--color-blue-100); | |
border-blue-200 | border-color: var(--color-blue-200); | |
border-blue-300 | border-color: var(--color-blue-300); | |
border-blue-400 | border-color: var(--color-blue-400); | |
border-blue-500 | border-color: var(--color-blue-500); | hover group-hover dark |
border-blue-600 | border-color: var(--color-blue-600); | hover group-hover dark |
border-blue-700 | border-color: var(--color-blue-700); | hover group-hover dark |
border-blue-800 | border-color: var(--color-blue-800); | |
border-blue-900 | border-color: var(--color-blue-900); | |
border-blue-950 | border-color: var(--color-blue-950); | |
border-indigo-50 | border-color: var(--color-indigo-50); | |
border-indigo-100 | border-color: var(--color-indigo-100); | |
border-indigo-200 | border-color: var(--color-indigo-200); | |
border-indigo-300 | border-color: var(--color-indigo-300); | |
border-indigo-400 | border-color: var(--color-indigo-400); | |
border-indigo-500 | border-color: var(--color-indigo-500); | hover group-hover dark |
border-indigo-600 | border-color: var(--color-indigo-600); | hover group-hover dark |
border-indigo-700 | border-color: var(--color-indigo-700); | hover group-hover dark |
border-indigo-800 | border-color: var(--color-indigo-800); | |
border-indigo-900 | border-color: var(--color-indigo-900); | |
border-indigo-950 | border-color: var(--color-indigo-950); | |
border-violet-50 | border-color: var(--color-violet-50); | |
border-violet-100 | border-color: var(--color-violet-100); | |
border-violet-200 | border-color: var(--color-violet-200); | |
border-violet-300 | border-color: var(--color-violet-300); | |
border-violet-400 | border-color: var(--color-violet-400); | |
border-violet-500 | border-color: var(--color-violet-500); | hover group-hover dark |
border-violet-600 | border-color: var(--color-violet-600); | hover group-hover dark |
border-violet-700 | border-color: var(--color-violet-700); | hover group-hover dark |
border-violet-800 | border-color: var(--color-violet-800); | |
border-violet-900 | border-color: var(--color-violet-900); | |
border-violet-950 | border-color: var(--color-violet-950); | |
border-purple-50 | border-color: var(--color-purple-50); | |
border-purple-100 | border-color: var(--color-purple-100); | |
border-purple-200 | border-color: var(--color-purple-200); | |
border-purple-300 | border-color: var(--color-purple-300); | |
border-purple-400 | border-color: var(--color-purple-400); | |
border-purple-500 | border-color: var(--color-purple-500); | hover group-hover dark |
border-purple-600 | border-color: var(--color-purple-600); | hover group-hover dark |
border-purple-700 | border-color: var(--color-purple-700); | hover group-hover dark |
border-purple-800 | border-color: var(--color-purple-800); | |
border-purple-900 | border-color: var(--color-purple-900); | |
border-purple-950 | border-color: var(--color-purple-950); | |
border-fuchsia-50 | border-color: var(--color-fuchsia-50); | |
border-fuchsia-100 | border-color: var(--color-fuchsia-100); | |
border-fuchsia-200 | border-color: var(--color-fuchsia-200); | |
border-fuchsia-300 | border-color: var(--color-fuchsia-300); | |
border-fuchsia-400 | border-color: var(--color-fuchsia-400); | |
border-fuchsia-500 | border-color: var(--color-fuchsia-500); | hover group-hover dark |
border-fuchsia-600 | border-color: var(--color-fuchsia-600); | hover group-hover dark |
border-fuchsia-700 | border-color: var(--color-fuchsia-700); | hover group-hover dark |
border-fuchsia-800 | border-color: var(--color-fuchsia-800); | |
border-fuchsia-900 | border-color: var(--color-fuchsia-900); | |
border-fuchsia-950 | border-color: var(--color-fuchsia-950); | |
border-pink-50 | border-color: var(--color-pink-50); | |
border-pink-100 | border-color: var(--color-pink-100); | |
border-pink-200 | border-color: var(--color-pink-200); | |
border-pink-300 | border-color: var(--color-pink-300); | |
border-pink-400 | border-color: var(--color-pink-400); | |
border-pink-500 | border-color: var(--color-pink-500); | hover group-hover dark |
border-pink-600 | border-color: var(--color-pink-600); | hover group-hover dark |
border-pink-700 | border-color: var(--color-pink-700); | hover group-hover dark |
border-pink-800 | border-color: var(--color-pink-800); | |
border-pink-900 | border-color: var(--color-pink-900); | |
border-pink-950 | border-color: var(--color-pink-950); | |
border-rose-50 | border-color: var(--color-rose-50); | |
border-rose-100 | border-color: var(--color-rose-100); | |
border-rose-200 | border-color: var(--color-rose-200); | |
border-rose-300 | border-color: var(--color-rose-300); | |
border-rose-400 | border-color: var(--color-rose-400); | |
border-rose-500 | border-color: var(--color-rose-500); | hover group-hover dark |
border-rose-600 | border-color: var(--color-rose-600); | hover group-hover dark |
border-rose-700 | border-color: var(--color-rose-700); | hover group-hover dark |
border-rose-800 | border-color: var(--color-rose-800); | |
border-rose-900 | border-color: var(--color-rose-900); | |
border-rose-950 | border-color: var(--color-rose-950); | |
border-slate | border-color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); | hover group-hover |
border-gray | border-color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); | hover group-hover |
border-zinc | border-color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); | hover group-hover |
border-neutral | border-color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); | hover group-hover |
border-stone | border-color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); | hover group-hover |
border-red | border-color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); | hover group-hover |
border-orange | border-color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); | hover group-hover |
border-amber | border-color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); | hover group-hover |
border-yellow | border-color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); | hover group-hover |
border-lime | border-color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); | hover group-hover |
border-green | border-color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); | hover group-hover |
border-emerald | border-color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); | hover group-hover |
border-teal | border-color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); | hover group-hover |
border-cyan | border-color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); | hover group-hover |
border-sky | border-color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); | hover group-hover |
border-blue | border-color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); | hover group-hover |
border-indigo | border-color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); | hover group-hover |
border-violet | border-color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); | hover group-hover |
border-purple | border-color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); | hover group-hover |
border-fuchsia | border-color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); | hover group-hover |
border-pink | border-color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); | hover group-hover |
border-rose | border-color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); | hover group-hover |
border-background/5 | border-color: color-mix(in oklab, var(--background) 5%, transparent); | |
border-background/10 | border-color: color-mix(in oklab, var(--background) 10%, transparent); | |
border-background/20 | border-color: color-mix(in oklab, var(--background) 20%, transparent); | |
border-background/30 | border-color: color-mix(in oklab, var(--background) 30%, transparent); | |
border-background/50 | border-color: color-mix(in oklab, var(--background) 50%, transparent); | |
border-background/70 | border-color: color-mix(in oklab, var(--background) 70%, transparent); | |
border-background/80 | border-color: color-mix(in oklab, var(--background) 80%, transparent); | |
border-background/90 | border-color: color-mix(in oklab, var(--background) 90%, transparent); | |
border-foreground/5 | border-color: color-mix(in oklab, var(--foreground) 5%, transparent); | |
border-foreground/10 | border-color: color-mix(in oklab, var(--foreground) 10%, transparent); | |
border-foreground/20 | border-color: color-mix(in oklab, var(--foreground) 20%, transparent); | |
border-foreground/30 | border-color: color-mix(in oklab, var(--foreground) 30%, transparent); | |
border-foreground/50 | border-color: color-mix(in oklab, var(--foreground) 50%, transparent); | |
border-foreground/70 | border-color: color-mix(in oklab, var(--foreground) 70%, transparent); | |
border-foreground/80 | border-color: color-mix(in oklab, var(--foreground) 80%, transparent); | |
border-foreground/90 | border-color: color-mix(in oklab, var(--foreground) 90%, transparent); | |
border-surface/5 | border-color: color-mix(in oklab, var(--surface) 5%, transparent); | |
border-surface/10 | border-color: color-mix(in oklab, var(--surface) 10%, transparent); | |
border-surface/20 | border-color: color-mix(in oklab, var(--surface) 20%, transparent); | |
border-surface/30 | border-color: color-mix(in oklab, var(--surface) 30%, transparent); | |
border-surface/50 | border-color: color-mix(in oklab, var(--surface) 50%, transparent); | |
border-surface/70 | border-color: color-mix(in oklab, var(--surface) 70%, transparent); | |
border-surface/80 | border-color: color-mix(in oklab, var(--surface) 80%, transparent); | |
border-surface/90 | border-color: color-mix(in oklab, var(--surface) 90%, transparent); | |
border-surface-2/5 | border-color: color-mix(in oklab, var(--surface-2) 5%, transparent); | |
border-surface-2/10 | border-color: color-mix(in oklab, var(--surface-2) 10%, transparent); | |
border-surface-2/20 | border-color: color-mix(in oklab, var(--surface-2) 20%, transparent); | |
border-surface-2/30 | border-color: color-mix(in oklab, var(--surface-2) 30%, transparent); | |
border-surface-2/50 | border-color: color-mix(in oklab, var(--surface-2) 50%, transparent); | |
border-surface-2/70 | border-color: color-mix(in oklab, var(--surface-2) 70%, transparent); | |
border-surface-2/80 | border-color: color-mix(in oklab, var(--surface-2) 80%, transparent); | |
border-surface-2/90 | border-color: color-mix(in oklab, var(--surface-2) 90%, transparent); | |
border-surface-3/5 | border-color: color-mix(in oklab, var(--surface-3) 5%, transparent); | |
border-surface-3/10 | border-color: color-mix(in oklab, var(--surface-3) 10%, transparent); | |
border-surface-3/20 | border-color: color-mix(in oklab, var(--surface-3) 20%, transparent); | |
border-surface-3/30 | border-color: color-mix(in oklab, var(--surface-3) 30%, transparent); | |
border-surface-3/50 | border-color: color-mix(in oklab, var(--surface-3) 50%, transparent); | |
border-surface-3/70 | border-color: color-mix(in oklab, var(--surface-3) 70%, transparent); | |
border-surface-3/80 | border-color: color-mix(in oklab, var(--surface-3) 80%, transparent); | |
border-surface-3/90 | border-color: color-mix(in oklab, var(--surface-3) 90%, transparent); | |
border-muted/5 | border-color: color-mix(in oklab, var(--muted) 5%, transparent); | |
border-muted/10 | border-color: color-mix(in oklab, var(--muted) 10%, transparent); | |
border-muted/20 | border-color: color-mix(in oklab, var(--muted) 20%, transparent); | |
border-muted/30 | border-color: color-mix(in oklab, var(--muted) 30%, transparent); | |
border-muted/50 | border-color: color-mix(in oklab, var(--muted) 50%, transparent); | |
border-muted/70 | border-color: color-mix(in oklab, var(--muted) 70%, transparent); | |
border-muted/80 | border-color: color-mix(in oklab, var(--muted) 80%, transparent); | |
border-muted/90 | border-color: color-mix(in oklab, var(--muted) 90%, transparent); | |
border-muted-foreground/5 | border-color: color-mix(in oklab, var(--muted-foreground) 5%, transparent); | |
border-muted-foreground/10 | border-color: color-mix(in oklab, var(--muted-foreground) 10%, transparent); | |
border-muted-foreground/20 | border-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent); | |
border-muted-foreground/30 | border-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); | |
border-muted-foreground/50 | border-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); | |
border-muted-foreground/70 | border-color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); | |
border-muted-foreground/80 | border-color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); | |
border-muted-foreground/90 | border-color: color-mix(in oklab, var(--muted-foreground) 90%, transparent); | |
border-border/5 | border-color: color-mix(in oklab, var(--border) 5%, transparent); | |
border-border/10 | border-color: color-mix(in oklab, var(--border) 10%, transparent); | |
border-border/20 | border-color: color-mix(in oklab, var(--border) 20%, transparent); | |
border-border/30 | border-color: color-mix(in oklab, var(--border) 30%, transparent); | |
border-border/50 | border-color: color-mix(in oklab, var(--border) 50%, transparent); | |
border-border/70 | border-color: color-mix(in oklab, var(--border) 70%, transparent); | |
border-border/80 | border-color: color-mix(in oklab, var(--border) 80%, transparent); | |
border-border/90 | border-color: color-mix(in oklab, var(--border) 90%, transparent); | |
border-primary/5 | border-color: color-mix(in oklab, var(--primary) 5%, transparent); | |
border-primary/10 | border-color: color-mix(in oklab, var(--primary) 10%, transparent); | |
border-primary/20 | border-color: color-mix(in oklab, var(--primary) 20%, transparent); | |
border-primary/30 | border-color: color-mix(in oklab, var(--primary) 30%, transparent); | |
border-primary/50 | border-color: color-mix(in oklab, var(--primary) 50%, transparent); | |
border-primary/70 | border-color: color-mix(in oklab, var(--primary) 70%, transparent); | |
border-primary/80 | border-color: color-mix(in oklab, var(--primary) 80%, transparent); | |
border-primary/90 | border-color: color-mix(in oklab, var(--primary) 90%, transparent); | |
border-primary-foreground/5 | border-color: color-mix(in oklab, var(--primary-foreground) 5%, transparent); | |
border-primary-foreground/10 | border-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent); | |
border-primary-foreground/20 | border-color: color-mix(in oklab, var(--primary-foreground) 20%, transparent); | |
border-primary-foreground/30 | border-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent); | |
border-primary-foreground/50 | border-color: color-mix(in oklab, var(--primary-foreground) 50%, transparent); | |
border-primary-foreground/70 | border-color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); | |
border-primary-foreground/80 | border-color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); | |
border-primary-foreground/90 | border-color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); | |
border-ring/5 | border-color: color-mix(in oklab, var(--ring) 5%, transparent); | |
border-ring/10 | border-color: color-mix(in oklab, var(--ring) 10%, transparent); | |
border-ring/20 | border-color: color-mix(in oklab, var(--ring) 20%, transparent); | |
border-ring/30 | border-color: color-mix(in oklab, var(--ring) 30%, transparent); | |
border-ring/50 | border-color: color-mix(in oklab, var(--ring) 50%, transparent); | |
border-ring/70 | border-color: color-mix(in oklab, var(--ring) 70%, transparent); | |
border-ring/80 | border-color: color-mix(in oklab, var(--ring) 80%, transparent); | |
border-ring/90 | border-color: color-mix(in oklab, var(--ring) 90%, transparent); | |
border-secondary/5 | border-color: color-mix(in oklab, var(--secondary) 5%, transparent); | |
border-secondary/10 | border-color: color-mix(in oklab, var(--secondary) 10%, transparent); | |
border-secondary/20 | border-color: color-mix(in oklab, var(--secondary) 20%, transparent); | |
border-secondary/30 | border-color: color-mix(in oklab, var(--secondary) 30%, transparent); | |
border-secondary/50 | border-color: color-mix(in oklab, var(--secondary) 50%, transparent); | |
border-secondary/70 | border-color: color-mix(in oklab, var(--secondary) 70%, transparent); | |
border-secondary/80 | border-color: color-mix(in oklab, var(--secondary) 80%, transparent); | |
border-secondary/90 | border-color: color-mix(in oklab, var(--secondary) 90%, transparent); | |
border-secondary-foreground/5 | border-color: color-mix(in oklab, var(--secondary-foreground) 5%, transparent); | |
border-secondary-foreground/10 | border-color: color-mix(in oklab, var(--secondary-foreground) 10%, transparent); | |
border-secondary-foreground/20 | border-color: color-mix(in oklab, var(--secondary-foreground) 20%, transparent); | |
border-secondary-foreground/30 | border-color: color-mix(in oklab, var(--secondary-foreground) 30%, transparent); | |
border-secondary-foreground/50 | border-color: color-mix(in oklab, var(--secondary-foreground) 50%, transparent); | |
border-secondary-foreground/70 | border-color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); | |
border-secondary-foreground/80 | border-color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent); | |
border-secondary-foreground/90 | border-color: color-mix(in oklab, var(--secondary-foreground) 90%, transparent); | |
border-accent/5 | border-color: color-mix(in oklab, var(--accent) 5%, transparent); | |
border-accent/10 | border-color: color-mix(in oklab, var(--accent) 10%, transparent); | |
border-accent/20 | border-color: color-mix(in oklab, var(--accent) 20%, transparent); | |
border-accent/30 | border-color: color-mix(in oklab, var(--accent) 30%, transparent); | |
border-accent/50 | border-color: color-mix(in oklab, var(--accent) 50%, transparent); | |
border-accent/70 | border-color: color-mix(in oklab, var(--accent) 70%, transparent); | |
border-accent/80 | border-color: color-mix(in oklab, var(--accent) 80%, transparent); | |
border-accent/90 | border-color: color-mix(in oklab, var(--accent) 90%, transparent); | |
border-accent-foreground/5 | border-color: color-mix(in oklab, var(--accent-foreground) 5%, transparent); | |
border-accent-foreground/10 | border-color: color-mix(in oklab, var(--accent-foreground) 10%, transparent); | |
border-accent-foreground/20 | border-color: color-mix(in oklab, var(--accent-foreground) 20%, transparent); | |
border-accent-foreground/30 | border-color: color-mix(in oklab, var(--accent-foreground) 30%, transparent); | |
border-accent-foreground/50 | border-color: color-mix(in oklab, var(--accent-foreground) 50%, transparent); | |
border-accent-foreground/70 | border-color: color-mix(in oklab, var(--accent-foreground) 70%, transparent); | |
border-accent-foreground/80 | border-color: color-mix(in oklab, var(--accent-foreground) 80%, transparent); | |
border-accent-foreground/90 | border-color: color-mix(in oklab, var(--accent-foreground) 90%, transparent); | |
border-success/5 | border-color: color-mix(in oklab, var(--success) 5%, transparent); | |
border-success/10 | border-color: color-mix(in oklab, var(--success) 10%, transparent); | |
border-success/20 | border-color: color-mix(in oklab, var(--success) 20%, transparent); | |
border-success/30 | border-color: color-mix(in oklab, var(--success) 30%, transparent); | |
border-success/50 | border-color: color-mix(in oklab, var(--success) 50%, transparent); | |
border-success/70 | border-color: color-mix(in oklab, var(--success) 70%, transparent); | |
border-success/80 | border-color: color-mix(in oklab, var(--success) 80%, transparent); | |
border-success/90 | border-color: color-mix(in oklab, var(--success) 90%, transparent); | |
border-success-foreground/5 | border-color: color-mix(in oklab, var(--success-foreground) 5%, transparent); | |
border-success-foreground/10 | border-color: color-mix(in oklab, var(--success-foreground) 10%, transparent); | |
border-success-foreground/20 | border-color: color-mix(in oklab, var(--success-foreground) 20%, transparent); | |
border-success-foreground/30 | border-color: color-mix(in oklab, var(--success-foreground) 30%, transparent); | |
border-success-foreground/50 | border-color: color-mix(in oklab, var(--success-foreground) 50%, transparent); | |
border-success-foreground/70 | border-color: color-mix(in oklab, var(--success-foreground) 70%, transparent); | |
border-success-foreground/80 | border-color: color-mix(in oklab, var(--success-foreground) 80%, transparent); | |
border-success-foreground/90 | border-color: color-mix(in oklab, var(--success-foreground) 90%, transparent); | |
border-warning/5 | border-color: color-mix(in oklab, var(--warning) 5%, transparent); | |
border-warning/10 | border-color: color-mix(in oklab, var(--warning) 10%, transparent); | |
border-warning/20 | border-color: color-mix(in oklab, var(--warning) 20%, transparent); | |
border-warning/30 | border-color: color-mix(in oklab, var(--warning) 30%, transparent); | |
border-warning/50 | border-color: color-mix(in oklab, var(--warning) 50%, transparent); | |
border-warning/70 | border-color: color-mix(in oklab, var(--warning) 70%, transparent); | |
border-warning/80 | border-color: color-mix(in oklab, var(--warning) 80%, transparent); | |
border-warning/90 | border-color: color-mix(in oklab, var(--warning) 90%, transparent); | |
border-warning-foreground/5 | border-color: color-mix(in oklab, var(--warning-foreground) 5%, transparent); | |
border-warning-foreground/10 | border-color: color-mix(in oklab, var(--warning-foreground) 10%, transparent); | |
border-warning-foreground/20 | border-color: color-mix(in oklab, var(--warning-foreground) 20%, transparent); | |
border-warning-foreground/30 | border-color: color-mix(in oklab, var(--warning-foreground) 30%, transparent); | |
border-warning-foreground/50 | border-color: color-mix(in oklab, var(--warning-foreground) 50%, transparent); | |
border-warning-foreground/70 | border-color: color-mix(in oklab, var(--warning-foreground) 70%, transparent); | |
border-warning-foreground/80 | border-color: color-mix(in oklab, var(--warning-foreground) 80%, transparent); | |
border-warning-foreground/90 | border-color: color-mix(in oklab, var(--warning-foreground) 90%, transparent); | |
border-danger/5 | border-color: color-mix(in oklab, var(--danger) 5%, transparent); | |
border-danger/10 | border-color: color-mix(in oklab, var(--danger) 10%, transparent); | |
border-danger/20 | border-color: color-mix(in oklab, var(--danger) 20%, transparent); | |
border-danger/30 | border-color: color-mix(in oklab, var(--danger) 30%, transparent); | |
border-danger/50 | border-color: color-mix(in oklab, var(--danger) 50%, transparent); | |
border-danger/70 | border-color: color-mix(in oklab, var(--danger) 70%, transparent); | |
border-danger/80 | border-color: color-mix(in oklab, var(--danger) 80%, transparent); | |
border-danger/90 | border-color: color-mix(in oklab, var(--danger) 90%, transparent); | |
border-danger-foreground/5 | border-color: color-mix(in oklab, var(--danger-foreground) 5%, transparent); | |
border-danger-foreground/10 | border-color: color-mix(in oklab, var(--danger-foreground) 10%, transparent); | |
border-danger-foreground/20 | border-color: color-mix(in oklab, var(--danger-foreground) 20%, transparent); | |
border-danger-foreground/30 | border-color: color-mix(in oklab, var(--danger-foreground) 30%, transparent); | |
border-danger-foreground/50 | border-color: color-mix(in oklab, var(--danger-foreground) 50%, transparent); | |
border-danger-foreground/70 | border-color: color-mix(in oklab, var(--danger-foreground) 70%, transparent); | |
border-danger-foreground/80 | border-color: color-mix(in oklab, var(--danger-foreground) 80%, transparent); | |
border-danger-foreground/90 | border-color: color-mix(in oklab, var(--danger-foreground) 90%, transparent); | |
border-info/5 | border-color: color-mix(in oklab, var(--info) 5%, transparent); | |
border-info/10 | border-color: color-mix(in oklab, var(--info) 10%, transparent); | |
border-info/20 | border-color: color-mix(in oklab, var(--info) 20%, transparent); | |
border-info/30 | border-color: color-mix(in oklab, var(--info) 30%, transparent); | |
border-info/50 | border-color: color-mix(in oklab, var(--info) 50%, transparent); | |
border-info/70 | border-color: color-mix(in oklab, var(--info) 70%, transparent); | |
border-info/80 | border-color: color-mix(in oklab, var(--info) 80%, transparent); | |
border-info/90 | border-color: color-mix(in oklab, var(--info) 90%, transparent); | |
border-info-foreground/5 | border-color: color-mix(in oklab, var(--info-foreground) 5%, transparent); | |
border-info-foreground/10 | border-color: color-mix(in oklab, var(--info-foreground) 10%, transparent); | |
border-info-foreground/20 | border-color: color-mix(in oklab, var(--info-foreground) 20%, transparent); | |
border-info-foreground/30 | border-color: color-mix(in oklab, var(--info-foreground) 30%, transparent); | |
border-info-foreground/50 | border-color: color-mix(in oklab, var(--info-foreground) 50%, transparent); | |
border-info-foreground/70 | border-color: color-mix(in oklab, var(--info-foreground) 70%, transparent); | |
border-info-foreground/80 | border-color: color-mix(in oklab, var(--info-foreground) 80%, transparent); | |
border-info-foreground/90 | border-color: color-mix(in oklab, var(--info-foreground) 90%, transparent); | |
border-white/5 | border-color: color-mix(in oklab, #fff 5%, transparent); | hover active dark |
border-white/10 | border-color: color-mix(in oklab, #fff 10%, transparent); | hover active dark |
border-white/20 | border-color: color-mix(in oklab, #fff 20%, transparent); | hover active dark |
border-white/30 | border-color: color-mix(in oklab, #fff 30%, transparent); | hover active dark |
border-white/50 | border-color: color-mix(in oklab, #fff 50%, transparent); | hover active dark |
border-white/70 | border-color: color-mix(in oklab, #fff 70%, transparent); | hover active dark |
border-white/80 | border-color: color-mix(in oklab, #fff 80%, transparent); | hover active dark |
border-white/90 | border-color: color-mix(in oklab, #fff 90%, transparent); | hover active dark |
border-black/5 | border-color: color-mix(in oklab, #000 5%, transparent); | hover active dark |
border-black/10 | border-color: color-mix(in oklab, #000 10%, transparent); | hover active dark |
border-black/20 | border-color: color-mix(in oklab, #000 20%, transparent); | hover active dark |
border-black/30 | border-color: color-mix(in oklab, #000 30%, transparent); | hover active dark |
border-black/50 | border-color: color-mix(in oklab, #000 50%, transparent); | hover active dark |
border-black/70 | border-color: color-mix(in oklab, #000 70%, transparent); | hover active dark |
border-black/80 | border-color: color-mix(in oklab, #000 80%, transparent); | hover active dark |
border-black/90 | border-color: color-mix(in oklab, #000 90%, transparent); | hover active dark |
divide-background | border-color: var(--background); | |
divide-foreground | border-color: var(--foreground); | |
divide-surface | border-color: var(--surface); | |
divide-surface-2 | border-color: var(--surface-2); | |
divide-surface-3 | border-color: var(--surface-3); | |
divide-muted | border-color: var(--muted); | |
divide-muted-foreground | border-color: var(--muted-foreground); | |
divide-border | border-color: var(--border); | |
divide-primary | border-color: var(--primary); | |
divide-primary-foreground | border-color: var(--primary-foreground); | |
divide-ring | border-color: var(--ring); | |
divide-secondary | border-color: var(--secondary); | |
divide-secondary-foreground | border-color: var(--secondary-foreground); | |
divide-accent | border-color: var(--accent); | |
divide-accent-foreground | border-color: var(--accent-foreground); | |
divide-success | border-color: var(--success); | |
divide-success-foreground | border-color: var(--success-foreground); | |
divide-warning | border-color: var(--warning); | |
divide-warning-foreground | border-color: var(--warning-foreground); | |
divide-danger | border-color: var(--danger); | |
divide-danger-foreground | border-color: var(--danger-foreground); | |
divide-info | border-color: var(--info); | |
divide-info-foreground | border-color: var(--info-foreground); | |
divide-white | border-color: #fff; | |
divide-black | border-color: #000; | |
divide-transparent | border-color: transparent; |
Ring color 116
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
ring-background | --m-ring-color: var(--background); | focus focus-within focus-visible |
ring-foreground | --m-ring-color: var(--foreground); | focus focus-within focus-visible |
ring-surface | --m-ring-color: var(--surface); | focus focus-within focus-visible |
ring-surface-2 | --m-ring-color: var(--surface-2); | focus focus-within focus-visible |
ring-surface-3 | --m-ring-color: var(--surface-3); | focus focus-within focus-visible |
ring-muted | --m-ring-color: var(--muted); | focus focus-within focus-visible |
ring-muted-foreground | --m-ring-color: var(--muted-foreground); | focus focus-within focus-visible |
ring-border | --m-ring-color: var(--border); | focus focus-within focus-visible |
ring-primary | --m-ring-color: var(--primary); | focus focus-within focus-visible |
ring-primary-foreground | --m-ring-color: var(--primary-foreground); | focus focus-within focus-visible |
ring-ring | --m-ring-color: var(--ring); | focus focus-within focus-visible |
ring-secondary | --m-ring-color: var(--secondary); | focus focus-within focus-visible |
ring-secondary-foreground | --m-ring-color: var(--secondary-foreground); | focus focus-within focus-visible |
ring-accent | --m-ring-color: var(--accent); | focus focus-within focus-visible |
ring-accent-foreground | --m-ring-color: var(--accent-foreground); | focus focus-within focus-visible |
ring-success | --m-ring-color: var(--success); | focus focus-within focus-visible |
ring-success-foreground | --m-ring-color: var(--success-foreground); | focus focus-within focus-visible |
ring-warning | --m-ring-color: var(--warning); | focus focus-within focus-visible |
ring-warning-foreground | --m-ring-color: var(--warning-foreground); | focus focus-within focus-visible |
ring-danger | --m-ring-color: var(--danger); | focus focus-within focus-visible |
ring-danger-foreground | --m-ring-color: var(--danger-foreground); | focus focus-within focus-visible |
ring-info | --m-ring-color: var(--info); | focus focus-within focus-visible |
ring-info-foreground | --m-ring-color: var(--info-foreground); | focus focus-within focus-visible |
ring-white | --m-ring-color: #fff; | |
ring-black | --m-ring-color: #000; | |
ring-transparent | --m-ring-color: transparent; | |
ring-current | --m-ring-color: currentColor; | |
ring-inherit | --m-ring-color: inherit; | |
ring-slate-400 | --m-ring-color: var(--color-slate-400); | |
ring-slate-500 | --m-ring-color: var(--color-slate-500); | focus focus-within focus-visible |
ring-slate-600 | --m-ring-color: var(--color-slate-600); | |
ring-gray-400 | --m-ring-color: var(--color-gray-400); | |
ring-gray-500 | --m-ring-color: var(--color-gray-500); | focus focus-within focus-visible |
ring-gray-600 | --m-ring-color: var(--color-gray-600); | |
ring-zinc-400 | --m-ring-color: var(--color-zinc-400); | |
ring-zinc-500 | --m-ring-color: var(--color-zinc-500); | focus focus-within focus-visible |
ring-zinc-600 | --m-ring-color: var(--color-zinc-600); | |
ring-neutral-400 | --m-ring-color: var(--color-neutral-400); | |
ring-neutral-500 | --m-ring-color: var(--color-neutral-500); | focus focus-within focus-visible |
ring-neutral-600 | --m-ring-color: var(--color-neutral-600); | |
ring-stone-400 | --m-ring-color: var(--color-stone-400); | |
ring-stone-500 | --m-ring-color: var(--color-stone-500); | focus focus-within focus-visible |
ring-stone-600 | --m-ring-color: var(--color-stone-600); | |
ring-red-400 | --m-ring-color: var(--color-red-400); | |
ring-red-500 | --m-ring-color: var(--color-red-500); | focus focus-within focus-visible |
ring-red-600 | --m-ring-color: var(--color-red-600); | |
ring-orange-400 | --m-ring-color: var(--color-orange-400); | |
ring-orange-500 | --m-ring-color: var(--color-orange-500); | focus focus-within focus-visible |
ring-orange-600 | --m-ring-color: var(--color-orange-600); | |
ring-amber-400 | --m-ring-color: var(--color-amber-400); | |
ring-amber-500 | --m-ring-color: var(--color-amber-500); | focus focus-within focus-visible |
ring-amber-600 | --m-ring-color: var(--color-amber-600); | |
ring-yellow-400 | --m-ring-color: var(--color-yellow-400); | |
ring-yellow-500 | --m-ring-color: var(--color-yellow-500); | focus focus-within focus-visible |
ring-yellow-600 | --m-ring-color: var(--color-yellow-600); | |
ring-lime-400 | --m-ring-color: var(--color-lime-400); | |
ring-lime-500 | --m-ring-color: var(--color-lime-500); | focus focus-within focus-visible |
ring-lime-600 | --m-ring-color: var(--color-lime-600); | |
ring-green-400 | --m-ring-color: var(--color-green-400); | |
ring-green-500 | --m-ring-color: var(--color-green-500); | focus focus-within focus-visible |
ring-green-600 | --m-ring-color: var(--color-green-600); | |
ring-emerald-400 | --m-ring-color: var(--color-emerald-400); | |
ring-emerald-500 | --m-ring-color: var(--color-emerald-500); | focus focus-within focus-visible |
ring-emerald-600 | --m-ring-color: var(--color-emerald-600); | |
ring-teal-400 | --m-ring-color: var(--color-teal-400); | |
ring-teal-500 | --m-ring-color: var(--color-teal-500); | focus focus-within focus-visible |
ring-teal-600 | --m-ring-color: var(--color-teal-600); | |
ring-cyan-400 | --m-ring-color: var(--color-cyan-400); | |
ring-cyan-500 | --m-ring-color: var(--color-cyan-500); | focus focus-within focus-visible |
ring-cyan-600 | --m-ring-color: var(--color-cyan-600); | |
ring-sky-400 | --m-ring-color: var(--color-sky-400); | |
ring-sky-500 | --m-ring-color: var(--color-sky-500); | focus focus-within focus-visible |
ring-sky-600 | --m-ring-color: var(--color-sky-600); | |
ring-blue-400 | --m-ring-color: var(--color-blue-400); | |
ring-blue-500 | --m-ring-color: var(--color-blue-500); | focus focus-within focus-visible |
ring-blue-600 | --m-ring-color: var(--color-blue-600); | |
ring-indigo-400 | --m-ring-color: var(--color-indigo-400); | |
ring-indigo-500 | --m-ring-color: var(--color-indigo-500); | focus focus-within focus-visible |
ring-indigo-600 | --m-ring-color: var(--color-indigo-600); | |
ring-violet-400 | --m-ring-color: var(--color-violet-400); | |
ring-violet-500 | --m-ring-color: var(--color-violet-500); | focus focus-within focus-visible |
ring-violet-600 | --m-ring-color: var(--color-violet-600); | |
ring-purple-400 | --m-ring-color: var(--color-purple-400); | |
ring-purple-500 | --m-ring-color: var(--color-purple-500); | focus focus-within focus-visible |
ring-purple-600 | --m-ring-color: var(--color-purple-600); | |
ring-fuchsia-400 | --m-ring-color: var(--color-fuchsia-400); | |
ring-fuchsia-500 | --m-ring-color: var(--color-fuchsia-500); | focus focus-within focus-visible |
ring-fuchsia-600 | --m-ring-color: var(--color-fuchsia-600); | |
ring-pink-400 | --m-ring-color: var(--color-pink-400); | |
ring-pink-500 | --m-ring-color: var(--color-pink-500); | focus focus-within focus-visible |
ring-pink-600 | --m-ring-color: var(--color-pink-600); | |
ring-rose-400 | --m-ring-color: var(--color-rose-400); | |
ring-rose-500 | --m-ring-color: var(--color-rose-500); | focus focus-within focus-visible |
ring-rose-600 | --m-ring-color: var(--color-rose-600); | |
ring-slate | --m-ring-color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); | |
ring-gray | --m-ring-color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); | |
ring-zinc | --m-ring-color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); | |
ring-neutral | --m-ring-color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); | |
ring-stone | --m-ring-color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); | |
ring-red | --m-ring-color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); | |
ring-orange | --m-ring-color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); | |
ring-amber | --m-ring-color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); | |
ring-yellow | --m-ring-color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); | |
ring-lime | --m-ring-color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); | |
ring-green | --m-ring-color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); | |
ring-emerald | --m-ring-color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); | |
ring-teal | --m-ring-color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); | |
ring-cyan | --m-ring-color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); | |
ring-sky | --m-ring-color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); | |
ring-blue | --m-ring-color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); | |
ring-indigo | --m-ring-color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); | |
ring-violet | --m-ring-color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); | |
ring-purple | --m-ring-color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); | |
ring-fuchsia | --m-ring-color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); | |
ring-pink | --m-ring-color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); | |
ring-rose | --m-ring-color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Outline color 116
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
outline-background | outline-color: var(--background); | focus focus-within focus-visible forced-colors |
outline-foreground | outline-color: var(--foreground); | focus focus-within focus-visible forced-colors |
outline-surface | outline-color: var(--surface); | focus focus-within focus-visible forced-colors |
outline-surface-2 | outline-color: var(--surface-2); | focus focus-within focus-visible forced-colors |
outline-surface-3 | outline-color: var(--surface-3); | focus focus-within focus-visible forced-colors |
outline-muted | outline-color: var(--muted); | focus focus-within focus-visible forced-colors |
outline-muted-foreground | outline-color: var(--muted-foreground); | focus focus-within focus-visible forced-colors |
outline-border | outline-color: var(--border); | focus focus-within focus-visible forced-colors |
outline-primary | outline-color: var(--primary); | focus focus-within focus-visible forced-colors |
outline-primary-foreground | outline-color: var(--primary-foreground); | focus focus-within focus-visible forced-colors |
outline-ring | outline-color: var(--ring); | focus focus-within focus-visible forced-colors |
outline-secondary | outline-color: var(--secondary); | focus focus-within focus-visible forced-colors |
outline-secondary-foreground | outline-color: var(--secondary-foreground); | focus focus-within focus-visible forced-colors |
outline-accent | outline-color: var(--accent); | focus focus-within focus-visible forced-colors |
outline-accent-foreground | outline-color: var(--accent-foreground); | focus focus-within focus-visible forced-colors |
outline-success | outline-color: var(--success); | focus focus-within focus-visible forced-colors |
outline-success-foreground | outline-color: var(--success-foreground); | focus focus-within focus-visible forced-colors |
outline-warning | outline-color: var(--warning); | focus focus-within focus-visible forced-colors |
outline-warning-foreground | outline-color: var(--warning-foreground); | focus focus-within focus-visible forced-colors |
outline-danger | outline-color: var(--danger); | focus focus-within focus-visible forced-colors |
outline-danger-foreground | outline-color: var(--danger-foreground); | focus focus-within focus-visible forced-colors |
outline-info | outline-color: var(--info); | focus focus-within focus-visible forced-colors |
outline-info-foreground | outline-color: var(--info-foreground); | focus focus-within focus-visible forced-colors |
outline-white | outline-color: #fff; | forced-colors |
outline-black | outline-color: #000; | forced-colors |
outline-transparent | outline-color: transparent; | forced-colors |
outline-current | outline-color: currentColor; | forced-colors |
outline-inherit | outline-color: inherit; | forced-colors |
outline-slate-400 | outline-color: var(--color-slate-400); | forced-colors |
outline-slate-500 | outline-color: var(--color-slate-500); | forced-colors |
outline-slate-600 | outline-color: var(--color-slate-600); | forced-colors |
outline-gray-400 | outline-color: var(--color-gray-400); | forced-colors |
outline-gray-500 | outline-color: var(--color-gray-500); | forced-colors |
outline-gray-600 | outline-color: var(--color-gray-600); | forced-colors |
outline-zinc-400 | outline-color: var(--color-zinc-400); | forced-colors |
outline-zinc-500 | outline-color: var(--color-zinc-500); | forced-colors |
outline-zinc-600 | outline-color: var(--color-zinc-600); | forced-colors |
outline-neutral-400 | outline-color: var(--color-neutral-400); | forced-colors |
outline-neutral-500 | outline-color: var(--color-neutral-500); | forced-colors |
outline-neutral-600 | outline-color: var(--color-neutral-600); | forced-colors |
outline-stone-400 | outline-color: var(--color-stone-400); | forced-colors |
outline-stone-500 | outline-color: var(--color-stone-500); | forced-colors |
outline-stone-600 | outline-color: var(--color-stone-600); | forced-colors |
outline-red-400 | outline-color: var(--color-red-400); | forced-colors |
outline-red-500 | outline-color: var(--color-red-500); | forced-colors |
outline-red-600 | outline-color: var(--color-red-600); | forced-colors |
outline-orange-400 | outline-color: var(--color-orange-400); | forced-colors |
outline-orange-500 | outline-color: var(--color-orange-500); | forced-colors |
outline-orange-600 | outline-color: var(--color-orange-600); | forced-colors |
outline-amber-400 | outline-color: var(--color-amber-400); | forced-colors |
outline-amber-500 | outline-color: var(--color-amber-500); | forced-colors |
outline-amber-600 | outline-color: var(--color-amber-600); | forced-colors |
outline-yellow-400 | outline-color: var(--color-yellow-400); | forced-colors |
outline-yellow-500 | outline-color: var(--color-yellow-500); | forced-colors |
outline-yellow-600 | outline-color: var(--color-yellow-600); | forced-colors |
outline-lime-400 | outline-color: var(--color-lime-400); | forced-colors |
outline-lime-500 | outline-color: var(--color-lime-500); | forced-colors |
outline-lime-600 | outline-color: var(--color-lime-600); | forced-colors |
outline-green-400 | outline-color: var(--color-green-400); | forced-colors |
outline-green-500 | outline-color: var(--color-green-500); | forced-colors |
outline-green-600 | outline-color: var(--color-green-600); | forced-colors |
outline-emerald-400 | outline-color: var(--color-emerald-400); | forced-colors |
outline-emerald-500 | outline-color: var(--color-emerald-500); | forced-colors |
outline-emerald-600 | outline-color: var(--color-emerald-600); | forced-colors |
outline-teal-400 | outline-color: var(--color-teal-400); | forced-colors |
outline-teal-500 | outline-color: var(--color-teal-500); | forced-colors |
outline-teal-600 | outline-color: var(--color-teal-600); | forced-colors |
outline-cyan-400 | outline-color: var(--color-cyan-400); | forced-colors |
outline-cyan-500 | outline-color: var(--color-cyan-500); | forced-colors |
outline-cyan-600 | outline-color: var(--color-cyan-600); | forced-colors |
outline-sky-400 | outline-color: var(--color-sky-400); | forced-colors |
outline-sky-500 | outline-color: var(--color-sky-500); | forced-colors |
outline-sky-600 | outline-color: var(--color-sky-600); | forced-colors |
outline-blue-400 | outline-color: var(--color-blue-400); | forced-colors |
outline-blue-500 | outline-color: var(--color-blue-500); | forced-colors |
outline-blue-600 | outline-color: var(--color-blue-600); | forced-colors |
outline-indigo-400 | outline-color: var(--color-indigo-400); | forced-colors |
outline-indigo-500 | outline-color: var(--color-indigo-500); | forced-colors |
outline-indigo-600 | outline-color: var(--color-indigo-600); | forced-colors |
outline-violet-400 | outline-color: var(--color-violet-400); | forced-colors |
outline-violet-500 | outline-color: var(--color-violet-500); | forced-colors |
outline-violet-600 | outline-color: var(--color-violet-600); | forced-colors |
outline-purple-400 | outline-color: var(--color-purple-400); | forced-colors |
outline-purple-500 | outline-color: var(--color-purple-500); | forced-colors |
outline-purple-600 | outline-color: var(--color-purple-600); | forced-colors |
outline-fuchsia-400 | outline-color: var(--color-fuchsia-400); | forced-colors |
outline-fuchsia-500 | outline-color: var(--color-fuchsia-500); | forced-colors |
outline-fuchsia-600 | outline-color: var(--color-fuchsia-600); | forced-colors |
outline-pink-400 | outline-color: var(--color-pink-400); | forced-colors |
outline-pink-500 | outline-color: var(--color-pink-500); | forced-colors |
outline-pink-600 | outline-color: var(--color-pink-600); | forced-colors |
outline-rose-400 | outline-color: var(--color-rose-400); | forced-colors |
outline-rose-500 | outline-color: var(--color-rose-500); | forced-colors |
outline-rose-600 | outline-color: var(--color-rose-600); | forced-colors |
outline-slate | outline-color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); | forced-colors |
outline-gray | outline-color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); | forced-colors |
outline-zinc | outline-color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); | forced-colors |
outline-neutral | outline-color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); | forced-colors |
outline-stone | outline-color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); | forced-colors |
outline-red | outline-color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); | forced-colors |
outline-orange | outline-color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); | forced-colors |
outline-amber | outline-color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); | forced-colors |
outline-yellow | outline-color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); | forced-colors |
outline-lime | outline-color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); | forced-colors |
outline-green | outline-color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); | forced-colors |
outline-emerald | outline-color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); | forced-colors |
outline-teal | outline-color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); | forced-colors |
outline-cyan | outline-color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); | forced-colors |
outline-sky | outline-color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); | forced-colors |
outline-blue | outline-color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); | forced-colors |
outline-indigo | outline-color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); | forced-colors |
outline-violet | outline-color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); | forced-colors |
outline-purple | outline-color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); | forced-colors |
outline-fuchsia | outline-color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); | forced-colors |
outline-pink | outline-color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); | forced-colors |
outline-rose | outline-color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); | forced-colors |
Text decoration color 116
Variants: none
| Class | CSS |
|---|---|
decoration-background | text-decoration-color: var(--background); |
decoration-foreground | text-decoration-color: var(--foreground); |
decoration-surface | text-decoration-color: var(--surface); |
decoration-surface-2 | text-decoration-color: var(--surface-2); |
decoration-surface-3 | text-decoration-color: var(--surface-3); |
decoration-muted | text-decoration-color: var(--muted); |
decoration-muted-foreground | text-decoration-color: var(--muted-foreground); |
decoration-border | text-decoration-color: var(--border); |
decoration-primary | text-decoration-color: var(--primary); |
decoration-primary-foreground | text-decoration-color: var(--primary-foreground); |
decoration-ring | text-decoration-color: var(--ring); |
decoration-secondary | text-decoration-color: var(--secondary); |
decoration-secondary-foreground | text-decoration-color: var(--secondary-foreground); |
decoration-accent | text-decoration-color: var(--accent); |
decoration-accent-foreground | text-decoration-color: var(--accent-foreground); |
decoration-success | text-decoration-color: var(--success); |
decoration-success-foreground | text-decoration-color: var(--success-foreground); |
decoration-warning | text-decoration-color: var(--warning); |
decoration-warning-foreground | text-decoration-color: var(--warning-foreground); |
decoration-danger | text-decoration-color: var(--danger); |
decoration-danger-foreground | text-decoration-color: var(--danger-foreground); |
decoration-info | text-decoration-color: var(--info); |
decoration-info-foreground | text-decoration-color: var(--info-foreground); |
decoration-white | text-decoration-color: #fff; |
decoration-black | text-decoration-color: #000; |
decoration-transparent | text-decoration-color: transparent; |
decoration-current | text-decoration-color: currentColor; |
decoration-inherit | text-decoration-color: inherit; |
decoration-slate-400 | text-decoration-color: var(--color-slate-400); |
decoration-slate-500 | text-decoration-color: var(--color-slate-500); |
decoration-slate-600 | text-decoration-color: var(--color-slate-600); |
decoration-gray-400 | text-decoration-color: var(--color-gray-400); |
decoration-gray-500 | text-decoration-color: var(--color-gray-500); |
decoration-gray-600 | text-decoration-color: var(--color-gray-600); |
decoration-zinc-400 | text-decoration-color: var(--color-zinc-400); |
decoration-zinc-500 | text-decoration-color: var(--color-zinc-500); |
decoration-zinc-600 | text-decoration-color: var(--color-zinc-600); |
decoration-neutral-400 | text-decoration-color: var(--color-neutral-400); |
decoration-neutral-500 | text-decoration-color: var(--color-neutral-500); |
decoration-neutral-600 | text-decoration-color: var(--color-neutral-600); |
decoration-stone-400 | text-decoration-color: var(--color-stone-400); |
decoration-stone-500 | text-decoration-color: var(--color-stone-500); |
decoration-stone-600 | text-decoration-color: var(--color-stone-600); |
decoration-red-400 | text-decoration-color: var(--color-red-400); |
decoration-red-500 | text-decoration-color: var(--color-red-500); |
decoration-red-600 | text-decoration-color: var(--color-red-600); |
decoration-orange-400 | text-decoration-color: var(--color-orange-400); |
decoration-orange-500 | text-decoration-color: var(--color-orange-500); |
decoration-orange-600 | text-decoration-color: var(--color-orange-600); |
decoration-amber-400 | text-decoration-color: var(--color-amber-400); |
decoration-amber-500 | text-decoration-color: var(--color-amber-500); |
decoration-amber-600 | text-decoration-color: var(--color-amber-600); |
decoration-yellow-400 | text-decoration-color: var(--color-yellow-400); |
decoration-yellow-500 | text-decoration-color: var(--color-yellow-500); |
decoration-yellow-600 | text-decoration-color: var(--color-yellow-600); |
decoration-lime-400 | text-decoration-color: var(--color-lime-400); |
decoration-lime-500 | text-decoration-color: var(--color-lime-500); |
decoration-lime-600 | text-decoration-color: var(--color-lime-600); |
decoration-green-400 | text-decoration-color: var(--color-green-400); |
decoration-green-500 | text-decoration-color: var(--color-green-500); |
decoration-green-600 | text-decoration-color: var(--color-green-600); |
decoration-emerald-400 | text-decoration-color: var(--color-emerald-400); |
decoration-emerald-500 | text-decoration-color: var(--color-emerald-500); |
decoration-emerald-600 | text-decoration-color: var(--color-emerald-600); |
decoration-teal-400 | text-decoration-color: var(--color-teal-400); |
decoration-teal-500 | text-decoration-color: var(--color-teal-500); |
decoration-teal-600 | text-decoration-color: var(--color-teal-600); |
decoration-cyan-400 | text-decoration-color: var(--color-cyan-400); |
decoration-cyan-500 | text-decoration-color: var(--color-cyan-500); |
decoration-cyan-600 | text-decoration-color: var(--color-cyan-600); |
decoration-sky-400 | text-decoration-color: var(--color-sky-400); |
decoration-sky-500 | text-decoration-color: var(--color-sky-500); |
decoration-sky-600 | text-decoration-color: var(--color-sky-600); |
decoration-blue-400 | text-decoration-color: var(--color-blue-400); |
decoration-blue-500 | text-decoration-color: var(--color-blue-500); |
decoration-blue-600 | text-decoration-color: var(--color-blue-600); |
decoration-indigo-400 | text-decoration-color: var(--color-indigo-400); |
decoration-indigo-500 | text-decoration-color: var(--color-indigo-500); |
decoration-indigo-600 | text-decoration-color: var(--color-indigo-600); |
decoration-violet-400 | text-decoration-color: var(--color-violet-400); |
decoration-violet-500 | text-decoration-color: var(--color-violet-500); |
decoration-violet-600 | text-decoration-color: var(--color-violet-600); |
decoration-purple-400 | text-decoration-color: var(--color-purple-400); |
decoration-purple-500 | text-decoration-color: var(--color-purple-500); |
decoration-purple-600 | text-decoration-color: var(--color-purple-600); |
decoration-fuchsia-400 | text-decoration-color: var(--color-fuchsia-400); |
decoration-fuchsia-500 | text-decoration-color: var(--color-fuchsia-500); |
decoration-fuchsia-600 | text-decoration-color: var(--color-fuchsia-600); |
decoration-pink-400 | text-decoration-color: var(--color-pink-400); |
decoration-pink-500 | text-decoration-color: var(--color-pink-500); |
decoration-pink-600 | text-decoration-color: var(--color-pink-600); |
decoration-rose-400 | text-decoration-color: var(--color-rose-400); |
decoration-rose-500 | text-decoration-color: var(--color-rose-500); |
decoration-rose-600 | text-decoration-color: var(--color-rose-600); |
decoration-slate | text-decoration-color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); |
decoration-gray | text-decoration-color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); |
decoration-zinc | text-decoration-color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); |
decoration-neutral | text-decoration-color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); |
decoration-stone | text-decoration-color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); |
decoration-red | text-decoration-color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); |
decoration-orange | text-decoration-color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); |
decoration-amber | text-decoration-color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); |
decoration-yellow | text-decoration-color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); |
decoration-lime | text-decoration-color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); |
decoration-green | text-decoration-color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); |
decoration-emerald | text-decoration-color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); |
decoration-teal | text-decoration-color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); |
decoration-cyan | text-decoration-color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); |
decoration-sky | text-decoration-color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); |
decoration-blue | text-decoration-color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); |
decoration-indigo | text-decoration-color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); |
decoration-violet | text-decoration-color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); |
decoration-purple | text-decoration-color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); |
decoration-fuchsia | text-decoration-color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); |
decoration-pink | text-decoration-color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); |
decoration-rose | text-decoration-color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Fill 116
Variants: none
| Class | CSS |
|---|---|
fill-background | fill: var(--background); |
fill-foreground | fill: var(--foreground); |
fill-surface | fill: var(--surface); |
fill-surface-2 | fill: var(--surface-2); |
fill-surface-3 | fill: var(--surface-3); |
fill-muted | fill: var(--muted); |
fill-muted-foreground | fill: var(--muted-foreground); |
fill-border | fill: var(--border); |
fill-primary | fill: var(--primary); |
fill-primary-foreground | fill: var(--primary-foreground); |
fill-ring | fill: var(--ring); |
fill-secondary | fill: var(--secondary); |
fill-secondary-foreground | fill: var(--secondary-foreground); |
fill-accent | fill: var(--accent); |
fill-accent-foreground | fill: var(--accent-foreground); |
fill-success | fill: var(--success); |
fill-success-foreground | fill: var(--success-foreground); |
fill-warning | fill: var(--warning); |
fill-warning-foreground | fill: var(--warning-foreground); |
fill-danger | fill: var(--danger); |
fill-danger-foreground | fill: var(--danger-foreground); |
fill-info | fill: var(--info); |
fill-info-foreground | fill: var(--info-foreground); |
fill-white | fill: #fff; |
fill-black | fill: #000; |
fill-transparent | fill: transparent; |
fill-current | fill: currentColor; |
fill-inherit | fill: inherit; |
fill-slate-400 | fill: var(--color-slate-400); |
fill-slate-500 | fill: var(--color-slate-500); |
fill-slate-600 | fill: var(--color-slate-600); |
fill-gray-400 | fill: var(--color-gray-400); |
fill-gray-500 | fill: var(--color-gray-500); |
fill-gray-600 | fill: var(--color-gray-600); |
fill-zinc-400 | fill: var(--color-zinc-400); |
fill-zinc-500 | fill: var(--color-zinc-500); |
fill-zinc-600 | fill: var(--color-zinc-600); |
fill-neutral-400 | fill: var(--color-neutral-400); |
fill-neutral-500 | fill: var(--color-neutral-500); |
fill-neutral-600 | fill: var(--color-neutral-600); |
fill-stone-400 | fill: var(--color-stone-400); |
fill-stone-500 | fill: var(--color-stone-500); |
fill-stone-600 | fill: var(--color-stone-600); |
fill-red-400 | fill: var(--color-red-400); |
fill-red-500 | fill: var(--color-red-500); |
fill-red-600 | fill: var(--color-red-600); |
fill-orange-400 | fill: var(--color-orange-400); |
fill-orange-500 | fill: var(--color-orange-500); |
fill-orange-600 | fill: var(--color-orange-600); |
fill-amber-400 | fill: var(--color-amber-400); |
fill-amber-500 | fill: var(--color-amber-500); |
fill-amber-600 | fill: var(--color-amber-600); |
fill-yellow-400 | fill: var(--color-yellow-400); |
fill-yellow-500 | fill: var(--color-yellow-500); |
fill-yellow-600 | fill: var(--color-yellow-600); |
fill-lime-400 | fill: var(--color-lime-400); |
fill-lime-500 | fill: var(--color-lime-500); |
fill-lime-600 | fill: var(--color-lime-600); |
fill-green-400 | fill: var(--color-green-400); |
fill-green-500 | fill: var(--color-green-500); |
fill-green-600 | fill: var(--color-green-600); |
fill-emerald-400 | fill: var(--color-emerald-400); |
fill-emerald-500 | fill: var(--color-emerald-500); |
fill-emerald-600 | fill: var(--color-emerald-600); |
fill-teal-400 | fill: var(--color-teal-400); |
fill-teal-500 | fill: var(--color-teal-500); |
fill-teal-600 | fill: var(--color-teal-600); |
fill-cyan-400 | fill: var(--color-cyan-400); |
fill-cyan-500 | fill: var(--color-cyan-500); |
fill-cyan-600 | fill: var(--color-cyan-600); |
fill-sky-400 | fill: var(--color-sky-400); |
fill-sky-500 | fill: var(--color-sky-500); |
fill-sky-600 | fill: var(--color-sky-600); |
fill-blue-400 | fill: var(--color-blue-400); |
fill-blue-500 | fill: var(--color-blue-500); |
fill-blue-600 | fill: var(--color-blue-600); |
fill-indigo-400 | fill: var(--color-indigo-400); |
fill-indigo-500 | fill: var(--color-indigo-500); |
fill-indigo-600 | fill: var(--color-indigo-600); |
fill-violet-400 | fill: var(--color-violet-400); |
fill-violet-500 | fill: var(--color-violet-500); |
fill-violet-600 | fill: var(--color-violet-600); |
fill-purple-400 | fill: var(--color-purple-400); |
fill-purple-500 | fill: var(--color-purple-500); |
fill-purple-600 | fill: var(--color-purple-600); |
fill-fuchsia-400 | fill: var(--color-fuchsia-400); |
fill-fuchsia-500 | fill: var(--color-fuchsia-500); |
fill-fuchsia-600 | fill: var(--color-fuchsia-600); |
fill-pink-400 | fill: var(--color-pink-400); |
fill-pink-500 | fill: var(--color-pink-500); |
fill-pink-600 | fill: var(--color-pink-600); |
fill-rose-400 | fill: var(--color-rose-400); |
fill-rose-500 | fill: var(--color-rose-500); |
fill-rose-600 | fill: var(--color-rose-600); |
fill-slate | fill: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); |
fill-gray | fill: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); |
fill-zinc | fill: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); |
fill-neutral | fill: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); |
fill-stone | fill: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); |
fill-red | fill: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); |
fill-orange | fill: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); |
fill-amber | fill: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); |
fill-yellow | fill: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); |
fill-lime | fill: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); |
fill-green | fill: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); |
fill-emerald | fill: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); |
fill-teal | fill: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); |
fill-cyan | fill: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); |
fill-sky | fill: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); |
fill-blue | fill: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); |
fill-indigo | fill: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); |
fill-violet | fill: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); |
fill-purple | fill: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); |
fill-fuchsia | fill: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); |
fill-pink | fill: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); |
fill-rose | fill: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Stroke 116
Variants: none
| Class | CSS |
|---|---|
stroke-background | stroke: var(--background); |
stroke-foreground | stroke: var(--foreground); |
stroke-surface | stroke: var(--surface); |
stroke-surface-2 | stroke: var(--surface-2); |
stroke-surface-3 | stroke: var(--surface-3); |
stroke-muted | stroke: var(--muted); |
stroke-muted-foreground | stroke: var(--muted-foreground); |
stroke-border | stroke: var(--border); |
stroke-primary | stroke: var(--primary); |
stroke-primary-foreground | stroke: var(--primary-foreground); |
stroke-ring | stroke: var(--ring); |
stroke-secondary | stroke: var(--secondary); |
stroke-secondary-foreground | stroke: var(--secondary-foreground); |
stroke-accent | stroke: var(--accent); |
stroke-accent-foreground | stroke: var(--accent-foreground); |
stroke-success | stroke: var(--success); |
stroke-success-foreground | stroke: var(--success-foreground); |
stroke-warning | stroke: var(--warning); |
stroke-warning-foreground | stroke: var(--warning-foreground); |
stroke-danger | stroke: var(--danger); |
stroke-danger-foreground | stroke: var(--danger-foreground); |
stroke-info | stroke: var(--info); |
stroke-info-foreground | stroke: var(--info-foreground); |
stroke-white | stroke: #fff; |
stroke-black | stroke: #000; |
stroke-transparent | stroke: transparent; |
stroke-current | stroke: currentColor; |
stroke-inherit | stroke: inherit; |
stroke-slate-400 | stroke: var(--color-slate-400); |
stroke-slate-500 | stroke: var(--color-slate-500); |
stroke-slate-600 | stroke: var(--color-slate-600); |
stroke-gray-400 | stroke: var(--color-gray-400); |
stroke-gray-500 | stroke: var(--color-gray-500); |
stroke-gray-600 | stroke: var(--color-gray-600); |
stroke-zinc-400 | stroke: var(--color-zinc-400); |
stroke-zinc-500 | stroke: var(--color-zinc-500); |
stroke-zinc-600 | stroke: var(--color-zinc-600); |
stroke-neutral-400 | stroke: var(--color-neutral-400); |
stroke-neutral-500 | stroke: var(--color-neutral-500); |
stroke-neutral-600 | stroke: var(--color-neutral-600); |
stroke-stone-400 | stroke: var(--color-stone-400); |
stroke-stone-500 | stroke: var(--color-stone-500); |
stroke-stone-600 | stroke: var(--color-stone-600); |
stroke-red-400 | stroke: var(--color-red-400); |
stroke-red-500 | stroke: var(--color-red-500); |
stroke-red-600 | stroke: var(--color-red-600); |
stroke-orange-400 | stroke: var(--color-orange-400); |
stroke-orange-500 | stroke: var(--color-orange-500); |
stroke-orange-600 | stroke: var(--color-orange-600); |
stroke-amber-400 | stroke: var(--color-amber-400); |
stroke-amber-500 | stroke: var(--color-amber-500); |
stroke-amber-600 | stroke: var(--color-amber-600); |
stroke-yellow-400 | stroke: var(--color-yellow-400); |
stroke-yellow-500 | stroke: var(--color-yellow-500); |
stroke-yellow-600 | stroke: var(--color-yellow-600); |
stroke-lime-400 | stroke: var(--color-lime-400); |
stroke-lime-500 | stroke: var(--color-lime-500); |
stroke-lime-600 | stroke: var(--color-lime-600); |
stroke-green-400 | stroke: var(--color-green-400); |
stroke-green-500 | stroke: var(--color-green-500); |
stroke-green-600 | stroke: var(--color-green-600); |
stroke-emerald-400 | stroke: var(--color-emerald-400); |
stroke-emerald-500 | stroke: var(--color-emerald-500); |
stroke-emerald-600 | stroke: var(--color-emerald-600); |
stroke-teal-400 | stroke: var(--color-teal-400); |
stroke-teal-500 | stroke: var(--color-teal-500); |
stroke-teal-600 | stroke: var(--color-teal-600); |
stroke-cyan-400 | stroke: var(--color-cyan-400); |
stroke-cyan-500 | stroke: var(--color-cyan-500); |
stroke-cyan-600 | stroke: var(--color-cyan-600); |
stroke-sky-400 | stroke: var(--color-sky-400); |
stroke-sky-500 | stroke: var(--color-sky-500); |
stroke-sky-600 | stroke: var(--color-sky-600); |
stroke-blue-400 | stroke: var(--color-blue-400); |
stroke-blue-500 | stroke: var(--color-blue-500); |
stroke-blue-600 | stroke: var(--color-blue-600); |
stroke-indigo-400 | stroke: var(--color-indigo-400); |
stroke-indigo-500 | stroke: var(--color-indigo-500); |
stroke-indigo-600 | stroke: var(--color-indigo-600); |
stroke-violet-400 | stroke: var(--color-violet-400); |
stroke-violet-500 | stroke: var(--color-violet-500); |
stroke-violet-600 | stroke: var(--color-violet-600); |
stroke-purple-400 | stroke: var(--color-purple-400); |
stroke-purple-500 | stroke: var(--color-purple-500); |
stroke-purple-600 | stroke: var(--color-purple-600); |
stroke-fuchsia-400 | stroke: var(--color-fuchsia-400); |
stroke-fuchsia-500 | stroke: var(--color-fuchsia-500); |
stroke-fuchsia-600 | stroke: var(--color-fuchsia-600); |
stroke-pink-400 | stroke: var(--color-pink-400); |
stroke-pink-500 | stroke: var(--color-pink-500); |
stroke-pink-600 | stroke: var(--color-pink-600); |
stroke-rose-400 | stroke: var(--color-rose-400); |
stroke-rose-500 | stroke: var(--color-rose-500); |
stroke-rose-600 | stroke: var(--color-rose-600); |
stroke-slate | stroke: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); |
stroke-gray | stroke: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); |
stroke-zinc | stroke: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); |
stroke-neutral | stroke: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); |
stroke-stone | stroke: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); |
stroke-red | stroke: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); |
stroke-orange | stroke: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); |
stroke-amber | stroke: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); |
stroke-yellow | stroke: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); |
stroke-lime | stroke: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); |
stroke-green | stroke: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); |
stroke-emerald | stroke: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); |
stroke-teal | stroke: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); |
stroke-cyan | stroke: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); |
stroke-sky | stroke: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); |
stroke-blue | stroke: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); |
stroke-indigo | stroke: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); |
stroke-violet | stroke: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); |
stroke-purple | stroke: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); |
stroke-fuchsia | stroke: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); |
stroke-pink | stroke: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); |
stroke-rose | stroke: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Shadow color 114
Variants: none
| Class | CSS |
|---|---|
shadow-background | --m-shadow-color: var(--background); |
shadow-foreground | --m-shadow-color: var(--foreground); |
shadow-surface | --m-shadow-color: var(--surface); |
shadow-surface-2 | --m-shadow-color: var(--surface-2); |
shadow-surface-3 | --m-shadow-color: var(--surface-3); |
shadow-muted | --m-shadow-color: var(--muted); |
shadow-muted-foreground | --m-shadow-color: var(--muted-foreground); |
shadow-border | --m-shadow-color: var(--border); |
shadow-primary | --m-shadow-color: var(--primary); |
shadow-primary-foreground | --m-shadow-color: var(--primary-foreground); |
shadow-ring | --m-shadow-color: var(--ring); |
shadow-secondary | --m-shadow-color: var(--secondary); |
shadow-secondary-foreground | --m-shadow-color: var(--secondary-foreground); |
shadow-accent | --m-shadow-color: var(--accent); |
shadow-accent-foreground | --m-shadow-color: var(--accent-foreground); |
shadow-success | --m-shadow-color: var(--success); |
shadow-success-foreground | --m-shadow-color: var(--success-foreground); |
shadow-warning | --m-shadow-color: var(--warning); |
shadow-warning-foreground | --m-shadow-color: var(--warning-foreground); |
shadow-danger | --m-shadow-color: var(--danger); |
shadow-danger-foreground | --m-shadow-color: var(--danger-foreground); |
shadow-info | --m-shadow-color: var(--info); |
shadow-info-foreground | --m-shadow-color: var(--info-foreground); |
shadow-white | --m-shadow-color: #fff; |
shadow-black | --m-shadow-color: #000; |
shadow-transparent | --m-shadow-color: transparent; |
shadow-slate-400 | --m-shadow-color: var(--color-slate-400); |
shadow-slate-500 | --m-shadow-color: var(--color-slate-500); |
shadow-slate-600 | --m-shadow-color: var(--color-slate-600); |
shadow-gray-400 | --m-shadow-color: var(--color-gray-400); |
shadow-gray-500 | --m-shadow-color: var(--color-gray-500); |
shadow-gray-600 | --m-shadow-color: var(--color-gray-600); |
shadow-zinc-400 | --m-shadow-color: var(--color-zinc-400); |
shadow-zinc-500 | --m-shadow-color: var(--color-zinc-500); |
shadow-zinc-600 | --m-shadow-color: var(--color-zinc-600); |
shadow-neutral-400 | --m-shadow-color: var(--color-neutral-400); |
shadow-neutral-500 | --m-shadow-color: var(--color-neutral-500); |
shadow-neutral-600 | --m-shadow-color: var(--color-neutral-600); |
shadow-stone-400 | --m-shadow-color: var(--color-stone-400); |
shadow-stone-500 | --m-shadow-color: var(--color-stone-500); |
shadow-stone-600 | --m-shadow-color: var(--color-stone-600); |
shadow-red-400 | --m-shadow-color: var(--color-red-400); |
shadow-red-500 | --m-shadow-color: var(--color-red-500); |
shadow-red-600 | --m-shadow-color: var(--color-red-600); |
shadow-orange-400 | --m-shadow-color: var(--color-orange-400); |
shadow-orange-500 | --m-shadow-color: var(--color-orange-500); |
shadow-orange-600 | --m-shadow-color: var(--color-orange-600); |
shadow-amber-400 | --m-shadow-color: var(--color-amber-400); |
shadow-amber-500 | --m-shadow-color: var(--color-amber-500); |
shadow-amber-600 | --m-shadow-color: var(--color-amber-600); |
shadow-yellow-400 | --m-shadow-color: var(--color-yellow-400); |
shadow-yellow-500 | --m-shadow-color: var(--color-yellow-500); |
shadow-yellow-600 | --m-shadow-color: var(--color-yellow-600); |
shadow-lime-400 | --m-shadow-color: var(--color-lime-400); |
shadow-lime-500 | --m-shadow-color: var(--color-lime-500); |
shadow-lime-600 | --m-shadow-color: var(--color-lime-600); |
shadow-green-400 | --m-shadow-color: var(--color-green-400); |
shadow-green-500 | --m-shadow-color: var(--color-green-500); |
shadow-green-600 | --m-shadow-color: var(--color-green-600); |
shadow-emerald-400 | --m-shadow-color: var(--color-emerald-400); |
shadow-emerald-500 | --m-shadow-color: var(--color-emerald-500); |
shadow-emerald-600 | --m-shadow-color: var(--color-emerald-600); |
shadow-teal-400 | --m-shadow-color: var(--color-teal-400); |
shadow-teal-500 | --m-shadow-color: var(--color-teal-500); |
shadow-teal-600 | --m-shadow-color: var(--color-teal-600); |
shadow-cyan-400 | --m-shadow-color: var(--color-cyan-400); |
shadow-cyan-500 | --m-shadow-color: var(--color-cyan-500); |
shadow-cyan-600 | --m-shadow-color: var(--color-cyan-600); |
shadow-sky-400 | --m-shadow-color: var(--color-sky-400); |
shadow-sky-500 | --m-shadow-color: var(--color-sky-500); |
shadow-sky-600 | --m-shadow-color: var(--color-sky-600); |
shadow-blue-400 | --m-shadow-color: var(--color-blue-400); |
shadow-blue-500 | --m-shadow-color: var(--color-blue-500); |
shadow-blue-600 | --m-shadow-color: var(--color-blue-600); |
shadow-indigo-400 | --m-shadow-color: var(--color-indigo-400); |
shadow-indigo-500 | --m-shadow-color: var(--color-indigo-500); |
shadow-indigo-600 | --m-shadow-color: var(--color-indigo-600); |
shadow-violet-400 | --m-shadow-color: var(--color-violet-400); |
shadow-violet-500 | --m-shadow-color: var(--color-violet-500); |
shadow-violet-600 | --m-shadow-color: var(--color-violet-600); |
shadow-purple-400 | --m-shadow-color: var(--color-purple-400); |
shadow-purple-500 | --m-shadow-color: var(--color-purple-500); |
shadow-purple-600 | --m-shadow-color: var(--color-purple-600); |
shadow-fuchsia-400 | --m-shadow-color: var(--color-fuchsia-400); |
shadow-fuchsia-500 | --m-shadow-color: var(--color-fuchsia-500); |
shadow-fuchsia-600 | --m-shadow-color: var(--color-fuchsia-600); |
shadow-pink-400 | --m-shadow-color: var(--color-pink-400); |
shadow-pink-500 | --m-shadow-color: var(--color-pink-500); |
shadow-pink-600 | --m-shadow-color: var(--color-pink-600); |
shadow-rose-400 | --m-shadow-color: var(--color-rose-400); |
shadow-rose-500 | --m-shadow-color: var(--color-rose-500); |
shadow-rose-600 | --m-shadow-color: var(--color-rose-600); |
shadow-slate | --m-shadow-color: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); |
shadow-gray | --m-shadow-color: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); |
shadow-zinc | --m-shadow-color: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); |
shadow-neutral | --m-shadow-color: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); |
shadow-stone | --m-shadow-color: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); |
shadow-red | --m-shadow-color: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); |
shadow-orange | --m-shadow-color: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); |
shadow-amber | --m-shadow-color: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); |
shadow-yellow | --m-shadow-color: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); |
shadow-lime | --m-shadow-color: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); |
shadow-green | --m-shadow-color: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); |
shadow-emerald | --m-shadow-color: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); |
shadow-teal | --m-shadow-color: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); |
shadow-cyan | --m-shadow-color: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); |
shadow-sky | --m-shadow-color: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); |
shadow-blue | --m-shadow-color: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); |
shadow-indigo | --m-shadow-color: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); |
shadow-violet | --m-shadow-color: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); |
shadow-purple | --m-shadow-color: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); |
shadow-fuchsia | --m-shadow-color: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); |
shadow-pink | --m-shadow-color: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); |
shadow-rose | --m-shadow-color: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Ring offset color 26
Variants: none
| Class | CSS |
|---|---|
ring-offset-background | --m-ring-offset-color: var(--background); |
ring-offset-foreground | --m-ring-offset-color: var(--foreground); |
ring-offset-surface | --m-ring-offset-color: var(--surface); |
ring-offset-surface-2 | --m-ring-offset-color: var(--surface-2); |
ring-offset-surface-3 | --m-ring-offset-color: var(--surface-3); |
ring-offset-muted | --m-ring-offset-color: var(--muted); |
ring-offset-muted-foreground | --m-ring-offset-color: var(--muted-foreground); |
ring-offset-border | --m-ring-offset-color: var(--border); |
ring-offset-primary | --m-ring-offset-color: var(--primary); |
ring-offset-primary-foreground | --m-ring-offset-color: var(--primary-foreground); |
ring-offset-ring | --m-ring-offset-color: var(--ring); |
ring-offset-secondary | --m-ring-offset-color: var(--secondary); |
ring-offset-secondary-foreground | --m-ring-offset-color: var(--secondary-foreground); |
ring-offset-accent | --m-ring-offset-color: var(--accent); |
ring-offset-accent-foreground | --m-ring-offset-color: var(--accent-foreground); |
ring-offset-success | --m-ring-offset-color: var(--success); |
ring-offset-success-foreground | --m-ring-offset-color: var(--success-foreground); |
ring-offset-warning | --m-ring-offset-color: var(--warning); |
ring-offset-warning-foreground | --m-ring-offset-color: var(--warning-foreground); |
ring-offset-danger | --m-ring-offset-color: var(--danger); |
ring-offset-danger-foreground | --m-ring-offset-color: var(--danger-foreground); |
ring-offset-info | --m-ring-offset-color: var(--info); |
ring-offset-info-foreground | --m-ring-offset-color: var(--info-foreground); |
ring-offset-white | --m-ring-offset-color: #fff; |
ring-offset-black | --m-ring-offset-color: #000; |
ring-offset-transparent | --m-ring-offset-color: transparent; |