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

package/scss/pivotgrid/_variables.scss

@@ -2,14 +2,14 @@
 
 
 // Pivot grid
-$kendo-pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-pivotgrid-spacer: k-spacing(4) !default;
 $kendo-pivotgrid-padding-x: null !default;
 $kendo-pivotgrid-padding-y: null !default;
-$kendo-pivotgrid-font-family: $kendo-font-family !default;
-$kendo-pivotgrid-font-size: $kendo-font-size-md !default;
-$kendo-pivotgrid-line-height: $kendo-line-height-md !default;
+$kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-pivotgrid-border-width: 1px !default;
-$kendo-pivotgrid-icon-spacing: 4px !default;
+$kendo-pivotgrid-icon-spacing: k-spacing(1) !default;
 
 $kendo-pivotgrid-row-header-width: 300px !default;
 $kendo-pivotgrid-column-header-height: 75px !default;
@@ -48,15 +48,15 @@ $kendo-pivotgrid-configurator-padding-y: null !default;
 $kendo-pivotgrid-configurator-border-width: 1px !default;
 
 $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default;
-$kendo-pivotgrid-configurator-header-padding-y: ( $kendo-pivotgrid-spacer * .75 ) !default;
+$kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default;
 $kendo-pivotgrid-configurator-header-font-size: 18px !default;
 $kendo-pivotgrid-configurator-header-font-weight: 500 !default;
 
 $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
-$kendo-pivotgrid-configurator-content-padding-y: 0px !default;
+$kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default;
 
-$kendo-pivotgrid-configurator-fields-margin-x: 0px !default;
-$kendo-pivotgrid-configurator-fields-margin-y: k-math-div( $kendo-pivotgrid-spacer, 2 ) !default;
+$kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default;
+$kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
 
 $kendo-pivotgrid-configurator-vertical-width: 320px !default;
 $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
@@ -75,16 +75,16 @@ $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow
 $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow !default;
 $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default;
 
-$kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default;
+$kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default;
 $kendo-pivotgrid-configurator-button-border-width: 1px !default;
-$kendo-pivotgrid-configurator-button-size: calc( #{$kendo-pivotgrid-line-height * 1em} + #{$kendo-pivotgrid-configurator-button-padding-y * 2} + #{$kendo-pivotgrid-configurator-button-border-width * 2} ) !default;
+$kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default;
 
 // Calculated fields
 $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-border-width: 1px !default;
-$kendo-pivotgrid-calculated-field-border-radius: $kendo-border-radius-sm !default;
+$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(sm) !default;
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;
@@ -96,8 +96,8 @@ $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !def
 $kendo-pivotgrid-calculated-field-header-border: null !default;
 
 
-$kendo-pivotgrid-treeview-padding-x: k-math-div( $kendo-pivotgrid-spacer, 2) !default;
-$kendo-pivotgrid-treeview-padding-y: 0px !default;
+$kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2) !default;
+$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;
 
 // Legacy variables
 $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;

package/scss/popup/_variables.scss

@@ -13,17 +13,17 @@ $kendo-popup-border-radius: null !default;
 
 /// Font size of the popup.
 /// @group popup
-$kendo-popup-font-size: $kendo-font-size-md !default;
+$kendo-popup-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the popup.
 /// @group popup
-$kendo-popup-line-height: $kendo-line-height-md !default;
+$kendo-popup-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Horizontal padding of the popup content.
 /// @group popup
-$kendo-popup-content-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-x: k-spacing(2) !default;
 /// Vertical padding of the popup content.
 /// @group popup
-$kendo-popup-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup

package/scss/progressbar/_variables.scss

@@ -14,10 +14,10 @@ $kendo-progressbar-animation-timing: 1s linear infinite !default;
 $kendo-progressbar-border-width: 0px !default;
 /// The font family of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-family: $kendo-font-family !default;
+$kendo-progressbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-size: $kendo-font-size-sm !default;
+$kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-line-height: 1 !default;

package/scss/prompt/_variables.scss

@@ -22,13 +22,13 @@ $kendo-prompt-header-border: $kendo-component-header-border !default;
 
 /// The vertical padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-x: k-spacing(4) !default;
 /// The spacing between the items of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the Prompt content.
 /// @group prompt
 $kendo-prompt-content-text: $kendo-component-header-text !default;
