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

package/scss/tabstrip/_variables.scss

@@ -1,13 +1,14 @@
 @use "sass:map";
 @use "../core/" as *;
 @use "../list/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 /// The horizontal padding of the tabstrip wrapper
 /// @group tabstrip
-$kendo-tabstrip-wrapper-padding-x: 0px !default;
+$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
 /// The vertical padding of the tabstrip wrapper
 /// @group tabstrip
-$kendo-tabstrip-wrapper-padding-y: 0px !default;
+$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
 /// The width of the border around the tabstrip wrapper
 /// @group tabstrip
 $kendo-tabstrip-wrapper-border-width: 0px !default;
@@ -48,16 +49,16 @@ $kendo-tabstrip-border: transparent !default;
 $kendo-tabstrip-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
 /// The vertical padding of the tabstrip item
 /// @group tabstrip
-$kendo-tabstrip-item-padding-y: map.get( $kendo-spacing, 2 ) + map.get( $kendo-spacing, 1 ) !default;
+$kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !default;
 /// The width of the border around the tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 0px !default;
 /// The border radius of the tabstrip item
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the tabstrip items
 /// @group tabstrip
-$kendo-tabstrip-item-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-tabstrip-item-gap: k-spacing(2) !default;
 ///  The background color of the tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-bg: transparent !default;
