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

package/scss/dock-manager/_variables.scss

@@ -10,10 +10,10 @@ $kendo-dock-manager-border: $kendo-base-border !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dock-manager-pane-header-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-dock-manager-pane-header-padding-x: k-spacing(4) !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;
@@ -32,16 +32,16 @@ $kendo-dock-manager-pane-title-padding-y: null !default;
 $kendo-dock-manager-pane-title-padding-x: null !default;
 /// The font family of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-family: $kendo-font-family !default;
+$kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-size: $kendo-font-size-lg !default;
+$kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-line-height: $kendo-line-height-sm !default;
+$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-sm, normal ) !default;
 /// The font weight of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-weight: $kendo-font-weight-normal !default;
+$kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The horizontal padding of the pane content in the DockManager component.
 /// @group dock-manager
@@ -52,10 +52,10 @@ $kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padd
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-y: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-dock-manager-tabbed-pane-padding-y: k-spacing(3.5) !default;
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dock-manager-tabbed-pane-padding-x: k-spacing(2) !default;
 
 /// The width of the unpinned pane container in the DockManager component.
 /// @group dock-manager
@@ -69,7 +69,7 @@ $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.0
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-padding: k-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: #f5f5f5 !default;
@@ -104,7 +104,7 @@ $kendo-dock-manager-dock-preview-border-width: 1px !default;
 $kendo-dock-manager-dock-preview-border-style: dashed !default;
 /// The border radius of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
+$kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;

package/scss/draggable/_variables.scss

@@ -2,10 +2,10 @@
 $kendo-drag-hint-padding-x: $kendo-padding-md-x !default;
 $kendo-drag-hint-padding-y: $kendo-padding-md-y !default;
 $kendo-drag-hint-border-width: 1px !default;
-$kendo-drag-hint-border-radius: $kendo-border-radius-md !default;
-$kendo-drag-hint-font-size: $kendo-font-size-md !default;
-$kendo-drag-hint-font-family: $kendo-font-family !default;
-$kendo-drag-hint-line-height: $kendo-line-height-md !default;
+$kendo-drag-hint-border-radius: k-border-radius(md) !default;
+$kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-drag-hint-bg: $kendo-base-bg !default;
 $kendo-drag-hint-text: $kendo-base-text !default;

package/scss/drawer/_layout.scss

