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

package/scss/signature/_variables.scss

@@ -6,10 +6,10 @@ $kendo-signature-lg-min-height: 110px !default;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-signature-sm-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-signature-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-signature-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-signature-padding-x: k-spacing(1) !default;
+$kendo-signature-sm-padding-x: k-spacing(0.5) !default;
+$kendo-signature-md-padding-x: k-spacing(1) !default;
+$kendo-signature-lg-padding-x: k-spacing(2) !default;
 
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
 $kendo-signature-sm-padding-y: $kendo-signature-sm-padding-x !default;
@@ -45,5 +45,5 @@ $kendo-signature-sizes: (
     )
 ) !default;
 
-$kendo-signature-actions-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-actions-gap: k-spacing(1) !default;
 $kendo-signature-maximized-line-width: 3px !default;

package/scss/skeleton/_variables.scss

@@ -5,7 +5,7 @@
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
 /// The border radius of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-border-radius: $kendo-border-radius-md !default;
+$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the rectangular Skeleton.
 /// @group skeleton

package/scss/slider/_theme.scss

@@ -12,7 +12,7 @@
 
         .k-slider-track,
         .k-slider-selection {
-            @include border-radius( $kendo-border-radius );
+            @include border-radius( k-border-radius(md) );
         }
 
         .k-slider-track {

package/scss/slider/_variables.scss

@@ -15,13 +15,13 @@ $kendo-slider-alt-size: 30px !default;
 
 /// The font family of the Slider.
 /// @group slider
-$kendo-slider-font-family: $kendo-font-family !default;
+$kendo-slider-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Slider.
 /// @group slider
-$kendo-slider-font-size: $kendo-font-size-md !default;
+$kendo-slider-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Slider.
 /// @group slider
-$kendo-slider-line-height: $kendo-line-height-md !default;
+$kendo-slider-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The offset of the Slider Buttons.
 /// @group slider

package/scss/splitter/_variables.scss

@@ -5,13 +5,13 @@
 $kendo-splitter-border-width: 1px !default;
 /// The font family of the Splitter.
 /// @group splitter
-$kendo-splitter-font-family: $kendo-font-family !default;
+$kendo-splitter-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Splitter.
 /// @group splitter
-$kendo-splitter-font-size: $kendo-font-size-md !default;
+$kendo-splitter-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Splitter.
 /// @group splitter
-$kendo-splitter-line-height: $kendo-line-height-md !default;
+$kendo-splitter-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Splitter.
 /// @group splitter
@@ -25,7 +25,7 @@ $kendo-splitter-border: $kendo-component-border !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
-$kendo-splitter-splitbar-size: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-splitter-splitbar-size: k-spacing(3) !default;
 /// The length of the Splitter drag handle.
 /// @group splitter
 $kendo-splitter-drag-handle-length: 20px !default;
@@ -34,13 +34,13 @@ $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: 7px !default;
+$kendo-splitter-drag-icon-margin: calc( #{k-spacing(3.5)} / 2 ) !default;
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: null !default;
 /// The vertical padding of the collapse icon in the Splitter.
 /// @group splitter
-$kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
+$kendo-splitter-collapse-icon-padding-y: k-spacing(0.5) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter

package/scss/spreadsheet/_layout.scss

@@ -194,8 +194,8 @@
             }
 
             .k-spreadsheet-sheets-remove {
-                margin-right: k-map-get( $kendo-spacing, 2 );
-                margin-left: - k-map-get( $kendo-spacing, 2 );
+                margin-right: k-spacing(2);
+                margin-left: calc( #{k-spacing(2)} * -1 );
                 padding: 0;
                 line-height: 1;
                 display: inline-flex;
@@ -523,7 +523,7 @@
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $kendo-border-radius );
+        @include border-radius( k-border-radius(md) );
         padding: $kendo-padding-y;
         line-height: 1;
         position: absolute;
@@ -549,7 +549,7 @@
                 color: inherit;
             }
             .k-link {
-                padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
+                padding-left: calc( #{$kendo-icon-size} + calc( 2 * #{$kendo-padding-md-y} ) );
             }
             .k-icon {
                 margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
@@ -598,10 +598,10 @@
         }
         .k-details-content,
         .k-columnmenu-item-content {
-            padding: k-map-get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-filter-and {
                 width: min-content;
@@ -634,10 +634,10 @@
         .k-reset-color { border-bottom-width: 1px; }
         .k-custom-color { border-top-width: 1px; }
         .k-spreadsheet-border-type-palette {
-            padding: k-map-get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: grid;
             grid-template-columns: repeat(5, max-content);
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
         }
     }
 
@@ -673,12 +673,12 @@
     .k-spreadsheet-format-cells {
 
         .k-spreadsheet-preview {
-            margin-top: k-map-get( $kendo-spacing, 2 );
+            margin-top: k-spacing(2);
             text-align: center;
         }
 
         .k-list-scroller {
-            margin-top: k-map-get( $kendo-spacing, 2 );
+            margin-top: k-spacing(2);
             height: 210px;
             border-width: 1px;
             border-style: solid;
@@ -708,7 +708,7 @@
         .k-page-orientation {
             position: absolute;
             right: 0;
-            top: k-map-get( $kendo-spacing, 2 );
+            top: k-spacing(2);
 
             .k-font-icon {
                 font-size: 6em;

package/scss/spreadsheet/_variables.scss

@@ -8,13 +8,13 @@
 $kendo-spreadsheet-border-width: 1px !default;
 /// The font family of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-font-family: $kendo-font-family !default;
+$kendo-spreadsheet-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-font-size: $kendo-font-size-md !default;
+$kendo-spreadsheet-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-line-height: $kendo-line-height-md !default;
+$kendo-spreadsheet-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Spreadsheet.
 /// @group spreadsheet
@@ -57,10 +57,10 @@ $kendo-spreadsheet-table-header-gradient: $kendo-spreadsheet-header-gradient !de
 $kendo-spreadsheet-action-bar-border-width: 1px !default;
 /// The horizontal padding of the Spreadsheet action bar.
 /// @group spreadsheet
-$kendo-spreadsheet-action-bar-padding-y: k-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: k-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;
@@ -69,11 +69,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: k-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: k-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
@@ -144,7 +144,7 @@ $kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-spreadsheet-bg, .5 ) !defaul
 
 /// The vertical padding of the Spreadsheet cell.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-padding-y: k-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;
@@ -154,10 +154,10 @@ $kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;
 $kendo-spreadsheet-cell-editor-line-height: 20px !default;
 /// The horizontal padding of the Spreadsheet cell editor.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-editor-padding-x: k-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;
@@ -182,10 +182,10 @@ $kendo-spreadsheet-cell-dirty-border: $kendo-color-error !default;
 
 /// The horizontal padding of the Spreadsheet sheets bar.
 /// @group spreadsheet
-$kendo-spreadsheet-sheets-bar-padding-x: k-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: k-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;
@@ -198,7 +198,7 @@ $kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
 $kendo-spreadsheet-insert-image-dialog-border-width: 2px !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;
@@ -213,13 +213,13 @@ $kendo-spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default
 $kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default;
 /// The border radius of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border-radius: k-border-radius(md) !default;
 /// The shadow of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
 /// The border radius of the Spreadsheet image Dialog preview overlay.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default;
@@ -247,7 +247,7 @@ $kendo-spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default;
 $kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
 /// The border radius of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
+$kendo-spreadsheet-drawing-handle-border-radius: k-border-radius(lg) !default;
 /// The outline style of the Spreadsheet drawing.
 /// @group spreadsheet
 $kendo-spreadsheet-drawing-outline-style: solid !default;
@@ -260,5 +260,5 @@ $kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(i
 
 /// The vertical spacing of the Spreadsheet DropZone.
 /// @group spreadsheet
-$kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-spreadsheet-dropzone-spacing-y: k-spacing(4) !default;
 

package/scss/stepper/_variables.scss

@@ -14,33 +14,33 @@ $kendo-stepper-padding-x: null !default;
 $kendo-stepper-padding-y: null !default;
 /// The horizontal margin the Stepper label.
 /// @group stepper
-$kendo-stepper-label-margin-x: 12px !default;
+$kendo-stepper-label-margin-x: k-spacing(3) !default;
 /// The horizontal padding the Stepper label.
 /// @group stepper
-$kendo-stepper-label-padding-x: 12px !default;
+$kendo-stepper-label-padding-x: k-spacing(3) !default;
 /// The vertical padding the Stepper label.
 /// @group stepper
-$kendo-stepper-label-padding-y: 5px !default;
+$kendo-stepper-label-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;
 /// The width of the border around the Stepper.
 /// @group stepper
 $kendo-stepper-border-width: 0px !default;
 
 /// The horizontal padding of the Stepper content.
 /// @group stepper
-$kendo-stepper-inline-content-padding-x: 20px !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: 10px !default;
+$kendo-stepper-inline-content-padding-y: k-spacing(2.5) !default;
 
 // The font size of the Stepper.
 /// @group stepper
-$kendo-stepper-font-size: $kendo-font-size-md !default;
+$kendo-stepper-font-size: var( --kendo-font-size, inherit ) !default;
 // The line height of the Stepper.
 /// @group stepper
-$kendo-stepper-line-height: $kendo-line-height-md !default;
+$kendo-stepper-line-height: var( --kendo-line-height, normal ) !default;
 // The font family of the Stepper.
 /// @group stepper
-$kendo-stepper-font-family: $kendo-font-family !default;
+$kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The background color of the Stepper.
 /// @group stepper

package/scss/table/_layout.scss

@@ -239,7 +239,7 @@
 
         .k-table-#{$size} .k-table-list .k-table-group-td > span {
             padding-block: 0;
-            padding-inline: k-math-div( $_cell-padding-x, 2 );
+            padding-inline: calc( #{$_cell-padding-x} / 2 );
         }
 
         .k-table-#{$size} .k-table-list .k-table-group-row::before {

package/scss/table/_variables.scss

@@ -29,33 +29,33 @@ $kendo-table-cell-padding-x: null !default;
 /// @group table
 $kendo-table-cell-padding-y: null !default;
 
-$kendo-table-sm-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-table-sm-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(2) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(1) !default;
 
-$kendo-table-md-cell-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-table-md-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-table-md-cell-padding-x: k-spacing(3) !default;
+$kendo-table-md-cell-padding-y: k-spacing(2) !default;
 
-$kendo-table-lg-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-table-lg-cell-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-table-lg-cell-padding-x: k-spacing(2) !default;
+$kendo-table-lg-cell-padding-y: k-spacing(2.5) !default;
 
 /// The sizes of the table.
 /// @group table
 $kendo-table-sizes: (
     sm: (
-        font-size: $kendo-font-size-md,
-        line-height: $kendo-line-height-md,
+        font-size: var( --kendo-font-size, inherit ),
+        line-height: var( --kendo-line-height, normal ),
         cell-padding-x: $kendo-table-sm-cell-padding-x,
         cell-padding-y: $kendo-table-sm-cell-padding-y
     ),
     md: (
-        font-size: $kendo-font-size-md,
-        line-height: $kendo-line-height-md,
+        font-size: var( --kendo-font-size, inherit ),
+        line-height: var( --kendo-line-height, normal ),
         cell-padding-x: $kendo-table-md-cell-padding-x,
         cell-padding-y: $kendo-table-md-cell-padding-y
     ),
     lg: (
-        font-size: $kendo-font-size-md,
-        line-height: $kendo-line-height-md,
+        font-size: var( --kendo-font-size, inherit ),
+        line-height: var( --kendo-line-height, normal ),
         cell-padding-x: $kendo-table-lg-cell-padding-x,
         cell-padding-y: $kendo-table-lg-cell-padding-y
     )

package/scss/tabstrip/_layout.scss

@@ -162,8 +162,8 @@
             }
 
             > .k-button {
-                padding-block: k-map-get( $kendo-spacing, 1 );
-                padding-inline: k-map-get( $kendo-spacing, 1 );
+                padding-block: k-spacing(1);
+                padding-inline: k-spacing(1);
                 width: auto;
                 height: auto;
                 flex: none;

package/scss/tabstrip/_variables.scss

@@ -1,12 +1,12 @@
 // Tabstrip
 
-$kendo-tabstrip-wrapper-padding-x: 0px !default;
-$kendo-tabstrip-wrapper-padding-y: 0px !default;
+$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
 $kendo-tabstrip-wrapper-border-width: 0px !default;
 
-$kendo-tabstrip-font-family: $kendo-font-family !default;
-$kendo-tabstrip-font-size: $kendo-font-size-md !default;
-$kendo-tabstrip-line-height: $kendo-line-height-md !default;
+$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-tabstrip-border-width: 1px !default;
 
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -25,19 +25,19 @@ $kendo-tabstrip-border: $kendo-component-border !default;
 
 /// Horizontal padding of tabs
 /// @group tabstrip
-$kendo-tabstrip-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-tabstrip-item-padding-x: k-spacing(3) !default;
 /// Vertical padding of tabs
 /// @group tabstrip
-$kendo-tabstrip-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-tabstrip-item-padding-y: k-spacing(1.5) !default;
 /// Width of border around tabs
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 1px !default;
 /// Border radius of tabs
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: $kendo-border-radius-md !default;
+$kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// Spacing between tabs
 /// @group tabstrip
-$kendo-tabstrip-item-gap: 0 !default;
+$kendo-tabstrip-item-gap: k-spacing(0) !default;
 
 /// Background color of tabs
 /// @group tabstrip
@@ -94,10 +94,10 @@ $kendo-tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tabstrip-content-padding-x: k-spacing(4) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tabstrip-content-padding-y: k-spacing(4) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: 1px !default;

package/scss/taskboard/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The spacing index of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-taskboard-spacer: k-spacing(4) !default;
 /// The vertical padding of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-padding-y: null !default;
@@ -11,13 +11,13 @@ $kendo-taskboard-padding-y: null !default;
 $kendo-taskboard-padding-x: null !default;
 /// The font family of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-font-family: $kendo-font-family !default;
+$kendo-taskboard-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-font-size: $kendo-font-size-md !default;
+$kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-line-height: $kendo-line-height-md !default;
+$kendo-taskboard-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-bg: null !default;
@@ -56,13 +56,13 @@ $kendo-taskboard-content-padding-x: $kendo-taskboard-content-padding-y !default;
 
 /// The vertical spacing of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-spacing-y: k-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: k-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;
@@ -75,7 +75,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: $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: $kendo-base-bg !default;
@@ -98,16 +98,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: k-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: k-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: k-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: 500 !default;
@@ -123,7 +123,7 @@ $kendo-taskboard-column-cards-padding-y: null !default;
 $kendo-taskboard-column-cards-padding-x: null !default;
 /// The spacing of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-gap: k-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.
 /// @group taskboard
@@ -149,7 +149,7 @@ $kendo-taskboard-pane-border: $kendo-component-border !default;
 
 /// The vertical padding of the TaskBoard pane header.
 /// @group taskboard
-$kendo-taskboard-pane-header-padding-y: ( $kendo-taskboard-spacer * .75 ) !default;
+$kendo-taskboard-pane-header-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The horizontal padding of the TaskBoard pane header.
 /// @group taskboard
 $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-spacer !default;
@@ -162,14 +162,14 @@ $kendo-taskboard-pane-header-text: $kendo-component-header-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-spacer !default;
 
 /// The vertical padding of the TaskBoard pane actions.
 /// @group taskboard
-$kendo-taskboard-pane-actions-padding-y: ( $kendo-taskboard-spacer * .75 ) !default;
+$kendo-taskboard-pane-actions-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The horizontal padding of the TaskBoard pane actions.
 /// @group taskboard
 $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-spacer !default;
@@ -185,7 +185,7 @@ $kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-y !default;
 $kendo-taskboard-card-border-width: $kendo-card-border-width !default;
 /// The border radius of the TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-border-radius: $kendo-border-radius-md !default;
+$kendo-taskboard-card-border-radius: k-border-radius(md) !default;
 /// The shadow of the TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-shadow: $kendo-card-shadow !default;

package/scss/tilelayout/_variables.scss

@@ -9,7 +9,7 @@ $kendo-tile-layout-bg: $kendo-base-bg !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tilelayout
-$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tile-layout-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the TileLayout
 /// @group tilelayout
@@ -27,7 +27,7 @@ $kendo-tile-layout-card-focus-shadow: $kendo-card-focus-shadow !default;
 $kendo-tile-layout-hint-border-width: 1px !default;
 /// The radius of the border around the TileLayout hint.
 /// @group tilelayout
-$kendo-tile-layout-hint-border-radius: $kendo-border-radius-lg !default;
+$kendo-tile-layout-hint-border-radius: k-border-radius(lg) !default;
 /// The color of the border around the TileLayout hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-border: $kendo-component-border !default;

package/scss/timeline/_layout.scss

@@ -33,7 +33,7 @@
             text-align: center;
             padding-block: $kendo-timeline-flag-padding-y;
             padding-inline: $kendo-timeline-flag-padding-x;
-            border-radius: $kendo-border-radius;
+            border-radius: k-border-radius(md);
             line-height: $kendo-timeline-flag-line-height;
             min-width: $kendo-timeline-flag-min-width;
             max-width: $kendo-timeline-flag-max-width;
@@ -93,7 +93,7 @@
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    border-radius: $kendo-border-radius;
+                    border-radius: k-border-radius(md);
                 }
             }
         }
@@ -139,7 +139,7 @@
             height: 100%;
             width: $kendo-timeline-track-size;
             transform: translateX(-50%);
-            border-radius: $kendo-border-radius-lg;
+            border-radius: k-border-radius(lg);
         }
 
         .k-timeline-flag-wrap {
@@ -197,7 +197,7 @@
             }
 
             .k-event-collapse {
-                margin-block: -$kendo-icon-spacing;
+                margin-block: calc( #{$kendo-icon-spacing} * -1 );
                 margin-inline: 0;
                 transform: rotate(90deg);
                 transition: transform .2s ease-in-out;