@progress/kendo-theme-fluent 7.3.0-dev.1 → 8.0.0-dev.1

package/scss/calendar/_variables.scss

@@ -30,11 +30,11 @@ $kendo-calendar-border: var( --kendo-component-border, initial) !default;
 
 /// The horizontal padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-x: k-spacing(1) !default;
 /// The vertical padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-y: map.get( $kendo-spacing, 1 ) !default;
-/// The width of the bottom border of the calendar header.
+$kendo-calendar-header-padding-y: k-spacing(1) !default;
+/// Width of the bottom border of the calendar header.
 /// @group calendar
 $kendo-calendar-header-border-width: 1px !default;
 $kendo-calendar-header-min-width: ($kendo-calendar-cell-size * 8) !default;
@@ -51,21 +51,21 @@ $kendo-calendar-header-border: $kendo-calendar-border !default; // $kendo-compon
 
 /// The spacing between the navigation buttons of the Calendar.
 /// @group calendar
-$kendo-calendar-nav-gap: 0 !default;
+$kendo-calendar-nav-gap: k-spacing(0) !default;
 
 /// The horizontal padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-footer-padding-x: k-spacing(1) !default;
 /// The vertical padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-footer-padding-y: k-spacing(1) !default;
 
 /// The font size of the calendar cell.
 /// @group calendar
 $kendo-calendar-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The horizontal padding of the calendar cell.
 /// @group calendar
-$kendo-calendar-cell-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-calendar-cell-padding-x: k-spacing(1.5) !default;
 /// The vertical padding of the calendar cell.
 /// @group calendar
 $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
@@ -78,10 +78,10 @@ $kendo-calendar-cell-border-radius: var( --kendo-border-radius-md, 0) !default;
 
 /// The horizontal padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-x: 0 !default;
+$kendo-calendar-header-cell-padding-x: k-spacing(0) !default;
 /// Th vertical padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-y: 0 !default;
+$kendo-calendar-header-cell-padding-y: k-spacing(0) !default;
 /// The width of the calendar header cell.
 /// @group calendar
 $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
@@ -103,10 +103,10 @@ $kendo-calendar-header-cell-text: inherit !default;
 
 /// The horizontal padding of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-caption-padding-x: k-spacing(3) !default;
 /// The vertical padding of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-caption-padding-y: k-spacing(1) !default;
 /// The height of the calendar captions.
 /// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
@@ -132,10 +132,10 @@ $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 
 /// The bottom padding of Calendar views.
 /// @group calendar
-$kendo-calendar-view-padding-block-end: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-view-padding-block-end: k-spacing(1) !default;
 /// The spacing between the views in the multiview Calendar.
 /// @group calendar
-$kendo-calendar-view-gap: map.get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-view-gap: k-spacing(4) !default;
 
 /// The background color of the calendar weekend cell.
 /// @group calendar
@@ -243,17 +243,18 @@ $kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
 // Infinite calendar
 /// The background color of the navigation in the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
+
+$kendo-infinite-calendar-header-padding-x: k-spacing(3) !default;
 /// The background color of the navigation in the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-y: map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) !default;
+$kendo-infinite-calendar-header-padding-y: k-spacing(3) k-spacing(1) !default;
 
 /// The horizontal padding of the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-infinite-calendar-view-padding-x: k-spacing(3) !default;
 /// The vertical padding of 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 infinite Calendar view.
 /// @group calendar
