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

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: 1px !default;
 
 $calendar-header-bg: $header-bg !default;
@@ -20,15 +20,15 @@ $calendar-header-border: $header-border !default;
 $calendar-header-gradient: $header-gradient !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: map-get( $spacing, 1 ) !default;
+$calendar-cell-padding-x: k-map-get( $spacing, 1 ) !default;
 $calendar-cell-padding-y: $calendar-cell-padding-x !default;
 $calendar-cell-line-height: $calendar-line-height !default;
 $calendar-cell-border-radius: $kendo-border-radius-md !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, 2 ) !default;
-$calendar-caption-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-caption-padding-x: k-map-get( $spacing, 2 ) !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;
@@ -86,7 +86,7 @@ $calendar-cell-selected-hover-text: $selected-hover-text !default;
 $calendar-cell-selected-hover-border: $selected-hover-border !default;
 $calendar-cell-selected-hover-gradient: null !default;
 
-$calendar-cell-focused-shadow: inset 0 0 0 2px rgba( $black, .08 ) !default;
+$calendar-cell-focused-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
 $calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
 
 
@@ -100,10 +100,10 @@ $calendar-navigation-border: $calendar-header-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;
 
@@ -115,20 +115,20 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 $kendo-calendar-sm-font-size: $font-size-md !default;
 $kendo-calendar-sm-line-height: $line-height-md !default;
 $kendo-calendar-sm-cell-size: 28px !default;
-$kendo-calendar-sm-cell-padding-x: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
-$kendo-calendar-sm-cell-padding-y: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
+$kendo-calendar-sm-cell-padding-x: k-map-get( $spacing, 1) - k-map-get( $spacing, thin ) !default;
+$kendo-calendar-sm-cell-padding-y: k-map-get( $spacing, 1) - k-map-get( $spacing, thin ) !default;
 
 $kendo-calendar-md-font-size: $font-size-md !default;
 $kendo-calendar-md-line-height: $line-height-md !default;
 $kendo-calendar-md-cell-size: 32px !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, 2 ) !default;
