Colors
Color palette
-300 is the default token value for colors, from which all other
colors are derived. This means the utility class .bg-secondary-300 can be shortened to .bg-secondary.
By default, color values are mixed using SCSS mixin functions, derived
from the -300 token value. Tint (white) is mixed in for values
below
300 and shade (black) for values above.
Accessibility considerations
Mosaic follows the WCAG 2.1 AA color contast guidelines. Please make sure your text meets 4.5:1 ratio requirements, or 3:1 for larger text. Graphical elements are also required to have a contrast of 3:1.
One tool to help with color contast checking is Bootstrap's color-contrast()
Sass function. It accepts background color as the first required argument; after
that it accepts a dark and a light color option before testing against
white and black. It will use the first color that matches the contrast
ratio, default set to 4.5:1.
| Class Name | Tint % | Shade % |
|---|---|---|
-10 | 90% | -- |
-20 | 78% | -- |
-50 | 60% | -- |
-100 | 40% | -- |
-200 | 15% | -- |
-300 | -- | -- |
-400 | -- | 15% |
-500 | -- | 35% |
primary colors
.primary -10 -20 -50 -100 -200 -300 -400 -500 secondary colors
.secondary -10 -20 -50 -100 -200 -300 -400 -500 accent colors
.accent -10 -20 -50 -100 -200 -300 -400 -500 grey colors
-10 -20 -50 -100 -200 -300 -400 -500 Special colors for all themes
success colors
.success -10 -20 -50 -100 -200 -300 -400 -500 danger colors
.danger -10 -20 -50 -100 -200 -300 -400 -500 warning colors
.warning -10 -20 -50 -100 -200 -300 -400 -500 info colors
.info -10 -20 -50 -100 -200 -300 -400 -500 notice colors
.notice -10 -20 -50 -100 -200 -300 -400 -500 Link colors
.link-color :visited