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

package/scss/grid/_variables.scss

@@ -1,68 +1,68 @@
 // Grid
 $kendo-grid-border-width: 1px !default;
-$kendo-grid-font-family: $kendo-font-family !default;
-$kendo-grid-font-size: $kendo-font-size-md !default;
-$kendo-grid-line-height: $kendo-line-height-md !default;
+$kendo-grid-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-grid-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-grid-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Horizontal padding of the grid.
+/// The horizontal padding of the Grid.
 /// @group grid
 $kendo-grid-padding-x: $kendo-table-md-cell-padding-x !default;
-/// Vertical padding of the grid.
+/// The vertical padding of the Grid.
 /// @group grid
 $kendo-grid-padding-y: $kendo-table-md-cell-padding-y !default;
 
-/// Horizontal padding of the grid header.
+/// The horizontal padding of the Grid header.
 /// @group grid
 $kendo-grid-header-padding-x: $kendo-grid-padding-x !default;
-/// Vertical padding of the grid header.
+/// The vertical padding of the Grid header.
 /// @group grid
 $kendo-grid-header-padding-y: $kendo-grid-padding-y !default;
 
-/// Horizontal padding of the grid grouping header.
+/// The horizontal padding of the Grid grouping header.
 /// @group grid
 $kendo-grid-grouping-header-padding-x: $kendo-grid-padding-y !default;
-/// Vertical padding of the grid grouping header.
+/// The vertical padding of the Grid grouping header.
 /// @group grid
 $kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-x !default;
 
-/// Horizontal padding of the grid cell.
+/// The horizontal padding of the Grid cell.
 /// @group grid
 $kendo-grid-cell-padding-x: $kendo-grid-padding-x !default;
-/// Vertical padding of the grid cell.
+/// The vertical padding of the Grid cell.
 /// @group grid
 $kendo-grid-cell-padding-y: $kendo-grid-padding-y !default;
 
-/// Horizontal padding of the grid filter cell.
+/// The horizontal padding of the Grid filter cell.
 /// @group grid
 $kendo-grid-filter-cell-padding-x: $kendo-grid-padding-y !default;
-/// Vertical padding of the grid filter cell.
+/// The vertical padding of the Grid filter cell.
 /// @group grid
 $kendo-grid-filter-cell-padding-y: $kendo-grid-filter-cell-padding-x !default;
 
-/// Horizontal padding of the grid edit cell.
+/// The horizontal padding of the Grid edit cell.
 /// @group grid
 $kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
-/// Vertical padding of the grid filter cell.
+/// The vertical padding of the Grid filter cell.
 /// @group grid
