v10.0.0

New Dart Sass Syntax

The main objective of this version release was to update the syntax of all Telerik and Kendo UI theme products, which includes the CSS utilities and Font icons, to Dart Sass. This update brings several important enhancements:

• Significantly decreased Telerik and Kendo UI themes bundle size.
• Faster compilation for the Telerik and Kendo UI themes.
• Improved capability for future development and maintenance due to the adoption of the Dart Sass module system.
• Resolution of all deprecation warnings during the Telerik and Kendo UI themes compilation.
• Bug fixes and compatibility with the latest Sass language features.
• Enhanced compatibility with modern JavaScript frameworks and build tools (e.g., Webpack, Vite, Next.js), ensuring smooth integration into modern development workflows.
• Better alignment with CSS specifications, facilitating the creation of future-proof styles.

The adoption of the new Dart Sass syntax in Telerik and Kendo UI themes introduces some notable differences in how the themes are used. These differences primarily concern the methods for importing and customizing the themes. Additionally, this update removes the dependency on twbs/bootstrap from the Telerik and Kendo UI Bootstrap theme.

For detailed information on how customization and importing work with v10.0.0, please refer to the following guides:

• Migration to Dart Sass
• Detaching twbs/bootstrap

Migration to Dart Sass

With the deprecation of the @import rule and the transition to Dart Sass syntax for Telerik and Kendo UI Themes, there are several important changes in how the themes are used. These changes primarily concern the methods of importing and customizing the themes and are outlined below. Please review these guidelines and update your code accordingly.

Importing the Theme

The styling import has some minor changes, and the main difference apart from the dart-sass @use syntax is that now the components import is done by including the components mixins after the theme import. You can find all the component mixins in the .../scss/index.scss file of each theme. See the provided examples below:

• Old syntax (used with theme versions before v10.0.0):

  // Import the entire theme
  @import '@progress/kendo-theme-default/dist/all.scss';

  // Import Button and Grid components only
  @import '@progress/kendo-theme-default/scss/button/_index.scss';
  @import '@progress/kendo-theme-default/scss/grid/_index.scss';

• New syntax (used with theme version v10.0.0 and after):

  // Import the entire theme
  @use '@progress/kendo-theme-default/scss/all.scss' as *;

  @use '@progress/kendo-theme-default/scss/index.scss' as *;
  
  // Import Button and Grid components only
  @include kendo-button--styles();
  @include kendo-grid--styles();

Customizing Variables

The customization of the component variables remains mostly the same. The main difference is that now the variables that customize the components are passed inside the with block of the @use Sass rule. See the provided examples below:

• Old syntax (used with theme versions before v10.0.0):

  $kendo-button-bg: #ff69b4;
  $kendo-panelbar-bg: #1bb822;
  
  @import '@progress/kendo-theme-default/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-button-bg: #ff69b4,
    $kendo-body-bg: #1bb822
  );

Customizing Foundation Modules

The customization of the Foundation Modules remains the same, except that the variables are now passed within the with block of the @use Sass rule. See the examples of each module below:

Spacing

Here is an example of how to modify the $kendo-spacing map:

• Old syntax (used with theme versions before v10.0.0):

  $kendo-spacing: (
    2: 8px,
    6: 12px
  );
  
  @import '@progress/kendo-theme-default/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-spacing: (
      2: 8px,
      6: 12px
    )
  );

Border Radius

Here is an example of how to modify the $kendo-border-radii map:

• Old syntax (used with theme versions before v10.0.0):

  $kendo-border-radii: (
    md: 0.5rem,
    lg: 1rem
  );
  
  @import '@progress/kendo-theme-default/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-border-radii: (
      md: 0.5rem,
      lg: 1rem
    )
  );

Elevation

Here is an example of how to modify the $kendo-elevation map:

• Old syntax (used with theme versions before v10.0.0):

  $kendo-elevation: (
    6: (
      0px 5px 7px 0px rgba(0, 0, 0, 0.2),
      0px 3px 14px 0px rgba(0, 0, 0, 0.12),
      0px 8px 10px 0px rgba(0, 0, 0, 0.14)
    )
  );
  
  @import '@progress/kendo-theme-default/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-elevation: (
      6: (
        0px 5px 7px 0px rgba(0, 0, 0, 0.2),
        0px 3px 14px 0px rgba(0, 0, 0, 0.12),
        0px 8px 10px 0px rgba(0, 0, 0, 0.14)
      )
    )
  );

