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

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;

package/scss/menu/_variables.scss

@@ -5,7 +5,7 @@
 
 /// Width of the menu border.
 /// @group menu
-$kendo-menu-border-width: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-border-width: k-spacing(0) !default;
 // Font family of the menu.
 /// @group menu
 $kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
@@ -18,18 +18,18 @@ $kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Padding of menu root items.
 /// @group menu
-$kendo-menu-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-menu-item-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-menu-item-padding-x: k-spacing(2) !default;
+$kendo-menu-item-padding-y: k-spacing(3) !default;
 
 /// Spacing between menu root items.
 /// @group menu
-$kendo-menu-item-spacing: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-item-spacing: k-spacing(0) !default;
 /// Spacing between menu root items text and icons.
 /// @group menu
 $kendo-menu-item-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
 /// Spacing between menu separator and items.
 /// @group menu
-$kendo-menu-separator-margin: map.get( $kendo-spacing, 1 ) !default;
+$kendo-menu-separator-margin: k-spacing(1) !default;
 
 /// Separator width
 /// @group menu
@@ -37,7 +37,7 @@ $kendo-menu-separator-width: 1px !default;
 
 /// The base outline of focused menu item.
 /// @group menu
-$kendo-menu-item-focus-outline-offset: - map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-menu-item-focus-outline-offset: calc( #{k-spacing(0.5)} * -1 ) !default;
 $kendo-menu-item-focus-outline-width: 1px !default;
 $kendo-menu-item-focus-outline-style: solid !default;
 
@@ -105,14 +105,14 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 
 /// Font sizes of the menu popup.
 /// @group menu
-$kendo-menu-popup-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-menu-popup-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-menu-popup-sm-font-size: $kendo-menu-popup-font-size !default;
 $kendo-menu-popup-md-font-size: $kendo-menu-popup-font-size !default;
 $kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-popup-line-height: var( --kendo-line-height-md, 30px ) !default;
+$kendo-menu-popup-line-height: var( --kendo-line-height, 30px ) !default;
 $kendo-menu-popup-sm-line-height: $kendo-menu-popup-line-height !default;
 $kendo-menu-popup-md-line-height: $kendo-menu-popup-line-height !default;
 $kendo-menu-popup-lg-line-height: $kendo-menu-popup-line-height !default;
@@ -129,7 +129,7 @@ $kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x: k-spacing(2) !default;
 $kendo-menu-popup-sm-item-padding-x: $kendo-menu-popup-item-padding-x !default;
 $kendo-menu-popup-md-item-padding-x: $kendo-menu-popup-item-padding-x !default;
 $kendo-menu-popup-lg-item-padding-x: $kendo-menu-popup-item-padding-x !default;
@@ -140,15 +140,15 @@ $kendo-menu-popup-md-item-padding-y: $kendo-list-md-item-padding-y !default;
 $kendo-menu-popup-lg-item-padding-y: $kendo-list-lg-item-padding-y !default;
 /// The end padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-sm-item-padding-end: calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-md-item-padding-end: calc( calc( #{$kendo-menu-popup-md-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-lg-item-padding-end: calc( calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-sm-item-icon-margin-start: map.get( $kendo-spacing, 0 ) !default;
-$kendo-menu-popup-item-icon-md-margin-start: map.get( $kendo-spacing, 0 ) !default;
-$kendo-menu-popup-lg-item-icon-margin-start: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-sm-item-icon-margin-start: k-spacing(0) !default;
+$kendo-menu-popup-item-icon-md-margin-start: k-spacing(0) !default;
+$kendo-menu-popup-lg-item-icon-margin-start: k-spacing(0) !default;
 /// The end margin of the menu item expand icon.
 /// @group menu
 $kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) !default;
@@ -163,7 +163,7 @@ $kendo-menu-popup-focus-outline-style: $kendo-menu-item-focus-outline-style !def
 
 /// The spacing between the menu items in popup.
 /// @group menu
-$kendo-menu-popup-item-spacing: map.get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-item-spacing: k-spacing(0) !default;
 
 /// Sizes map for the menu.
 /// @group menu

package/scss/messagebox/_variables.scss

@@ -3,13 +3,13 @@
 
 /// Margin around the message box.
 /// @group messagebox
-$kendo-message-box-margin: 0 0 map.get( $kendo-spacing, 3 ) 0 !default;
+$kendo-message-box-margin: 0 0 k-spacing(3) 0 !default;
 /// Horizontal padding of the message box.
 /// @group messagebox
-$kendo-message-box-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-message-box-padding-x: k-spacing(3) !default;
 /// Vertical padding of the message box.
 /// @group messagebox
-$kendo-message-box-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-message-box-padding-y: k-spacing(2) !default;
 /// Border width of the message box.
 /// @group messagebox
 $kendo-message-box-border-width: 0 !default;

