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

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

@@ -0,0 +1,111 @@
+
+/// The base font size across all components.
+/// @group typography
+$kendo-font-size: $font-size-base !default;
+/// The extra small font size across all components.
+/// @group typography
+$kendo-font-size-xs: ( $kendo-font-size * .75 ) !default;
+/// The small font size across all components.
+/// @group typography
+$kendo-font-size-sm: $font-size-sm !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: $font-size-lg !default;
+/// The extra large font size across all components.
+/// @group typography
+$kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
+
+/// The base line height across all components.
+/// @group typography
+$kendo-line-height: $line-height-base !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: $line-height-sm !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: $line-height-lg !default;
+/// The base line height in ems across all components.
+/// @group typography
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
+
+/// The light font weight across all components.
+/// @group typography
+$kendo-font-weight-light: $font-weight-light !default;
+/// The base font weight across all components.
+/// @group typography
+$kendo-font-weight-normal: $font-weight-normal !default;
+/// The medium font weight across all components.
+/// @group typography
+$kendo-font-weight-medium: 500 !default; // TODO: use from bootstrap when we update
+/// The semibold font weight across all components.
+/// @group typography
+$kendo-font-weight-semibold: 600 !default; // TODO: use from bootstrap when we update
+/// The bold font weight across all components.
+/// @group typography
+$kendo-font-weight-bold: $font-weight-bold !default;
+
+/// The sans-serif font family across all components.
+/// @group typography
+$kendo-font-family-sans-serif: $font-family-sans-serif !default;
+/// The monospace font family across all components.
+/// @group typography
+$kendo-font-family-monospace: $font-family-monospace !default;
+/// The base font family across all components.
+/// @group typography
+$kendo-font-family: $kendo-font-family-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;
+
+$_default-font-weights: (
+    light: $kendo-font-weight-light,
+    normal: $kendo-font-weight-normal,
+    medium: $kendo-font-weight-medium,
+    semibold: $kendo-font-weight-semibold,
+    bold: $kendo-font-weight-bold
+) !default;
+
+$_default-font-families: (
+    sans-serif: $kendo-font-family-sans-serif,
+    monospace: $kendo-font-family-monospace
+) !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;
+
+/// The font weights map
+/// @group typography
+$kendo-font-weights: $_default-font-weights !default;
+
+/// The font families map
+/// @group typography
+$kendo-font-families: $_default-font-families !default;
+
+@import "@progress/kendo-theme-core/scss/typography/index.import.scss";
+

package/scss/dataviz/_variables.scss

@@ -86,17 +86,17 @@ $kendo-series-29: $kendo-series-e-darker !default;
 $kendo-series-30: $kendo-series-f-darker !default;
 
 $kendo-chart-border-width: 0px !default;
-$kendo-chart-font-family: $kendo-font-family !default;
-$kendo-chart-font-size: $kendo-font-size-md !default;
-$kendo-chart-line-height: $kendo-line-height-md !default;
+$kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chart-line-height: var( --kendo-line-height, normal )!default;
 $kendo-chart-sm-font-size: 11px !default;
 $kendo-chart-md-font-size: 12px !default;
 $kendo-chart-lg-font-size: 16px !default;
-$kendo-chart-tooltip-font-size: ($kendo-font-size-md * .929) !default;
+$kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
 $kendo-chart-label-font-size: .857em !default;
 $kendo-chart-title-font-size: 1.143em !default;
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
-$kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
+$kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
@@ -134,6 +134,6 @@ $kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, co
 
 
 // TreeMap
-$kendo-treemap-font-family: $kendo-font-family !default;
-$kendo-treemap-font-size: $kendo-font-size-md !default;
-$kendo-treemap-line-height: $kendo-line-height-md !default;
+$kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-treemap-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;

package/scss/datetimepicker/_variables.scss

@@ -1,2 +1,2 @@
 // DateTime
-$kendo-datetime-width: calc( #{$kendo-calendar-cell-size * 8} + #{$kendo-infinite-calendar-view-padding-x * 2}) !default;
+$kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;

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,27 +32,27 @@ $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
 $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
 /// The vertical padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-dock-manager-pane-content-padding-y: k-spacing(2) !default;
 
 /// 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: $kendo-dock-manager-pane-content-padding-y !default;
@@ -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: $kendo-component-bg !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: $btn-padding-x !default;
 $kendo-drag-hint-padding-y: $btn-padding-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-selected-bg !default;
 $kendo-drag-hint-text: $kendo-selected-text !default;

package/scss/drawer/_variables.scss

@@ -12,22 +12,23 @@ $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;
+$kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Drawer.
 /// @group drawer
-$kendo-drawer-font-size: $kendo-font-size-md !default;
+$kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Drawer.
 /// @group drawer
-$kendo-drawer-line-height: $kendo-line-height-md !default;
+$kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-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: $kendo-padding-md-y !default;
+$kendo-drawer-content-padding-y: null !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer
@@ -67,10 +68,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: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-drawer-icon-padding-y: k-spacing(2) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer

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-component-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, 8 )) !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-xs !default;
+$kendo-dropzone-note-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The spacing below the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-spacing: null !default;

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, 3 ) !default;
+$kendo-expander-spacing-y: k-spacing(3) !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, 6 ) !default;
+$kendo-expander-header-padding-x: k-spacing(6) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-header-padding-y: k-spacing(4) !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, 6 ) !default;
+$kendo-expander-content-padding-x: k-spacing(6) !default;
 /// The vertical padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-expander-content-padding-y: k-spacing(6) !default;

package/scss/fab/_variables.scss

@@ -5,63 +5,63 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: k-math-div( $kendo-border-radius, 2 ) !default;
+$kendo-fab-border-radius: calc( #{k-border-radius(md)} / 2 ) !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, 1 ) !default;
+$kendo-fab-icon-padding-x: k-spacing(1) !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;
@@ -73,14 +73,14 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-radius: 4px !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: 14px !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;

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

@@ -8,9 +8,9 @@
     .k-form,
     .k-form-inline {
         legend {
-            font-size: $kendo-font-size-md * 1.5;
+            font-size: calc( var( --kendo-font-size, .875rem ) * 1.5 );
             font-weight: normal;
-            line-height: $kendo-line-height-md;
+            line-height: var( --kendo-line-height, normal );
             text-transform: none;
         }
 
@@ -26,7 +26,7 @@
 
         .k-field-info {
             margin-block: 0;
-            margin-inline: k-math-div( $kendo-padding-md-x, 2 );
+            margin-inline: calc( #{$kendo-padding-md-x} / 2 );
         }
     }