@@ -282,62 +283,47 @@ $kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 if($kendo-enable-col
 
 
 // Calendar sizes
-/// The font size of the small Calendar.
-/// @group calendar
-$kendo-calendar-sm-font-size: $kendo-font-size-sm !default;
-/// The line height of the small Calendar.
-/// @group calendar
-$kendo-calendar-sm-line-height: $kendo-line-height-sm !default;
-/// The size of the small calendar cell.
-/// @group calendar
+$kendo-calendar-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-calendar-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
 $kendo-calendar-sm-cell-size: 24px !default;
+
 /// The horizontal padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-x: map.get( $kendo-spacing, 0.5 ) !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: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
 /// The font size of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-sm-cell-font-size: var( --kendo-font-size-sm, inherit ) !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 medium calendar cell.
-/// @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: 28px !default;
+
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-x: 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: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
 /// The font size of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-md-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
-/// The font size of the large Calendar.
-/// @group calendar
-$kendo-calendar-lg-font-size: $kendo-font-size-md !default;
-/// The line height of the large Calendar.
-/// @group calendar
-$kendo-calendar-lg-line-height: $kendo-line-height-md !default;
-/// The size of the large calendar cell.
-/// @group calendar
+$kendo-calendar-lg-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-calendar-lg-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-calendar-lg-cell-size: 32px !default;
+
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-x: 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: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-spacing(1) !default;
 /// The font size of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-font-size: $kendo-font-size-md !default;
+$kendo-calendar-lg-cell-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The sizes Map of the Calendar.
 /// @group calendar

package/scss/captcha/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the Captcha.
 /// @group captcha
-$kendo-captcha-spacer: map.get( $kendo-spacing, 2 ) !default;
+$kendo-captcha-spacer: k-spacing(2) !default;
 
 /// The width of the Captcha.
 /// @group captcha
@@ -36,11 +36,11 @@ $kendo-captcha-border: var( --kendo-component-border, initial ) !default;
 $kendo-captcha-image-wrap-spacing: $kendo-captcha-spacer !default;
 /// The spacing of the Captcha image controls.
 /// @group captcha
-$kendo-captcha-image-controls-spacing: math.div( $kendo-captcha-spacer, 2 ) !default;
+$kendo-captcha-image-controls-spacing: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 
 /// The offset of the Captcha validation message.
 /// @group captcha
-$kendo-captcha-validation-offset-y: math.div( $kendo-captcha-spacer, 2 ) !default;
+$kendo-captcha-validation-offset-y: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 /// The font size of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-font-size: var( --kendo-font-size-sm, inherit ) !default;

package/scss/card/_variables.scss

@@ -4,16 +4,16 @@
 
 /// The horizontal padding of the Card.
 /// @group card
-$kendo-card-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Card.
 /// @group card
-$kendo-card-padding-y: 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;
@@ -29,7 +29,7 @@ $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: map.get( $kendo-spacing, 4 ) !default;
+$kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
@@ -71,10 +71,10 @@ $kendo-card-header-font-weight: var( --kendo-font-weight, initial ) !default;
 $kendo-card-header-line-height: var( --kendo-line-height, normal ) !default;
 /// The horizontal padding of the Card header.
 /// @group card
-$kendo-card-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-header-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Card header.
 /// @group card
-$kendo-card-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-header-padding-y: k-spacing(3) !default;
 /// The bottom border width of the Card header.
 /// @group card
 $kendo-card-header-border-width: 0 !default;
@@ -90,10 +90,10 @@ $kendo-card-header-border: inherit !default; // header-border
 
 /// The horizontal padding of the Card body.
 /// @group card
-$kendo-card-body-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-body-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Card body.
 /// @group card
-$kendo-card-body-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-body-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Card footer.
 /// @group card
@@ -128,7 +128,7 @@ $kendo-card-title-font-weight: $kendo-card-header-font-weight !default;
 $kendo-card-title-line-height: var( --kendo-line-height, normal ) !default;
 /// The bottom margin of the Card title.
 /// @group card
-$kendo-card-title-margin-bottom: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-title-margin-bottom: k-spacing(3) !default;
 /// The font size of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -140,7 +140,7 @@ $kendo-card-subtitle-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-card-subtitle-line-height: var( --kendo-line-height, normal ) !default;
 /// The bottom margin of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-margin-bottom: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-subtitle-margin-bottom: k-spacing(3) !default;
 /// The text color of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-text: $kendo-subtle-text !default;
@@ -157,16 +157,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: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-actions-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Card actions.
 /// @group card
-$kendo-card-actions-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-card-actions-padding-y: k-spacing(3) !default;
 /// The top border width of the Card actions.
 /// @group card
 $kendo-card-actions-border-width: 0 !default;
 /// The spacing between the Card actions.
 /// @group card
-$kendo-card-actions-gap: 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/_layout.scss

@@ -321,8 +321,8 @@
     }
 
     .k-chat .k-card-deck {
-        max-width: calc( 100% + #{ $kendo-chat-message-list-padding-y * 2 } ); // prevent overflowing in the parent element
-        max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y * 2} ) );
+        max-width: calc( 100% + calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ); // prevent overflowing in the parent element
+        max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ) );
         box-sizing: border-box;
         margin-inline: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
         padding-block-start: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );

package/scss/chat/_variables.scss

@@ -15,10 +15,10 @@ $kendo-chat-link-hover-text: var( --kendo-link-hover-text, inherit ) !default;
 $kendo-chat-link-text: var( --kendo-link-text, inherit ) !default;
 /// The horizontal padding of the Chat.
 /// @group chat
-$kendo-chat-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-chat-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Chat.
 /// @group chat
