@progress/kendo-theme-fluent 5.12.1-dev.2 → 5.12.1-dev.3

package/scss/colorgradient/index.scss

@@ -23,7 +23,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin colorgradient-styles() {
     @include module.render( "colorgradient" ) {
-        @include kendo-colorgradient--layout();
-        @include kendo-colorgradient--theme();
+        @include kendo-color-gradient--layout();
+        @include kendo-color-gradient--theme();
     }
 }

package/scss/colorpalette/_layout.scss

@@ -1,16 +1,16 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorpalette--layout() {
+@mixin kendo-color-palette--layout() {
 
     // ColorPalette
     .k-colorpalette {
         border-width: 0;
         box-sizing: border-box;
         outline: 0;
-        font-size: var( --kendo-colorpalette-font-size, #{$kendo-colorpalette-font-size} );
-        font-family: var( --kendo-colorpalette-font-family, #{$kendo-colorpalette-font-family} );
-        line-height: var( --kendo-colorpalette-line-height, #{$kendo-colorpalette-line-height} );
+        font-size: var( --kendo-color-palette-font-size, #{$kendo-color-palette-font-size} );
+        font-family: var( --kendo-color-palette-font-family, #{$kendo-color-palette-font-family} );
+        line-height: var( --kendo-color-palette-line-height, #{$kendo-color-palette-line-height} );
         display: inline-flex;
         position: relative;
         -webkit-touch-callout: none;
@@ -37,10 +37,10 @@
 
     // Tile
     .k-colorpalette-tile {
-        outline-width: var( --kendo-colorpalette-tile-outline-width, #{$kendo-colorpalette-tile-outline-width} );
-        outline-style: var( --kendo-colorpalette-tile-outline-style, #{$kendo-colorpalette-tile-outline-style} );
-        width: var( --kendo-colorpalette-tile-width, #{$kendo-colorpalette-tile-width} );
-        height: var( --kendo-colorpalette-tile-height, #{$kendo-colorpalette-tile-height} );
+        outline-width: var( --kendo-color-palette-tile-outline-width, #{$kendo-color-palette-tile-outline-width} );
+        outline-style: var( --kendo-color-palette-tile-outline-style, #{$kendo-color-palette-tile-outline-style} );
+        width: var( --kendo-color-palette-tile-width, #{$kendo-color-palette-tile-width} );
+        height: var( --kendo-color-palette-tile-height, #{$kendo-color-palette-tile-height} );
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;

package/scss/colorpalette/_theme.scss

@@ -1,42 +1,42 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorpalette--theme() {
+@mixin kendo-color-palette--theme() {
 
     // Tile
     .k-colorpalette-tile {
-        outline-color: var( --kendo-colorpalette-tile-outline, #{$kendo-colorpalette-tile-outline} );
+        outline-color: var( --kendo-color-palette-tile-outline, #{$kendo-color-palette-tile-outline} );
 
         // Hover
         &:hover,
         &.k-hover {
             @include box-shadow(
-                var( --kendo-colorpalette-tile-hover-shadow, #{$kendo-colorpalette-tile-hover-shadow} )
+                var( --kendo-color-palette-tile-hover-shadow, #{$kendo-color-palette-tile-hover-shadow} )
             );
-            outline-color: var( --kendo-colorpalette-tile-hover-outline, #{$kendo-colorpalette-tile-hover-outline} );
+            outline-color: var( --kendo-color-palette-tile-hover-outline, #{$kendo-color-palette-tile-hover-outline} );
         }
 
         // Focus
         &:focus,
         &.k-focus {
             @include box-shadow(
-                var( --kendo-colorpalette-tile-focus-shadow, #{$kendo-colorpalette-tile-focus-shadow} )
+                var( --kendo-color-palette-tile-focus-shadow, #{$kendo-color-palette-tile-focus-shadow} )
             );
-            outline-color: var( --kendo-colorpalette-tile-focus-outline, #{$kendo-colorpalette-tile-focus-outline} );
+            outline-color: var( --kendo-color-palette-tile-focus-outline, #{$kendo-color-palette-tile-focus-outline} );
         }
 
         // Selected
         &.k-selected {
             @include box-shadow(
-                var( --kendo-colorpalette-tile-selected-shadow, #{$kendo-colorpalette-tile-selected-shadow} )
+                var( --kendo-color-palette-tile-selected-shadow, #{$kendo-color-palette-tile-selected-shadow} )
             );
-            outline-color: var( --kendo-colorpalette-tile-selected-outline, #{$kendo-colorpalette-tile-selected-outline} );
+            outline-color: var( --kendo-color-palette-tile-selected-outline, #{$kendo-color-palette-tile-selected-outline} );
         }
 
         // Selected hover/focus
         &.k-selected:hover,
         &.k-selected:focus {
-            outline-color: var( --kendo-colorpalette-tile-selected-hover-outline, #{$kendo-colorpalette-tile-selected-hover-outline} );
+            outline-color: var( --kendo-color-palette-tile-selected-hover-outline, #{$kendo-color-palette-tile-selected-hover-outline} );
         }
     }
 

package/scss/colorpalette/_variables.scss

@@ -3,47 +3,47 @@
 
 /// Font family of the color palette.
 /// @group colorpalette
-$kendo-colorpalette-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the color palette.
 /// @group colorpalette
-$kendo-colorpalette-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the color palette.
 /// @group colorpalette
-$kendo-colorpalette-line-height: 0 !default;
+$kendo-color-palette-line-height: 0 !default;
 
 /// Outline width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline-width: 1px !default;
+$kendo-color-palette-tile-outline-width: 1px !default;
 /// Outline style of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline-style: solid !default;
+$kendo-color-palette-tile-outline-style: solid !default;
 /// Outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline: transparent !default;
+$kendo-color-palette-tile-outline: transparent !default;
 /// Width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-width: map.get( $kendo-spacing, 6 ) !default;
+$kendo-color-palette-tile-width: map.get( $kendo-spacing, 6 ) !default;
 /// Height of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-height: $kendo-colorpalette-tile-width !default;
+$kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// Focus outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
+$kendo-color-palette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
 /// Focus shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
+$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
 /// Hover outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-palette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
 /// Hover shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;
+$kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;
 /// Selected outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-outline: $kendo-colorpalette-tile-hover-outline !default;
+$kendo-color-palette-tile-selected-outline: $kendo-color-palette-tile-hover-outline !default;
 /// Selected shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-shadow: $kendo-colorpalette-tile-hover-shadow !default;
+$kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-hover-shadow !default;
 /// Selected hover outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-hover-outline: $kendo-colorpalette-tile-focus-outline !default;
+$kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focus-outline !default;

package/scss/colorpalette/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin colorpalette-styles() {
     @include module.render( "colorpalette" ) {
-        @include kendo-colorpalette--layout();
-        @include kendo-colorpalette--theme();
+        @include kendo-color-palette--layout();
+        @include kendo-color-palette--theme();
     }
 }

package/scss/core/_variables.scss

@@ -64,7 +64,7 @@ $kendo-font-size-xl: 20px !default;
 $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
 
 
-/// Line height used along with $font-size.
+/// Line height used along with $kendo-font-size.
 $kendo-line-height: math.div( 20, 14 ) !default;
 $kendo-line-height-xs: 1 !default;
 $kendo-line-height-sm: 1.25 !default;
@@ -80,7 +80,7 @@ $kendo-font-weight-bold: 600 !default;
 
 $kendo-letter-spacing: normal !default;
 
-$default-scrollbar-width: 17px !default;
+$kendo-scrollbar-width: 17px !default;
 
 /// Border radius for all components.
 $kendo-border-radius: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero

package/scss/core/mixins/_hide-scrollbar.scss

@@ -2,7 +2,7 @@
 // Infinite calendar and timepicker
 @mixin hide-scrollbar($max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
-    $scrollbar-size: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
 
     padding-inline-end: $max-scrollbar;

package/scss/core/mixins/_typography.scss

@@ -1,17 +1,7 @@
-@mixin typography($font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null) {
-    @if $font-size {
-        font-size: $font-size;
-    }
-    @if $font-family {
-        font-family: $font-family;
-    }
-    @if $line-height {
-        line-height: $line-height;
-    }
-    @if $font-weight {
-        font-weight: $font-weight;
-    }
-    @if $letter-spacing {
-        letter-spacing: $letter-spacing;
-    }
+@mixin typography( $font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
+    font-size: $font-size;
+    font-family: $font-family;
+    line-height: $line-height;
+    font-weight: $font-weight;
+    letter-spacing: $letter-spacing;
 }

package/scss/dataviz/_layout.scss

@@ -344,10 +344,10 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
+            inset-block-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
+            inset-inline-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
         }
 
 
@@ -442,7 +442,7 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: get-theme-color( neutral, 30 )
+        gauge-track: get-theme-color-var( neutral-30 )
     );
 
     @each $name, $value in $exported {

package/scss/dataviz/_variables.scss

@@ -3,51 +3,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: get-theme-color( series-a, 100 ) !default;
-$kendo-series-a-dark: get-theme-color( series-a, 130 ) !default;
-$kendo-series-a-darker: get-theme-color( series-a, 160 ) !default;
-$kendo-series-a-light: get-theme-color( series-a, 70 ) !default;
-$kendo-series-a-lighter: get-theme-color( series-a, 40 ) !default;
+$kendo-series-a: get-theme-color-var( series-a-100 ) !default;
+$kendo-series-a-dark: get-theme-color-var( series-a-130 ) !default;
+$kendo-series-a-darker: get-theme-color-var( series-a-160 ) !default;
+$kendo-series-a-light: get-theme-color-var( series-a-70 ) !default;
+$kendo-series-a-lighter: get-theme-color-var( series-a-40 ) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: get-theme-color( series-b, 100 ) !default;
-$kendo-series-b-dark: get-theme-color( series-b, 130 ) !default;
-$kendo-series-b-darker: get-theme-color( series-b, 160 ) !default;
-$kendo-series-b-light: get-theme-color( series-b, 70 ) !default;
-$kendo-series-b-lighter: get-theme-color( series-b, 40 ) !default;
+$kendo-series-b: get-theme-color-var( series-b-100 ) !default;
+$kendo-series-b-dark: get-theme-color-var( series-b-130 ) !default;
+$kendo-series-b-darker: get-theme-color-var( series-b-160 ) !default;
+$kendo-series-b-light: get-theme-color-var( series-b-70 ) !default;
+$kendo-series-b-lighter: get-theme-color-var( series-b-40 ) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: get-theme-color( series-c, 100 ) !default;
-$kendo-series-c-dark: get-theme-color( series-c, 130 ) !default;
-$kendo-series-c-darker: get-theme-color( series-c, 160 ) !default;
-$kendo-series-c-light: get-theme-color( series-c, 70 ) !default;
-$kendo-series-c-lighter: get-theme-color( series-c, 40 ) !default;
+$kendo-series-c: get-theme-color-var( series-c-100 ) !default;
+$kendo-series-c-dark: get-theme-color-var( series-c-130 ) !default;
+$kendo-series-c-darker: get-theme-color-var( series-c-160 ) !default;
+$kendo-series-c-light: get-theme-color-var( series-c-70 ) !default;
+$kendo-series-c-lighter: get-theme-color-var( series-c-40 ) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: get-theme-color( series-d, 100 ) !default;
-$kendo-series-d-dark: get-theme-color( series-d, 130 ) !default;
-$kendo-series-d-darker: get-theme-color( series-d, 160 ) !default;
-$kendo-series-d-light: get-theme-color( series-d, 70 ) !default;
-$kendo-series-d-lighter: get-theme-color( series-d, 40 ) !default;
+$kendo-series-d: get-theme-color-var( series-d-100 ) !default;
+$kendo-series-d-dark: get-theme-color-var( series-d-130 ) !default;
+$kendo-series-d-darker: get-theme-color-var( series-d-160 ) !default;
+$kendo-series-d-light: get-theme-color-var( series-d-70 ) !default;
+$kendo-series-d-lighter: get-theme-color-var( series-d-40 ) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: get-theme-color( series-e, 100 ) !default;
-$kendo-series-e-dark: get-theme-color( series-e, 130 ) !default;
-$kendo-series-e-darker: get-theme-color( series-e, 160 ) !default;
-$kendo-series-e-light: get-theme-color( series-e, 70 ) !default;
-$kendo-series-e-lighter: get-theme-color( series-e, 40 ) !default;
+$kendo-series-e: get-theme-color-var( series-e-100 ) !default;
+$kendo-series-e-dark: get-theme-color-var( series-e-130 ) !default;
+$kendo-series-e-darker: get-theme-color-var( series-e-60 ) !default;
+$kendo-series-e-light: get-theme-color-var( series-e-70 ) !default;
+$kendo-series-e-lighter: get-theme-color-var( series-e-40 ) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: get-theme-color( series-f, 100 ) !default;
-$kendo-series-f-dark: get-theme-color( series-f, 130 ) !default;
-$kendo-series-f-darker: get-theme-color( series-f, 160 ) !default;
-$kendo-series-f-light: get-theme-color( series-f, 70 ) !default;
-$kendo-series-f-lighter: get-theme-color( series-f, 40 ) !default;
+$kendo-series-f: get-theme-color-var( series-f-100 ) !default;
+$kendo-series-f-dark: get-theme-color-var( series-f-130 ) !default;
+$kendo-series-f-darker: get-theme-color-var( series-f-160 ) !default;
+$kendo-series-f-light: get-theme-color-var( series-f-70 ) !default;
+$kendo-series-f-lighter: get-theme-color-var( series-f-40 ) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -92,9 +92,9 @@ $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font-size of the chart component.
 /// @group charts
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-chart-font-size-sm: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-chart-font-size-md: var( --kendo-font-size-md, inherit ) !default;
-$kendo-chart-font-size-lg: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-chart-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-chart-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line-height of the chart component.
 /// @group charts
 $kendo-chart-line-height: var( --kendo-line-height, normal ) !default;

package/scss/dialog/_variables.scss

@@ -33,10 +33,10 @@ $kendo-dialog-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+$kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
 /// Vertical padding of the dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+$kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
 /// Width of the top border of the dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 0 !default;
@@ -46,7 +46,7 @@ $kendo-dialog-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
 
 /// Spacing between the buttons in the header of the dialog.
 /// @group dialog
-$kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $actions-padding-y
+$kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-actions-padding-y
 
 /// Box shadow around the dialog.
 /// @group dialog

package/scss/editor/_layout.scss

@@ -447,8 +447,8 @@
 
         .k-breadcrumbs-wrap {
             position: absolute;
-            inset-inline-start: $kendo-input-padding-x-md;
-            inset-block-start: $kendo-input-padding-y-md;
+            inset-inline-start: $kendo-input-md-padding-x;
+            inset-block-start: $kendo-input-md-padding-y;
 
             .k-icon {
                 position: static;

package/scss/fab/_variables.scss

@@ -22,16 +22,16 @@ $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
-$kendo-fab-padding-x-sm: math.div( $kendo-fab-padding-x, 2 ) !default;
-$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
-$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+$kendo-fab-sm-padding-x: math.div( $kendo-fab-padding-x, 2 ) !default;
+$kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
+$kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
 
 /// Vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
-$kendo-fab-padding-y-sm: math.div( $kendo-fab-padding-y, 2 ) !default;
-$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
-$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+$kendo-fab-sm-padding-y: math.div( $kendo-fab-padding-y, 2 ) !default;
+$kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
+$kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
 
 /// Offset of the focused FAB.
 /// @group floating-action-button
@@ -127,16 +127,16 @@ $kendo-fab-theme-colors: (
 /// @group floating-action-button
 $kendo-fab-sizes: (
     sm: (
-        padding-x: $kendo-fab-padding-x-sm,
-        padding-y: $kendo-fab-padding-y-sm
+        padding-x: $kendo-fab-sm-padding-x,
+        padding-y: $kendo-fab-sm-padding-y
     ),
     md: (
-        padding-x: $kendo-fab-padding-x-md,
-        padding-y: $kendo-fab-padding-y-md
+        padding-x: $kendo-fab-md-padding-x,
+        padding-y: $kendo-fab-md-padding-y
     ),
     lg: (
-        padding-x: $kendo-fab-padding-x-lg,
-        padding-y: $kendo-fab-padding-y-lg
+        padding-x: $kendo-fab-lg-padding-x,
+        padding-y: $kendo-fab-lg-padding-y
     )
 ) !default;
 

package/scss/filemanager/_layout.scss

@@ -1,16 +1,16 @@
 @use "../icon/_variables.scss"as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-filemanager--layout() {
+@mixin kendo-file-manager--layout() {
 
     // File Manager
     .k-filemanager {
-        border-width: var( --kendo-filemanager-border-width, #{$kendo-filemanager-border-width} );
+        border-width: var( --kendo-file-manager-border-width, #{$kendo-file-manager-border-width} );
         border-style: solid;
         box-sizing: border-box;
-        font-family: var( --kendo-filemanager-font-family, #{$kendo-filemanager-font-family} );
-        font-size: var( --kendo-filemanager-font-size, #{$kendo-filemanager-font-size} );
-        line-height: var( --kendo-filemanager-line-height, #{$kendo-filemanager-line-height} );
+        font-family: var( --kendo-file-manager-font-family, #{$kendo-file-manager-font-family} );
+        font-size: var( --kendo-file-manager-font-size, #{$kendo-file-manager-font-size} );
+        line-height: var( --kendo-file-manager-line-height, #{$kendo-file-manager-line-height} );
         display: flex;
         flex-flow: column nowrap;
     }
@@ -22,7 +22,7 @@
     }
     .k-filemanager-toolbar {
         border-width: 0;
-        border-bottom-width: var( --kendo-filemanager-toolbar-border-width, #{$kendo-filemanager-toolbar-border-width} );
+        border-bottom-width: var( --kendo-file-manager-toolbar-border-width, #{$kendo-file-manager-toolbar-border-width} );
         border-color: inherit;
         flex-shrink: 0;
     }
@@ -42,11 +42,11 @@
 
     // Navigation
     .k-filemanager-navigation {
-        padding-inline: var( --kendo-filemanager-navigation-padding-x, #{$kendo-filemanager-navigation-padding-x} );
-        padding-block: var( --kendo-filemanager-navigation-padding-y, #{$kendo-filemanager-navigation-padding-y} );
-        width: var( --kendo-filemanager-navigation-width, #{$kendo-filemanager-navigation-width} );
+        padding-inline: var( --kendo-file-manager-navigation-padding-x, #{$kendo-file-manager-navigation-padding-x} );
+        padding-block: var( --kendo-file-manager-navigation-padding-y, #{$kendo-file-manager-navigation-padding-y} );
+        width: var( --kendo-file-manager-navigation-width, #{$kendo-file-manager-navigation-width} );
         border-width: 0;
-        border-right-width: var( --kendo-filemanager-navigation-border-width, #{$kendo-filemanager-navigation-border-width} );
+        border-right-width: var( --kendo-file-manager-navigation-border-width, #{$kendo-file-manager-navigation-border-width} );
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -75,10 +75,10 @@
 
     // Breadcrumb
     .k-filemanager-breadcrumb {
-        padding-inline: var( --kendo-filemanager-breadcrumb-padding-x, #{$kendo-filemanager-breadcrumb-padding-x} );
-        padding-block: var( --kendo-filemanager-breadcrumb-padding-y, #{$kendo-filemanager-breadcrumb-padding-y} );
+        padding-inline: var( --kendo-file-manager-breadcrumb-padding-x, #{$kendo-file-manager-breadcrumb-padding-x} );
+        padding-block: var( --kendo-file-manager-breadcrumb-padding-y, #{$kendo-file-manager-breadcrumb-padding-y} );
         border-width: 0;
-        border-bottom-width: var( --kendo-filemanager-breadcrumb-border-width, #{$kendo-filemanager-breadcrumb-border-width} );
+        border-bottom-width: var( --kendo-file-manager-breadcrumb-border-width, #{$kendo-file-manager-breadcrumb-border-width} );
         flex-shrink: 0;
     }
 
@@ -90,10 +90,10 @@
 
         // Listview item
         .k-listview-item {
-            padding-inline: var( --kendo-filemanager-listview-item-padding-x, #{$kendo-filemanager-listview-item-padding-x} );
-            padding-block: var( --kendo-filemanager-listview-item-padding-y, #{$kendo-filemanager-listview-item-padding-y} );
-            width: var( --kendo-filemanager-listview-item-width, #{$kendo-filemanager-listview-item-width} );
-            height: var( --kendo-filemanager-listview-item-height, #{$kendo-filemanager-listview-item-height} );
+            padding-inline: var( --kendo-file-manager-listview-item-padding-x, #{$kendo-file-manager-listview-item-padding-x} );
+            padding-block: var( --kendo-file-manager-listview-item-padding-y, #{$kendo-file-manager-listview-item-padding-y} );
+            width: var( --kendo-file-manager-listview-item-width, #{$kendo-file-manager-listview-item-width} );
+            height: var( --kendo-file-manager-listview-item-height, #{$kendo-file-manager-listview-item-height} );
             text-align: center;
         }
 
@@ -106,12 +106,12 @@
 
         // File icon
         .k-file-icon {
-            font-size: var( --kendo-filemanager-listview-item-icon-size, #{$kendo-filemanager-listview-item-icon-size} );
+            font-size: var( --kendo-file-manager-listview-item-icon-size, #{$kendo-file-manager-listview-item-icon-size} );
         }
 
         // File name
         .k-file-name {
-            margin-block-start: calc( var( --kendo-filemanager-spacer, #{$kendo-filemanager-spacer} ) / 2 );
+            margin-block-start: calc( var( --kendo-file-manager-spacer, #{$kendo-file-manager-spacer} ) / 2 );
             display: block;
             text-align: center;
             overflow: hidden;
@@ -150,14 +150,14 @@
 
     // Filemanager preview
     .k-filemanager-preview {
-        padding-inline-start: var( --kendo-filemanager-preview-padding-x, #{$kendo-filemanager-preview-padding-x} );
-        padding-inline-end: var( --kendo-filemanager-preview-padding-x, #{$kendo-filemanager-preview-padding-x} );
-        padding-block-start:  calc( var( --kendo-filemanager-preview-padding-y, #{$kendo-filemanager-preview-padding-y} ) * 3 );
-        padding-block-end: var( --kendo-filemanager-preview-padding-y, #{$kendo-filemanager-preview-padding-y} );
-        width: var( --kendo-filemanager-preview-width, #{$kendo-filemanager-preview-width} );
-        min-height: calc( ( var( --kendo-filemanager-preview-padding-y, #{$kendo-filemanager-preview-padding-y} ) * 4 ) + ( var( --kendo-filemanager-preview-icon-size, #{$kendo-filemanager-preview-icon-size} ) * 2 ) + ( var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} ) * 3 ) );
+        padding-inline-start: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-preview-padding-x} );
+        padding-inline-end: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-preview-padding-x} );
+        padding-block-start:  calc( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 3 );
+        padding-block-end: var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} );
+        width: var( --kendo-file-manager-preview-width, #{$kendo-file-manager-preview-width} );
+        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + ( var( --kendo-file-manager-preview-icon-size, #{$kendo-file-manager-preview-icon-size} ) * 2 ) + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
         border-width: 0;
-        border-left-width: var( --kendo-filemanager-preview-border-width, #{$kendo-filemanager-preview-border-width} );
+        border-left-width: var( --kendo-file-manager-preview-border-width, #{$kendo-file-manager-preview-border-width} );
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -174,12 +174,12 @@
 
         // File icon
         .k-file-icon {
-            font-size: var( --kendo-filemanager-preview-icon-size, #{$kendo-filemanager-preview-icon-size} );
+            font-size: var( --kendo-file-manager-preview-icon-size, #{$kendo-file-manager-preview-icon-size} );
         }
 
         // File name
         .k-file-name {
-            margin-block-start: var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} );
+            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
             display: block;
         }
         .k-single-file-selected { font-weight: var( --kendo-font-weight-bold, bold ); }
@@ -188,13 +188,13 @@
         // File Meta
         .k-file-meta {
             margin-inline: 0;
-            margin-block-start: var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} );
+            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
             margin-block-end: 0;
             box-sizing: border-box;
             text-align: start;
             display: flex;
             flex-flow: row wrap;
-            grid-column-gap: $kendo-filemanager-preview-column-gap;
+            grid-column-gap: $kendo-file-manager-preview-column-gap;
         }
         .k-file-meta-label {
             display: inline-block;
@@ -207,7 +207,7 @@
         }
         .k-line-break {
             margin-inline: 0;
-            margin-block-start: var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} );
+            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
             margin-block-end: 0;
             width: 100%;
             flex: 1 1 100%;