-$kendo-grid-edit-cell-padding-y: 3px !default;
+$kendo-grid-edit-cell-padding-y: calc( #{k-spacing(1.5)} / 2 ) !default;
 
 $kendo-grid-group-drop-hint-size: 6px !default;
 $kendo-grid-group-drop-hint-line-size: k-math-div( $kendo-grid-group-drop-hint-size, 3 ) !default;
 $kendo-grid-group-drop-hint-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
 $kendo-grid-group-drop-hint-top: 3px !default;
 
-$kendo-grid-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-grid-sm-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-grid-sm-padding-x: k-spacing(2) !default;
+$kendo-grid-sm-padding-y: k-spacing(1) !default;
 $kendo-grid-sm-header-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-header-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-grouping-header-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-cell-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-cell-padding-y: $kendo-grid-sm-padding-y !default;
-$kendo-grid-sm-filter-cell-padding-x: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-grid-sm-filter-cell-padding-x: k-spacing(1.5) !default;
 $kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-x !default;
 $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-cell-padding-x !default;
-$kendo-grid-sm-edit-cell-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-grid-sm-edit-cell-padding-y: k-spacing(0.5) !default;
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
 $kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
@@ -133,90 +133,90 @@ $kendo-grid-toolbar-border-width: $kendo-grid-border-width !default;
 $kendo-grid-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width !default;
 $kendo-grid-cell-vertical-border-width: $kendo-table-cell-vertical-border-width !default;
 
-/// Background color of the grid component
+/// The background color of the Grid.
 /// @group grid
 $kendo-grid-bg: $kendo-table-bg !default;
-/// Text color of the grid component
+/// The text color of the Grid.
 /// @group grid
 $kendo-grid-text: $kendo-table-text !default;
-/// Border color of the grid component
+/// The border color of the Grid.
 /// @group grid
 $kendo-grid-border: $kendo-table-border !default;
 
-/// Background color of grid header
+/// The background color of Grid header.
 /// @group grid
 $kendo-grid-header-bg: $kendo-table-header-bg !default;
-/// Text color of grid header
+/// The text color of Grid header.
 /// @group grid
 $kendo-grid-header-text: $kendo-table-header-text !default;
-/// Border color of grid header
+/// The border color of Grid header.
 /// @group grid
 $kendo-grid-header-border: $kendo-table-header-border !default;
-/// Background gradient of grid header
+/// The background gradient of Grid header.
 /// @group grid
 $kendo-grid-header-gradient: $kendo-table-header-gradient !default;
 
-/// Background color of grid footer
+/// The background color of Grid footer.
 /// @group grid
 $kendo-grid-footer-bg: $kendo-grid-header-bg !default;
-/// Text color of grid footer
+/// The text color of Grid footer.
 /// @group grid
 $kendo-grid-footer-text: $kendo-grid-header-text !default;
-/// Border color of grid footer
+/// The border color of Grid footer.
 /// @group grid
 $kendo-grid-footer-border: $kendo-grid-header-border !default;
 
-/// Background color of alternating rows in grid
+/// The background color of the Grid alternating rows.
 /// @group grid
 $kendo-grid-alt-bg: $kendo-table-alt-row-bg !default;
-/// Text color of alternating rows in grid
+/// The text color of the Grid alternating rows.
 /// @group grid
 $kendo-grid-alt-text: $kendo-table-alt-row-text !default;
-/// Border color of alternating rows in grid
+/// The border color of the Grid alternating rows.
 /// @group grid
 $kendo-grid-alt-border: $kendo-table-alt-row-border !default;
 
-/// Background color of hovered rows in grid
+/// The background color of hovered Grid rows.
 /// @group grid
 $kendo-grid-hover-bg: $kendo-table-hover-bg !default;
-/// Text color of hovered rows in grid
+/// The text color of hovered Grid rows.
 /// @group grid
 $kendo-grid-hover-text: $kendo-table-hover-text !default;
-/// Border color of hovered rows in grid
+/// The border color of hovered Grid rows.
 /// @group grid
 $kendo-grid-hover-border: $kendo-table-hover-border !default;
 
-/// Background color of selected rows in grid
+/// The background color of selected Grid rows.
 /// @group grid
 $kendo-grid-selected-bg: $kendo-table-selected-bg !default;
-/// Text color of selected rows in grid
+/// The text color of selected Grid rows.
 /// @group grid
 $kendo-grid-selected-text: $kendo-table-selected-text !default;
-/// Border color of selected rows in grid
+/// The border color of selected Grid rows.
 /// @group grid
 $kendo-grid-selected-border: $kendo-table-selected-border !default;
 
-/// Background color of the selection aggregates container
+/// The background color of the Grid selection aggregates container.
 /// @group grid
 $kendo-grid-selection-aggregates-bg: $kendo-grid-header-bg !default;
-/// Text color of the selection aggregates container
+/// The text color of the Grid selection aggregates container.
 /// @group grid
 $kendo-grid-selection-aggregates-text: $kendo-grid-text !default;
-/// Border color of the selection aggregates container
+/// The border color of the Grid selection aggregates container.
 /// @group grid
 $kendo-grid-selection-aggregates-border: $kendo-grid-border !default;
-/// Border width of the selection aggregates container
+/// The border width of the Grid selection aggregates container.
 /// @group grid
 $kendo-grid-selection-aggregates-border-width: $kendo-grid-border-width !default;
-/// Spacing between the selection aggregates items
+/// The spacing between the selection aggregates items.
 /// @group grid
-$kendo-grid-selection-aggregates-spacing: k-map-get( $kendo-spacing, 2 ) !default;
-/// Line height of the selection aggregates container
+$kendo-grid-selection-aggregates-spacing: k-spacing(2) !default;
+/// The line height of the Grid selection aggregates container.
 /// @group grid
 $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
-/// Font weight of the selection aggregates container
+/// The font weight of the Grid selection aggregates container.
 /// @group grid
-$kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
+$kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
 $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
@@ -224,15 +224,15 @@ $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
 $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
-$kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
+$kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
-$kendo-grid-sorting-index-spacing-y: k-math-div( $kendo-icon-spacing, 2 ) !default;
-$kendo-grid-sorting-index-spacing-x: -$kendo-grid-sorting-index-spacing-y !default;
+$kendo-grid-sorting-index-spacing-y: calc( #{$kendo-icon-spacing} / 2 ) !default;
+$kendo-grid-sorting-index-spacing-x: calc( #{$kendo-grid-sorting-index-spacing-y} * -1) !default;
 
 
 $kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;
 
-$kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-command-cell-button-spacing: k-spacing(2) !default;
 // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
 
@@ -263,7 +263,7 @@ $kendo-grid-column-menu-max-width: 320px !default;
 
 $kendo-grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
-$kendo-grid-filter-menu-item-spacing-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-filter-menu-item-spacing-x: k-spacing(2) !default;
 $kendo-grid-filter-menu-item-spacing-y: $kendo-grid-filter-menu-item-spacing-x !default;
 
 $kendo-grid-column-menu-popup-padding-x: null !default;
@@ -275,14 +275,14 @@ $kendo-grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !defaul
 $kendo-grid-column-menu-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 $kendo-grid-column-menu-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
-$kendo-grid-column-menu-items-wrap-padding-x: 0 !default;
-$kendo-grid-column-menu-items-wrap-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-grid-column-menu-items-wrap-padding-x: k-spacing(0) !default;
+$kendo-grid-column-menu-items-wrap-padding-y: k-spacing(1.5) !default;
 
 $kendo-grid-column-menu-group-header-padding-x: $kendo-menu-popup-md-item-padding-x !default;
 $kendo-grid-column-menu-group-header-padding-y: $kendo-menu-popup-md-item-padding-y !default;
 
-$kendo-grid-column-menu-group-header-font-size: $kendo-font-size-sm !default;
-$kendo-grid-column-menu-group-header-line-height: $kendo-line-height-md !default;
+$kendo-grid-column-menu-group-header-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-grid-column-menu-group-header-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-grid-column-menu-group-header-text-transform: uppercase !default;
 $kendo-grid-column-menu-group-header-border-bottom-width: 1px !default;
 
@@ -290,14 +290,14 @@ $kendo-grid-column-menu-group-header-bg: null !default;
 $kendo-grid-column-menu-group-header-text: $kendo-popup-text !default;
 $kendo-grid-column-menu-group-header-border: $kendo-popup-border !default;
 
-$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: 0 !default;
-$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default;
+$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default;
 
 $kendo-grid-column-menu-tabbed-bg: $kendo-base-bg !default;
 
 $kendo-grid-drag-cell-width: ($kendo-icon-size * 2.25) !default;
 
-$kendo-grid-row-inner-height: calc( #{$kendo-line-height-em} + #{$kendo-grid-cell-padding-y * 2} ) !default;
+$kendo-grid-row-inner-height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) ) !default;
 
 $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
 
@@ -305,12 +305,12 @@ $kendo-grid-grouping-row-border-top: 1px !default;
 $kendo-grid-group-footer-border-y: 1px !default;
 $kendo-grid-group-footer-second-cell-border: 1px !default;
 
-/// Background color of the grid row resize indicator
+/// The background color of the Grid row resize indicator.
 /// @group grid
 $kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
-/// Active background color of the grid row resize indicator
+/// The background color of the active Grid row resize indicator.
 /// @group grid
 $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
-/// Height of the grid row resize indicator
+/// The height of the Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
+$kendo-grid-row-resizer-height: k-spacing(0.5) !default;

package/scss/imageeditor/_variables.scss

@@ -5,21 +5,21 @@ $kendo-image-editor-padding-y: null !default;
 $kendo-image-editor-padding-x: null !default;
 
 $kendo-image-editor-border-width: 1px !default;
-$kendo-image-editor-font-size: $kendo-font-size-md !default;
-$kendo-image-editor-line-height: $kendo-line-height-md !default;
-$kendo-image-editor-font-family: $kendo-font-family !default;
+$kendo-image-editor-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-image-editor-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;
 
 $kendo-image-editor-content-border-width: 1px !default;
 
-$kendo-image-editor-action-pane-padding-y: k-map-get( $kendo-spacing, 8 ) !default;
-$kendo-image-editor-action-pane-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
+$kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
 $kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc(240px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 $kendo-image-editor-crop-border-width: 1px !default;
 $kendo-image-editor-crop-border-style: dashed !default;
 
-$kendo-image-editor-resize-handle-margin-x: 1px !default;
-$kendo-image-editor-resize-handle-margin-y: 1px !default;
+$kendo-image-editor-resize-handle-margin-x: k-spacing(1px) !default;
+$kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 $kendo-image-editor-resize-handle-size: 15px !default;
 

package/scss/input/_layout.scss

@@ -429,12 +429,12 @@
             line-height: $_line-height;
 
             .k-input-values {
-                padding: k-math-div( $_padding-y, 2 );
-                gap: k-math-div( $_padding-y, 2 );
+                padding: calc( #{$_padding-y} /2 );
+                gap: calc( #{$_padding-y} / 2 );
             }
             .k-input-values > .k-searchbar,
             .k-input-values > .k-input-inner {
-                margin: - k-math-div( $_padding-y, 2 );
+                margin: calc( calc( #{$_padding-y} / 2 ) * -1 );
             }
 
             .k-input-inner {
@@ -473,8 +473,8 @@
             }
 
             &.k-icon-picker .k-input-inner {
-                width: calc( #{ $_line-height * 1em } );
-                height: calc( #{ $_line-height * 1em } );
+                width: calc( ( #{ $_line-height} * 1em ) );
+                height: calc( ( #{ $_line-height} * 1em ) );
                 padding: $_padding-y;
                 box-sizing: content-box;
             }

package/scss/input/_variables.scss

@@ -14,59 +14,59 @@ $kendo-input-border-radius: null !default;
 
 /// The horizontal padding of the Input components.
 /// @group input
-$kendo-input-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Input components.
 /// @group input
 $kendo-input-md-padding-x: $kendo-input-padding-x !default;
 /// The horizontal padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-lg-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the Input components.
 /// @group input
-$kendo-input-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-input-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-input-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
 $kendo-input-md-padding-y: $kendo-input-padding-y !default;
 /// The vertical padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-lg-padding-y: k-spacing(2) !default;
 
 /// The font family of the Input components.
 /// @group input
-$kendo-input-font-family: $kendo-font-family !default;
+$kendo-input-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Input components.
 /// @group input
-$kendo-input-font-size: $kendo-font-size-md !default;
+$kendo-input-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small Input components.
 /// @group input
-$kendo-input-sm-font-size: $kendo-font-size-md !default;
+$kendo-input-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Input components.
 /// @group input
 $kendo-input-md-font-size: $kendo-input-font-size !default;
 /// The font size of the large Input components.
 /// @group input
-$kendo-input-lg-font-size: $kendo-font-size-lg !default;
+$kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the Input components.
 /// @group input
-$kendo-input-line-height: $kendo-line-height-md !default;
+$kendo-input-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the small Input components.
 /// @group input
-$kendo-input-sm-line-height: $kendo-line-height-md !default;
+$kendo-input-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the medium Input components.
 /// @group input
 $kendo-input-md-line-height: $kendo-input-line-height !default;
 /// The line height of the large Input components.
 /// @group input
-$kendo-input-lg-line-height: $kendo-line-height-lg !default;
+$kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The sizes map for the Input components.
 /// @group input
@@ -247,7 +247,7 @@ $kendo-input-clear-value-hover-opacity: 1 !default;
 
 /// The vertical margin of the clear value icon.
 /// @group input
-$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-input-values-margin-y: k-spacing(0.5) !default;
 /// The horizontal margin of the clear value icon.
 /// @group input
 $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;

package/scss/list/_variables.scss

@@ -2,35 +2,35 @@
 
 /// The font family of the List components.
 /// @group list
-$kendo-list-font-family: $kendo-font-family !default;
+$kendo-list-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the List component, if no size is set.
 /// @group list
 $kendo-list-font-size: null !default;
-$kendo-list-sm-font-size: $kendo-font-size-md !default;
-$kendo-list-md-font-size: $kendo-font-size-md !default;
-$kendo-list-lg-font-size: $kendo-font-size-lg !default;
+$kendo-list-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-list-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-list-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the List component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-sm-line-height: $kendo-line-height-md !default;
-$kendo-list-md-line-height: $kendo-line-height-md !default;
-$kendo-list-lg-line-height: $kendo-line-height-lg !default;
+$kendo-list-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-list-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-list-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The horizontal padding of the List header, if no size is set.
 /// @group list
 $kendo-list-header-padding-x: null !default;
-$kendo-list-sm-header-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-md-header-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-header-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-header-padding-x: k-spacing(2) !default;
+$kendo-list-md-header-padding-x: k-spacing(2) !default;
+$kendo-list-lg-header-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the List header, if no size is set.
 /// @group list
 $kendo-list-header-padding-y: null !default;
-$kendo-list-sm-header-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-list-md-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-list-lg-header-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-sm-header-padding-y: k-spacing(0.5) !default;
+$kendo-list-md-header-padding-y: k-spacing(1) !default;
+$kendo-list-lg-header-padding-y: k-spacing(1.5) !default;
 
 /// The border width of the List header.
 /// @group list
@@ -52,21 +52,21 @@ $kendo-list-lg-header-line-height: null !default;
 
 /// The font weight of the List header.
 /// @group list
-$kendo-list-header-font-weight: $kendo-font-weight-bold !default;
+$kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
 /// The horizontal padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
-$kendo-list-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-item-padding-x: k-spacing(2) !default;
+$kendo-list-md-item-padding-x: k-spacing(2) !default;
+$kendo-list-lg-item-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-y: null !default;
-$kendo-list-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-list-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-list-lg-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-item-padding-y: k-spacing(0.5) !default;
+$kendo-list-md-item-padding-y: k-spacing(1) !default;
+$kendo-list-lg-item-padding-y: k-spacing(2) !default;
 
 /// The font size of the List items, if no size is set.
 /// @group list
@@ -85,16 +85,16 @@ $kendo-list-lg-item-line-height: null !default;
 /// The horizontal padding of the List group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-x: null !default;
-$kendo-list-sm-group-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-md-group-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-group-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-sm-group-item-padding-x: k-spacing(2) !default;
+$kendo-list-md-group-item-padding-x: k-spacing(2) !default;
+$kendo-list-lg-group-item-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the List group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-y: null !default;
-$kendo-list-sm-group-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-list-md-group-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-list-lg-group-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-sm-group-item-padding-y: k-spacing(0.5) !default;
+$kendo-list-md-group-item-padding-y: k-spacing(1) !default;
+$kendo-list-lg-group-item-padding-y: k-spacing(1.5) !default;
 
 /// The border width of the List group items.
 /// @group list
@@ -116,7 +116,7 @@ $kendo-list-lg-group-item-line-height: null !default;
 
 /// The font weight of a List group item.
 /// @group list
-$kendo-list-group-item-font-weight: $kendo-font-weight-bold !default;
+$kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
 
 /// The map with the sizes of the List.

package/scss/listbox/_variables.scss

@@ -2,10 +2,10 @@
 
 /// The spacing between the ListBox elements.
 /// @group listbox
-$kendo-listbox-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-listbox-spacing: k-spacing(2) !default;
 /// The spacing between the ListBox buttons.
 /// @group listbox
-$kendo-listbox-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-listbox-button-spacing: k-spacing(2) !default;
 /// The width of the ListBox.
 /// @group listbox
 $kendo-listbox-width: 10em !default;
@@ -17,13 +17,13 @@ $kendo-listbox-default-height: 200px !default;
 $kendo-listbox-border-width: 1px !default;
 /// The font family of the ListBox.
 /// @group listbox
-$kendo-listbox-font-family: $kendo-font-family !default;
+$kendo-listbox-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ListBox.
 /// @group listbox
-$kendo-listbox-font-size: $kendo-font-size-md !default;
+$kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ListBox.
 /// @group listbox
-$kendo-listbox-line-height: $kendo-line-height-md !default;
+$kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ListBox.
 /// @group listbox
@@ -47,4 +47,4 @@ $kendo-listbox-item-padding-y: null !default;
 $kendo-listbox-drop-hint-width: 1px !default;
 /// The width of the border around the ListBox drop hint.
 /// @group listbox
-$kendo-listbox-drop-hint-border-width: null !default;
+$kendo-listbox-drop-hint-border-width: null !default;

package/scss/listgroup/_layout.scss

@@ -48,8 +48,8 @@
         position: relative;
 
         > .k-link {
-            margin-block: (-$kendo-listgroup-item-padding-y);
-            margin-inline: (-$kendo-listgroup-item-padding-x);
+            margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
+            margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 );
             padding-block: $kendo-listgroup-item-padding-y;
             padding-inline: $kendo-listgroup-item-padding-x;
             color: inherit;
@@ -82,7 +82,7 @@
         }
 
         > .k-select {
-            margin: (-$kendo-listgroup-item-padding-y) (-$kendo-listgroup-item-padding-x) (-$kendo-listgroup-item-padding-y) 0;
+            margin: calc( #{$kendo-listgroup-item-padding-y} * -1 ) calc( #{$kendo-listgroup-item-padding-x} * -1 ) calc( #{$kendo-listgroup-item-padding-y} * -1 ) 0;
             padding: $kendo-listgroup-item-padding-y;
             border-width: 0 0 0 1px;
             border-style: solid;
@@ -94,8 +94,8 @@
 
     // Forms in listgroup
     .k-listgroup-form-row {
-        margin-block: (-$kendo-listgroup-item-padding-y);
-        margin-inline: (-$kendo-listgroup-item-padding-x);
+        margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
+        margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 );
         padding-block: $kendo-listgroup-item-padding-y;
         padding-inline: $kendo-listgroup-item-padding-x;
         display: flex;
@@ -160,13 +160,13 @@
         .k-listgroup-item-segmented {
 
             > .k-link {
-                margin-right: -$kendo-listgroup-item-padding-x;
+                margin-right: calc( #{$kendo-listgroup-item-padding-x} * -1 );
                 margin-left: 0;
             }
 
             > .k-select {
                 margin-right: 0;
-                margin-left: -$kendo-listgroup-item-padding-x;
+                margin-left: calc( #{$kendo-listgroup-item-padding-x} * -1 );
                 border-right-width: 1px;
                 border-left-width: 0;
             }