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

package/scss/scheduler/_variables.scss

@@ -8,12 +8,12 @@ $scheduler-bg: $component-bg !default;
 $scheduler-text: $component-text !default;
 $scheduler-border: $component-border !default;
 
-$scheduler-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$scheduler-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-toolbar-text: null !default;
 $scheduler-toolbar-border: null !default;
 $scheduler-toolbar-gradient: null !default;
 
-$scheduler-footer-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$scheduler-footer-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-footer-text: null !default;
 $scheduler-footer-border: null !default;
 $scheduler-footer-gradient: null !default;
@@ -23,7 +23,7 @@ $scheduler-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y-sm}) ) !default;
 
 $scheduler-event-bg: $primary !default;
-$scheduler-event-text: contrast-wcag( $scheduler-event-bg ) !default;
+$scheduler-event-text: k-contrast-color( $scheduler-event-bg ) !default;
 $scheduler-event-border: null !default;
 $scheduler-event-gradient: null !default;
 $scheduler-event-shadow: null !default;
@@ -34,35 +34,35 @@ $scheduler-event-hover-border: null !default;
 $scheduler-event-hover-gradient: null !default;
 $scheduler-event-hover-shadow: null !default;
 
-$scheduler-event-selected-bg: try-tint( $primary, 1 ) !default;
-$scheduler-event-selected-text: contrast-wcag( $scheduler-event-selected-bg ) !default;
+$scheduler-event-selected-bg: k-try-tint( $primary, 1 ) !default;
+$scheduler-event-selected-text: k-contrast-color( $scheduler-event-selected-bg ) !default;
 $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
 $scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
-$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
+$scheduler-cell-padding-x: k-map-get( $spacing, 2 ) !default;
+$scheduler-cell-padding-y: k-map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height * 1rem !default;
 $scheduler-datecolumn-width: 12rem !default;
 $scheduler-timecolumn-width: 11rem !default;
 
 $scheduler-current-time-color: #ff0000 !default;
 
-$scheduler-nonwork-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-nonwork-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-nonwork-text: null !default;
 
 $scheduler-weekend-bg: null !default;
 $scheduler-weekend-text: null !default;
 
-$scheduler-othermonth-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-othermonth-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-othermonth-text: null !default;
 
-$scheduler-yearview-padding-x: map-get( $spacing, 5 ) !default;
+$scheduler-yearview-padding-x: k-map-get( $spacing, 5 ) !default;
 $scheduler-yearview-padding-y: $scheduler-yearview-padding-x !default;
 
-$scheduler-yearview-calendar-gap: map-get( $spacing, 5 ) !default;
+$scheduler-yearview-calendar-gap: k-map-get( $spacing, 5 ) !default;
 
 $scheduler-yearview-indicator-size: 3px !default;
 $scheduler-yearview-indicator-calc-offset-top: calc( #{$calendar-cell-size} - (#{$calendar-cell-padding-y} * 2)) !default;
@@ -77,9 +77,9 @@ $scheduler-tooltip-border-width: 0 !default;
 $scheduler-tooltip-bg: $primary-contrast !default;
 $scheduler-tooltip-text: $base-text !default;
 $scheduler-tooltip-border: null !default;
-$scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2) !default;
+$scheduler-tooltip-shadow: 0px 0px 10px rgba( black, .2 ) !default;
 
-$scheduler-tooltip-title-margin-y: map-get( $spacing, 2 ) !default;
+$scheduler-tooltip-title-margin-y: k-map-get( $spacing, 2 ) !default;
 $scheduler-tooltip-month-font-size: $font-size-sm !default;
 $scheduler-tooltip-day-font-size: $scheduler-tooltip-month-font-size * 2 !default;
 
@@ -87,7 +87,7 @@ $scheduler-tooltip-events-max-height: 250px !default;
 $scheduler-tooltip-events-gap: $padding-y !default;
 
 $scheduler-tooltip-event-padding-x: $padding-x-sm !default;