-$kendo-chat-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-chat-padding-y: k-spacing(4) !default;
 /// The width of the Chat.
 /// @group chat
 $kendo-chat-width: 500px !default;
@@ -43,14 +43,14 @@ $kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-chat-typing-indicator-dot-size: 8px !default;
 /// The spacing of the Chat typing indicator dot.
 /// @group chat
-$kendo-chat-typing-indicator-dot-spacing: 5px !default;
+$kendo-chat-typing-indicator-dot-spacing: calc( #{k-spacing(2.5)} / 2 ) !default;
 
 /// The horizontal spacing between the items of the Chat.
 /// @group chat
-$kendo-chat-item-spacing-x: map.get( $kendo-spacing, 2 ) !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: map.get( $kendo-spacing, 4 ) !default;
+$kendo-chat-item-spacing-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Chat message list.
 /// @group chat
@@ -80,27 +80,27 @@ $kendo-chat-timestamp-bg: normal !default;
 
 /// The horizontal padding of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-chat-bubble-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chat-bubble-padding-y: k-spacing(2) !default;
 /// The spacing of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-spacing: map.get( $kendo-spacing, 0.5 ) !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: var( --kendo-line-height, normal ) !default;
 
 /// The spacing of the Chat scroll button.
 /// @group chat
-$kendo-chat-scroll-button: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chat-scroll-button: k-spacing(2) !default;
 /// The size of the Chat Card deck scrollbar.
 /// @group chat
 $kendo-card-deck-scrollbar-size: 20px !default;
 
 /// The border radius of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-border-radius: map.get( $kendo-spacing, 3 ) !default;
+$kendo-chat-bubble-border-radius: k-spacing(3) !default;
 /// The border radius of the Chat small bubble message
 /// @group chat
 $kendo-chat-bubble-border-radius-sm: var( --kendo-border-radius, 0 ) !default;
@@ -133,13 +133,13 @@ $kendo-chat-toolbar-border: inherit !default;
 
 /// The horizontal padding of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-padding-x: map.get( $kendo-spacing, 3 ) !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: map.get( $kendo-spacing, 2 ) !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: map.get( $kendo-spacing, 2 ) !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

@@ -229,7 +229,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: map.get( $kendo-spacing, 2 );
+        gap: k-spacing(2);
 
         .k-checkbox-label {
             margin: 0;

package/scss/checkbox/_variables.scss

@@ -15,24 +15,24 @@ $kendo-checkbox-border-width: 1px !default;
 // A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
-        size: map.get( $kendo-spacing, 4 ),
-        glyph-size: map.get( $kendo-spacing, 3.5 ),
-        indicator-size: map.get( $kendo-spacing, 4 ),
-        indeterminate-size: map.get( $kendo-spacing, 3 ),
+        size: k-spacing(4),
+        glyph-size: k-spacing(3.5),
+        indicator-size: k-spacing(4),
+        indeterminate-size: k-spacing(3),
         ripple-size: 300%
     ),
     md: (
-        size: map.get( $kendo-spacing, 5 ),
-        glyph-size: map.get( $kendo-spacing, 4.5 ),
-        indicator-size: map.get( $kendo-spacing, 4 ),
-        indeterminate-size: map.get( $kendo-spacing, 4 ),
+        size: k-spacing(5),
+        glyph-size: k-spacing(4.5),
+        indicator-size: k-spacing(4),
+        indeterminate-size: k-spacing(4),
         ripple-size: 300%
     ),
     lg: (
-        size: map.get( $kendo-spacing, 6 ),
-        glyph-size: map.get( $kendo-spacing, 5.5 ),
-        indicator-size: map.get( $kendo-spacing, 4 ),
-        indeterminate-size: map.get( $kendo-spacing, 5 ),
+        size: k-spacing(6),
+        glyph-size: k-spacing(5.5),
+        indicator-size: k-spacing(4),
+        indeterminate-size: k-spacing(5),
         ripple-size: 300%
     )
 ) !default;
