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

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: 1px !default;
 /// The border radius of the Card.
 /// @group card
-$kendo-card-border-radius: $kendo-border-radius-lg !default;
+$kendo-card-border-radius: k-border-radius(lg) !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: $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
@@ -81,10 +81,10 @@ $kendo-card-header-border: $kendo-component-header-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
@@ -107,10 +107,10 @@ $kendo-card-footer-border: $kendo-component-header-border !default;
 
 /// The bottom margin of the Card title.
 /// @group card
-$kendo-card-title-margin-bottom: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-card-title-margin-bottom: k-spacing(2) !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: null !default;
@@ -119,17 +119,17 @@ $kendo-card-title-font-family: null !default;
 $kendo-card-title-line-height: 1.25 !default;
 /// The font weight of the Card title.
 /// @group card
-$kendo-card-title-font-weight: $kendo-font-weight-normal !default;
+$kendo-card-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 /// The letter spacing of the Card title.
 /// @group card
 $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, 2 ) !default;
+$kendo-card-subtitle-margin-bottom: k-spacing(2) !default;
 /// The font size of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-size: $kendo-font-size-sm !default;
+$kendo-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font family of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-font-family: null !default;
@@ -138,7 +138,7 @@ $kendo-card-subtitle-font-family: null !default;
 $kendo-card-subtitle-line-height: normal !default;
 /// The font weight of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-weight: $kendo-font-weight-normal !default;
+$kendo-card-subtitle-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 /// The letter spacing of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-letter-spacing: null !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/_layout.scss

@@ -224,7 +224,7 @@
     .k-quick-reply {
         @include border-radius( 100px );
         margin-inline-end: $kendo-chat-quick-reply-spacing;
-        margin-block-end: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
+        margin-block-end: calc( #{$kendo-chat-quick-reply-spacing} / 2 );
         padding-block: $kendo-chat-quick-reply-padding-y;
         padding-inline: $kendo-chat-quick-reply-padding-x;
         border-width: 1px;
@@ -322,10 +322,10 @@
     }
 
     .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% + calc( #{$kendo-chat-message-list-padding-y} * 2 )); // prevent overflowing in the parent element
         box-sizing: border-box;
-        margin-inline-start: -$kendo-chat-message-list-padding-y;
-        margin-inline-end: -$kendo-chat-message-list-padding-y;
+        margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 );
+        margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 );
         padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x;
         overflow: hidden;
         overflow-x: auto;
