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

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,24 @@
+@use "sass:map";
+@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
+
+$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+$kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
+$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
+$kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
+$kendo-border-radius-xl: map.get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
+$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;
+
+$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;
+

package/scss/core/typography/_index.scss

@@ -0,0 +1,70 @@
+@use "sass:math";
+
+/// The base font size across all components.
+/// @group typography
+$kendo-font-size: 0.875rem !default;
+/// The extra extra small font size across all components.
+/// @group typography
+$kendo-font-size-xs: 0.625rem !default;
+/// The small font size across all components.
+/// @group typography
+$kendo-font-size-sm: 0.75rem !default;
+/// The medium font size across all components.
+/// @group typography
+$kendo-font-size-md: $kendo-font-size !default;
+/// The large font size across all components.
+/// @group typography
+$kendo-font-size-lg: 1rem !default;
+/// The extra large font size across all components.
+/// @group typography
+$kendo-font-size-xl: 1.25rem !default;
+
+/// The base line height across all components.
+/// @group typography
+$kendo-line-height: math.div( 20, 14 ) !default;
+/// The extra small line height across all components.
+/// @group typography
+$kendo-line-height-xs: 1 !default;
+/// The small line height across all components.
+/// @group typography
+$kendo-line-height-sm: 1.25 !default;
+/// The medium line height across all components.
+/// @group typography
+$kendo-line-height-md: $kendo-line-height !default;
+/// The large line height across all components.
+/// @group typography
+$kendo-line-height-lg: 1.5 !default;
+/// The base line height in ems across all components.
+/// @group typography
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
+
+/// The base letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing: normal !default;
+
+/// The font family across all components.
+/// @group typography
+$kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
+
+$_default-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;
+
+$_default-line-heights: (
+    xs: $kendo-line-height-xs,
+    sm: $kendo-line-height-sm,
+    md: $kendo-line-height-md,
+    lg: $kendo-line-height-lg,
+) !default;
+
+/// The font sizes map
+/// @group typography
+$kendo-font-sizes: $_default-font-sizes !default;
+
+/// The line heights map
+/// @group typography
+$kendo-line-heights: $_default-line-heights !default;

package/scss/dataviz/_layout.scss

@@ -3,6 +3,7 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 @use "../tooltip/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-dataviz--layout() {
 
@@ -85,7 +86,7 @@
     }
 
     .k-chart-tooltip {
-        @include border-radius( var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) );
+        @include border-radius( k-border-radius(md) );
         font-size: var( --kendo-chart-tooltip-font-size, #{$kendo-chart-tooltip-font-size} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
         padding-inline: var( --kendo-chart-tooltip-padding-x, #{$kendo-tooltip-padding-x} );
@@ -199,7 +200,7 @@
     }
 
     .k-navigator-hint .k-scroll {
-        @include border-radius( var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) );
+        @include border-radius( k-border-radius(md) );
         position: absolute;
         height: 4px;
     }
@@ -346,10 +347,10 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
+            inset-block-start: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
+            inset-inline-start: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal) * var( --kendo-font-size, inherit) ) + 1px);
         }
 
 
@@ -391,7 +392,7 @@
         base: $kendo-component-bg,
         background: $kendo-component-bg,
 
-        border-radius: $kendo-border-radius-md,
+        border-radius: k-border-radius(md),
 
         normal-background: $kendo-component-bg,
         normal-text-color: $kendo-component-text,

package/scss/dataviz/_variables.scss

@@ -93,7 +93,7 @@ $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
 /// @group charts
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-chart-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-chart-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-chart-md-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-chart-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line-height of the chart component.
 /// @group charts

package/scss/daterangepicker/_layout.scss

@@ -11,7 +11,7 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-end;
-        gap: map.get( $kendo-spacing, 2 );
+        gap: k-spacing(2);
 
         *,
         *::before,

package/scss/datetimepicker/_variables.scss

@@ -1,3 +1,3 @@
 @use "../calendar/_variables.scss" as *;
 
