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

package/scss/radio/_variables.scss

@@ -17,21 +17,21 @@ $kendo-radio-border-width: 1px !default;
 /// @group radio
 $kendo-radio-sizes: (
     sm: (
-        size: map.get( $kendo-spacing, 4 ),
-        glyph-size: map.get( $kendo-spacing, 3.5 ),
-        indicator-size: map.get( $kendo-spacing, 2 ),
+        size: k-spacing(4),
+        glyph-size: k-spacing(3.5),
+        indicator-size: k-spacing(2),
         ripple-size: 300%
     ),
     md: (
-        size: map.get( $kendo-spacing, 5 ),
-        glyph-size: map.get( $kendo-spacing, 4.5 ),
-        indicator-size: map.get( $kendo-spacing, 2.5 ),
+        size: k-spacing(5),
+        glyph-size: k-spacing(4.5),
+        indicator-size: k-spacing(2.5),
         ripple-size: 300%
     ),
     lg: (
-        size: map.get( $kendo-spacing, 6 ),
-        glyph-size: map.get( $kendo-spacing, 5.5 ),
-        indicator-size: map.get( $kendo-spacing, 3 ),
+        size: k-spacing(6),
+        glyph-size: k-spacing(5.5),
+        indicator-size: k-spacing(3),
         ripple-size: 300%
     )
 ) !default;
@@ -149,23 +149,23 @@ $kendo-radio-disabled-checked-image: null !default;
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-radio-label-spacing: k-spacing(2) !default;
 
 
 // Radio list
 
 /// The horizontal list item margin of the RadioButton.
 /// @group radio
-$kendo-radio-list-spacing: map.get( $kendo-spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-spacing(4) !default;
 /// The horizontal list item padding of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-padding-x: 0px !default;
+$kendo-radio-list-item-padding-x: k-spacing(0) !default;
 /// The vertical list item padding of the RadioButton.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 /// The gap between the list items of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-radio-list-item-gap: k-spacing(2) !default;
 
 // Radio ripple
 

package/scss/rating/_variables.scss

@@ -13,14 +13,14 @@ $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The content spacing of the Rating.
 /// @group rating
-$kendo-rating-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-rating-spacing: k-spacing(1) !default;
 
 /// The horizontal padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-rating-item-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-rating-item-padding-y: k-spacing(2) !default;
 /// The text color of the Rating item.
 /// @group rating
 $kendo-rating-item-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;

package/scss/scheduler/_layout.scss

@@ -685,7 +685,7 @@
             display: flex;
             flex: 1 1 100%;
             align-items: center;
-            gap: map.get( $kendo-spacing, 0.5 );
+            gap: k-spacing(0.5);
         }
 
         .k-scheduler-mark {
@@ -908,7 +908,7 @@
         .k-scheduler-datetime-picker {
             display: flex;
             flex-flow: row nowrap;
-            gap: map.get( $kendo-spacing, 1 );
+            gap: k-spacing(1);
         }
 
     }

package/scss/scheduler/_variables.scss

@@ -64,16 +64,16 @@ $kendo-scheduler-footer-gradient: null !default; // $kendo-toolbar-gradient
 
 /// Border radius of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 /// Line height of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-line-height: $kendo-scheduler-line-height !default;
 /// Horizontal padding of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-event-padding-x: k-spacing(2) !default;
 /// Vertical padding of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-scheduler-event-padding-y: k-spacing(0.5) !default;
 /// Minumum height of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) !default;
@@ -132,10 +132,10 @@ $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
 /// Horizontal padding of the scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
 /// Vertical padding of the scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
 /// Height of the scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
@@ -169,14 +169,14 @@ $kendo-scheduler-othermonth-text: null !default;
 
 /// Horizontal padding of the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
 /// Vertical padding of the scheduler year view.
 /// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
 /// Spacing between the calendars in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-calendar-gap: map.get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-yearview-calendar-gap: k-spacing(3) !default;
 
 /// Days with events indicator size in the scheduler year view.
 /// @group scheduler