@@ -139,8 +139,8 @@
         cursor: pointer;
 
         > .k-drawer-link {
-            margin-block: (-$kendo-drawer-item-padding-y);
-            margin-inline: (-$kendo-drawer-item-padding-x);
+            margin-block: calc( #{$kendo-drawer-item-padding-y} * -1 );
+            margin-inline: calc( #{$kendo-drawer-item-padding-x} * -1 );
             padding-block: $kendo-drawer-item-padding-y;
             padding-inline: $kendo-drawer-item-padding-x;
             color: inherit;
@@ -177,7 +177,7 @@
         // Hierarchy items
         @for $i from 1 through $kendo-drawer-item-level-count {
             &.k-level-#{$i} {
-                padding-inline-start: ( $i + 1) * $kendo-drawer-item-level-padding-x;
+                padding-inline-start: calc(( #{$i} + 1) * #{$kendo-drawer-item-level-padding-x}) ;
             }
         }
     }

package/scss/drawer/_variables.scss

@@ -12,18 +12,9 @@ $kendo-drawer-border: $kendo-component-border !default;
 /// The border width of the Drawer.
 /// @group drawer
 $kendo-drawer-border-width: 1px !default;
-/// The font family of the Drawer.
-/// @group drawer
-$kendo-drawer-font-family: $kendo-font-family !default;
-/// The font size of the Drawer.
-/// @group drawer
-$kendo-drawer-font-size: $kendo-font-size-md !default;
-/// The line height of the Drawer.
-/// @group drawer
-$kendo-drawer-line-height: $kendo-line-height-md !default;
-
-/// The horizontal padding of the Drawer content.
-/// @group drawer
+$kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
@@ -47,16 +38,14 @@ $kendo-drawer-scrollbar-hover-color: rgba(156, 156, 156, 1) !default;
 
 /// The horizontal padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-x: k-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: $kendo-padding-md-x !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: 16px !default;
-/// The line height of the Drawer item.
-/// @group drawer
-$kendo-drawer-item-line-height: $kendo-line-height-lg !default;
+$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
@@ -67,10 +56,11 @@ $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: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-drawer-icon-padding-y: k-spacing(1) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer

package/scss/dropdowntree/_layout.scss

@@ -8,8 +8,8 @@
     .k-dropdowntree-popup,
     .k-multiselecttree-popup {
         .k-treeview {
-            padding-block: k-math-div( $kendo-dropdowntree-popup-padding-y, 2 );
-            padding-inline: k-math-div( $kendo-dropdowntree-popup-padding-x, 2 );
+            padding-block: calc( #{$kendo-dropdowntree-popup-padding-y} / 2 );
+            padding-inline: calc( #{$kendo-dropdowntree-popup-padding-x} / 2 );
         }
 
         .k-check-all {

package/scss/dropdowntree/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The horizontal padding of the DropdownTree popup
 /// @group dropdowntree
-$kendo-dropdowntree-popup-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropdowntree-popup-padding-x: k-spacing(2) !default;
 /// The vertical padding of the DropdownTree popup
 /// @group dropdowntree
-$kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropdowntree-popup-padding-y: k-spacing(2) !default;

package/scss/dropzone/_variables.scss

@@ -2,10 +2,10 @@
 
 /// The horizontal padding of the DropZone.
 /// @group dropzone
-$kendo-dropzone-padding-x: k-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: k-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;
@@ -15,13 +15,13 @@ $kendo-dropzone-min-height: 220px !default;
 
 /// The font family of the DropZone.
 /// @group dropzone
-$kendo-dropzone-font-family: $kendo-font-family !default;
+$kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the DropZone.
 /// @group dropzone
-$kendo-dropzone-font-size: $kendo-font-size-md !default;
+$kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the DropZone.
 /// @group dropzone
-$kendo-dropzone-line-height: $kendo-line-height-md !default;
+$kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
@@ -35,7 +35,7 @@ $kendo-dropzone-border: $kendo-base-border !default;
 
 /// The spacing below the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-spacing: k-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-try-tint( $kendo-dropzone-text, 4 )) !default;
@@ -48,14 +48,14 @@ $kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
 $kendo-dropzone-hint-font-size: null !default;
 /// The spacing below the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-spacing: k-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: null !default;
 
 /// The font size of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-font-size: $kendo-font-size-sm !default;
+$kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The spacing below the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-spacing: null !default;

package/scss/editor/_layout.scss

@@ -29,7 +29,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;
@@ -373,7 +373,7 @@
             flex: 1;
         }
         .k-search-wrap {
-            margin: 0 0 0 k-map-get( $kendo-spacing, 4 );
+            margin: 0 0 0 k-spacing(4);
             width: 150px;
             display: flex;
             align-items: center;
@@ -390,7 +390,7 @@
 
         // Filebrowser toolbar
         .k-filebrowser-toolbar {
-            margin: k-map-get( $kendo-spacing, 4 ) 0 0 0;
+            margin: k-spacing(4) 0 0 0;
         }
 
         .k-upload {
@@ -417,7 +417,7 @@
             flex-flow: row wrap;
             height: 390px;
             max-height: 50vh;
-            margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
+            margin: 0 0 k-spacing(4) 0;
             padding-block: $kendo-padding-md-y;
             padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
@@ -433,7 +433,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

@@ -5,13 +5,13 @@
 $kendo-editor-border-width: 1px !default;
 /// The font family of the Еditor.
 /// @group editor
-$kendo-editor-font-family: $kendo-font-family !default;
+$kendo-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Еditor.
 /// @group editor
-$kendo-editor-font-size: $kendo-font-size-md !default;
+$kendo-editor-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Еditor.
 /// @group editor
-$kendo-editor-line-height: $kendo-line-height-md !default;
+$kendo-editor-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the Еditor placeholder.
 /// @group editor

package/scss/expansion-panel/_variables.scss

@@ -2,19 +2,19 @@
 
 /// The vertical spacing of the ExpansionPanel.
 /// @group expander
-$kendo-expander-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-expander-spacing-y: k-spacing(2) !default;
 /// The width of the border around the ExpansionPanel.
 /// @group expander
 $kendo-expander-border-width: 1px !default;
 /// The font family of the ExpansionPanel.
 /// @group expander
-$kendo-expander-font-family: $kendo-font-family !default;
+$kendo-expander-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ExpansionPanel.
 /// @group expander
-$kendo-expander-font-size: $kendo-font-size-md !default;
+$kendo-expander-font-size: var( --kendo-font-size, inherit ) !default;
 /// The hine height of the ExpansionPanel.
 /// @group expander
-$kendo-expander-line-height: $kendo-line-height-md !default;
+$kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander
@@ -32,10 +32,10 @@ $kendo-expander-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-x: k-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: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-expander-header-padding-y: k-spacing(3) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
@@ -67,11 +67,11 @@ $kendo-expander-header-sub-title-text: $kendo-subtle-text !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander
-$kendo-expander-indicator-margin-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-expander-indicator-margin-x: k-spacing(3) !default;
 
 /// The horizontal padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-x: k-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: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-y: k-spacing(4) !default;

package/scss/fab/_layout.scss

@@ -43,7 +43,7 @@
         .k-icon-wrapper-host:not(:only-child) &,
         &:not(:only-child) {
             margin-inline-end: $kendo-fab-icon-spacing;
-            margin-inline-start: -$kendo-fab-icon-spacing;
+            margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
         }
     }
 
@@ -83,7 +83,7 @@
 
     .k-fab-item {
         list-style-type: none;
-        margin-block-end: k-map-get( $kendo-spacing, 2 );
+        margin-block-end: k-spacing(2);
         outline: none;
         white-space: nowrap;
         display: flex;
@@ -96,7 +96,7 @@
 
             .k-fab-item-text {
                 // Needed for fab item positioning in RTL
-                margin-right: k-map-get( $kendo-spacing, 2 );
+                margin-right: k-spacing(2);
             }
         }
         &.k-text-left {
@@ -104,7 +104,7 @@
 
             .k-fab-item-text {
                 // Needed for fab item positioning in RTL
-                margin-left: k-map-get( $kendo-spacing, 2 );
+                margin-left: k-spacing(2);
             }
         }
     }

package/scss/fab/_variables.scss

@@ -5,64 +5,64 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: $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: $kendo-font-family !default;
+$kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-size: $kendo-font-size-md !default;
+$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the FAB.
 /// @group floating-action-button
-$kendo-fab-line-height: $kendo-line-height-md !default;
+$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: k-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: k-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: k-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 horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: k-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: k-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: k-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: k-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: $kendo-fab-item-text-padding-x !default;
@@ -74,14 +74,14 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-radius: 2px !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-font-size: $kendo-font-size-xs !default;
+$kendo-fab-item-text-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The line height of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: k-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;
@@ -127,7 +127,7 @@ $kendo-fab-active-shadow: null !default;
 $kendo-fab-outline-style: solid !default;
 /// The outline width of the FAB.
 /// @group floating-action-button
-$kendo-fab-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-outline-width: k-spacing(0.5) !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button
@@ -163,7 +163,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 $kendo-fab-item-outline-style: solid !default;
 /// The outline width of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-item-outline-width: k-spacing(0.5) !default;
 /// The outline color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;

package/scss/filemanager/_layout.scss

@@ -108,7 +108,7 @@
 
         // File name
         .k-file-name {
-            margin-top: k-math-div( $kendo-file-manager-spacer, 2 );
+            margin-top: calc( #{$kendo-file-manager-spacer} / 2 );
             display: block;
             text-align: center;
             overflow: hidden;
@@ -150,9 +150,9 @@
 
     // Filemanager preview
     .k-filemanager-preview {
-        padding: ($kendo-file-manager-preview-padding-y * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y;
+        padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y;
         width: $kendo-file-manager-preview-width;
-        min-height: calc( #{$kendo-file-manager-preview-padding-y * 4} + #{$kendo-icon-size-xxxl} * 2 + #{$kendo-file-manager-preview-spacing * 3} );
+        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
         border-width: 0;
         border-left-width: $kendo-file-manager-preview-border-width;
         border-style: solid;

package/scss/filemanager/_variables.scss

@@ -2,19 +2,19 @@
 
 /// The space between the FileManager items.
 /// @group filemanager
-$kendo-file-manager-spacer: k-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;
 /// The font family of the FileManager.
 /// @group filemanager
-$kendo-file-manager-font-family: $kendo-font-family !default;
+$kendo-file-manager-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the FileManager.
 /// @group filemanager
-$kendo-file-manager-font-size: $kendo-font-size-md !default;
+$kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the FileManager.
 /// @group filemanager
-$kendo-file-manager-line-height: $kendo-line-height-md !default;
+$kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
 /// @group filemanager
 $kendo-file-manager-bg: $kendo-component-bg !default;
@@ -65,10 +65,10 @@ $kendo-file-manager-navigation-border: null !default;
 
 /// The horizontal padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-x: k-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: k-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: null !default;
 
 /// The horizontal padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-x: k-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: k-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: k-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: null !default;

package/scss/filter/_layout.scss

@@ -42,7 +42,7 @@
                 width: $kendo-filter-padding-x;
                 height: $kendo-filter-line-size;
                 inset-block-start: 50%;
-                inset-inline-start: -$kendo-filter-padding-x;
+                inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 );
             }
 
             .k-toolbar {
@@ -61,7 +61,7 @@
                 position: absolute;
                 width: $kendo-filter-line-size;
                 height: 100%;
-                inset-block-start: -$kendo-filter-padding-y;
+                inset-block-start: calc( #{$kendo-filter-padding-y} * -1 );
                 inset-inline-start: 0;
             }
         }
@@ -72,9 +72,9 @@
             content: "";
             position: absolute;
             width: $kendo-filter-line-size;
-            inset-block-start: calc(-#{$kendo-filter-padding-y} - #{$kendo-filter-line-size});
+            inset-block-start: calc( calc( #{$kendo-filter-padding-y} * -1 ) - #{$kendo-filter-line-size} );
             inset-block-end: 50%;
-            inset-inline-start: -$kendo-filter-padding-x;
+            inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 );
         }
 
         // The forth and fifth selectors targets the Angular rendering

package/scss/filter/_variables.scss

@@ -9,7 +9,7 @@ $kendo-filter-padding-y: $kendo-padding-md-y !default;
 
 /// The bottom margin of the Filter.
 /// @group filter
-$kendo-filter-bottom-margin: 30px !default;
+$kendo-filter-bottom-margin: k-spacing(7.5) !default;
 /// The width of the line that connects the Filter items.
 /// @group filter
 $kendo-filter-line-size: 1px !default;
@@ -27,4 +27,4 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;