Template will automatically generate a collection of CSS variables for each of those colors. These sets of variables act as a color palette you can use to play with different shades of a same color.
--kws-primary--kws-primary-rgbif you want to create your own RGBA shade:rgba(var(--kws-primary-rgb), 0.5)--kws-primary-hequal to the primary hue--kws-primary-sequal to the primary saturation--kws-primary-lequal to the primary lightness--kws-primary-base(equal to--kws-primary)--kws-primary-invertwhich is a color that will look decent on the primary color (in a foreground/background combination)--kws-primary-lightwhich is the primary color at90%lightness--kws-primary-light-invertwhich is a color that looks good on the-lightversion--kws-primary-darkwhich is the primary color at20%lightness--kws-primary-dark-invertwhich is a color that looks good on the-darkversion--kws-primary-softwhich is alightcolor in light mode, and adarkcolor in dark mode--kws-primary-boldwhich is adarkcolor in light mode, and alightcolor in dark mode--kws-primary-soft-invertwhich is the same as theboldversion--kws-primary-bold-invertwhich is the same as thesoftversion--kws-primary-on-schemewhich is a color that looks good on thescheme-maincolor (which by default is white, and is used as the page’s background color)
--kws-primary | The quick brown fox jumps over the lazy dog | |
--kws-primary-invert | The quick brown fox jumps over the lazy dog | |
--kws-primary-light | The quick brown fox jumps over the lazy dog | |
--kws-primary-light-invert | The quick brown fox jumps over the lazy dog | |
--kws-primary-dark | The quick brown fox jumps over the lazy dog | |
--kws-primary-dark-invert | The quick brown fox jumps over the lazy dog | |
--kws-primary-soft | The quick brown fox jumps over the lazy dog | |
--kws-primary-bold | The quick brown fox jumps over the lazy dog | |
--kws-primary-on-scheme | The quick brown fox jumps over the lazy dog |
Soft and Bold colors
Because Template now has a Dark Mode, it comes with a new color concept: soft and bold colors.
A soft color is a shade of a color that has little contrast with the background. It’s a muted, faint shade of that color.
In light mode, this means that a soft color will be light as well. It’s ideal of backgrounds:
--kws-primary-soft as
background | The quick brown fox jumps over the lazy dog |
On the other hand, the bold color has a stark contrast with the background. It’s a strong, distinct shade of that color.
In light mode, this means that a bold color will be dark. It’s ideal of text colors:
--kws-primary-bold as
text color | The quick brown fox jumps over the lazy dog |
The best use of these colors is to combine them: the soft color as background, the bold color as foreground:
--kws-primary-soft as
background--kws-primary-bold as foreground | The quick brown fox jumps over the lazy dog |
Automatic switching when going into Dark Mode
If you use switch to between light mode and dark mode, you will notice that the soft and bold colors will swap. That way, you don’t need to update your CSS classes to keep a decent design.
| System | Light Mode | Dark Mode |
|---|---|---|
| The quick brown fox jumps over the lazy dog | The quick brown fox jumps over the lazy dog | The quick brown fox jumps over the lazy dog |
Invert colors
The purpose of -invert
colors is to combine them with their base counterparts. For example, if you
use
primary-light
as the background color, you can use
primary-light-invert as the foreground color:
| Background | --kws-primary | kws-primary-invert on kws-primary |
| Foreground | --kws-primary-invert | |
| Background | --kws-primary-light | kws-primary-light-invert on kws-primary-light |
| Foreground | --kws-primary-light-invert | |
| Background | --kws-primary-dark | kws-primary-dark-invert on kws-primary-dark |
| Foreground | --kws-primary-dark-invert |
21 shades for each color
Template will automatically generate 21 shades of each color, one for
each amount of lightness, starting from around 0%
and going up in
5%
increments, until
100% is reached.
I am saying around
0%because the last digit is determined by the base color. If the base color’s lightness is42%, then--kws-primary-00will be2%, not0%.
--kws-primary-00 | --kws-primary-00-invert | ||
--kws-primary-05 | --kws-primary-05-invert | ||
--kws-primary-10 | --kws-primary-10-invert | ||
--kws-primary-15 | --kws-primary-15-invert | ||
--kws-primary-20 | --kws-primary-20-invert | ||
--kws-primary-25 | --kws-primary-25-invert | ||
--kws-primary-30 | --kws-primary-30-invert | ||
--kws-primary-35 | --kws-primary-35-invert | ||
--kws-primary-40 | --kws-primary-40-invert | ||
--kws-primary-45 | --kws-primary-45-invert | ||
--kws-primary-50 | --kws-primary-50-invert | ||
--kws-primary-55 | --kws-primary-55-invert | ||
--kws-primary-60 | --kws-primary-60-invert | ||
--kws-primary-65 | --kws-primary-65-invert | ||
--kws-primary-70 | --kws-primary-70-invert | ||
--kws-primary-75 | --kws-primary-75-invert | ||
--kws-primary-80 | --kws-primary-80-invert | ||
--kws-primary-85 | --kws-primary-85-invert | ||
--kws-primary-90 | --kws-primary-90-invert | ||
--kws-primary-95 | --kws-primary-95-invert | ||
--kws-primary-100 | --kws-primary-100-invert |
Each of these shades has an -invert counterpart
that can be used as a foreground color:
| Background | --kws-primary-00 | kws-primary-00-invert on kws-primary-00 |
| Foreground | --kws-primary-00-invert | |
| Background | --kws-primary-05 | kws-primary-05-invert on kws-primary-05 |
| Foreground | --kws-primary-05-invert | |
| Background | --kws-primary-10 | kws-primary-10-invert on kws-primary-10 |
| Foreground | --kws-primary-10-invert | |
| Background | --kws-primary-15 | kws-primary-15-invert on kws-primary-15 |
| Foreground | --kws-primary-15-invert | |
| Background | --kws-primary-20 | kws-primary-20-invert on kws-primary-20 |
| Foreground | --kws-primary-20-invert | |
| Background | --kws-primary-25 | kws-primary-25-invert on kws-primary-25 |
| Foreground | --kws-primary-25-invert | |
| Background | --kws-primary-30 | kws-primary-30-invert on kws-primary-30 |
| Foreground | --kws-primary-30-invert | |
| Background | --kws-primary-35 | kws-primary-35-invert on kws-primary-35 |
| Foreground | --kws-primary-35-invert | |
| Background | --kws-primary-40 | kws-primary-40-invert on kws-primary-40 |
| Foreground | --kws-primary-40-invert | |
| Background | --kws-primary-45 | kws-primary-45-invert on kws-primary-45 |
| Foreground | --kws-primary-45-invert | |
| Background | --kws-primary-50 | kws-primary-50-invert on kws-primary-50 |
| Foreground | --kws-primary-50-invert | |
| Background | --kws-primary-55 | kws-primary-55-invert on kws-primary-55 |
| Foreground | --kws-primary-55-invert | |
| Background | --kws-primary-60 | kws-primary-60-invert on kws-primary-60 |
| Foreground | --kws-primary-60-invert | |
| Background | --kws-primary-65 | kws-primary-65-invert on kws-primary-65 |
| Foreground | --kws-primary-65-invert | |
| Background | --kws-primary-70 | kws-primary-70-invert on kws-primary-70 |
| Foreground | --kws-primary-70-invert | |
| Background | --kws-primary-75 | kws-primary-75-invert on kws-primary-75 |
| Foreground | --kws-primary-75-invert | |
| Background | --kws-primary-80 | kws-primary-80-invert on kws-primary-80 |
| Foreground | --kws-primary-80-invert | |
| Background | --kws-primary-85 | kws-primary-85-invert on kws-primary-85 |
| Foreground | --kws-primary-85-invert | |
| Background | --kws-primary-90 | kws-primary-90-invert on kws-primary-90 |
| Foreground | --kws-primary-90-invert | |
| Background | --kws-primary-95 | kws-primary-95-invert on kws-primary-95 |
| Foreground | --kws-primary-95-invert | |
| Background | --kws-primary-100 | kws-primary-100-invert on kws-primary-100 |
| Foreground | --kws-primary-100-invert |
Lightness CSS variables
If you write your own CSS and want to use one these shades yourself, you
can access the lightness value via its dedicated CSS
variable that has a
-l suffix.
For example, the kws-primary-75 color is defined like this:
:root
--kws-primary-75: hsla(
var(--kws-primary-h),
var(--kws-primary-s),
var(--kws-primary-75-l),
1
);
In this case, --kws-primary-75-l
is equal to
76%, and you
can access its value with the
var(--kws-primary-75-l) CSS variable.
CSS helper classes
While you can access all a color’s CSS variables directly by writing color: var(--kws-primary)
for example, Template also provides CSS helper classes for
each color.
Those helper classes exist for to set either the color
or the
background.
| # | Color | color class | background class | ||
|---|---|---|---|---|---|
--kws-primary | has-text-primary | Hello World | has-background-primary | Hello World | |
--kws-primary-invert | has-text-primary-invert | Hello World | has-background-primary-invert | Hello World | |
--kws-primary-light | has-text-primary-light | Hello World | has-background-primary-light | Hello World | |
--kws-primary-light-invert | has-text-primary-light-invert | Hello World | has-background-primary-light-invert | Hello World | |
--kws-primary-dark | has-text-primary-dark | Hello World | has-background-primary-dark | Hello World | |
--kws-primary-dark-invert | has-text-primary-dark-invert | Hello World | has-background-primary-dark-invert | Hello World | |
--kws-primary-on-scheme | has-text-primary-on-scheme | Hello World | has-background-primary-on-scheme | Hello World | |
--kws-primary-00 | has-text-primary-00 | Hello World | has-background-primary-00 | Hello World | |
--kws-primary-05 | has-text-primary-05 | Hello World | has-background-primary-05 | Hello World | |
--kws-primary-10 | has-text-primary-10 | Hello World | has-background-primary-10 | Hello World | |
--kws-primary-15 | has-text-primary-15 | Hello World | has-background-primary-15 | Hello World | |
--kws-primary-20 | has-text-primary-20 | Hello World | has-background-primary-20 | Hello World | |
--kws-primary-25 | has-text-primary-25 | Hello World | has-background-primary-25 | Hello World | |
--kws-primary-30 | has-text-primary-30 | Hello World | has-background-primary-30 | Hello World | |
--kws-primary-35 | has-text-primary-35 | Hello World | has-background-primary-35 | Hello World | |
--kws-primary-40 | has-text-primary-40 | Hello World | has-background-primary-40 | Hello World | |
--kws-primary-45 | has-text-primary-45 | Hello World | has-background-primary-45 | Hello World | |
--kws-primary-50 | has-text-primary-50 | Hello World | has-background-primary-50 | Hello World | |
--kws-primary-55 | has-text-primary-55 | Hello World | has-background-primary-55 | Hello World | |
--kws-primary-60 | has-text-primary-60 | Hello World | has-background-primary-60 | Hello World | |
--kws-primary-65 | has-text-primary-65 | Hello World | has-background-primary-65 | Hello World | |
--kws-primary-70 | has-text-primary-70 | Hello World | has-background-primary-70 | Hello World | |
--kws-primary-75 | has-text-primary-75 | Hello World | has-background-primary-75 | Hello World | |
--kws-primary-80 | has-text-primary-80 | Hello World | has-background-primary-80 | Hello World | |
--kws-primary-85 | has-text-primary-85 | Hello World | has-background-primary-85 | Hello World | |
--kws-primary-90 | has-text-primary-90 | Hello World | has-background-primary-90 | Hello World | |
--kws-primary-95 | has-text-primary-95 | Hello World | has-background-primary-95 | Hello World | |
--kws-primary-100 | has-text-primary-100 | Hello World | has-background-primary-100 | Hello World | |