@@ -41,17 +41,17 @@ $kendo-prompt-content-border: $kendo-component-header-border !default;
 
 /// The spacing between the items of the Prompt content expander.
 /// @group prompt
-$kendo-prompt-expander-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-expander-spacing: k-spacing(2) !default;
 
 /// The vertical padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 /// The border radius of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: $kendo-border-radius-md !default;
+$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the Prompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-text: $kendo-component-text !default;

package/scss/radio/_variables.scss

@@ -13,23 +13,23 @@ $kendo-radio-border-width: 1px !default;
 
 /// The size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-radio-sm-size: k-spacing(3) !default;
 /// The size of a medium RadioButton.
 /// @group radio
-$kendo-radio-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-radio-md-size: k-spacing(4) !default;
 /// The size of a large RadioButton.
 /// @group radio
-$kendo-radio-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+$kendo-radio-lg-size: k-spacing(5) !default;
 
 /// The glyph size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-radio-sm-glyph-size: k-spacing(2.5) !default;
 /// The glyph size of a medium RadioButton.
 /// @group radio
-$kendo-radio-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-radio-md-glyph-size: k-spacing(3.5) !default;
 /// The glyph size of a large RadioButton.
 /// @group radio
-$kendo-radio-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+$kendo-radio-lg-glyph-size: k-spacing(4.5) !default;
 
 /// The ripple size of a small RadioButton.
 /// @group radio
@@ -161,17 +161,17 @@ $kendo-radio-disabled-checked-image: null !default;
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-radio-label-margin-x: k-spacing(1) !default;
 
 
 // Radio list
 
 /// The horizontal list item margin of the RadioButton.
 /// @group radio
-$kendo-radio-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-spacing(4) !default;
 /// The horizontal list item padding of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-padding-x: 0px !default;
+$kendo-radio-list-item-padding-x: k-spacing(0) !default;
 /// The vertical list item padding of the RadioButton.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;

package/scss/rating/_variables.scss

@@ -2,13 +2,13 @@
 
 /// The font family of the Rating.
 /// @group rating
-$kendo-rating-font-family: $kendo-font-family !default;
+$kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Rating.
 /// @group rating
-$kendo-rating-font-size: $kendo-font-size-md !default;
+$kendo-rating-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Rating.
 /// @group rating
-$kendo-rating-line-height: $kendo-line-height-md !default;
+$kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal margin of the Rating container.
 /// @group rating

package/scss/scheduler/_variables.scss

@@ -1,94 +1,237 @@
 // Scheduler
-$kendo-scheduler-border-width: 1px !default;
-$kendo-scheduler-font-family: $kendo-font-family !default;
-$kendo-scheduler-font-size: $kendo-font-size-md !default;
-$kendo-scheduler-line-height: $kendo-line-height-md !default;
 
+/// The width of the border around the Scheduler.
+/// @group scheduler
+$kendo-scheduler-border-width: 1px !default;
+/// The font family of the Scheduler.
+/// @group scheduler
+$kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Scheduler.
+/// @group scheduler
+$kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Scheduler.
+/// @group scheduler
+$kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-bg: $kendo-component-bg !default;
+/// The text color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-text: $kendo-component-text !default;
+/// The border color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border: $kendo-component-border !default;
 
+/// The background color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+/// The text color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-text: $kendo-toolbar-text !default;
+/// The border color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-border: $kendo-toolbar-border !default;
+/// The gradient of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
 
+/// The background color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-bg: $kendo-toolbar-bg !default;
+/// The text color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-text: $kendo-toolbar-text !default;
+/// The border color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-border: $kendo-toolbar-border !default;
+/// The gradient of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
+/// The minimum height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-min-height: 25px !default;
-$kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
+/// The border radius of the Scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
+/// The line height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
 
+/// The background color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
+/// The text color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-text: $kendo-selected-text !default;
+/// The border color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border: null !default;
+/// The gradient of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-gradient: null !default;
+/// The shadow of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-shadow: null !default;
 
+/// The background color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-bg: null !default;
+/// The text color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-text: null !default;
+/// The border color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-border: null !default;
+/// The gradient of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-gradient: null !default;
+/// The shadow of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-shadow: null !default;
 
