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

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;

package/scss/pivotgrid/_variables.scss

@@ -7,14 +7,14 @@
 
 /// Spacer of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-spacer: map.get( $kendo-spacing, 3 ) !default;
+$kendo-pivotgrid-spacer: k-spacing(3) !default;
 
 /// Horizontal padding of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-padding-x: 0px !default;
+$kendo-pivotgrid-padding-x: k-spacing(0) !default;
 /// Vertical of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-padding-y: 0px !default;
+$kendo-pivotgrid-padding-y: k-spacing(0) !default;
 /// Font family of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
@@ -29,7 +29,7 @@ $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-pivotgrid-border-width: 1px !default;
 /// Icon spacing of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-icon-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-icon-spacing: k-spacing(1) !default;
 
 /// Background color of the PivotGrid.
 /// @group pivotgrid
@@ -107,10 +107,10 @@ $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Horizontal padding of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-padding-x: 0px !default;
+$kendo-pivotgrid-configurator-padding-x: k-spacing(0) !default;
 /// Vertical padding of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-padding-y: 0px !default;
+$kendo-pivotgrid-configurator-padding-y: k-spacing(0) !default;
 /// Border width of the PivotGrid configurator.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-border-width: 1px !default;
@@ -133,17 +133,17 @@ $kendo-pivotgrid-configurator-header-font-weight: var( --kendo-font-weight-bold,
 $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
 /// Vertical padding of the PivotGrid configurator content.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-content-padding-y: 0px !default;
+$kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default;
 
 /// Horizontal margin of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-margin-x: 0px !default;
+$kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default;
 /// Vertical margin of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-margin-y: math.div( $kendo-pivotgrid-spacer, 2 ) !default;
+$kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
 /// Spacing of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-gap: map.get( $kendo-spacing, 2) !default;
+$kendo-pivotgrid-configurator-fields-gap: k-spacing(2) !default;
 
 /// Default width of the PivotGrid vertical configurator.
 /// @group pivotgrid
@@ -174,19 +174,19 @@ $kendo-pivotgrid-configurator-header-border: inherit !default;
 
 /// Horizontal padding of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default;
 /// Vertical padding of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default;
 /// Border width of the PivotGrid configurator button.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-button-border-width: 1px !default;
 /// Size of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-size: calc( #{$kendo-pivotgrid-line-height} * 1em + #{$kendo-pivotgrid-configurator-button-padding-y * 2} + #{$kendo-pivotgrid-configurator-button-border-width * 2} ) !default;
+$kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default;
 /// Icon spacing of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pivotgrid-configurator-button-icon-spacing: k-spacing(2) !default;
 
 /// Horizontal padding of the PivotGrid calculated field.
 /// @group pivotgrid
@@ -199,7 +199,7 @@ $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-border-width: 1px !default;
 /// Border radius of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
 /// Spacing of the PivotGrid calculated field.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
@@ -225,10 +225,10 @@ $kendo-pivotgrid-calculated-field-header-border: inherit !default;
 
 /// Horizontal padding of the PivotGrid treeview.
 /// @group pivotgrid
-$kendo-pivotgrid-treeview-padding-x: math.div( $kendo-pivotgrid-spacer, 2 ) !default;
+$kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
 /// Vertical padding of the PivotGrid treeview.
 /// @group pivotgrid
-$kendo-pivotgrid-treeview-padding-y: 0px !default;
+$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;
 
 // Legacy variables
 $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;

package/scss/popover/_variables.scss

@@ -75,11 +75,11 @@ $kendo-popover-actions-padding-x: $kendo-popover-body-padding-x !default;
 $kendo-popover-actions-padding-y: $kendo-popover-body-padding-y !default;
 /// The spacing between the Popover actions.
 /// @group popover
-$kendo-popover-actions-gap: map.get( $kendo-spacing, 3 ) !default;
+$kendo-popover-actions-gap: k-spacing(3) !default;
 
 /// The width of the Popover callout.
 /// @group popover
-$kendo-popover-callout-width: map.get( $kendo-spacing, 5 ) !default;
+$kendo-popover-callout-width: k-spacing(5) !default;
 /// The height of the Popover callout.
 /// @group popover
 $kendo-popover-callout-height: $kendo-popover-callout-width !default;

package/scss/popup/_variables.scss

@@ -3,16 +3,16 @@
 
 /// Horizontal padding of the popup.
 /// @group popup
-$kendo-popup-padding-x: 0 !default;
+$kendo-popup-padding-x: k-spacing(0) !default;
 /// Vertical padding of the popup.
 /// @group popup
-$kendo-popup-padding-y: 0 !default;
+$kendo-popup-padding-y: k-spacing(0) !default;
 /// Width of the border around the popup.
 /// @group popup
 $kendo-popup-border-width: 0 !default;
 /// Border radius of the popup.
 /// @group popup
-$kendo-popup-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-popup-border-radius: k-border-radius(md) !default;
 
 /// Font size of the popup.
 /// @group popup
@@ -23,10 +23,10 @@ $kendo-popup-line-height: var( --kendo-line-height, normal) !default;
 
 /// Horizontal padding of the content inside the popup.
 /// @group popup
-$kendo-popup-content-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-x: k-spacing(2) !default;
 /// Vertical padding of the content inside the popup.
 /// @group popup
-$kendo-popup-content-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup

package/scss/progressbar/_variables.scss

@@ -27,10 +27,10 @@ $kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-progressbar-line-height: var( --kendo-line-height, inherit ) !default;
 /// The horizontal padding of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-padding-x: 0 !default;
+$kendo-progressbar-padding-x: k-spacing(0) !default;
 /// The vertical padding of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-padding-y: 0 !default;
+$kendo-progressbar-padding-y: k-spacing(0) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
@@ -60,7 +60,7 @@ $kendo-progressbar-value-gradient: null !default;
 
 /// The progress status offset of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-offset-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-progressbar-offset-y: k-spacing(2) !default;
 /// The progress status offset of the vertical ProgressBar.
 /// @group progressbar
 $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) !default;
@@ -111,4 +111,4 @@ $kendo-progressbar-chunk-border: var( --kendo-body-bg, initial ) !default;
 $kendo-circular-progressbar-arc-stroke: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
+$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/prompt/_variables.scss

@@ -23,13 +23,13 @@ $kendo-prompt-header-border: var( --kendo-component-border, initial ) !default;
 
 /// The vertical padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-x: k-spacing(4) !default;
 /// The spacing between the items of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: map.get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the Prompt content.
 /// @group prompt
 $kendo-prompt-content-text: k-get-theme-color-var( neutral-190 ) !default;
@@ -42,17 +42,17 @@ $kendo-prompt-content-border: var( --kendo-component-border, initial ) !default;
 
 /// The spacing between the items of the Prompt content expander.
 /// @group prompt
-$kendo-prompt-expander-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-expander-spacing: k-spacing(2) !default;
 
 /// The vertical padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 /// The border radius of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the Prompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-text: var( --kendo-component-text, initial ) !default;