@progress/kendo-theme-material 5.8.2-dev.3 → 5.8.2-dev.5

package/scss/list/_variables.scss

@@ -10,25 +10,25 @@ $kendo-list-font-size-lg: $font-size-lg !default;
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-line-height-sm: (20 / 14) !default;
-$kendo-list-line-height-md: (20 / 14) !default;
+$kendo-list-line-height-sm: k-math-div( 20, 14 ) !default;
+$kendo-list-line-height-md: k-math-div( 20, 14 ) !default;
 $kendo-list-line-height-lg: 1.5 !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
 $kendo-list-header-padding-x: null !default;
-$kendo-list-header-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-list-header-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-base: k-map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-list-header-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list header, if no size is set.
 /// @group list
 $kendo-list-header-padding-y: null !default;
-$kendo-list-header-padding-y-base: map-get( $spacing, 2 ) !default;
-$kendo-list-header-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-list-header-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-y-base: k-map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-list-header-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 
 /// Border width of list header.
 /// @group list
@@ -55,18 +55,18 @@ $kendo-list-header-font-weight: null !default;
 /// Horizontal padding of list items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
-$kendo-list-item-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-base: k-map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-list-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
 $kendo-list-item-padding-y: null !default;
-$kendo-list-item-padding-y-base: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-list-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-y-base: k-map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list
@@ -85,18 +85,18 @@ $kendo-list-item-line-height-lg: null !default;
 /// Horizontal padding of list group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-x: null !default;
-$kendo-list-group-item-padding-x-base: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-list-group-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-base: k-map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-list-group-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of list group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-y: null !default;
-$kendo-list-group-item-padding-y-base: map-get( $spacing, 2 ) !default;
-$kendo-list-group-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-list-group-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-group-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-list-group-item-padding-y-base: k-map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-list-group-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 
 /// Border width of list group items.
 /// @group list

package/scss/listgroup/_variables.scss

@@ -3,12 +3,12 @@ $listgroup-border-width: 1px !default;
 $listgroup-border-radius: $kendo-border-radius-md !default;
 
 $listgroup-font-size: $font-size !default;
-$listgroup-line-height: (20 / 14) !default;
+$listgroup-line-height: k-math-div( 20, 14 ) !default;
 
 $listgroup-bg: $component-bg !default;
 $listgroup-text: $component-text !default;
 $listgroup-border: $component-border !default;
 
-$listgroup-item-padding-x: map-get( $spacing, 2 ) !default;
-$listgroup-item-padding-y: map-get( $spacing, 2 ) !default;
+$listgroup-item-padding-x: k-map-get( $spacing, 2 ) !default;
+$listgroup-item-padding-y: k-map-get( $spacing, 2 ) !default;
 $listgroup-item-border-width: 1px !default;

package/scss/listview/_theme.scss

@@ -9,7 +9,7 @@
     // Listview content
     .k-listview-content {}
     .k-listview-content > .k-selected.k-focus {
-        background-color: rgba( contrast-wcag( $listview-bg ), .12 );
+        background-color: rgba( k-contrast-color( $listview-bg ), .12 );
     }
 
 }

package/scss/listview/_variables.scss

@@ -1,6 +1,6 @@
 // Listview
-$listview-padding-x: map-get( $spacing, 1 ) !default;
-$listview-padding-y: map-get( $spacing, 1 ) !default;
+$listview-padding-x: k-map-get( $spacing, 1 ) !default;
+$listview-padding-y: k-map-get( $spacing, 1 ) !default;
 $listview-border-width: 1px !default;
 $listview-font-family: $font-family !default;
 $listview-font-size: $font-size !default;
@@ -12,14 +12,14 @@ $listview-border: $component-border !default;
 
 $listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: map-get( $spacing, 1 ) !default;
+$listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
+$listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( contrast-wcag( $listview-bg ), .04 ) !default;
+$listview-item-selected-bg: rgba( k-contrast-color( $listview-bg ), .04 ) !default;
 $listview-item-selected-text: null !default;
 $listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: rgba( contrast-wcag( $listview-bg ), .08 ) !default;
+$listview-item-focus-bg: rgba( k-contrast-color( $listview-bg ), .08 ) !default;
 $listview-item-focus-text: null !default;
 $listview-item-focus-border: null !default;
 $listview-item-focus-shadow: null !default;

package/scss/loader/_variables.scss

@@ -1,12 +1,12 @@
 // Loader
 $loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: map-get( $spacing, 4 ) !default;
