Design Tokens
TailwindThe Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.
Package
Source
Doc
Getting Started
We recommend this conference talk by Brad Frost if you would like to learn more about the design token concept.
Skeleton utilizes a simple but powerful design token system to implement your theme settings for use in elements and components. Design tokens are the default classes for elements and components, which means they auto-adapt based on your theme with minimal configuration out of the box. However, we also make these available to use in your own projects, allowing you to utilize this same technique your own custom components and styling.
Theme Flow
Below is a visualization of how Skeleton uses your theme to control your UI. We start with your theme's CSS variables, then construct design token classes from these, next components utilize these design token classes, then finally you construct your pages with sets of elements and components.
Color Pairing Chart
Below is a visualization of color pairings in Skeleton. This is how we balance light and dark mode for your themes in practice. For
example, the surface color swatch 50 is the lightest available color, so we utilize that for your light theme background
color. While swatch 900 is the darkest, so vice versa. These two colors form a pair. We then generate design token classes for
.bg-surface-50-900-token
and bg-surface-900-50-token that automaticallys switch between these in light/dark mode respectively.
Backgrounds
| Class | Values | Description |
|---|---|---|
bg-[color]-backdrop-token
|
Theme Colors | Background styles for modal backdrops. |
bg-[color]-hover-token
|
Theme Colors | Background styles for hoverable elements. |
bg-[color]-active-token
|
Theme Colors | Background styles for active selected elements. |
bg-[color]-[pairings]-token
|
Theme Colors See pairing chart above. |
Can be 50-900 or 900-50 format. |
Border Radius
| Class | Values | Description |
|---|---|---|
rounded-token
|
- | Border radius for small elements: buttons, badges, chips, etc. |
rounded-[corner]-token
|
tl | tr | bl | br | Corner border radius styles for small elements. |
rounded-container-token
|
- | Border radius for large elements, such as cards and textareas |
rounded-[corner]-container-token
|
tl | tr | bl | br | Corner border radius styles large small elements. |
Borders
| Class | Values | Description |
|---|---|---|
border-token
|
- | Implements your theme configured border size. |
border-primary-[pairings]-token
|
See pairing chart above. | Can be 50-900 or 900-50 format. |
SVG Fill Color
| Class | Values | Description |
|---|---|---|
fill-token
|
- | The default responsive light/dark mode fill color. |
fill-on-[color]-token
|
Theme Colors | Provides an accessible foreground color. |
Rings
Utilities for creating outline rings with box-shadows.
| Class | Values | Description |
|---|---|---|
ring-outline-token
|
- | Creates a subtle transparent outline like Card elements. |
ring-[color]-[pairings]-token
|
Theme Colors See pairing chart above. |
Can be 50-900 or 900-50 format. |
Text
| Class | Values | Description |
|---|---|---|
font-heading-token
|
- | Implements your theme configured heading text size. |
font-token
|
- | Implements your theme configured base text size. |
text-token
|
- | Implements your theme configured base text color. |
text-on-[color]-token
|
Theme Colors | Provides an accessible foreground color. |
text-[color]-[pairings]-token
|
Theme Colors See pairing chart above. |
Can be 50-900 or 900-50 format. |
Misc
Various styles that do not fit into any of the above categories.
| Class | Values | Description |
|---|---|---|
accent-[color]-token
|
Theme Colors | Provides an input accent-color. |
Requesting New Tokens
While we've covered common use cases, we do expect the tokens to expand over time. Pull requests are welcome, as well as feature requests on GitHub Issues.