@progress/kendo-theme-fluent 8.0.0-dev.0 → 8.0.0-dev.10

package/scss/icon/_variables.scss

@@ -15,11 +15,11 @@ $kendo-icon-size-xxxl: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
 
 /// Spacing around the icons.
 /// @group icon
-$kendo-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-icon-spacing: k-spacing(2) !default;
 
 /// Padding of the action icons container.
 /// @group icon
-$kendo-icon-padding: map.get( $kendo-spacing, 1 ) !default;
+$kendo-icon-padding: k-spacing(1) !default;
 
 :root {
     --kendo-icon-size: var( --kendo-icon-size, 1rem );

package/scss/imageeditor/_variables.scss

@@ -13,16 +13,16 @@ $kendo-image-editor-text: var( --kendo-component-text, inherit ) !default;
 $kendo-image-editor-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// Vertical margin of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-margin-y: 0 !default;
+$kendo-image-editor-margin-y: k-spacing(0) !default;
 /// Horizontal margin of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-margin-x: 0 !default;
+$kendo-image-editor-margin-x: k-spacing(0) !default;
 /// Vertical padding of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-padding-y: 0 !default;
+$kendo-image-editor-padding-y: k-spacing(0) !default;
 /// Horizontal padding of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-padding-x: 0 !default;
+$kendo-image-editor-padding-x: k-spacing(0) !default;
 
 /// Border width of the imageeditor.
 /// @group imageeditor
@@ -61,10 +61,10 @@ $kendo-image-editor-action-pane-text: inherit !default;
 $kendo-image-editor-action-pane-border: inherit !default;
 /// Imageeditor action pane vertical padding.
 /// @group imageeditor
-$kendo-image-editor-action-pane-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-image-editor-action-pane-padding-y: k-spacing(3) !default;
 /// Imageeditor action pane horizontal padding.
 /// @group imageeditor
-$kendo-image-editor-action-pane-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-image-editor-action-pane-padding-x: k-spacing(3) !default;
 /// Imageeditor action pane width.
 /// @group imageeditor
 $kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) !default;
@@ -90,19 +90,19 @@ $kendo-image-editor-crop-border-style: dashed !default;
 
 /// Imageeditor resize handle horizontal margin.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-margin-x: 1px !default;
+$kendo-image-editor-resize-handle-margin-x: k-spacing(1px) !default;
 /// Imageeditor resize handle vertical margin.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-margin-y: 1px !default;
+$kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 /// Imageeditor resize handle border width.
 /// @group imageeditor
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 /// Imageeditor resize handle size.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-size: map.get( $kendo-spacing, 4 ) !default;
+$kendo-image-editor-resize-handle-size: k-spacing(4) !default;
 /// Imageeditor resize handle top offset.
 /// @group imageeditor
-$kendo-image-editor-resize-top-offset: math.div( $kendo-image-editor-resize-handle-size, 2 ) !default;
+$kendo-image-editor-resize-top-offset: calc( #{$kendo-image-editor-resize-handle-size} / 2 ) !default;
 /// Imageeditor resize handle left offset.
 /// @group imageeditor
-$kendo-image-editor-resize-left-offset: math.div( $kendo-image-editor-resize-handle-size, 2 ) !default;
+$kendo-image-editor-resize-left-offset: calc( #{$kendo-image-editor-resize-handle-size} / 2 ) !default;

package/scss/index.scss

@@ -339,15 +339,22 @@
     // Color system css variables
     @include color-system-styles();
 
+    // Spacing
+    @include kendo-spacing--styles();
+
     // Elevation
     @include kendo-elevation--styles();
     @include elevation--styles-legacy();
 
+    // Core typography
+    @include kendo-core--typography--styles();
+    // Radii
+    @include kendo-border-radius--styles();
+
     // Typography and utils
     @include typography-styles();
     @include utils-styles();
 
-
     // Generic content
     @include icon-styles();
     @include messagebox-styles();

package/scss/input/_variables.scss

@@ -19,23 +19,23 @@ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
 
 /// The horizontal padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-input-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-input-md-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-input-lg-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-input-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-input-md-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-input-lg-padding-y: k-spacing(2) !default;
 
 /// The font size of the small Input components.
 /// @group input
@@ -457,7 +457,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-sm-padding-y,
         font-size: $kendo-input-sm-font-size,
         line-height: $kendo-input-sm-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ),
+        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-md-padding-y} * 2 ) ),
         button-padding-x: $kendo-input-sm-padding-y,
         button-padding-y: $kendo-input-sm-padding-y,
         button-width: $kendo-input-sm-button-width
