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

package/scss/button/_variables.scss

@@ -36,20 +36,20 @@ $kendo-button-lg-padding-y: $btn-padding-y-lg !default;
 
 /// The font family of the Button.
 /// @group button
-$kendo-button-font-family: $kendo-font-family !default;
+$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Button.
 /// @group button
 $kendo-button-font-size: $btn-font-size !default;
 /// The font size of the small Button.
 /// @group button
-$kendo-button-sm-font-size: $kendo-font-size-sm !default;
+$kendo-button-sm-font-size: var( --kendo-font-size-sm, 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;
 
 /// The line height used along with the $kendo-font-size variable.
 /// @group button
@@ -59,24 +59,24 @@ $kendo-button-line-height: $btn-line-height !default;
 $kendo-button-sm-line-height: k-math-div( 20, 14 ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Button.
 /// @group button
-$kendo-button-md-line-height: $kendo-line-height-md !default;
+$kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Button.
 /// @group button
-$kendo-button-lg-line-height: $kendo-line-height-md !default;
+$kendo-button-lg-line-height: var( --kendo-line-height, normal ) !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( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-sm-calc-size: calc( 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( 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( 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( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
 /// The sizes map for the Button.
 /// @group button

package/scss/calendar/_variables.scss

@@ -3,16 +3,9 @@
 /// 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;
-/// The font size of the Calendar.
-/// @group calendar
-$kendo-calendar-font-size: $kendo-font-size-md !default;
-/// The line height of the Calendar.
-/// @group calendar
-$kendo-calendar-line-height: $kendo-line-height-md !default;
+$kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-calendar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-calendar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The size of the cells in the Calendar.
 /// @group calendar
@@ -30,11 +23,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 border width of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border-width: 1px !default;
@@ -61,25 +53,24 @@ $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.
 /// @group calendar
-$kendo-calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-calendar-footer-padding-y: k-spacing(2) !default;
 
 /// The horizontal padding of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-cell-padding-x: k-spacing(1) !default;
 /// The vertical padding of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-
+$kendo-calendar-cell-padding-y: k-spacing(1) !default;
 /// The line height of the cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
 
 /// The border radius of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-border-radius: $kendo-border-radius-md !default;
+$kendo-calendar-cell-border-radius: k-border-radius(md) !default;
 
 /// The horizontal padding of the header cells in the Calendar.
 /// @group calendar
@@ -93,11 +84,7 @@ $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
 /// The height of the header cells in the Calendar.
 /// @group calendar
 $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;
-/// The line height of the header cells in the Calendar.
-/// @group calendar
+$kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-calendar-header-cell-line-height: 2 !default;
 
 /// The background color of the header cells in the Calendar.
@@ -112,10 +99,10 @@ $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, 3 ) !default;
+$kendo-calendar-caption-padding-x: k-spacing(3) !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;
@@ -142,7 +129,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
@@ -256,17 +243,17 @@ $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
 $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default;
@@ -275,53 +262,38 @@ $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default
 // Multiview calendar
 
 
-/// The font size of the small Calendar.
-/// @group calendar
-$kendo-calendar-sm-font-size: $kendo-font-size-md !default;
-/// The line height of the small Calendar.
-/// @group calendar
-$kendo-calendar-sm-line-height: $kendo-line-height-md !default;
-/// The size of the cells in the small Calendar.
-/// @group calendar
+// Calendar sizes
+$kendo-calendar-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-calendar-sm-cell-size: 34px !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;
-/// The line height of the medium Calendar.
-/// @group calendar
-$kendo-calendar-md-line-height: $kendo-line-height-md !default;
-/// The size of the cells in the medium Calendar.
-/// @group calendar
+$kendo-calendar-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-calendar-md-cell-size: 38px !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;
-/// The line height of the large Calendar.
-/// @group calendar
-$kendo-calendar-lg-line-height: $kendo-line-height-lg !default;
-/// The size of the cells in the large Calendar.
-/// @group calendar
+$kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 $kendo-calendar-lg-cell-size: 42px !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

@@ -19,17 +19,17 @@ $kendo-card-border-radius: $card-border-radius !default;
 $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: $kendo-line-height-md !default;
+$kendo-card-line-height: var( --kendo-line-height, normal ) !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
@@ -107,10 +107,10 @@ $kendo-card-footer-border: $kendo-card-header-border !default;
 
 /// The bottom margin of the Card title.
 /// @group card
-$kendo-card-title-margin-bottom: k-map-get( $kendo-spacing, 3 ) !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;
+$kendo-card-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The font family of the Card title.
 /// @group card
 $kendo-card-title-font-family: $headings-font-family !default;
@@ -126,7 +126,7 @@ $kendo-card-title-letter-spacing: null !default;
 
 /// The bottom margin of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-margin-bottom: k-map-get( $kendo-spacing, 3 ) !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-h6-font-size !default;
@@ -158,16 +158,16 @@ $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

package/scss/chat/_variables.scss

@@ -2,10 +2,10 @@
 
 /// The horizontal padding of the Chat.
 /// @group chat
-$kendo-chat-padding-x: 16px !default;
+$kendo-chat-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Chat.
 /// @group chat
-$kendo-chat-padding-y: 16px !default;
+$kendo-chat-padding-y: k-spacing(4) !default;
 /// The width of the Chat.
 /// @group chat
 $kendo-chat-width: 500px !default;
@@ -17,20 +17,20 @@ $kendo-chat-height: 600px !default;
 $kendo-chat-border-width: 1px !default;
 /// The font family of the Chat.
 /// @group chat
-$kendo-chat-font-family: $kendo-font-family !default;
+$kendo-chat-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Chat.
 /// @group chat
-$kendo-chat-font-size: $kendo-font-size-md !default;
+$kendo-chat-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Chat.
 /// @group chat
-$kendo-chat-line-height: $kendo-line-height-md !default;
+$kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal spacing between the items of the Chat.
 /// @group chat
-$kendo-chat-item-spacing-x: 8px !default;
+$kendo-chat-item-spacing-x: k-spacing(2) !default;
 /// The vertical spacing between the items of the Chat.
 /// @group chat
-$kendo-chat-item-spacing-y: 16px !default;
+$kendo-chat-item-spacing-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Chat message list.
 /// @group chat
@@ -60,13 +60,13 @@ $kendo-chat-timestamp-bg: null !default;
 
 /// The horizontal padding of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-padding-x: 16px !default;
+$kendo-chat-bubble-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-padding-y: 8px !default;
+$kendo-chat-bubble-padding-y: k-spacing(2) !default;
 /// The spacing of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-spacing: 2px !default;
+$kendo-chat-bubble-spacing: k-spacing(0.5) !default;
 /// The line height of the Chat bubble message.
 /// @group chat
 $kendo-chat-bubble-line-height: 1.25 !default;
@@ -106,13 +106,13 @@ $kendo-chat-toolbar-border: inherit !default;
 
 /// The horizontal padding of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-padding-x: 12px !default;
+$kendo-chat-quick-reply-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-padding-y: 8px !default;
+$kendo-chat-quick-reply-padding-y: k-spacing(2) !default;
 /// The spacing of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-spacing: 8px !default;
+$kendo-chat-quick-reply-spacing: k-spacing(2) !default;
 /// The line height of the Chat quick reply.
 /// @group chat
 $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;

package/scss/checkbox/_layout.scss

@@ -7,13 +7,13 @@
 
     // Override inherited bootstrap border radius
     .k-checkbox.k-rounded-sm {
-        border-radius: k-math-div( $kendo-border-radius-sm, 2 );
+        border-radius: calc( #{k-border-radius(sm)} / 2 );
     }
     .k-checkbox.k-rounded-md {
-        border-radius: $kendo-border-radius-sm;
+        border-radius: k-border-radius(sm);
     }
     .k-checkbox.k-rounded-lg {
-        border-radius: $kendo-border-radius-md;
+        border-radius: k-border-radius(md);
     }
 
 }

package/scss/checkbox/_variables.scss

@@ -9,23 +9,23 @@ $kendo-checkbox-border-width: 1px !default;
 
 /// The size of a small CheckBox.
 /// @group checkbox
-$kendo-checkbox-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-checkbox-sm-size: k-spacing(3) !default;
 /// The size of a medium CheckBox.
 /// @group checkbox
-$kendo-checkbox-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-checkbox-md-size: k-spacing(4) !default;
 /// The size of a large CheckBox.
 /// @group checkbox
-$kendo-checkbox-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+$kendo-checkbox-lg-size: k-spacing(5) !default;
 
 /// The glyph size of a small CheckBox.
 /// @group checkbox
-$kendo-checkbox-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-checkbox-sm-glyph-size: k-spacing(2.5) !default;
 /// The glyph size of a medium CheckBox.
 /// @group checkbox
-$kendo-checkbox-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-checkbox-md-glyph-size: k-spacing(3.5) !default;
 /// The glyph size of a large CheckBox.
 /// @group checkbox
-$kendo-checkbox-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+$kendo-checkbox-lg-glyph-size: k-spacing(4.5) !default;
 
 /// The ripple size of a small CheckBox.
 /// @group checkbox
@@ -168,17 +168,17 @@ $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg
 
 /// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-checkbox-label-margin-x: k-spacing(1) !default;
 
 
 // CheckBox list
 
 /// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: k-spacing(4) !default;
 /// The horizontal padding of the CheckBox list items.
 /// @group checkbox
-$kendo-checkbox-list-item-padding-x: 0px !default;
+$kendo-checkbox-list-item-padding-x: k-spacing(0) !default;
 /// The vertical padding of the CheckBox list items
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;

package/scss/chip/_variables.scss

@@ -8,45 +8,45 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the Chip.
 /// @group chip
-$kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-spacing: k-spacing(1) !default;
 
 /// The horizontal padding of the Chip.
 /// @group chip
-$kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-md-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the large Chip.
 /// @group chip
-$kendo-chip-lg-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-lg-padding-x: k-spacing(1) !default;
 
 /// The vertical padding of the Chip.
 /// @group chip
-$kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-chip-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-md-padding-y: k-spacing(1) !default;
 /// The vertical padding of the large Chip.
 /// @group chip
-$kendo-chip-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-chip-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font size of the Chip.
 /// @group chip
-$kendo-chip-font-size: $kendo-font-size-md !default;
+$kendo-chip-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small Chip.
 /// @group chip
-$kendo-chip-sm-font-size: $kendo-font-size-sm !default;
+$kendo-chip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: $kendo-font-size-md !default;
+$kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Chip.
-$kendo-chip-lg-font-size: $kendo-font-size-md !default;
+$kendo-chip-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
@@ -63,8 +63,8 @@ $kendo-chip-lg-line-height: $kendo-chip-line-height !default;
 
 /// The calculated height of the Chip.
 /// @group chip
-$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
-$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + #{$kendo-chip-sm-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
+$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + calc( #{$kendo-chip-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) !default;
+$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) !default;
 
 
 /// The map with the sizes of the Chip.
@@ -173,7 +173,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the Chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: k-map-get( $kendo-spacing, 1 ),
-    md: k-map-get( $kendo-spacing, 1 ),
-    lg: k-map-get( $kendo-spacing, 1 )
+    sm: k-spacing(1),
+    md: k-spacing(1),
+    lg: k-spacing(1)
 ) !default;

package/scss/color-preview/_variables.scss

@@ -1,5 +1,5 @@
 // Color Preview
-$kendo-color-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 $kendo-color-preview-border-width: 1px !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;

package/scss/coloreditor/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The spacer of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-color-editor-spacer: k-spacing(4) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group coloreditor
@@ -12,16 +12,16 @@ $kendo-color-editor-min-width: 328px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: $kendo-border-radius-md !default;
+$kendo-color-editor-border-radius: k-border-radius(md) !default;
 /// The font family of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-font-family: $kendo-font-family !default;
+$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-font-size: $kendo-font-size-md !default;
+$kendo-color-editor-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-line-height: $kendo-line-height-md !default;
+$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-text: $kendo-component-text !default;
@@ -47,7 +47,7 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group coloreditor
-$kendo-color-editor-header-actions-gap: k-math-div( $kendo-color-editor-spacer, 2 ) !default;
+$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
 
 /// The width of the ColorEditor preview.
 /// @group coloreditor
@@ -57,7 +57,7 @@ $kendo-color-editor-color-preview-width: 32px !default;
 $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group coloreditor
-$kendo-color-editor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-editor-preview-gap: k-spacing(1) !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group coloreditor
@@ -77,4 +77,4 @@ $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !defau
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group coloreditor
-$kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;