package/scss/notification/_variables.scss

@@ -3,20 +3,20 @@
 
 /// The row-gap between the elements in the Notification group.
 /// @group notification
-$kendo-notification-group-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-notification-group-gap: k-spacing(2) !default;
 
 /// The horizontal padding of the Notification.
 /// @group notification
-$kendo-notification-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-notification-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Notification.
 /// @group notification
-$kendo-notification-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-notification-padding-y: k-spacing(2) !default;
 // The width of the border around the Notification.
 /// @group notification
 $kendo-notification-border-width: 1px !default;
 /// The border radius of the Notification.
 /// @group notification
-$kendo-notification-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-notification-border-radius: k-spacing(0.5) !default;
 /// The font family of the Notification.
 /// @group notification
 $kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
@@ -41,10 +41,10 @@ $kendo-notification-box-shadow: none !default;
 
 /// The horizontal spacing of the Notification icon.
 /// @group notification
-$kendo-notification-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-notification-icon-spacing: k-spacing(2) !default;
 /// The horizontal spacing of the Notification close icon.
 /// @group notification
-$kendo-notification-close-icon-spacing: map.get( $kendo-spacing, 4 ) !default;
+$kendo-notification-close-icon-spacing: k-spacing(4) !default;
 /// The color of the Notification icon.
 /// @group notification
 $kendo-notification-icon-text: var( --kendo-component-text, inherit ) !default;

package/scss/orgchart/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacing index of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-spacer: map.get( $kendo-spacing, 6) !default;
+$kendo-orgchart-spacer: k-spacing(6) !default;
 /// The vertical padding of the OrgChart.
 /// @group orgchart
 $kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
@@ -51,7 +51,7 @@ $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !defa
 $kendo-orgchart-node-group-border-width: 1px !default;
 /// The border radius of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
 /// The background color of the OrgChart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
@@ -70,17 +70,17 @@ $kendo-orgchart-node-group-focus-shadow: $kendo-card-focus-shadow !default;
 
 /// The vertical margin of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-margin-y: 0px !default;
+$kendo-orgchart-node-group-title-margin-y: k-spacing(0) !default;
 /// The font size of the OrgChart node group title.
 /// @group orgchart
 $kendo-orgchart-node-group-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
 /// The line height of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height-md, normal ) !default;
+$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The vertical margin of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-margin-y: $kendo-orgchart-spacer - map.get( $kendo-spacing, 1 ) !default;
+$kendo-orgchart-node-group-subtitle-margin-y: calc( $kendo-orgchart-spacer - k-spacing(1) ) !default;
 /// The font size of the OrgChart node group subtitle.
 /// @group orgchart
 $kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
@@ -103,7 +103,7 @@ $kendo-orgchart-card-focus-shadow: $kendo-card-focus-shadow !default;
 
 /// The vertical margin of the OrgChart Card title.
 /// @group orgchart
-$kendo-orgchart-card-title-margin-y: 0px !default;
+$kendo-orgchart-card-title-margin-y: k-spacing(0) !default;
 /// The font size of the OrgChart Card title.
 /// @group orgchart
 $kendo-orgchart-card-title-font-size: $kendo-card-title-font-size !default;
@@ -113,17 +113,17 @@ $kendo-orgchart-card-title-line-height: var( --kendo-line-height, normal ) !defa
 
 /// The vertical margin of the OrgChart Card subtitle.
 /// @group orgchart
-$kendo-orgchart-card-subtitle-margin-y: 0px !default;
+$kendo-orgchart-card-subtitle-margin-y: k-spacing(0) !default;
 /// The font size of the OrgChart Card subtitle.
 /// @group orgchart
 $kendo-orgchart-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the OrgChart Card subtitle.
 /// @group orgchart
-$kendo-orgchart-card-subtitle-line-height: var( --kendo-line-height-md, inherit ) !default;
+$kendo-orgchart-card-subtitle-line-height: var( --kendo-line-height, inherit ) !default;
 
 /// The vertical padding of the OrgChart Card body.
 /// @group orgchart
