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

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-y !default;
@@ -24,15 +24,15 @@ $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(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
+$drawer-mini-initial-width: calc( 2 * #{$drawer-item-padding-x} + #{$drawer-icon-size} ) !default;
 
 $drawer-hovered-bg: $hovered-bg !default;
 $drawer-hovered-text: $hovered-text !default;
 
 $drawer-focused-bg: $hovered-bg !default;
-$drawer-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .15) !default;
+$drawer-focused-shadow: inset 0 0 0 2px rgba( black, .15 ) !default;
 
 $drawer-selected-bg: $selected-bg !default;
 $drawer-selected-text: $selected-text !default;
-$drawer-selected-hover-bg: try-shade( $selected-bg, 1 ) !default;
+$drawer-selected-hover-bg: k-try-shade( $selected-bg, 1 ) !default;
 $drawer-selected-hover-text: $selected-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;
 
@@ -8,17 +8,17 @@ $dropzone-font-family: $font-family !default;
 $dropzone-font-size: $font-size !default;
 $dropzone-line-height: $line-height !default;
 
-$dropzone-bg: contrast-wcag( $component-bg, $gray-100, $gray-900 ) !default;
+$dropzone-bg: if( k-is-light( $component-bg ), $gray-100, $gray-900 ) !default;
 $dropzone-text: $component-text !default;
 $dropzone-border: $component-border !default;
 
 $dropzone-icon-size: ( $icon-size * 3 ) !default;
-$dropzone-icon-spacing: map-get( $spacing, 6 ) !default;
-$dropzone-icon-text: try-tint( $dropzone-text, 8 ) !default;
+$dropzone-icon-spacing: k-map-get( $spacing, 6 ) !default;
+$dropzone-icon-text: k-try-tint( $dropzone-text, 8 ) !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-xs !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

@@ -8,7 +8,7 @@ $expander-border-width: 1px !default;
 $expander-header-padding-x: $padding-x-lg !default;
 $expander-header-padding-y: $padding-y * 2 !default;
 
-$expander-indicator-margin-x: calc(#{$padding-x / 2} * 1.5) !default;
+$expander-indicator-margin-x: calc( #{$padding-x / 2} * 1.5 ) !default;
 
 $expander-bg: $component-bg !default;
 $expander-text: $component-text !default;
@@ -20,7 +20,7 @@ $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: null !default;
 $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;

package/scss/fab/_theme.scss

@@ -3,11 +3,11 @@
     // Normal state
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name} {
-            @include box-shadow($kendo-fab-shadow);
+            @include box-shadow( $kendo-fab-shadow );
             outline: $kendo-fab-border-width solid $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-color( $color );
             background-color: $color;
         }
     }
@@ -16,9 +16,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:hover,
         .k-fab-solid-#{$name}.k-hover {
-            border-color: try-darken( $color, 10% );
-            color: contrast-wcag( try-darken( $color, 7.5% ) );
-            background-color: try-darken( $color, 7.5% );
+            border-color: k-try-darken( $color, 10% );
+            color: k-contrast-color( k-try-darken( $color, 7.5% ) );
+            background-color: k-try-darken( $color, 7.5% );
         }
     }
 
@@ -37,10 +37,10 @@
         .k-fab-solid-#{$name}:active,
         .k-fab-solid-#{$name}.k-active,
         .k-fab-solid-#{$name}.k-selected {
-            @include box-shadow($kendo-fab-active-shadow);
-            border-color: try-darken( $color, 12.5% );
-            color: contrast-wcag( try-darken( $color, 10% ) );
-            background-color: try-darken( $color, 10% );
+            @include box-shadow( $kendo-fab-active-shadow );
+            border-color: k-try-darken( $color, 12.5% );
+            color: k-contrast-color( k-try-darken( $color, 10% ) );
+            background-color: k-try-darken( $color, 10% );
         }
     }
 
@@ -48,9 +48,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:disabled,
         .k-fab-solid-#{$name}.k-disabled {
-            @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: try-tint( $color, 4.5 );
-            color: try-tint( contrast-wcag( $color ), 5 );
+            @include box-shadow( $kendo-fab-disabled-shadow );
+            background-color: k-try-tint( $color, 4.5 );
+            color: k-try-tint( k-contrast-color( $color ), 5 );
             opacity: 1;
         }
     }