-$kendo-calendar-lg-cell-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-map-get( $spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-map-get( $spacing, 2 ) !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: 280px !default;
 $captcha-font-family: $font-family !default;
@@ -14,6 +14,6 @@ $captcha-image-wrap-gap: $captcha-spacer !default;
 
 $captcha-image-controls-gap: $captcha-spacer !default;
 
-$captcha-validation-message-margin-top: $captcha-spacer / 2 !default;
+$captcha-validation-message-margin-top: k-math-div( $captcha-spacer, 2 ) !default;
 $captcha-validation-message-font-size: $font-size-sm !default;
 $captcha-validation-message-font-style: italic !default;

package/scss/card/_variables.scss

@@ -1,6 +1,6 @@
 // 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: 1px !default;
 $card-border-radius: $kendo-border-radius-lg !default;
 $card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
@@ -8,7 +8,7 @@ $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
 $card-line-height: $line-height !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: $header-text !default;
 $card-header-border: $header-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;
@@ -37,14 +37,14 @@ $card-footer-bg: null !default;
 $card-footer-text: $header-text !default;
 $card-footer-border: $header-border !default;
 
-$card-title-margin-bottom: map-get( $spacing, sm ) !default;
+$card-title-margin-bottom: k-map-get( $spacing, sm ) !default;
 $card-title-font-size: $h5-font-size !default;
 $card-title-font-family: null !default;
 $card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
-$card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
+$card-subtitle-margin-bottom: k-map-get( $spacing, sm ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
 $card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !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: 0px !default;
 $card-deck-scroll-button-offset: -$kendo-button-border-width !default;

package/scss/chat/_variables.scss

@@ -52,9 +52,9 @@ $chat-border: $app-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;

package/scss/checkbox/_variables.scss

@@ -7,19 +7,19 @@ $kendo-checkbox-border-width: 1px !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;
 
@@ -68,7 +68,7 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
 $kendo-checkbox-focus-border: null !default;
 /// Box shadow of focused checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 2px rgba( black, .06 ) !default;
 /// Border color of focused and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: null !default;
@@ -135,14 +135,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/_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, 92% ) !default;
+$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !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: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !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: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !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: 272px !default;
 $coloreditor-border-width: 1px !default;
@@ -12,13 +12,13 @@ $coloreditor-text: $component-text !default;
 $coloreditor-border: $component-border !default;
 
 $coloreditor-focus-border: null !default;
-$coloreditor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$coloreditor-focus-shadow: 1px 1px 7px 1px rgba( black, .3 ) !default;
 
 $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
-$coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
+$coloreditor-header-actions-gap: k-math-div( $coloreditor-spacer, 1.5 ) !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: 272px !default;
 $colorgradient-border-width: 1px !default;
@@ -15,7 +15,7 @@ $colorgradient-text: $component-text !default;
 $colorgradient-border: $component-border !default;
 
 $colorgradient-focus-border: null !default;
-$colorgradient-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$colorgradient-focus-shadow: 1px 1px 7px 1px rgba( black, .3 ) !default;
 
 
 $colorgradient-canvas-border-radius: $kendo-border-radius-md !default;
@@ -35,18 +35,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: 46px !default;
-$colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
-$colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
+$colorgradient-input-gap: k-math-div( $colorgradient-spacer, 1.5 ) !default;
+$colorgradient-input-label-gap: k-math-div( $colorgradient-spacer, 3 ) !default;
 $colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
-$colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
+$colorgradient-contrast-spacer: k-math-div( $colorgradient-spacer, 1.5 ) !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/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";

package/scss/dataviz/_variables.scss

@@ -2,50 +2,50 @@
 /// The first base series color and its light and dark shades.
 /// @group charts
 $series-a: #ff6358 !default;
-$series-a-dark: mix(black, $series-a, 25%) !default;
-$series-a-darker: mix(black, $series-a, 50%) !default;
-$series-a-light: mix(white, $series-a, 25%) !default;
-$series-a-lighter: mix(white, $series-a, 50%) !default;
+$series-a-dark: k-color-mix( black, $series-a, 25% ) !default;
+$series-a-darker: k-color-mix( black, $series-a, 50% ) !default;
+$series-a-light: k-color-mix( white, $series-a, 25% ) !default;
+$series-a-lighter: k-color-mix( white, $series-a, 50% ) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
 $series-b: #ffd246 !default;
-$series-b-dark: mix(black, $series-b, 25%) !default;
-$series-b-darker: mix(black, $series-b, 50%) !default;
-$series-b-light: mix(white, $series-b, 25%) !default;
-$series-b-lighter: mix(white, $series-b, 50%) !default;
+$series-b-dark: k-color-mix( black, $series-b, 25% ) !default;
+$series-b-darker: k-color-mix( black, $series-b, 50% ) !default;
+$series-b-light: k-color-mix( white, $series-b, 25% ) !default;
+$series-b-lighter: k-color-mix( white, $series-b, 50% ) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
 $series-c: #78d237 !default;
-$series-c-dark: mix(black, $series-c, 25%) !default;
-$series-c-darker: mix(black, $series-c, 50%) !default;
-$series-c-light: mix(white, $series-c, 25%) !default;
-$series-c-lighter: mix(white, $series-c, 50%) !default;
+$series-c-dark: k-color-mix( black, $series-c, 25% ) !default;
+$series-c-darker: k-color-mix( black, $series-c, 50% ) !default;
+$series-c-light: k-color-mix( white, $series-c, 25% ) !default;
+$series-c-lighter: k-color-mix( white, $series-c, 50% ) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
 $series-d: #28b4c8 !default;
-$series-d-dark: mix(black, $series-d, 25%) !default;
-$series-d-darker: mix(black, $series-d, 50%) !default;
-$series-d-light: mix(white, $series-d, 25%) !default;
-$series-d-lighter: mix(white, $series-d, 50%) !default;
+$series-d-dark: k-color-mix( black, $series-d, 25% ) !default;
+$series-d-darker: k-color-mix( black, $series-d, 50% ) !default;
+$series-d-light: k-color-mix( white, $series-d, 25% ) !default;
+$series-d-lighter: k-color-mix( white, $series-d, 50% ) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
 $series-e: #2d73f5 !default;
-$series-e-dark: mix(black, $series-e, 25%) !default;
-$series-e-darker: mix(black, $series-e, 50%) !default;
-$series-e-light: mix(white, $series-e, 25%) !default;
-$series-e-lighter: mix(white, $series-e, 50%) !default;
+$series-e-dark: k-color-mix( black, $series-e, 25% ) !default;
+$series-e-darker: k-color-mix( black, $series-e, 50% ) !default;
+$series-e-light: k-color-mix( white, $series-e, 25% ) !default;
+$series-e-lighter: k-color-mix( white, $series-e, 50% ) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
 $series-f: #aa46be !default;
-$series-f-dark: mix(black, $series-f, 25%) !default;
-$series-f-darker: mix(black, $series-f, 50%) !default;
-$series-f-light: mix(white, $series-f, 25%) !default;
-$series-f-lighter: mix(white, $series-f, 50%) !default;
+$series-f-dark: k-color-mix( black, $series-f, 25% ) !default;
+$series-f-darker: k-color-mix( black, $series-f, 50% ) !default;
+$series-f-light: k-color-mix( white, $series-f, 25% ) !default;
+$series-f-lighter: k-color-mix( white, $series-f, 50% ) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -114,7 +114,7 @@ $chart-border: $component-border !default;
 
 $chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 $chart-crosshair-shared-tooltip-color: $chart-text !default;
-$chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
+$chart-crosshair-shared-tooltip-background: k-try-shade( $chart-bg, 1 ) !default;
 $chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
 
 $chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;

package/scss/drawer/_variables.scss

@@ -8,15 +8,15 @@ $drawer-font-size: $font-size !default;
 $drawer-line-height: $line-height !default;
 $drawer-content-padding-x: $padding-x !default;
 $drawer-content-padding-y: $padding-y !default;
-$drawer-item-level-padding-x: map-get( $spacing, 4 ) !default;
+$drawer-item-level-padding-x: k-map-get( $spacing, 4 ) !default;
 
 $drawer-item-level-count: 5 !default;
 
 $drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
 $drawer-scrollbar-bg: #dedede !default;
 $drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
+$drawer-scrollbar-hovered-color: rgba( 156, 156, 156, 1 ) !default;
 
 $drawer-item-padding-x: $padding-x !default;
 $drawer-item-padding-y: $padding-x !default;
@@ -24,7 +24,7 @@ $drawer-item-font-size: 16px !default;
 $drawer-item-line-height: $line-height-lg !default;
 $drawer-icon-size: $icon-size !default;
 
-$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
+$drawer-mini-initial-width: calc( 4 * #{$drawer-item-padding-x} + #{$drawer-icon-size} ) !default;
 
 $drawer-hovered-bg: $hovered-bg !default;
 $drawer-hovered-text: $hovered-text !default;

package/scss/dropdowntree/_variables.scss

@@ -1,3 +1,3 @@
 // Dropdowntree
-$dropdowntree-popup-padding-x: map-get( $spacing, 2 ) !default;
-$dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-x: k-map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-y: k-map-get( $spacing, 2 ) !default;

package/scss/dropzone/_variables.scss

@@ -1,6 +1,6 @@
 // Dropzone
-$dropzone-padding-x: map-get( $spacing, 2 ) !default;
-$dropzone-padding-y: map-get( $spacing, 2 ) !default;
+$dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
+$dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
 $dropzone-border-width: 1px !default;
 $dropzone-min-height: 220px !default;
 
@@ -13,12 +13,12 @@ $dropzone-text: $base-text !default;
 $dropzone-border: $base-border !default;
 
 $dropzone-icon-size: ( $icon-size * 3 ) !default;
-$dropzone-icon-spacing: map-get( $spacing, 6 ) !default;
-$dropzone-icon-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-icon-spacing: k-map-get( $spacing, 6 ) !default;
+$dropzone-icon-text: k-try-tint( $dropzone-text, 4 ) !default;
 $dropzone-icon-hover-text: $primary !default;
 
 $dropzone-hint-font-size: null !default;
-$dropzone-hint-spacing: map-get( $spacing, 2 ) !default;
+$dropzone-hint-spacing: k-map-get( $spacing, 2 ) !default;
 $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;

package/scss/editor/_variables.scss

@@ -10,7 +10,7 @@ $editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 $editor-selected-text: $primary-contrast !default;
 $editor-selected-bg: $primary !default;
 
-$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+$editor-highlighted-bg: k-color-mix( $primary, #ffffff, 20% ) !default;
 
 $editor-export-tool-icon-margin-x: .25em !default;
 

package/scss/expansion-panel/_variables.scss

@@ -20,7 +20,7 @@ $expander-header-bg: transparent !default;
 $expander-header-text: $expander-text !default;
 $expander-header-border: null !default;
 
-$expander-header-hover-bg: shade($expander-bg) !default;
+$expander-header-hover-bg: k-color-shade( $expander-bg, 1 ) !default;
 
 $expander-header-focused-bg: null !default;
 $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;