-$kendo-orgchart-card-body-padding-y: $kendo-orgchart-spacer - map.get( $kendo-spacing, 2 ) !default;
+$kendo-orgchart-card-body-padding-y: calc( #{$kendo-orgchart-spacer} - k-spacing(2) ) !default;
 /// The horizontal padding of the OrgChart Card body.
 /// @group orgchart
 $kendo-orgchart-card-body-padding-x: $kendo-orgchart-card-body-padding-y !default;
@@ -136,7 +136,7 @@ $kendo-orgchart-card-body-border-color: transparent !default;
 
 /// The horizontal margin of the OrgChart Card body title wrap.
 /// @group orgchart
-$kendo-orgchart-card-body-vbox-margin-x: $kendo-orgchart-spacer - map.get( $kendo-spacing, 2 ) !default;
+$kendo-orgchart-card-body-vbox-margin-x: calc( #{$kendo-orgchart-spacer} - k-spacing(2) ) !default;
 /// The min height of the OrgChart Card body title wrap.
 /// @group orgchart
 $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;

package/scss/pager/_variables.scss

@@ -4,20 +4,20 @@
 
 /// The horizontal padding of the Pager.
 /// @group pager
-$kendo-pager-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Pager.
 /// @group pager
-$kendo-pager-sm-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-pager-sm-padding-x: k-spacing(1.5) !default;
 /// The horizontal padding of the medium Pager.
 /// @group pager
-$kendo-pager-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-md-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large Pager.
 /// @group pager
-$kendo-pager-lg-padding-x: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-pager-lg-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the Pager.
 /// @group pager
-$kendo-pager-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Pager.
 /// @group pager
 $kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
@@ -70,13 +70,13 @@ $kendo-pager-item-spacing: null !default;
 
 /// The spacing between the item groups of the small Pager.
 /// @group pager
-$kendo-pager-sm-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-sm-item-group-spacing: k-spacing(2) !default;
 /// The spacing between the item groups of the medium Pager.
 /// @group pager
-$kendo-pager-md-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-md-item-group-spacing: k-spacing(2) !default;
 /// The spacing between the item groups of the large Pager.
 /// @group pager
-$kendo-pager-lg-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pager-lg-item-group-spacing: k-spacing(2) !default;
 
 /// The text color of the Pagers' sizes label.
 /// @group pager

package/scss/panelbar/_layout.scss

@@ -1,5 +1,6 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-panelbar--layout() {
 

package/scss/panelbar/_variables.scss

@@ -4,10 +4,10 @@
 
 /// The horizontal padding of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-padding-x: 0px !default;
+$kendo-panelbar-padding-x: k-spacing(0) !default;
 /// The vertical padding of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-padding-y: 0px !default;
+$kendo-panelbar-padding-y: k-spacing(0) !default;
 /// The font family of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
@@ -33,27 +33,29 @@ $kendo-panelbar-item-border-style: solid !default;
 
 /// The spacing around the PanelBar items icon.
 /// @group panelbar
-$kendo-panelbar-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-panelbar-icon-spacing: k-spacing(2) !default;
 
 /// The horizontal start padding of the PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+
 /// The horizontal end padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x-end: map.get( $kendo-spacing, 2) !default;
+$kendo-panelbar-header-padding-x-end: k-spacing(2) !default;
 /// The vertical padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-panelbar-header-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+
 /// The horizontal end padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x-end: map.get( $kendo-spacing, 2) !default;
+$kendo-panelbar-item-padding-x-end: k-spacing(2) !default;
 /// The vertical padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-panelbar-item-padding-y: k-spacing(3) !default;
 
 /// The maximum nesting of the PanelBar items.
 /// @group panelbar

package/scss/pdf-viewer/_variables.scss

@@ -37,7 +37,7 @@ $kendo-pdf-viewer-canvas-border: var( --kendo-component-border, inherit ) !defau
 
 /// The spacing of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-spacing: map.get( $kendo-spacing, 7.5 ) !default;
+$kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;
 /// The background color of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-bg: var( --kendo-component-bg, inherit ) !default;
@@ -53,19 +53,19 @@ $kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// The horizontal padding of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-pdf-viewer-search-panel-padding-x: k-spacing(3) !default;
 /// The vertical padding of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-padding-y: $kendo-pdf-viewer-search-panel-padding-x !default;
 /// The spacing of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pdf-viewer-search-panel-spacing: k-spacing(2) !default;
 /// The border width of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 /// The border radius of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-pdf-viewer-search-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-bg: var( --kendo-component-bg, inherit ) !default;

package/scss/pivotgrid/_layout.scss

@@ -289,7 +289,7 @@
         }
 
         .k-select-all .k-checkbox {
-            margin-inline-end: map.get( $kendo-spacing, 1 );
+            margin-inline-end: k-spacing(1);
         }
 
         .k-fields-list-wrapper {
@@ -302,7 +302,7 @@
         }
 
         .k-settings-description {
-            margin-block-start: map.get( $kendo-spacing, 4 );
+            margin-block-start: k-spacing(4);
             text-align: center;
         }
 
@@ -357,7 +357,7 @@
         align-items: center;
 
         .k-icon {
-            margin-inline-end: map.get( $kendo-spacing, 2 );
+            margin-inline-end: k-spacing(2);
         }
         .k-dropdown-list {
             max-width: 100px;