@progress/kendo-theme-material 5.8.2-dev.4 → 5.8.2-dev.6

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

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.8.2-dev.4",
+  "version": "5.8.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,10 +44,11 @@
     "postpublish": "echo 'no postpublish for material theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.8.2-dev.4"
+    "@progress/kendo-theme-core": "^5.8.2-dev.6",
+    "@progress/kendo-theme-default": "^5.8.2-dev.6"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "03c192e0d4c7227c7d8f41b7fefee897888e6218"
+  "gitHead": "b1b2e33a3ce1b92bcefae87e8c46cbd797d814d1"
 }

package/scss/_variables.scss

@@ -82,7 +82,7 @@ $theme: material-theme(
 
 /// Color of shadows
 /// @group shadows
-$elevation: map-get( $theme, elevation ) !default;
+$elevation: k-map-get( $theme, elevation ) !default;
 /// Shadow for switch.
 /// Equivalent to material elevation 1.
 /// @group shadows
@@ -108,7 +108,7 @@ $box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rg
 // Icons
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
-$icon-spacing: map-get( $spacing, 2 ) !default;
+$icon-spacing: k-map-get( $spacing, 2 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL
@@ -119,14 +119,14 @@ $icon-font-url: null !default;
 // Metrics
 $padding-x: 16px !default;
 $padding-y: 4px !default;
-$padding-x-sm: $padding-x / 2 !default;
-$padding-y-sm: $padding-y / 2 !default;
+$padding-x-sm: k-math-div( $padding-x, 2 ) !default;
+$padding-y-sm: k-math-div( $padding-y, 2 ) !default;
 $padding-x-lg: $padding-x * 1.5 !default;
 $padding-y-lg: $padding-y * 1.5 !default;
 
 /// Border radius for all components.
-$kendo-border-radius: map-get( $spacing, 1 ) !default;
-$kendo-border-radius-sm: $kendo-border-radius / 2 !default;
+$kendo-border-radius: k-map-get( $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;
 
@@ -150,7 +150,7 @@ $zindex-window: 2 !default;
 
 
 // Color settings
-$dark-theme: map-get($theme, is-dark) !default;
+$dark-theme: k-map-get( $theme, is-dark ) !default;
 
 
 // Theme colors
@@ -198,29 +198,29 @@ $tertiary-contrast: material-color($tertiary-palette, main-contrast) !default;
 /// @group color-system
 /// @type Color
 $info: #0058e9 !default;
-$info-lighter: tint( $info, 2 ) !default;
-$info-darker: shade( $info, 2 ) !default;
+$info-lighter: k-color-tint( $info, 2 ) !default;
+$info-darker: k-color-shade( $info, 2 ) !default;
 
 /// The color for success messages and states.
 /// @group color-system
 /// @type Color
 $success: #37b400 !default;
-$success-lighter: tint( $success, 2 ) !default;
-$success-darker: shade( $success, 2 ) !default;
+$success-lighter: k-color-tint( $success, 2 ) !default;
+$success-darker: k-color-shade( $success, 2 ) !default;
 
 /// The color for warning messages and states.
 /// @group color-system
 /// @type Color
 $warning: #ffc000 !default;
-$warning-lighter: tint( $warning, 2 ) !default;
-$warning-darker: shade( $warning, 2 ) !default;
+$warning-lighter: k-color-tint( $warning, 2 ) !default;
+$warning-darker: k-color-shade( $warning, 2 ) !default;
 
 /// The color for error messages and states.
 /// @group color-system
 /// @type Color
 $error: #f31700 !default;
-$error-lighter: tint( $error, 2 ) !default;
-$error-darker: shade( $error, 2 ) !default;
+$error-lighter: k-color-tint( $error, 2 ) !default;
+$error-darker: k-color-shade( $error, 2 ) !default;
 
 /// The dark color of the theme.
 /// @group color-system
@@ -258,15 +258,15 @@ $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, ce
 
 
 // Root styles
-$body-bg: map-get($theme, body-bg) !default;
-$body-text: map-get($theme, body-text) !default;
+$body-bg: k-map-get( $theme, body-bg ) !default;
+$body-text: k-map-get( $theme, body-text ) !default;
 
-$subtle-text: map-get($theme, subtle-text) !default;
-$disabled-text: map-get($theme, disabled-text) !default;
+$subtle-text: k-map-get( $theme, subtle-text ) !default;
+$disabled-text: k-map-get( $theme, disabled-text ) !default;
 
 $app-bg: $body-bg !default;
 $app-text: $body-text !default;
-$app-border: map-get($theme, component-border) !default;
+$app-border: k-map-get( $theme, component-border ) !default;
 
 
 // Components
@@ -275,32 +275,32 @@ $app-border: map-get($theme, component-border) !default;
 /// Background color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
-$component-bg: map-get($theme, component-bg) !default;
+$component-bg: k-map-get( $theme, component-bg ) !default;
 /// Text color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
 /// @group component
-$component-text: map-get($theme, component-text) !default;
+$component-text: k-map-get( $theme, component-text ) !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
 /// @group component
-$component-border: map-get($theme, component-border) !default;
+$component-border: k-map-get( $theme, component-border ) !default;
 
 
 /// The background of the components' chrome area.
-$base-bg: map-get( $theme, base-bg ) !default;
+$base-bg: k-map-get( $theme, base-bg ) !default;
 /// The text color of the components' chrome area.
-$base-text: map-get($theme, component-text) !default;
+$base-text: k-map-get( $theme, component-text ) !default;
 /// The border of the components' chrome area.
-$base-border: rgba( if($theme-type == dark, white, black), .08 ) !default;
+$base-border: rgba( if( $theme-type == dark, white, black ), .08 ) !default;
 /// The gradient background of the components' chrome area.
 $base-gradient: null !default;
 
 /// The background of hovered items.
-$hovered-bg: map-get( $theme, hover-bg ) !default;
+$hovered-bg: k-map-get( $theme, hover-bg ) !default;
 /// The text color of hovered items.
 $hovered-text: $base-text !default;
 /// The border color of hovered items.
-$hovered-border: rgba( if($theme-type == dark, white, black), .15 ) !default;
+$hovered-border: rgba( if( $theme-type == dark, white, black ), .15 ) !default;
 /// The gradient background of hovered items.
 $hovered-gradient: null !default;
 
@@ -313,7 +313,7 @@ $selected-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: null !default;
 
-$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
+$selected-hover-bg: k-try-shade( $selected-bg, .5 ) !default;
 $selected-hover-text: $selected-text !default;
 $selected-hover-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
 $selected-hover-gradient: null !default;
@@ -389,7 +389,7 @@ $node-selected-gradient: null !default;
 // Placeholder
 $placeholder-line-width: 100% !default;
 $placeholder-line-height: 10px !default;
-$placeholder-bg: rgba(0, 0, 0, .1) !default;
+$placeholder-bg: rgba( black, .1 ) !default;
 
 
 // Loading
@@ -431,7 +431,7 @@ $drag-clue-font-size: $font-size !default;
 $drag-clue-font-family: $font-family !default;
 $drag-clue-line-height: ( 20 / 14 ) !default;
 
-$drag-clue-bg: try-shade( $body-bg ) !default;
+$drag-clue-bg: k-try-shade( $body-bg ) !default;
 $drag-clue-text: $body-text !default;
 $drag-clue-border: null !default;
 $drag-clue-gradient: null !default;

package/scss/action-buttons/_theme.scss

@@ -5,8 +5,8 @@
     .k-actions {
 
         .k-button-solid-base {
-            background-color: try-shade( $kendo-button-bg );
-            border-color: try-shade( $kendo-button-bg );
+            background-color: k-try-shade( $kendo-button-bg );
+            border-color: k-try-shade( $kendo-button-bg );
         }
 
     }

package/scss/action-buttons/_variables.scss

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

package/scss/action-sheet/_variables.scss

@@ -3,14 +3,15 @@ $actionsheet-padding-x: null !default;
 $actionsheet-padding-y: null !default;
 $actionsheet-width: 360px !default;
 $actionsheet-max-width: 100% !default;
-$actionsheet-max-height: 50vh !default;
+$actionsheet-height: 60vh !default;
+$actionsheet-max-height: 60vh !default;
 
 $actionsheet-border-width: 0px !default;
 $actionsheet-border-radius: 0px !default;
 
 $actionsheet-font-size: $font-size !default;
 $actionsheet-font-family: $font-family !default;
-$actionsheet-line-height: ( 20 / 14 ) !default;
+$actionsheet-line-height: k-math-div( 20, 14 ) !default;
 
 $actionsheet-bg: $component-bg !default;
 $actionsheet-text: $component-text !default;
@@ -19,24 +20,29 @@ $actionsheet-shadow: $box-shadow-depth-4 !default;
 
 
 // Actionsheet header
-$actionsheet-header-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-header-padding-y: map-get( $spacing, 2 ) !default;
-$actionsheet-header-border-width: null !default;
-$actionsheet-header-font-size: null !default;
-$actionsheet-header-font-family: null !default;
-$actionsheet-header-line-height: null !default;
+$actionsheet-titlebar-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-border-width: null !default;
+$actionsheet-titlebar-font-size: null !default;
+$actionsheet-titlebar-font-family: null !default;
+$actionsheet-titlebar-line-height: null !default;
+$actionsheet-titlebar-gap: k-map-get( $spacing, 4 ) !default;
 
-$actionsheet-header-bg: null !default;
-$actionsheet-header-text: null !default;
-$actionsheet-header-border: null !default;
-$actionsheet-header-gradient: null !default;
-$actionsheet-header-shadow: null !default;
+$actionsheet-titlebar-bg: null !default;
+$actionsheet-titlebar-text: null !default;
+$actionsheet-titlebar-border: null !default;
+$actionsheet-titlebar-gradient: null !default;
+$actionsheet-titlebar-shadow: null !default;
+
+$actionsheet-subtitle-font-size: $font-size-sm !default;
+$actionsheet-subtitle-line-height: $line-height-sm !default;
+$actionsheet-subtitle-text: $subtle-text !default;
 
 
 // Actionsheet item
 $actionsheet-item-min-height: 40px !default;
-$actionsheet-item-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-item-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-item-padding-y: k-map-get( $spacing, 2 ) !default;
 $actionsheet-item-border-width: 1px !default;
 $actionsheet-item-spacing: 12px !default;
 
@@ -66,7 +72,20 @@ $actionsheet-item-disabled-border: null !default;
 $actionsheet-item-disabled-gradient: null !default;
 $actionsheet-item-disabled-shadow: null !default;
 
-$actionsheet-item-hover-background: rgba(0, 0, 0, .04) !default;
-$actionsheet-item-focus-background: rgba(0, 0, 0, .12) !default;
+$actionsheet-item-hover-background: rgba( black, .04 ) !default;
+$actionsheet-item-focus-background: rgba( black, .12 ) !default;
 $actionsheet-item-focus-shadow: null !default;
 $actionsheet-item-disabled-opacity: .42 !default;
+
+
+// Adaptive Actionsheet
+$adaptive-actionsheet-titlebar-border-width: 1px !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
+$adaptive-actionsheet-titlebar-border: $component-border !default;
+
+$adaptive-actionsheet-content-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $spacing, 4 ) !default;
+
+$adaptive-actionsheet-footer-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $spacing, 4 ) !default;

package/scss/adaptive/_variables.scss

@@ -7,7 +7,7 @@ $adaptive-content-bg: $app-bg !default;
 $adaptive-content-text: $app-text !default;
 
 $adaptive-menu-bg: $primary !default;
-$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;
+$adaptive-menu-text: k-contrast-color( $adaptive-menu-bg ) !default;
 
 $adaptive-menu-clear-text: $primary !default;
 

package/scss/appbar/_variables.scss

@@ -1,8 +1,8 @@
 // Appbar
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 2 ) !default;
+$appbar-padding-y: k-map-get( $spacing, 2 ) !default;
+$appbar-padding-x: k-map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;
@@ -10,13 +10,13 @@ $appbar-zindex: 1000 !default;
 $appbar-font-size: $font-size !default;
 $appbar-line-height: $line-height !default;
 $appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
