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

package/scss/chip/_variables.scss

@@ -8,46 +8,46 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the Chip.
 /// @group chip
-$kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-spacing: k-spacing(1) !default;
 
 /// The horizontal padding of the Chip.
 /// @group chip
-$kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-md-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the large Chip.
 /// @group chip
-$kendo-chip-lg-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-lg-padding-x: k-spacing(1) !default;
 
 /// The vertical padding of the Chip.
 /// @group chip
-$kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-chip-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-md-padding-y: k-spacing(1) !default;
 /// The vertical padding of the large Chip.
 /// @group chip
-$kendo-chip-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-chip-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font size of the Chip.
 /// @group chip
-$kendo-chip-font-size: $kendo-font-size-md !default;
+$kendo-chip-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the small Chip.
 /// @group chip
-$kendo-chip-sm-font-size: $kendo-font-size-md !default;
+$kendo-chip-sm-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: $kendo-font-size-md !default;
+$kendo-chip-md-font-size: var( --kendo-font-size, inherit )  !default;
 /// The font size of the large Chip.
 /// @group chip
-$kendo-chip-lg-font-size: $kendo-font-size-md !default;
+$kendo-chip-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
@@ -64,8 +64,8 @@ $kendo-chip-lg-line-height: $kendo-chip-line-height !default;
 
 /// The calculated height of the Chip.
 /// @group chip
-$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
-$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + #{$kendo-chip-sm-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
+$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + calc( #{$kendo-chip-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) !default;
+$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) !default;
 
 /// The map with the sizes of the Chip.
 /// @group chip
@@ -173,7 +173,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the Chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: k-map-get( $kendo-spacing, 1 ),
-    md: k-map-get( $kendo-spacing, 1 ),
-    lg: k-map-get( $kendo-spacing, 1 )
+    sm: k-spacing(1),
+    md: k-spacing(1),
+    lg: k-spacing(1)
 ) !default;

package/scss/color-preview/_variables.scss

@@ -1,5 +1,5 @@
 // Color Preview
-$kendo-color-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 $kendo-color-preview-border-width: 1px !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;

package/scss/coloreditor/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The spacer of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-spacer: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-color-editor-spacer: k-spacing(3) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group coloreditor
@@ -12,16 +12,16 @@ $kendo-color-editor-min-width: 294px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: $kendo-border-radius-md !default;
+$kendo-color-editor-border-radius: k-border-radius(md) !default;
 /// The font family of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-font-family: $kendo-font-family !default;
+$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-font-size: $kendo-font-size-md !default;
+$kendo-color-editor-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-line-height: $kendo-line-height-md !default;
+$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-text: $kendo-component-text !default;
@@ -47,7 +47,7 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group coloreditor
-$kendo-color-editor-header-actions-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-header-actions-gap: k-spacing(2) !default;
 
 /// The width of the ColorEditor preview.
 /// @group coloreditor
@@ -57,7 +57,7 @@ $kendo-color-editor-color-preview-width: 32px !default;
 $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group coloreditor
-$kendo-color-editor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-editor-preview-gap: k-spacing(1) !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group coloreditor

package/scss/colorgradient/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-color-gradient-spacer: k-spacing(3) !default;
 
 /// The width of the ColorGradient.
 /// @group cologradient
@@ -14,7 +14,7 @@ $kendo-color-gradient-width: 294px !default;
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: $kendo-border-radius-md !default;
+$kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The vertical padding of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
@@ -26,13 +26,13 @@ $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
 $kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
 /// The font family of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-font-family: $kendo-font-family !default;
+$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-font-size: $kendo-font-size-md !default;
+$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-line-height: $kendo-line-height-md !default;
+$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-text: $kendo-component-text !default;
@@ -52,7 +52,7 @@ $kendo-color-gradient-focus-shadow: $box-shadow-depth-3 !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: $kendo-border-radius-md !default;
+$kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
 /// @group cologradient
 $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
@@ -126,17 +126,17 @@ $kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gra
 $kendo-color-gradient-input-width: 50px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group cologradient
-$kendo-color-gradient-input-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-color-gradient-input-gap: k-spacing(2) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group cologradient
-$kendo-color-gradient-input-label-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// The text color of the ColorGradient input labels.
 /// @group cologradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group cologradient
-$kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-medium !default;
+$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-medium, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-color-gradient-contrast-spacer: k-spacing(2) !default;

package/scss/colorpalette/_variables.scss

@@ -2,17 +2,17 @@
 
 /// The font family of the ColorPalette.
 /// @group colorpalette
-$kendo-color-palette-font-family: $kendo-font-family !default;
+$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorPalette.
 /// @group colorpalette
-$kendo-color-palette-font-size: $kendo-font-size-md !default;
+$kendo-color-palette-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorPalette.
 /// @group colorpalette
 $kendo-color-palette-line-height: 0 !default;
 
 /// The width of the ColorPalette tile.
 /// @group colorpalette
-$kendo-color-palette-tile-width: k-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

