One of the defining features of this style framework is its color palette. It's generated from a few swatches using lots of hand-written algebra in the Oklab LCh color space.
Chromatic colors
| $i | PINK | PURPLE | BLUE | TEAL | GREEN | YELLOW | ORANGE | RED |
|---|---|---|---|---|---|---|---|---|
| 9 | ||||||||
| 8 | ||||||||
| 7 | ||||||||
| 6 | ||||||||
| 5 | ||||||||
| 4 | ||||||||
| 3 | ||||||||
| 2 | ||||||||
| 1 |
Surface colors
| $i | GREY | LILAC | SLATE | SEPIA |
|---|---|---|---|---|
| 9 | ||||
| 8 | ||||
| 7 | ||||
| 6 | ||||
| 5 | ||||
| 4 | ||||
| 3 | ||||
| 2 | ||||
| 1 |
There are four less-chromatic color ranges to choose from for more
neutral features like the page body and background. Grey is the default,
and you can swap out the range for the entire document by setting the
<html> element's class="" attribute to
one of their names (lowercase). Unfortunately, until we get environment variables,
there is no pure CSS method aside from overriding all the variables
yourself.
CSS usage
The palette is exposed as CSS
variables where each direct color variable has a name like
--($hue)[-$i], but there are several more convenient
aliases you might want to use.
Instead of $i = 2, 5, or 8 you can use dk
(dark), hi (highlight), or lt (light).
You can also add -rgb to the end of any color variable
to get comma-separated RGB channels which can be useful for adding
transparency. For example:
rgba(var(--bg-pink-2-rgb) 0.8)
Adaptive lightswitch
For the theme to change with the browser's preference of light or
dark mode, use the form --(bg|fg)-($hue)[-$i]. With this
usage, bg starts at the lighter end in light mode, and the
darker half in dark mode; fg is the same in reverse. Lower
values for $i are the extremities, and you can leave it off
for it to default to 1. Values above 5 will cross over into
inverse territory.
Class names
There are CSS classes for setting foreground and background colors of
elements which you can use like
class="(bg|fg)-($hue)[-$i]". In this case, fg
sets the text color property and bg sets the
background-color property, and it follows the same
--(bg|fg)-* lightswitch rules as above. Class names also
support -(dk|hi|lt) in case you need it.
You have a lot of colors to pick from, so choose wisely! Always make sure your conbinations meet WCAG AA Contrast (AAA is even better!) in both light and dark mode.
Examples
#my-box {
background-color: var(--bg-purple);
color: var(--fg-lilac);
border: var(--border-dashed);
}
This is my box!
<div class="bg-green-2">Thing one</div>
<div class="bg-orange-dk fg-red-lt">Thing two</div>
Thing one
Thing two