Handling Breaking Changes in the Variables

Environment

Product Version 02/09/2023
Product ThemeBuilder

Description

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

I created a new project that uses the latest Telerik and Kendo UI themes as a base. Then I imported the metadata of the project that I want to migrate. However, the variables that I modified in the migrated project are created as custom variables in the new project and they do not affect the Telerik and Kendo UI theme anymore.

Solution

Breaking changes in the names of the variables do not allow the direct migration of a project that uses a previous version of the Telerik and Kendo UI themes to a new project that uses the latest version of the themes. The solution is to map the Telerik and Kendo UI theme variables from your old project to the variables in the new project:

  1. Rename the variables in the project that you want to migrate and make them match the variable names in the latest Telerik and Kendo UI themes:

    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 variables object that contains an array of all variables from your project.
    4. Look for any differences in the variable names between the older project version and the latest. For example, to identify the variable name changes in version 6.0.0 of the themes, see the change log.

    5. Change the names of these variables to match the new ones. For example, if the variable name in your older project is $primary and in the latest Telerik and Kendo UI theme the same variable name is changed to $kendo-color-primary, replace all $primary occurrences in the file with $kendo-color-primary.

      All breaking changes between 5.10 and 6.0 are described in the change log.

  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 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?