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

package/lib/swatches/classic-green-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Green Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#131413",

package/lib/swatches/classic-green.json

@@ -3,7 +3,7 @@
     "name": "Classic Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f3f4f3",

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

@@ -3,7 +3,7 @@
     "name": "Classic Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#101010",

package/lib/swatches/classic-main.json

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

package/lib/swatches/classic-opal-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#1e242d",

package/lib/swatches/classic-opal.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#def4fd",

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#131314",

package/lib/swatches/classic-silver.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.8.2-dev.4",
+  "version": "5.8.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,10 +43,11 @@
     "postpublish": "echo 'no postpublish for classic 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

@@ -62,7 +62,7 @@ $default-scrollbar-width: 17px !default;
 // Icons
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
-$icon-spacing: map-get( $spacing, 1 ) !default;
+$icon-spacing: k-map-get( $spacing, 1 ) !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
@@ -73,14 +73,14 @@ $icon-font-url: null !default;
 // Metrics
 $padding-x: 8px !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 * 2 !default;
 
@@ -88,13 +88,13 @@ $panel-padding-x: $padding-x !default;
 $panel-padding-y: $padding-y !default;
 
 $nav-item-margin: 0px !default;
-$nav-item-padding-x: map-get( $spacing, 2 ) !default;
-$nav-item-padding-y: map-get( $spacing, 1 ) !default;
+$nav-item-padding-x: k-map-get( $spacing, 2 ) !default;
+$nav-item-padding-y: k-map-get( $spacing, 1 ) !default;
 
-$table-cell-padding-x: map-get( $spacing, 2 ) !default;
-$table-cell-padding-y: map-get( $spacing, 2 ) !default;
-$header-cell-padding-x: map-get( $spacing, 3 ) !default;
-$header-cell-padding-y: map-get( $spacing, 2 ) !default;
+$table-cell-padding-x: k-map-get( $spacing, 2 ) !default;
+$table-cell-padding-y: k-map-get( $spacing, 2 ) !default;
+$header-cell-padding-x: k-map-get( $spacing, 3 ) !default;
+$header-cell-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $zindex-popup: 1 !default;
 $zindex-window: 2 !default;
@@ -113,8 +113,8 @@ $black: #000000 !default;
 /// @group color-system
 /// @type Color
 $primary: #f35800 !default;
-$primary-lighter: tint($primary, 2) !default;
-$primary-darker: shade($primary, 2) !default;
+$primary-lighter: k-color-tint( $primary, 2 ) !default;
+$primary-darker: k-color-shade( $primary, 2 ) !default;
 
 /// The color used along with the primary color denoted by $primary.
 /// Used to provide contrast between the background and foreground colors.
@@ -126,55 +126,55 @@ $primary-contrast: contrast-wcag( $primary ) !default;
 /// @group color-system
 /// @type Color
 $secondary: #e9e9e9 !default;
-$secondary-lighter: tint($secondary, 2) !default;
-$secondary-darker: shade($secondary, 2) !default;
+$secondary-lighter: k-color-tint( $secondary, 2 ) !default;
+$secondary-darker: k-color-shade( $secondary, 2 ) !default;
 
 /// The color used along with the secondary color denoted by $secondary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$secondary-contrast: contrast-wcag( $secondary ) !default;
+$secondary-contrast: k-contrast-color( $secondary ) !default;
 
 /// The tertiary color of the theme.
 /// @group color-system
 /// @type Color
 $tertiary: #03a9f4 !default;
-$tertiary-lighter: tint( $tertiary, 2 ) !default;
-$tertiary-darker: shade( $tertiary, 2 ) !default;
+$tertiary-lighter: k-color-tint( $tertiary, 2 ) !default;
+$tertiary-darker: k-color-shade( $tertiary, 2 ) !default;
 
 /// The color used along with the tertiary color denoted by $tertiary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$tertiary-contrast: contrast-wcag( $tertiary ) !default;
+$tertiary-contrast: k-contrast-color( $tertiary ) !default;
 
 /// The color for informational messages and states.
 /// @group color-system
 /// @type Color
 $info: #2498bc !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: #3ea44e !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: #ff9800 !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: #d92800 !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
