49 KiB
Color Tokens
Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
Usage
Color tokens are referenced using the --sl-color-{name}-{n} CSS custom property, where {name} is the name of the palette and {n} is the numeric value of the desired swatch.
All color tokens are defined as a set of RGB integers, eg. 113 113 122. CSS doesn't understand this format, however, so you need wrap them in the rgb() function.
.example {
color: rgb(var(--sl-color-neutral-500));
}
This may seem a bit verbose, but it gives us a super power — we can adjust the alpha channel of any color token!
Adjusting Alpha Channels
By default, color tokens produce an opaque color. With this syntax, you can easily adjust alpha channels.
.example-with-alpha {
color: rgb(var(--sl-color-neutral-500) / 50%);
}
The browser evaluates this to rgb(113 113 122 / 50%), where 50% is the alpha value. Note the required / delimiter after the color token. Alternatively, you can use a decimal such as 0.5 in lieu of a percentage.
This syntax may not look familiar, but it's perfectly valid per the CSS Color Module Level 4 and well-supported by modern browsers.
Theme Tokens
Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
--sl-color-primary-{n}
--sl-color-success-{n}
--sl-color-warning-{n}
--sl-color-danger-{n}
--sl-color-neutral-{n}
--sl-color-neutral-{n}
?> Looking for an easy way to customize your theme? Try the color token generator!
Primitives
Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic Tailwind color palette.
--sl-color-blue-gray-{n}
--sl-color-cool-gray-{n}
--sl-color-gray-{n}
--sl-color-true-gray-{n}
--sl-color-warm-gray-{n}
--sl-color-red-{n}
--sl-color-orange-{n}
--sl-color-amber-{n}
--sl-color-yellow-{n}
--sl-color-lime-{n}
--sl-color-green-{n}
--sl-color-emerald-{n}
--sl-color-teal-{n}
--sl-color-cyan-{n}
--sl-color-sky-{n}
--sl-color-blue-{n}
--sl-color-indigo-{n}
--sl-color-violet-{n}
--sl-color-purple-{n}
--sl-color-fuchsia-{n}
--sl-color-pink-{n}
--sl-color-rose-{n}