+$loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
+$loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
+$loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
 
-$loader-padding-sm: ( $loader-segment-size-sm / 2 ) !default;
-$loader-padding-md: ( $loader-segment-size-md / 2 ) !default;
-$loader-padding-lg: ( $loader-segment-size-lg / 2 ) !default;
+$loader-padding-sm: k-math-div( $loader-segment-size-sm, 2 ) !default;
+$loader-padding-md: k-math-div( $loader-segment-size-md, 2 ) !default;
+$loader-padding-lg: k-math-div( $loader-segment-size-lg, 2 ) !default;
 
 $loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
 $loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
@@ -30,14 +30,14 @@ $loader-container-panel-border-color: $component-border !default;
 $loader-container-panel-border-radius: $kendo-border-radius-md !default;
 $loader-container-panel-bg: $white !default;
 
-$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
-$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
+$loader-container-padding-sm: k-map-get( $spacing, 4 ) !default;
+$loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
 $loader-container-font-size-sm: $font-size-sm !default;
 
-$loader-container-padding-md: map-get( $spacing, 5 ) !default;
-$loader-container-gap-md: map-get( $spacing, 2 ) !default;
+$loader-container-padding-md: k-map-get( $spacing, 5 ) !default;
+$loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
 $loader-container-font-size-md: $font-size-md !default;
 
-$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
-$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
+$loader-container-padding-lg: k-map-get( $spacing, 6 ) !default;
+$loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
 $loader-container-font-size-lg: $font-size-lg !default;

package/scss/mediaplayer/_variables.scss

@@ -8,8 +8,8 @@ $mediaplayer-bg: $component-bg !default;
 $mediaplayer-text: $component-text !default;
 $mediaplayer-border: $component-border !default;
 
-$mediaplayer-titlebar-padding-x: map-get( $spacing, 2 ) !default;
-$mediaplayer-titlebar-padding-y: map-get( $spacing, 2 ) !default;
+$mediaplayer-titlebar-padding-x: k-map-get( $spacing, 2 ) !default;
+$mediaplayer-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
 $mediaplayer-titlebar-bg: null !default;
 $mediaplayer-titlebar-text: $mediaplayer-bg !default;
 $mediaplayer-titlebar-border: null !default;

package/scss/menu/_variables.scss

@@ -33,7 +33,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: null !default;
 
-$menu-separator-spacing: map-get( $spacing, 1 ) !default;
+$menu-separator-spacing: k-map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $subtle-text !default;
@@ -92,17 +92,17 @@ $kendo-menu-popup-gradient: null !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-menu-popup-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y: k-map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu

package/scss/menu-button/_variables.scss

@@ -2,5 +2,4 @@
 
 /// Horizontal padding of the arrow button.
 /// @group menu-button
-$kendo-menu-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
-
+$kendo-menu-button-arrow-padding-x: k-map-get( $spacing, 1 ) !default;

package/scss/notification/_variables.scss

@@ -2,13 +2,13 @@
 $notification-padding-x: 16px !default;
 $notification-padding-y: 14px !default;
 $notification-border-width: 0px !default;
-$notification-border-radius: map-get( $spacing, 1 ) !default;
+$notification-border-radius: k-map-get( $spacing, 1 ) !default;
 
 $notification-shadow: $popup-shadow !default;
 
 $notification-font-family: $font-family !default;
 $notification-font-size: $font-size !default;
-$notification-line-height: ( 20 / 14 ) !default;
+$notification-line-height: k-math-div( 20, 14 ) !default;
 
 $notification-icon-offset: 2px !default;
 $notification-icon-spacing: $icon-spacing !default;
