There is two kind of properties you might use to allow users to edit colors and/or fonts.
<color variable="$bg-color" default="rgba(255, 255, 255, 1)" kind="background"/>
This creates a variable for a block called $bg-color which has a default value of white when it's added to the page. kind="background" tells the user what kind of property this is. See a full list of available kinds. Do you want to use a property color for an SVG image? Check out our SVG docs.
You can use the variable in the block CSS code
.wrapper {
background-color: $bg-color;
}
You can only use variables on single line CSS items. Example:
.wrapper {
<!-- Does not work -->
border: 1px solid $bg-color;
<!-- Works -->
border-width: 1px;
border-style: solid;
border-color: $bg-color;
}
As a workaround you might use CSS custom properties (variables):
.wrapper {
--bg: $bg-color;
border: 1px solid var(--bg);
}
<font mixin="paragraph" default="sf-paragraph" kind="paragraph" color="rgba(255, 255, 255, 1)"/>
This creates a mixin called paragraph. The default value will be the paragraph style defined within Appearance. Se a full list of available default text styles. Once it has retrieved the sf-paragraph style it overrides the font color and sets it to white.
This is how you use it with CSS:
h1 {
@include paragraph();
}
<switch variable="$showButton" on="block" off="none" kind="button" default="true" />
This creates a variable which might have two different states: block or none. Since default is set to true it will have the on-value when the block is added to a page.
This is how you use it with CSS:
.button {
display: $showButton;
}