Colors
All variables are namespaced under stylesheets.color
which means they can be accessed within a yaml or configuration file as such: '{{ stylesheets.color.<color> }}'
, where <color>
is one of the values listed below. When accessing them within a stylesheet, use the following format: var(--color-<color>)
.
Variables
var(--color-accent1)
: #336699var(--color-accent2)
: orangevar(--color-body)
: #333var(--color-white)
: #fffvar(--color-background-default)
: #fffvar(--color-background-alt)
: rgb(95, 95, 95)var(--color-text-color-error)
: red
Mixins
bg-colors
Will take any of the above variables that are prefixed with background-
and
create a class that is prefixed with .bg-
. This means that the variable of
background-alt
has a helper class of .bg-alt
.
Parameters
None
Usage
@mixin bg-colors;
Output
.bg-alt {
background-color: rgb(95, 95, 95);
}
text-colors
Will take any of the above variables that are prefixed with text-color-
and
create a class that is prefixed with .text-color-
. This means that the
variable of text-color-error
has a helper class of .text-color-error
.
Parameters
None
Usage
@mixin text-colors;
Outputs:
.text-color-error {
color: red;
}
Helpers
body {
background-color: var(--color-background-default);
}
Example
<div class="bg-alt">...</div>
<p class="text-color-error">...</p>