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

package/scss/breadcrumb/_variables.scss

@@ -19,33 +19,33 @@ $kendo-breadcrumb-padding-y: null !default;
 
 /// The font family of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-family: $kendo-font-family !default;
+$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
 /// The font size of the large Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// The line-height of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-line-height: var( --kendo-line-height, normal )!default;
 /// The line-height of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line-height of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
 /// The line-height of the height Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
@@ -63,46 +63,46 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
 
 /// The horizontal padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-link-padding-x: k-spacing(2.5) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(2.5) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-breadcrumb-link-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(1.5) !default;
 
 /// The border-radius of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
+$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The vertical padding of the Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-icon-link-padding-y: k-spacing(2.5) !default;
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
 $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Breadcrumb link icon.
 /// @group breadcrumb

package/scss/button/_layout.scss

@@ -26,6 +26,15 @@
         }
     }
 
+    // Solid button
+    .k-button-solid {
+        &::before {
+            @if($kendo-enable-color-system) {
+                display: none;
+            }
+        }
+    }
+
     // Outline button
     .k-button-outline {
         background-color: transparent !important; // stylelint-disable-line declaration-no-important

package/scss/button/_theme.scss

@@ -9,6 +9,9 @@
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
+
+            // These 3 lines can be deleted once we
+            // stop supporting the old color system.
             color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )) );
             background-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
             border-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
@@ -22,6 +25,8 @@
             // Focus state
             &:focus,
             &.k-focus {
+                background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
+                border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
                 @include box-shadow( $kendo-button-focus-shadow );
             }
 
@@ -48,7 +53,14 @@
     // Outline button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-outline-#{$name} {
-            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
+
+            // The "base" case can be deleted once we
+            // stop supporting the old color system.
+            @if $name == "base" {
+                color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
+            } @else {
+                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+            }
 
             &:hover,
             &.k-hover,
@@ -57,7 +69,13 @@
             &:active,
             &.k-active,
             &.k-selected {
-                color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
+                // The "base" case can be deleted once we
+                // stop supporting the old color system.
+                @if $name == "base" {
+                    color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
+                } @else {
+                    color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+                }
             }
 
             // Disabled state

package/scss/button/_variables.scss

@@ -10,46 +10,46 @@ $kendo-button-border-radius: null !default;
 
 /// The horizontal padding of the Button.
 /// @group button
-$kendo-button-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-button-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-button-sm-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-button-md-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-button-lg-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the Button.
 /// @group button
-$kendo-button-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-button-sm-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-md-padding-y: k-spacing(2) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-button-lg-padding-y: k-spacing(2.5) !default;
 
 /// The font family of the Button.
 /// @group button
-$kendo-button-font-family: $kendo-font-family !default;
+$kendo-button-font-family: var( --kendo-font-size-sm, inherit ) !default;
 
 /// The font size of the Button.
 /// @group button
-$kendo-button-font-size: $kendo-font-size-md !default;
+$kendo-button-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the small Button.
 /// @group button
-$kendo-button-sm-font-size: $kendo-font-size-md !default;
+$kendo-button-sm-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the medium Button.
 /// @group button
-$kendo-button-md-font-size: $kendo-font-size-md !default;
+$kendo-button-md-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the large Button.
 /// @group button
-$kendo-button-lg-font-size: $kendo-font-size-md !default;
+$kendo-button-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// Line heights used along with the $kendo-font-size variable.
 /// @group button
@@ -66,17 +66,17 @@ $kendo-button-lg-line-height: k-math-div( 20, 14 ) !default;
 
 /// The calculated height of the Button.
 /// @group button
-$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + calc( #{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + calc( #{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + calc( #{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
 
 /// The calculated inner height of the Button excluding the border width.
 /// @group button
-$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
-$kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} ) !default;
-$kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} ) !default;
-$kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
 /// The sizes map for the Button.
 /// @group button
@@ -126,13 +126,13 @@ $kendo-button-shadow: $box-shadow-depth-2 !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: null !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: null !default;
+$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -142,13 +142,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: null !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), null) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: null !default;
+$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), null) !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -174,19 +174,19 @@ $kendo-button-selected-shadow: null !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: null !default;
+$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: null !default;
+$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base background gradient of focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: null !default;
+$kendo-button-focus-shadow: $box-shadow-depth-3 !default;
 
 /// The base background color of the disabled Button.
 /// @group button

package/scss/calendar/_variables.scss

@@ -3,12 +3,13 @@
 /// The width of the border around the Calendar.
 /// @group calendar
 $kendo-calendar-border-width: 1px !default;
+
 /// The font family of the Calendar.
 /// @group calendar
