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

package/scss/gantt/_variables.scss

@@ -1,93 +1,238 @@
 // Gantt
-$kendo-gantt-border-width: 1px !default;
-$kendo-gantt-font-family: $kendo-font-family !default;
-$kendo-gantt-font-size: $kendo-font-size-md !default;
-$kendo-gantt-line-height: $kendo-line-height-md !default;
 
+/// The border width of the Gantt.
+/// @group gantt
+$kendo-gantt-border-width: 1px !default;
+/// The font family of the Gantt.
+/// @group gantt
+$kendo-gantt-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Gantt.
+/// @group gantt
+$kendo-gantt-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Gantt.
+/// @group gantt
+$kendo-gantt-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color of the Gantt.
+/// @group gantt
 $kendo-gantt-bg: $kendo-component-bg !default;
+/// The text color of the Gantt.
+/// @group gantt
 $kendo-gantt-text: $kendo-component-text !default;
+/// The border color of the Gantt.
+/// @group gantt
 $kendo-gantt-border: $kendo-component-border !default;
 
+/// The background color of the Gantt TreeList.
+/// @group gantt
 $kendo-gantt-treelist-bg: null !default;
+/// The text color of the Gantt TreeList.
+/// @group gantt
 $kendo-gantt-treelist-text: null !default;
+/// The border color of the Gantt TreeList.
+/// @group gantt
 $kendo-gantt-treelist-border: null !default;
 
+/// The background color of the Gantt non-working days.
+/// @group gantt
 $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
+/// The text color of the Gantt non-working days.
+/// @group gantt
 $kendo-gantt-nonwork-text: null !default;
+/// The border color of the Gantt non-working days.
+/// @group gantt
 $kendo-gantt-nonwork-border: null !default;
 
+/// The size of the Gantt connecting lines.
+/// @group gantt
 $kendo-gantt-line-size: 2px !default;
+/// The background fill color of the Gantt connecting lines.
+/// @group gantt
 $kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+/// The background fill of the selected Gantt connecting lines.
+/// @group gantt
 $kendo-gantt-line-selected-fill: $kendo-selected-bg !default;
 
+/// The size of the Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-size: 8px !default;
-$kendo-gantt-dot-spacing: 4px !default;
+/// The spacing of the Gantt task dot.
+/// @group gantt
+$kendo-gantt-dot-spacing: k-spacing(1) !default;
+/// The background color of the Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-bg: $kendo-gantt-text !default;
+/// The border color of the Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-border: null !default;
+/// The background color of the hovered Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-hover-bg: $kendo-gantt-bg !default;
+/// The border color of the hovered Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
 
+/// The background color of the Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-bg: $kendo-color-primary !default;
+/// The border color of the Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-border: $kendo-color-primary !default;
+/// The background color of the selected Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-selected-bg: $kendo-color-secondary !default;
+/// The border color of the selected Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-selected-border: $kendo-color-secondary !default;
 
+/// The background color of the Gantt summary.
+/// @group gantt
 $kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
+/// The background color of the Gantt summary progress.
+/// @group gantt
 $kendo-gantt-summary-progress-bg: $kendo-color-primary !default;
+/// The background color of the selected Gantt summary.
+/// @group gantt
 $kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( secondary-subtle-active ), k-color-mix( $kendo-color-secondary, $kendo-gantt-bg )) !default;
+/// The background color of the selected Gantt summary progress.
+/// @group gantt
 $kendo-gantt-summary-progress-selected-bg: $kendo-color-secondary !default;
 
-$kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the Gantt task.
+/// @group gantt
+$kendo-gantt-task-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Gantt task.
+/// @group gantt
+$kendo-gantt-task-padding-y: k-spacing(1) !default;
+/// The border width of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-border-width: 0px !default;
+/// The background color of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
+/// The text color of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-text: $kendo-color-primary-contrast !default;
+/// The border color of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-border: null !default;
+/// The background color of the Gantt task progress.
+/// @group gantt
 $kendo-gantt-task-progress-bg: $kendo-color-primary !default;
+/// The background color of selected the Gantt task.
+/// @group gantt
 $kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( secondary-subtle-active ), k-color-mix( $kendo-color-secondary, $kendo-gantt-bg )) !default;
