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

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

package/lib/swatches/bootstrap-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "8.0.0-dev.0",
+  "version": "8.0.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,14 +53,14 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "8.0.0-dev.0",
-    "@progress/kendo-theme-default": "8.0.0-dev.0",
-    "@progress/kendo-theme-utils": "8.0.0-dev.0",
+    "@progress/kendo-theme-core": "8.0.0-dev.2",
+    "@progress/kendo-theme-default": "8.0.0-dev.2",
+    "@progress/kendo-theme-utils": "8.0.0-dev.2",
     "bootstrap": "5.2.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "82fa9745206aad68ed9f5a6d8c11d84dbb70c20c"
+  "gitHead": "6d8ad8ad9108d3a9ec0aaadd488571a639a412a5"
 }

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: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem
-) !default;
-
-
 // Icons
 $kendo-icon-size: 16px !default;
 
@@ -65,91 +25,10 @@ $kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
 $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
 $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-$kendo-icon-spacing: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
-
-// Metrics
-$kendo-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 6 ) !default;
-$kendo-padding-lg-y: k-map-get( $kendo-spacing, 3 ) !default;
-
-/// Border radius for all components.
-$kendo-border-radius: $border-radius !default;
-$kendo-border-radius-sm: $border-radius-sm !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: $border-radius-lg !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;
 
-
-// Typography
-
-/// Base font size across all components.
-/// @group typography
-$kendo-font-size: $font-size-base !default;
-$kendo-font-size-xs: ( $kendo-font-size * .75 ) !default;
-$kendo-font-size-sm: $font-size-sm !default;
-$kendo-font-size-md: $kendo-font-size !default;
-$kendo-font-size-lg: $font-size-lg !default;
-$kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !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: $font-family-sans-serif !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: $font-family-monospace !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: $kendo-font-family-sans-serif !default;
-
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: $line-height-base !default;
-$kendo-line-height-xs: 1 !default;
-$kendo-line-height-sm: $line-height-sm !default;
-$kendo-line-height-md: $kendo-line-height !default;
-$kendo-line-height-lg: $line-height-lg !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
-
-// Font weight
-$kendo-font-weight-light: $font-weight-light !default;
-$kendo-font-weight-normal: $font-weight-normal !default;
-$kendo-font-weight-medium: 500 !default; // TODO: use from bootstrap when we update
-$kendo-font-weight-semibold: 600 !default; // TODO: use from bootstrap when we update
-$kendo-font-weight-bold: $font-weight-bold !default;
-
-// Letter Spacing
-$kendo-letter-spacing: null !default;
-
-
 // TODO: refactor
 $kendo-focus-shadow: null !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/_variables.scss

@@ -9,9 +9,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;
@@ -20,13 +20,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;
@@ -34,17 +34,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;
@@ -72,14 +72,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/_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
 $kendo-adaptive-grid-sort-text: $kendo-color-primary !default;

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

@@ -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/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: 0px !default;
+$kendo-bottom-nav-padding-x: k-spacing(0) !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} + #{k-map-get( $kendo-spacing, 4 )} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{k-spacing(4)} - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: null !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

package/scss/breadcrumb/_variables.scss

@@ -20,24 +20,24 @@ $kendo-breadcrumb-padding-y: null !default;
 
 /// The font family of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-family: $kendo-font-family !default;
+$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-sm !default;
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
 /// The font size of the large Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The line-height of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
 /// The line-height of the small Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-sm-line-height: k-math-div( 20, 14 ) !default;
@@ -46,7 +46,7 @@ $kendo-breadcrumb-sm-line-height: k-math-div( 20, 14 ) !default;
 $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
 /// The line-height of the height Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
@@ -64,46 +64,46 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
 
 /// The horizontal padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-link-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(3) !default;
 
 /// The vertical padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(2.5) !default;
 
 /// The border-radius of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
+$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The vertical padding of the Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-icon-link-padding-y: k-spacing(3) !default;
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
 $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3.5) !default;
 
 /// The horizontal padding of the Breadcrumb link icon.
 /// @group breadcrumb