shoelace/docs/tokens/color.md

Color Tokens

Color tokens are used to maintain consistent color use throughout your app.

Theme Colors

Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.

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

:root {
  /* Changes the primary color palette to purple */
  --sl-color-primary-50: #faf5ff;
  --sl-color-primary-100: #f3e8ff;
  --sl-color-primary-200: #e9d5ff;
  --sl-color-primary-300: #d8b4fe;
  --sl-color-primary-400: #c084fc;
  --sl-color-primary-500: #a855f7;
  --sl-color-primary-600: #9333ea;
  --sl-color-primary-700: #7e22ce;
  --sl-color-primary-800: #6b21a8;
  --sl-color-primary-900: #581c87;
}

?> 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-50
--sl-color-primary-100
--sl-color-primary-200
--sl-color-primary-300
--sl-color-primary-400
--sl-color-primary-500
--sl-color-primary-600
--sl-color-primary-700
--sl-color-primary-800
--sl-color-primary-900
--sl-color-primary-950

Gray

Token	Example
--sl-color-white
--sl-color-gray-50
--sl-color-gray-100
--sl-color-gray-200
--sl-color-gray-300
--sl-color-gray-400
--sl-color-gray-500
--sl-color-gray-600
--sl-color-gray-700
--sl-color-gray-800
--sl-color-gray-900
--sl-color-gray-950
--sl-color-black

Success

Token	Example
--sl-color-success-50
--sl-color-success-100
--sl-color-success-200
--sl-color-success-300
--sl-color-success-400
--sl-color-success-500
--sl-color-success-600
--sl-color-success-700
--sl-color-success-800
--sl-color-success-900
--sl-color-success-950

Info

Token	Example
--sl-color-info-50
--sl-color-info-100
--sl-color-info-200
--sl-color-info-300
--sl-color-info-400
--sl-color-info-500
--sl-color-info-600
--sl-color-info-700
--sl-color-info-800
--sl-color-info-900
--sl-color-info-950

Warning

Token	Example
--sl-color-warning-50
--sl-color-warning-100
--sl-color-warning-200
--sl-color-warning-300
--sl-color-warning-400
--sl-color-warning-500
--sl-color-warning-600
--sl-color-warning-700
--sl-color-warning-800
--sl-color-warning-900
--sl-color-warning-950

Danger

Token	Example
--sl-color-danger-50
--sl-color-danger-100
--sl-color-danger-200
--sl-color-danger-300
--sl-color-danger-400
--sl-color-danger-500
--sl-color-danger-600
--sl-color-danger-700
--sl-color-danger-800
--sl-color-danger-900
--sl-color-danger-950