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

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: $header-bg !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: k-color-darken( $pivotgrid-bg, 7% ) !default;
 $pivotgrid-hover-text: null !default;
 $pivotgrid-hover-border: null !default;
 
-$pivotgrid-selected-bg: rgba($selected-bg, .25) !default;
+$pivotgrid-selected-bg: rgba( $selected-bg, .25 ) !default;
 $pivotgrid-selected-text: null !default;
 $pivotgrid-selected-border: null !default;
 
@@ -53,7 +53,7 @@ $pivotgrid-configurator-content-padding-x: $pivotgrid-spacer !default;
 $pivotgrid-configurator-content-padding-y: 0px !default;
 
 $pivotgrid-configurator-fields-margin-x: 0px !default;
-$pivotgrid-configurator-fields-margin-y: ( $pivotgrid-spacer / 2 ) !default;
+$pivotgrid-configurator-fields-margin-y: k-math-div( $pivotgrid-spacer, 2 ) !default;
 
 $pivotgrid-configurator-vertical-width: 320px !default;
 $pivotgrid-configurator-horizontal-height: 420px !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;
 
@@ -92,7 +92,7 @@ $pivotgrid-calculated-field-header-text: $header-text !default;
 $pivotgrid-calculated-field-header-border: null !default;
 
 
-$pivotgrid-treeview-padding-x: ( $pivotgrid-spacer / 2) !default;
+$pivotgrid-treeview-padding-x: k-math-div( $pivotgrid-spacer, 2) !default;
 $pivotgrid-treeview-padding-y: 0px !default;
 
 // Legacy variables
@@ -101,7 +101,7 @@ $pivotgrid-alt-text: $grid-header-text !default;
 $pivotgrid-chrome-border: $grid-border !default;
 
 $pivotgrid-container-bg: $component-bg !default;
-$pivotgrid-row-headers-bg: try-shade( $component-bg, 2 ) !default;
+$pivotgrid-row-headers-bg: k-try-shade( $component-bg, 2 ) !default;
 
 $pivotgrid-button-bg: null !default;
 $pivotgrid-button-text: null !default;

package/scss/popup/_variables.scss

@@ -7,10 +7,10 @@ $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;
 $popup-border: $component-border !default;
-$popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
+$popup-shadow: 0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 ) !default;

package/scss/progressbar/_variables.scss

@@ -7,14 +7,14 @@ $progressbar-font-family: $font-family !default;
 $progressbar-font-size: $font-size-sm !default;
 $progressbar-line-height: 1 !default;
 
-$progressbar-bg: try-shade( $component-bg, 1 ) !default;
+$progressbar-bg: k-try-shade( $component-bg, 1 ) !default;
 $progressbar-text: $component-text !default;
 $progressbar-border: $component-border !default;
 $progressbar-gradient: null !default;
 
 $progressbar-fill-bg: $primary !default;
 $progressbar-fill-text: contrast-wcag( $progressbar-fill-bg ) !default;
-$progressbar-fill-border: try-shade( $progressbar-fill-bg ) !default;
+$progressbar-fill-border: k-try-shade( $progressbar-fill-bg ) !default;
 $progressbar-fill-gradient: null !default;
 
 $progressbar-indeterminate-bg: $progressbar-bg !default;

package/scss/radio/_variables.scss

@@ -10,19 +10,19 @@ $kendo-radio-border-width: 1px !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: null !default;
 
 /// 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: $selected-bg !default;
 $rating-icon-hover-text: $selected-bg !default;
 $rating-icon-focused-text: $selected-bg !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;

package/scss/scheduler/_variables.scss

@@ -22,7 +22,7 @@ $scheduler-event-min-height: 25px !default;
 $scheduler-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y}) ) !default;
 
-$scheduler-event-bg: tint( $selected-bg, 2 ) !default;
+$scheduler-event-bg: k-color-tint( $selected-bg, 2 ) !default;
 $scheduler-event-text: $selected-text !default;
 $scheduler-event-border: null !default;
 $scheduler-event-gradient: null !default;
@@ -38,31 +38,31 @@ $scheduler-event-selected-bg: $selected-bg !default;
 $scheduler-event-selected-text: $selected-text !default;
 $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
-$scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$scheduler-event-selected-shadow: inset 0 0 0 2px rgba( black, .13 ) !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-em !default;
 $scheduler-datecolumn-width: 12em !default;
 $scheduler-timecolumn-width: 11em !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, 3 ) !default;
+$scheduler-yearview-padding-x: k-map-get( $spacing, 3 ) !default;
 $scheduler-yearview-padding-y: $scheduler-yearview-padding-x !default;
 
