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

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

@@ -40,20 +40,20 @@ $kendo-input-lg-padding-y: $input-padding-y-lg !default;
 
 /// The font family of 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 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-sm !default;
+$kendo-input-sm-font-size: var( --kendo-font-size-sm, inherit )!default;
 /// The font size of the medium Input components.
 /// @group input
-$kendo-input-md-font-size: $kendo-font-size-md !default;
+$kendo-input-md-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the large Input components.
 /// @group input
-$kendo-input-lg-font-size: $kendo-font-size-md !default;
+$kendo-input-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// The line height of input components.
 /// @group input
@@ -63,10 +63,10 @@ $kendo-input-line-height: $input-line-height !default;
 $kendo-input-sm-line-height: k-math-div( 20, 14 ) !default;
 /// The line height of the medium Input components.
 /// @group input
-$kendo-input-md-line-height: $kendo-line-height-md !default;
+$kendo-input-md-line-height: var( --kendo-line-height, normal) !default;
 /// The line height of the large Input components.
 /// @group input
-$kendo-input-lg-line-height: $kendo-line-height-md !default;
+$kendo-input-lg-line-height: var( --kendo-line-height, 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-sm !default;
-$kendo-list-md-font-size: $kendo-font-size-md !default;
-$kendo-list-lg-font-size: $kendo-font-size-md !default;
+$kendo-list-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-list-md-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-list-lg-font-size: var( --kendo-font-size, 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: k-math-div( 20, 14 ) !default;
-$kendo-list-md-line-height: $kendo-line-height-md !default;
-$kendo-list-lg-line-height: $kendo-line-height-md !default;
+$kendo-list-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-list-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of 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, 4 ) !default;
-$kendo-list-md-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-list-lg-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-list-sm-header-padding-x: k-spacing(4) !default;
+$kendo-list-md-header-padding-x: k-spacing(4) !default;
+$kendo-list-lg-header-padding-x: k-spacing(4) !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, 1 ) !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, 2 ) !default;
+$kendo-list-sm-header-padding-y: k-spacing(1) !default;
+$kendo-list-md-header-padding-y: k-spacing(1) !default;
+$kendo-list-lg-header-padding-y: k-spacing(2) !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, 4 ) !default;
-$kendo-list-md-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-list-sm-item-padding-x: k-spacing(4) !default;
+$kendo-list-md-item-padding-x: k-spacing(4) !default;
+$kendo-list-lg-item-padding-x: k-spacing(4) !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, 1 ) !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(1) !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, 4 ) !default;
-$kendo-list-md-group-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-list-lg-group-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-list-sm-group-item-padding-x: k-spacing(4) !default;
+$kendo-list-md-group-item-padding-x: k-spacing(4) !default;
+$kendo-list-lg-group-item-padding-x: k-spacing(4) !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, 4 ) !default;
+$kendo-listbox-button-spacing: k-spacing(4) !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 ListBoxx.
 /// @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/_variables.scss

@@ -1,14 +1,14 @@
 // Listgroup
 $kendo-listgroup-border-width: 1px !default;
-$kendo-listgroup-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listgroup-border-radius: k-spacing(1) !default;
 
-$kendo-listgroup-font-size: $kendo-font-size-md !default;
-$kendo-listgroup-line-height: $kendo-line-height-md !default;
+$kendo-listgroup-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-listgroup-bg: $kendo-component-bg !default;
 $kendo-listgroup-text: $kendo-component-text !default;
 $kendo-listgroup-border: $kendo-component-border !default;
 
-$kendo-listgroup-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-listgroup-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-listgroup-item-padding-x: k-spacing(4) !default;
+$kendo-listgroup-item-padding-y: k-spacing(2) !default;
 $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !default;

package/scss/listview/_variables.scss

@@ -2,22 +2,22 @@
 
 /// The horizontal padding of the ListView.
 /// @group listview
-$kendo-listview-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-padding-x: k-spacing(1) !default;
 /// The vertical padding of the ListView.
 /// @group listview
-$kendo-listview-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-padding-y: k-spacing(1) !default;
 /// The width of the border around bordered ListView.
 /// @group listview
 $kendo-listview-border-width: 1px !default;
 /// The font family of the ListView.
 /// @group listview
-$kendo-listview-font-family: $kendo-font-family !default;
+$kendo-listview-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ListView.
 /// @group listview
-$kendo-listview-font-size: $kendo-font-size-md !default;
+$kendo-listview-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ListView.
 /// @group listview
