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

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( black, .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
@@ -262,4 +262,4 @@ $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
@@ -192,7 +192,7 @@ $kendo-stepper-optional-label-text: $kendo-subtle-text !default;
 $kendo-stepper-optional-label-opacity: null !default;
 /// The font size of the optional Stepper label.
 /// @group stepper
-$kendo-stepper-optional-label-font-size: $kendo-font-size-sm !default;
+$kendo-stepper-optional-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font style of the optional Stepper label.
 /// @group stepper
 $kendo-stepper-optional-label-font-style: null !default;

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, 1 ) !default;
-$kendo-table-sm-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(1) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(1) !default;
 
-$kendo-table-md-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-table-md-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-table-md-cell-padding-x: k-spacing(2) !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/_variables.scss

@@ -1,115 +1,157 @@
-// Tabstrip
-$kendo-tabstrip-wrapper-padding-x: 0px !default;
-$kendo-tabstrip-wrapper-padding-y: 0px !default;
+// TabStrip
+
+
+/// The horizontal padding of the TabStrip wrapper.
+/// @group tabstrip
+$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+/// The vertical padding of the TabStrip wrapper.
+/// @group tabstrip
+$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;
 
-$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;
+/// The font family of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-line-height: var( --kendo-line-height, normal )!default;
+/// The border width around the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The background color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
+/// The text color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-text: null !default;
+/// The border color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-border: null !default;
 
-/// Background color of tabstrip component
+/// The background color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-bg: null !default;
-/// Text color of tabstrip component
+/// The text color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-text: $kendo-component-text !default;
-/// Border color of tabstrip component
+/// The border color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border: $kendo-component-border !default;
 
-/// Horizontal padding of tabs
+/// The horizontal padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of tabs
+$kendo-tabstrip-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// Width of border around tabs
+$kendo-tabstrip-item-padding-y: k-spacing(1) !default;
+/// The border width around the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 1px !default;
-/// Border radius of tabs
+/// The border radius of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: $kendo-border-radius-md !default;
-/// Spacing between tabs
+$kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
+/// The gap between the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-gap: 0 !default;
+$kendo-tabstrip-item-gap: k-spacing(0) !default;
 
-/// Background color of tabs
+///  The background color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-bg: $kendo-base-bg !default;
-/// Text color of tabs
+/// The text color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-text: $kendo-base-text !default;
-/// Border color of tabs
+/// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: $kendo-base-border !default;
-/// Background gradient of tabs
+/// The gradient of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gradient: $kendo-base-gradient !default;
 
-/// Background color of hovered tabs
+/// The background color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-bg: $kendo-hover-bg !default;
-/// Text color of hovered tabs
+/// The text color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-text: $kendo-hover-text !default;
-/// Border color of hovered tabs
+/// The border color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-border: $kendo-hover-border !default;
-/// Background gradient of hovered tabs
+/// The gradient of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-gradient: null !default;
 
-/// Background color of selected tabs
+/// The background color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-bg: $kendo-component-bg !default;
-/// Text color of selected tabs
+/// The text color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-text: $kendo-component-text !default;
-/// Border color of selected tabs
+/// The border color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-border: $kendo-component-border !default;
-/// Background gradient of selected tabs
+/// The gradient of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-gradient: false !default;
 
+/// The shadow of the focused TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
+/// The shadow of the dragged TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
 
+/// The background color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-bg: null !default;
+/// The text color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-text: null !default;
+/// The border color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-border: null !default;
+/// The gradient of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-gradient: null !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 border width of the TabStrip indicator.
+/// @group tabstrip
 $kendo-tabstrip-indicator-size: null !default;
+/// The border color of the TabStrip ripple.
+/// @group tabstrip
 $kendo-tabstrip-indicator-color: null !default;
 
-/// Horizontal padding of tabstrip content
+/// The horizontal padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of tabstrip content
+$kendo-tabstrip-content-padding-x: k-spacing(4) !default;
+/// The vertical padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
-/// Width of border around tabstrip content
+$kendo-tabstrip-content-padding-y: k-spacing(4) !default;
+/// The border width around the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: 1px !default;
 