@@ -6,9 +6,18 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Elevation
 @import "./elevation/index.import.scss";
 
+// Typography
+@import "./typography/index.import.scss";
+
 // Variables
 @import "../_variables.scss";
 
+// Spacing
+@import "./spacing/index.import.scss";
+
+// Radii
+@import "./border-radii/index.import.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
 // Backward compatibility
@@ -20,4 +29,10 @@ $wcag-min-contrast-ratio: 4.5 !default;
 
     // Elevation System
     @include kendo-elevation--styles();
+    // Typography
+    @include kendo-core--typography--styles();
+    // Spacing
+    @include kendo-spacing--styles();
+    // Radii
+    @include kendo-border-radius--styles();
 }

package/scss/core/border-radii/index.import.scss

@@ -0,0 +1,13 @@
+$kendo-border-radius-lg: k-map-get($kendo-spacing, 2) !default;
+$kendo-border-radius-xl: k-map-get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: k-map-get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 5) !default;
+
+$kendo-border-radii: (
+    lg: $kendo-border-radius-lg,
+    xl: $kendo-border-radius-xl,
+    xxl: $kendo-border-radius-xxl,
+    xxxl: $kendo-border-radius-xxxl
+) !default;
+
+@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";

package/scss/core/spacing/index.import.scss

@@ -0,0 +1,14 @@
+@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+
+$kendo-icon-spacing: k-spacing(2) !default;
+$kendo-icon-padding: k-spacing(1) !default;
+
+// Metrics
+$kendo-padding-x: k-spacing(4) !default;
+$kendo-padding-y: k-spacing(1) !default;
+$kendo-padding-sm-x: k-spacing(2) !default;
+$kendo-padding-sm-y: k-spacing(0.5) !default;
+$kendo-padding-md-x: k-spacing(4) !default;
+$kendo-padding-md-y: k-spacing(1) !default;
+$kendo-padding-lg-x: k-spacing(6) !default;
+$kendo-padding-lg-y: k-spacing(1.5) !default;

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

@@ -0,0 +1,120 @@
+/// 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: k-math-div( 28, 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.2 !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: null !default;
+/// The tightest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tightest: -2.5px !default;
+/// Slightly looser than the tighter letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tighter: -1.5px !default;
+/// Moderately tight letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tight: -.5px !default;
+/// The normal letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-normal: 0px !default;
+/// Wide letter spacing across all components
+/// @group typography
+$kendo-letter-spacing-wide: .15px !default;
+/// Slightly wider than the wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wider: .25px !default;
+/// The widest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-widest: .35px !default;
+
+/// The sans-serif font family across all components.
+/// @group typography
+$kendo-font-family-sans-serif: Roboto, "Helvetica Neue", sans-serif !default;
+/// The monospace font family across all components.
+/// @group typography
+$kendo-font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", 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-letter-spacings: (
+    tightest: $kendo-letter-spacing-tightest,
+    tighter: $kendo-letter-spacing-tighter,
+    tight: $kendo-letter-spacing-tight,
+    normal: $kendo-letter-spacing-normal,
+    wide: $kendo-letter-spacing-wide,
+    wider: $kendo-letter-spacing-wider,
+    widest: $kendo-letter-spacing-widest
+) !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 letter spacings map
+/// @group typography
+$kendo-letter-spacings: $_default-letter-spacings !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( var( --kendo-font-size, inherit ) * .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, 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: k-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;
@@ -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
@@ -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-base-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

@@ -1,10 +1,10 @@
 // Drag hint
 $kendo-drag-hint-padding-x: $kendo-padding-md-x !default;
-$kendo-drag-hint-padding-y: k-math-div( $kendo-padding-md-x, 2 ) !default;
+$kendo-drag-hint-padding-y: calc( #{$kendo-padding-md-x} / 2 ) !default;
 $kendo-drag-hint-border-width: null !default;
 $kendo-drag-hint-border-radius: 9999px !default;
-$kendo-drag-hint-font-size: $kendo-font-size-md !default;
-$kendo-drag-hint-font-family: $kendo-font-family !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: k-math-div( 20, 14 ) !default;
 
 $kendo-drag-hint-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-body-bg )) !default;

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
@@ -50,7 +41,7 @@ $kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
 $kendo-drawer-item-padding-x: $kendo-padding-md-x !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-drawer-item-padding-y: k-spacing(3) !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: 16px !default;
@@ -67,10 +58,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, 1 ) !default;
+$kendo-drawer-icon-padding-y: k-spacing(1) !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,10 +15,10 @@ $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: k-math-div( 20, 14 ) !default;
@@ -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

@@ -10,13 +10,13 @@
         line-height: normal;
 
         .k-status {
-            line-height: $kendo-line-height-md;
+            line-height: var( --kendo-line-height, inherit);
         }
     }
 
     .k-editor-export {
         text-transform: uppercase;
-        font-size: $kendo-font-size-md;
+        font-size: var( --kendo-font-size, inherit );
 
         .k-icon {
             margin-left: $kendo-editor-export-tool-icon-margin-x;