Elevation in the Telerik and Kendo UI Fluent Theme
The elevation system in the Telerik and Kendo UI Fluent 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 Fluent 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 Fluent theme is configured with a set of predefined values, which are structured in the $kendo-elevation
Sass map:
$kendo-elevation: (
1: (
0 0.3px 0.9px rgba(0, 0, 0, 0.1),
0 1.6px 3.6px rgba(0, 0, 0, 0.13),
),
2: (
0 0.6px 1.8px rgba(0, 0, 0, 0.1),
0 3.2px 7.2px rgba(0, 0, 0, 0.13),
),
3: (
0 0.9px 2.7px rgba(0, 0, 0, 0.1),
0 4.8px 10.8px rgba(0, 0, 0, 0.13),
),
4: (
0 1.2px 3.6px rgba(0, 0, 0, 0.1),
0 6.4px 14.4px rgba(0, 0, 0, 0.13),
),
5: (
0 1.8px 5.4px rgba(0, 0, 0, 0.1),
0 9.6px 21.6px rgba(0, 0, 0, 0.13),
),
6: (
0 2.4px 7.2px rgba(0, 0, 0, 0.18),
0 12.8px 28.8px rgba(0, 0, 0, 0.22),
),
7: (
0 3.2px 10.8px rgba(0, 0, 0, 0.18),
0 19.2px 43.2px rgba(0, 0, 0, 0.22),
),
8: (
0 4.8px 14.4px rgba(0, 0, 0, 0.18),
0 25.6px 57.6px rgba(0, 0, 0, 0.22),
),
9: (
0 6.4px 18px rgba(0, 0, 0, 0.18),
0 32px 72px rgba(0, 0, 0, 0.22),
),
) !default;
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 Fluent theme. @use "@progress/kendo-theme-fluent/scss/index.scss" as *; @include config(); @include styles(); .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 Fluent theme. @use "@progress/kendo-theme-fluent/scss/index.scss" as *; @include config(); @include styles(); .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.
@use "@progress/kendo-theme-fluent/scss/index.scss" as * with (
$kendo-elevation: (
4: (
0 2px 4px rgba(0, 0, 0, 0.1), // For example, adjust elevation level 4.
0 6px 14px rgba(0, 0, 0, 0.13)
)
)
);
@include config();
@include styles();
Adding New Values
Adding new shadow intensity levels allows you to extend the elevation Sass map:
@use "@progress/kendo-theme-fluent/scss/index.scss" as * with (
$kendo-elevation: (
10: (
0 8.2px 18px rgba(0, 0, 0, 0.18), // Add a new level 10 shadow intensity.
0 38px 76px rgba(0, 0, 0, 0.22),
)
)
);
@include config();
@include styles();
Removing Existing Values
To remove an existing shadow intensity level, set its value to null
.
@use "@progress/kendo-theme-fluent/scss/index.scss" as * with (
$kendo-elevation: (
3: null // Remove the level 3 value.
)
);
@include config();
@include styles();