@@ -22,8 +22,8 @@ $notification-border: $component-border !default;
 
     // sass-lint:disable-block indentation
     @each $name, $color in $colors {
-        $_theme: map-merge(( $name: (
-            color: contrast-wcag( $color ),
+        $_theme: k-map-merge(( $name: (
+            color: k-contrast-color( $color ),
             background-color: $color,
             border: $color,
         )), $_theme );

package/scss/orgchart/_variables.scss

@@ -1,5 +1,5 @@
 // Orgchart
-$orgchart-spacer: map-get( $spacing, 6 ) !default;
+$orgchart-spacer: k-map-get( $spacing, 6 ) !default;
 $orgchart-padding-y: $orgchart-spacer !default;
 $orgchart-padding-x: $orgchart-padding-y !default;
 $orgchart-font-family: $font-family !default;
@@ -30,7 +30,7 @@ $orgchart-node-group-title-line-height: $line-height-sm !default;
 
 $orgchart-node-group-subtitle-font-size: $font-size !default;
 $orgchart-node-group-subtitle-margin-bottom: $orgchart-spacer !default;
-$orgchart-node-group-subtitle-text: rgba( 0, 0, 0, .54 ) !default;
+$orgchart-node-group-subtitle-text: rgba( black, .54 ) !default;
 
 $orgchart-card-width: 300px !default;
 $orgchart-card-padding-y: $card-padding-y !default;

package/scss/pager/_variables.scss

@@ -1,6 +1,6 @@
 // Pager
-$pager-padding-x: map-get( $spacing, 2 ) !default;
-$pager-padding-y: map-get( $spacing, 2 ) !default;
+$pager-padding-x: k-map-get( $spacing, 2 ) !default;
+$pager-padding-y: k-map-get( $spacing, 2 ) !default;
 $pager-border-width: 1px !default;
 
 $pager-font-family: $font-family !default;
@@ -11,7 +11,7 @@ $pager-bg: $component-bg !default;
 $pager-text: if($dark-theme, $light-secondary-text, $dark-secondary-text) !default;
 $pager-border: $component-border !default;
 
-$pager-focus-bg: try-shade( $pager-bg, .5 ) !default;
+$pager-focus-bg: k-try-shade( $pager-bg, .5 ) !default;
 $pager-focus-shadow: null !default;
 
 $pager-section-spacing: $pager-padding-x !default;
@@ -41,7 +41,7 @@ $pager-number-border-radius: $pager-item-border-radius !default;
 $pager-number-spacing: $pager-item-spacing !default;
 
 $pager-item-focus-opacity: .12 !default;
-$pager-item-focus-bg: rgba($kendo-list-item-hover-bg, $pager-item-focus-opacity) !default;
+$pager-item-focus-bg: rgba( $kendo-list-item-hover-bg, $pager-item-focus-opacity ) !default;
 $pager-item-focus-shadow: null !default;
 
 $pager-number-bg: null !default;
@@ -49,17 +49,17 @@ $pager-number-text: $body-text !default;
 $pager-number-border: null !default;
 
 $pager-number-hover-opacity: .04 !default;
-$pager-number-hover-bg: rgba($pager-number-text, $pager-number-hover-opacity) !default;
+$pager-number-hover-bg: rgba( $pager-number-text, $pager-number-hover-opacity ) !default;
 $pager-number-hover-text: $pager-number-text !default;
 $pager-number-hover-border: null !default;
 
 $pager-number-selected-opacity: .22 !default;
-$pager-number-selected-bg: rgba($primary, $pager-number-selected-opacity) !default;
+$pager-number-selected-bg: rgba( $primary, $pager-number-selected-opacity ) !default;
 $pager-number-selected-text: $primary !default;
 $pager-number-selected-border: null !default;
 
 $pager-number-focus-opacity: .12 !default;
-$pager-number-focus-bg: rgba($pager-number-text, $pager-number-focus-opacity) !default;
+$pager-number-focus-bg: rgba( $pager-number-text, $pager-number-focus-opacity ) !default;
 $pager-number-focus-shadow: null !default;
 
 $pager-input-width: 5em !default;

package/scss/panelbar/_variables.scss

@@ -3,17 +3,17 @@ $panelbar-padding-x: 0px !default;
 $panelbar-padding-y: 0px !default;
 $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
-$panelbar-line-height: (20 / 14) !default;
+$panelbar-line-height: k-math-div( 20, 14 ) !default;
 $panelbar-border-width: 1px !default;
 $panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;
 
-$panelbar-header-padding-x: map-get( $spacing, 6 ) !default;
-$panelbar-header-padding-y: map-get( $spacing, 3 ) !default;
+$panelbar-header-padding-x: k-map-get( $spacing, 6 ) !default;
+$panelbar-header-padding-y: k-map-get( $spacing, 3 ) !default;
 
-$panelbar-item-padding-x: map-get( $spacing, 6 ) !default;
-$panelbar-item-padding-y: map-get( $spacing, 3 ) !default;
+$panelbar-item-padding-x: k-map-get( $spacing, 6 ) !default;
+$panelbar-item-padding-y: k-map-get( $spacing, 3 ) !default;
 
 $panelbar-item-level-count: 4 !default;
 
@@ -26,18 +26,18 @@ $panelbar-header-text: $link-text !default;
 $panelbar-header-border: null !default;
 $panelbar-header-gradient: null !default;
 
-$panelbar-header-hovered-bg: try-shade( $panelbar-header-bg, .5 ) !default;
+$panelbar-header-hovered-bg: k-try-shade( $panelbar-header-bg, .5 ) !default;
 $panelbar-header-hovered-text: null !default;
 $panelbar-header-hovered-border: null !default;
 $panelbar-header-hovered-gradient: null !default;
 
-$panelbar-header-focused-bg: try-shade( $panelbar-header-bg, 1.5 ) !default;
+$panelbar-header-focused-bg: k-try-shade( $panelbar-header-bg, 1.5 ) !default;
 $panelbar-header-focused-text: null !default;
 $panelbar-header-focused-border: null !default;
 $panelbar-header-focused-gradient: null !default;
 $panelbar-header-focused-shadow: null !default;
 
-$panelbar-header-hovered-focused-bg: try-shade( $panelbar-header-bg, 2 ) !default;
+$panelbar-header-hovered-focused-bg: k-try-shade( $panelbar-header-bg, 2 ) !default;
 $panelbar-header-hovered-focused-text: null !default;
 $panelbar-header-hovered-focused-border: null !default;
 $panelbar-header-hovered-focused-gradient: null !default;
@@ -47,34 +47,34 @@ $panelbar-header-selected-text: $selected-text !default;
 $panelbar-header-selected-border: null !default;
 $panelbar-header-selected-gradient: null !default;
 
-$panelbar-header-selected-hovered-bg: try-tint($panelbar-header-selected-bg, .95) !default;
+$panelbar-header-selected-hovered-bg: k-try-tint($panelbar-header-selected-bg, .95) !default;
 $panelbar-header-selected-hovered-text: null !default;
 $panelbar-header-selected-hovered-border: null !default;
 $panelbar-header-selected-hovered-gradient: null !default;
 
-$panelbar-header-selected-focused-bg: try-tint($panelbar-header-selected-bg, 3) !default;
+$panelbar-header-selected-focused-bg: k-try-tint($panelbar-header-selected-bg, 3) !default;
 $panelbar-header-selected-focused-text: null !default;
 $panelbar-header-selected-focused-border: null !default;
 $panelbar-header-selected-focused-gradient: null !default;
 
-$panelbar-header-selected-hovered-focused-bg: try-tint($panelbar-header-selected-bg, 3.95) !default;
+$panelbar-header-selected-hovered-focused-bg: k-try-tint($panelbar-header-selected-bg, 3.95) !default;
 $panelbar-header-selected-hovered-focused-text: null !default;
 $panelbar-header-selected-hovered-focused-border: null !default;
 $panelbar-header-selected-hovered-focused-gradient: null !default;
 
 
-$panelbar-item-hovered-bg: try-shade( $panelbar-bg, .5 ) !default;
+$panelbar-item-hovered-bg: k-try-shade( $panelbar-bg, .5 ) !default;
 $panelbar-item-hovered-text: null !default;
 $panelbar-item-hovered-border: null !default;
 $panelbar-item-hovered-gradient: null !default;
 
-$panelbar-item-focused-bg: try-shade( $panelbar-header-bg, 1.5 ) !default;
+$panelbar-item-focused-bg: k-try-shade( $panelbar-header-bg, 1.5 ) !default;
 $panelbar-item-focused-text: null !default;
 $panelbar-item-focused-border: null !default;
 $panelbar-item-focused-gradient: null !default;
 $panelbar-item-focused-shadow: null !default;
 
-$panelbar-item-hovered-focused-bg: try-shade( $panelbar-header-bg, 2 ) !default;
+$panelbar-item-hovered-focused-bg: k-try-shade( $panelbar-header-bg, 2 ) !default;
 $panelbar-item-hovered-focused-text: null !default;
 $panelbar-item-hovered-focused-border: null !default;
 $panelbar-item-hovered-focused-gradient: null !default;
@@ -84,17 +84,17 @@ $panelbar-item-selected-text: $selected-text !default;
 $panelbar-item-selected-border: null !default;
 $panelbar-item-selected-gradient: null !default;
 
-$panelbar-item-selected-hovered-bg: try-tint($panelbar-item-selected-bg, .95) !default;
+$panelbar-item-selected-hovered-bg: k-try-tint($panelbar-item-selected-bg, .95) !default;
 $panelbar-item-selected-hovered-text: null !default;
 $panelbar-item-selected-hovered-border: null !default;
 $panelbar-item-selected-hovered-gradient: null !default;
 
-$panelbar-item-selected-focused-bg: try-tint($panelbar-item-selected-bg, 3) !default;
+$panelbar-item-selected-focused-bg: k-try-tint($panelbar-item-selected-bg, 3) !default;
 $panelbar-item-selected-focused-text: null !default;
 $panelbar-item-selected-focused-border: null !default;
 $panelbar-item-selected-focused-gradient: null !default;
 
-$panelbar-item-selected-hovered-focused-bg: try-tint($panelbar-item-selected-bg, 3.95) !default;
+$panelbar-item-selected-hovered-focused-bg: k-try-tint($panelbar-item-selected-bg, 3.95) !default;
 $panelbar-item-selected-hovered-focused-text: null !default;
 $panelbar-item-selected-hovered-focused-border: null !default;
 $panelbar-item-selected-hovered-focused-gradient: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -8,7 +8,7 @@ $pdf-viewer-bg: $component-bg !default;
 $pdf-viewer-text: $component-text !default;
 $pdf-viewer-border: $component-border !default;
 
-$pdf-viewer-toolbar-bg: try-shade( $kendo-button-bg, .25 ) !default;
+$pdf-viewer-toolbar-bg: k-try-shade( $kendo-button-bg, .25 ) !default;
 $pdf-viewer-toolbar-text: null !default;
 $pdf-viewer-toolbar-border: null !default;
 $pdf-viewer-toolbar-gradient: null !default;
@@ -25,7 +25,7 @@ $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
 $pdf-viewer-search-panel-border-width: 1px !default;
-$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
+$pdf-viewer-search-panel-border-radius: k-map-get( $spacing, 1 ) !default;
 $pdf-viewer-search-panel-bg: $component-bg !default;
 $pdf-viewer-search-panel-text: $component-text !default;
 $pdf-viewer-search-panel-border: $component-border !default;

package/scss/pivotgrid/_variables.scss

@@ -1,5 +1,5 @@
 // Pivot grid
-$pivotgrid-spacer: map-get( $spacing, 4 ) !default;
+$pivotgrid-spacer: k-map-get( $spacing, 4 ) !default;
 $pivotgrid-padding-x: null !default;
 $pivotgrid-padding-y: null !default;
 $pivotgrid-font-family: $font-family !default;
@@ -19,21 +19,21 @@ $pivotgrid-bg: $component-bg !default;
 $pivotgrid-text: $component-text !default;
 $pivotgrid-border: $component-border !default;
 
-$pivotgrid-alt-border: try-shade($pivotgrid-border, 2) !default;
+$pivotgrid-alt-border: k-try-shade( $pivotgrid-border, 2 ) !default;
 
-$pivotgrid-headers-bg: rgba($header-bg, .02) !default;
+$pivotgrid-headers-bg: rgba( $header-bg, .02 ) !default;
 $pivotgrid-headers-text: $header-text !default;
 $pivotgrid-headers-border: $header-border !default;
 
-$pivotgrid-total-bg: try-shade( $pivotgrid-bg, 1 ) !default;
+$pivotgrid-total-bg: k-try-shade( $pivotgrid-bg, 1 ) !default;
 $pivotgrid-total-text: $header-text !default;
 $pivotgrid-total-border: $header-border !default;
 
-$pivotgrid-hover-bg: darken($pivotgrid-bg, 7%) !default;
+$pivotgrid-hover-bg: darken( $pivotgrid-bg, 7% ) !default;
 $pivotgrid-hover-text: null !default;
 $pivotgrid-hover-border: null !default;
 
-$pivotgrid-selected-bg: rgba( contrast-wcag( $pivotgrid-bg ), .04 ) !default;
+$pivotgrid-selected-bg: rgba( k-contrast-color( $pivotgrid-bg ), .04 ) !default;
 $pivotgrid-selected-text: null !default;
 $pivotgrid-selected-border: null !default;
 
@@ -66,13 +66,13 @@ $pivotgrid-configurator-header-bg: null !default;
 $pivotgrid-configurator-header-text: $header-text !default;
 $pivotgrid-configurator-header-border: null !default;
 
-$pivotgrid-configurator-end-shadow: -3px 0px 6px rgba(0, 0, 0, .16) !default;
-$pivotgrid-configurator-start-shadow: 3px 0px 6px rgba(0, 0, 0, .16) !default;
-$pivotgrid-configurator-top-shadow: 0px -3px 6px rgba(0, 0, 0, .16) !default;
-$pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba(0, 0, 0, .16) !default;
+$pivotgrid-configurator-end-shadow: -3px 0px 6px rgba( black, .16 ) !default;
+$pivotgrid-configurator-start-shadow: 3px 0px 6px rgba( black, .16 ) !default;
+$pivotgrid-configurator-top-shadow: 0px -3px 6px rgba( black, .16 ) !default;
+$pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba( black, .16 ) !default;
 
-$pivotgrid-configurator-button-padding-x: map-get($spacing, 1) !default;
-$pivotgrid-configurator-button-padding-y: map-get($spacing, 1) !default;
+$pivotgrid-configurator-button-padding-x: k-map-get( $spacing, 1 ) !default;
+$pivotgrid-configurator-button-padding-y: k-map-get( $spacing, 1 ) !default;
 $pivotgrid-configurator-button-border-width: 1px !default;
 $pivotgrid-configurator-button-size: calc( #{$pivotgrid-line-height * 1em} + #{$pivotgrid-configurator-button-padding-y * 2} + #{$pivotgrid-configurator-button-border-width * 2} ) !default;
 
@@ -102,11 +102,11 @@ $pivotgrid-chrome-border: $grid-border !default;
 $pivotgrid-container-bg: $grid-header-bg !default;
 $pivotgrid-row-headers-bg: null !default;
 
-$pivotgrid-button-bg: try-shade($kendo-button-bg, 1) !default;
+$pivotgrid-button-bg: k-try-shade($kendo-button-bg, 1) !default;
 $pivotgrid-button-text: $kendo-button-text !default;
-$pivotgrid-button-hover-bg: try-shade($kendo-button-bg, 2) !default;
+$pivotgrid-button-hover-bg: k-try-shade($kendo-button-bg, 2) !default;
 $pivotgrid-button-hover-text: $kendo-button-text !default;
-$pivotgrid-button-active-bg: try-shade($kendo-button-bg, 2) !default;
+$pivotgrid-button-active-bg: k-try-shade($kendo-button-bg, 2) !default;
 $pivotgrid-button-active-text: $kendo-button-text !default;
 
 $pivotgrid-remove-bg: $pivotgrid-button-text !default;

package/scss/popup/_variables.scss

@@ -7,8 +7,8 @@ $popup-border-radius: null !default;
 $popup-font-size: $font-size !default;
 $popup-line-height: $line-height !default;
 
-$popup-content-padding-x: map-get( $spacing, 2 ) !default;
-$popup-content-padding-y: map-get( $spacing, 2 ) !default;
+$popup-content-padding-x: k-map-get( $spacing, 2 ) !default;
+$popup-content-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $popup-bg: $component-bg !default;
 $popup-text: $component-text !default;

package/scss/progressbar/_variables.scss

@@ -7,7 +7,7 @@ $progressbar-font-family: $font-family !default;
 $progressbar-font-size: $font-size-sm !default;
 $progressbar-line-height: 1 !default;
 
-$progressbar-bg: try-tint( $primary, 8 ) !default;
+$progressbar-bg: k-try-tint( $primary, 8 ) !default;
 $progressbar-text: $component-text !default;
 $progressbar-border: null !default;
 $progressbar-gradient: null !default;

package/scss/radio/_variables.scss

@@ -10,19 +10,19 @@ $kendo-radio-border-width: 2px !default;
 // Radio button sizes
 $kendo-radio-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;
 
@@ -125,14 +125,14 @@ $kendo-radio-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xm
 
 /// The horizontal margin of the radio button inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
+$kendo-radio-label-margin-x: k-map-get( $spacing, 1 ) !default;
 
 
 // Radio list
 
 /// Spacing between items of horizontal radio button list.
 /// @group radio
-$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-map-get( $spacing, 4 ) !default;
 /// Horizontal padding of radio button list items.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;

package/scss/rating/_variables.scss

@@ -19,5 +19,5 @@ $rating-icon-selected-text: $primary-darker !default;
 $rating-icon-hover-text: $primary-darker !default;
 $rating-icon-focused-text: $primary-darker !default;
 
-$rating-icon-focused-shadow: 0 2px 4px rgba( $black, .1 ) !default;
-$rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
+$rating-icon-focused-shadow: 0 2px 4px rgba( black, .1 ) !default;
+$rating-icon-focused-selected-shadow: 0 2px 4px rgba( black, .1) !default;