kendo-theme-material v11 not backwards compatible

2 Answers 25 Views

Styling

2 Answers, 1 is accepted

answered on 30 May 2025, 07:32 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Sean

commented on 30 May 2025, 01:57 PM | edited

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!

Emil

commented on 04 Jun 2025, 01:09 PM

Hello Sean,

Thank you for clarifying, in return I will try to do the same.

While we have made every effort complete parity between Material 2 and Material 3 was not completely possible due to the fact that M3 introduces changes to all aspects of the design system - colour, typography, border-radius, spacing and elevation.

Most notable differences would be:

Material 3 adopts soft and pastel colour palettes, moving away from the bold and saturated colours used in Material 2.
Typography in Material 3 has been updated to prioritise readability and accessibility.
Material 3 emphasises rounded edges for components.
Material 3 emphasises on increased paddings and margins to improve readability and reduce visual clutter.
Material 3 elevation has been refined with more subtle shadows and improved layering.

The Material 2 Colour swatch aims to preserve mainly the colour feel of Material 2 while still benefiting from the modernised Material 3 design system.

Regards,
Emil
Progress Telerik

Sean

commented on 04 Jun 2025, 01:41 PM

I'm sorry to hear that. Those changes break a lot in my existing applications.

How long will version 10.5 of the material theme be compatible with later version of the Kendo Angular components? Right now I'm using latest with 10.5 so our UI isn't completely messed up.

Thanks

Emil

commented on 09 Jun 2025, 08:02 AM

Hello Sean,

Thank you for your feedback - we completely understand your concern. The transition to Material 3 has introduced challenges for many teams, including ours. It is a significant shift, and we recognise that it can disrupt existing applications.

That said, aligning with Material 3 is an important step towards staying current with evolving design standards and maintaining long-term support for modern frameworks.

Regarding the versioning, you can find some useful information on the following page.

Additionally, you could also try customising the rest of the modules of the Telerik and Kendo UI Material theme in order to align more closely to Material 2.

More information about customising each module can be found in our official documentation.

Regards,
Emil
Progress Telerik

Sean

commented on 10 Jun 2025, 02:17 PM

Emil,

I appreciate the reply; however your response doesn't solve the problem. Google has NOT deprecated Material 2 (i.e. I can use Material 2 with Angular Material components TODAY)...and it is incredibly aggressive for Telerik to do so at this point, especially while providing such abstract feedback for a development team to "try to customize" use your new Material3-based SCSS without application being flat out broken. Would you be a happy customer in that situation? Of course not. Respectfully, your challenges are bought and paid for by customers licensing your products. What is wholly unacceptable are the challenges you've presented us as long-time licensed customers. The right thing for you and your team at Telerik to do is either create a specific Material 2 -based theme until such time that the Google Angular Material team deprecates v2, or at the VERY LEAST create specific instructions along with sample code to get there. I would appreciate if you would pass this feedback along to your team to at least consider what I'm saying. In the meantime, we will open up a support ticket to get this resolved because we simply have no immediate path forward with the options you're giving us.

Thanks,

Sean