+$appbar-gap: k-map-get( $spacing, 2 ) !default;
 
 $appbar-light-bg: $light !default;
-$appbar-light-text: contrast-wcag( $light ) !default;
+$appbar-light-text: k-contrast-color( $light ) !default;
 
 $appbar-dark-bg: $dark !default;
-$appbar-dark-text: contrast-wcag( $dark ) !default;
+$appbar-dark-text: k-contrast-color( $dark ) !default;
 
-$appbar-box-shadow: 0px 2px 3px rgba(0, 0, 0, .24) !default;
-$appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
+$appbar-box-shadow: 0px 2px 3px rgba( black, .24 ) !default;
+$appbar-bottom-box-shadow: 0px -2px 3px rgba( black, .24 ) !default;

package/scss/avatar/_variables.scss

@@ -17,9 +17,9 @@ $kendo-avatar-line-height: $line-height !default;
 /// The sizes of the avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
+    sm: k-map-get( $spacing, 4 ),
+    md: k-map-get( $spacing, 8 ),
+    lg: k-map-get( $spacing, 16 )
 ) !default;
 
 /// Theme colors map of the avatar.

package/scss/badge/_variables.scss

@@ -11,17 +11,17 @@ $kendo-badge-border-radius: $kendo-border-radius-md !default;
 
 /// Horizontal padding of the badge.
 /// @group badge
