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

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

@@ -22,11 +22,11 @@
         }
 
         &.horizontal .k-menu-scroll-button {
-            width: calc( #{$kendo-line-height-em} + #{k-map-get( $kendo-spacing, 1 )});
+            width: calc( #{$kendo-line-height-em} + #{k-spacing(1)});
         }
 
         &.vertical .k-menu-scroll-button {
-            height: calc( #{$kendo-line-height-em} + #{k-map-get( $kendo-spacing, 1 )});
+            height: calc( #{$kendo-line-height-em} + #{k-spacing(1)});
         }
     }
 

package/scss/menu/_variables.scss

@@ -1,19 +1,19 @@
 // Menu
-$kendo-menu-padding-x: 0px !default;
-$kendo-menu-padding-y: 0px !default;
+$kendo-menu-padding-x: k-spacing(0) !default;
+$kendo-menu-padding-y: k-spacing(0) !default;
 $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: transparent !default;
 $kendo-menu-text: $kendo-component-text !default;
 $kendo-menu-border: null !default;
 $kendo-menu-gradient: null !default;
 
-$kendo-menu-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-menu-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-menu-item-spacing: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-menu-item-padding-x: k-spacing(4) !default;
+$kendo-menu-item-padding-y: k-spacing(1) !default;
+$kendo-menu-item-spacing: k-spacing(0.5) !default;
 $kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
 
 $kendo-menu-item-bg: rgba( $kendo-menu-text, 0 ) !default;
@@ -33,7 +33,7 @@ $kendo-menu-item-expanded-gradient: null !default;
 
 $kendo-menu-item-focus-shadow: null !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-component-bg !default;
 $kendo-menu-scroll-button-text: $kendo-subtle-text !default;
@@ -62,10 +62,10 @@ $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-lg !default;
-$kendo-menu-popup-sm-font-size: $kendo-font-size-lg !default;
-$kendo-menu-popup-md-font-size: $kendo-font-size-lg !default;
-$kendo-menu-popup-lg-font-size: $kendo-font-size-lg !default;
+$kendo-menu-popup-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-menu-popup-sm-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-menu-popup-md-font-size: var( --kendo-font-size-lg, 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
@@ -92,24 +92,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, 2 ) !default;
-$kendo-menu-popup-sm-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-$kendo-menu-popup-md-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-menu-popup-lg-item-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-menu-popup-item-padding-y: k-spacing(2) !default;
+$kendo-menu-popup-sm-item-padding-y: k-spacing(1.5) !default;
+$kendo-menu-popup-md-item-padding-y: k-spacing(2) !default;
+$kendo-menu-popup-lg-item-padding-y: k-spacing(2.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
@@ -125,7 +125,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/menu-button/_variables.scss

@@ -2,4 +2,4 @@
 
 /// The horizontal padding of the button arrow in the Menu Button.
 /// @group menu-button
-$kendo-menu-button-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-menu-button-arrow-padding-x: k-spacing(1) !default;

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,26 +2,26 @@
 
 /// The row-gap between the elements in the Notification group.
 /// @group notification
-$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-notification-group-gap: k-spacing(2) !default;
 
 /// The horizontal padding of the Notification.
 /// @group notification
-$kendo-notification-padding-x: 16px !default;
+$kendo-notification-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Notification.
 /// @group notification
-$kendo-notification-padding-y: 14px !default;
+$kendo-notification-padding-y: k-spacing(3.5) !default;
 /// The width of the border around the Notification.
 /// @group notification
 $kendo-notification-border-width: 0px !default;
 /// The border radius of the Notification.
 /// @group notification
-$kendo-notification-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-notification-border-radius: k-spacing(1) !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-md !default;
+$kendo-notification-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Notification.
 /// @group notification
 $kendo-notification-line-height: k-math-div( 20, 14 ) !default;

package/scss/orgchart/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The spacing index of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-spacer: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-orgchart-spacer: k-spacing(6) !default;
 /// The vertical padding of the OrgChart.
 /// @group orgchart
 $kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
@@ -11,13 +11,13 @@ $kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
 $kendo-orgchart-padding-x: $kendo-orgchart-padding-y !default;
 /// The font family of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-font-family: $kendo-font-family !default;
+$kendo-orgchart-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-font-size: $kendo-font-size-md !default;
+$kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-line-height: $kendo-line-height-md !default;
+$kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the OrgChart.
 /// @group orgchart
 $kendo-orgchart-bg: $kendo-component-bg !default;
@@ -49,7 +49,7 @@ $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !defa
 $kendo-orgchart-node-group-border-width: 1px !default;
 /// The border radius of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border-radius: $kendo-border-radius-md !default;
+$kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
 /// The background color of the OrgChart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
@@ -69,17 +69,17 @@ $kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px if($kendo-enable-color-s
 
 /// The font size of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-font-size: $kendo-font-size-xl !default;
+$kendo-orgchart-node-group-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
 /// The bottom margin of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-margin-bottom: k-math-div( $kendo-orgchart-spacer, 4 ) !default;
+$kendo-orgchart-node-group-title-margin-bottom: calc( #{$kendo-orgchart-spacer} / 4 ) !default;
 /// The line height of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-line-height: $kendo-line-height-sm !default;
+$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// The font size of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-font-size: $kendo-font-size-md !default;
+$kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
 /// The bottom margin of the OrgChart node group subtitle.
 /// @group orgchart
 $kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-spacer !default;
@@ -108,14 +108,14 @@ $kendo-orgchart-card-focus-shadow: $kendo-orgchart-node-group-focus-shadow !defa
 
 /// The bottom margin of the OrgChart Card title.
 /// @group orgchart
-$kendo-orgchart-card-title-margin-bottom: 0px !default;
+$kendo-orgchart-card-title-margin-bottom: k-spacing(0) !default;
 /// The font size of the OrgChart Card title.
 /// @group orgchart
 $kendo-orgchart-card-title-font-size: null !default;
 
 /// The bottom margin of the OrgChart Card subtitle.
 /// @group orgchart
-$kendo-orgchart-card-subtitle-margin-bottom: 0px !default;
+$kendo-orgchart-card-subtitle-margin-bottom: k-spacing(0) !default;
 /// The font size of the OrgChart Card subtitle.
 /// @group orgchart
 $kendo-orgchart-card-subtitle-font-size: null !default;

package/scss/pager/_variables.scss

@@ -5,16 +5,16 @@
 
 /// The horizontal padding of the Pager.
 /// @group pager
-$kendo-pager-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-pager-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Pager.
 /// @group pager
-$kendo-pager-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-pager-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Pager.
 /// @group pager
-$kendo-pager-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-pager-md-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large Pager.
 /// @group pager
-$kendo-pager-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-pager-lg-padding-x: k-spacing(2.5) !default;
 /// The vertical padding of the Pager.
 /// @group pager
 $kendo-pager-padding-y: $kendo-pager-padding-x !default;
@@ -40,26 +40,26 @@ $kendo-pager-lg-item-min-width: $kendo-button-lg-calc-size !default;
 
 /// The margin between the item groups in the small Pager.
 /// @group pager
-$kendo-pager-sm-item-group-spacing: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-pager-sm-item-group-spacing: k-spacing(1.5) !default;
 /// The margin between the item groups in the medium Pager.
 /// @group pager
-$kendo-pager-md-item-group-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-pager-md-item-group-spacing: k-spacing(2) !default;
 /// The margin between the item groups in the large Pager.
 /// @group pager
-$kendo-pager-lg-item-group-spacing: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-pager-lg-item-group-spacing: k-spacing(2.5) !default;
 
 /// The border width of the Pager.
 /// @group pager
 $kendo-pager-border-width: 1px !default;
 /// The font family of the Pager.
 /// @group pager
-$kendo-pager-font-family: $kendo-font-family !default;
+$kendo-pager-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Pager.
 /// @group pager
-$kendo-pager-font-size: $kendo-font-size-md !default;
+$kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Pager.
 /// @group pager
-$kendo-pager-line-height: $kendo-line-height-md !default;
+$kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the Pager.
 /// @group pager
 $kendo-pager-bg: $kendo-component-bg !default;
@@ -89,7 +89,7 @@ $kendo-pager-item-border-width: 0px !default;
 $kendo-pager-item-border-radius: 5em !default;
 /// The spacing around the Pager items.
 /// @group pager
-$kendo-pager-item-spacing: 0px !default;
+$kendo-pager-item-spacing: k-spacing(0) !default;
 /// The background color of the Pager items.
 /// @group pager
 $kendo-pager-item-bg: null !default;

package/scss/panelbar/_variables.scss

@@ -2,16 +2,16 @@
 
 /// The horizontal padding of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-padding-x: 0px !default;
+$kendo-panelbar-padding-x: k-spacing(0) !default;
 /// The vertical padding of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-padding-y: 0px !default;
+$kendo-panelbar-padding-y: k-spacing(0) !default;
 /// The font family of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-font-family: $kendo-font-family !default;
+$kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-font-size: $kendo-font-size-md !default;
+$kendo-panelbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-line-height: k-math-div( 20, 14 ) !default;
@@ -30,17 +30,17 @@ $kendo-panelbar-item-border-style: solid !default;
 
 /// The horizontal padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-panelbar-header-padding-x: k-spacing(6) !default;
 /// The vertical padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-panelbar-header-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-panelbar-item-padding-x: k-spacing(6) !default;
 /// The vertical padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-panelbar-item-padding-y: k-spacing(3) !default;
 
 /// The maximum nesting of the PanelBar items.
 /// @group panelbar

package/scss/pdf-viewer/_variables.scss

@@ -5,13 +5,13 @@
 $kendo-pdf-viewer-border-width: 1px !default;
 /// The font family of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-font-family: $kendo-font-family !default;
+$kendo-pdf-viewer-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-font-size: $kendo-font-size-md !default;
+$kendo-pdf-viewer-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-line-height: $kendo-line-height-md !default;
+$kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the PDFViewer.
 /// @group pdf-viewer
@@ -48,7 +48,7 @@ $kendo-pdf-viewer-canvas-border: null !default;
 
 /// The spacing of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-spacing: 30px !default;
+$kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;
 
 /// The background color of the PDFViewer page.
 /// @group pdf-viewer
@@ -77,7 +77,7 @@ $kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 /// The border radius of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-pdf-viewer-search-panel-border-radius: k-spacing(1) !default;
 /// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;

package/scss/pivotgrid/_variables.scss

@@ -3,14 +3,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;
@@ -49,15 +49,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: $box-shadow-depth-3 !default;
 $kendo-pivotgrid-configurator-top-shadow: $box-shadow-depth-3 !default;
 $kendo-pivotgrid-configurator-bottom-shadow: $box-shadow-depth-3 !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-md !default;
+$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;
@@ -96,7 +96,7 @@ $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !def
 $kendo-pivotgrid-calculated-field-header-border: null !default;
 
 $kendo-pivotgrid-treeview-padding-x: $kendo-pivotgrid-spacer !default;
-$kendo-pivotgrid-treeview-padding-y: 0px !default;
+$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;
 
 // Legacy variables
 $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;