Style Variables are a powerful way to customize the appearance of your app. They allow you to define and reuse values for properties such as colors, fonts, sizes, etc. across different components and boards.

Codux supports using existing variables already in your code by exposing them in the Styles panel to use when setting the style properties for an element, and to show in your boards project-wide.

To create a style variable in code, you need to write a declaration in your stylesheet file (CSS, Sass, and Stylable) that follows this syntax:

For example, if you want to create a style variable for the primary color of your app, you can write:

Then, you just need to import this custom property (variable) and point to the file using the boardGlobalSetup configuration key. Refer here for complete details.