Typography

Here is an example of how to modify the $kendo-font-sizes map:

• Old syntax (used with theme versions before v10.0.0):

  $kendo-enable-typography: true;
  $kendo-font-sizes: (
    xs: 16px
  );
  
  @import '@progress/kendo-theme-default/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-enable-typography: true,
    $kendo-font-sizes: (
      xs: 16px
    )
  );

Color System

Here is an example of how to modify the $kendo-colors map:

• Old syntax (used with theme versions before v10.0.0):

  // Modify the colors map before importing the theme.
  $kendo-colors: (
    app-surface: #f8f8f8,
    on-app-surface: #111111,
    primary-subtle: #ffeceb,
    primary-subtle-hover: #ffdedb,
    primary-subtle-active: #ffc8c4,
    primary: #ff6358,
    primary-hover: #ea5a51,
    primary-active: #d45349,
    primary-emphasis: #ff9d97,
    primary-on-subtle: #5c201c,
    on-primary: #ffffff,
    primary-on-surface: #ff6358,
  );
  
  @import '@progress/kendo-theme-default/scss/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  // Use the theme with the modified $kendo-colors map.
  @use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-colors: (
      app-surface: #f8f8f8,
      on-app-surface: #111111,
      primary-subtle: #ffeceb,
      primary-subtle-hover: #ffdedb,
      primary-subtle-active: #ffc8c4,
      primary: #ff6358,
      primary-hover: #ea5a51,
      primary-active: #d45349,
      primary-emphasis: #ff9d97,
      primary-on-subtle: #5c201c,
      on-primary: #ffffff,
      primary-on-surface: #ff6358
    )
  );

This example demonstrates modifying the $kendo-colors map while using the k-generate-color function to create customized primary, secondary, and base colors:

• Old syntax (used with theme versions before v10.0.0):

  @import '@progress/kendo-theme-core/scss/functions/index.import.scss';
  
  $kendo-colors: ();
  $kendo-colors: k-map-merge(
    $kendo-colors,
    (
      app-surface: #f8f8f8,
      on-app-surface: #111111,
    ),
    k-generate-color-variations('primary', #ff6358, 'default'),
    k-generate-color-variations('secondary', #e51a5f, 'default'),
    k-generate-color-variations('base', #eaeaea, 'default')
  );
  @import '@progress/kendo-theme-default/dist/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use "sass:map";
  @use "@progress/kendo-theme-default/scss/index.scss" as *;
  
  $kendo-colors: map.merge(
  $kendo-colors,
  (
    app-surface: #f8f8f8,
    on-app-surface: #111111
  )
  );
  $kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #9c27b0, 'default'));
  $kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #e51a5f, 'default'));
  $kendo-colors: map.merge($kendo-colors, k-generate-color-variations('base', #eaeaea, 'default'));
  
  @include kendo-theme--styles();

CSS Utilities

The CSS Utilities have been updated to the new Dart Sass syntax as well. Here is the comparison of the old and new syntax:

• Old syntax (used with theme versions before v10.0.0):

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

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-utils/scss/all.scss' as *;

For more information, refer to the CSS Utilities page.

Font icons

The Font icons import syntax and customizations have also been updated to the new Dart Sass syntax:

• Old syntax (used with theme versions before v10.0.0):

  @import '@progress/kendo-font-icons/scss/all.scss';

• New syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-font-icons/scss/all.scss' as *;

For more information, refer to the Font Icons page.

Detaching twbs/bootstrap

With v10.0.0 of the Telerik and Kendo UI Bootstrap theme, the theme is no longer dependent of the twbs/bootstrap. This means that customizing bootstrap scss variables will no longer have an effect on the Telerik and Kendo UI Bootstrap theme. However, Telerik and Kendo UI Bootstrap theme styles will remain unchanged and will provide the same look and feel through variables that have the same values as those in twbs/bootstrap.

To continue using twbs/bootstrap with the Telerik and Kendo UI Bootstrap theme, ensure that you add it as a dependency in your project by following the official documentation, and use it in your project:

Importing the Theme

• Old import syntax (used with theme versions before v10.0.0):

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

• New import syntax (used with theme version v10.0.0 and after):

  @use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;
  @use 'bootstrap/scss/bootstrap' as *;