+/// The text color of the selected Gantt task.
+/// @group gantt
 $kendo-gantt-task-selected-text: $kendo-color-secondary-contrast !default;
+/// The border color of the selected Gantt task.
+/// @group gantt
 $kendo-gantt-task-selected-border: null !default;
+/// The background color of the selected Gantt task progress.
+/// @group gantt
 $kendo-gantt-task-progress-selected-bg: $kendo-color-secondary !default;
 
+/// The vertical margin of the Gantt task planned line.
+/// @group gantt
 $kendo-gantt-planned-margin-y: .35em !default;
+/// The border width of the Gantt task planned line.
+/// @group gantt
 $kendo-gantt-planned-border-width: 2px !default;
+/// The line height of the Gantt task planned line.
+/// @group gantt
 $kendo-gantt-planned-line-height: .75em !default;
 
+/// The vertical margin of the Gantt planned dependencies.
+/// @group gantt
 $kendo-gantt-planned-dependency-margin-y: .7em !default;
 
+/// The default width of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-width: 6px !default;
+/// The default height of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
+/// The border radius of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
+/// The horizontal margin of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-left-margin-x: calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
+/// The horizontal margin of the Gantt milestone planned line dot.
+/// @group gantt
 $kendo-gantt-planned-milestone-moment-margin-x: k-math-div( $kendo-gantt-planned-moment-width, 2 ) !default;
 
+/// The default height of the Gantt planned line.
+/// @group gantt
 $kendo-gantt-planned-duration-height: $kendo-gantt-planned-border-width !default;