-$scheduler-tooltip-event-padding-y: map-get( $spacing, 2 ) !default;
+$scheduler-tooltip-event-padding-y: k-map-get( $spacing, 2 ) !default;
 $scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-tooltip-event-gap: $padding-x-sm !default;
 

package/scss/scrollview/_variables.scss

@@ -13,7 +13,7 @@ $scrollview-pagebutton-bg: $kendo-button-bg !default;
 $scrollview-pagebutton-border: $kendo-button-border !default;
 $scrollview-pagebutton-primary-bg: $primary !default;
 $scrollview-pagebutton-primary-border: $primary !default;
-$scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
 
 $scrollview-pager-offset: 0 !default;
 $scrollview-pager-item-spacing: 20px !default;
@@ -27,14 +27,14 @@ $scrollview-pager-multidot-step: 1px !default;
 $scrollview-arrow-icon-size: 4.5em !default;
 $scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
 $scrollview-navigation-color: white !default;
-$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
-$scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;
+$scrollview-navigation-icon-shadow: rgba( black, .3 ) 0 0 15px !default;
+$scrollview-navigation-bg: rgba( black, 0 ) !default;
 $scrollview-navigation-default-opacity: .7 !default;
 $scrollview-navigation-hover-opacity: 1 !default;
 $scrollview-navigation-hover-span-bg: null !default;
 
-$scrollview-light-bg: rgba(255, 255, 255, .4) !default;
-$scrollview-dark-bg: rgba(0, 0, 0, .4) !default;
+$scrollview-light-bg: rgba( white, .4 ) !default;
+$scrollview-dark-bg: rgba( black, .4 ) !default;
 
 $scrollview-transition-duration: .3s !default;
 $scrollview-transition-timing-function: ease-in-out !default;

package/scss/signature/_variables.scss

@@ -6,10 +6,10 @@ $kendo-signature-lg-min-height: 110px;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-x-sm: map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: k-map-get( $spacing, thin ) !default;
 $kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
 
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
 $kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
@@ -45,5 +45,5 @@ $kendo-signature-sizes: (
     )
 ) !default;
 
-$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
-$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
+$kendo-signature-actions-gap: k-map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: k-map-get( $spacing, 1 ) - k-map-get( $spacing, hair ) !default;

package/scss/slider/_variables.scss

@@ -33,13 +33,13 @@ $slider-draghandle-pressed-text: null !default;
 $slider-draghandle-pressed-border: null !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: 0 0 0 11px rgba($primary, .25) !default;
