Themebuilder Import Theme

[Rick]

You used to be able to upload the variables.scss file to work on an existing theme.  Now, it's asking for a json file.  Is there a workaround for this?

from Themebuilder now:

 

 

 

from the Documentation:

[Martin]

Hello, Rick,

The change was made in our last major release. From this point on only json files can be imported in the themebuilder. You can create a new theme and paste the variables from your scss file and download the new theme. You will then have a json which you can use next time.

We will make sure to change the screenshot from the documentation to avoid confusion.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

[Lucas]

It looks like the new theme builder contains fields that don't exist in the previous scss files. Is there a guide for how to move from the old theme builder to new one?

I compared the css files output by the two different versions and it seems like other things have changed in the styles. Can we be confident that updating to the newer theme with the same colors won't have other unintended impacts to our styling?

It also looks like the documentation on the website still asks you up upload a sass file

Thanks,

Lucas

[Ivan Zhekov]

Lucas,

the file you see in the download is governed by a json schema we created for this very purpose. The schema is part of our kendo-theme-tasks package (https://github.com/telerik/kendo-theme-tasks) and more specifically, the kendo-swatch schema -- https://github.com/telerik/kendo-theme-tasks/blob/develop/lib/schemas/kendo-swatch.json.

We use the same swatch files both in our themes and in themebuilder. However, a bit of information is lost and it's not immediately obvious which version of the themes / schema should be used.

If you look at a source swatch, say default blue one -- https://github.com/telerik/kendo-themes/blob/develop/packages/default/lib/swatches/default-blue.json -- it's very obvious which schema it validates against and which elements should be part of it.

The way to read the swatch is sort of like this:

• the swatch name is ...
• the swatch is for "@progres/kendo-theme-..." theme
• preview colors is simply for displaying in swatch picker, so you can ignore it
• components array will contain only components that will be in the output, or empty for all
• the theme has the following (visual) groups
• in the first group (which has no label) there is:
  • a single variable called `$border-radius`
  • with label "Border radius"
  • of type number
  • with value "2px"
• And so on for the rest of the variables / groups.
  

The take away is that what ever is the key of the variable, we'll output it with a dollar sign.

I should mention that you could remove all the variables and leave just a single field that changes only the primary color. As long as the format follows somewhere along the lines you can have as simple or as crazy rich customization.

About migrating between versions ... a json file should suffice for migrating between to minor / patch versions of the themes. If we have a breaking change, however (as in semantic breaking change), it's not guaranteed that the swatch file will do you justice. What do I mean by that?

Say we prefix all the variables in our themes with `$kendo-` to avoid clashes with Bootstrap or any other framework. Then the json file will simply customize the incorrect variables. To tackle this, all variable keys must be prefixed with `kendo-` and would be the end of it.

We are still discussing how to include some sort of version information in the downloaded swatch, so we could provide sort of migration guide, be it manual, but still doable!

On the documentation -- we'll fix that for 2022 R1 and we'll also detail how swatches work in detail.