@@ -467,7 +467,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-md-padding-y,
         font-size: $kendo-input-md-font-size,
         line-height: $kendo-input-md-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ),
+        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-sm-padding-y} * 2 ) ),
         button-padding-x: $kendo-input-md-padding-y,
         button-padding-y: $kendo-input-md-padding-y,
         button-width: $kendo-input-md-button-width
@@ -477,7 +477,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-lg-padding-y,
         font-size: $kendo-input-lg-font-size,
         line-height: $kendo-input-lg-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-lg-padding-y * 2} ),
+        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-lg-padding-y} * 2 ) ),
         button-padding-x: $kendo-input-lg-padding-y,
         button-padding-y: $kendo-input-lg-padding-y,
         button-width: $kendo-input-lg-button-width
@@ -492,41 +492,32 @@ $kendo-input-theme-colors: (
             text: $kendo-input-solid-text,
             bg: $kendo-input-solid-bg,
             border: $kendo-input-solid-border,
-
             hover-text: $kendo-input-solid-hover-text,
             hover-bg: $kendo-input-solid-hover-bg,
             hover-border: $kendo-input-solid-hover-border,
-
             focus-text: $kendo-input-solid-focus-text,
             focus-bg: $kendo-input-solid-focus-bg,
             focus-border: $kendo-input-solid-focus-border,
-
             hover-focus-text: $kendo-input-solid-hover-focus-text,
             hover-focus-bg: $kendo-input-solid-hover-focus-bg,
             hover-focus-border: $kendo-input-solid-hover-focus-border,
-
             disabled-text: $kendo-input-solid-disabled-text,
             disabled-bg: $kendo-input-solid-disabled-bg,
             disabled-border: $kendo-input-solid-disabled-border
-
         ),
         outline: (
             text: $kendo-input-outline-text,
             bg: $kendo-input-outline-bg,
             border: $kendo-input-outline-border,
-
             hover-text: $kendo-input-outline-hover-text,
             hover-bg: $kendo-input-outline-hover-bg,
             hover-border: $kendo-input-outline-hover-border,
-
             focus-text: $kendo-input-outline-focus-text,
             focus-bg: $kendo-input-outline-focus-bg,
             focus-border: $kendo-input-outline-focus-border,
-
             hover-focus-text: $kendo-input-outline-hover-focus-text,
             hover-focus-bg: $kendo-input-outline-hover-focus-bg,
             hover-focus-border: $kendo-input-outline-hover-focus-border,
-
             disabled-text: $kendo-input-outline-disabled-text,
             disabled-bg: $kendo-input-outline-disabled-bg,
             disabled-border: $kendo-input-outline-disabled-border
@@ -535,19 +526,15 @@ $kendo-input-theme-colors: (
             text: $kendo-input-flat-text,
             bg: $kendo-input-flat-bg,
             border: $kendo-input-flat-border,
-
             hover-text: $kendo-input-flat-hover-text,
             hover-bg: $kendo-input-flat-hover-bg,
             hover-border: $kendo-input-flat-hover-border,
-
             focus-text: $kendo-input-flat-focus-text,
             focus-bg: $kendo-input-flat-focus-bg,
             focus-border: $kendo-input-flat-focus-border,
-
             hover-focus-tex: $kendo-input-flat-hover-focus-text,
             hover-focus-bg: $kendo-input-flat-hover-focus-bg,
             hover-focus-border: $kendo-input-flat-hover-focus-border,
-
             disabled-text: $kendo-input-flat-disabled-text,
             disabled-bg: $kendo-input-flat-disabled-bg,
             disabled-border: $kendo-input-flat-disabled-border
@@ -558,19 +545,15 @@ $kendo-input-theme-colors: (
             text: $kendo-picker-solid-text,
             bg: $kendo-picker-solid-bg,
             border: $kendo-picker-solid-border,
-
             hover-text: $kendo-picker-solid-hover-text,
             hover-bg: $kendo-picker-solid-hover-bg,
             hover-border: $kendo-picker-solid-hover-border,
-
             focus-text: $kendo-picker-solid-focus-text,
             focus-bg: $kendo-picker-solid-focus-bg,
             focus-border: $kendo-picker-solid-focus-border,
-
             hover-focus-tex: $kendo-picker-solid-hover-focus-text,
             hover-focus-bg: $kendo-picker-solid-hover-focus-bg,
             hover-focus-border: $kendo-picker-solid-hover-focus-border,
-
             disabled-text: $kendo-picker-solid-disabled-text,
             disabled-bg: $kendo-picker-solid-disabled-bg,
             disabled-border: $kendo-picker-solid-disabled-border
@@ -579,19 +562,15 @@ $kendo-input-theme-colors: (
             text: $kendo-picker-outline-text,
             bg: $kendo-picker-outline-bg,
             border: $kendo-picker-outline-border,
-
             hover-text: $kendo-picker-outline-hover-text,
             hover-bg: $kendo-picker-outline-hover-bg,
             hover-border: $kendo-picker-outline-hover-border,
-
             focus-text: $kendo-picker-outline-focus-text,
             focus-bg: $kendo-picker-outline-focus-bg,
             focus-border: $kendo-picker-outline-focus-border,
-
             hover-focus-text: $kendo-picker-outline-hover-focus-text,
             hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
             hover-focus-border: $kendo-picker-outline-hover-focus-border,
-
             disabled-text: $kendo-picker-outline-disabled-text,
             disabled-bg: $kendo-picker-outline-disabled-bg,
             disabled-border: $kendo-picker-outline-disabled-border
@@ -600,19 +579,15 @@ $kendo-input-theme-colors: (
             text: $kendo-picker-flat-text,
             bg: $kendo-picker-flat-bg,
             border: $kendo-picker-flat-border,
-
             hover-text: $kendo-picker-flat-hover-text,
             hover-bg: $kendo-picker-flat-hover-bg,
             hover-border: $kendo-picker-flat-hover-border,
-
             focus-text: $kendo-picker-flat-focus-text,
             focus-bg: $kendo-picker-flat-focus-bg,
             focus-border: $kendo-picker-flat-focus-border,
-
             hover-focus-tex: $kendo-picker-flat-hover-focus-text,
             hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
             hover-focus-border: $kendo-picker-flat-hover-focus-border,
-
             disabled-text: $kendo-picker-flat-disabled-text,
             disabled-bg: $kendo-picker-flat-disabled-bg,
             disabled-border: $kendo-picker-flat-disabled-border

package/scss/list/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../core/" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-list--layout() {
 

package/scss/list/_variables.scss

@@ -19,15 +19,15 @@ $kendo-list-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the List header.
 /// @group list
-$kendo-list-sm-header-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-md-header-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-header-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-header-padding-x: k-spacing(2) !default;
+$kendo-list-md-header-padding-x: k-spacing(2) !default;
+$kendo-list-lg-header-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the List header.
 /// @group list
-$kendo-list-sm-header-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-list-md-header-padding-y: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-header-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-list-sm-header-padding-y: k-spacing(1.5) !default;
+$kendo-list-md-header-padding-y: k-spacing(2) !default;
+$kendo-list-lg-header-padding-y: k-spacing(2.5) !default;
 
 /// The border width of the List header.
 /// @group list
@@ -51,15 +51,15 @@ $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default
 
 /// The horizontal padding of the List items.
 /// @group list
-$kendo-list-sm-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-md-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-item-padding-x: k-spacing(2) !default;
+$kendo-list-md-item-padding-x: k-spacing(2) !default;
+$kendo-list-lg-item-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the List items.
 /// @group list
-$kendo-list-sm-item-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-list-md-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-item-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-list-sm-item-padding-y: k-spacing(1.5) !default;
+$kendo-list-md-item-padding-y: k-spacing(2) !default;
+$kendo-list-lg-item-padding-y: k-spacing(2.5) !default;
 
 /// The font size of the List items.
 /// @group list
@@ -81,27 +81,27 @@ $kendo-list-item-group-label-lg-font-size: var( --kendo-font-size-xs, inherit )
 
 /// The horizontal padding of the List group items.
 /// @group list
-$kendo-list-sm-group-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-md-group-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-group-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-group-item-padding-x: k-spacing(2) !default;
+$kendo-list-md-group-item-padding-x: k-spacing(2) !default;
+$kendo-list-lg-group-item-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the List group items.
 /// @group list
-$kendo-list-sm-group-item-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-list-md-group-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-group-item-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-list-sm-group-item-padding-y: k-spacing(1.5) !default;
+$kendo-list-md-group-item-padding-y: k-spacing(2) !default;
+$kendo-list-lg-group-item-padding-y: k-spacing(2.5) !default;
 
 /// The horizontal padding of the List item group label.
 /// @group list
-$kendo-list-item-group-label-sm-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-list-item-group-label-md-padding-x: map.get( $kendo-spacing, 1 ) !default;
-$kendo-list-item-group-label-lg-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-item-group-label-sm-padding-x: k-spacing(0.5) !default;
+$kendo-list-item-group-label-md-padding-x: k-spacing(1) !default;
+$kendo-list-item-group-label-lg-padding-x: k-spacing(1.5) !default;
 
 /// The vertical padding of the List item group label.
 /// @group list
-$kendo-list-item-group-label-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-list-item-group-label-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-list-item-group-label-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-item-group-label-sm-padding-y: k-spacing(0.5) !default;
+$kendo-list-item-group-label-md-padding-y: k-spacing(1) !default;
+$kendo-list-item-group-label-lg-padding-y: k-spacing(1.5) !default;
 
 /// The border width of the List group items.
 /// @group list

package/scss/listbox/_variables.scss

@@ -3,10 +3,10 @@
 
 /// The spacing between the ListBox elements.
 /// @group listbox
-$kendo-listbox-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-listbox-spacing: k-spacing(2) !default;
 /// The spacing between the ListBox buttons.
 /// @group listbox
-$kendo-listbox-button-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-listbox-button-spacing: k-spacing(2) !default;
 /// WThe width of the ListBox.
 /// @group listbox
 $kendo-listbox-width: 10em !default;

package/scss/listgroup/_layout.scss

@@ -51,8 +51,8 @@
         position: relative;
 
         > .k-link {
-            margin-inline: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
-            margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+            margin-inline: var( --kendo-listgroup-item-padding-x, calc( #{$kendo-listgroup-item-padding-x} * -1 ) );
+            margin-block: var( --kendo-listgroup-item-padding-y, calc( #{$kendo-listgroup-item-padding-y} * -1 ) );
             padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
             padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
             color: inherit;
@@ -87,8 +87,8 @@
 
         > .k-select {
             margin-inline-start: 0;
-            margin-inline-end: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
-            margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+            margin-inline-end: var( --kendo-listgroup-item-padding-x, calc( #{$kendo-listgroup-item-padding-x} * -1 ) );
+            margin-block: var( --kendo-listgroup-item-padding-y, calc( #{$kendo-listgroup-item-padding-y} * -1 ) );
             padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
             padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
             border-width: 0 0 0 1px;
@@ -101,8 +101,8 @@
 
     // Forms in listgroup
     .k-listgroup-form-row {
-        margin-inline: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
-        margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+        margin-inline: var( --kendo-listgroup-item-padding-x, calc( #{$kendo-listgroup-item-padding-x} * -1 ) );
+        margin-block: var( --kendo-listgroup-item-padding-y, calc( #{$kendo-listgroup-item-padding-y} * -1) );
         padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
         padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
         display: flex;

package/scss/listgroup/_variables.scss

@@ -7,7 +7,7 @@
 $kendo-listgroup-border-width: 1px !default;
 /// Border radius of the listgroup.
 /// @group listgroup
-$kendo-listgroup-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-listgroup-border-radius: k-border-radius(md) !default;
 
 /// Font size of the listgroup.
 /// @group listgroup
@@ -28,10 +28,10 @@ $kendo-listgroup-border: var( --kendo-component-border, inherit ) !default;
 
 /// Horizontal padding of the listgroup items.
 /// @group listgroup
-$kendo-listgroup-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-listgroup-item-padding-x: k-spacing(2) !default;
 /// Vertical padding of the listgroup items.
 /// @group listgroup
-$kendo-listgroup-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-listgroup-item-padding-y: k-spacing(2) !default;
 /// Border width of the listgroup item.
 /// @group listgroup
 $kendo-listgroup-item-border-width: 1px !default;

package/scss/listview/_layout.scss

@@ -14,6 +14,7 @@
         font-family: var( --kendo-listview-font-family, #{$kendo-listview-font-family} );
         font-size: var( --kendo-listview-font-size, #{$kendo-listview-font-size} );
         line-height: var( --kendo-listview-line-height, #{$kendo-listview-line-height} );
+        display: flex;
         flex-flow: column nowrap;
         position: relative;
         -webkit-touch-callout: none;

package/scss/listview/_variables.scss

@@ -4,20 +4,20 @@
 
 /// The horizontal padding of the ListView.
 /// @group listview
-$kendo-listview-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-listview-padding-x: k-spacing(1) !default;
 /// The vertical padding of the ListView.
 /// @group listview
-$kendo-listview-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-listview-padding-y: k-spacing(1) !default;
 /// The width of the border around bordered ListView.
 /// @group listview
 $kendo-listview-border-width: 1px !default;
 
 /// The horizontal padding of the ListView header.
 /// @group listview
-$kendo-listview-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-listview-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the ListView header.
 /// @group listview
-$kendo-listview-header-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-listview-header-padding-y: k-spacing(2) !default;
 
 /// The horizontal padding of the ListView footer.
 /// @group listview
@@ -28,10 +28,10 @@ $kendo-listview-footer-padding-y: $kendo-listview-header-padding-y !default;
 
 /// The horizontal padding of the ListView items.
 /// @group listview
-$kendo-listview-item-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-spacing(1) !default;
 /// The vertical padding of the ListView items.
 /// @group listview
-$kendo-listview-item-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-spacing(1) !default;
 
 /// The font family of the ListView.
 /// @group listview
@@ -45,7 +45,7 @@ $kendo-listview-line-height: var( --kendo-line-height, initial ) !default;
 
 /// The gap between items of ListView with grid layout.
 /// @group listview
-$kendo-listview-grid-gap: map.get( $kendo-spacing, 0 ) !default;
+$kendo-listview-grid-gap: k-spacing(.0) !default;
 
 /// The text color of the ListView.
 /// @group listview
@@ -89,4 +89,4 @@ $kendo-listview-item-focus-text: initial !default;
 $kendo-listview-item-focus-bg: initial !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) !default;
+$kendo-listview-item-focus-shadow: var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) !default;

package/scss/loader/_layout.scss

@@ -372,7 +372,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 2001;
+        z-index: 20001;
 
         .k-loader {
             padding: 0;