There are two kinds of properties you might use to allow users to edit colors and/or fonts.
Color Property
<color variable="$bg-color" default="rgba(255, 255, 255, 1)" kind="background"/>
Creates a variable named $bg-color with white as default. The kind="background" attribute indicates the property type.
Usage in CSS
.wrapper {
background-color: $bg-color;
}
Caveats
Variables work only on single-line CSS properties. Multi-property declarations like border: 1px solid $bg-color; fail, but individual properties work.
Workaround using CSS custom properties:
.wrapper {
--bg: $bg-color;
border: 1px solid var(--bg);
}
Font Property
<font mixin="paragraph" default="sf-paragraph" kind="paragraph" color="rgba(255, 255, 255, 1)"/>
Creates a mixin called paragraph with default paragraph style. Color is overridden to white.
CSS Usage
h1 {
@include paragraph();
}
Switch Property
<switch variable="$showButton" on="block" off="none" kind="button" default="true" />
Creates a binary variable with two states. Default "true" applies the on-value.
CSS Usage
.button {
display: $showButton;
}