v14.0.0

Starting with Kendo Themes v14.0.0, the Meridian theme becomes the recommended default theme for new Telerik and Kendo UI applications, while the Default theme moves to maintenance mode.

Meridian Theme Introduction and Default Theme Maintenance Mode

Starting with Kendo Themes v14.0.0, the new Telerik and Kendo UI Meridian theme becomes the recommended default theme for new applications. At the same time, the Telerik and Kendo UI Default theme moves to maintenance mode.

This change affects how new projects should be styled going forward. Existing applications that already use the Default theme can continue doing so and migrate to Meridian when it fits their roadmap.

For installation and usage details, see the Meridian theme overview.

What Changed?

  • @progress/kendo-theme-meridian is now the recommended starting theme for new Telerik and Kendo UI applications.
  • @progress/kendo-theme-default is no longer the recommended default choice for new projects.
  • The Default theme is now in maintenance mode.
  • The Default theme will continue to receive bug fixes, compatibility updates, and styles for newly introduced components, but it will no longer receive new visual redesigns or new design concepts.

What Does Maintenance Mode Mean?

The Default theme remains fully supported for production applications. Maintenance mode does not mean deprecation or removal. It means:

  • Existing applications can continue using the Default theme without immediate migration.
  • New components and product updates will remain compatible with the Default theme.
  • Future visual evolution of the Telerik and Kendo UI design language will happen in the Meridian theme.

If your application depends on the current visual appearance of the Default theme, no immediate action is required.

What Is the Impact?

The breaking change is primarily architectural and guidance-related rather than a hard runtime break:

  • New applications that previously started with @progress/kendo-theme-default should now start with @progress/kendo-theme-meridian.
  • Internal project templates, starter kits, and setup guides that assume the Default theme as the standard starting point should be updated.
  • Teams that want to adopt the latest visual direction of Telerik and Kendo UI should plan a migration from Default to Meridian.

Existing applications do not have to switch themes as part of the v14.0.0 upgrade.

New Projects Prior to v14.0.0

Before v14.0.0, the most common starting point for new applications was the Default theme:

npm install --save @progress/kendo-theme-default
@use '@progress/kendo-theme-default/scss/all.scss' as *;
<link
rel="stylesheet"
href="https://unpkg.com/@progress/kendo-theme-default@14.0.0/dist/default-main.css"
/>

New Projects in v14.0.0 and Later

Starting with v14.0.0, new applications should use the Meridian theme instead:

npm install --save @progress/kendo-theme-meridian
@use '@progress/kendo-theme-meridian/scss/all.scss' as *;
<link
rel="stylesheet"
href="https://unpkg.com/@progress/kendo-theme-meridian@14.0.0/dist/meridian-main.css"
/>

How to Migrate?

If you want to move an existing application from Default to Meridian, start by replacing the theme package reference in your setup.

Migrating the NPM Package Reference

- npm install --save @progress/kendo-theme-default
+ npm install --save @progress/kendo-theme-meridian

Migrating the SCSS Import

- @use '@progress/kendo-theme-default/scss/all.scss' as *;
+ @use '@progress/kendo-theme-meridian/scss/all.scss' as *;

Migrating the CDN Reference

- <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@14.0.0/dist/default-main.css" />
+ <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-meridian@14.0.0/dist/meridian-main.css" />

Foundational Module Changes

The v14.0.0 release also introduces several foundational changes across the theme packages. These updates affect how core styling primitives such as border radius, spacing, and elevation are defined and consumed.

Border Radius Changes

In v14.0.0, the border-radius scale was refactored across the theme packages to derive from a dedicated base token instead of borrowing values from the spacing map.

The new implementation introduces $kendo-border-radius-base and generates the rest of the radius scale from it. The exact base value differs between themes.

Before v14.0.0, the radius values were tied directly to spacing steps:

TokenPrevious definition
xsmap.get($kendo-spacing, 1px)
smmap.get($kendo-spacing, 0.5)
mdmap.get($kendo-spacing, 1)
lgmap.get($kendo-spacing, 1.5)

Starting with v14.0.0, they are derived from the base radius:

TokenNew definition
base$kendo-border-radius-base
xscalc(var(--kendo-border-radius-base) * .25)
smcalc(var(--kendo-border-radius-base) * .5)
mdvar(--kendo-border-radius-base)
lgcalc(var(--kendo-border-radius-base) * 1.5)

If your custom theme overrides rely on the old relationship between spacing and radius values, or if you override individual radius tokens assuming fixed standalone values, review those customizations when upgrading.

Spacing Changes

The spacing system was also refactored across the theme packages. A new $kendo-spacing-base token now drives the generated spacing scale, and spacing values are exposed through CSS custom properties.

Before v14.0.0, the spacing map contained hardcoded values for each step, including larger generated steps such as 25, 26, 27, 28, 29, and 30.

Starting with v14.0.0, the scale is generated from a base step and the default generated range has been reduced to 24 values:

ItemNew definition
base$kendo-spacing-base: 0.25rem
0.5calc(0.5 * var(--kendo-spacing-base))
1calc(1 * var(--kendo-spacing-base))
1.5calc(1.5 * var(--kendo-spacing-base))
......
24calc(24 * var(--kendo-spacing-base))

Elevation Changes

In v14.0.0, the elevation scale across the themes was reduced from nine levels to five. As part of this update, the higher elevation levels (six through nine) were removed and the usage across components was adjusted to use the new range.

If your theme customizations use elevation values above 5, update them to the new scale and verify the resulting visual hierarchy for surfaces such as Windows, ActionSheets, AppBars, BottomNavigation, FABs, and overlays.

Feedback