Color
Use color utilities to change the color of texts.
Introduction
Color utilities are classes for setting the value of the
color property.
You can preview the colors in the below gallery.
When you pick up a color class, consider the meaning in your context
but not only the appearance, since in different themes colors may be
changed but the meanings are the same.
.c-primary
.c-secondary
.c-danger
.c-dark
.c-light
.c-emphasis
.c-main
.c-muted
.c-inverse-emphasis
.c-inverse-main
.c-inverse-muted
<p class="c-primary"></p>
<p class="c-secondary"></p>
<p class="c-danger"></p>
<p class="c-dark"></p>
<p class="c-light"></p>
<p class="c-emphasis"></p>
<p class="c-main"></p>
<p class="c-muted"></p>
<p class="c-inverse-emphasis"></p>
<p class="c-inverse-main"></p>
<p class="c-inverse-muted"></p>
Sass Variables
$color-primary: hsba(340, 54, 98) !default
$color-secondary: hsba(0, 0, 56) !default
$color-danger: hsba(0, 82, 82) !default
$color-dark: hsba(0, 0, 32) !default
$color-light: hsba(0, 0, 100) !default
$color-emphasis: $color-dark !default
$color-main: lighten($color-dark, 10%) !default
$color-muted: lighten($color-dark, 50%) !default
$color-inverse-emphasis: $color-light !default
$color-inverse-main: rgba($color-light, $opacity-main) !default
$color-inverse-muted: rgba($color-light, $opacity-muted) !default