-$kendo-calendar-font-family: $kendo-font-family !default;
+$kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Calendar.
 /// @group calendar
-$kendo-calendar-font-size: $kendo-font-size-md !default;
+$kendo-calendar-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the Calendar.
 /// @group calendar
 $kendo-calendar-line-height: k-math-div( 20, 14 ) !default;
@@ -29,10 +30,10 @@ $kendo-calendar-border: $kendo-component-border !default;
 
 /// The horizontal padding of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-x: k-spacing(1) !default;
 /// The vertical padding of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-y: k-spacing(1) !default;
 /// The height of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border-width: 0px !default;
@@ -59,9 +60,10 @@ $kendo-calendar-nav-gap: null !default;
 
 /// The horizontal padding of the footer in the Calendar.
 /// @group calendar
-$kendo-calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-footer-padding-x: k-spacing(4) !default;
 /// The vertical padding of the footer in the Calendar.
-$kendo-calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// @group calendar
+$kendo-calendar-footer-padding-y: k-spacing(2) !default;
 
 /// The horizontal padding of the cells in the Calendar.
 /// @group calendar
@@ -79,7 +81,7 @@ $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
 $kendo-calendar-cell-border-radius: 100px !default;
 
 /// The horizontal padding of the header cells in the Calendar.
-/// @group calenda
+/// @group calendar
 $kendo-calendar-header-cell-padding-x: null !default;
 /// The vertical padding of the header cells in the Calendar.
 /// @group calendar
@@ -92,7 +94,7 @@ $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
 /// The font size of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit )!default;
 /// The line height of the header cells in the Calendar.
 /// @group calendar
 $kendo-calendar-header-cell-line-height: 2 !default;
@@ -110,10 +112,11 @@ $kendo-calendar-header-cell-opacity: null !default;
 
 /// The horizontal padding of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-caption-padding-x: k-spacing(4) !default;
 /// The vertical padding of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-caption-padding-y: k-spacing(1) !default;
+
 /// The height of the caption in the Calendar.
 /// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
@@ -140,7 +143,7 @@ $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 
 /// The gap between the items in the Calendar view.
 /// @group calendar
-$kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-view-gap: k-spacing(4) !default;
 
 /// The background color of the weekend cells in the Calendar.
 /// @group calendar
@@ -249,19 +252,20 @@ $kendo-calendar-navigation-border: $kendo-calendar-border !default;
 /// The background color of the hovered items in the Calendar navigation.
 $kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
 
+
 /// The horizontal padding of the header in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-infinite-calendar-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the header in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-infinite-calendar-header-padding-y: k-spacing(2) !default;
 
 /// The horizontal padding of the Calendar view in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-infinite-calendar-view-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Calendar view in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-y: 0px !default;
+$kendo-infinite-calendar-view-padding-y: k-spacing(0) !default;
 
 /// The height of the Calendar view in the Infinite Calendar.
 /// @group calendar
@@ -270,54 +274,59 @@ $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default
 
 // Multiview calendar
 
+/// The border radius of the range cells in the Multiview Calendar.
+/// @group calendar
+$kendo-calendar-range-cell-border-radius: k-border-radius(full) !default;
+
+// Calendar sizes
 
 /// The font size of the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-font-size: $kendo-font-size-md !default;
+$kendo-calendar-sm-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-line-height: $kendo-line-height-md !default;
+$kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The size of the cells in the small Calendar.
 /// @group calendar
 $kendo-calendar-sm-cell-size: 32px !default;
 /// The horizontal padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-x: .125rem !default;
+$kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-y: .125rem !default;
+$kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
 
 /// The font size of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-font-size: $kendo-font-size-md !default;
+$kendo-calendar-md-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-line-height: $kendo-line-height-md !default;
+$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
 /// The size of the cells in the medium Calendar.
 /// @group calendar
 $kendo-calendar-md-cell-size: 36px !default;
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
 /// The vertical padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
 
 /// The font size of the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-font-size: $kendo-font-size-lg !default;
+$kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-line-height: $kendo-line-height-lg !default;
+$kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The size of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-size: 40px !default;
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-spacing(1) !default;
 /// The vertical padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-spacing(1) !default;
 
 /// The sizes Map of the Calendar.
 /// @group calendar

package/scss/captcha/_variables.scss

@@ -2,20 +2,20 @@
 
 /// The spacer of the Captcha.
 /// @group captcha
-$kendo-captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-captcha-spacer: k-spacing(2) !default;
 
 /// The width of the Captcha.
 /// @group captcha
 $kendo-captcha-width: 335px !default;
 /// The font family of the Captcha.
 /// @group captcha
-$kendo-captcha-font-family: $kendo-font-family !default;
+$kendo-captcha-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Captcha.
 /// @group captcha
