Colors
The palette (or color scheme) follow other framework logic, like primary and
secondary colors, states (success, danger...) and variants (100 to
900).
Each color is definied by two parameters : name and variant. Other keywords are use to simplify the palette's use.
base == 500 variant
light == 200 variant
dark == 700 variant
Extra variant are also created like the light color which is rely to the
gray - 100 by default, or text with gray - 900.
The cv() function offer a simpler way to access to a
specific color instead of use the variable name like $g-color-primary or
$g-color-gray-800.
Palette
All default colors are visible below 👇.
The text colors are generated to
respect the better contrast with the
yiq-contrast() function.
gray 100 - light
gray 200
gray 300
gray 400
gray 500 - base
gray 600
gray 700
gray 800 - dark
gray 900
primary 100
primary 200 - light
primary 300
primary 400
primary 500 - base
primary 600
primary 700 - dark
primary 800
primary 900
secondary 100
secondary 200 - light
secondary 300
secondary 400
secondary 500 - base
secondary 600
secondary 700 - dark
secondary 800
secondary 900
success 100
success 200 - light
success 300
success 400
success 500 - base
success 600
success 700 - dark
success 800
success 900
danger 100
danger 200 - light
danger 300
danger 400
danger 500 - base
danger 600
danger 700 - dark
danger 800
danger 900
warning 100
warning 200 - light
warning 300
warning 400
warning 500 - base
warning 600
warning 700 - dark
warning 800
warning 900
info 100
info 200 - light
info 300
info 400
info 500 - base
info 600
info 700 - dark
info 800
info 900
white - base
black - base
light - base (gray 100)
dark - base (gray 800)
text - base (gray 900)
text - muted (gray 600)
link - base (primary)