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

package/scss/_variables.scss

@@ -14,46 +14,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
 
 $kendo-auto-bootstrap: true !default;
 
-
-// Spacing
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: 2px,
-    1: 4px,
-    1.5: 6px,
-    2: 8px,
-    2.5: 10px,
-    3: 12px,
-    3.5: 14px,
-    4: 16px,
-    4.5: 18px,
-    5: 20px,
-    5.5: 22px,
-    6: 24px,
-    6.5: 26px,
-    7: 28px,
-    7.5: 30px,
-    8: 32px,
-    9: 36px,
-    10: 40px,
-    11: 44px,
-    12: 48px,
-    13: 52px,
-    14: 56px,
-    15: 60px,
-    16: 64px,
-    17: 68px,
-    18: 72px,
-    19: 76px,
-    20: 80px,
-    21: 84px,
-    22: 88px,
-    23: 92px,
-    24: 96px
-) !default;
-
-
 /// Icon size.
 /// @group common
 $kendo-icon-size: 16px !default;
@@ -79,57 +39,6 @@ $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
 /// @group common
 $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
-
-/// Horizontal padding.
-/// @group common
-$kendo-padding-x: 8px !default;
-/// Vertical padding.
-/// @group common
-$kendo-padding-y: 4px !default;
-/// Small horizontal padding.
-/// @group common
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
-/// Small vertical padding.
-/// @group common
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-/// Medium horizontal padding.
-/// @group common
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// Medium vertical padding.
-/// @group common
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// Large horizontal padding.
-/// @group common
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
-/// Large vertical padding.
-/// @group common
-$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-
-/// Border radius for all components.
-/// @group common
-$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
-/// Small border radius.
-/// @group common
-$kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) !default;
-/// Medium border radius.
-/// @group common
-$kendo-border-radius-md: $kendo-border-radius !default;
-/// Large border radius.
-/// @group common
-$kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default;
-
-$kendo-border-radii: (
-    DEFAULT: $kendo-border-radius-md,
-    0: 0,
-    sm: $kendo-border-radius-sm,
-    md: $kendo-border-radius-md,
-    lg: $kendo-border-radius-lg,
-    full: 9999px
-) !default;
-
-
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
 $kendo-zindex-loading: 100 !default;
@@ -139,87 +48,6 @@ $kendo-zindex-loading: 100 !default;
 $kendo-is-dark-theme: false !default;
 
 
-
-
-// Typography
-
-/// Base font size across all components.
-/// @group typography
-$kendo-font-size: 14px !default;
-/// Extra small font size across all components.
-/// @group typography
-$kendo-font-size-xs: 10px !default;
-/// Small font size across all components.
-/// @group typography
-$kendo-font-size-sm: 12px !default;
-/// Medium font size across all components.
-/// @group typography
-$kendo-font-size-md: $kendo-font-size !default;
-/// Large font size across all components.
-/// @group typography
-$kendo-font-size-lg: 16px !default;
-/// Extra large font size across all components.
-/// @group typography
-$kendo-font-size-xl: 20px !default;
-
-$kendo-font-sizes: (
-    xs: $kendo-font-size-xs,
-    sm: $kendo-font-size-sm,
-    md: $kendo-font-size-md,
-    lg: $kendo-font-size-lg,
-    xl: $kendo-font-size-xl
-) !default;
-
-/// Font family for text.
-/// @group typography
-$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: inherit !default;
-
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: k-math-div( 20, 14 ) !default;
-/// Extra small line height used along with $kendo-font-size-xs.
-/// @group typography
-$kendo-line-height-xs: 1 !default;
-/// Small line height used along with $kendo-font-size-sm.
-/// @group typography
-$kendo-line-height-sm: 1.25 !default;
-/// Medium line height used along with $kendo-font-size-md.
-/// @group typography
-$kendo-line-height-md: $kendo-line-height !default;
-/// Large line height used along with $kendo-font-size-lg.
-/// @group typography
-$kendo-line-height-lg: 1.5 !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
-
-/// Light font weight.
-/// @group typography
-$kendo-font-weight-light: 300 !default;
-/// Normal font weight.
-/// @group typography
-$kendo-font-weight-normal: 400 !default;
-/// Medium font weight.
-/// @group typography
-$kendo-font-weight-medium: 500 !default;
-/// Semibold font weight.
-/// @group typography
-$kendo-font-weight-semibold: 600 !default;
-/// Bold font weight.
-/// @group typography
-$kendo-font-weight-bold: 700 !default;
-
-/// Letter spacing.
-/// @group typography
-$kendo-letter-spacing: null !default;
-
-
 // TODO: refactor
 /// Box shadow of focused items.
 $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/action-buttons/_variables.scss

@@ -1,9 +1,9 @@
 // Actions
-$kendo-actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-margin-top: k-spacing(4) !default;
+$kendo-actions-padding-x: k-spacing(2) !default;
+$kendo-actions-padding-y: k-spacing(2) !default;
 $kendo-actions-border-width: 0px !default;