-$kendo-captcha-font-size: $kendo-font-size-md !default;
+$kendo-captcha-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the Captcha.
 /// @group captcha
-$kendo-captcha-line-height: $kendo-line-height-md !default;
+$kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
 /// The gap of the Captcha.
 /// @group captcha
 $kendo-captcha-gap: $kendo-captcha-spacer !default;
@@ -38,10 +38,10 @@ $kendo-captcha-image-controls-gap: $kendo-captcha-spacer !default;
 
 /// The top margin of the Captcha validation message.
 /// @group captcha
-$kendo-captcha-validation-message-margin-top: k-math-div( $kendo-captcha-spacer, 2 ) !default;
+$kendo-captcha-validation-message-margin-top: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 /// The font size of the Captcha validation message.
 /// @group captcha
-$kendo-captcha-validation-message-font-size: $kendo-font-size-sm !default;
+$kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font style of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-message-font-style: italic !default;

package/scss/card/_variables.scss

@@ -4,32 +4,32 @@
 
 /// The horizontal padding of the Card.
 /// @group card
-$kendo-card-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-card-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Card.
 /// @group card
-$kendo-card-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-padding-y: k-spacing(3) !default;
 /// The width of the border around the Card.
 /// @group card
 $kendo-card-border-width: 0px !default;
 /// The border radius of the Card.
 /// @group card
-$kendo-card-border-radius: $kendo-border-radius-md !default;
+$kendo-card-border-radius: k-border-radius(md) !default;
 /// The inner border radius of the Card.
 /// @group card
 $kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
 /// The font family of the Card.
 /// @group card
-$kendo-card-font-family: $kendo-font-family !default;
+$kendo-card-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Card.
 /// @group card
-$kendo-card-font-size: $kendo-font-size-md !default;
+$kendo-card-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the Card.
 /// @group card
 $kendo-card-line-height: k-math-div( 20, 14 ) !default;
 
 /// The spacing between the Cards in the Card deck.
 /// @group card
-$kendo-card-deck-gap: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
@@ -80,10 +80,10 @@ $kendo-card-header-border: $kendo-card-border !default;
 
 /// The horizontal padding of the Card body.
 /// @group card
-$kendo-card-body-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-card-body-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Card body.
 /// @group card
-$kendo-card-body-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-card-body-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Card footer.
 /// @group card
@@ -106,13 +106,13 @@ $kendo-card-footer-border: $kendo-card-border !default;
 
 /// The bottom margin of the Card title.
 /// @group card
-$kendo-card-title-margin-bottom: 12px !default;
+$kendo-card-title-margin-bottom: k-spacing(3) !default;
 /// The font size of the Card title.
 /// @group card
 $kendo-card-title-font-size: $kendo-h5-font-size !default;
 /// The font family of the Card title.
 /// @group card
-$kendo-card-title-font-family: $kendo-font-family !default;
+$kendo-card-title-font-family: var( --kendo-font-family, inherit ) !default;
 /// The line height of the Card title.
 /// @group card
 $kendo-card-title-line-height: 1.25 !default;
@@ -125,13 +125,13 @@ $kendo-card-title-letter-spacing: null !default;
 
 /// The bottom margin of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-margin-bottom: 12px !default;
+$kendo-card-subtitle-margin-bottom: k-spacing(3) !default;
 /// The font size of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-size: $kendo-font-size-md !default;
+$kendo-card-subtitle-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font family of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-family: $kendo-font-family !default;
+$kendo-card-subtitle-font-family: var( --kendo-font-family, inherit ) !default;
 /// The line height of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-line-height: k-math-div( 20, 14 ) !default;
@@ -157,23 +157,23 @@ $kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
 
 /// The horizontal padding of the Card actions.
 /// @group card
-$kendo-card-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-card-actions-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Card actions.
 /// @group card
-$kendo-card-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-card-actions-padding-y: k-spacing(2) !default;
 /// The top border width of the Card actions.
 /// @group card
 $kendo-card-actions-border-width: 1px !default;
 /// The spacing between the Card actions.
 /// @group card
-$kendo-card-actions-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-card-actions-gap: k-spacing(2) !default;
 
 /// The border radius of the scroll button in the Card deck.
 /// @group card
 $kendo-card-deck-scroll-button-radius: 50% !default;
 /// The border radius of the scroll button in the Card deck.
 /// @group card
-$kendo-card-deck-scroll-button-offset: k-math-div( $kendo-card-deck-gap, 2 ) !default;
+$kendo-card-deck-scroll-button-offset: calc( #{$kendo-card-deck-gap} / 2 ) !default;
 
 /// The width of the Card callout.
 /// @group card