Colors
Primary, danger, success, warning, and neutral color palettes defined as CSS custom properties.
Primary
| Swatch | Token | CSS Variable |
|---|---|---|
| primary | var(--primary) | |
| color-primary-100 | var(--color-primary-100) | |
| color-primary-200 | var(--color-primary-200) | |
| color-primary-300 | var(--color-primary-300) | |
| color-primary-400 | var(--color-primary-400) | |
| color-primary-500 | var(--color-primary-500) | |
| color-primary-600 | var(--color-primary-600) | |
| color-primary-700 | var(--color-primary-700) |
Danger
| Swatch | Token | CSS Variable |
|---|---|---|
| color-danger-100 | var(--color-danger-100) | |
| color-danger-200 | var(--color-danger-200) | |
| color-danger-300 | var(--color-danger-300) | |
| color-danger-400 | var(--color-danger-400) | |
| color-danger-500 | var(--color-danger-500) | |
| color-danger-600 | var(--color-danger-600) | |
| color-danger-700 | var(--color-danger-700) |
Success
| Swatch | Token | CSS Variable |
|---|---|---|
| color-success-100 | var(--color-success-100) | |
| color-success-200 | var(--color-success-200) | |
| color-success-300 | var(--color-success-300) | |
| color-success-400 | var(--color-success-400) | |
| color-success-500 | var(--color-success-500) | |
| color-success-600 | var(--color-success-600) | |
| color-success-700 | var(--color-success-700) |
Warning
| Swatch | Token | CSS Variable |
|---|---|---|
| color-warning-100 | var(--color-warning-100) | |
| color-warning-200 | var(--color-warning-200) | |
| color-warning-300 | var(--color-warning-300) | |
| color-warning-400 | var(--color-warning-400) | |
| color-warning-500 | var(--color-warning-500) | |
| color-warning-600 | var(--color-warning-600) | |
| color-warning-700 | var(--color-warning-700) |
Neutral
| Swatch | Token | CSS Variable |
|---|---|---|
| color-blackAlpha-50 | var(--color-blackAlpha-50) | |
| color-blackAlpha-100 | var(--color-blackAlpha-100) | |
| color-blackAlpha-200 | var(--color-blackAlpha-200) | |
| color-blackAlpha-300 | var(--color-blackAlpha-300) | |
| color-blackAlpha-400 | var(--color-blackAlpha-400) | |
| color-blackAlpha-500 | var(--color-blackAlpha-500) | |
| color-blackAlpha-600 | var(--color-blackAlpha-600) | |
| color-blackAlpha-700 | var(--color-blackAlpha-700) | |
| color-blackAlpha-800 | var(--color-blackAlpha-800) | |
| color-blackAlpha-900 | var(--color-blackAlpha-900) |