-$scheduler-yearview-calendar-gap: map-get( $spacing, 3 ) !default;
+$scheduler-yearview-calendar-gap: k-map-get( $spacing, 3 ) !default;
 
 $scheduler-yearview-indicator-size: 3px !default;
 $scheduler-yearview-indicator-calc-offset-top: calc( #{$calendar-cell-size} - (#{$calendar-cell-padding-y} * 2)) !default;
@@ -77,7 +77,7 @@ $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: $padding-y !default;
 $scheduler-tooltip-month-font-size: $font-size-sm !default;

package/scss/scrollview/_variables.scss

@@ -12,8 +12,8 @@ $scrollview-pagebutton-size: 10px !default;
 $scrollview-pagebutton-bg: $kendo-button-bg !default;
 $scrollview-pagebutton-border: $kendo-button-border !default;
 $scrollview-pagebutton-primary-bg: $primary !default;
-$scrollview-pagebutton-primary-border: try-shade( $primary, 2 ) !default;
-$scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$scrollview-pagebutton-primary-border: k-try-shade( $primary, 2 ) !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, 1 ) - map-get($spacing, thin) !default;
+$kendo-signature-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin ) !default;
 $kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-signature-padding-x-lg: k-map-get( $spacing, 2 ) !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

@@ -20,17 +20,17 @@ $slider-draghandle-active-size: null !default;
 
 $slider-draghandle-bg: $primary !default;
 $slider-draghandle-text: contrast-wcag( $primary ) !default;
-$slider-draghandle-border: try-shade( $primary, 2 ) !default;
+$slider-draghandle-border: k-try-shade( $primary, 2 ) !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: try-shade( $primary, 1 ) !default;
+$slider-draghandle-hovered-bg: k-try-shade( $primary, 1 ) !default;
 $slider-draghandle-hovered-text: null !default;
-$slider-draghandle-hovered-border: try-shade( $slider-draghandle-hovered-bg, 2 ) !default;
+$slider-draghandle-hovered-border: k-try-shade( $slider-draghandle-hovered-bg, 2 ) !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: try-shade( $primary, 2 ) !default;
+$slider-draghandle-pressed-bg: k-try-shade( $primary, 2 ) !default;
 $slider-draghandle-pressed-text: null !default;
-$slider-draghandle-pressed-border: try-shade( $slider-draghandle-pressed-bg, 2 ) !default;
+$slider-draghandle-pressed-border: k-try-shade( $slider-draghandle-pressed-bg, 2 ) !default;
 $slider-draghandle-pressed-gradient: null !default;
 
 $slider-draghandle-focused-shadow: 0 0 4px 0 rgba( $slider-draghandle-border, .75 ) !default;
@@ -40,6 +40,6 @@ $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-shade( $component-bg, 1 ) !default;
+$slider-track-bg: k-try-shade( $component-bg, 1 ) !default;
 $slider-selection-bg: $primary !default;
 $slider-disabled-opacity: null !default;

package/scss/splitter/_variables.scss

@@ -17,7 +17,7 @@ $splitter-drag-icon-margin: 7px !default;
 $splitbar-bg: $base-bg !default;
 $splitbar-text: $base-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: $selected-bg !default;

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;
 
