Handling Breaking Changes in the themeStyleOverrides

Environment

Product Version 02/09/2023
Product ThemeBuilder

Description

How can I handle breaking changes in the themeStyleOverrides when migrating an existing ThemeBuilder project to the latest version of the Telerik and Kendo UI themes?

I imported my project's metadata into a new ThemeBuilder project that uses the latest version of the themes as a base, but I see errors in the compilation and some styles that I cannot change through the ThemeBuilder application.

Solution

The issue is caused by breaking changes that affect the themeStyleOverrides in the ThemeBuilder project.

To fix the compilation errors and remove any styles that you cannot modify in the ThemeBuilder app:

  1. Remove all broken or changed themeStyleOverrides:

    1. Export the metadata of the project that you want to migrate to a new version of the Telerik and Kendo UI themes.

    2. Extract the .zip file to a local folder and open the data.json file in a text editor.

    3. Expand the themeStyleOverrides object that contains an object with all your custom style overrides.

    4. In ThemeBuilder, open the new project with the migrated styles. Locate any component parts with unexpected styles. If you cannot find this unexpected style in any of the editors in the PROPERTIES pane, you've identified a broken object in the themeStyleOverrides.

    5. In the themeStyleOverrides, delete the entire object to remove it from the imported styles.

    For example, in the following themeStyleOverrides object, .k-this-style is renamed to .k-that-style in the latest Telerik and Kendo UI theme. This leaves a .k-this-style selector in the exported .sass and .css files. To remove the selector, locate the object with the name k-this-style and remove it from the themeStyleOverrides object.

        "themeStyleOverrides": {
        "k-this-style": {
            "classes": [
                ".k-k-this-style"
            ],
        ...other data omitted
            "selector": ".k-this-style"
        },
        "k-button": {
            "classes": [
                ".k-button"
            ],
            ...other data ommited
            "selector": ".k-button"
        }
    }

  2. Import the migrated metadata:

    1. Create a new ThemeBuilder project.

    2. Create a ZIP file that contains the data.json file that you modified.

    3. From the newly created ThemeBuilder project, navigate to the toolbar and select the project menu dropdown.

    4. Select Import Metadata.

    5. Upload the ZIP file with the modified metadata of the project that you want to migrate.

After refreshing the app, you can continue with your styling.

In this article
Related articles
Not finding the help you need?