Color Tokens
Color tokens are used to maintain consistent color use throughout your app.
Theme Colors
Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% or 100% values for theme colors. Use --sl-color-black and --sl-color-white instead.
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
To customize a theme color, change its respective hue, saturation, and text tokens. This will update all colors in the palette — there's no need to update individual palette colors. In fact, doing so is strongly discouraged.
--sl-color-primary-hue: 203;
--sl-color-primary-saturation: 100%;
--sl-color-primary-text: var(--sl-color-white);
?> Color palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly.
Primary
| Token |
Example |
--sl-color-primary-5 |
|
--sl-color-primary-10 |
|
--sl-color-primary-15 |
|
--sl-color-primary-20 |
|
--sl-color-primary-25 |
|
--sl-color-primary-30 |
|
--sl-color-primary-35 |
|
--sl-color-primary-40 |
|
--sl-color-primary-45 |
|
--sl-color-primary-50 |
|
--sl-color-primary-55 |
|
--sl-color-primary-60 |
|
--sl-color-primary-65 |
|
--sl-color-primary-70 |
|
--sl-color-primary-75 |
|
--sl-color-primary-80 |
|
--sl-color-primary-85 |
|
--sl-color-primary-90 |
|
--sl-color-primary-95 |
|
Gray
| Token |
Example |
--sl-color-black |
|
--sl-color-gray-5 |
|
--sl-color-gray-10 |
|
--sl-color-gray-15 |
|
--sl-color-gray-20 |
|
--sl-color-gray-25 |
|
--sl-color-gray-30 |
|
--sl-color-gray-35 |
|
--sl-color-gray-40 |
|
--sl-color-gray-45 |
|
--sl-color-gray-50 |
|
--sl-color-gray-55 |
|
--sl-color-gray-60 |
|
--sl-color-gray-65 |
|
--sl-color-gray-70 |
|
--sl-color-gray-75 |
|
--sl-color-gray-80 |
|
--sl-color-gray-85 |
|
--sl-color-gray-90 |
|
--sl-color-gray-95 |
|
--sl-color-white |
|
Success
| Token |
Example |
--sl-color-success-5 |
|
--sl-color-success-10 |
|
--sl-color-success-15 |
|
--sl-color-success-20 |
|
--sl-color-success-25 |
|
--sl-color-success-30 |
|
--sl-color-success-35 |
|
--sl-color-success-40 |
|
--sl-color-success-45 |
|
--sl-color-success-50 |
|
--sl-color-success-55 |
|
--sl-color-success-60 |
|
--sl-color-success-65 |
|
--sl-color-success-70 |
|
--sl-color-success-75 |
|
--sl-color-success-80 |
|
--sl-color-success-85 |
|
--sl-color-success-90 |
|
--sl-color-success-95 |
|
Info
| Token |
Example |
--sl-color-info-5 |
|
--sl-color-info-10 |
|
--sl-color-info-15 |
|
--sl-color-info-20 |
|
--sl-color-info-25 |
|
--sl-color-info-30 |
|
--sl-color-info-35 |
|
--sl-color-info-40 |
|
--sl-color-info-45 |
|
--sl-color-info-50 |
|
--sl-color-info-55 |
|
--sl-color-info-60 |
|
--sl-color-info-65 |
|
--sl-color-info-70 |
|
--sl-color-info-75 |
|
--sl-color-info-80 |
|
--sl-color-info-85 |
|
--sl-color-info-90 |
|
--sl-color-info-95 |
|
Warning
| Token |
Example |
--sl-color-warning-5 |
|
--sl-color-warning-10 |
|
--sl-color-warning-15 |
|
--sl-color-warning-20 |
|
--sl-color-warning-25 |
|
--sl-color-warning-30 |
|
--sl-color-warning-35 |
|
--sl-color-warning-40 |
|
--sl-color-warning-45 |
|
--sl-color-warning-50 |
|
--sl-color-warning-55 |
|
--sl-color-warning-60 |
|
--sl-color-warning-65 |
|
--sl-color-warning-70 |
|
--sl-color-warning-75 |
|
--sl-color-warning-80 |
|
--sl-color-warning-85 |
|
--sl-color-warning-90 |
|
--sl-color-warning-95 |
|
Danger
| Token |
Example |
--sl-color-danger-5 |
|
--sl-color-danger-10 |
|
--sl-color-danger-15 |
|
--sl-color-danger-20 |
|
--sl-color-danger-25 |
|
--sl-color-danger-30 |
|
--sl-color-danger-35 |
|
--sl-color-danger-40 |
|
--sl-color-danger-45 |
|
--sl-color-danger-50 |
|
--sl-color-danger-55 |
|
--sl-color-danger-60 |
|
--sl-color-danger-65 |
|
--sl-color-danger-70 |
|
--sl-color-danger-75 |
|
--sl-color-danger-80 |
|
--sl-color-danger-85 |
|
--sl-color-danger-90 |
|
--sl-color-danger-95 |
|