shoelace/docs/tokens/color.md

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. Possible theme colors include primary, gray, success, info, warning, and danger.

This will make all colors in the primary color palette various shades of purple.

:root {
  --sl-color-primary-hue: 290;
  --sl-color-primary-saturation: 87%;
  --sl-color-primary-text: var(--sl-color-white);
}

You can update these values on the client and the changes will reflect instantly. To update the primary color using JavaScript, try this.

document.documentElement.style.setProperty('--sl-color-primary-hue', '290');
document.documentElement.style.setProperty('--sl-color-primary-saturation', '87%');

?> Although CSS lets you override custom properties on specific elements, these values must be scoped to the :root block for the entire palette to be recalculated. See this page for details.

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