-$kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x-md: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
-$kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
-$kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-badge-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin )  !default;
+$kendo-badge-padding-y-md: k-map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 /// Font sizes of the badge.
 /// @group badge

package/scss/bottom-navigation/_variables.scss

@@ -9,20 +9,20 @@ $bottom-nav-font-size: $font-size !default;
 $bottom-nav-line-height: normal !default;
 $bottom-nav-letter-spacing: .2px !default;
 
-$bottom-nav-item-padding-x: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-padding-x: k-map-get( $spacing, 2 ) !default;
 $bottom-nav-item-padding-y: 0 !default;
 $bottom-nav-item-min-width: 72px !default;
 $bottom-nav-item-max-width: null !default;
 $bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{$padding-x-sm * 2} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: null !default;
-$bottom-nav-item-gap: 0 map-get( $spacing, 1 ) !default;
+$bottom-nav-item-gap: 0 k-map-get( $spacing, 1 ) !default;
 
-$bottom-nav-item-icon-margin-y: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-icon-margin-y: k-map-get( $spacing, 2 ) !default;
 $bottom-nav-item-icon-margin-x: $bottom-nav-item-icon-margin-y !default;
-$bottom-nav-item-icon-size: map-get( $spacing, 6 ) !default;
+$bottom-nav-item-icon-size: k-map-get( $spacing, 6 ) !default;
 $bottom-nav-item-disabled-opacity: .5 !default;
 