@@ -336,8 +336,8 @@
     }
 
     .k-chat .k-card-deck-scrollwrap {
-        margin-right: -$kendo-chat-message-list-padding-y;
-        margin-left: -$kendo-chat-message-list-padding-y;
+        margin-right: calc( #{$kendo-chat-message-list-padding-y} * -1 );
+        margin-left: calc( #{$kendo-chat-message-list-padding-y} * -1 );
         padding-left: $kendo-chat-message-list-padding-y;
         padding-right: $kendo-chat-message-list-padding-y;
     }
@@ -440,7 +440,7 @@
 
         .k-scroll-button {
             // IMPORTANT: if we don't set padding, the browser will set for us
-            padding: 0 k-map-get( $kendo-spacing, 1 );
+            padding: 0 k-spacing(1);
             height: 100%;
             aspect-ratio: auto;
             position: absolute;

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: 12px !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: 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: 18px !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

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

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

@@ -7,7 +7,7 @@
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;
-        font-family: $kendo-font-family;
+        font-family: var( --kendo-font-family, inherit );
         font-size: $kendo-chip-font-size;
         line-height: $kendo-chip-line-height;
         display: inline-flex;

package/scss/chip/_variables.scss

@@ -8,46 +8,46 @@
 $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: $kendo-chip-padding-x !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: $kendo-chip-padding-y !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-md !default;
+$kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Chip.
 /// @group chip
 $kendo-chip-md-font-size: $kendo-chip-font-size !default;
 /// The font size of the large Chip.
 /// @group 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
@@ -64,8 +64,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.
 /// @group 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, 3 ) !default;
+$kendo-color-editor-spacer: k-spacing(3) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group coloreditor
@@ -12,16 +12,16 @@ $kendo-color-editor-min-width: 272px !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;
@@ -48,7 +48,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, 1.5 ) !default;
+$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 1.5 ) !default;
 
 /// The width of the ColorEditor preview.
 /// @group coloreditor
@@ -58,7 +58,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

package/scss/colorgradient/_layout.scss

@@ -164,7 +164,7 @@
         .k-contrast-validation {
             display: inline-flex;
             align-items: center;
-            gap: k-math-div( $kendo-color-gradient-contrast-spacer, 2 );
+            gap: calc( #{$kendo-color-gradient-contrast-spacer} / 2 );
 
             .k-icon {
                 vertical-align: middle;

package/scss/colorgradient/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-color-gradient-spacer: k-spacing(3) !default;
 
 /// The width of the ColorGradient.
 /// @group cologradient
@@ -14,7 +14,7 @@ $kendo-color-gradient-width: 272px !default;
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: $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;
@@ -26,13 +26,13 @@ $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
 $kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
 /// The font family of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-font-family: $kendo-font-family !default;
+$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-font-size: $kendo-font-size-md !default;
+$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-line-height: $kendo-line-height-md !default;
+$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-text: $kendo-component-text !default;
@@ -52,7 +52,7 @@ $kendo-color-gradient-focus-shadow: k-elevation(3) !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: $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-gap: $kendo-color-gradient-spacer !default;
@@ -126,17 +126,17 @@ $kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gra
 $kendo-color-gradient-input-width: 46px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group cologradient
-$kendo-color-gradient-input-gap: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group cologradient
-$kendo-color-gradient-input-label-gap: k-math-div( $kendo-color-gradient-spacer, 3 ) !default;
+$kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default;
 /// The text color of the ColorGradient input labels.
 /// @group cologradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group cologradient
-$kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-bold !default;
+$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-spacer: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;

package/scss/colorpalette/_variables.scss

@@ -2,17 +2,17 @@
 
 /// The font family of the ColorPalette.
 /// @group colorpalette
-$kendo-color-palette-font-family: $kendo-font-family !default;
+$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorPalette.
 /// @group colorpalette
-$kendo-color-palette-font-size: $kendo-font-size-md !default;
+$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorPalette.
 /// @group colorpalette
 $kendo-color-palette-line-height: 0 !default;
 
 /// The width of the ColorPalette tile.
 /// @group colorpalette
-$kendo-color-palette-tile-width: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group colorpalette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;

package/scss/common/_base.scss

@@ -75,7 +75,7 @@
     // Panels
     .k-block,
     .k-panel {
-        @include border-radius( $kendo-border-radius-md );
+        @include border-radius( k-border-radius(md) );
         @include fill(
             $kendo-component-text,
             $kendo-component-bg,
@@ -87,19 +87,19 @@
         box-sizing: border-box;
 
         > .k-header {
-            @include border-top-radius( $kendo-border-radius-md );
+            @include border-top-radius( k-border-radius(md) );
             @include fill(
                 $kendo-component-header-text,
                 $kendo-component-header-bg,
                 $kendo-component-header-border,
                 $kendo-component-header-gradient
             );
-            padding-inline: k-map-get( $kendo-spacing, 2 );
-            padding-block: k-map-get( $kendo-spacing, 1 );
+            padding-inline: k-spacing(2);
+            padding-block: k-spacing(1);
         }
         > .k-content {
-            padding-inline: k-map-get( $kendo-spacing, 2 );
-            padding-block: k-map-get( $kendo-spacing, 1 );
+            padding-inline: k-spacing(2);
+            padding-block: k-spacing(1);
         }
     }
     .k-content {
@@ -141,7 +141,7 @@
 @include exports( "common/misc/hr" ) {
 
     .k-hr {
-        margin: k-map-get( $kendo-spacing, 4 ) auto;
+        margin: k-spacing(4) auto;
         padding: 0;
         height: 0;
         border-width: 1px 0 0;

package/scss/core/_index.scss

@@ -6,6 +6,12 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Color System
 @import "./color-system/_swatch.scss";
 
+// Typography
+@import "./typography/index.import.scss";
+
+// Spacing
+@import "./spacing/index.import.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
 // Backward compatibility
@@ -17,4 +23,10 @@ $wcag-min-contrast-ratio: 4.5 !default;
 
     // Elevation System
     @include kendo-elevation--styles();
+    // Typography
+    @include kendo-core--typography--styles();
+    // Spacing
+    @include kendo-spacing--styles();
+    // Radii
+    @include kendo-border-radius--styles();
 }

package/scss/core/border-radii/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";

package/scss/core/spacing/index.import.scss

@@ -0,0 +1,29 @@
+@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+
+$kendo-icon-spacing: k-spacing(1) !default;
+$kendo-icon-padding: k-spacing(1) !default;
+
+/// Horizontal padding.
+/// @group common
+$kendo-padding-x: k-spacing(2) !default;
+/// Vertical padding.
+/// @group common
+$kendo-padding-y: k-spacing(1) !default;
+/// Small horizontal padding.
+/// @group common
+$kendo-padding-sm-x: k-spacing(1) !default;
+/// Small vertical padding.
+/// @group common
+$kendo-padding-sm-y: k-spacing(0.5) !default;
+/// Medium horizontal padding.
+/// @group common
+$kendo-padding-md-x: k-spacing(2) !default;
+/// Medium vertical padding.
+/// @group common
+$kendo-padding-md-y: k-spacing(1) !default;
+/// Large horizontal padding.
+/// @group common
+$kendo-padding-lg-x: k-spacing(3) !default;
+/// Large vertical padding.
+/// @group common
+$kendo-padding-lg-y: k-spacing(1.5) !default;

package/scss/core/typography/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/typography/index.import.scss";