Design Tokens
The Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.
Skeleton utilizes a simple but powerful design token system to implement theme settings in elements and components. These represent the defaults for most elements and components, which means they auto-adapt based on your theme with minimal configuration out of the box. Best of all you can use these within your custom components as well!
Learn More
We recommend this conference talk by Brad Frost if you would like to learn more about the design token concept.
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 based on these variables, 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 automatically 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 Color Pairing |
Pairing values 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 for large elements. |
Borders
| Class | Values | Description |
|---|---|---|
.border-token
|
Implements your theme's configured border size. | |
.border-[color]-[pairings]-token
|
Theme Colors Color Pairing |
Pairing values can be 50-900 or 900-50 format. |
Divide
Utility for controlling the border color between elements.
| Class | Values | Description |
|---|---|---|
.divide-[color]-[pairings]-token
|
Theme Colors Color Pairing |
Implements a text-decoration color. Pairing values 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 Color Pairing |
Pairing values can be 50-900 or 900-50 format. |
Text
| Class | Values | Description |
|---|---|---|
.font-heading-token
|
Implements your theme's configured heading font family. | |
.font-token
|
Implements your theme's configured base font family. | |
.text-token
|
Implements your theme's configured base text color. | |
.text-on-[color]-token
|
Theme Colors | Provides an accessible foreground color. |
.text-[color]-[pairings]-token
|
Theme Colors Color Pairing |
Pairing values can be 50-900 or 900-50 format. |
Text Decoration
| Class | Values | Description |
|---|---|---|
.decoration-[color]-[pairings]-token
|
Theme Colors Color Pairing |
Pairing values can be 50-900 or 900-50 format. |
Accent
| Class | Values | Description |
|---|---|---|
accent-[color]-token
|
Theme Colors | Provides an input accent-color. |