Colors

The colors that style most Elenore elements and components

Most elements and components have color variations thanks to modifiers with syntax .is-$color, like is-primary or is-dark.

This is thanks to the $colors Sass map, through which Elenore cycles to grab all the colors and their inverts.

Color	Variable	Value	Computed value	Invert value	Computed invert value
White	`$white`	`$white`	`hsl(0, 0%, 100%)`	`$black`	`hsl(0, 0%, 4%)`
Black	`$black`	`$black`	`hsl(0, 0%, 4%)`	`$white`	`hsl(0, 0%, 100%)`
Light	`$light`	`$white-ter`	`hsl(0, 0%, 96%)`	`$grey-darker`	`hsl(0, 0%, 21%)`
Dark	`$dark`	`$grey-darker`	`hsl(0, 0%, 21%)`	`$white-ter`	`hsl(0, 0%, 96%)`
Primary	`$primary`	`$blue`	`hsl(210, 100%, 55%)`	`#fff`	`#fff`
	`$`	`$`
Info	`$info`	`$indigo`	`hsl(225, 55%, 56%)`	`#fff`	`#fff`
Success	`$success`	`$green`	`hsl(164, 58%, 44%)`	`#fff`	`#fff`
Warning	`$warning`	`$yellow`	`hsl(46, 99%, 61%)`	`rgba(0, 0, 0, 0.7)`	`rgba(0, 0, 0, 0.7)`
Danger	`$danger`	`$red`	`hsl(348, 100%, 61%)`	`#fff`	`#fff`

Elenore also provides a $shades Sass map, that only contains shades of grey between black and white.

This page is open source. View on GitHub