+$slider-draghandle-focused-shadow: 0 0 0 11px rgba( $primary, .25 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;
 $slider-draghandle-transition-speed: .4s !default;
 $slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
 
-$slider-track-bg: try-tint( $primary, 8 ) !default;
+$slider-track-bg: k-try-tint( $primary, 8 ) !default;
 $slider-selection-bg: $primary !default;
 $slider-disabled-opacity: .65 !default;

package/scss/split-button/_variables.scss

@@ -6,10 +6,10 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// Horizontal padding of the arrow button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-sm: map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-lg: map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-md: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-lg: k-map-get( $spacing, 1 ) !default;
 
 /// Vertical padding of the arrow button.
 /// @group split-button

package/scss/splitter/_variables.scss

@@ -14,10 +14,10 @@ $splitter-drag-handle-length: 20px !default;
 $splitter-drag-handle-thickness: 2px !default;
 $splitter-drag-icon-margin: 7px !default;
 
-$splitbar-bg: try-shade( $splitter-bg, 1 ) !default;
+$splitbar-bg: k-try-shade( $splitter-bg, 1 ) !default;
 $splitbar-text: $subtle-text !default;
 
-$splitbar-hover-bg: try-shade( $splitbar-bg, .5 ) !default;
+$splitbar-hover-bg: k-try-shade( $splitbar-bg, .5 ) !default;
 $splitbar-hover-text: $splitbar-text !default;
 
 $splitbar-selected-bg: $primary !default;

package/scss/spreadsheet/_layout.scss

@@ -5,7 +5,7 @@
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        padding: map-get( $spacing, 1 );
+        padding: k-map-get( $spacing, 1 );
 
         .k-button {
             border-radius: 50%;
@@ -28,7 +28,7 @@
         padding: 0;
 
         .k-spreadsheet-sheets-bar-add {
-            margin: map-get( $spacing, 1 );
+            margin: k-map-get( $spacing, 1 );
             border-radius: 50%;
             color: inherit;
             background: none;

package/scss/spreadsheet/_theme.scss

@@ -37,7 +37,7 @@
     .k-spreadsheet-sheets-bar {
         @include fill(
             $toolbar-text,
-            try-shade( $toolbar-bg, .5 ),
+            k-try-shade( $toolbar-bg, .5 ),
             inherit,
             $toolbar-gradient
         );
@@ -53,7 +53,7 @@
     .k-spreadsheet-row-header,
     .k-spreadsheet-column-header {
         border-color: $component-border;
-        background-color: try-shade( $component-bg, 1 );
+        background-color: k-try-shade( $component-bg, 1 );
     }
 
 

package/scss/spreadsheet/_variables.scss

@@ -16,7 +16,7 @@ $spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
 $spreadsheet-insert-image-dialog-preview-border: $component-border !default;
 $spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
-$spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
+$spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba( black, .5 ) !default;
 $spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-overlay-hovered-text: $component-bg !default;
 

package/scss/stepper/_variables.scss

@@ -33,7 +33,7 @@ $stepper-indicator-bg: $component-bg !default;
 $stepper-indicator-text: $component-text !default;
 $stepper-indicator-border: $component-border !default;
 
-$stepper-indicator-hover-bg: try-shade( $stepper-indicator-bg ) !default;
+$stepper-indicator-hover-bg: k-try-shade( $stepper-indicator-bg ) !default;
 $stepper-indicator-hover-text: null !default;
 $stepper-indicator-hover-border: null !default;
 
@@ -42,15 +42,15 @@ $stepper-indicator-disabled-text: $disabled-text !default;
 $stepper-indicator-disabled-border: null !default;
 
 $stepper-indicator-done-bg: $primary !default;
-$stepper-indicator-done-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-text: k-contrast-color( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-border: $stepper-indicator-done-bg !default;
 
-$stepper-indicator-done-hover-bg: try-shade( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-hover-bg: k-try-shade( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-hover-text: null !default;
 $stepper-indicator-done-hover-border: null !default;
 
-$stepper-indicator-done-disabled-bg: mix( $stepper-indicator-done-bg, $component-bg, 60%) !default;
-$stepper-indicator-done-disabled-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-disabled-bg: k-color-mix( $stepper-indicator-done-bg, $component-bg, 60%) !default;
+$stepper-indicator-done-disabled-text: k-contrast-color( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-disabled-border: $stepper-indicator-done-disabled-bg !default;
 
 $stepper-indicator-current-bg: $stepper-indicator-done-bg !default;
@@ -69,7 +69,7 @@ $stepper-label-text: null !default;
 $stepper-label-success-text: $success !default;
 $stepper-label-error-text: $error !default;
 $stepper-label-hover-text: null !default;
-$stepper-label-disabled-text: map-get( $theme, disabled-text ) !default;
+$stepper-label-disabled-text: k-map-get( $theme, disabled-text ) !default;
 
 $stepper-optional-label-text: $subtle-text !default;
 $stepper-optional-label-opacity: null !default;

package/scss/table/_variables.scss

@@ -32,20 +32,20 @@ $kendo-table-sizes: (
     sm: (
         font-size: $font-size-md,
         line-height: ( 20 / 14 ),
-        cell-padding-x: map-get( $spacing, 4 ),
-        cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        cell-padding-x: k-map-get( $spacing, 4 ),
+        cell-padding-y: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin )
     ),
     md: (
         font-size: $font-size-md,
         line-height: ( 20 / 14 ),
-        cell-padding-x: map-get( $spacing, 4 ),
-        cell-padding-y: map-get( $spacing, 2 )
+        cell-padding-x: k-map-get( $spacing, 4 ),
+        cell-padding-y: k-map-get( $spacing, 2 )
     ),
     lg: (
         font-size: $font-size-md,
         line-height: ( 20 / 14 ),
-        cell-padding-x: map-get( $spacing, 4 ),
-        cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        cell-padding-x: k-map-get( $spacing, 4 ),
+        cell-padding-y: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin )
     )
 ) !default;
 

package/scss/tabstrip/_theme.scss

@@ -5,7 +5,7 @@
     .k-tabstrip-items {
 
         .k-disabled {
-            color: map-get( $theme, disabled-text );
+            color: k-map-get( $theme, disabled-text );
         }
 
     }

package/scss/tabstrip/_variables.scss

@@ -60,7 +60,7 @@ $tabstrip-item-hovered-text: $body-text !default;
 /// Border color of hovered tabs
 /// @group tabstrip
 $tabstrip-item-hovered-border: null !default;
-/// Background gradent of hovered tabs
+/// Background gradient of hovered tabs
 /// @group tabstrip
 $tabstrip-item-hovered-gradient: null !default;
 
@@ -79,17 +79,17 @@ $tabstrip-item-selected-gradient: null !default;
 
 $tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
 
-$tabstrip-item-dragging-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2) !default;
+$tabstrip-item-dragging-shadow: 0 4px 5px 0 rgba( black, .14 ), 0 1px 10px 0 rgba( black, .12 ), 0 2px 4px -1px rgba( black, .2 ) !default;
 
 $tabstrip-indicator-size: 2px !default;
 $tabstrip-indicator-color: $primary !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
+$tabstrip-content-padding-x: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
+$tabstrip-content-padding-y: k-map-get( $spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 0px !default;

package/scss/taskboard/_variables.scss

@@ -1,5 +1,5 @@
 // TaskBoard
-$taskboard-spacer: map-get( $spacing, 4 ) !default;
+$taskboard-spacer: k-map-get( $spacing, 4 ) !default;
 $taskboard-padding-y: null !default;
 $taskboard-padding-x: null !default;
 $taskboard-font-family: $font-family !default;
@@ -19,9 +19,9 @@ $taskboard-toolbar-gradient: null !default;
 $taskboard-content-padding-y: $taskboard-spacer !default;
 $taskboard-content-padding-x: $taskboard-content-padding-y !default;
 
-$taskboard-column-container-spacing-y: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-container-spacing-y: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-container-padding-y: 0px !default;
-$taskboard-column-container-padding-x: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-container-padding-x: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-columns-container-gap: $taskboard-spacer !default;
 
 $taskboard-column-width: 320px !default;
@@ -33,7 +33,7 @@ $taskboard-column-border: transparent !default;
 
 $taskboard-column-focus-bg: null !default;
 $taskboard-column-focus-text: null !default;
-$taskboard-column-focus-border: try-shade( $base-border, 2.5 ) !default;
+$taskboard-column-focus-border: k-try-shade( $base-border, 2.5 ) !default;
 
 $taskboard-column-header-padding-y: ( $taskboard-spacer / 2 ) !default;
 $taskboard-column-header-padding-x: $taskboard-column-header-padding-y !default;
@@ -76,10 +76,10 @@ $taskboard-card-shadow: none !default;
 
 $taskboard-card-category-border-width: 4px !default;
 
-$taskboard-card-focus-border: try-shade( $taskboard-card-border, 9% ) !default;
+$taskboard-card-focus-border: k-try-shade( $taskboard-card-border, 9% ) !default;
 $taskboard-card-focus-shadow: none !default;
 
-$taskboard-card-hover-border: try-shade( $taskboard-card-border, 10% ) !default;
+$taskboard-card-hover-border: k-try-shade( $taskboard-card-border, 10% ) !default;
 
 $taskboard-card-selected-border: $primary-lighter !default;
 $taskboard-card-selected-shadow: none !default;
@@ -90,5 +90,5 @@ $taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;
-$taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default;
+$taskboard-drag-placeholder-bg: rgba( white, .2 ) !default;
 $taskboard-drag-placeholder-border: $component-border !default;

package/scss/tilelayout/_variables.scss

@@ -8,5 +8,5 @@ $tilelayout-hint-border-radius: $kendo-border-radius-md !default;
 
 $tilelayout-bg: if( $dark-theme, $dark, $light) !default;
 
-$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
+$tilelayout-hint-bg: rgba( white, .2 ) !default;
 $tilelayout-hint-border: $component-border !default;

package/scss/timeline/_variables.scss

@@ -13,12 +13,12 @@ $timeline-mobile-spacing-y: $padding-x !default;
 $timeline-track-arrow-width: 36px !default;
 $timeline-track-arrow-height: 36px !default;
 
-$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-bg: true-mix(#000000, $body-bg, 8%) !default;
-$timeline-track-arrow-disabled-border: true-mix($kendo-button-border, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-bg: k-true-mix(#000000, $body-bg, 8%) !default;
+$timeline-track-arrow-disabled-border: k-true-mix($kendo-button-border, $body-bg, 65%) !default;
 
 $timeline-track-size: 6px !default;
-$timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
+$timeline-track-wrap-padding-bottom: k-math-div( $timeline-track-size, 2 ) !default;
 $timeline-track-border-width: 1px !default;
 $timeline-track-margin-bottom: 18px !default;
 $timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
@@ -39,7 +39,7 @@ $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spa
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
 $timeline-horizontal-flag-min-width: 60px !default;
 $timeline-flag-bg: $primary !default;
-$timeline-flag-text: contrast-wcag( $timeline-flag-bg ) !default;
+$timeline-flag-text: k-contrast-color( $timeline-flag-bg ) !default;
 
 $timeline-flag-callout-width: 10px !default;
 $timeline-flag-callout-height: 10px !default;

package/scss/timeselector/_variables.scss

@@ -2,14 +2,14 @@
 $time-selector-border-width: 1px !default;
 $time-selector-font-family: $font-family !default;
 $time-selector-font-size: $font-size !default;
-$time-selector-line-height: (20 / 14) !default;
+$time-selector-line-height: k-math-div( 20, 14 ) !default;
 
 $time-selector-bg: $component-bg !default;
 $time-selector-text: $component-text !default;
 $time-selector-border: $component-border !default;
 
-$time-selector-header-padding-x: map-get( $spacing, 1 ) !default;
-$time-selector-header-padding-y: map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-x: k-map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-y: k-map-get( $spacing, 1 ) !default;
 $time-selector-header-border-width: 0px !default;
 
 $time-list-width: 4em !default;

package/scss/toolbar/_theme.scss

@@ -5,8 +5,8 @@
     .k-toolbar {
 
         .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 );
 
             &.k-input-button,
             &.k-input-spinner .k-spinner-increase,

package/scss/toolbar/_variables.scss

@@ -2,17 +2,17 @@
 
 /// The horizontal padding of the container.
 /// @group toolbar
-$toolbar-padding-x: map-get( $spacing, 2 ) !default;
+$toolbar-padding-x: k-map-get( $spacing, 2 ) !default;
 /// The vertical padding of the container.
 /// @group toolbar
-$toolbar-padding-y: map-get( $spacing, 2 ) !default;
+$toolbar-padding-y: k-map-get( $spacing, 2 ) !default;
 $toolbar-border-width: 0 !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
 
 $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;
-$toolbar-line-height: (20 / 14) !default;
+$toolbar-line-height: k-math-div( 20, 14 ) !default;
 
 $toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
@@ -25,3 +25,5 @@ $toolbar-shadow: $box-shadow-depth-2 !default;
 $toolbar-separator-border: $component-border !default;
 
 $toolbar-input-width: 10em !default;
+
+$toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;

package/scss/tooltip/_variables.scss

@@ -19,17 +19,17 @@ $tooltip-text: get-base-contrast( gray, 700 ) !default;
 $tooltip-border: $tooltip-bg !default;
 
 $tooltip-primary-bg: $primary !default;
-$tooltip-primary-text: contrast-wcag( $tooltip-primary-bg ) !default;
+$tooltip-primary-text: k-contrast-color( $tooltip-primary-bg ) !default;
 $tooltip-primary-border: $tooltip-primary-bg !default;
 $tooltip-info-bg: $info !default;
-$tooltip-info-text: contrast-wcag( $tooltip-info-bg ) !default;
+$tooltip-info-text: k-contrast-color( $tooltip-info-bg ) !default;
 $tooltip-info-border: $tooltip-info-bg !default;
 $tooltip-success-bg: $success !default;
-$tooltip-success-text: contrast-wcag( $tooltip-success-bg ) !default;
+$tooltip-success-text: k-contrast-color( $tooltip-success-bg ) !default;
 $tooltip-success-border: $tooltip-success-bg !default;
 $tooltip-warning-bg: $warning !default;
-$tooltip-warning-text: contrast-wcag( $tooltip-warning-bg ) !default;
+$tooltip-warning-text: k-contrast-color( $tooltip-warning-bg ) !default;
 $tooltip-warning-border: $tooltip-warning-bg !default;
 $tooltip-error-bg: $error !default;
-$tooltip-error-text: contrast-wcag( $tooltip-error-bg ) !default;
+$tooltip-error-text: k-contrast-color( $tooltip-error-bg ) !default;
 $tooltip-error-border: $tooltip-error-bg !default;

package/scss/treeview/_variables.scss

@@ -12,8 +12,8 @@ $kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: 1.25 !default;
-$kendo-treeview-line-height-sm: ( 20 / 14 ) !default;
-$kendo-treeview-line-height-md: ( 20 / 14 ) !default;
+$kendo-treeview-line-height-sm: k-math-div( 20, 14 ) !default;
+$kendo-treeview-line-height-md: k-math-div( 20, 14 ) !default;
 $kendo-treeview-line-height-lg: 1.5 !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
@@ -21,16 +21,16 @@ $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-treeview-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y: k-map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;

package/scss/upload/_theme.scss

@@ -6,7 +6,7 @@
     .k-upload {
         .k-upload-button {
             @include box-shadow( none );
-            background-color: try-shade( $upload-dropzone-bg );
+            background-color: k-try-shade( $upload-dropzone-bg );
         }
     }
 }

package/scss/upload/_variables.scss

@@ -2,15 +2,15 @@
 $upload-border-width: 1px !default;
 $upload-font-family: $font-family !default;
 $upload-font-size: $font-size !default;
-$upload-line-height: ( 20 / 14 ) !default;
+$upload-line-height: k-math-div( 20, 14 ) !default;
 $upload-max-height: 300px !default;
 
 $upload-bg: $component-bg !default;
 $upload-text: $component-text !default;
 $upload-border: $component-border !default;
 
-$upload-dropzone-padding-x: map-get( $spacing, 2 ) !default;
-$upload-dropzone-padding-y: map-get( $spacing, 2 ) !default;
+$upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
+$upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
 $upload-dropzone-bg: $header-bg !default;
 $upload-dropzone-text: $header-text !default;
 $upload-dropzone-border: $upload-border !default;
@@ -19,8 +19,8 @@ $upload-dropzone-hover-bg: $hovered-bg !default;
 $upload-status-text: $subtle-text !default;
 $upload-status-text-opacity: null !default;
 
-$upload-item-padding-x: map-get( $spacing, 4 ) !default;
-$upload-item-padding-y: map-get( $spacing, 4 ) !default;
+$upload-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$upload-item-padding-y: k-map-get( $spacing, 4 ) !default;
 
 $upload-multiple-items-spacing: 12px !default;
 
@@ -45,4 +45,4 @@ $upload-error-bg: $error !default;
 $upload-error-text: $error !default;
 $upload-error-border: $error !default;
 
-$upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$upload-focused-shadow: 0 0 0 2px rgba( black, .13 ) !default;

package/scss/wizard/_variables.scss

@@ -11,4 +11,4 @@ $wizard-line-height: $line-height !default;
 $wizard-font-family: $font-family !default;
 
 $wizard-step-border-focused: #656565 !default;
-$wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$wizard-focused-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;