-$bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
+$bottom-nav-shadow: 0px 0px 5px rgba( black, .12 ) !default;
 
 $bottom-nav-flat-bg: $component-bg !default;
 $bottom-nav-flat-text: $component-text !default;

package/scss/breadcrumb/_variables.scss

@@ -37,7 +37,7 @@ $breadcrumb-link-hovered-bg: $hovered-bg !default;
 $breadcrumb-link-hovered-text: null !default;
 $breadcrumb-link-hovered-border: null !default;
 
-$breadcrumb-link-focused-bg: map-get( $theme, focus-bg ) !default;
+$breadcrumb-link-focused-bg: k-map-get( $theme, focus-bg ) !default;
 $breadcrumb-link-focused-text: null !default;
 $breadcrumb-link-focused-border: null !default;
 $breadcrumb-link-focused-shadow: null !default;
@@ -50,9 +50,9 @@ $breadcrumb-root-link-hovered-bg: $hovered-bg !default;
 $breadcrumb-root-link-hovered-text: null !default;
 $breadcrumb-root-link-hovered-border: null !default;
 
-$breadcrumb-root-link-focused-bg: map-get( $theme, focus-bg ) !default;
+$breadcrumb-root-link-focused-bg: k-map-get( $theme, focus-bg ) !default;
 $breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-border: null !default;
 $breadcrumb-root-link-focused-shadow: null !default;
 
-$breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+$breadcrumb-focused-shadow: 0 0 2px 1px rgba( black, .06 ) !default;

package/scss/button/_theme.scss

@@ -6,7 +6,7 @@
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
-            color: if( $name == "base", $kendo-button-text, contrast-wcag( $color ) );
+            color: if( $name == "base", $kendo-button-text, k-contrast-color( $color ) );
             background-color: if( $name == "base", $kendo-button-bg, $color );
             border-color: if( $name == "base", $kendo-button-bg, $color );