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

package/scss/dataviz/_variables.scss

@@ -2,50 +2,50 @@
 /// The first base series color and its light and dark shades.
 /// @group charts
 $series-a: get-base-hue( purple, 500 ) !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: get-base-hue( blue, 500 ) !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: get-base-hue( teal, 500 ) !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: get-base-hue( yellow, 500 ) !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: get-base-hue( red, 500 ) !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: get-base-hue( green, 500 ) !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: 12px !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,24 +1,24 @@
 // 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;
 
 $dropzone-font-family: $font-family !default;
 $dropzone-font-size: $font-size !default;
-$dropzone-line-height: ( 20 / 14 ) !default;
+$dropzone-line-height: k-math-div( 20, 14 ) !default;
 
-$dropzone-bg: try-shade( $base-bg, 1 ) !default;
+$dropzone-bg: k-try-shade( $base-bg, 1 ) !default;
 $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: .5em !default;
 

package/scss/expansion-panel/_variables.scss

@@ -14,13 +14,13 @@ $expander-bg: $component-bg !default;
 $expander-text: $component-text !default;
 $expander-border: $component-border !default;
 
-$expander-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$expander-focus-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
 
 $expander-header-bg: transparent !default;
 $expander-header-text: $expander-text !default;
 $expander-header-border: null !default;
 
-$expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
+$expander-header-hover-bg: rgba( black, .04 ) !default;
 
 $expander-header-focused-bg: rgba( black, .12 ) !default;
 $expander-header-focused-shadow: none !default;

package/scss/fab/_theme.scss

@@ -5,7 +5,7 @@
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-color( $color );
             background-color: $color;
         }
     }