+/// The height of the hovered Gantt planned line.
+/// @group gantt
 $kendo-gantt-planned-duration-hover-height: calc( #{$kendo-gantt-planned-border-width} + 1px ) !default;
 
+/// The top position of the Gantt drag hint.
+/// @group gantt
 $kendo-gantt-planned-single-drag-hint-top: .85em !default;
+/// The top position of the Gantt summary drag hint.
+/// @group gantt
 $kendo-gantt-planned-summary-drag-hint-top: 1.35em !default;
+/// The top position of the Gantt planned milestone drag hint.
+/// @group gantt
 $kendo-gantt-planned-milestone-drag-hint-top: 1.15em !default;
 
+/// The horizontal margin of the Gantt milestone wrap.
+/// @group gantt
 $kendo-gantt-rtl-milestone-wrap-margin-x: -2.4em !default;
+/// The horizontal margin of the Gantt milestone line dot.
+/// @group gantt
 $kendo-gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
+/// The horizontal margin of the Gantt milestone task dot.
+/// @group gantt
 $kendo-gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
 
+/// The horizontal offset of the Gantt delayed task resize handler.
+/// @group gantt
 $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
+/// The background color of the Gantt planned Tooltip.
+/// @group gantt
 $kendo-gantt-planned-bg: $kendo-color-primary !default;
+/// The border color of the Gantt planned Tooltip.
+/// @group gantt
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
+/// The background color of the Gantt delayed task.
+/// @group gantt
 $kendo-gantt-delayed-bg: $kendo-color-error !default;
+/// The complement background color of the Gantt delayed task.
+/// @group gantt
 $kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
 
+/// The background color of the Gantt advanced task.
+/// @group gantt
 $kendo-gantt-advanced-bg: $kendo-color-success !default;
+/// The complement background color of the Gantt advanced task.
+/// @group gantt
 $kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
 
+/// The text color of the Gantt delayed task action.
+/// @group gantt
 $kendo-gantt-action-on-offset-text: #000000 !default;
+/// The top position of the Gantt delayed task resize handler.
+/// @group gantt
 $kendo-gantt-offset-resize-handler-top: 50% !default;
 
+/// The default width of the Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-width: 200px !default;
+/// The default width of the Gantt validation Tooltip label.
+/// @group gantt
 $kendo-gantt-validation-tooltip-label-width: 50px !default;
+/// The border color of the Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-border: #656565 !default;
+/// The border color of the valid Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+/// The border color of the invalid Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;

package/scss/grid/_variables.scss

@@ -1,70 +1,70 @@
 // 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: 16px !default;
+$kendo-grid-header-padding-y: k-spacing(4) !default;
 
 
-/// Horizontal padding of the grid grouping header.
+/// The horizontal padding of the Grid grouping header.
 /// @group grid
-$kendo-grid-grouping-header-padding-x: 8px !default;
-/// Vertical padding of the grid grouping header.
+$kendo-grid-grouping-header-padding-x: k-spacing(2) !default;
+/// 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-x !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-padding-y !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 edit cell.
+/// The vertical padding of the Grid filter cell.
 /// @group grid
-$kendo-grid-edit-cell-padding-y: 6px !default;
+$kendo-grid-edit-cell-padding-y: k-spacing(1.5) !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: $kendo-chip-calc-size !default;
-$kendo-grid-group-drop-hint-top: calc( ( #{$kendo-chip-calc-size} + #{$kendo-grid-grouping-header-padding-y * 2} - #{$kendo-grid-group-drop-hint-height} ) / 2) !default;
+$kendo-grid-group-drop-hint-top: calc( ( #{$kendo-chip-calc-size} + calc( #{$kendo-grid-grouping-header-padding-y} * 2 ) - #{$kendo-grid-group-drop-hint-height} ) / 2) !default;
 
 
-$kendo-grid-sm-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
-$kendo-grid-sm-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-grid-sm-padding-x: k-spacing(2.5) !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: k-map-get( $kendo-spacing, 2.5 ) !default;
-$kendo-grid-sm-grouping-header-padding-x: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-grid-sm-header-padding-y: k-spacing(2.5) !default;
+$kendo-grid-sm-grouping-header-padding-x: k-spacing(1.5) !default;
 $kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-x !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: $kendo-grid-sm-padding-x !default;
-$kendo-grid-sm-filter-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-sm-filter-cell-padding-y: k-spacing(2) !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, 1 ) !default;
+$kendo-grid-sm-edit-cell-padding-y: k-spacing(1) !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;
@@ -82,7 +82,7 @@ $kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default
 $kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
 $kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
 $kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
-$kendo-grid-md-selection-aggregates-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-md-selection-aggregates-padding-x: k-spacing(2) !default;
 $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-x !default;
 
 
@@ -126,113 +126,113 @@ $kendo-grid-sizes: (
 
 $kendo-grid-header-font-size: 12px !default;
 $kendo-grid-header-first-border: 1px !default;
-$kendo-grid-header-menu-icon-spacing: 14px !default;
+$kendo-grid-header-menu-icon-spacing: k-spacing(3.5) !default;
 
 $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;
-/// Background 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: null !default;
 
-/// Background color of grid footer
+/// The background color of Grid footer.
 /// @group grid
 $kendo-grid-footer-bg: $kendo-table-footer-bg !default;
-/// Text color of grid footer
+/// The text color of Grid footer.
 /// @group grid
 $kendo-grid-footer-text: $kendo-table-footer-text !default;
-/// Border color of grid footer
+/// The border color of Grid footer.
 /// @group grid
 $kendo-grid-footer-border: $kendo-table-footer-border !default;
 
 // TODO(ZHEKOV): we need this, so k-alt won't override it. When we remove k-alt, we can make this null.
-/// 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;
-/// Text 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: 20px !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: transparent !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
-$kendo-grid-sorted-icon-spacing: 4px !default;
+$kendo-grid-sorted-icon-spacing: k-spacing(1) !default;
 $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-grid-header-text !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,8 +263,8 @@ $kendo-grid-column-menu-max-width: 320px !default;
 
 $kendo-grid-filter-menu-check-all-border-bottom-width: 0 !default;
 
-$kendo-grid-filter-menu-item-spacing-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-grid-filter-menu-item-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-filter-menu-item-spacing-x: k-spacing(4) !default;
+$kendo-grid-filter-menu-item-spacing-y: k-spacing(2) !default;
 
 $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-icon-spacing} ) !default;
 
@@ -277,14 +277,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, 2 ) !default;
+$kendo-grid-column-menu-items-wrap-padding-x: k-spacing(0) !default;
+$kendo-grid-column-menu-items-wrap-padding-y: k-spacing(2) !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;
 
@@ -292,14 +292,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 * 3) !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: 32px !default;
 
@@ -307,12 +307,12 @@ $kendo-grid-grouping-row-border-top: 0px !default;
 $kendo-grid-group-footer-border-y: 1px !default;
 $kendo-grid-group-footer-second-cell-border: 0px !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 ), .24 )) !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;