@@ -199,7 +199,7 @@ $kendo-scheduler-yearview-indicator-selected-bg: if($kendo-enable-color-system,
 
 /// Horizontal padding of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
 /// Vertical padding of the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
@@ -221,7 +221,7 @@ $kendo-scheduler-tooltip-shadow: k-elevation(5) !default;
 
 /// Vertical spacing of the scheduler tooltip title.
 /// @group scheduler
-$kendo-scheduler-tooltip-title-margin-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
 /// Font size of the month inside the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -234,7 +234,7 @@ $kendo-scheduler-tooltip-day-font-size: calc( $kendo-scheduler-tooltip-month-fon
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
 /// Spacing between the events inside the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-events-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-tooltip-events-gap: k-spacing(2) !default;
 
 /// Horizontal padding of the events inside the scheduler tooltip.
 /// @group scheduler
@@ -247,7 +247,7 @@ $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-event-padding-y !defa
 $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-event-border-radius !default;
 /// Spacing between the events items inside the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-event-gap: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-scheduler-tooltip-event-gap: k-spacing(0.5) !default;
 
 /// Color of the scheduler tooltip callout.
 /// @group scheduler

package/scss/scrollview/_variables.scss

@@ -57,13 +57,13 @@ $kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px if($kendo-enable-co
 $kendo-scrollview-pager-offset: 0px !default;
 /// The spacing between the ScrollView pager items.
 /// @group scrollview
-$kendo-scrollview-pager-item-spacing: 20px !default;
+$kendo-scrollview-pager-item-spacing: k-spacing(5) !default;
 /// The border width of the ScrollView pager items.
 /// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
 /// The height of the ScrollView pager.
 /// @group scrollview
-$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
+$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) !default;
 
 /// The color of the ScrollView navigation arrows.
 /// @group scrollview

package/scss/signature/_variables.scss

@@ -15,16 +15,16 @@ $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 /// The horizontal paddings of the signature component.
 /// @group signature
-$kendo-signature-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x: k-spacing(1) !default;
 $kendo-signature-sm-padding-x: $kendo-signature-padding-x !default;
 $kendo-signature-md-padding-x: $kendo-signature-padding-x !default;
 $kendo-signature-lg-padding-x: $kendo-signature-padding-x !default;
 /// The vertical paddings of the signature component.
 /// @group signature
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
-$kendo-signature-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-signature-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-signature-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-signature-sm-padding-y: k-spacing(0.5) !default;
+$kendo-signature-md-padding-y: k-spacing(1) !default;
+$kendo-signature-lg-padding-y: k-spacing(1.5) !default;
 
 /// The opacity of the disabled signature component.
 /// @group signature
@@ -74,7 +74,7 @@ $kendo-signature-sizes: (
 
 /// The gap between individual action items of the signature component
 /// @group signature
-$kendo-signature-actions-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-signature-actions-gap: k-spacing(1) !default;
 
 /// The bottom-border width of the row line of the maximized signature component.
 /// @group signature

package/scss/skeleton/_variables.scss

@@ -5,11 +5,11 @@
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
 /// The border radius of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the rectangular Skeleton.
 /// @group skeleton
-$kendo-skeleton-rect-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-skeleton-rect-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the circular Skeleton.
 /// @group skeleton

package/scss/slider/_variables.scss

@@ -10,7 +10,7 @@ $kendo-slider-size: 200px !default;
 $kendo-slider-alt-size: 26px !default;
 /// The spacing of the Slider.
 /// @group slider
-$kendo-slider-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-slider-spacing: k-spacing(2) !default;
 
 /// The font family of the Slider.
 /// @group slider
@@ -27,10 +27,10 @@ $kendo-slider-text: inherit !default;
 
 /// The size of the Slider track.
 /// @group slider
-$kendo-slider-track-size: map.get( $kendo-spacing, 1 ) !default;
+$kendo-slider-track-size: k-spacing(1) !default;
 /// The border radius of the Slider track.
 /// @group slider
-$kendo-slider-track-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-slider-track-border-radius: k-spacing(0.5) !default;
 /// The background color of the Slider track.
 /// @group slider
 $kendo-slider-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
@@ -59,7 +59,7 @@ $kendo-slider-selection-bg: if($kendo-enable-color-system, k-color( primary ), k
 $kendo-slider-thumb-size: 16px !default;
 /// The default border width of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-slider-thumb-border-width: k-spacing(0.5) !default;
 /// The border radius of the Slider thumb.
 /// @group slider
 $kendo-slider-thumb-border-radius: 999em !default;

package/scss/splitter/_variables.scss

@@ -26,23 +26,23 @@ $kendo-splitter-border: var( --kendo-component-border, initial ) !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
-$kendo-splitter-splitbar-size: map.get( $kendo-spacing, 3 ) !default;
+$kendo-splitter-splitbar-size: k-spacing(3) !default;
 /// The length of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-length: map.get( $kendo-spacing, 5 ) !default;
+$kendo-splitter-drag-handle-length: k-spacing(5) !default;
 /// The thickness of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-thickness: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-splitter-drag-handle-thickness: k-spacing(0.5) !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: map.get( $kendo-spacing, 2 ) !default;
+$kendo-splitter-drag-icon-margin: k-spacing(2) !default;
 
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: null !default;
 /// The vertical padding of the collapse icon in the Splitter.
 /// @group splitter
-$kendo-splitter-collapse-icon-padding-y: map.get( $kendo-spacing, .5 ) !default;
+$kendo-splitter-collapse-icon-padding-y: k-spacing(.5) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
@@ -67,4 +67,4 @@ $kendo-splitbar-selected-text: var( --kendo-component-bg, inherit ) !default;
 
 /// The size of the Splitter static split bar.
 /// @group splitter
-$kendo-splitter-splitbar-static-size: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-splitter-splitbar-static-size: k-spacing(0.5) !default;

package/scss/spreadsheet/_layout.scss

@@ -6,6 +6,7 @@
 @use "../input/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-spreadsheet--layout() {
 
@@ -529,7 +530,7 @@
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $kendo-border-radius );
+        @include border-radius( k-border-radius(md) );
         padding: var( --kendo-padding-y, #{$kendo-padding-md-y} );
         line-height: 1;
         position: absolute;
@@ -615,7 +616,7 @@
             }
 
             .k-actions {
-                margin-block-start: map.get( $kendo-spacing, 3 );
+                margin-block-start: k-spacing(3);
             }
         }
 
@@ -644,10 +645,10 @@
         .k-reset-color { border-block-end-width: 1px; }
         .k-custom-color { border-block-start-width: 1px; }
         .k-spreadsheet-border-type-palette {
-            padding: map.get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: grid;
             grid-template-columns: repeat(5, max-content);
-            gap: map.get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
         }
     }
 
@@ -686,12 +687,12 @@
     .k-spreadsheet-format-cells {
 
         .k-spreadsheet-preview {
-            margin-block-start: map.get( $kendo-spacing, 2 );
+            margin-block-start: k-spacing(2);
             text-align: center;
         }
 
         .k-list-scroller {
-            margin-block-start: map.get( $kendo-spacing, 2 );
+            margin-block-start: k-spacing(2);
             height: 210px;
             border-width: 1px;
             border-style: solid;
@@ -721,7 +722,7 @@
         .k-page-orientation {
             position: absolute;
             inset-inline-end: 0;
-            inset-block-start: map.get( $kendo-spacing, 2 );
+            inset-block-start: k-spacing(2);
 
             .k-svg-icon {
                 width: 6em;

package/scss/spreadsheet/_variables.scss

@@ -3,6 +3,7 @@
 @use "../core/" as *;
 @use "../table/_variables.scss" as *;
 @use "../input/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 /// The width of the border around the Spreadsheet.
 /// @group spreadsheet
@@ -64,7 +65,7 @@ $kendo-spreadsheet-selected-border: if($kendo-enable-color-system, k-color( prim
 
 /// The horizontal padding of the Spreadsheet popup Menu.
 /// @group spreadsheet
-$kendo-spreadsheet-popup-menu-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-spreadsheet-popup-menu-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Spreadsheet popup Menu.
 /// @group spreadsheet
 $kendo-spreadsheet-popup-menu-padding-y: $kendo-spreadsheet-popup-menu-padding-x !default;
@@ -74,10 +75,10 @@ $kendo-spreadsheet-popup-menu-padding-y: $kendo-spreadsheet-popup-menu-padding-x
 $kendo-spreadsheet-action-bar-border-width: 1px !default;
 /// The horizontal padding of the Spreadsheet action bar.
 /// @group spreadsheet
-$kendo-spreadsheet-action-bar-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-action-bar-padding-y: k-spacing(1) !default;
 /// The vertical padding of the Spreadsheet action bar.
 /// @group spreadsheet
-$kendo-spreadsheet-action-bar-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-action-bar-padding-x: k-spacing(2) !default;
 /// The font size of the Spreadsheet action bar.
 /// @group spreadsheet
 $kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-font-size !default;
@@ -86,11 +87,11 @@ $kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-font-size !default;
 $kendo-spreadsheet-action-bar-font-family: Arial, Verdana, sans-serif !default;
 /// The spacings of the Spreadsheet action bar.
 /// @group spreadsheet
-$kendo-spreadsheet-action-bar-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-action-bar-spacing: k-spacing(2) !default;
 
 /// The gap of the Spreadsheet formula bar.
 /// @group spreadsheet
-$kendo-spreadsheet-formula-bar-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-formula-bar-gap: k-spacing(2) !default;
 
 /// The horizontal padding of the Spreadsheet formula input.
 /// @group spreadsheet
@@ -160,7 +161,7 @@ $kendo-spreadsheet-auto-fill-punch-bg: color-mix(in srgb, $kendo-spreadsheet-bg
 
 /// The vertical padding of the Spreadsheet cell.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-cell-padding-y: k-spacing(1) !default;
 /// The horizontal padding of the Spreadsheet cell.
 /// @group spreadsheet
 $kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;
@@ -170,10 +171,10 @@ $kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;
 $kendo-spreadsheet-cell-editor-line-height: var( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height ) !default;
 /// The horizontal padding of the Spreadsheet cell editor.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-editor-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-cell-editor-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Spreadsheet cell editor.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-editor-padding-y: 0px !default;
+$kendo-spreadsheet-cell-editor-padding-y: k-spacing(0) !default;
 /// The background color of the Spreadsheet cell editor.
 /// @group spreadsheet
 $kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-bg !default;
@@ -198,20 +199,20 @@ $kendo-spreadsheet-cell-dirty-border: if($kendo-enable-color-system, k-color( er
 
 /// The horizontal padding of the Spreadsheet sheets bar.
 /// @group spreadsheet
-$kendo-spreadsheet-sheets-bar-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-bar-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Spreadsheet sheets bar.
 /// @group spreadsheet
-$kendo-spreadsheet-sheets-bar-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-bar-padding-y: k-spacing(2) !default;
 /// The border width of the Spreadsheet sheets bar.
 /// @group spreadsheet
 $kendo-spreadsheet-sheets-bar-border-width: 1px !default;
 
 /// The horizontal margin of the Spreadsheet sheets remove.
 /// @group spreadsheet
-$kendo-spreadsheet-sheets-remove-inline-start: - map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-remove-inline-start: calc( #{k-spacing(2)} * -1 ) !default;
 /// The vertical margin of the Spreadsheet sheets remove.
 /// @group spreadsheet
-$kendo-spreadsheet-sheets-remove-inline-end: map.get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-remove-inline-end: k-spacing(2) !default;
 
 /// The left padding of the Spreadsheet sheets menu.
 /// @group spreadsheet
@@ -260,10 +261,10 @@ $kendo-spreadsheet-error-border: if($kendo-enable-color-system, k-color( error-o
 $kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
 /// The border width of the Spreadsheet image Dialog.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-border-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-spreadsheet-insert-image-dialog-border-width: k-spacing(0.5) !default;
 /// The bottom margin of the Spreadsheet image Dialog.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
+$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: k-spacing(7.5) !default;
 /// The width of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-preview-width: 355px !default;
@@ -291,10 +292,10 @@ $kendo-spreadsheet-insert-image-dialog-overlay-hover-text: var( --kendo-componen
 
 /// The width of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-width: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-spreadsheet-drawing-handle-width: k-spacing(1.5) !default;
 /// The height of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-height: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-spreadsheet-drawing-handle-height: k-spacing(1.5) !default;
 /// The border style of the Spreadsheet drawing handle.
 /// @group spreadsheet
 $kendo-spreadsheet-drawing-handle-border-style: solid !default;
@@ -319,7 +320,7 @@ $kendo-spreadsheet-drawing-handle-border-radius: var( --kendo-border-radius-lg,
 $kendo-spreadsheet-drawing-outline-style: solid !default;
 /// The outline width of the Spreadsheet drawing.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-outline-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-spreadsheet-drawing-outline-width: k-spacing(0.5) !default;
 
 /// The background color of the Spreadsheet drawing anchor.
 /// @group spreadsheet
@@ -327,7 +328,7 @@ $kendo-spreadsheet-drawing-anchor-bg: $kendo-spreadsheet-selected-bg !default;
 
 /// The vertical spacing of the Spreadsheet DropZone.
 /// @group spreadsheet
-$kendo-spreadsheet-dropzone-spacing-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-spreadsheet-dropzone-spacing-y: k-spacing(3) !default;
 
 /// The image of the Spreadsheet insert image Dialog.
 /// @group spreadsheet

package/scss/stepper/_variables.scss

@@ -26,24 +26,24 @@ $kendo-stepper-border: transparent !default;
 
 /// The horizontal margin the Stepper label.
 /// @group stepper
-$kendo-stepper-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-stepper-label-margin-x: k-spacing(2) !default;
 /// The horizontal padding the Stepper label.
 /// @group stepper
-$kendo-stepper-label-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-stepper-label-padding-x: k-spacing(3) !default;
 /// The vertical padding the Stepper label.
 /// @group stepper
-$kendo-stepper-label-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-stepper-label-padding-y: k-spacing(1.5) !default;
 
 /// The horizontal padding of the Stepper content.
 /// @group stepper
-$kendo-stepper-inline-content-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-stepper-inline-content-padding-x: k-spacing(5) !default;
 /// The vertical padding of the Stepper content.
 /// @group stepper
-$kendo-stepper-inline-content-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-stepper-inline-content-padding-y: k-spacing(3) !default;
 
 /// The width of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-width: map.get( $kendo-spacing, 7.5 ) !default;
+$kendo-stepper-indicator-width: k-spacing(7.5) !default;
 /// The height of the Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-height: $kendo-stepper-indicator-width !default;
@@ -59,7 +59,7 @@ $kendo-stepper-indicator-border-radius: 50% !default;
 $kendo-stepper-indicator-focus-border-width: $kendo-stepper-indicator-border-width !default;
 /// The size of the focused Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-focus-size: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-stepper-indicator-focus-size: k-spacing(0.5) !default;
 /// The offset of the Stepper's focused indicator.
 /// @group stepper
 $kendo-stepper-indicator-focus-offset: 3px !default;
@@ -188,7 +188,7 @@ $kendo-stepper-optional-label-font-style: italic !default;
 
 /// The size of the Stepper ProgressBar.
 /// @group stepper
-$kendo-stepper-progressbar-size: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-stepper-progressbar-size: k-spacing(0.5) !default;
 
 /// The property name of the Stepper transition.
 /// @group stepper

package/scss/table/_variables.scss

@@ -14,28 +14,28 @@ $kendo-table-cell-vertical-border-width: 0px !default;
 $kendo-table-cell-horizontal-border-width: 1px !default;
 /// The horizontal padding of the cells in the table if no size is specified.
 /// @group table
-$kendo-table-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-table-cell-padding-x: k-spacing(3) !default;
 /// The vertical padding of the cells in the table if no size is specified.
 /// @group table
-$kendo-table-cell-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-table-cell-padding-y: k-spacing(3) !default;
 
-$kendo-table-sm-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-sm-cell-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(3) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(1.5) !default;
 
 $kendo-table-md-cell-padding-x: $kendo-table-cell-padding-x !default;
 $kendo-table-md-cell-padding-y: $kendo-table-cell-padding-y !default;
 
-$kendo-table-lg-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-lg-cell-padding-y: map.get( $kendo-spacing, 3.5 ) !default;
+$kendo-table-lg-cell-padding-x: k-spacing(3) !default;
+$kendo-table-lg-cell-padding-y: k-spacing(3.5) !default;
 
-$kendo-table-sm-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-sm-cell-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(3) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(1.5) !default;
 
 $kendo-table-md-cell-padding-x: $kendo-table-cell-padding-x !default;
 $kendo-table-md-cell-padding-y: $kendo-table-cell-padding-y !default;
 
-$kendo-table-lg-cell-padding-x: map.get( $kendo-spacing, 3 ) !default;
-$kendo-table-lg-cell-padding-y: map.get( $kendo-spacing, 3.5 ) !default;
+$kendo-table-lg-cell-padding-x: k-spacing(3) !default;
+$kendo-table-lg-cell-padding-y: k-spacing(3.5) !default;
 
 /// Font weight of the table header cells.
 /// @group table