@@ -14,8 +14,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: true-mix( #ffffff, $color, 8%);
-            background-color: true-mix( #ffffff, $color, 8%);
+            border-color: k-true-mix( #ffffff, $color, 8%);
+            background-color: k-true-mix( #ffffff, $color, 8%);
         }
     }
 
@@ -23,8 +23,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-focus.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:focus {
-            border-color: true-mix( #ffffff, $color, 12%);
-            background-color: true-mix( #ffffff, $color, 12%);
+            border-color: k-true-mix( #ffffff, $color, 12%);
+            background-color: k-true-mix( #ffffff, $color, 12%);
         }
     }
 
@@ -33,8 +33,8 @@
         .k-active.k-fab-solid-#{$name},
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
-            border-color: true-mix( #ffffff, $color, 16%);
-            background-color: true-mix( #ffffff, $color, 16%);
+            border-color: k-true-mix( #ffffff, $color, 16%);
+            background-color: k-true-mix( #ffffff, $color, 16%);
             box-shadow: $kendo-fab-active-shadow;
         }
     }
@@ -44,9 +44,9 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            border-color: try-tint( try-shade( $body-bg, 12% ), 5);
-            background-color: try-tint( try-shade( $body-bg, 12% ), 5);
-            color: tint( $disabled-text, 4);
+            border-color: k-try-tint( k-try-shade( $body-bg, 12% ), 5);
+            background-color: k-try-tint( k-try-shade( $body-bg, 12% ), 5);
+            color: k-color-tint( $disabled-text, 4);
             opacity: 1;
         }
     }
@@ -72,25 +72,25 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: true-mix( #000000, $kendo-fab-item-icon-border, 8%);
-        background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
-        color: true-mix( #000000, $kendo-fab-item-icon-text, 8%);
+        border-color: k-true-mix( #000000, $kendo-fab-item-icon-border, 8%);
+        background-color: k-true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
+        color: k-true-mix( #000000, $kendo-fab-item-icon-text, 8%);
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        border-color: true-mix( #000000, $kendo-fab-item-icon-border, 12%);
-        background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
-        color: true-mix( #000000, $kendo-fab-item-icon-text, 12%);
+        border-color: k-true-mix( #000000, $kendo-fab-item-icon-border, 12%);
+        background-color: k-true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
+        color: k-true-mix( #000000, $kendo-fab-item-icon-text, 12%);
     }
 
     // Active state
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
-        background-color: true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
+        border-color: k-true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
+        background-color: k-true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
     }
 
     // Disabled state
@@ -101,8 +101,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: try-tint( $kendo-fab-item-bg, 8 );
-            color: try-tint( $kendo-fab-item-text, 8 );
+            background-color: k-try-tint( $kendo-fab-item-bg, 8 );
+            color: k-try-tint( $kendo-fab-item-text, 8 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -39,18 +39,18 @@ $kendo-fab-icon-width: 20px !default;
 $kendo-fab-icon-height: $kendo-fab-icon-width !default;
 /// FAB icon spacing.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: map-get( $spacing, 1 ) * 1.5 !default;
+$kendo-fab-icon-spacing: k-map-get( $spacing, 1 ) * 1.5 !default;
 
 /// FAB items horizontal padding.
 /// @group floating-action-button
 $kendo-fab-items-padding-x: 0px !default;
 /// FAB items vertical padding.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+$kendo-fab-items-padding-y: k-map-get( $spacing, 4 ) !default;
 
 /// FAB item text horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-map-get( $spacing, 1 ) !default;
 /// FAB item text vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
@@ -69,7 +69,7 @@ $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: k-map-get( $spacing, 2 ) !default;
 /// FAB item icon vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -92,13 +92,13 @@ $kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12) !default;
+$kendo-fab-shadow: 0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ) !default;
 /// The disabled shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0px 3px 5px -1px try-tint(rgba(0, 0, 0, .2), .5), 0px 6px 10px try-tint(rgba(0, 0, 0, .14), .5), 0px 1px 18px try-tint(rgba(0, 0, 0, .12), .5) !default;
+$kendo-fab-disabled-shadow: 0px 3px 5px -1px k-try-tint( rgba( black, .2 ), .5 ), 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 ) !default;
 /// The active shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-active-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12) !default;
+$kendo-fab-active-shadow: 0px 5px 5px -3px rgba( black, .2 ), 0px 8px 10px 1px rgba( black, .14 ), 0px 3px 14px 2px rgba( black, .12 ) !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button

package/scss/filemanager/_variables.scss

@@ -1,5 +1,5 @@
 // File manager
-$filemanager-spacer: map-get( $spacing, 4 ) !default;
+$filemanager-spacer: k-map-get( $spacing, 4 ) !default;
 $filemanager-border-width: 1px !default;
 $filemanager-font-family: $font-family !default;
 $filemanager-font-size: $font-size !default;
@@ -9,7 +9,7 @@ $filemanager-text: $component-text !default;
 $filemanager-border: $component-border !default;
 
 $filemanager-toolbar-border-width: $filemanager-border-width !default;
-$filemanager-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$filemanager-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $filemanager-toolbar-text: null !default;
 $filemanager-toolbar-border: null !default;
 $filemanager-toolbar-gradient: null !default;
@@ -22,8 +22,8 @@ $filemanager-navigation-bg: null !default;
 $filemanager-navigation-text: null !default;
 $filemanager-navigation-border: null !default;
 
-$filemanager-breadcrumb-padding-x: map-get( $spacing, 2 ) !default;
-$filemanager-breadcrumb-padding-y: map-get( $spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-x: k-map-get( $spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-y: k-map-get( $spacing, 2 ) !default;
 $filemanager-breadcrumb-border-width: $filemanager-border-width !default;
 $filemanager-breadcrumb-bg: $filemanager-toolbar-bg !default;
 $filemanager-breadcrumb-text: null !default;
@@ -33,8 +33,8 @@ $filemanager-listview-bg: null !default;
 $filemanager-listview-text: null !default;
 $filemanager-listview-border: null !default;
 
-$filemanager-listview-item-padding-x: map-get( $spacing, 4 ) !default;
-$filemanager-listview-item-padding-y: map-get( $spacing, 4 ) !default;
+$filemanager-listview-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$filemanager-listview-item-padding-y: k-map-get( $spacing, 4 ) !default;
 $filemanager-listview-item-width: 120px !default;
 $filemanager-listview-item-height: 120px !default;
 $filemanager-listview-item-bg: null !default;
@@ -43,7 +43,7 @@ $filemanager-listview-item-border: null !default;
 
 $filemanager-listview-item-icon-size: ($icon-size * 3) !default;
 $filemanager-listview-item-icon-bg: null !default;
-$filemanager-listview-item-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-listview-item-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-listview-item-icon-border: null !default;
 $filemanager-listview-item-icon-selected-bg: null !default;
 $filemanager-listview-item-icon-selected-text: inherit !default;
@@ -64,5 +64,5 @@ $filemanager-preview-border: null !default;
 
 $filemanager-preview-icon-size: ($icon-size * 6) !default;
 $filemanager-preview-icon-bg: null !default;
-$filemanager-preview-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-preview-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-preview-icon-border: null !default;

package/scss/filter/_variables.scss

@@ -9,3 +9,5 @@ $filter-operator-dropdown-width: 15em !default;
 
 $filter-preview-field-text: $primary !default;
 $filter-preview-operator-text: $subtle-text !default;
+
+$filter-toolbar-focus-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/gantt/_variables.scss

@@ -12,12 +12,12 @@ $gantt-treelist-bg: null !default;
 $gantt-treelist-text: null !default;
 $gantt-treelist-border: null !default;
 
-$gantt-nonwork-bg: rgba( contrast-wcag( $gantt-bg ), .025 ) !default;
+$gantt-nonwork-bg: rgba( k-contrast-color( $gantt-bg ), .025 ) !default;
 $gantt-nonwork-text: null !default;
 $gantt-nonwork-border: null !default;
 
 $gantt-line-size: 2px !default;
-$gantt-line-fill: mix( $panel-text, $panel-bg ) !default;
+$gantt-line-fill: k-color-mix( $panel-text, $panel-bg ) !default;
 $gantt-line-selected-fill: $selected-bg !default;
 
 $gantt-dot-size: 8px !default;
@@ -32,19 +32,19 @@ $gantt-milestone-border: $primary !default;
 $gantt-milestone-selected-bg: $secondary !default;
 $gantt-milestone-selected-border: $secondary !default;
 
-$gantt-summary-bg: mix( $primary, $gantt-bg ) !default;
+$gantt-summary-bg: k-color-mix( $primary, $gantt-bg ) !default;
 $gantt-summary-progress-bg: $primary !default;
-$gantt-summary-selected-bg: mix( $secondary, $gantt-bg ) !default;
+$gantt-summary-selected-bg: k-color-mix( $secondary, $gantt-bg ) !default;
 $gantt-summary-progress-selected-bg: $secondary !default;
 
-$gantt-task-padding-x: map-get( $spacing, 2 ) !default;
-$gantt-task-padding-y: map-get( $spacing, 1 ) !default;
+$gantt-task-padding-x: k-map-get( $spacing, 2 ) !default;
+$gantt-task-padding-y: k-map-get( $spacing, 1 ) !default;
 $gantt-task-border-width: 0px !default;
-$gantt-task-bg: mix( $primary, $gantt-bg ) !default;
+$gantt-task-bg: k-color-mix( $primary, $gantt-bg ) !default;
 $gantt-task-text: $primary-contrast !default;
 $gantt-task-border: null !default;
 $gantt-task-progress-bg: $primary !default;
-$gantt-task-selected-bg: mix( $secondary, $gantt-bg ) !default;
+$gantt-task-selected-bg: k-color-mix( $secondary, $gantt-bg ) !default;
 $gantt-task-selected-text: $secondary-contrast !default;
 $gantt-task-selected-border: null !default;
 $gantt-task-progress-selected-bg: $secondary !default;
@@ -78,10 +78,10 @@ $gantt-planned-bg: $primary !default;
 $gantt-planned-border: $gantt-planned-bg !default;
 
 $gantt-delayed-bg: $error !default;
-$gantt-delayed-bg-lighter: tint($gantt-delayed-bg, 5) !default;
+$gantt-delayed-bg-lighter: k-color-tint($gantt-delayed-bg, 5) !default;
 
 $gantt-advanced-bg: $success !default;
-$gantt-advanced-bg-lighter: tint($gantt-advanced-bg, 5) !default;
+$gantt-advanced-bg-lighter: k-color-tint($gantt-advanced-bg, 5) !default;
 
 $gantt-action-on-offset-text: #000000 !default;
 $gantt-offset-resize-handler-top: 50% !default;

package/scss/grid/_theme.scss

@@ -1,7 +1,7 @@
 @import "~@progress/kendo-theme-default/scss/grid/_theme.scss";
 
 @include exports ("grid/theme/material") {
-    $grid-filter-button-focus: rgba(0, 0, 0, .12) !default;
+    $grid-filter-button-focus: rgba( black, .12 ) !default;
 
     .k-grid {
 

package/scss/grid/_variables.scss

@@ -78,7 +78,7 @@ $grid-alt-border: null !default;
 
 /// Background color of hovered rows in grid
 /// @group grid
-$grid-hovered-bg: rgba( contrast-wcag( $grid-bg ), .07 ) !default;
+$grid-hovered-bg: rgba( k-contrast-color( $grid-bg ), .07 ) !default;
 /// Text color of hovered rows in grid
 /// @group grid
 $grid-hovered-text: null !default;
@@ -88,7 +88,7 @@ $grid-hovered-border: $grid-border !default;
 
 /// Background color of selected rows in grid
 /// @group grid
-$grid-selected-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$grid-selected-bg: rgba( k-contrast-color( $grid-bg ), .04 ) !default;
 /// Text color of selected rows in grid
 /// @group grid
 $grid-selected-text: null !default;
@@ -99,11 +99,11 @@ $grid-selected-border: $grid-border !default;
 $grid-grouping-row-bg: transparent !default;
 $grid-grouping-row-text: $grid-text !default;
 
-$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$grid-sorted-bg: rgba( k-contrast-color( $grid-bg ), .04 ) !default;
 $grid-sorting-indicator-text: $grid-header-text !default;
 $grid-sorting-index-font-size: $font-size-sm !default;
 $grid-sorting-index-height: $icon-size !default;
-$grid-sorting-index-spacing-y: $icon-spacing / 2 !default;
+$grid-sorting-index-spacing-y: k-math-div( $icon-spacing, 2 ) !default;
 $grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
 
 
@@ -112,11 +112,11 @@ $grid-focused-shadow: $kendo-list-item-focus-shadow !default;
 $grid-edit-cell-padding-x: $grid-cell-padding-x !default;
 $grid-edit-cell-padding-y: 6px !default;
 
-$grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
+$grid-command-cell-button-spacing: k-map-get( $spacing, 2 ) !default;
 
 $grid-sticky-bg: $grid-bg !default;
 $grid-sticky-text: $grid-text !default;
-$grid-sticky-border: rgba( contrast-wcag( $grid-bg ), .5 ) !default;
+$grid-sticky-border: rgba( k-contrast-color( $grid-bg ), .5 ) !default;
 
 $grid-sticky-alt-bg: $grid-sticky-bg !default;
 
@@ -127,18 +127,18 @@ $grid-sticky-header-border: $grid-sticky-border !default;
 $grid-sticky-footer-bg: $grid-sticky-header-bg !default;
 $grid-sticky-footer-hovered-bg: $grid-sticky-footer-bg !default;
 
-$grid-sticky-selected-bg: try-shade($grid-bg, 4%) !default;
+$grid-sticky-selected-bg: k-try-shade($grid-bg, 4%) !default;
 $grid-sticky-selected-alt-bg: $grid-sticky-selected-bg !default;
 
-$grid-sticky-hovered-bg: try-shade($grid-bg, 7%) !default;
-$grid-sticky-selected-hovered-bg: try-shade($grid-sticky-selected-bg, .87) !default;
+$grid-sticky-hovered-bg: k-try-shade($grid-bg, 7%) !default;
+$grid-sticky-selected-hovered-bg: k-try-shade($grid-sticky-selected-bg, .87) !default;
 
 $grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 0 !default;
 
-$grid-filter-menu-item-spacing-x: map-get( $spacing, 4 ) !default;
-$grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
+$grid-filter-menu-item-spacing-x: k-map-get( $spacing, 4 ) !default;
+$grid-filter-menu-item-spacing-y: k-map-get( $spacing, 2 ) !default;
 
 $grid-column-menu-popup-padding-x: null !default;
 $grid-column-menu-popup-padding-y: null !default;
@@ -150,7 +150,7 @@ $grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
 $grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
-$grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
+$grid-column-menu-items-wrap-padding-y: k-map-get( $spacing, 2 ) !default;
 
 $grid-column-menu-filter-container-padding-x: $padding-x !default;
 $grid-column-menu-filter-container-padding-y: $padding-y !default;

package/scss/imageeditor/_variables.scss

@@ -11,8 +11,8 @@ $imageeditor-font-family: $font-family !default;
 
 $imageeditor-content-border-width: 1px !default;
 
-$imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
-$imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-padding-y: k-map-get( $spacing, 8 ) !default;
+$imageeditor-action-pane-padding-x: k-map-get( $spacing, 4 ) !default;
 $imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
@@ -39,4 +39,4 @@ $imageeditor-crop-bg: null !default;
 $imageeditor-crop-text: null !default;
 $imageeditor-crop-border: white !default;
 
-$imageeditor-crop-overlay-bg: rgba(black, .3) !default;
+$imageeditor-crop-overlay-bg: rgba( black, .3 ) !default;

package/scss/input/_variables.scss

@@ -14,10 +14,10 @@ $kendo-input-border-radius: null !default;
 
 /// Horizontal padding of input components.
 /// @group input
-$kendo-input-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-input-padding-x: k-map-get( $spacing, 4 ) !default;
 /// Vertical padding of input components.
 /// @group input
-$kendo-input-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y: k-map-get( $spacing, 2 ) !default;
 ///Font family of input components.
 /// @group input
 $kendo-input-font-family: $font-family !default;
@@ -28,18 +28,18 @@ $kendo-input-font-size: $font-size-lg !default;
 /// @group input
 $kendo-input-line-height: 1.25 !default;
 
-$kendo-input-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-input-padding-x-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-input-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
 $kendo-input-font-size-sm: $font-size-lg !default;
 $kendo-input-line-height-sm: 1.25 !default;
 
-$kendo-input-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-x-md: k-map-get( $spacing, 4 ) !default;
+$kendo-input-padding-y-md: k-map-get( $spacing, 2 ) !default;
 $kendo-input-font-size-md: $font-size-lg !default;
 $kendo-input-line-height-md: 1.25 !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-x-lg: k-map-get( $spacing, 4 ) !default;
+$kendo-input-padding-y-lg: k-map-get( $spacing, 2 ) !default;
 $kendo-input-font-size-lg: $font-size-lg !default;
 $kendo-input-line-height-lg: 1.5 !default;
 
@@ -50,8 +50,8 @@ $kendo-input-sizes: (
         font-size: $kendo-input-font-size-sm,
         line-height: $kendo-input-line-height-sm,
         icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
-        button-padding-x: map-get( $spacing, 1 ),
-        button-padding-y: map-get( $spacing, 1 )
+        button-padding-x: k-map-get( $spacing, 1 ),
+        button-padding-y: k-map-get( $spacing, 1 )
     ),
     md: (
         padding-x: $kendo-input-padding-x-md,
@@ -59,8 +59,8 @@ $kendo-input-sizes: (
         font-size: $kendo-input-font-size-md,
         line-height: $kendo-input-line-height-md,
         icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
-        button-padding-x: map-get( $spacing, 1 ),
-        button-padding-y: map-get( $spacing, 1 )
+        button-padding-x: k-map-get( $spacing, 1 ),
+        button-padding-y: k-map-get( $spacing, 1 )
     ),
     lg: (
         padding-x: $kendo-input-padding-x-lg,
@@ -68,12 +68,12 @@ $kendo-input-sizes: (
         font-size: $kendo-input-font-size-lg,
         line-height: $kendo-input-line-height-lg,
         icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
-        button-padding-x: map-get( $spacing, 1 ),
-        button-padding-y: map-get( $spacing, 1 )
+        button-padding-x: k-map-get( $spacing, 1 ),
+        button-padding-y: k-map-get( $spacing, 1 )
     )
 ) !default;
 
-$kendo-input-bg: try-shade( $component-bg, .5 ) !default;
+$kendo-input-bg: k-try-shade( $component-bg, .5 ) !default;
 $kendo-input-text: $component-text !default;
 $kendo-input-border: rgba( $component-border, .38 ) !default;
 $kendo-input-shadow: null !default;
@@ -88,7 +88,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $primary !default;
 $kendo-input-focus-shadow: null !default;
 
-$kendo-input-disabled-bg: try-shade( $component-bg, .25 ) !default;
+$kendo-input-disabled-bg: k-try-shade( $component-bg, .25 ) !default;
 $kendo-input-disabled-text: $disabled-text !default;
 $kendo-input-disabled-border: rgba( $component-border, (alpha( $component-border ) / 2) ) !default;
 $kendo-input-disabled-gradient: null !default;
@@ -189,7 +189,7 @@ $kendo-input-clear-value-opacity: .5 !default;
 $kendo-input-clear-value-hover-text: null !default;
 $kendo-input-clear-value-hover-opacity: 1 !default;
 
-$kendo-input-values-margin-y: map-get( $spacing, thin ) !default;
+$kendo-input-values-margin-y: k-map-get( $spacing, thin ) !default;
 $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;