@@ -62,7 +62,7 @@
             $kendo-fab-item-bg,
             $kendo-fab-item-border
         );
-        @include box-shadow($kendo-fab-item-shadow);
+        @include box-shadow( $kendo-fab-item-shadow );
     }
     .k-fab-item-icon {
         @include fill(
@@ -70,7 +70,7 @@
             $kendo-fab-item-icon-bg,
             $kendo-fab-item-icon-border
         );
-        @include box-shadow($kendo-fab-item-shadow);
+        @include box-shadow( $kendo-fab-item-shadow );
         outline: $kendo-fab-border-width solid $kendo-button-bg;
         outline-offset: -$kendo-fab-border-width;
     }
@@ -78,12 +78,12 @@
     // Hover state
     .k-fab-item:hover .k-fab-item-icon,
     .k-fab-item.k-hover .k-fab-item-icon {
-        @include box-shadow($kendo-fab-item-shadow);
-        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
+        @include box-shadow( $kendo-fab-item-shadow );
+        outline: $kendo-fab-border-width solid k-try-darken( $kendo-fab-item-icon-border, 10% );
         outline-offset: -$kendo-fab-border-width;
-        border-color: try-darken( $kendo-fab-item-icon-border, 10% );
-        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
-        background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
+        border-color: k-try-darken( $kendo-fab-item-icon-border, 10% );
+        color: k-contrast-color( k-try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
+        background-color: k-try-darken( $kendo-fab-item-icon-bg, 7.5% );
     }
 
     // Focus state
@@ -99,12 +99,12 @@
     // Active state
     .k-fab-item:active .k-fab-item-icon,
     .k-fab-item.k-active .k-fab-item-icon {
-        @include box-shadow($kendo-fab-item-active-shadow);
-        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
+        @include box-shadow( $kendo-fab-item-active-shadow );
+        outline: $kendo-fab-border-width solid k-try-darken( $kendo-fab-item-icon-border, 12.5% );
         outline-offset: -$kendo-fab-border-width;
-        border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
-        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
-        background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
+        border-color: k-try-darken( $kendo-fab-item-icon-border, 12.5% );
+        color: k-contrast-color( k-try-darken( $kendo-fab-item-icon-bg, 10% ) );
+        background-color: k-try-darken( $kendo-fab-item-icon-bg, 10% );
     }
 
     // Disabled state
@@ -114,9 +114,9 @@
 
         .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 );
+            @include box-shadow( $kendo-fab-item-disabled-shadow );
+            background-color: k-try-tint( $kendo-fab-item-bg, 8 );
+            color: k-try-tint( $kendo-fab-item-text, 8 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -19,14 +19,14 @@ $kendo-fab-line-height: $line-height !default;
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-x: $padding-x !default;
-$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-sm: k-math-div( $kendo-fab-padding-x, 2 ) !default;
 $kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
 $kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
 
 /// Vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
-$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-sm: k-math-div( $kendo-fab-padding-y, 2 ) !default;
 $kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
 $kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
 
@@ -38,18 +38,18 @@ $kendo-fab-icon-width: 24px !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 ) / 2 !default;
+$kendo-fab-icon-spacing: k-math-div( k-map-get( $spacing, 1 ), 2 ) !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;
@@ -68,7 +68,7 @@ $kendo-fab-item-text-line-height: 14px !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;
@@ -91,10 +91,10 @@ $kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
+$kendo-fab-shadow: 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ), 0px 3px 5px rgba( black, .2 ) !default;
 /// The disabled shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$kendo-fab-disabled-shadow: 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 ), 0px 3px 5px k-try-tint( rgba( black, .2 ), .5 ) !default;
 /// The active shadow of the FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;

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;
@@ -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: $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 0 0 .25rem rgba( $primary, .25 ) !default;

package/scss/forms/_layout.scss

@@ -1,6 +1,6 @@
 @import "~@progress/kendo-theme-default/scss/forms/_layout.scss";
 
