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

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

package/scss/tabstrip/_variables.scss

@@ -1,146 +1,151 @@
 @use "sass:map";
 @use "../core/" as *;
 @use "../list/_variables.scss" as *;
+@use "../core/spacing" as *;
 
-/// The horizontal padding of the tabstrip wrapper
+/// The horizontal padding of the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-padding-x: 0px !default;
-/// The vertical padding of the tabstrip wrapper
+$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;
-/// The width of the border around the tabstrip wrapper
+$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
+/// The border width around the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-border-width: 0px !default;
-/// The background color of the tabstrip wrapper
+/// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: transparent !default;
-/// The text color of the tabstrip wrapper
+/// The text color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-text: initial !default;
-/// The border color of the tabstrip wrapper
+/// The border color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-border: initial !default;
 
-/// The font family of the tabstrip
+/// The font family of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
-/// The font size of the tabstrip
+/// The font size of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
-/// The line height of the tabstrip
+/// The line height of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
-/// The width of the border around the tabstrip
+/// The border width around the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border-width: 0px !default;
-/// The background color of the tabstrip
+/// The background color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-bg: transparent !default;
-/// The text color of the tabstrip
+/// The text color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-text: var( --kendo-component-text, initial ) !default;
-/// The border color of the tabstrip
+/// The border color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border: transparent !default;
 
-/// The horizontal padding of the tabstrip item
+/// The horizontal padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
-/// The vertical padding of the tabstrip item
+/// The vertical padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-y: map.get( $kendo-spacing, 2 ) + map.get( $kendo-spacing, 1 ) !default;
-/// The width of the border around the tabstrip item
+$kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !default;
+/// The border width around the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 0px !default;
-/// The border radius of the tabstrip item
+/// The border radius of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
-/// The gap between the tabstrip items
+$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;
-///  The background color of the tabstrip item
+$kendo-tabstrip-item-gap: k-spacing(2) !default;
+///  The background color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-bg: transparent !default;
-/// The text color of the tabstrip item
+/// The text color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-text: var( --kendo-component-text, initial ) !default;
-/// The border color of the tabstrip item
+/// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: transparent !default;
-/// The text color of the disabled tabstrip item
+/// The text color of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
-/// The background color of the disabled tabstrip item
+/// The background color of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-bg: none !default;
-/// The border color of the disabled tabstrip item
+/// The border color of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-border: var( --kendo-disabled-border, initial ) !default;
+/// The opacity of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-opacity: null !default;
+/// The filter of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-filter: null !default;
 
-/// The background color of hovered tabs
+/// The background color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
-/// The text color of hovered tabs
+/// The text color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-text: var( --kendo-hover-text, inherit ) !default;
-/// The border color of hovered tabs
+/// The border color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-border: var( --kendo-hover-bg, inherit ) !default;
-/// The background color of selected tabs
+/// The background color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-bg: var( --kendo-component-bg, transparent ) !default;
-/// The text color of selected tabs
+/// The text color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
-/// The border color of selected tabs
+/// The border color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
-/// The background gradient of selected tabs
+/// The background gradient of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
-/// The focus shadow of the tabstrip item
+/// The shadow of the focused TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
-/// The text color of the sortable tabstrip item
+/// The text color of the dragged TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-dragging-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 // Indicator
-/// The border width of the tabstrip indicator
+/// The border width of the TabStrip indicator.
 /// @group tabstrip
-$kendo-tabstrip-indicator-size: map.get( $kendo-spacing, 0.5 ) !default;
-/// The border color of the tabstrip ripple
+$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
+/// The horizontal padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: map.get( $kendo-spacing, 3 ) !default;
-/// The vertical padding of tabstrip content
+$kendo-tabstrip-content-padding-x: k-spacing(3) !default;
+/// The vertical padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-/// The width of border around tabstrip content
+$kendo-tabstrip-content-padding-y: k-spacing(1.5) !default;
+/// The border width around the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: 1px !default;
 
-/// The background color of tabstrip content
+/// The background color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-bg: var( --kendo-component-bg, transparent ) !default;
-/// The text color of tabstrip content
+/// The text color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-text: var( --kendo-component-text, inherit ) !default;
-/// The border color of tabstrip content
+/// The border color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border: transparent !default;
-/// The border color of tabstrip focused content
+/// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: var( --kendo-component-text, initial ) !default;
 
-/// The horizontal button padding of the scrollable tabstrip
+/// The horizontal button padding of the scrollable TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-scrollable-button-padding-x: map.get( $kendo-spacing, 1 ) !default;
-// The vertical button padding of the scrollable tabstrip
+$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