@progress/kendo-theme-fluent 7.3.0-dev.1 → 8.0.0-dev.1

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/_theme.scss

@@ -60,7 +60,6 @@
                 .k-input-button {
                     color: inherit;
                     background: none;
-                    border-color: transparent;
                 }
             }
         }

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

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/_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/_variables.scss

@@ -8,33 +8,33 @@ $kendo-loader-segment-border-radius: 50% !default;
 
 /// The size of the small Loader segment.
 /// @group loader
-$kendo-loader-sm-segment-size: map.get( $kendo-spacing, 1 ) !default;
+$kendo-loader-sm-segment-size: k-spacing(1) !default;
 /// The size of the medium Loader segment.
 /// @group loader
-$kendo-loader-md-segment-size: map.get( $kendo-spacing, 2 ) !default;
+$kendo-loader-md-segment-size: k-spacing(2) !default;
 /// The size of the large Loader segment.
 /// @group loader
-$kendo-loader-lg-segment-size: map.get( $kendo-spacing, 4 ) !default;
+$kendo-loader-lg-segment-size: k-spacing(4) !default;
 
 /// The horizontal padding of the small Loader.
 /// @group loader
-$kendo-loader-sm-padding-x: math.div( $kendo-loader-sm-segment-size, 2 ) !default;
+$kendo-loader-sm-padding-x: calc( #{$kendo-loader-sm-segment-size} / 2 ) !default;
 /// The horizontal padding of the medium Loader.
 /// @group loader
-$kendo-loader-md-padding-x: math.div( $kendo-loader-md-segment-size, 2 ) !default;
+$kendo-loader-md-padding-x: calc( #{$kendo-loader-md-segment-size} / 2 ) !default;
 /// The horizontal padding of the large Loader.
 /// @group loader
-$kendo-loader-lg-padding-x: math.div( $kendo-loader-lg-segment-size, 2 ) !default;
+$kendo-loader-lg-padding-x: calc( #{$kendo-loader-lg-segment-size} / 2 ) !default;
 
 /// The vertical padding of the small Loader.
 /// @group loader
-$kendo-loader-sm-padding-y: math.div( $kendo-loader-sm-segment-size, 2 ) !default;
+$kendo-loader-sm-padding-y: calc( #{$kendo-loader-sm-segment-size} / 2 ) !default;
 /// The vertical padding of the medium Loader.
 /// @group loader
-$kendo-loader-md-padding-y: math.div( $kendo-loader-md-segment-size, 2 ) !default;
+$kendo-loader-md-padding-y: calc( #{$kendo-loader-md-segment-size} / 2 ) !default;
 /// The vertical padding of the large Loader.
 /// @group loader
-$kendo-loader-lg-padding-y: math.div( $kendo-loader-lg-segment-size, 2 ) !default;
+$kendo-loader-lg-padding-y: calc( #{$kendo-loader-lg-segment-size} /2 ) !default;
 
 /// The equilateral height of the Loader.
 /// @group loader
@@ -42,33 +42,33 @@ $kendo-loader-equilateral-height: .8660 !default;
 
 /// The width of the small spinner-3 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+$kendo-loader-sm-spinner-3-width: calc( #{$kendo-loader-sm-segment-size} * 4 ) !default;
 /// The width of the medium spinner-3 Loader.
 /// @group loader
-$kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+$kendo-loader-md-spinner-3-width: calc( #{$kendo-loader-md-segment-size} * 4 ) !default;
 /// The width of the large spinner-3 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
+$kendo-loader-lg-spinner-3-width: calc( #{$kendo-loader-lg-segment-size} * 4 ) !default;
 
 /// The height of the small spinner-3 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-sm-spinner-3-height: calc( #{$kendo-loader-sm-spinner-3-width} * #{$kendo-loader-equilateral-height} ) !default;
 /// The height of the medium spinner-3 Loader.
 /// @group loader
-$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-md-spinner-3-height: calc( #{$kendo-loader-md-spinner-3-width} * #{$kendo-loader-equilateral-height} ) !default;
 /// The height of the large spinner-3 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-3-height: ( $kendo-loader-lg-spinner-3-width * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-lg-spinner-3-height: calc( #{$kendo-loader-lg-spinner-3-width} * #{$kendo-loader-equilateral-height} ) !default;
 
 /// The width of the small spinner-4 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-4-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+$kendo-loader-sm-spinner-4-width: calc( #{$kendo-loader-sm-segment-size} * 4 ) !default;
 /// The width of the medium spinner-4 Loader.
 /// @group loader
-$kendo-loader-md-spinner-4-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+$kendo-loader-md-spinner-4-width: calc( #{$kendo-loader-md-segment-size} * 4 ) !default;
 /// The width of the large spinner-4 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-4-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
+$kendo-loader-lg-spinner-4-width: calc( #{$kendo-loader-lg-segment-size} * 4 ) !default;
 
 /// The height of the small spinner-4 Loader.
 /// @group loader
@@ -91,47 +91,47 @@ $kendo-loader-container-panel-border-style: solid !default;
 $kendo-loader-container-panel-border-color: var( --kendo-component-border, initial ) !default;
 /// The border radius of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the container panel.
 /// @group loader
 $kendo-loader-container-panel-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The horizontal padding of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-loader-sm-container-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-loader-md-container-padding-x: k-spacing(5) !default;
 /// The horizontal padding of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-loader-lg-container-padding-x: k-spacing(6) !default;
 
 /// The vertical padding of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-loader-sm-container-padding-y: k-spacing(4) !default;
 /// The vertical padding of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-padding-y: map.get( $kendo-spacing, 5 ) !default;
+$kendo-loader-md-container-padding-y: k-spacing(5) !default;
 /// The vertical padding of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-padding-y: map.get( $kendo-spacing, 6 ) !default;
+$kendo-loader-lg-container-padding-y: k-spacing(6) !default;
 
 /// The gap of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-loader-sm-container-gap: k-spacing(1) !default;
 /// The gap of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-loader-md-container-gap: k-spacing(2) !default;
 /// The gap of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-gap: map.get( $kendo-spacing, 3 ) !default;
+$kendo-loader-lg-container-gap: k-spacing(3) !default;
 
 /// The font size of the small Loader container.
 /// @group loader
 $kendo-loader-sm-container-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-loader-md-container-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Loader container.
 /// @group loader
 $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !default;

package/scss/map/_variables.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../core/" as *;
 @use "../button/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 /// Font size of the map.
 /// @group map
@@ -31,16 +32,16 @@ $kendo-map-height: 600px !default;
 
 /// Map navigator horizontal margin.
 /// @group map
-$kendo-map-navigator-margin-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-map-navigator-margin-x: k-spacing(4) !default;
 /// Map navigator vertical margin.
 /// @group map
-$kendo-map-navigator-margin-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-map-navigator-margin-y: k-spacing(4) !default;
 /// Map navigator padding.
 /// @group map
-$kendo-map-navigator-padding: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-map-navigator-padding: k-spacing(0.5) !default;
 /// Map navigator width.
 /// @group map
-$kendo-map-navigator-width: calc( var( --kendo-icon-size) * 3 + #{$kendo-map-navigator-padding * 2} ) !default;
+$kendo-map-navigator-width: calc( var( --kendo-icon-size) * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) !default;
 /// Map navigator height.
 /// @group map
 $kendo-map-navigator-height: $kendo-map-navigator-width !default;
@@ -59,7 +60,7 @@ $kendo-map-navigator-border: if($kendo-enable-color-system, k-color( border ), k
 
 /// Map zoom control margin.
 /// @group map
-$kendo-map-zoom-control-margin: map.get( $kendo-spacing, 4 ) !default;
+$kendo-map-zoom-control-margin: k-spacing(4) !default;
 /// Map zoom control horizontal padding.
 /// @group map
 $kendo-map-zoom-control-button-padding-x: $kendo-button-md-padding-y !default;

package/scss/mediaplayer/_variables.scss

@@ -37,10 +37,10 @@ $kendo-media-player-quality-border: if($kendo-enable-color-system, k-color( bord
 $kendo-media-player-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
 /// Mediaplayer titlebar horizontal padding.
 /// @group mediaplayer
-$kendo-media-player-titlebar-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-padding-x: k-spacing(2) !default;
 /// Mediaplayer titlebar vertical padding.
 /// @group mediaplayer
-$kendo-media-player-titlebar-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-padding-y: k-spacing(2) !default;
 /// Mediaplayer titlebar background color.
 /// @group mediaplayer
 $kendo-media-player-titlebar-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 )) !default;