@@ -110,17 +111,17 @@ $kendo-tabstrip-item-dragging-text: if($kendo-enable-color-system, k-color( prim
 // Indicator
 /// The border width of the tabstrip indicator
 /// @group tabstrip
-$kendo-tabstrip-indicator-size: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-tabstrip-indicator-size: k-spacing(0.5) !default;
 /// The border color of the tabstrip ripple
 /// @group tabstrip
 $kendo-tabstrip-indicator-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The horizontal padding of tabstrip content
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-tabstrip-content-padding-x: k-spacing(3) !default;
 /// The vertical padding of tabstrip content
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-tabstrip-content-padding-y: k-spacing(1.5) !default;
 /// The width of border around tabstrip content
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: 1px !default;
@@ -140,7 +141,7 @@ $kendo-tabstrip-content-focus-border: var( --kendo-component-text, initial ) !de
 
 /// The horizontal button padding of the scrollable tabstrip
 /// @group tabstrip
-$kendo-tabstrip-scrollable-button-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-tabstrip-scrollable-button-padding-x: k-spacing(1) !default;
 // The vertical button padding of the scrollable tabstrip
 /// @group tabstrip
-$kendo-tabstrip-scrollable-button-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-tabstrip-scrollable-button-padding-y: k-spacing(1) !default;

package/scss/taskboard/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The spacing index of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-spacer: map.get( $kendo-spacing, 4 ) !default;
+$kendo-taskboard-spacer: k-spacing(4) !default;
 
 /// The border width of the TaskBoard.
 /// @group taskboard
@@ -15,16 +15,16 @@ $kendo-taskboard-border-width: 1px !default;
 $kendo-taskboard-border-style: solid !default;
 /// The vertical padding of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-padding-y: 0px !default;
+$kendo-taskboard-padding-y: k-spacing(0) !default;
 /// The horizontal of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-padding-x: 0px !default;
+$kendo-taskboard-padding-x: k-spacing(0) !default;
 /// The font family of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-line-height: var( --kendo-line-height, inherit ) !default;
@@ -40,20 +40,20 @@ $kendo-taskboard-border: var( --kendo-component-border, initial ) !default;
 
 /// The vertical padding of the TaskBoard content.
 /// @group taskboard
-$kendo-taskboard-content-padding-y: 0px !default;
+$kendo-taskboard-content-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard content.
 /// @group taskboard
-$kendo-taskboard-content-padding-x: 0px !default;
+$kendo-taskboard-content-padding-x: k-spacing(0) !default;
 
 /// The vertical spacing of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-spacing-y: math.div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-column-container-spacing-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The vertical padding of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-padding-y: 0px !default;
+$kendo-taskboard-column-container-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-padding-x: math.div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-column-container-padding-x: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The spacing of the TaskBoard columns container.
 /// @group taskboard
 $kendo-taskboard-columns-container-gap: $kendo-taskboard-spacer !default;
@@ -66,7 +66,7 @@ $kendo-taskboard-column-width: 320px !default;
 $kendo-taskboard-column-border-width: 1px !default;
 /// The border radius of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-taskboard-column-border-radius: k-border-radius(md) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
@@ -88,16 +88,16 @@ $kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( bo
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-padding-y: math.div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-column-header-padding-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The horizontal padding of the TaskBoard column header.
 /// @group taskboard
 $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
 /// The spacing of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-gap: math.div( $kendo-taskboard-spacer, 4 ) !default;
+$kendo-taskboard-column-header-gap: calc( #{$kendo-taskboard-spacer} / 4 ) !default;
 /// The spacing of the TaskBoard column header actions.
 /// @group taskboard
-$kendo-taskboard-column-header-actions-gap: math.div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The font weight of the TaskBoard column header.
 /// @group taskboard
 $kendo-taskboard-column-header-font-weight: 400 !default;
@@ -107,13 +107,13 @@ $kendo-taskboard-column-header-text: var( --kendo-component-text, inherit ) !def
 
 /// The vertical padding of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-padding-y: 0px !default;
+$kendo-taskboard-column-cards-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-padding-x: 0px !default;
+$kendo-taskboard-column-cards-padding-x: k-spacing(0) !default;
 /// The spacing of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-gap: math.div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-column-cards-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 
 
 /// The default width of the TaskBoard pane.
@@ -121,10 +121,10 @@ $kendo-taskboard-column-cards-gap: math.div( $kendo-taskboard-spacer, 2 ) !defau
 $kendo-taskboard-pane-width: $kendo-taskboard-column-width !default;
 /// The vertical padding of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-padding-y: 0px !default;
+$kendo-taskboard-pane-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-padding-x: 0px !default;
+$kendo-taskboard-pane-padding-x: k-spacing(0) !default;
 /// The border width of the TaskBoard pane.
 /// @group taskboard
 $kendo-taskboard-pane-border-width: 1px !default;
@@ -143,7 +143,7 @@ $kendo-taskboard-pane-border: var( --kendo-component-border, inherit ) !default;
 $kendo-taskboard-pane-header-padding-y: $kendo-taskboard-spacer !default;
 /// The horizontal padding of the TaskBoard pane header.
 /// @group taskboard
-$kendo-taskboard-pane-header-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-taskboard-pane-header-padding-x: k-spacing(6) !default;
 /// The font size of the TaskBoard pane header.
 /// @group taskboard
 $kendo-taskboard-pane-header-font-size: var( --kendo-font-size-xl, 1rem ) !default;
@@ -156,21 +156,21 @@ $kendo-taskboard-pane-header-text: $kendo-taskboard-pane-text !default;
 
 /// The vertical padding of the TaskBoard pane content.
 /// @group taskboard
-$kendo-taskboard-pane-content-padding-y: 0px !default;
+$kendo-taskboard-pane-content-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard pane content.
 /// @group taskboard
 $kendo-taskboard-pane-content-padding-x: $kendo-taskboard-pane-header-padding-x !default;
 
 /// The vertical padding of the TaskBoard pane actions.
 /// @group taskboard
-$kendo-taskboard-pane-actions-padding-y: map.get( $kendo-spacing, 6 ) !default;
+$kendo-taskboard-pane-actions-padding-y: k-spacing(6) !default;
 /// The horizontal padding of the TaskBoard pane actions.
 /// @group taskboard
 $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-pane-actions-padding-y !default;
 
 /// The vertical padding of the TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-padding-y: math.div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-card-padding-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The horizontal padding of the TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-y !default;
@@ -189,7 +189,7 @@ $kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !
 
 /// The font size of the TaskBoard Card title.
 /// @group taskboard
-$kendo-taskboard-card-title-font-size: var( --kendo-font-size-md, 1rem ) !default;
+$kendo-taskboard-card-title-font-size: var( --kendo-font-size, 1rem ) !default;
 /// The font weight of the TaskBoard Card title.
 /// @group taskboard
 $kendo-taskboard-card-title-font-weight: var( --kendo-font-weight-bold, 600 ) !default;

package/scss/tilelayout/_variables.scss

@@ -12,7 +12,7 @@ $kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), k-get-
 
 /// The horizontal padding of the TileLayout.
 /// @group tilelayout
-$kendo-tile-layout-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-tile-layout-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the TileLayout
 /// @group tilelayout

package/scss/timeline/_variables.scss

@@ -7,13 +7,13 @@
 
 /// The horizontal spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-x: map.get( $kendo-spacing, 10 ) !default;
+$kendo-timeline-spacing-x: k-spacing(10) !default;
 /// The vertical spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-y: map.get( $kendo-spacing, 10 ) !default;
+$kendo-timeline-spacing-y: k-spacing(10) !default;
 /// The padding between the Timeline's track items.
 /// @group timeline
-$kendo-timeline-items-padding: map.get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-items-padding: k-spacing(4) !default;
 
 /// The font family of the Timeline.
 /// @group timeline
@@ -27,30 +27,30 @@ $kendo-timeline-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal spacing of the mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-spacing-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-mobile-spacing-x: k-spacing(4) !default;
 /// The vertical spacing of the mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-spacing-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-mobile-spacing-y: k-spacing(4) !default;
 
 /// The width of the Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-width: map.get( $kendo-spacing, 7.5 ) !default;
+$kendo-timeline-track-arrow-width: k-spacing(7.5) !default;
 /// The height of the Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-height: map.get( $kendo-spacing, 7.5 ) !default;
+$kendo-timeline-track-arrow-height: k-spacing(7.5) !default;
 
 /// The size of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-size: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-timeline-track-size: k-spacing(1.5) !default;
 /// The bottom padding of the Timeline's track wrapper.
 /// @group timeline
-$kendo-timeline-track-wrap-padding-bottom: math.div( $kendo-timeline-track-size, 2 ) !default;
+$kendo-timeline-track-wrap-padding-bottom: calc( #{$kendo-timeline-track-size} / 2 ) !default;
 /// The border width of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-width: 1px !default;
 /// The bottom margin of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-margin-bottom: map.get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-track-margin-bottom: k-spacing(4) !default;
 /// The bottom offset of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-bottom-calc: calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) !default;
@@ -82,17 +82,17 @@ $kendo-timeline-track-arrow-disabled-border: var( --kendo-disabled-border, initi
 
 /// The offset of the Timeline track event.
 /// @group timeline
-$kendo-timeline-track-event-offset: map.get( $kendo-spacing, 8 ) !default;
+$kendo-timeline-track-event-offset: k-spacing(8) !default;
 
 /// The horizontal padding of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-timeline-flag-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-timeline-flag-padding-y: k-spacing(2) !default;
 /// The border radius of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-timeline-flag-border-radius: k-spacing(0.5) !default;
 /// The line height of the Timeline flag.
 /// @group timeline
 $kendo-timeline-flag-line-height: var( --kendo-line-height, normal ) !default;
@@ -101,7 +101,7 @@ $kendo-timeline-flag-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-timeline-flag-box-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The minimum width of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-min-width: map.get( $kendo-spacing, 20 ) !default;
+$kendo-timeline-flag-min-width: k-spacing(20) !default;
 /// The maximum width of the Timeline flag.
 /// @group timeline
 $kendo-timeline-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) !default;
@@ -110,7 +110,7 @@ $kendo-timeline-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 *
 $kendo-timeline-mobile-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } ) !default;
 /// The minimum width of the horizontal Timeline flag.
 /// @group timeline
-$kendo-timeline-horizontal-flag-min-width: map.get( $kendo-spacing, 15 ) !default;
+$kendo-timeline-horizontal-flag-min-width: k-spacing(15) !default;
 /// The background color of the Timeline flag.
 /// @group timeline
 $kendo-timeline-flag-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
@@ -119,13 +119,13 @@ $kendo-timeline-flag-bg: if($kendo-enable-color-system, k-color( primary ), k-ge
 $kendo-timeline-flag-text: var( --kendo-component-bg, initial ) !default;
 /// The width of the Timeline's flag callout.
 /// @group timeline
-$kendo-timeline-flag-callout-width: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-timeline-flag-callout-width: k-spacing(2.5) !default;
 /// The height of the Timeline's flag callout.
 /// @group timeline
-$kendo-timeline-flag-callout-height: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-timeline-flag-callout-height: k-spacing(2.5) !default;
 /// The bottom offset of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-offset-bottom: map.get( $kendo-spacing, 1 ) !default;
+$kendo-timeline-flag-offset-bottom: k-spacing(1) !default;
 /// The bottom margin of the Timeline flag.
 /// @group timeline
 $kendo-timeline-flag-margin-bottom-calc: calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } ) !default;
@@ -151,10 +151,10 @@ $kendo-timeline-card-scroll-thumb-hover: var( --kendo-hover-border, initial ) !d
 $kendo-timeline-date-body-text: var( --kendo-body-text, initial ) !default;
 /// The width of the Timeline date.
 /// @group timeline
-$kendo-timeline-date-width: map.get( $kendo-spacing, 12 ) + map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-timeline-date-width: calc( #{k-spacing(12)} + #{k-spacing(0.5)} ) !default;
 /// The bottom margin of the Timeline date.
 /// @group timeline
-$kendo-timeline-date-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
+$kendo-timeline-date-margin-bottom: k-spacing(2) !default;
 
 /// The padding of the vertical Timeline.
 /// @group timeline
@@ -164,7 +164,7 @@ $kendo-timeline-vertical-padding-calc: calc( #{ $kendo-timeline-spacing-x } + (
 $kendo-timeline-vertical-padding-with-dates-calc: calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) !default;
 /// The border radius of the vertical Timeline.
 /// @group timeline
-$kendo-timeline-vertical-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-lg} ) !default;
+$kendo-timeline-vertical-border-radius: k-border-radius(lg) !default;
 /// The padding of the vertical mobile Timeline.
 /// @group timeline
 $kendo-timeline-mobile-vertical-padding-calc: calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) !default;
