Providing a way to brand your app.
Each of the components in the app has visual properties like size, position, padding, and margin just to name a few. By defining Variants for your components you can provide a theme to your app that matches your brand. Using Theme Builder you can style many components at once instead of configuring the behavior of each element.
What is a variant?
A variant is a style class for a particular element. For example, you might have a bunch of different types of text in your App. Some are headlines while others are body text. You want all of your headlines to have the same size and weight, while you want your body text to have a different size and weight. You can create two different variants for them. When you update the style properties on a variant in theme builder, they will automatically be applied to all the components that match that variant in your app.
Component Variant Tree
The top level of the tree is the theme. On the theme you will see a collection of potential web elements you can style. You can also add ones that aren’t there by clicking the + button next to the theme.
Within each variant you can see the variant classes. Each class can represent different style behaviors. You can duplicate the items in the classes by clicking the duplicate button next to the classes name.
When selecting a variant or a class of variant, the stage will show a preview of how it will be rendered.
When you select a specific class in the component variant tree, the inspector on the far right will switch to available styling options for that control. You can adjust font (for text elements), size, margin, padding, dimensions, and border. Each instance of this class will have the properties you specify here.
When you have the entire theme selected, the Inspector displays theme Colors, Sizes, and Fonts. These are variables that can be referenced throughout your class definitions. Changing values at the theme level will automatically change values for all classes using that variable.