Variable Types
The ThemeBuilder application enables you to create and use variables and organize them in categories to simplify your design process. The variables are separated into five major sections based on the values they store:
By default, each section contains a number of pre-defined Kendo variables organized in sub-categories named with a "Kendo" prefix. These variables store the default Kendo values for a number of exposed styles for the selected Kendo theme flavor. Additionally, you can create custom categories and add, edit, or map variables in all categories. Variables imported from Figma through the dedicated plugin will appear in sub-categories named with a "Figma" prefix.
Once a variable is created in ThemeBuilder, you can assign it to the desired styling template to modify the targeted Kendo or custom component.
Font Families
The "Font Family" section enables you to create variables that define a font or a number of fonts as a comma-separated string.
Metrics
The "Metrics" section enables you to create variables that define various metric values like height, spacing, width, size, radius, etc. The supported units are px, pt, rem, em, and %.
Typographies
The "Typographies" section enables you to create variables that define multiple typography values including font-family, font-size, line-height, letter-spacing, text-transform (none, capitalize, lowercase, uppercase), font-style (italic), and text-decoration (underline and line-through).
Colors
The "Colors" section enables you to create variables that define a specific solid color (through HEX or RGB value) or a gradient (through CSS gradient values).
To create a gradient, use a valid CSS gradient value. An example based on the following linear gradient value:
linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
Effects
The "Effects" section enables you to create variables that define effects like drop shadow, inner shadow, layer blur, and background blur. The supported units for the metrics-related effect properties are px, pt, rem, and em.
Using Kendo Variables
A ThemeBuilder project based on any Kendo theme flavor contains a number of predefined Kendo variables. These variables show the default values used in the selected Kendo theme and color swatch.
Learn more about the Kendo Theme Variables here...
All exposed Kendo variables are accessible and can be modified and reused in your ThemeBuilder project.
Learn more about using Kendo Variables in ThemeBuilder here...
Using Figma Variables
The ThemeBuilder plugin for Figma enables you to import styles and variables (color and number variables) from Figma. All imported variables will appear in dedicated Figma categories. The Figma variables will be distinguished by their "figma-" prefix (this prefix is configurable through the Settings screen).
You can reuse the Figma variables by mapping them to other custom or Kendo variables or by directly assigning them as values through the "Advanced Edit" option.
Note that the imported Figma variables are read-only in the ThemeBuilder application. The idea is that the source of truth remains in the hands of the Figma designers and any changes should be propagated directly from Figma through re-export. Re-exported Figma variables will be automatically updated in ThemeBuilder.
Learn more about the ThemeBuilder plugin for Figma here...
Reusing the ThemeBuilder Variables in End Projects
Apart from using the ThemeBuilder variables in the project, you can also reuse the variables in your end projects. However, note that most Kendo Themes (including Default, Classic, Material, and Bootstrap) expose the variables only as SCSS variables, which means that they will be available as tokens only if you are using the SASS npm package. By design, all custom variables will be available in the generated SCSS files through the "tb-" prefix (the prefix is configurable through the Settings screen).
For example, a variable called $my-hotpink will be included as $tb-my-hotpink in the generated SCSS files.
The only exception to that rule is the Kendo Fluent theme, which supports CSS variables. A ThemeBuilder project based on Kendo Fluent will also contain your custom (or imported Figma) variables as CSS variables.
