kendo-theme-material v11 not backwards compatible

[Sean]

I was previously setting primary, secondary, and error colors and then importing the all.scss from kendo-theme-material - it worked great.

Now, I'm trying to import the material-2.scss and most of the controls have styling issues, almost like it is still trying to render Material 3 styles which take up a lot more space.

If I want to import like this, am I doing something wrong, or is the material-2 scss simply not working yet?

 

$kendo-color-primary: COLORGOESHERE;

$kendo-color-secondary: COLORGOESHERE;

$kendo-color-error: COLORGOESHERE;

@import '@progress/kendo-theme-material/dist/material-2.scss';

//@import '@progress/kendo-theme-material/dist/all.scss';

[Emil]

Hi Sean,

With the last  few major releases of the Telerik and Kendo UI Themes there have been a couple of noticeable changes, which I will touch on below in order to answer your question.

Firstly with v10.0.0 the Telerik and Kendo UI Themes have adopted the new Dart Sass syntax due to the discontinuation of node-sass and the deprecation of @import.

This would mean that there are several important differences mostly related to how you would import and customize the themes.

To give you an example:

 

// Old import syntax
@import '@progress/kendo-theme-material/dist/all.scss';

// New Dart Sass import syntax
@use '@progress/kendo-theme-material/dist/all.scss' as *;

Secondly with v11.0.0 there are two distinct major changes - aligning with Material 3 design guidelines and removing the support for the Legacy Colour system.

Something to note here is that Material 3 introduces significant changes in every aspect of the design compared to Material 2. For this reason we have created a Material 2 colour swatch which preserves the colour feel.

Going back to your example and taking the above into consideration, here is how your customization will look like:

 

@use '@progress/kendo-theme-material/dist/material-2.scss' as * with (
    $kendo-colors: (
        primary: COLORGOESHERE,
        secondary: COLORGOESHERE,
        error: COLORGOESHERE,
    )
);

 

For more information about variable and module customization, please refer to this dedicated article.

Should you have any more questions, please don't hesitate to reach out.

Regards,
Emil
Progress Telerik

[Sean]

Thank you so much for getting back to me.  I used your example:

@use '@progress/kendo-theme-material/dist/material-2.scss' as * with (
    $kendo-colors: (
        primary: COLORGOESHERE,
        secondary: COLORGOESHERE,
        error: COLORGOESHERE,
    )
);

Unfortunately, the end result is the same - using the material-2 SCSS with v11 does NOT match the look and feel of the material theme in v10.5.  My app now renders Kendo components differently and not apples to apples. 

The problem I'm trying to solve is: how do I get my grids, dropdowns, calendars, etc. to match apples-to-apples with v11 using the new material-2 with v10.5 material which was also based on Material 2?

Thank you!