-$kendo-listview-line-height: $kendo-line-height-md !default;
+$kendo-listview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ListView.
 /// @group listview
@@ -31,10 +31,10 @@ $kendo-listview-border: $kendo-component-border !default;
 
 /// The horizontal padding of the ListView items.
 /// @group listview
-$kendo-listview-item-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-spacing(1) !default;
 /// The vertical padding of the ListView items.
 /// @group listview
-$kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-spacing(1) !default;
 
 /// The text color of the selected ListView items.
 /// @group listview

package/scss/loader/_layout.scss

@@ -19,7 +19,7 @@
     }
 
     .k-loading-image::before {
-        border-width: k-map-get( $kendo-spacing, 1 );
+        border-width: k-spacing(1);
     }
 
 }

package/scss/loader/_variables.scss

@@ -6,53 +6,53 @@ $kendo-loader-segment-border-radius: 50% !default;
 
 /// The size of the small Loader segment.
 /// @group loader
-$kendo-loader-sm-segment-size: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-sm-segment-size: k-spacing(1) !default;
 /// The size of the medium Loader segment.
 /// @group loader
-$kendo-loader-md-segment-size: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-md-segment-size: k-spacing(2) !default;
 /// The size of the large Loader segment.
 /// @group loader
-$kendo-loader-lg-segment-size: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-loader-lg-segment-size: k-spacing(4) !default;
 
 /// The padding of the small Loader.
 /// @group loader