-$kendo-actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-button-spacing: k-spacing(2) !default;
 
 $kendo-actions-bg: null !default;
 $kendo-actions-text: null !default;

package/scss/action-sheet/_layout.scss

@@ -253,7 +253,7 @@
         }
 
         .k-actionsheet-filter {
-            width: calc( min(100%, calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x * 2}) ) );
+            width: calc( min(100%, calc( 360px - calc( #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 )) ) );
         }
         .k-actionsheet-content,
         .k-actionsheet-footer {

package/scss/action-sheet/_variables.scss

@@ -10,9 +10,9 @@ $kendo-actionsheet-max-height: 60vh !default;
 $kendo-actionsheet-border-width: 0px !default;
 $kendo-actionsheet-border-radius: 0px !default;
 
-$kendo-actionsheet-font-size: $kendo-font-size-md !default;
-$kendo-actionsheet-font-family: $kendo-font-family !default;
-$kendo-actionsheet-line-height: $kendo-line-height-md !default;
+$kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-actionsheet-bg: $kendo-component-bg !default;
 $kendo-actionsheet-text: $kendo-component-text !default;
@@ -21,13 +21,13 @@ $kendo-actionsheet-shadow: k-elevation(7) !default;
 
 
 // Actionsheet header
-$kendo-actionsheet-titlebar-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-titlebar-padding-x: k-spacing(4) !default;
+$kendo-actionsheet-titlebar-padding-y: k-spacing(2) !default;
 $kendo-actionsheet-titlebar-border-width: null !default;
 $kendo-actionsheet-titlebar-font-size: null !default;
 $kendo-actionsheet-titlebar-font-family: null !default;
 $kendo-actionsheet-titlebar-line-height: null !default;
-$kendo-actionsheet-titlebar-gap: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-titlebar-gap: k-spacing(4) !default;
 
 $kendo-actionsheet-titlebar-bg: null !default;
 $kendo-actionsheet-titlebar-text: null !default;
@@ -35,17 +35,17 @@ $kendo-actionsheet-titlebar-border: null !default;
 $kendo-actionsheet-titlebar-gradient: null !default;
 $kendo-actionsheet-titlebar-shadow: null !default;
 
-$kendo-actionsheet-subtitle-font-size: $kendo-font-size-sm !default;
-$kendo-actionsheet-subtitle-line-height: $kendo-line-height-sm !default;
+$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
 $kendo-actionsheet-subtitle-text: $kendo-subtle-text !default;
 
 
 // Actionsheet item
 $kendo-actionsheet-item-min-height: 40px !default;
-$kendo-actionsheet-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-actionsheet-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-item-padding-x: k-spacing(4) !default;
+$kendo-actionsheet-item-padding-y: k-spacing(2) !default;
 $kendo-actionsheet-item-border-width: 1px !default;
-$kendo-actionsheet-item-spacing: 12px !default;
+$kendo-actionsheet-item-spacing: k-spacing(3) !default;
 
 $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
@@ -73,14 +73,14 @@ $kendo-actionsheet-item-disabled-shadow: null !default;
 
 
 // Adaptive Actionsheet
-$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
+$kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-adaptive-actionsheet-titlebar-border-width: 1px !default;
-$kendo-adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
 $kendo-adaptive-actionsheet-titlebar-border: $kendo-component-border !default;
 
-$kendo-adaptive-actionsheet-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-adaptive-actionsheet-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
+$kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
-$kendo-adaptive-actionsheet-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
+$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;

package/scss/adaptive/_layout.scss

@@ -348,7 +348,7 @@
     .k-pane-wrapper { // stylelint-disable-line
 
         .k-appbar {
-            padding: k-map-get( $kendo-spacing, 1 );
+            padding: k-spacing(1);
         }
 
         .k-list-title,
@@ -372,15 +372,15 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: k-map-get( $kendo-spacing, 4 );
+            margin-top: k-spacing(4);
         }
 
         // Column menu
         .k-column-menu {
-            padding: k-map-get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
@@ -392,16 +392,16 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{k-map-get( $kendo-spacing, 2 )};
+                margin-inline: calc( #{k-spacing(2)} * -1 );
             }
         }
 
         // Filter menu
         .k-filter-menu {
-            padding: k-map-get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-list-title {
                 padding: 0;
@@ -421,7 +421,7 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{k-map-get( $kendo-spacing, 2 )};
+                margin-inline: calc( #{k-spacing(2)} * -1 );
             }
         }
 

package/scss/adaptive/_variables.scss

@@ -15,9 +15,9 @@ $kendo-adaptive-menu-item-border: $kendo-component-border !default;
 $kendo-adaptive-menu-title-text: $kendo-component-text !default;
 
 $kendo-adaptive-border-width: 1px !default;
-$kendo-adaptive-font-family: $kendo-font-family !default;
-$kendo-adaptive-font-size: $kendo-font-size-md !default;
-$kendo-adaptive-line-height: $kendo-line-height-md !default;
+$kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-adaptive-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid

package/scss/appbar/_variables.scss

@@ -8,10 +8,10 @@ $kendo-appbar-margin-x: null !default;
 $kendo-appbar-margin-y: null !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-x: k-spacing(2) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-y: k-spacing(2) !default;
 /// The width of the border around the AppBar.
 /// @group appbar
 $kendo-appbar-border-width: 0px !default;
@@ -20,17 +20,17 @@ $kendo-appbar-border-width: 0px !default;
 $kendo-appbar-zindex: 1000 !default;
 /// The font family of the AppBar.
 /// @group appbar
-$kendo-appbar-font-family: $kendo-font-family !default;
+$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the AppBar.
 /// @group appbar
-$kendo-appbar-font-size: $kendo-font-size-md !default;
+$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the AppBar.
 /// @group appbar
-$kendo-appbar-line-height: $kendo-line-height-md !default;
+$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The spacing between the AppBar sections.
 /// @group appbar
-$kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-gap: k-spacing(2) !default;
 
 /// The background color of the AppBar based on light theme color.
 /// @group appbar

package/scss/avatar/_variables.scss

@@ -6,20 +6,20 @@ $kendo-avatar-border-width: 1px !default;
 
 /// The font family of the Avatar.
 /// @group avatar
-$kendo-avatar-font-family: $kendo-font-family !default;
+$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Avatar.
 /// @group avatar
-$kendo-avatar-font-size: $kendo-font-size-md !default;
+$kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Avatar.
 /// @group avatar
-$kendo-avatar-line-height: $kendo-line-height-md !default;
+$kendo-avatar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The sizes map of the Avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: k-map-get( $kendo-spacing, 4 ),
-    md: k-map-get( $kendo-spacing, 8 ),
-    lg: k-map-get( $kendo-spacing, 16 )
+    sm: k-spacing(4),
+    md: k-spacing(8),
+    lg: k-spacing(16)
 ) !default;
 
 /// The theme colors map of the Avatar.

package/scss/badge/_variables.scss

@@ -6,47 +6,47 @@ $kendo-badge-border-width: 1px !default;
 
 /// The border radius of the Badge.
 /// @group badge
-$kendo-badge-border-radius: $kendo-border-radius-md !default;
+$kendo-badge-border-radius: k-border-radius(md) !default;
 
 
 /// The horizontal padding of the Badge.
 /// @group badge
-$kendo-badge-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
 /// The horizontal padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-md-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-x: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-lg-padding-x: k-spacing(1.5) !default;
 
 /// The vertical padding of the Badge.
 /// @group badge
-$kendo-badge-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-badge-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-md-padding-y: k-spacing(1) !default;
 /// The vertical padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font sizes of the Badge.
 /// @group badge
-$kendo-badge-font-size: $kendo-font-size-xs !default;
+$kendo-badge-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The font size of the small Badge.
 /// @group badge
-$kendo-badge-sm-font-size: $kendo-font-size-xs !default;
+$kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The font size of the medium Badge.
 /// @group badge
-$kendo-badge-md-font-size: $kendo-font-size-xs !default;
+$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default;
 /// The font size of the large Badge.
 /// @group badge
-$kendo-badge-lg-font-size: $kendo-font-size-xs !default;
+$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
 /// The line heights used along with the $kendo-font-size variable.
 /// @group badge
@@ -63,16 +63,16 @@ $kendo-badge-lg-line-height: $kendo-badge-line-height !default;
 
 /// The calculated minimum width of the circular Badge.
 /// @group badge
-$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 )) !default;
 /// The calculated minimum width of the small circular Badge.
 /// @group badge
-$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
 /// The calculated minimum width of the medium circular Badge.
 /// @group badge
-$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
 /// The calculated minimum width of the large circular Badge.
 /// @group badge
-$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
 
 /// The sizes map for the Badge.
 /// @group badge

package/scss/bottom-navigation/_layout.scss

@@ -71,8 +71,8 @@
         }
 
         > .k-bottom-nav-link {
-            margin-block: (-$kendo-bottom-nav-item-padding-y);
-            margin-inline: (-$kendo-bottom-nav-item-padding-x);
+            margin-block: calc( #{$kendo-bottom-nav-item-padding-y} * -1 );
+            margin-inline: calc( #{$kendo-bottom-nav-item-padding-x} * -1 );
             padding-block: $kendo-bottom-nav-item-padding-y;
             padding-inline: $kendo-bottom-nav-item-padding-x;
             width: 100%;

package/scss/bottom-navigation/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-padding-x: k-spacing(1) !default;
 /// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
@@ -14,23 +14,23 @@ $kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
 $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
 /// The font family of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-family: $kendo-font-family !default;
+$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-size: $kendo-font-size-md !default;
+$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: normal !default;
+$kendo-bottom-nav-line-height: var( --kendo-line-height-sm, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
 /// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: 0 !default;
+$kendo-bottom-nav-item-padding-y: k-spacing(0) !default;
 /// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
@@ -39,13 +39,13 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: null !default;
 /// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-padding-md-x} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: $kendo-border-radius-md !default;
+$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-item-gap: 0 k-spacing(1) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation