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

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, 4 ) !default;
+$kendo-button-padding-x: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y: k-map-get( $spacing, 2 ) !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: ( 20 / 14 ) !default;
 
-$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
 $kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: ( 20 / 14 ) !default;
 
-$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-md: k-map-get( $spacing, 2 ) !default;
 $kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: ( 20 / 14 ) !default;
 
-$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-button-padding-x-lg: k-map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 $kendo-button-font-size-lg: $font-size-md !default;
 $kendo-button-line-height-lg: ( 20 / 14 ) !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;
@@ -157,7 +157,7 @@ $kendo-button-focus-shadow: null !default;
 
 /// The base background color of disabled button.
 /// @group button
-$kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
+$kendo-button-disabled-bg: k-try-shade( $body-bg, 12% ) !default;
 /// The base text color of disabled button.
 /// @group button
 $kendo-button-disabled-text: $disabled-text !default;
@@ -173,7 +173,7 @@ $kendo-button-disabled-shadow: none !default;
 
 // Solid button
 $kendo-solid-button-gradient: null !default;
-$kendo-solid-button-shade-function: "try-shade" !default;
+$kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: null !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 0 !default;

package/scss/calendar/_theme.scss

@@ -14,7 +14,7 @@
         .k-selected.k-focus .k-link {
             @include fill(
                 $calendar-cell-selected-text,
-                try-tint($calendar-cell-selected-bg),
+                k-try-tint($calendar-cell-selected-bg),
                 $calendar-cell-selected-border
             );
         }

package/scss/calendar/_variables.scss

@@ -10,8 +10,8 @@ $calendar-bg: $component-bg !default;
 $calendar-text: $component-text !default;
 $calendar-border: $component-border !default;
 
-$calendar-header-padding-x: map-get( $spacing, 1 ) !default;
-$calendar-header-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-header-padding-x: k-map-get( $spacing, 1 ) !default;
+$calendar-header-padding-y: k-map-get( $spacing, 1 ) !default;
 $calendar-header-border-width: 0px !default;
 
 $calendar-header-bg: null !default;
@@ -20,13 +20,13 @@ $calendar-header-border: $header-border !default;
 $calendar-header-gradient: null !default;
 $calendar-header-shadow: null !default;
 
-$calendar-nav-gap: map-get( $spacing, 1 ) !default;
+$calendar-nav-gap: k-map-get( $spacing, 1 ) !default;
 
 $calendar-today-nav-text: $link-text !default;
 $calendar-today-nav-hover-text: $link-hover-text !default;
 
-$calendar-footer-padding-x: map-get( $spacing, 4 ) !default;
-$calendar-footer-padding-y: map-get( $spacing, 2 ) !default;
+$calendar-footer-padding-x: k-map-get( $spacing, 4 ) !default;
+$calendar-footer-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $calendar-cell-padding-x: .25em !default;
 $calendar-cell-padding-y: $calendar-cell-padding-x !default;
@@ -43,8 +43,8 @@ $calendar-header-cell-bg: null !default;
 $calendar-header-cell-text: $subtle-text !default;
 $calendar-header-cell-opacity: null !default;
 
-$calendar-caption-padding-x: map-get( $spacing, 4 ) !default;
-$calendar-caption-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-caption-padding-x: k-map-get( $spacing, 4 ) !default;
+$calendar-caption-padding-y: k-map-get( $spacing, 1 ) !default;
 $calendar-caption-height: $calendar-cell-size !default;
 $calendar-caption-font-size: null !default;
 $calendar-caption-line-height: null !default;
@@ -52,7 +52,7 @@ $calendar-caption-font-weight: bold !default;
 
 $calendar-view-width: ($calendar-cell-size * 7) !default;
 $calendar-view-height: ($calendar-cell-size * 7) !default;
-$calendar-view-gap: map-get( $spacing, 4 ) !default;
+$calendar-view-gap: k-map-get( $spacing, 4 ) !default;
 
 $calendar-weekend-bg: null !default;
 $calendar-weekend-text: null !default;
@@ -77,11 +77,11 @@ $calendar-cell-hover-border: $hovered-border !default;
 $calendar-cell-hover-gradient: null !default;
 
 $calendar-cell-selected-bg: $primary !default;
-$calendar-cell-selected-text: contrast-wcag( $calendar-cell-selected-bg ) !default;
+$calendar-cell-selected-text: k-contrast-color( $calendar-cell-selected-bg ) !default;
 $calendar-cell-selected-border: $calendar-cell-selected-bg !default;
 $calendar-cell-selected-gradient: null !default;
 
-$calendar-cell-selected-hover-bg: try-shade( $calendar-cell-selected-bg, .5 ) !default;
+$calendar-cell-selected-hover-bg: k-try-shade( $calendar-cell-selected-bg, .5 ) !default;
 $calendar-cell-selected-hover-text: $calendar-cell-selected-text !default;
 $calendar-cell-selected-hover-border: null !default;
 $calendar-cell-selected-hover-gradient: null !default;
@@ -94,16 +94,16 @@ $calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
 $calendar-navigation-width: 5em !default;
 $calendar-navigation-item-height: 2em !default;
 
-$calendar-navigation-bg: true-mix( $calendar-text, $calendar-bg, 3) !default;
+$calendar-navigation-bg: k-true-mix( $calendar-text, $calendar-bg, 3) !default;
 $calendar-navigation-text: $calendar-text !default;
 $calendar-navigation-border: $calendar-border !default;
 
 
 // Infinite calendar
-$infinite-calendar-header-padding-x: map-get( $spacing, 4 ) !default;
-$infinite-calendar-header-padding-y: map-get( $spacing, 2 ) !default;
+$infinite-calendar-header-padding-x: k-map-get( $spacing, 4 ) !default;
+$infinite-calendar-header-padding-y: k-map-get( $spacing, 2 ) !default;
 
-$infinite-calendar-view-padding-x: map-get( $spacing, 4 ) !default;
+$infinite-calendar-view-padding-x: k-map-get( $spacing, 4 ) !default;
 $infinite-calendar-view-padding-y: 0px !default;
 $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
@@ -121,14 +121,14 @@ $kendo-calendar-sm-cell-padding-y: .125rem !default;
 $kendo-calendar-md-font-size: $font-size-md !default;
 $kendo-calendar-md-line-height: $line-height-md !default;
 $kendo-calendar-md-cell-size: 36px !default;
-$kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-map-get( $spacing, 1 ) !default;
 
 $kendo-calendar-lg-font-size: $font-size-lg !default;
 $kendo-calendar-lg-line-height: $line-height-lg !default;
 $kendo-calendar-lg-cell-size: 40px !default;
-$kendo-calendar-lg-cell-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-calendar-lg-cell-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-map-get( $spacing, 1 ) !default;
 
 $kendo-calendar-sizes: (
     sm: (

package/scss/captcha/_variables.scss

@@ -1,5 +1,5 @@
 // Captcha
-$captcha-spacer: map-get( $spacing, 2 ) !default;
+$captcha-spacer: k-map-get( $spacing, 2 ) !default;
 
 $captcha-width: 335px !default;
 $captcha-font-family: $font-family !default;

package/scss/card/_variables.scss

@@ -1,14 +1,14 @@
 // Card
-$card-padding-x: map-get( $spacing, lg ) !default;
-$card-padding-y: map-get( $spacing, md ) !default;
+$card-padding-x: k-map-get( $spacing, lg ) !default;
+$card-padding-y: k-map-get( $spacing, md ) !default;
 $card-border-width: 0px !default;
 $card-border-radius: $kendo-border-radius-md !default;
 $card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
 $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
-$card-line-height: (20 / 14) !default;
+$card-line-height: k-math-div( 20, 14 ) !default;
 
-$card-deck-gap: map-get( $spacing, lg ) !default;
+$card-deck-gap: k-map-get( $spacing, lg ) !default;
 
 $card-bg: $component-bg !default;
 $card-text: $component-text !default;
@@ -27,8 +27,8 @@ $card-header-bg: null !default;
 $card-header-text: null !default;
 $card-header-border: $card-border !default;
 
-$card-body-padding-x: map-get( $spacing, lg ) !default;
-$card-body-padding-y: map-get( $spacing, lg ) !default;
+$card-body-padding-x: k-map-get( $spacing, lg ) !default;
+$card-body-padding-y: k-map-get( $spacing, lg ) !default;
 
 $card-footer-padding-x: $card-padding-x !default;
 $card-footer-padding-y: $card-padding-y !default;
@@ -56,10 +56,10 @@ $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
 $card-avatar-spacing: $card-header-padding-x !default;
 
-$card-actions-padding-x: map-get( $spacing, 2 ) !default;
-$card-actions-padding-y: map-get( $spacing, 2 ) !default;
+$card-actions-padding-x: k-map-get( $spacing, 2 ) !default;
+$card-actions-padding-y: k-map-get( $spacing, 2 ) !default;
 $card-actions-border-width: 1px !default;
-$card-actions-gap: map-get( $spacing, 2 ) !default;
+$card-actions-gap: k-map-get( $spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 50% !default;
 $card-deck-scroll-button-offset: ( $card-deck-gap / 2 ) !default;

package/scss/chat/_variables.scss

@@ -35,7 +35,7 @@ $chat-avatar-spacing: $chat-item-spacing-x !default;
 $chat-toolbar-padding-x: $toolbar-padding-x !default;
 $chat-toolbar-padding-y: $toolbar-padding-y !default;
 $chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$chat-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
@@ -52,12 +52,12 @@ $chat-border: $component-border !default;
 $chat-bubble-bg: $component-bg !default;
 $chat-bubble-text: $component-text !default;
 $chat-bubble-border: $chat-bubble-bg !default;
-$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default;
-$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default;
-$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default;
+$chat-bubble-shadow: 0 1px 2px rgba( black, .08 ) !default;
+$chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
+$chat-bubble-selected-shadow: 0 3px 10px rgba( black, .16 ) !default;
 
 $chat-alt-bubble-bg: $primary !default;
-$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default;
+$chat-alt-bubble-text: k-contrast-color( $chat-alt-bubble-bg ) !default;
 $chat-alt-bubble-border: $chat-alt-bubble-bg !default;
 $chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;

package/scss/checkbox/_variables.scss

@@ -7,19 +7,19 @@ $kendo-checkbox-border-width: 2px !default;
 // Checkbox sizes
 $kendo-checkbox-sizes: (
     sm: (
-        size: map-get( $spacing, 3 ),
-        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 3 ) * 3
+        size: k-map-get( $spacing, 3 ),
+        glyph-size: ( k-map-get( $spacing, 3 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 3 ) * 3
     ),
     md: (
-        size: map-get( $spacing, 4 ),
-        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 4 ) * 3
+        size: k-map-get( $spacing, 4 ),
+        glyph-size: ( k-map-get( $spacing, 4 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 4 ) * 3
     ),
     lg: (
-        size: map-get( $spacing, 5 ),
-        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 5 ) * 3
+        size: k-map-get( $spacing, 5 ),
+        glyph-size: ( k-map-get( $spacing, 5 ) - k-map-get( $spacing, thin ) ),
+        ripple-size: k-map-get( $spacing, 5 ) * 3
     )
 ) !default;
 
@@ -48,7 +48,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -84,7 +84,7 @@ $kendo-checkbox-disabled-bg: null !default;
 $kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
+$kendo-checkbox-disabled-border: k-try-shade( $component-bg, 4 ) !default;
 
 
 /// Background color of disabled and checked checkbox.
@@ -92,7 +92,7 @@ $kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: contrast-wcag( $kendo-checkbox-disabled-checked-bg ) !default;
+$kendo-checkbox-disabled-checked-text: k-contrast-color( $kendo-checkbox-disabled-checked-bg ) !default;
 /// Border color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
@@ -137,14 +137,14 @@ $kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xm
 
 /// The horizontal margin of the checkbox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+$kendo-checkbox-label-margin-x: k-map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: k-map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;

package/scss/chip/_theme.scss

@@ -11,7 +11,7 @@
             &:hover,
             &.k-hover {
                 @include fill(
-                    $bg: rgba($color, .16 ),
+                    $bg: rgba( $color, .16 ),
                     $color: $color
                 );
             }
@@ -20,7 +20,7 @@
             &.k-focus {
                 @include box-shadow( none );
                 @include fill(
-                    $bg: rgba($color, .24),
+                    $bg: rgba( $color, .24),
                     $color: $color
                 );
             }
@@ -46,7 +46,7 @@
             &:hover,
             &.k-hover {
                 @include fill(
-                    $bg: rgba($color, .08 ),
+                    $bg: rgba( $color, .08 ),
                     $color: $color
                 );
             }

package/scss/chip/_variables.scss

@@ -5,21 +5,21 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: map-get( $spacing, 1 ) !default;
+$kendo-chip-spacing: k-map-get( $spacing, 1 ) !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-sm: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-lg: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-md: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: k-map-get( $spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
-$kendo-chip-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-chip-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin )  !default;
+$kendo-chip-padding-y-md: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
@@ -66,42 +66,42 @@ $kendo-chip-base-bg: $base-text !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $kendo-theme-colors, "error" ),
-    "info": map-get( $kendo-theme-colors, "info" ),
-    "warning": map-get( $kendo-theme-colors, "warning" ),
-    "success": map-get( $kendo-theme-colors, "success" )
+    "error": k-map-get( $kendo-theme-colors, "error" ),
+    "info": k-map-get( $kendo-theme-colors, "info" ),
+    "warning": k-map-get( $kendo-theme-colors, "warning" ),
+    "success": k-map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 90% ) !default;
+$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 90% ) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-chip-base-bg !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: try-tint( $kendo-chip-base-bg, 70% ) !default;
+$kendo-chip-solid-border: k-try-tint( $kendo-chip-base-bg, 70% ) !default;
 /// The base shadow of solid chip.
 /// @group chip
 $kendo-chip-solid-shadow: null !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of hovered solid chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: try-tint( $kendo-chip-base-bg, 84% ) !default;
+$kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
 /// The base text color of hovered solid chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of selected solid chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: try-tint( $kendo-chip-base-bg, 76% ) !default;
+$kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -124,7 +124,7 @@ $kendo-chip-outline-shadow: null !default;
 $kendo-chip-outline-hover-bg: $kendo-chip-base-bg !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-base-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-base-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
@@ -138,7 +138,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: map-get( $spacing, 1 ),
-    md: map-get( $spacing, 1 ),
-    lg: map-get( $spacing, 1 )
+    sm: k-map-get( $spacing, 1 ),
+    md: k-map-get( $spacing, 1 ),
+    lg: k-map-get( $spacing, 1 )
 ) !default;

package/scss/coloreditor/_variables.scss

@@ -1,5 +1,5 @@
 // Coloreditor/FlatColorPicker
-$coloreditor-spacer: map-get( $spacing, 3 ) !default;
+$coloreditor-spacer: k-map-get( $spacing, 3 ) !default;
 
 $coloreditor-min-width: 294px !default;
 $coloreditor-border-width: 1px !default;
@@ -16,9 +16,9 @@ $coloreditor-focus-shadow: $box-shadow-depth-2 !default;
 
 $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
-$coloreditor-header-actions-gap: map-get( $spacing, 2 ) !default;
+$coloreditor-header-actions-gap: k-map-get( $spacing, 2 ) !default;
 
-$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-preview-gap: k-map-get( $spacing, 1 ) !default;
 $coloreditor-color-preview-width: 32px !default;
 $coloreditor-color-preview-height: 12px !default;
 

package/scss/colorgradient/_variables.scss

@@ -1,5 +1,5 @@
 // ColorGradient
-$colorgradient-spacer: map-get( $spacing, 3 ) !default;
+$colorgradient-spacer: k-map-get( $spacing, 3 ) !default;
 
 $colorgradient-width: 294px !default;
 $colorgradient-border-width: 1px !default;
@@ -34,18 +34,18 @@ $colorgradient-draghandle-border-width: 1px !default;
 $colorgradient-draghandle-border-radius: 50% !default;
 $colorgradient-draghandle-bg: transparent !default;
 $colorgradient-draghandle-text: null !default;
-$colorgradient-draghandle-border: rgba( $white, .8) !default;
-$colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
+$colorgradient-draghandle-border: rgba( white, .8 ) !default;
+$colorgradient-draghandle-shadow: 0 1px 4px rgba( black, .5 ) !default;
 $colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
 $colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
 
-$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
-$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
+$colorgradient-canvas-draghandle-margin-y: - k-math-div( $colorgradient-draghandle-height, 2 ) !default;
+$colorgradient-canvas-draghandle-margin-x: - k-math-div( $colorgradient-draghandle-width, 2 ) !default;
 
 $colorgradient-input-width: 50px !default;
-$colorgradient-input-gap: map-get( $spacing, 2 ) !default;
-$colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
+$colorgradient-input-gap: k-map-get( $spacing, 2 ) !default;
+$colorgradient-input-label-gap: k-map-get( $spacing, 1 ) !default;
 $colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
-$colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
+$colorgradient-contrast-spacer: k-map-get( $spacing, 2 ) !default;

package/scss/colorpalette/_variables.scss

@@ -3,7 +3,7 @@ $colorpalette-font-family: $font-family !default;
 $colorpalette-font-size: $font-size !default;
 $colorpalette-line-height: 0 !default;
 
-$colorpalette-tile-width: map-get( $spacing, 6 ) !default;
+$colorpalette-tile-width: k-map-get( $spacing, 6 ) !default;
 $colorpalette-tile-height: $colorpalette-tile-width !default;
 $colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
 $colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;

package/scss/core/_color-system.scss

@@ -14,16 +14,16 @@ $gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-lin
 
 $gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
 
-$dark-primary-text: rgba($black, .87) !default;
-$dark-secondary-text: rgba($black, .54) !default;
-$dark-disabled-text: rgba($black, .38) !default;
-$dark-dividers: rgba($black, .12) !default;
-$dark-focused: rgba($black, .12) !default;
+$dark-primary-text: rgba( black, .87 ) !default;
+$dark-secondary-text: rgba( black, .54 ) !default;
+$dark-disabled-text: rgba( black, .38 ) !default;
+$dark-dividers: rgba( black, .12 ) !default;
+$dark-focused: rgba( black, .12 ) !default;
 $light-primary-text: $white !default;
-$light-secondary-text: rgba($white, .7) !default;
-$light-disabled-text: rgba($white, .5) !default;
-$light-dividers: rgba($white, .12) !default;
-$light-focused: rgba($white, .12) !default;
+$light-secondary-text: rgba( white, .7 ) !default;
+$light-disabled-text: rgba( white, .5 ) !default;
+$light-dividers: rgba( white, .12 ) !default;
+$light-focused: rgba( white, .12 ) !default;
 
 $palettes: (
 
@@ -68,7 +68,7 @@ $palettes: (
         200: #f48fb1,
         300: #f06292,
         400: #ec407a,
-        500: #e51a5f, // originaly it was #e91e63, but changed for better contrast against white
+        500: #e51a5f, // originally it was #e91e63, but changed for better contrast against white
         600: #d81b60,
         700: #c2185b,
         800: #ad1457,
@@ -676,15 +676,15 @@ $palettes: (
 ) !default;
 
 @function get-base-palette($name) {
-    @return map-get( $palettes, $name );
+    @return k-map-get( $palettes, $name );
 }
 
 @function get-base-hue($palette, $hue) {
-    @return map-get( get-base-palette( $palette ), $hue );
+    @return k-map-get( get-base-palette( $palette ), $hue );
 }
 
 @function get-base-contrast($palette, $hue) {
-    @return map-get( map-get( get-base-palette($palette), contrast), $hue );
+    @return k-map-get( k-map-get( get-base-palette($palette), contrast), $hue );
 }
 
 $material-dark-complimentary: (
@@ -697,8 +697,8 @@ $material-dark-complimentary: (
     component-text: $light-primary-text,
     component-border: $light-dividers,
     base-bg: get-base-hue( gray, 900 ),
-    hover-bg: rgba( $white, .08 ),
-    focus-bg: rgba( $white, .24 ),
+    hover-bg: rgba( white, .08 ),
+    focus-bg: rgba( white, .24 ),
     elevation: $black
 ) !default;
 
@@ -713,15 +713,15 @@ $material-light-complimentary: (
     component-text: $dark-primary-text,
     component-border: $dark-dividers,
     base-bg: $white,
-    hover-bg: rgba( $black, .04 ),
-    focus-bg: rgba( $black, .12 ),
+    hover-bg: rgba( black, .04 ),
+    focus-bg: rgba( black, .12 ),
     elevation: $black
 ) !default;
 
 
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 @function material-contrast($palette, $hue) {
-    @return map-get(map-get($palette, contrast), $hue);
+    @return k-map-get(k-map-get($palette, contrast), $hue);
 }
 
 // Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
@@ -749,11 +749,11 @@ $material-light-complimentary: (
     }
 
     // stylelint-disable-next-line function-comma-newline-after
-    $result: map-merge($base-palette, (
+    $result: k-map-merge($base-palette, (
         // sass-lint:disable-block indentation
-        main: map-get($base-palette, $main),
-        lighter: map-get($base-palette, $lighter),
-        darker: map-get($base-palette, $darker),
+        main: k-map-get($base-palette, $main),
+        lighter: k-map-get($base-palette, $lighter),
+        darker: k-map-get($base-palette, $darker),
         main-contrast: material-contrast($base-palette, $main),
         lighter-contrast: material-contrast($base-palette, $lighter),
         darker-contrast: material-contrast($base-palette, $darker)
@@ -762,7 +762,7 @@ $material-light-complimentary: (
     // For each hue in the palette, add a "-contrast" color to the map.
     @each $hue, $color in $base-palette {
         // stylelint-disable-next-line function-comma-newline-after
-        $result: map-merge($result, (
+        $result: k-map-merge($result, (
             // sass-lint:disable-block indentation
             "#{$hue}-contrast": material-contrast($base-palette, $hue)
         ));
@@ -787,16 +787,16 @@ $material-light-complimentary: (
         @return material-color($palette, main, $hue);
     }
 
-    $color: map-get($palette, $hue);
+    $color: k-map-get($palette, $hue);
     $opacity: if($opacity == null, opacity($color), $opacity);
 
-    @return rgba($color, $opacity);
+    @return rgba( $color, $opacity );
 }
 
 // Creates a container object for a light theme to be given to individual component theme mixins.
 @function material-theme($primary, $secondary, $theme-type, $warn: material-palette(red)) {
     $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary);
-    @return map-merge((
+    @return k-map-merge((
         // sass-lint:disable-block indentation
         primary: $primary,
         secondary: $secondary,

package/scss/core/functions/_index.scss

@@ -1 +1,4 @@
+$wcag-min-contrast-ratio: 4.5 !default;
+
+@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
 @import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";