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

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;
     }
@@ -271,6 +272,11 @@
         height: 100%;
     }
 
+    // Sankey labels
+    .k-sankey text {
+        pointer-events: none;
+    }
+
     // Base
     .k-treemap {
         height: 400px;
@@ -346,10 +352,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 +397,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/_layout.scss

@@ -68,6 +68,8 @@
     .k-drawer-content {
         flex: 1 1 auto;
         overflow: auto;
+        padding-block: var( --kendo-drawer-content-padding-y, #{$kendo-drawer-content-padding-y} );
+        padding-inline: var( --kendo-drawer-content-padding-x, #{$kendo-drawer-content-padding-x} );
     }
 
 

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
@@ -25,10 +26,10 @@ $kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
+$kendo-drawer-content-padding-x: null !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y} ) !default;
+$kendo-drawer-content-padding-y: null !default;
 
 /// The width of the Drawer scrollbar.
 /// @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;

package/scss/fab/_variables.scss

@@ -8,7 +8,7 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-fab-border-radius: k-border-radius(md) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
@@ -21,29 +21,29 @@ $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: math.div( $kendo-fab-padding-x, 2 ) !default;
+$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
+$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;
 
 /// The vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: math.div( $kendo-fab-padding-y, 2 ) !default;
+$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
+$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;
 
 /// The offset of the focused FAB.
 /// @group floating-action-button
@@ -57,27 +57,27 @@ $kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-icon-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
 /// The spacing of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-icon-spacing: k-spacing(0.5) !default;
 
 /// The horizontal padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-x: 0px !default;
+$kendo-fab-items-padding-x: k-spacing(0) !default;
 /// The vertical padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-fab-items-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-spacing(1) !default;
 /// The vertical padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-y: k-spacing(1) !default;
 /// The width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: 1px !default;
@@ -86,7 +86,7 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-style: solid !default;
 /// The border radius of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-fab-item-text-border-radius: k-border-radius(md) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -95,7 +95,7 @@ $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
 /// The bottom margin of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-offset-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-text-offset-x: k-spacing(2) !default;
 
 /// The offset of the focused FAB item.
 /// @group floating-action-button
@@ -109,7 +109,7 @@ $kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
+$kendo-fab-item-icon-padding-x: calc( #{k-spacing(2)} + $kendo-fab-icon-padding-x ) !default;
 /// The vertical padding of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -148,7 +148,7 @@ $kendo-fab-sizes: (
 
 /// The bottom margin of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-offset-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-offset-y: k-spacing(2) !default;
 /// The base text color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

package/scss/filemanager/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The space between the FileManager items.
 /// @group filemanager
-$kendo-file-manager-spacer: map.get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-spacer: k-spacing(4) !default;
 /// The border width of the FileManager.
 /// @group filemanager
 $kendo-file-manager-border-width: 1px !default;
@@ -65,10 +65,10 @@ $kendo-file-manager-navigation-border: inherit !default;
 
 /// The horizontal padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-file-manager-breadcrumb-padding-x: k-spacing(2) !default;
 /// The vertical padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-file-manager-breadcrumb-padding-y: k-spacing(2) !default;
 /// The border width of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
@@ -94,10 +94,10 @@ $kendo-file-manager-listview-border: inherit !default;
 
 /// The horizontal padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-listview-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-listview-item-padding-y: k-spacing(4) !default;
 /// The width of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-width: 120px !default;
@@ -160,7 +160,7 @@ $kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !defa
 $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
 /// The gap between the columns in the FileManager preview.
 /// @group filemanager
-$kendo-file-manager-preview-column-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-file-manager-preview-column-gap: k-spacing(1) !default;
 /// The background color of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-bg: transparent !default;