Color
Adds or overrides background-, border- and text-color.
Palette
Colors can be put in two groups: semantic colors (colors with meaning) and unsemantic colors (decorative colors without particular meaning). Technically, each color can have up to 256 shades. By default the shades range from 0 (darkest) to 25 (lightest).
Semantic Colors
Each of the 5 default semantic colors has a particular meaning and is ideally reserved for particular purpose throughout your design:
| Sample | Name | Meaning/Purpose |
|---|---|---|
base |
for base text and border colors | |
primary |
to mark primary elements like action buttons or to add visual accent | |
attention |
for hints or helpful messages | |
negative |
for important warnings like error messages | |
positive |
for positive messages like Succes! or to mark active states |
By default, the semantic colors are mapped to unsemantic colors, eg. negative is mapped to red. When you compile your own instance of YOI, you can change the palettes as you wish.
Unsemantic Colors
| Sample | Name |
|---|---|
gray |
|
yellow |
|
red |
|
purple |
|
blue |
|
green |
Color Shades
By default, each color has 25 shades, ranging from 1 (darkest) to 25 (lightest):
| gray | yellow | red | purple | blue | green |
|---|---|---|---|---|---|
| 1 | 1 | 1 | 1 | 1 | 1 |
| 2 | 2 | 2 | 2 | 2 | 2 |
| 3 | 3 | 3 | 3 | 3 | 3 |
| 4 | 4 | 4 | 4 | 4 | 4 |
| 5 | 5 | 5 | 5 | 5 | 5 |
| 6 | 6 | 6 | 6 | 6 | 6 |
| 7 | 7 | 7 | 7 | 7 | 7 |
| 8 | 8 | 8 | 8 | 8 | 8 |
| 9 | 9 | 9 | 9 | 9 | 9 |
| 10 | 10 | 10 | 10 | 10 | 10 |
| 11 | 11 | 11 | 11 | 11 | 11 |
| 12 | 12 | 12 | 12 | 12 | 12 |
| 13 | 13 | 13 | 13 | 13 | 13 |
| 14 | 14 | 14 | 14 | 14 | 14 |
| 15 | 15 | 15 | 15 | 15 | 15 |
| 16 | 16 | 16 | 16 | 16 | 16 |
| 17 | 17 | 17 | 17 | 17 | 17 |
| 18 | 18 | 18 | 18 | 18 | 18 |
| 19 | 19 | 19 | 19 | 19 | 19 |
| 20 | 20 | 20 | 20 | 20 | 20 |
| 21 | 21 | 21 | 21 | 21 | 21 |
| 22 | 22 | 22 | 22 | 22 | 22 |
| 23 | 23 | 23 | 23 | 23 | 23 |
| 24 | 24 | 24 | 24 | 24 | 24 |
| 25 | 25 | 25 | 25 | 25 | 25 |
Background Color
.bg-attention-[…] |
Background color shade of attention, eg. .bg-attention-12 |
.bg-base-[…] |
Background color shade of base, eg. .bg-base-12 |
.bg-negative-[…] |
Background color shade of negative, eg. .bg-negative-12 |
.bg-positive-[…] |
Background color shade of positive, eg. .bg-positive-12 |
.bg-primary-[…] |
Background color shade of primary, eg. .bg-primary-12 |
.bg-blue-[…] |
Background color shade of blue, eg. .bg-blue-12 |
.bg-gray-[…]} |
Background color shade of gray, eg. .bg-gray-12 |
.bg-green-[…] |
Background color shade of green, eg. .bg-green-12 |
.bg-purple-[…] |
Background color shade of purple, eg. .bg-purple-12 |
.bg-red-[…] |
Background color shade of red, eg. .bg-red-12 |
.bg-yellow-[…] |
Background color shade of yellow, eg. .bg-yellow-12 |
.bg-transparent |
Background color shade of transparent, eg. .bg-transparent-12 |
.bg-white |
Background color shade of white, eg. .bg-white-12 |
Border Color
.bc-attention-[…] |
Border color shade of attention, eg. .bg-attention-12 |
.bc-base-[…] |
Border color shade of base, eg. .bg-base-12 |
.bc-negative-[…] |
Border color shade of negative, eg. .bg-negative-12 |
.bc-positive-[…] |
Border color shade of positive, eg. .bg-positive-12 |
.bc-primary-[…] |
Border color shade of primary, eg. .bg-primary-12 |
.bc-blue-[…] |
Border color shade of blue, eg. .bg-blue-12 |
.bc-gray-[…]} |
Border color shade of gray, eg. .bg-gray-12 |
.bc-green-[…] |
Border color shade of green, eg. .bg-green-12 |
.bc-purple-[…] |
Border color shade of purple, eg. .bg-purple-12 |
.bc-red-[…] |
Border color shade of red, eg. .bg-red-12 |
.bc-yellow-[…] |
Border color shade of yellow, eg. .bg-yellow-12 |
.bc-transparent |
Border color shade of transparent, eg. .bg-transparent-12 |
.bc-white |
Border color shade of white, eg. .bg-white-12 |
Text Color
.c-attention-[…] |
Text color shade of attention, eg. .bg-attention-12 |
.c-base-[…] |
Text color shade of base, eg. .bg-base-12 |
.c-negative-[…] |
Text color shade of negative, eg. .bg-negative-12 |
.c-positive-[…] |
Text color shade of positive, eg. .bg-positive-12 |
.c-primary-[…] |
Text color shade of primary, eg. .bg-primary-12 |
.c-blue-[…] |
Text color shade of blue, eg. .bg-blue-12 |
.c-gray-[…]} |
Text color shade of gray, eg. .bg-gray-12 |
.c-green-[…] |
Text color shade of green, eg. .bg-green-12 |
.c-purple-[…] |
Text color shade of purple, eg. .bg-purple-12 |
.c-red-[…] |
Text color shade of red, eg. .bg-red-12 |
.c-yellow-[…] |
Text color shade of yellow, eg. .bg-yellow-12 |
.c-transparent |
Text color shade of transparent, eg. .bg-transparent-12 |
.c-white |
Text color shade of white, eg. .bg-white-12 |
Interactive Color
Add the prefix hvr: to each color utility to apply the styling on mouseover:
<!-- example -->
<div class="box p-5 hvr:bg-purple-25 hvr:bc-purple-24 hvr:c-purple-13">mouseover for example</div>