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

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;

package/scss/colorpalette/_variables.scss

@@ -22,7 +22,7 @@ $kendo-color-palette-tile-outline-style: solid !default;
 $kendo-color-palette-tile-outline: transparent !default;
 /// The width of the ColorPalette tile.
 /// @group colorpalette
-$kendo-color-palette-tile-width: 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/core/_index.scss

@@ -7,6 +7,15 @@
 @use "./elevation" as *;
 @forward "./elevation/legacy";
 
+// Typography
+@use "./typography/" as *;
+
+// Spacing
+@use "./spacing" as *;
+
+// Radii
+@use "./border-radii/" as *;
+
 // Variables
 @forward "./variables";
 
@@ -46,7 +55,15 @@
     $kendo-loading-text: $kendo-loading-text !default,
     // Elevation
     $_default-elevation: $kendo-elevation,
-    $kendo-elevation: $kendo-elevation !default
+    $kendo-elevation: $kendo-elevation !default,
+    // Typography
+    $kendo-letter-spacing: $kendo-letter-spacing !default,
+    $kendo-font-family: $kendo-font-family !default,
+    $kendo-font-sizes: $kendo-font-sizes !default,
+    $kendo-line-heights: $kendo-line-heights !default,
+    // Radii
+    $_default-border-radii: $kendo-border-radii,
+    $kendo-border-radii: $kendo-border-radii !default
 );
 
 @forward "./color-system/swatch-legacy";

package/scss/core/_variables.scss

@@ -2,47 +2,13 @@
 @use "sass:math";
 @use "sass:meta";
 
+// Options
+$kendo-enable-typography: false !default;
+
 $kendo-use-input-button-width: true !default;
 $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 
-/// Base font size across all components.
-$kendo-font-size: 14px !default;
-$kendo-font-size-xs: 10px !default;
-$kendo-font-size-sm: 12px !default;
-$kendo-font-size-md: $kendo-font-size !default;
-$kendo-font-size-lg: 16px !default;
-$kendo-font-size-xl: 20px !default;
-
-$kendo-font-sizes: (
-    xs: $kendo-font-size-xs,
-    sm: $kendo-font-size-sm,
-    md: $kendo-font-size-md,
-    lg: $kendo-font-size-lg,
-    xl: $kendo-font-size-xl
-) !default;
-
-
-/// Font family across all components.
-$kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
-
-
-/// Line height used along with $kendo-font-size.
-$kendo-line-height: math.div( 20, 14 ) !default;
-$kendo-line-height-xs: 1 !default;
-$kendo-line-height-sm: 1.25 !default;
-$kendo-line-height-md: $kendo-line-height !default;
-$kendo-line-height-lg: 1.5 !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
-
-
-/// Font weight.
-$kendo-font-weight: 400 !default;
-$kendo-font-weight-light: 300 !default;
-$kendo-font-weight-bold: 600 !default;
-
-$kendo-letter-spacing: normal !default;
-
 // $kendo-scrollbar-width: 17px !default;
 
 // Default transition
@@ -50,28 +16,6 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord
 
 @mixin core-styles() {
     :root {
-        --kendo-font-family: #{meta.inspect($kendo-font-family)};
-
-        --kendo-font-size: #{$kendo-font-size};
-        --kendo-font-size-xs: #{$kendo-font-size-xs};
-        --kendo-font-size-sm: #{$kendo-font-size-sm};
-        --kendo-font-size-md: #{$kendo-font-size-md};
-        --kendo-font-size-lg: #{$kendo-font-size-lg};
-        --kendo-font-size-xl: #{$kendo-font-size-xl};
-
-        --kendo-line-height: #{$kendo-line-height};
-        --kendo-line-height-xs: #{$kendo-line-height-xs};
-        --kendo-line-height-sm: #{$kendo-line-height-sm};
-        --kendo-line-height-md: #{$kendo-line-height-md};
-        --kendo-line-height-lg: #{$kendo-line-height-lg};
-
-        --kendo-font-weight: #{$kendo-font-weight};
-        --kendo-font-weight-light: #{$kendo-font-weight-light};
-        --kendo-font-weight-bold: #{$kendo-font-weight-bold};
-
-        --kendo-letter-spacing: #{$kendo-letter-spacing};
-
-
         --kendo-transition: #{$kendo-transition};
     }
 }

package/scss/core/border-radii/_index.scss

@@ -0,0 +1,42 @@
+@use "sass:map";
+@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
+
+/// The none border radius used across the Components.
+/// @group radii
+$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+/// The extra small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
+/// The small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+/// The medium border radius used across the Components.
+/// @group radii
+$kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
+/// The large border radius used across the Components.
+/// @group radii
+$kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
+/// The extra large border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xl: map.get($kendo-spacing, 3) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xxxl: map.get($kendo-spacing, 5) !default;
+
+$_default-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    xl: $kendo-border-radius-xl,
+    xxl: $kendo-border-radius-xxl,
+    xxxl: $kendo-border-radius-xxxl
+) !default;
+
+/// The global radii Map.
+/// @group radii
+$kendo-border-radii: $_default-border-radii !default;

package/scss/core/color-system/_swatch-legacy.scss

@@ -93,8 +93,4 @@
     --kendo-invalid-text: #{core.$kendo-invalid-text};
     --kendo-invalid-border: #{core.$kendo-invalid-border};
     --kendo-invalid-shadow: #{core.$kendo-invalid-shadow};
-
-    --kendo-border-radius-sm: #{core.$kendo-border-radius-sm};
-    --kendo-border-radius-md: #{core.$kendo-border-radius-md};
-    --kendo-border-radius-lg: #{core.$kendo-border-radius-lg};
 }

package/scss/core/spacing/_index.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
+
+/// 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;
+