Material Theme

Elevation in the Telerik and Kendo UI Material Theme

The elevation system in the Telerik and Kendo UI Material theme enables you to easily define and customize shadows, allowing you to achieve effects like lift and depth and ensuring consistency and adaptability for your design needs.

This article explains how to configure the elevation values specifically in the Telerik and Kendo UI Material theme. To learn how the Telerik and Kendo UI design system implements elevation through elevation levels and shadow layers, see the Elevation Overview article.

Default Configuration

By default, the elevation in the Telerik and Kendo UI Material theme is configured with a set of predefined values, which are structured in the $kendo-elevation Sass map:

Usage

You can use the $kendo-elevation map as is or customize it to fit your specific design needs.

To use the predefined values, utilize either of the following approaches:

• Use the Sass map—Import the theme and apply the desired elevation level to your element:

  @use 'sass:map';
  
  // First, import the Material theme.
  @import "@progress/kendo-theme-material/dist/all.scss";
  
  .my-element {
  box-shadow: map.get($kendo-elevation, 3); // Then, apply the default level 3 shadow to .my-element.
  }
  

• Use custom CSS properties—Utilize the k-elevation() function, which returns a unique CSS variable:

  // First, import the Material theme.
  @import "@progress/kendo-theme-material/dist/all.scss";
  
  .my-element {
  box-shadow: k-elevation(3); // Apply default level 3 shadow to .my-element.
  }
  

Customization

Customizing the $kendo-elevation Sass map allows you to extend the available elevation levels and tailor them to your specific requirements by modifying existing values, creating new values, or removing existing values.

Modifying Existing Values

If most of the default elevation values match your design needs, you don't need to redeclare all the values in the Sass map. Identify the elevation levels that need changes and modify them.

// Modify the elevation map before importing the theme.
$kendo-elevation: (
6: (
0px 5px 7px 0px rgba(0, 0, 0, 0.2), // For example, adjust elevation level 6.
0px 3px 14px 0px rgba(0, 0, 0, 0.12),
0px 8px 10px 0px rgba(0, 0, 0, 0.14),
),
);

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

Adding New Values

Adding new shadow intensity levels allows you to extend the elevation Sass map:

$kendo-elevation: (
10: (
0px 14px 20px rgba(0, 0, 0, 0.2), // Add a new level 10 shadow intensity.
0px 11px 48px rgba(0, 0, 0, 0.12),
0px 30px 42px rgba(0, 0, 0, 0.14),
)
);

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

Removing Existing Values

To remove an existing shadow intensity level, set its value to null.

$kendo-elevation: (
3: null // Remove the level 3 value.
);

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