@@ -214,10 +214,10 @@ $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, ce
 // Color constants
 $rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line
 
-$gradient-transparent-to-black: rgba( black, 0), black; // stylelint-disable-line
-$gradient-transparent-to-white: rgba( white, 0), white; // stylelint-disable-line
-$gradient-black-to-transparent: black, rgba( black, 0); // stylelint-disable-line
-$gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-line
+$gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line
+$gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line
+$gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line
+$gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line
 
 $gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line
 
@@ -231,7 +231,7 @@ $disabled-text: #8d8d8d !default;
 
 $app-bg: $body-bg !default;
 $app-text: $body-text !default;
-$app-border: try-shade( $app-bg, 2 ) !default;
+$app-border: k-try-shade( $app-bg, 2 ) !default;
 
 
 // Components
@@ -241,7 +241,7 @@ $base-bg: #f0f0f0 !default;
 /// The text color of the components' chrome area.
 $base-text: $body-text !default;
 /// The border color of the components' chrome area.
-$base-border: try-shade( $base-bg, 2 ) !default;
+$base-border: k-try-shade( $base-bg, 2 ) !default;
 /// The gradient background of the components' chrome area.
 $base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
 
@@ -259,11 +259,11 @@ $component-text: $body-text !default;
 $component-border: $base-border !default;
 
 /// The background of hovered items.
-$hovered-bg: try-shade( $base-bg, 1 ) !default;
+$hovered-bg: k-try-shade( $base-bg, 1 ) !default;
 /// The text color of hovered items.
 $hovered-text: $base-text !default;
 /// The border color of hovered items.
-$hovered-border: try-shade( $hovered-bg, 2 ) !default;
+$hovered-border: k-try-shade( $hovered-bg, 2 ) !default;
 /// The gradient background of hovered items.
 $hovered-gradient: $base-gradient !default;
 
@@ -272,17 +272,17 @@ $selected-bg: $primary !default;
 /// The text color of selected items.
 $selected-text: contrast-wcag( $selected-bg ) !default;
 /// The border color of selected items.
-$selected-border: try-shade( $selected-bg, 2 ) !default;
+$selected-border: k-try-shade( $selected-bg, 2 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: $base-gradient !default;
 
-$selected-hover-bg: try-shade( $selected-bg, 1 ) !default;
+$selected-hover-bg: k-try-shade( $selected-bg, 1 ) !default;
 $selected-hover-text: contrast-wcag( $selected-hover-bg ) !default;
 $selected-hover-border: $selected-border !default;
 $selected-hover-gradient: $selected-gradient !default;
 
-$focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
-$primary-focused-shadow: inset 0 0 0 2px rgba($primary, .3) !default;
+$focused-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+$primary-focused-shadow: inset 0 0 0 2px rgba( $primary, .3 ) !default;
 
 $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;
 
@@ -297,7 +297,7 @@ $disabled-opacity: .6 !default;
 // TODO: refactor once we extract drag drop as separate module
 $font-size: 14px !default;
 $font-family: inherit !default;
-$line-height: ( 20 / 14 ) !default;
+$line-height: k-math-div( 20, 14 ) !default;
 
 
 // Drop Hint
@@ -305,7 +305,7 @@ $equilateral-index: 1.7320508076 !default;
 $equilateral-height: .8660254038 !default;
 
 $drop-hint-arrow-size: 8px !default;
-$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
+$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
 $drop-hint-line-h-width: 20px !default;
 $drop-hint-line-h-height: 1px !default;
 $drop-hint-line-v-width: $drop-hint-line-h-height !default;
@@ -364,7 +364,7 @@ $zindex-loading: 100 !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;
 
 
 // Table

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,7 +3,8 @@ $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;
@@ -15,28 +16,33 @@ $actionsheet-line-height: $line-height !default;
 $actionsheet-bg: $component-bg !default;
 $actionsheet-text: $component-text !default;
 $actionsheet-border: $component-border !default;
-$actionsheet-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) !default;
+$actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( black, .14 ), 0 6px 30px 5px rgba( black, .12 ) !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;
 