-$kendo-datetime-width: calc( #{$kendo-calendar-header-min-width} + #{$kendo-infinite-calendar-view-padding-x * 2} ) !default;
+$kendo-datetime-width: calc( #{$kendo-calendar-header-min-width} + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 ) ) !default;

package/scss/dialog/_variables.scss

@@ -19,34 +19,34 @@ $kendo-dialog-titlebar-border: var( --kendo-component-border, initial ) !default
 $kendo-dialog-titlebar-border-width: 0 !default;
 /// The horizontal padding of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-dialog-titlebar-padding-x: k-spacing(6) !default;
 /// The vertical padding of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-dialog-titlebar-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the content of the Dialog.
 /// @group dialog
-$kendo-dialog-inner-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-dialog-inner-padding-x: k-spacing(6) !default;
 /// The vertical padding of the content of the Dialog.
 /// @group dialog
-$kendo-dialog-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-dialog-inner-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
+$kendo-dialog-buttongroup-padding-x: k-spacing(6) !default; // $kendo-actions-padding-x
 /// The vertical padding of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
+$kendo-dialog-buttongroup-padding-y: k-spacing(6) !default; // $kendo-actions-padding-y
 /// The width of the top border of the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 0 !default;
 /// The spacing between the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
+$kendo-dialog-buttongroup-spacing: k-spacing(3) !default;
 
 /// The spacing between the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-actions-padding-y
+$kendo-dialog-button-spacing: k-spacing(2) !default; // $kendo-actions-padding-y
 
 /// The box shadow around the Dialog.
 /// @group dialog

package/scss/dock-manager/_layout.scss

@@ -1,5 +1,6 @@
 @use "../core/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/typography/" as *;
 
 @mixin kendo-dock-manager--layout() {
 

package/scss/dock-manager/_variables.scss

@@ -13,10 +13,10 @@ $kendo-dock-manager-border: var( --kendo-component-border, inherit ) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-dock-manager-pane-header-padding-y: k-spacing(1) !default;
 /// The horizontal padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-dock-manager-pane-header-padding-x: k-spacing(6) !default;
 /// The width of the border around the pane header in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
@@ -51,10 +51,10 @@ $kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight, normal ) !
 
 /// The horizontal padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-dock-manager-pane-content-padding-x: k-spacing(3) !default;
 /// The vertical padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-dock-manager-pane-content-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
@@ -75,7 +75,7 @@ $kendo-dock-manager-unpinned-container-shadow: 25.6px 0px 57.6px 0px rgba(0, 0,
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-padding: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-dock-indicator-padding: k-spacing(1.5) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-bg: $kendo-component-bg !default;

package/scss/draggable/_variables.scss

@@ -1,9 +1,10 @@
 @use "sass:math";
 @use "../core/" as *;
+@use "../core/spacing/" as *;
 
 /// Borer radius of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-drag-clue-border-radius: k-border-radius(md) !default;
 /// Borer width of the drag clue.
 /// @group draggable
 $kendo-drag-clue-border-width: 0px !default;

package/scss/drawer/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/" as *;
+@use "../core/spacing" as *;
 
 /// The background color of the Drawer.
 /// @group drawer
@@ -48,7 +49,7 @@ $kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, color-mix(in
 
 /// The horizontal padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-y: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
@@ -68,10 +69,10 @@ $kendo-drawer-item-level-count: 5 !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-x: 0 !default;
+$kendo-drawer-icon-padding-x: k-spacing(0) !default;
 /// The vertical padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-drawer-icon-padding-y: k-spacing(1) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer
@@ -79,8 +80,9 @@ $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + va
 
 /// The border width of the Drawer item ripple.
 /// @group drawer
-$kendo-drawer-item-ripple-border-width: map.get( $kendo-spacing, 0.5 ) !default;
-/// The border color of the Drawer item ripple.
+
+$kendo-drawer-item-ripple-border-width: k-spacing(0.5) !default;
+/// The border color of the drawer item ripple
 /// @group drawer
 $kendo-drawer-item-ripple-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The background color of the Drawer item.

package/scss/dropdowntree/_variables.scss

@@ -11,4 +11,4 @@ $kendo-dropdowntree-popup-padding-y: $kendo-popup-content-padding-y !default;
 
 /// The padding of the check-all CheckBox inside the DropDownTree popup
 /// @group dropdowntree
-$kendo-dropdowntree-check-all-padding: map.get( $kendo-spacing, 1 ) !default;
+$kendo-dropdowntree-check-all-padding: k-spacing(1) !default;

package/scss/dropzone/_variables.scss

@@ -4,10 +4,10 @@
 
 /// The horizontal padding of the DropZone.
 /// @group dropzone
-$kendo-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-padding-x: k-spacing(2) !default;
 /// The vertical padding of the DropZone.
 /// @group dropzone
-$kendo-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-padding-y: k-spacing(2) !default;
 /// The border width of the DropZone.
 /// @group dropzone
 $kendo-dropzone-border-width: 1px !default;
@@ -37,7 +37,7 @@ $kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
 
 /// The spacing below the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-spacing: map.get( $kendo-spacing, 6 ) !default;
+$kendo-dropzone-icon-spacing: k-spacing(6) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 )) !default;
@@ -53,7 +53,7 @@ $kendo-dropzone-hint-font-size: inherit !default;
 $kendo-dropzone-hint-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 /// The spacing below the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-hint-spacing: k-spacing(2) !default;
 /// The text color of the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-text: $kendo-dropzone-text !default;
@@ -66,7 +66,7 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-dropzone-note-font-weight: inherit !default;
 /// The spacing below the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-spacing: 0 !default;
+$kendo-dropzone-note-spacing: k-spacing(0) !default;
 /// The text color of the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/editor/_layout.scss

@@ -6,6 +6,7 @@
 @use "../button/_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../window/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-editor--layout() {
 
@@ -39,7 +40,7 @@
 
     // Inline editor
     .k-editor-inline {
-        @include border-radius( $kendo-border-radius-md );
+        @include border-radius( k-border-radius(md) );
         padding-block: $kendo-padding-sm-y;
         padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
@@ -353,7 +354,7 @@
             flex: 1;
         }
         .k-search-wrap {
-            margin-inline-start: map.get( $kendo-spacing, 4 );
+            margin-inline-start: k-spacing(4);
             width: 150px;
             display: flex;
             align-items: center;
@@ -370,7 +371,7 @@
 
         // Filebrowser toolbar
         .k-filebrowser-toolbar {
-            margin-block-start: map.get( $kendo-spacing, 4 );
+            margin-block-start: k-spacing(4);
         }
 
         .k-upload {
@@ -397,7 +398,7 @@
             flex-flow: row wrap;
             height: 390px;
             max-height: 50vh;
-            margin-block-end: map.get( $kendo-spacing, 4 );
+            margin-block-end: k-spacing(4);
             padding-block: $kendo-padding-md-y;
             padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
@@ -413,7 +414,7 @@
             white-space: nowrap;
             overflow: hidden;
             cursor: pointer;
-            @include border-radius( $kendo-border-radius-md );
+            @include border-radius( k-border-radius(md) );
 
             .k-i-file,
             .k-i-folder {

package/scss/editor/_variables.scss

@@ -34,10 +34,10 @@ $kendo-editor-placeholder-opacity: var( --kendo-input-placeholder-opacity, #{$ke
 $kendo-editor-content-outline-color: var( --kendo-body-text, initial ) !default;
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor
-$kendo-editor-export-tool-icon-margin-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-editor-export-tool-icon-margin-x: k-spacing(1) !default;
 /// The outline width of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-editor-selectednode-outline-width: k-spacing(0.5) !default;
 
 /// The selected text color of the Editor.
 /// @group editor
@@ -51,7 +51,7 @@ $kendo-editor-highlighted-bg: if($kendo-enable-color-system, color-mix(in srgb,
 
 /// The size of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-size: map.get( $kendo-spacing, 2 ) !default;
+$kendo-editor-resize-handle-size: k-spacing(2) !default;
 /// The border width of the Editor's resize handle.
 /// @group editor
 $kendo-editor-resize-handle-border-width: 1px !default;

package/scss/expansion-panel/_variables.scss

@@ -3,7 +3,7 @@
 
 /// The vertical spacing of the ExpansionPanel.
 /// @group expander
-$kendo-expander-margin-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-expander-margin-y: k-spacing(2) !default;
 /// The width of the border around the ExpansionPanel.
 /// @group expander
 $kendo-expander-border-width: 1px !default;
@@ -63,10 +63,10 @@ $kendo-expander-focus-shadow: inset 0px 0px 0px 2px if($kendo-enable-color-syste
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-expander-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-expander-header-padding-y: k-spacing(3) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
@@ -89,14 +89,14 @@ $kendo-expander-header-sub-title-text: var( --kendo-subtle-text, initial ) !defa
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander
-$kendo-expander-indicator-margin-x: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-expander-indicator-margin-x: k-spacing(2.5) !default;
 /// The text color of the ExpansionPanel indicator.
 /// @group expander
 $kendo-expander-indicator-text: var( --kendo-expander-text, #{$kendo-expander-text} ) !default;
 
 /// The horizontal padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-x: k-spacing(4) !default;
 /// The vertical padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-y: k-spacing(4) !default;