-@include exports("forms/layout/bootstrap") {
+@include exports( "forms/layout/bootstrap" ) {
 
     // Forms
     .k-form,
@@ -42,11 +42,10 @@
 
 }
 
-@include exports("edit-form/layout/bootstrap") {
+@include exports( "edit-form/layout/bootstrap" ) {
 
     .k-edit-label {
         padding: calc( #{$padding-y} - #{$kendo-input-border-width} ) 0;
     }
 
 }
-

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;
@@ -27,24 +27,24 @@ $gantt-dot-border: null !default;
 $gantt-dot-hover-bg: $gantt-bg !default;
 $gantt-dot-hover-border: $gantt-text !default;
 
-$gantt-milestone-bg: if( is-light($gantt-bg), $gray-300, $gray-700 ) !default;
-$gantt-milestone-border: try-shade( $gantt-milestone-bg, 2 ) !default;
+$gantt-milestone-bg: if( k-is-light( $gantt-bg ), $gray-300, $gray-700 ) !default;
+$gantt-milestone-border: k-try-shade( $gantt-milestone-bg, 2 ) !default;
 $gantt-milestone-selected-bg: $selected-bg !default;
 $gantt-milestone-selected-border: $selected-border !default;
 
-$gantt-summary-bg: mix( $gantt-text, $gantt-bg ) !default;
+$gantt-summary-bg: k-color-mix( $gantt-text, $gantt-bg ) !default;
 $gantt-summary-progress-bg: $gantt-text !default;
-$gantt-summary-selected-bg: mix( $selected-bg, $gantt-bg ) !default;
+$gantt-summary-selected-bg: k-color-mix( $selected-bg, $gantt-bg ) !default;
 $gantt-summary-progress-selected-bg: $selected-bg !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: 1px !default;
-$gantt-task-bg: if( is-light($gantt-bg), $gray-300, $gray-700 ) !default;
-$gantt-task-text: contrast-wcag( $gantt-task-bg ) !default;
-$gantt-task-border: if( is-light($gantt-bg), $gray-400, $gray-600 ) !default;
-$gantt-task-progress-bg: if( is-light($gantt-bg), $gray-400, $gray-600 ) !default;
-$gantt-task-selected-bg: mix( $selected-bg, $gantt-bg ) !default;
+$gantt-task-bg: if( k-is-light( $gantt-bg ), $gray-300, $gray-700 ) !default;
+$gantt-task-text: k-contrast-color( $gantt-task-bg ) !default;
+$gantt-task-border: if( k-is-light( $gantt-bg ), $gray-400, $gray-600 ) !default;
+$gantt-task-progress-bg: if( k-is-light( $gantt-bg ), $gray-400, $gray-600 ) !default;
+$gantt-task-selected-bg: k-color-mix( $selected-bg, $gantt-bg ) !default;
 $gantt-task-selected-text: $selected-text !default;
 $gantt-task-selected-border: $selected-bg !default;
 $gantt-task-progress-selected-bg: $selected-bg !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: 45% !default;

package/scss/grid/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("grid/theme") {
+@include exports( "grid/theme" ) {
 
     // Theme
     .k-grid {
@@ -142,7 +142,7 @@
         .k-hierarchy-cell .k-icon {
             &:focus,
             &.k-focus {
-                box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
+                box-shadow: inset 0 0 0 2px rgba( black, .1 );
             }
             &.k-active {
                 color: $selected-text;

package/scss/grid/_variables.scss

@@ -67,7 +67,7 @@ $grid-footer-border: $grid-header-border !default;
 
 /// Background color of alternating rows in grid
 /// @group grid
-$grid-alt-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$grid-alt-bg: rgba( k-contrast-color( $grid-bg ), .04 ) !default;
 /// Text color of alternating rows in grid
 /// @group grid
 $grid-alt-text: null !default;
@@ -77,7 +77,7 @@ $grid-alt-border: null !default;
 
 /// Background color of hovered rows in grid
 /// @group grid
-$grid-hovered-bg: rgba( contrast-wcag( $grid-bg ), .08 ) !default;
+$grid-hovered-bg: rgba( k-contrast-color( $grid-bg ), .08 ) !default;
 /// Text color of hovered rows in grid
 /// @group grid
 $grid-hovered-text: null !default;
@@ -95,10 +95,10 @@ $grid-selected-text: $grid-text !default;
 /// @group grid
 $grid-selected-border: $grid-border !default;
 
-$grid-grouping-row-bg: try-shade( $grid-bg ) !default;
+$grid-grouping-row-bg: k-try-shade( $grid-bg ) !default;
 $grid-grouping-row-text: $grid-text !default;
 
-$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .02 ) !default;
+$grid-sorted-bg: rgba( k-contrast-color( $grid-bg ), .02 ) !default;
 $grid-sorting-indicator-text: $primary !default;
 $grid-sorting-index-font-size: ($icon-size * .75) !default;
 $grid-sorting-index-height: $icon-size !default;
@@ -106,18 +106,18 @@ $grid-sorting-index-spacing-y: 2px !default;
 $grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
 
 
-$grid-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .08) !default;
+$grid-focused-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
 
 $grid-edit-cell-padding-x: $grid-cell-padding-x !default;
 $grid-edit-cell-padding-y: 5px !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($grid-text, .5) !default;
+$grid-sticky-border: rgba( $grid-text, .5 ) !default;
 
-$grid-sticky-alt-bg: try-shade( $grid-bg, .5 ) !default;
+$grid-sticky-alt-bg: k-try-shade( $grid-bg, .5 ) !default;
 
 $grid-sticky-header-bg: $grid-header-bg !default;
 $grid-sticky-header-text: $grid-header-text !default;
@@ -126,18 +126,18 @@ $grid-sticky-header-border: $grid-sticky-border !default;
 $grid-sticky-footer-bg: $grid-header-bg !default;
 $grid-sticky-footer-hovered-bg: $grid-sticky-footer-bg !default;
 
-$grid-sticky-selected-bg: mix($selected-bg, $grid-bg, 25%) !default;
-$grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
+$grid-sticky-selected-bg: k-color-mix( $selected-bg, $grid-bg, 25% ) !default;
+$grid-sticky-selected-alt-bg: k-color-shade( $grid-sticky-selected-bg, .4 ) !default;
 
-$grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;
-$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
+$grid-sticky-hovered-bg: k-try-shade( $grid-bg ) !default;
+$grid-sticky-selected-hovered-bg: k-color-shade( $grid-sticky-selected-bg, .7 ) !default;
 
 $grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
-$grid-filter-menu-item-spacing-x: map-get( $spacing, 6 ) !default;
-$grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
+$grid-filter-menu-item-spacing-x: k-map-get( $spacing, 6 ) !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;
@@ -149,7 +149,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-lg !default;
 $grid-column-menu-filter-container-padding-y: $padding-y-sm !default;

package/scss/imageeditor/_variables.scss

@@ -11,9 +11,9 @@ $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-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
+$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;
 $imageeditor-crop-border-style: dashed !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/_layout.scss

@@ -1,6 +1,6 @@
 @import "~@progress/kendo-theme-default/scss/input/_layout.scss";
 
-@include exports("input/layout/bootstrap") {
+@include exports( "input/layout/bootstrap" ) {
 
     // Input, Textbox
     .k-textbox {

package/scss/input/_variables.scss

@@ -31,7 +31,7 @@ $kendo-input-line-height: $input-line-height !default;
 $kendo-input-padding-x-sm: $input-padding-x-sm !default;
 $kendo-input-padding-y-sm: $input-padding-y-sm !default;
 $kendo-input-font-size-sm: $font-size-sm !default;
-$kendo-input-line-height-sm: ( 20 / 14 ) !default;
+$kendo-input-line-height-sm: k-math-div( 20, 14 ) !default;
 
 $kendo-input-padding-x-md: $input-padding-x !default;
 $kendo-input-padding-y-md: $input-padding-y !default;
@@ -146,10 +146,10 @@ $kendo-picker-disabled-shadow: null !default;
 
 $kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
-$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
+$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5 ) !default;
 
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
-$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: k-contrast-color( $kendo-picker-outline-hover-bg ) !default;
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
 $kendo-picker-outline-focus-bg: 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;