+/// The background color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-text: $kendo-selected-text !default;
+/// The border color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-border: null !default;
+/// The gradient of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-gradient: null !default;
+/// The shadow of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
 
+/// The shadow of the ongoing Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$kendo-scheduler-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-scheduler-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the Scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
+/// The height of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
+/// The width of the Scheduler date column.
+/// @group scheduler
 $kendo-scheduler-datecolumn-width: 12em !default;
+/// The width of the Scheduler time column.
+/// @group scheduler
 $kendo-scheduler-timecolumn-width: 11em !default;
 
+/// The background color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
 
+/// The background color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-bg: null !default;
+/// The text color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-text: null !default;
 
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
 
-$kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+/// The horizontal padding of the year view in the Scheduler.
+/// @group scheduler
+$kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
+/// The vertical padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
-$kendo-scheduler-yearview-calendar-gap: k-map-get( $kendo-spacing, 3 ) !default;
+/// The spacing between the calendars of the year view in the Scheduler.
+/// @group scheduler
+$kendo-scheduler-yearview-calendar-gap: k-spacing(3) !default;
 
+/// The days with events indicator size of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-size: 3px !default;
+/// The top position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
+/// The left position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} ) !default;
+/// The border radius of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
+/// The background color of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default;
+/// The background color of the selected days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
-$kendo-scheduler-tooltip-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-scheduler-tooltip-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-padding-y: k-spacing(2) !default;
+/// The width of the border of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border-width: 0 !default;
+/// The background color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
+/// The text color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
+/// The border color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
+/// The shadow of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
 
 // TODO: use 3
-$kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;
-$kendo-scheduler-tooltip-day-font-size: $kendo-scheduler-tooltip-month-font-size * 2 !default;
-
+/// The vertical margin of the Scheduler Tooltip title.
+/// @group scheduler
+$kendo-scheduler-tooltip-title-margin-y: k-spacing(1) !default;
+/// The font size of the month inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the day inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;
+
+/// The max height of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
-$kendo-scheduler-tooltip-events-gap: k-map-get( $kendo-spacing, 1 ) !default;
-
-$kendo-scheduler-tooltip-event-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-scheduler-tooltip-event-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
-$kendo-scheduler-tooltip-event-gap: k-map-get( $kendo-spacing, 1 ) !default;
-
+/// The spacing between the events inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-events-gap: k-spacing(1) !default;
+
+/// The horizontal padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
+/// The vertical padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-padding-y: k-spacing(1) !default;
+/// The border radius of the events inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
+/// The spacing between the events items inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-gap: k-spacing(1) !default;
+
+/// The color of the Scheduler Tooltip callout.
+/// @group scheduler
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;

package/scss/scrollview/_variables.scss

@@ -5,13 +5,13 @@
 $kendo-scrollview-border-width: 1px !default;
 /// The font family of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-font-family: $kendo-font-family !default;
+$kendo-scrollview-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-font-size: $kendo-font-size-md !default;
+$kendo-scrollview-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-line-height: $kendo-line-height-md !default;
+$kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ScrollView.
 /// @group scrollview
@@ -47,13 +47,13 @@ $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
 $kendo-scrollview-pager-offset: 0 !default;
 /// The spacing between the ScrollView pager items.
 /// @group scrollview
-$kendo-scrollview-pager-item-spacing: 20px !default;
+$kendo-scrollview-pager-item-spacing: k-spacing(5) !default;
 /// The border width of the ScrollView pager items.
 /// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
 /// The height of the ScrollView pager.
 /// @group scrollview
-$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
+$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) !default;
 
 /// The text color of the highlight over the tapped ScrollView navigation arrows.
 /// @group scrollview

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-padding-x: k-spacing(1) !default;
+$kendo-signature-sm-padding-x: k-spacing(0.5) !default;
 $kendo-signature-md-padding-x: $kendo-signature-padding-x !default;
-$kendo-signature-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !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/_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
@@ -110,7 +110,7 @@ $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !def
 
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 )) !default;
 /// The background color of the Slider's track selection.
 /// @group slider
 $kendo-slider-selection-bg: $kendo-color-primary !default;

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