-$kendo-loader-sm-padding: k-math-div( $kendo-loader-sm-segment-size, 2 ) !default;
+$kendo-loader-sm-padding: calc( #{ $kendo-loader-sm-segment-size} / 2 ) !default;
 /// The padding of the medium Loader.
 /// @group loader
-$kendo-loader-md-padding: k-math-div( $kendo-loader-md-segment-size, 2 ) !default;
+$kendo-loader-md-padding: calc( #{ $kendo-loader-md-segment-size} / 2 ) !default;
 /// The padding of the large Loader.
 /// @group loader
-$kendo-loader-lg-padding: k-math-div( $kendo-loader-lg-segment-size, 2 ) !default;
+$kendo-loader-lg-padding: calc( #{ $kendo-loader-lg-segment-size} / 2 ) !default;
 
 /// The width of the small spinner-3 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+$kendo-loader-sm-spinner-3-width: calc( #{ $kendo-loader-sm-segment-size} * 4 ) !default;
 /// The width of the medium spinner-3 Loader.
 /// @group loader
-$kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+$kendo-loader-md-spinner-3-width: calc( #{ $kendo-loader-md-segment-size} * 4 ) !default;
 /// The width of the large spinner-3 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
+$kendo-loader-lg-spinner-3-width: calc( #{ $kendo-loader-lg-segment-size} * 4 ) !default;
 
 /// The height of the small spinner-3 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) !default;
+$kendo-loader-sm-spinner-3-height: calc( #{ $kendo-loader-sm-spinner-3-width} * #{$equilateral-height} ) !default;
 /// The height of the medium spinner-3 Loader.
 /// @group loader
-$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $equilateral-height ) !default;
+$kendo-loader-md-spinner-3-height: calc( #{ $kendo-loader-md-spinner-3-width} * #{$equilateral-height} ) !default;
 /// The height of the large spinner-3 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-3-height: ( $kendo-loader-lg-spinner-3-width * $equilateral-height ) !default;
+$kendo-loader-lg-spinner-3-height: calc( #{ $kendo-loader-lg-spinner-3-width} * #{$equilateral-height} ) !default;
 
 /// The width of the small spinner-4 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-4-width: $kendo-loader-sm-segment-size * 4 !default;
+$kendo-loader-sm-spinner-4-width: calc( #{ $kendo-loader-sm-segment-size} * 4 ) !default;
 /// The width of the medium spinner-4 Loader.
 /// @group loader
-$kendo-loader-md-spinner-4-width: $kendo-loader-md-segment-size * 4 !default;
+$kendo-loader-md-spinner-4-width: calc( #{ $kendo-loader-md-segment-size} * 4 ) !default;
 /// The width of the large spinner-4 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-4-width: $kendo-loader-lg-segment-size * 4 !default;
+$kendo-loader-lg-spinner-4-width: calc( #{ $kendo-loader-lg-segment-size} * 4 ) !default;
 
 /// The height of the small spinner-4 Loader.
 /// @group loader
@@ -79,40 +79,40 @@ $kendo-loader-container-panel-border-style: solid !default;
 $kendo-loader-container-panel-border-color: $kendo-component-border !default;
 /// The border radius of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
+$kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the container panel.
 /// @group loader
 $kendo-loader-container-panel-bg: $kendo-color-white !default;
 
 /// The padding of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-padding: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-loader-sm-container-padding: k-spacing(4) !default;
 /// The padding of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-padding: k-map-get( $kendo-spacing, 5 ) !default;
+$kendo-loader-md-container-padding: k-spacing(5) !default;
 /// The padding of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-padding: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-loader-lg-container-padding: k-spacing(6) !default;
 
 /// The gap of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-sm-container-gap: k-spacing(1) !default;
 /// The gap of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-md-container-gap: k-spacing(2) !default;
 /// The gap of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-gap: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-loader-lg-container-gap: k-spacing(3) !default;
 
 /// The font size of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-font-size: $kendo-font-size-sm !default;
+$kendo-loader-sm-container-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-font-size: $kendo-font-size-md !default;
+$kendo-loader-md-container-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-font-size: $kendo-font-size-lg !default;
+$kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 // Loading indicator
 /// The background color of the Loading indicator.

package/scss/map/_variables.scss

@@ -4,27 +4,27 @@
 // Map
 $kendo-map-border-width: 0px !default;
 
-$kendo-map-font-size: $kendo-font-size-md !default;
-$kendo-map-line-height: $kendo-line-height-md !default;
-$kendo-map-font-family: $kendo-font-family !default;
+$kendo-map-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-map-line-height: var( --kendo-line-height, normal )!default;
+$kendo-map-font-family: var( --kendo-font-family, inherit ) !default;
 
 $kendo-map-bg: $kendo-component-bg !default;
 $kendo-map-text: $kendo-component-text !default;
 $kendo-map-border: $kendo-component-border !default;
 
-$kendo-map-navigator-margin: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-map-navigator-padding: 2px !default;
-$kendo-map-navigator-width: calc( #{$kendo-icon-size * 3} + #{$kendo-map-navigator-padding * 2} ) !default;
+$kendo-map-navigator-margin: k-spacing(4) !default;
+$kendo-map-navigator-padding: k-spacing(0.5) !default;
+$kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default;
 $kendo-map-navigator-height: $kendo-map-navigator-width !default;
 $kendo-map-navigator-border-width: 1px !default;
 
-$kendo-map-zoom-control-margin: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-map-zoom-control-margin: k-spacing(4) !default;
 $kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default;
 
 $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
 $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
-$kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
+$kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
 $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default;
 
 $kendo-map-marker-fill: $kendo-color-primary !default;

package/scss/mediaplayer/_variables.scss

@@ -1,15 +1,15 @@
 // Media player
 $kendo-media-player-border-width: 1px !default;
-$kendo-media-player-font-family: $kendo-font-family !default;
-$kendo-media-player-font-size: $kendo-font-size-md !default;
-$kendo-media-player-line-height: $kendo-line-height-md !default;
+$kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-media-player-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-media-player-bg: $kendo-component-bg !default;
 $kendo-media-player-text: $kendo-component-text !default;
 $kendo-media-player-border: $kendo-component-border !default;
 
-$kendo-media-player-titlebar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-padding-x: k-spacing(2) !default;
+$kendo-media-player-titlebar-padding-y: k-spacing(2) !default;
 $kendo-media-player-titlebar-bg: null !default;
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
 $kendo-media-player-titlebar-border: null !default;

package/scss/menu/_layout.scss

@@ -27,7 +27,7 @@
         }
 
         .k-context-menu {
-            @include border-radius( $kendo-border-radius-md );
+            @include border-radius( k-border-radius(md) );
         }
 
         .k-header {

package/scss/menu/_variables.scss

@@ -1,17 +1,17 @@
 // Menu
 $kendo-menu-border-width: 0px !default;
-$kendo-menu-font-family: $kendo-font-family !default;
-$kendo-menu-font-size: $kendo-font-size-md !default;
-$kendo-menu-line-height: $kendo-line-height-md !default;
+$kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-menu-bg: $kendo-component-header-bg !default;
 $kendo-menu-text: $kendo-component-header-text !default;
 $kendo-menu-border: $kendo-component-header-border !default;
 $kendo-menu-gradient: null !default;
 
-$kendo-menu-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-menu-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-menu-item-spacing: 0 !default;
+$kendo-menu-item-padding-x: k-spacing(2) !default;
+$kendo-menu-item-padding-y: k-spacing(2) !default;
+$kendo-menu-item-spacing: k-spacing(0) !default;
 $kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
 
 $kendo-menu-item-bg: null !default;
@@ -31,7 +31,7 @@ $kendo-menu-item-expanded-gradient: null !default;
 
 $kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-menu-text, .15 )) !default;
 
-$kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-menu-separator-spacing: k-spacing(1) !default;
 
 $kendo-menu-scroll-button-bg: $kendo-menu-bg !default;
 $kendo-menu-scroll-button-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-menu-text, .5 )) !default;
@@ -60,17 +60,17 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 
 /// Font sizes of the menu popup.
 /// @group menu
-$kendo-menu-popup-font-size: $kendo-font-size-md !default;
-$kendo-menu-popup-sm-font-size: $kendo-font-size-md !default;
-$kendo-menu-popup-md-font-size: $kendo-font-size-md !default;
-$kendo-menu-popup-lg-font-size: $kendo-font-size-lg !default;
+$kendo-menu-popup-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-menu-popup-sm-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-menu-popup-md-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-popup-line-height: $kendo-line-height-md !default;
-$kendo-menu-popup-sm-line-height: $kendo-line-height-md !default;
-$kendo-menu-popup-md-line-height: $kendo-line-height-md !default;
-$kendo-menu-popup-lg-line-height: $kendo-line-height-md !default;
+$kendo-menu-popup-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-menu-popup-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-menu-popup-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-menu-popup-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background of the menu popup.
 /// @group menu
@@ -90,24 +90,24 @@ $kendo-menu-popup-gradient: null !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-menu-popup-sm-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-menu-popup-md-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-menu-popup-lg-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x: k-spacing(4) !default;
+$kendo-menu-popup-sm-item-padding-x: k-spacing(4) !default;
+$kendo-menu-popup-md-item-padding-x: k-spacing(4) !default;
+$kendo-menu-popup-lg-item-padding-x: k-spacing(4) !default;
 
 /// Vertical padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-menu-popup-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-menu-popup-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-menu-popup-lg-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-menu-popup-item-padding-y: k-spacing(1) !default;
+$kendo-menu-popup-sm-item-padding-y: k-spacing(0.5) !default;
+$kendo-menu-popup-md-item-padding-y: k-spacing(1) !default;
+$kendo-menu-popup-lg-item-padding-y: k-spacing(1.5) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
-$kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
-$kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
-$kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu
@@ -123,7 +123,7 @@ $kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-lg-it
 
 /// The spacing between the menu items in popup.
 /// @group menu
-$kendo-menu-popup-item-spacing: 0px !default;
+$kendo-menu-popup-item-spacing: k-spacing(0) !default;
 
 /// The background of the menu item in popup.
 /// @group menu

package/scss/messagebox/_variables.scss

@@ -1,11 +1,11 @@
 // Message box
-$kendo-message-box-margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0 !default;
+$kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
 $kendo-message-box-padding-x: $kendo-padding-md-x !default;
 $kendo-message-box-padding-y: $kendo-padding-md-y !default;
 $kendo-message-box-border-width: 0 0 0 4px !default;
 
-$kendo-message-box-font-size: $kendo-font-size-md !default;
-$kendo-message-box-line-height: $kendo-line-height-md !default;
+$kendo-message-box-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-message-box-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-message-box-bg-level: -10 !default;
 $kendo-message-box-text-level: 6 !default;

package/scss/notification/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The row-gap between the elements in the Notification group.
 /// @group notification
-$kendo-notification-group-gap: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-notification-group-gap: k-spacing(3) !default;
 
 /// The horizontal padding of the Notification.
 /// @group notification
@@ -18,13 +18,13 @@ $kendo-notification-border-width: $alert-border-width !default;
 $kendo-notification-border-radius: $alert-border-radius !default;
 /// The font family of the Notification.
 /// @group notification
-$kendo-notification-font-family: $kendo-font-family !default;
+$kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Notification.
 /// @group notification
-$kendo-notification-font-size: $kendo-font-size-sm !default;
+$kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the Notification.
 /// @group notification
-$kendo-notification-line-height: $kendo-line-height-md !default;
+$kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the Notification.
 /// @group notification
 $kendo-notification-bg: $kendo-component-bg !default;