@@ -45,11 +45,11 @@ $stepper-indicator-done-bg: $primary !default;
 $stepper-indicator-done-text: contrast-wcag( $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-bg: k-color-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-border: $stepper-indicator-done-disabled-bg !default;
 

package/scss/switch/_variables.scss

@@ -67,7 +67,7 @@ $kendo-switch-off-track-focus-border: null !default;
 $kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-ring: 0 0 3px 1px rgba( if($dark-theme, $white, $black), .25 ) !default;
+$kendo-switch-off-track-focus-ring: 0 0 3px 1px rgba( if( $dark-theme, $white, $black ), .25 ) !default;
 
 /// The background of the track when the disabled switch is not checked.
 /// @group switch
@@ -84,7 +84,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: try-shade( $kendo-switch-off-track-bg ) !default;
+$kendo-switch-off-thumb-bg: k-try-shade( $kendo-switch-off-track-bg ) !default;
 /// The text color of the thumb when the switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;
@@ -97,7 +97,7 @@ $kendo-switch-off-thumb-gradient: $base-gradient !default;
 
 /// The background of the thumb when the hovered switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-bg: try-shade( $kendo-switch-off-thumb-bg ) !default;
+$kendo-switch-off-thumb-hover-bg: k-try-shade( $kendo-switch-off-thumb-bg ) !default;
 /// The text color of the thumb when the hovered switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-text: null !default;
@@ -149,7 +149,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track wen the focused switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 0 0 3px 1px rgba( if($dark-theme, $white, $black), .25 ) !default;
+$kendo-switch-on-track-focus-ring: 0 0 3px 1px rgba( if( $dark-theme, $white, $black ), .25 ) !default;
 
 /// The background of the track when the disabled switch is checked.
 /// @group switch
@@ -172,20 +172,20 @@ $kendo-switch-on-thumb-bg: $primary !default;
 $kendo-switch-on-thumb-text: null !default;
 /// The border color of the thumb when the switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-border: try-shade( $kendo-switch-on-thumb-bg ) !default;
+$kendo-switch-on-thumb-border: k-try-shade( $kendo-switch-on-thumb-bg ) !default;
 /// The background gradient of the thumb when the switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-gradient: $base-gradient !default;
 
 /// The background of the thumb when the hovered switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-bg: try-shade( $kendo-switch-on-thumb-bg ) !default;
+$kendo-switch-on-thumb-hover-bg: k-try-shade( $kendo-switch-on-thumb-bg ) !default;
 /// The text color of the thumb when the hovered switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-border: try-shade( $kendo-switch-on-thumb-hover-bg ) !default;
+$kendo-switch-on-thumb-hover-border: k-try-shade( $kendo-switch-on-thumb-hover-bg ) !default;
 /// The background gradient of the thumb when the hovered switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-gradient: null !default;

package/scss/table/_variables.scss

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

package/scss/tabstrip/_variables.scss

@@ -79,17 +79,17 @@ $tabstrip-item-selected-gradient: false !default;
 
 $tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
 
-$tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+$tabstrip-item-dragging-shadow: 0px 3px 4px rgba( black, .15 ) !default;
 
 $tabstrip-indicator-size: null !default;
 $tabstrip-indicator-color: null !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: 1px !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,18 +33,18 @@ $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-y: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-header-padding-x: $taskboard-column-header-padding-y !default;
-$taskboard-column-header-gap: ( $taskboard-spacer / 4 ) !default;
-$taskboard-column-header-actions-gap: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-header-gap: k-math-div( $taskboard-spacer, 4 ) !default;
+$taskboard-column-header-actions-gap: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-header-font-weight: 500 !default;
 $taskboard-column-header-text: $header-text !default;
 
 $taskboard-column-cards-padding-y: null !default;
 $taskboard-column-cards-padding-x: null !default;
-$taskboard-column-cards-gap: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-cards-gap: k-math-div( $taskboard-spacer, 2 ) !default;
 
 $taskboard-pane-width: $taskboard-column-width !default;
 $taskboard-pane-padding-y: null !default;
@@ -76,12 +76,12 @@ $taskboard-card-shadow: $card-shadow !default;
 
 $taskboard-card-category-border-width: 4px !default;
 
-$taskboard-card-focus-border: try-shade( $taskboard-card-border, 18% ) !default;
+$taskboard-card-focus-border: k-try-shade( $taskboard-card-border, 18% ) !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: tint( $primary-lighter, 5 ) !default;
+$taskboard-card-selected-border: k-color-tint( $primary-lighter, 5 ) !default;
 $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !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-lg !default;
 
 $tilelayout-bg: $base-bg !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,9 +13,9 @@ $timeline-mobile-spacing-y: 16px !default;
 $timeline-track-arrow-width: 30px !default;
 $timeline-track-arrow-height: 30px !default;
 
-$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-border: true-mix(#000000, $body-bg, 4.8%) !default;
+$timeline-track-arrow-disabled-text: k-true-mix( $kendo-button-text, $body-bg, 65% ) !default;
+$timeline-track-arrow-disabled-bg: k-true-mix( $kendo-button-bg, $body-bg, 65% ) !default;
+$timeline-track-arrow-disabled-border: k-true-mix( #000000, $body-bg, 4.8% ) !default;
 
 $timeline-track-size: 6px !default;
 $timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
@@ -27,7 +27,7 @@ $timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-
 $timeline-track-bg: $kendo-button-bg !default;
 $timeline-track-border-color: $kendo-button-border !default;
 
-$timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($primary, .4) !default;
+$timeline-track-item-focus-shadow: 0 3px 4px 0 rgba( $primary, .4 ) !default;
 
 $timeline-track-event-offset: 36px !default;
 

package/scss/timeselector/_variables.scss

@@ -8,8 +8,8 @@ $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;
@@ -29,7 +29,7 @@ $time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-l
 $time-list-highlight-bg: $component-bg !default;
 $time-list-highlight-border: $component-border !default;
 
-$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+$time-list-focused-bg: rgba( black, .04 ) !default;
 
 
 // Time selector sizes

package/scss/toolbar/_variables.scss

@@ -2,10 +2,10 @@
 
 /// 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: 1px !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
@@ -25,3 +25,5 @@ $toolbar-shadow: null !default;
 $toolbar-separator-border: inherit !default;
 
 $toolbar-input-width: 10em !default;
+
+$toolbar-item-shadow: $kendo-button-focus-shadow !default;

package/scss/tooltip/_variables.scss

@@ -14,22 +14,22 @@ $tooltip-title-line-height: 1 !default;
 
 $tooltip-callout-size: 6px !default;
 
-$tooltip-bg: rgba( contrast-wcag( $body-bg ), .75 ) !default;
-$tooltip-text: contrast-wcag( $tooltip-bg ) !default;
+$tooltip-bg: rgba( k-contrast-color( $body-bg ), .75 ) !default;
+$tooltip-text: k-contrast-color( $tooltip-bg ) !default;
 $tooltip-border: $tooltip-bg !default;
 
 $tooltip-primary-bg: $primary !default;
 $tooltip-primary-text: contrast-wcag( $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;