Settings

The settings collection allows you to use placeholders for common values used throughout the theme. By using placeholders for common values, you can alter a theme by tweaking these values in one place instead of having to modify all the styles or properties that are affected by the change.

Define your placeholders using the editor tab in the "settings" section. Use either a string, an array, or a numeric value. The value you specify in that section will replace the placeholder that you use in the theme.

For example, "borderRadius": 3 will replace the "$borderRadius" placeolder in "radius": "$bolderRadius".

Syntax

"[name]": [value]

The value can be a number, an array or a string.

"settings": {
    "borderSize": 1,
    "borderColor": ["red", "yellow", "green", "blue"],
    "focusTransition", "background-color 150ms"
}

Use the settings in the theme by prefixing the name with "$" and always in a string.

"styles": {
    "width": "$borderSize",
    "color": "$borderColor"
}

Now you can change the settings in one place and the entire theme will get automatically updated!