@@ -174,10 +174,10 @@ $kendo-timeline-mobile-vertical-padding-with-dates-calc: calc( #{ $kendo-timelin
 
 /// The width of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-width: map.get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-circle-width: k-spacing(4) !default;
 /// The height of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-height: map.get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-circle-height: k-spacing(4) !default;
 /// The background color of the Timeline circle.
 /// @group timeline
 $kendo-timeline-circle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/timeselector/_layout.scss

@@ -213,7 +213,7 @@
         $_line-height: map.get( $size-props, line-height );
         $_list-item-padding-x: map.get( $size-props, list-item-padding-x );
         $_list-item-padding-y: map.get( $size-props, list-item-padding-y );
-        $_highlight-height: calc( #{$_font-size} * #{$_line-height} + #{ $_list-item-padding-y * 2} );
+        $_highlight-height: calc( #{$_font-size} * #{$_line-height} + calc( #{ $_list-item-padding-y} * 2 ) );
 
 
         .k-timeselector-#{$size} {

package/scss/timeselector/_variables.scss

@@ -27,10 +27,10 @@ $kendo-time-selector-border: var( --kendo-component-border, initial ) !default;
 
 /// Horizontal padding of the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-time-selector-header-padding-x: k-spacing(3) !default;
 /// Vertical padding color of the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-time-selector-header-padding-y: k-spacing(3) !default;
 /// Width of the border around the time-selector header.
 /// @group time-selector
 $kendo-time-selector-header-border-width: 0px !default;
@@ -47,7 +47,7 @@ $kendo-time-list-height: 240px !default;
 
 /// Spacing beneath the time selector titles.
 /// @group time-selector
-$kendo-time-list-title-spacing: map.get( $kendo-spacing, 3 ) !default;
+$kendo-time-list-title-spacing: k-spacing(3) !default;
 /// Font size of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
@@ -67,17 +67,17 @@ $kendo-time-list-title-focus-text: $kendo-time-selector-text !default;
 
 /// Horizontal padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-time-list-item-padding-x: k-spacing(2) !default;
 /// Vertical padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-time-list-item-padding-y: k-spacing(1) !default;
 
 /// Width of the border of the selected item in the time-selector.
 /// @group time-selector
 $kendo-time-list-highlight-border-width: 1px 0px !default;
 /// Height of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} ) !default;
+$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
 /// Background color of the selected item in the time-selector.
 /// @group time-selector
 $kendo-time-list-highlight-bg: $kendo-time-selector-bg !default;

package/scss/toolbar/_layout.scss

@@ -169,7 +169,7 @@
         }
 
         .k-separator {
-            margin-block: map.get( $kendo-spacing, 1 );
+            margin-block: k-spacing(1);
         }
 
         // Group

package/scss/toolbar/_variables.scss

@@ -3,33 +3,33 @@
 
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-padding-x: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-lg-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-padding-y: k-spacing(2) !default;
 /// The vertical padding of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-lg-padding-y: k-spacing(2.5) !default;
 
 /// The spacing between the tools of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-sm-spacing: k-spacing(2) !default;
 /// The spacing between the tools of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-spacing: k-spacing(2) !default;
 /// The spacing between the tools of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-spacing: k-spacing(2) !default;
 
 /// The width of the border around the Toolbar.
 /// @group toolbar

package/scss/tooltip/_layout.scss

@@ -62,8 +62,8 @@
 
     // Callout
     .k-callout {
-        width: ( $kendo-tooltip-callout-size * 2 );
-        height: ( $kendo-tooltip-callout-size * 2 );
+        width: calc( #{$kendo-tooltip-callout-size} * 2 );
+        height: calc( #{$kendo-tooltip-callout-size} * 2 );
         border-width: $kendo-tooltip-callout-size;
         border-style: solid;
         border-color: transparent;
@@ -77,31 +77,31 @@
     // Remove margin tweaking and uncomment when their implementation is fixed.
 
     .k-callout-n {
-        margin-inline-start: -$kendo-tooltip-callout-size;
+        margin-inline-start: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-bottom-color: currentColor;
-        top: ( -1 * $kendo-tooltip-callout-size * 2 );
+        top: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
         left: 50%;
         pointer-events: none;
     }
     .k-callout-e {
-        margin-block-start: -$kendo-tooltip-callout-size;
+        margin-block-start: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-left-color: currentColor;
         top: 50%;
-        right: ( -1 * $kendo-tooltip-callout-size * 2 );
+        right: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
         pointer-events: none;
     }
     .k-callout-s {
-        margin-inline-start: -$kendo-tooltip-callout-size;
+        margin-inline-start: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-top-color: currentColor;
-        bottom: ( -1 * $kendo-tooltip-callout-size * 2 );
+        bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
         left: 50%;
         pointer-events: none;
     }
     .k-callout-w {
-        margin-block-start: -$kendo-tooltip-callout-size;
+        margin-block-start: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-right-color: currentColor;
         top: 50%;
-        left: ( -1 * $kendo-tooltip-callout-size * 2 );
+        left: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
         pointer-events: none;
     }
 

package/scss/tooltip/_variables.scss

@@ -3,13 +3,13 @@
 
 /// The border radius of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border-radius: $kendo-border-radius !default;
+$kendo-tooltip-border-radius: k-border-radius(md) !default;
 /// The horizontal padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-tooltip-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-tooltip-padding-y: k-spacing(2) !default;
 /// The width of the border around the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border-width: 0px !default;
@@ -31,11 +31,11 @@ $kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !defa
 $kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;
 /// The margin of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-margin: map.get( $kendo-spacing, 1 ) !default;
+$kendo-tooltip-title-margin: k-spacing(1) !default;
 
 /// The size of the Tooltip callout.
 /// @group tooltip
-$kendo-tooltip-callout-size: map.get( $kendo-spacing, 2 ) !default;
+$kendo-tooltip-callout-size: k-spacing(2) !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip

package/scss/treelist/_layout.scss

@@ -18,7 +18,7 @@
             // TODO: see what this does and use a better name
             .k-loading {
                 vertical-align: baseline;
-                margin-right: map.get( $kendo-spacing, 1 );
+                margin-right: k-spacing(1);
 
                 // TODO
                 display: none;
@@ -48,7 +48,7 @@
 
         .k-i-caret-alt-down,
         .k-i-caret-alt-right {
-            margin-inline-end: map.get( $kendo-spacing, 2 );
+            margin-inline-end: k-spacing(2);
         }
     }
 

package/scss/treelist/_variables.scss

@@ -1,9 +1,9 @@
 @use "../core/" as *;
 @use "../grid/_variables.scss" as *;
 
-/// Background color of the treelist footer row.
+/// The background color of the TreeList footer row.
 /// @group treelist
 $kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
-/// Border width of the treelist footer row.
+/// The border width of the TreeList footer row.
 /// @group treelist
 $kendo-treelist-footer-row-border-width: 1px !default;