Export changed properties

[Hans]

I select a specific element in Telerik ThemeBuilder, e.g. a button. Then I change a single property of this element, e.g. the background color of the button text. Then I try to export the changes using the "Export Selected" button. I then get a CSS file with over 7500 lines. But I only want to get the changed elements. When I examine the CSS file, I see that a lot of the exported lines have nothing to do with the button, e.g. .k-separator or .k-grid-layout. So I removed all of these elements. So I still had over 1600 lines. But I'm wondering, are 1600 lines really affected by my small change? Can't I export a lot less?

The idea is, if I only change the background color of the button text, then I would rather get a minimal file that I can use as an override. Ideally consisting of only a few dozen lines.

[Nick Iliev]

Hello Hans,

The "Export Selected" option in ThemeBuilder generates CSS based on the core and utility files used by the Kendo theme. It also adds the related styles for the selected components (instead of adding the styles for all Kendo components). The export will still include variables and styles coming from the main Kendo files (e.g., like .k-separator), and this is due to how the Kendo themes are structured by design.

With ThemeBuilder, you can use the compiled CSS or the SCSS files (e.g., as an npm package). The compiled CSS is based on the SCSS. For example, when you are exporting only styles from the Button component, the SCSS will look as follows:

If you install the Kendo Default theme as an NPM package and open the "/scss/button" folder, you will notice that the Button component reuses multiple other SCSS files (e.g., "core/_index.scss" and "utils?_index.scss") and depends on the styles for other parts like badge and icon.

The "Export Selected" in ThemeBuilder is based on the above approach. As a result, the compiled CSS will contain styles, such as those from the core and utils folders in the main Kendo Default theme.

I hope the above clarifies why you see the Kendo-specific CSS and not only the changes related to a specific component.

 

Regards,
Nick Iliev
Progress Telerik