Material 3 and Theming Improvements
The v11.0.0 release brings a major update to the Telerik and Kendo UI Material Theme, aligning it with the Material 3 design system and introducing a refreshed look for the UI components. The support for the legacy color system was also removed, which completes the transition to a modern, token-based theming infrastructure. Read on for a full overview of changes, differences, and migration impacts.
What’s New in the Material 3 Design System
The Material 3 design system introduces changes that cover all aspects of the design system—color, typography, border-radius, spacing, and elevation.
- Color System—Material 3 adopts soft and pastel color palettes, moving away from the bold and saturated colors of Material 2. This change creates a more balanced visual experience.
- Typography—Typography in Material 3 has been updated to prioritize readability and accessibility. The new typography styles feature improved spacing, weight, and size adjustments. Additionally, Material 3 adopts sentence case for text across all components, moving away from the use of all-uppercase text.
- Border radius—Material 3 emphasizes rounded edges for components, such as Cards, Popups, Windows, and Dialogs.
- Spacing—Material 3 emphasizes on increased paddings and margins to improve readability and reduce visual clutter.
- Elevation—The elevation system in Material 3 has been refined with more subtle shadows and improved layering. Shadows are now softer, less pronounced and used more sparingly.
Differences between the Material 3 Design System and the Telerik and Kendo UI Material Theme
While we have made every effort to align with the Material 3 guidelines, there are a few differences due to the specifics of our components and design system:
- Border-radius—Material 3 specifies fully rounded edges for major components like Buttons. To maintain consistency with the Kendo UI design system, we have retained the
md(medium) border radius for Buttons by default. However, the Kendo UI Button component provides an option for rounding through its configuration options. - FAB—the FAB component in the Telerik and Kendo UI Material theme retains a consistent icon size, differing from the dynamic icon sizing specified in the Material 3 design guidelines. This behavior ensures compatibility with the design and proportions of icons used across all Kendo UI components.
- Surface colors—Material 3 introduces five surface color roles as part of its updated color system, while the Kendo UI design system consists of only two. However, we successfully achieved a similar sense of layering and hierarchy across our components using a combination of colors and shadows.
- Focus indicators—The focus indications for buttons, suggested by the Material 3 guidelines lack sufficient contrast and visibility. To ensure an enough contrast and accessible experience, the Telerik and Kendo UI Material theme introduced custom focus styles for buttons that provide clear and consistent visual feedback across all states.
Color Swatch for the Material 2 Design System
The Telerik and Kendo UI Material theme has been updated to align with the Material 3 design system guidelines, which introduce significant changes in every aspect of the design system compared to the Material 2 guidelines. We created a dedicated Material 2 color swatch to preserve the familiar color feel of Material 2 while benefiting from the modernized design system of Material 3.
Removing Support for the Legacy Color System
As part of the ongoing modernization of the Telerik and Kendo UI Themes, the legacy color system has been officially removed with version 11.0.0. This includes the complete elimination of old Sass variables (e.g., $kendo-color-primary, $kendo-color-secondary, $kendo-component-color, etc.) that were part of the previous theming architecture.
Why Was It Removed?
The legacy color system was deprecated in earlier releases and replaced by a more robust, design-token-based color infrastructure. This removal simplifies the code base, improves maintainability and ensures full alignment with the new color foundations.
What Is the Impact?
- Legacy Sass variables are no longer available. Any remaining references to them will result in build-time errors.
- Custom themes must use the new token-based system, for example,
k-color(primary),k-color(secondary),k-color(base), and so on. - Internal utilities and component styles have been fully refactored to rely solely on the update system.
This change finalizes the transition to the new color architecture and clears the way for future enhancements in theming and accessibility.
