Color classes
The token color primitives as Tailwind colors, shown with `bg-*`.
Every primitive is a Tailwind color, so every color utility takes it: text-theme-600, border-base-200, fill-theme-500. The table shows the bg-* form; values per shade are on Color tokens.
| Class | Styles |
|---|---|
bg-base-0 | background-color: var(--color-white); |
bg-base-50 | background-color: var(--color-neutral-50); |
bg-base-100 | background-color: var(--color-neutral-100); |
bg-base-200 | background-color: var(--color-neutral-200); |
bg-base-300 | background-color: var(--color-neutral-300); |
bg-base-400 | background-color: var(--color-neutral-400); |
bg-base-500 | background-color: var(--color-neutral-500); |
bg-base-600 | background-color: var(--color-neutral-600); |
bg-base-700 | background-color: var(--color-neutral-700); |
bg-base-800 | background-color: var(--color-neutral-800); |
bg-base-900 | background-color: var(--color-neutral-900); |
bg-base-950 | background-color: var(--color-neutral-950); |
bg-base-1000 | background-color: var(--color-black); |
bg-theme-50 | background-color: var(--color-blue-50); |
bg-theme-100 | background-color: var(--color-blue-100); |
bg-theme-200 | background-color: var(--color-blue-200); |
bg-theme-300 | background-color: var(--color-blue-300); |
bg-theme-400 | background-color: var(--color-blue-400); |
bg-theme-500 | background-color: var(--color-blue-500); |
bg-theme-600 | background-color: var(--color-blue-600); |
bg-theme-700 | background-color: var(--color-blue-700); |
bg-theme-800 | background-color: var(--color-blue-800); |
bg-theme-900 | background-color: var(--color-blue-900); |
bg-theme-950 | background-color: var(--color-blue-950); |