@@ -65,3 +71,16 @@ $actionsheet-item-disabled-text: null !default;
 $actionsheet-item-disabled-border: null !default;
 $actionsheet-item-disabled-gradient: null !default;
 $actionsheet-item-disabled-shadow: null !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/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 1px 1px rgba(0, 0, 0, .16) !default;
-$appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
+$appbar-box-shadow: 0px 1px 1px rgba( black, .16 ) !default;
+$appbar-bottom-box-shadow: 0px -1px 1px rgba( black, .16 ) !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

@@ -10,17 +10,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

@@ -1,5 +1,5 @@
 // Bottom-navigation
-$bottom-nav-padding-x: map-get( $spacing, 1 ) !default;
+$bottom-nav-padding-x: k-map-get( $spacing, 1 ) !default;
 $bottom-nav-padding-y: $bottom-nav-padding-x !default;
 $bottom-nav-gap: $bottom-nav-padding-x !default;
 $bottom-nav-border-width: 1px 0px 0px 0px !default;
@@ -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 * 2} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: $kendo-border-radius-md !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

@@ -55,4 +55,4 @@ $breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-border: null !default;
 $breadcrumb-root-link-focused-shadow: $breadcrumb-link-focused-shadow !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/_variables.scss

@@ -10,10 +10,10 @@ $kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x: k-map-get( $spacing, 2 ) !default;
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y: k-map-get( $spacing, 1 ) !default;
 /// Font family of the button.
 /// @group button
 $kendo-button-font-family: $font-family !default;
@@ -24,18 +24,18 @@ $kendo-button-font-size: $font-size-md !default;
 /// @group button
 $kendo-button-line-height: $line-height-md !default;
 
-$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-x-sm: k-map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin ) !default;
 $kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: $line-height-md !default;
 
-$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-x-md: k-map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-md: k-map-get( $spacing, 1 ) !default;
 $kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
 
-$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: k-map-get( $spacing, 3 ) !default;
+$kendo-button-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 $kendo-button-font-size-lg: $font-size-lg !default;
 $kendo-button-line-height-lg: $line-height-lg !default;
 
@@ -70,7 +70,7 @@ $kendo-button-sizes: (
 
 /// Theme colors map for the button.
 /// @group button
-$kendo-button-theme-colors: map-merge(
+$kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
@@ -83,7 +83,7 @@ $kendo-button-bg: $base-bg !default;
 $kendo-button-text: $base-text !default;
 /// The base border color of the button.
 /// @group button
-$kendo-button-border: try-shade( $kendo-button-bg, 2 ) !default;
+$kendo-button-border: k-try-shade( $kendo-button-bg, 2 ) !default;
 /// The base background gradient of the button.
 /// @group button
 $kendo-button-gradient: $base-gradient !default;
@@ -93,13 +93,13 @@ $kendo-button-shadow: null !default;
 
 /// The base background of hovered button.
 /// @group button
-$kendo-button-hover-bg: try-shade( $kendo-button-bg, 1 ) !default;
+$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, 1 ) !default;
 /// The base text color of hovered button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of hovered button.
 /// @group button
-$kendo-button-hover-border: try-shade( $kendo-button-bg, 3 ) !default;
+$kendo-button-hover-border: k-try-shade( $kendo-button-bg, 3 ) !default;
 /// The base background gradient of hovered button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -109,13 +109,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of active button.
 /// @group button
-$kendo-button-active-bg: try-shade( $kendo-button-bg, 2 ) !default;
+$kendo-button-active-bg: k-try-shade( $kendo-button-bg, 2 ) !default;
 /// The base text color of active button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of active button.
 /// @group button
-$kendo-button-active-border: try-shade( $kendo-button-bg, 4 ) !default;
+$kendo-button-active-border: k-try-shade( $kendo-button-bg, 4 ) !default;
 /// The base background gradient of active button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -173,7 +173,7 @@ $kendo-button-disabled-shadow: null !default;
 
 // Solid button
 $kendo-solid-button-gradient: $base-gradient !default;
-$kendo-solid-button-shade-function: "try-shade" !default;
+$kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 2 !default;