@@ -192,17 +192,17 @@ $kendo-checkbox-disabled-indeterminate-image: escape-svg( url("data:image/svg+xm
 
 /// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-checkbox-label-margin-x: k-spacing(2) !default;
 
 
 // Checkbox list
 
 /// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: 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,7 +8,7 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the Chip.
 /// @group chip
-$kendo-chip-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-chip-spacing: k-spacing(1) !default;
 
 /// The font family of the Chip.
 /// @group chip
@@ -41,7 +41,7 @@ $kendo-chip-outline-disabled-border: if($kendo-enable-color-system, color-mix(in
 
 /// The offset of the outline focused Chip.
 /// @group chip
-$kendo-chip-focus-offset: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-chip-focus-offset: k-spacing(0.5) !default;
 /// The outline width of the outline focused Chip.
 /// @group chip
 $kendo-chip-focus-outline-width: 1px !default;
@@ -51,23 +51,23 @@ $kendo-chip-focus-outline-style: solid !default;
 
 /// The horizontal padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-md-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large Chip.
 /// @group chip
-$kendo-chip-lg-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-lg-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-y: 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: 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: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-chip-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font size of the small Chip.
 /// @group chip
@@ -223,7 +223,7 @@ $kendo-chip-theme-colors: () !default;
 /// The sizes of the Chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: map.get( $kendo-spacing, 1 ),
-    md: map.get( $kendo-spacing, 1 ),
-    lg: map.get( $kendo-spacing, 1 )
+    sm: k-spacing(1),
+    md: k-spacing(1),
+    lg: k-spacing(1)
 ) !default;

package/scss/color-preview/_variables.scss

@@ -2,7 +2,7 @@
 
 /// Border radius of the color preview.
 /// @group color-preview
-$kendo-color-preview-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 /// Border width of the color preview.
 /// @group color-preview
 $kendo-color-preview-border-width: 1px !default;

package/scss/coloreditor/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-spacer: map.get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-spacer: k-spacing(2) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group coloreditor
@@ -14,7 +14,7 @@ $kendo-color-editor-min-width: 260px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: var( --kendo-border-radius-md, #{$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: var( --kendo-font-family, inherit ) !default;
@@ -52,7 +52,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-spacing: math.div( $kendo-color-editor-spacer, 2 ) !default;
+$kendo-color-editor-header-actions-spacing: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
 
 /// The width of the ColorEditor preview.
 /// @group coloreditor
@@ -62,7 +62,7 @@ $kendo-color-editor-color-preview-width: 34px !default;
 $kendo-color-editor-color-preview-height: 14px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group coloreditor
-$kendo-color-editor-preview-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-color-editor-preview-spacing: k-spacing(1) !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group coloreditor
@@ -76,10 +76,10 @@ $kendo-color-editor-views-spacing: $kendo-color-editor-spacer !default;
 
 /// The vertical padding of the ColorEditor footer.
 /// @group coloreditor
-$kendo-color-editor-footer-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-footer-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the ColorEditor footer.
 /// @group coloreditor
-$kendo-color-editor-footer-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-footer-padding-x: k-spacing(2) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group coloreditor

package/scss/colorgradient/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-spacer: map.get( $kendo-spacing, 4 ) !default;
+$kendo-color-gradient-spacer: k-spacing(4) !default;
 
 /// The width of the ColorGradient.
 /// @group cologradient
@@ -14,13 +14,13 @@ $kendo-color-gradient-width: 260px !default;
 $kendo-color-gradient-border-width: 2px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The vertical padding of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
 /// The horizontal padding of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-padding-x: math.div( $kendo-color-gradient-spacer, 2 ) !default;
+$kendo-color-gradient-padding-x: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
 /// The spacing between the sections of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-spacing: $kendo-color-gradient-spacer !default;
@@ -59,10 +59,10 @@ $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !def
 $kendo-color-gradient-canvas-border-width: 0 !default;
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2 ) !default;
+$kendo-color-gradient-canvas-spacing: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group cologradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
@@ -78,7 +78,7 @@ $kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2,
 $kendo-color-gradient-slider-track-size: 20px !default;
 /// The border radius of the ColorGradient slider.
 /// @group cologradient
-$kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-gradient-slider-border-radius: k-border-radius(md) !default;
 /// The width of the border around the ColorGradient slider.
 /// @group cologradient
 $kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;
@@ -139,13 +139,13 @@ $kendo-color-gradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-color-
 $kendo-color-gradient-input-width: 48px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group cologradient
-$kendo-color-gradient-input-spacing: math.div( $kendo-color-gradient-spacer, 4 ) !default;
+$kendo-color-gradient-input-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
 /// The font size of the ColorGradient input labels.
 /// @group cologradient
 $kendo-color-gradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group cologradient
-$kendo-color-gradient-input-label-spacing: math.div( $kendo-color-gradient-spacer, 4 ) !default;
+$kendo-color-gradient-input-label-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
 /// The text color of the ColorGradient input labels.
 /// @group cologradient
 $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
@@ -155,4 +155,4 @@ $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !def
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacing: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;