themebuilder-what-is-new-hero-image-2x

ThemeBuilder

What's New

Export and Map Figma Variable Modes

Using the ThemeBuilder Plugin for Figma, you can export the new Color and Number (called Metric in ThemeBuilder) Modes to ThemeBuilder and work with them there. If you already have similar variable modes in ThemeBuilder, you can map them for seamless integration. This is in addition to the already supported ability to export and map Figma styles.

See the ThemeBuilder Figma Plugin documentation

Color and Size Variable Modes

Address the needs of different users with two types of variable modes: colors and metrics. Color modes allow you to define multiple color palettes, Light and Dark for example. Metric modes allow you to create sets of size variations. In your application, you can then switch them programmatically or give the user the control to do it themselves with the click of a button.

See the ThemeBuilder Variable Modes documentation

Style Generic HTML Elements

Harness the power of ThemeBuilder for the generic parts of your app that don’t use Telerik or Kendo UI components. ThemeBuilder will allow you to create style templates for the most used HTML elements such as <div>, <span>, <body>, <a>, <li>, <ul>, <p>, <h1, 2, e, etc.>, <image>, and <input>. For maximum control, you can create variants for each element just like you can for components. This not only extends the benefit of ThemeBuilder across your entire app, but ensures consistency as well.

Support for Over 500 Component-Specific Variables

For an advanced experience, customize individual components down to a granular level with access to each component’s specific Sass/CSS variables. When you drill down to the component level, you will see and be able to edit all related variables. Changing them will effect only that component. For an example, see the list of TreeView Sass Variables.

See the ThemeBuilder Component Styling Documentation

Export Only Selected Component Styles

To optimize bundle size, export only the styles for the components you select in ThemeBuilder as opposed to the entire library. This is very useful if you only use a few components as it can greatly reduce file size. 

See the ThemeBuilder Export Package documentation

ThemeBuilder

Product overview Buy Try

New features

What's new across all Telerik products?

See the updates feed

get-started-waves

Next Steps

See pricing

Check out the offers. Purchase an individual license for ThemeBuilder, or treat yourself to one of our bundles.

Start Your Free Trial

Try ThemeBuilder with dedicated technical support.