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

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

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

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#3f51b5",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

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

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.10",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "8.0.0-dev.0",
+  "version": "8.0.0-dev.10",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,14 +53,14 @@
     "postpublish": "echo 'no postpublish for material theme'"
   },
   "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-svg-icons": "2.3.0",
+    "@progress/kendo-theme-core": "8.0.0-dev.10",
+    "@progress/kendo-theme-default": "8.0.0-dev.10",
+    "@progress/kendo-theme-utils": "8.0.0-dev.10"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "82fa9745206aad68ed9f5a6d8c11d84dbb70c20c"
+  "gitHead": "586e93eb20d6ddbc481401a9eda9ed878ef4c3a1"
 }

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;
-
-
 // Shadows
 
 /// Shadow for switch.
@@ -114,94 +74,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: 16px !default;
-$kendo-padding-y: 4px !default;
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 6 ) !default;
-$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-
-/// Border radius for all components.
-$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: $kendo-border-radius * 1.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;
 
-
-// Typography
-
-/// Base font size across all components.
-/// @group typography
-$kendo-font-size: 14px !default;
-$kendo-font-size-xs: 10px !default;
-$kendo-font-size-sm: 12px !default;
-$kendo-font-size-md: 14px !default;
-$kendo-font-size-lg: 16px !default;
-$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: Roboto, "Helvetica Neue", sans-serif !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: Roboto, "Helvetica Neue", sans-serif !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: Roboto, "Helvetica Neue", sans-serif !default;
-
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: k-math-div( 28, 14 ) !default;
-$kendo-line-height-xs: 1 !default;
-$kendo-line-height-sm: 1.2 !default;
-$kendo-line-height-md: $kendo-line-height !default;
-$kendo-line-height-lg: 1.5 !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
-
-// Font weight
-$kendo-font-weight-light: 300 !default;
-$kendo-font-weight-normal: 400 !default;
-$kendo-font-weight-medium: 500 !default;
-$kendo-font-weight-semibold: 600 !default;
-$kendo-font-weight-bold: 700 !default;
-
-// Letter Spacing
-$kendo-letter-spacing: null !default;
-
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
 
 // Disabled mixin variables

package/scss/action-buttons/_variables.scss

@@ -2,11 +2,11 @@
 
 
 // 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

@@ -10,8 +10,8 @@ $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-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-actionsheet-line-height: k-math-div( 20, 14 ) !default;
 
 $kendo-actionsheet-bg: $kendo-component-bg !default;
@@ -21,13 +21,13 @@ $kendo-actionsheet-shadow: $box-shadow-depth-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: $kendo-font-size-lg !default;
+$kendo-actionsheet-titlebar-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-actionsheet-titlebar-font-family: null !default;
 $kendo-actionsheet-titlebar-line-height: 1.25 !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;
@@ -78,14 +78,14 @@ $kendo-actionsheet-item-disabled-opacity: .42 !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

@@ -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 ) + #{$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 ) + #{$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 ) + #{$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 ) + #{$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} + #{$kendo-padding-sm-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-padding-sm-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: 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