-/// Background color of tabstrip content
+/// The background color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-bg: $kendo-component-bg !default;
-/// Text color of tabstrip content
+/// The text color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-text: $kendo-component-text !default;
-/// Border color of tabstrip content
+/// The border color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border: $kendo-component-border !default;
-/// Border color of tabstrip focused content
+/// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !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;

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/_variables.scss

@@ -2,30 +2,30 @@
 
 /// The horizontal spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-x: 40px !default;
+$kendo-timeline-spacing-x: k-spacing(10) !default;
 /// The vertical spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-y: 40px !default;
+$kendo-timeline-spacing-y: k-spacing(10) !default;
 /// The padding between the Timeline's track items.
 /// @group timeline
-$kendo-timeline-items-padding: 16px !default;
+$kendo-timeline-items-padding: k-spacing(4) !default;
 
 /// The font family of the Timeline.
 /// @group timeline
-$kendo-timeline-font-family: $kendo-font-family !default;
+$kendo-timeline-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Timeline.
 /// @group timeline
-$kendo-timeline-font-size: $kendo-font-size-md !default;
+$kendo-timeline-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Timeline.
 /// @group timeline
-$kendo-timeline-line-height: $kendo-line-height-md !default;
+$kendo-timeline-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal spacing of the mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-spacing-x: 16px !default;
+$kendo-timeline-mobile-spacing-x: k-spacing(4) !default;
 /// The vertical spacing of the mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-spacing-y: 16px !default;
+$kendo-timeline-mobile-spacing-y: k-spacing(4) !default;
 
 /// The width of the Timeline track arrow.
 /// @group timeline
@@ -55,7 +55,7 @@ $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-siz
 $kendo-timeline-track-border-width: 1px !default;
 /// The bottom margin of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-margin-bottom: 16px !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(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom}) !default;
@@ -127,7 +127,7 @@ $kendo-timeline-flag-margin-bottom-calc: calc(#{$kendo-timeline-track-size} + 2
 $kendo-timeline-date-width: 50px !default;
 /// The bottom margin of the Timeline date.
 /// @group timeline
-$kendo-timeline-date-margin-bottom: 8px !default;
+$kendo-timeline-date-margin-bottom: k-spacing(2) !default;
 
 /// The padding of the vertical Timeline.
 /// @group timeline

package/scss/timeselector/_variables.scss

@@ -1,9 +1,9 @@
 // Time selector
 
 $kendo-time-selector-border-width: 1px !default;
-$kendo-time-selector-font-family: $kendo-font-family !default;
-$kendo-time-selector-font-size: $kendo-font-size-md !default;
-$kendo-time-selector-line-height: $kendo-line-height-md !default;
+$kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-time-selector-bg: $kendo-component-bg !default;
 $kendo-time-selector-text: $kendo-component-text !default;
@@ -16,9 +16,9 @@ $kendo-time-selector-header-border-width: 0px !default;
 $kendo-time-list-width: 4em !default;
 $kendo-time-list-height: 240px !default;
 
-$kendo-time-list-title-font-size: $kendo-font-size-sm !default;
+$kendo-time-list-title-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-time-list-title-line-height: 1.5 !default;
-$kendo-time-list-title-height: ( $kendo-time-list-title-font-size * $kendo-time-list-title-line-height) !default;
+$kendo-time-list-title-height: calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
 $kendo-time-list-title-text: $kendo-subtle-text !default;
 $kendo-time-list-title-focus-text: $kendo-component-text !default;
 
@@ -26,7 +26,7 @@ $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 $kendo-time-list-highlight-border-width: 1px 0px !default;
-$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( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
 $kendo-time-list-highlight-bg: $kendo-component-bg !default;
 $kendo-time-list-highlight-border: $kendo-component-border !default;