@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/action-buttons/_layout.scss

@@ -36,21 +36,6 @@
         @extend .k-actions;
     }
 
-
-    // Legacy spacing
-    .k-ie {
-        .k-actions .k-button ~ .k-button {
-            margin-left: $actions-button-spacing;
-            flex-shrink: 0;
-
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $actions-button-spacing;
-            }
-        }
-    }
-
     // Actions align
     .k-actions-start {
         justify-content: flex-start;

package/scss/action-buttons/_variables.scss

@@ -1,9 +1,9 @@
 // Actions
-$actions-margin-top: map-get( $spacing, 4 ) !default;
-$actions-padding-x: map-get( $spacing, 2 ) !default;
-$actions-padding-y: map-get( $spacing, 2 ) !default;
+$actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
+$actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $actions-border-width: 0px !default;
-$actions-button-spacing: map-get( $spacing, 2 ) !default;
+$actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
 
 $actions-bg: null !default;
 $actions-text: null !default;

package/scss/action-sheet/_index.scss

@@ -3,13 +3,12 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../styling/_index.scss";
 @import "../icons/_index.scss";
 @import "../listgroup/_index.scss";
 @import "../popup/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/action-sheet/_layout.scss

@@ -261,7 +261,7 @@
         .k-actionsheet-content,
         .k-actionsheet-footer {
             margin-inline: auto;
-            width: unquote("min(100%, 360px)");
+            width: k-string-unquote("min(100%, 360px)");
         }
 
         .k-list-container,

package/scss/action-sheet/_variables.scss

@@ -13,20 +13,20 @@ $actionsheet-font-size: $font-size !default;
 $actionsheet-font-family: $font-family !default;
 $actionsheet-line-height: $line-height !default;
 
-$actionsheet-bg: $component-bg !default;
-$actionsheet-text: $component-text !default;
-$actionsheet-border: $component-border !default;
+$actionsheet-bg: $kendo-component-bg !default;
+$actionsheet-text: $kendo-component-text !default;
+$actionsheet-border: $kendo-component-border !default;
 $actionsheet-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) !default;
 
 
 // Actionsheet header
-$actionsheet-titlebar-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-titlebar-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $actionsheet-titlebar-border-width: null !default;
 $actionsheet-titlebar-font-size: null !default;
 $actionsheet-titlebar-font-family: null !default;
 $actionsheet-titlebar-line-height: null !default;
-$actionsheet-titlebar-gap: map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
 $actionsheet-titlebar-bg: null !default;
 $actionsheet-titlebar-text: null !default;
@@ -36,13 +36,13 @@ $actionsheet-titlebar-shadow: null !default;
 
 $actionsheet-subtitle-font-size: $font-size-sm !default;
 $actionsheet-subtitle-line-height: $line-height-sm !default;
-$actionsheet-subtitle-text: $subtle-text !default;
+$actionsheet-subtitle-text: $kendo-subtle-text !default;
 
 
 // Actionsheet item
 $actionsheet-item-min-height: 40px !default;
-$actionsheet-item-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-item-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$actionsheet-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $actionsheet-item-border-width: 1px !default;
 $actionsheet-item-spacing: 12px !default;
 
@@ -52,9 +52,9 @@ $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
 
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-text: $subtle-text !default;
+$actionsheet-item-description-text: $kendo-subtle-text !default;
 
-$actionsheet-item-hover-bg: $hovered-bg !default;
+$actionsheet-item-hover-bg: $kendo-hover-bg !default;
 $actionsheet-item-hover-text: null !default;
 $actionsheet-item-hover-border: null !default;
 $actionsheet-item-hover-gradient: null !default;
@@ -64,7 +64,7 @@ $actionsheet-item-focus-bg: null !default;
 $actionsheet-item-focus-text: null !default;
 $actionsheet-item-focus-border: null !default;
 $actionsheet-item-focus-gradient: null !default;
-$actionsheet-item-focus-shadow: $focused-shadow !default;
+$actionsheet-item-focus-shadow: $kendo-focus-shadow !default;
 
 $actionsheet-item-disabled-bg: null !default;
 $actionsheet-item-disabled-text: null !default;
@@ -75,12 +75,12 @@ $actionsheet-item-disabled-shadow: null !default;
 
 // Adaptive Actionsheet
 $adaptive-actionsheet-titlebar-border-width: 1px !default;
-$adaptive-actionsheet-titlebar-padding-y: map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
-$adaptive-actionsheet-titlebar-border: $component-border !default;
+$adaptive-actionsheet-titlebar-border: $kendo-component-border !default;
 
-$adaptive-actionsheet-content-padding-y: map-get( $spacing, 2 ) !default;
-$adaptive-actionsheet-content-padding-x: map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 
-$adaptive-actionsheet-footer-padding-y: map-get( $spacing, 2 ) !default;
-$adaptive-actionsheet-footer-padding-x: map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;

package/scss/adaptive/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/adaptive/_layout.scss

@@ -11,7 +11,7 @@
         display: block;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-pane {
             width: 100%;
@@ -40,7 +40,7 @@
             align-content: stretch;
             vertical-align: top;
             -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: $rgba-transparent;
+            -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
         }
 
         .k-content {
@@ -111,14 +111,7 @@
         }
 
         .k-header a {
-            -webkit-touch-callout: none;
-
-            -webkit-user-select: none;
-            -moz-user-select: none;
             user-select: none;
-
-            -webkit-user-drag: none;
-            -moz-user-drag: none;
         }
     }
 }
@@ -167,7 +160,7 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $toolbar-padding-y $toolbar-padding-x;
+            padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md;
 
             > * {
                 margin: 0;
@@ -206,7 +199,7 @@
         }
 
         .k-scheduler-footer {
-            padding: $toolbar-padding-y $toolbar-padding-x;
+            padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md;
             display: flex;
             justify-content: space-between;
 
@@ -359,7 +352,7 @@
     .k-pane-wrapper {
 
         .k-appbar {
-            padding: map-get( $spacing, 1 );
+            padding: k-map-get( $kendo-spacing, 1 );
         }
 
         .k-list-title,
@@ -381,15 +374,15 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: map-get( $spacing, 4 );
+            margin-top: k-map-get( $kendo-spacing, 4 );
         }
 
         // Column menu
         .k-column-menu {
-            padding: map-get( $spacing, 2 );
+            padding: k-map-get( $kendo-spacing, 2 );
             display: flex;
             flex-flow: column nowrap;
-            gap: map-get( $spacing, 2 );
+            gap: k-map-get( $kendo-spacing, 2 );
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
@@ -401,16 +394,16 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{map-get( $spacing, 2 )};
+                margin-inline: -#{k-map-get( $kendo-spacing, 2 )};
             }
         }
 
         // Filter menu
         .k-filter-menu {
-            padding: map-get( $spacing, 2 );
+            padding: k-map-get( $kendo-spacing, 2 );
             display: flex;
             flex-flow: column nowrap;
-            gap: map-get( $spacing, 2 );
+            gap: k-map-get( $kendo-spacing, 2 );
 
             .k-list-title {
                 padding: 0;
@@ -430,7 +423,7 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{map-get( $spacing, 2 )};
+                margin-inline: -#{k-map-get( $kendo-spacing, 2 )};
             }
         }
 

package/scss/adaptive/_theme.scss

@@ -19,7 +19,7 @@
         .k-grid-mobile {
 
             .k-column-active + th.k-header {
-                border-left-color: $body-text;
+                border-left-color: $kendo-body-text;
             }
 
             .k-resize-handle-inner::before {

package/scss/adaptive/_variables.scss

@@ -1,18 +1,18 @@
 // Adaptive
-$adaptive-bg: $component-bg !default;
-$adaptive-text: $component-text !default;
-$adaptive-border: $component-border !default;
+$adaptive-bg: $kendo-component-bg !default;
+$adaptive-text: $kendo-component-text !default;
+$adaptive-border: $kendo-component-border !default;
 
-$adaptive-content-bg: $app-bg !default;
-$adaptive-content-text: $app-text !default;
+$adaptive-content-bg: $kendo-app-bg !default;
+$adaptive-content-text: $kendo-app-text !default;
 
-$adaptive-menu-bg: $primary !default;
-$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;
+$adaptive-menu-bg: $kendo-color-primary !default;
+$adaptive-menu-text: k-contrast-legacy( $adaptive-menu-bg ) !default;
 
-$adaptive-menu-clear-text: $primary !default;
+$adaptive-menu-clear-text: $kendo-color-primary !default;
 
-$adaptive-menu-item-border: $component-border !default;
-$adaptive-menu-title-text: $component-text !default;
+$adaptive-menu-item-border: $kendo-component-border !default;
+$adaptive-menu-title-text: $kendo-component-text !default;
 
 $adaptive-border-width: 1px !default;
 $adaptive-font-family: $font-family !default;
@@ -21,10 +21,10 @@ $adaptive-line-height: $line-height !default;
 
 
 // Adaptive Grid
-$adaptive-grid-sort-text: $primary !default;
+$adaptive-grid-sort-text: $kendo-color-primary !default;
 
 
 // Adaptive Scheduler
-$adaptive-scheduler-current-text: $primary !default;
+$adaptive-scheduler-current-text: $kendo-color-primary !default;
 $adaptive-scheduler-base-text: inherit !default;
-$adaptive-scheduler-subtle-text: $subtle-text !default;
+$adaptive-scheduler-subtle-text: $kendo-subtle-text !default;

package/scss/all.scss

@@ -1 +1 @@
-@import "index.scss";
+@import "./index.scss";

package/scss/appbar/_index.scss

@@ -6,6 +6,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/appbar/_layout.scss

@@ -2,23 +2,23 @@
 
     // Appbar
     .k-appbar {
-        margin: $appbar-margin-y $appbar-margin-x;
-        padding: $appbar-padding-y $appbar-padding-x;
-        border-width: $appbar-border-width;
+        margin: $kendo-appbar-margin-y $kendo-appbar-margin-x;
+        padding: $kendo-appbar-padding-y $kendo-appbar-padding-x;
+        border-width: $kendo-appbar-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $appbar-font-family;
-        font-size: $appbar-font-size;
-        line-height: $appbar-line-height;
+        font-family: $kendo-appbar-font-family;
+        font-size: $kendo-appbar-font-size;
+        line-height: $kendo-appbar-line-height;
         list-style: none;
         display: flex;
-        gap: $appbar-gap;
+        gap: $kendo-appbar-gap;
         flex-flow: row wrap;
         align-items: center;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -81,7 +81,7 @@
         width: 100%;
         position: sticky;
         top: 0;
-        z-index: $appbar-zindex;
+        z-index: $kendo-appbar-zindex;
     }
 
 

package/scss/appbar/_theme.scss

@@ -1,10 +1,10 @@
 @include exports("appbar/theme") {
 
     .k-appbar {
-        @include box-shadow( $appbar-box-shadow );
+        @include box-shadow( $kendo-appbar-box-shadow );
     }
     .k-appbar-bottom {
-        @include box-shadow( $appbar-bottom-box-shadow );
+        @include box-shadow( $kendo-appbar-bottom-box-shadow );
     }
 
 
@@ -12,13 +12,13 @@
     @each $name, $color in $kendo-theme-colors {
         .k-appbar-#{$name} {
             @if $name == "light" {
-                color: $appbar-light-text;
-                background-color: $appbar-light-bg;
+                color: $kendo-appbar-light-text;
+                background-color: $kendo-appbar-light-bg;
             } @else if $name == "dark" {
-                color: $appbar-dark-text;
-                background-color: $appbar-dark-bg;
+                color: $kendo-appbar-dark-text;
+                background-color: $kendo-appbar-dark-bg;
             } @else {
-                color: contrast-wcag( $color );
+                color: k-contrast-legacy( $color );
                 background-color: $color;
             }
         }

package/scss/appbar/_variables.scss

@@ -1,22 +1,22 @@
 // Appbar
-$appbar-margin-y: null !default;
-$appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 2 ) !default;
-$appbar-border-width: 0px !default;
+$kendo-appbar-margin-y: null !default;
+$kendo-appbar-margin-x: null !default;
+$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-border-width: 0px !default;
 
-$appbar-zindex: 1000 !default;
+$kendo-appbar-zindex: 1000 !default;
 
-$appbar-font-size: $font-size !default;
-$appbar-line-height: $line-height !default;
-$appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
+$kendo-appbar-font-size: $font-size !default;
+$kendo-appbar-line-height: $line-height !default;
+$kendo-appbar-font-family: $font-family !default;
+$kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
-$appbar-light-bg: $light !default;
-$appbar-light-text: contrast-wcag( $light ) !default;
+$kendo-appbar-light-bg: $kendo-color-light !default;
+$kendo-appbar-light-text: k-contrast-legacy( $kendo-color-light ) !default;
 
-$appbar-dark-bg: $dark !default;
-$appbar-dark-text: contrast-wcag( $dark ) !default;
+$kendo-appbar-dark-bg: $kendo-color-dark !default;
+$kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default;
 
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
-$appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
+$kendo-appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
+$kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;

package/scss/autocomplete/_index.scss

@@ -11,6 +11,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/avatar/_index.scss

@@ -6,6 +6,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/avatar/_theme.scss

@@ -4,7 +4,7 @@
     @each $name, $color in $kendo-avatar-theme-colors {
         .k-avatar-solid-#{$name} {
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-legacy( $color );
             background-color: $color;
         }
     }

package/scss/avatar/_variables.scss

@@ -17,9 +17,9 @@ $kendo-avatar-line-height: $line-height !default;
 /// The sizes of the avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
+    sm: k-map-get( $kendo-spacing, 4 ),
+    md: k-map-get( $kendo-spacing, 8 ),
+    lg: k-map-get( $kendo-spacing, 16 )
 ) !default;
 
 /// Theme colors map of the avatar.

package/scss/badge/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/badge/_layout.scss

@@ -53,11 +53,11 @@
 
     // Badge sizes
     @each $size, $size-props in $kendo-badge-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_min-width: map-get( $size-props, min-width );
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+        $_min-width: k-map-get( $size-props, min-width );
 
         .k-badge-#{$size} {
             padding: $_padding-y $_padding-x;
@@ -138,7 +138,7 @@
 
     // Border cutout
     .k-badge-border-cutout {
-        box-shadow: 0 0 0 2px $component-bg;
+        box-shadow: 0 0 0 2px $kendo-component-bg;
     }
 
 }

package/scss/badge/_theme.scss

@@ -4,7 +4,7 @@
     @each $name, $color in $kendo-theme-colors {
         .k-badge-solid-#{$name} {
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-legacy( $color );
             background-color: $color;
         }
     }
@@ -12,7 +12,7 @@
     // Outline badges
     .k-badge-outline {
         border-color: currentColor;
-        background-color: $component-bg;
+        background-color: $kendo-component-bg;
     }
 
     @each $name, $color in $kendo-theme-colors {

package/scss/badge/_variables.scss

@@ -11,17 +11,17 @@ $kendo-badge-border-radius: $kendo-border-radius-md !default;
 
 /// Horizontal padding of the badge.
 /// @group badge
-$kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-badge-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
-$kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
-$kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-badge-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-badge-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the badge.
 /// @group badge

package/scss/bottom-navigation/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/bottom-navigation/_layout.scss

@@ -19,7 +19,7 @@
         overflow: hidden;
         outline: none;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/bottom-navigation/_theme.scss

@@ -4,17 +4,17 @@
     @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid.k-bottom-nav-#{$name} {
             @include fill(
-                $color: true-mix( $color, contrast-wcag( $color ), 35%),
+                $color: k-true-mix( $color, k-contrast-legacy( $color ), 35%),
                 $bg: $color
             );
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
+                @include fill( $bg: rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2));
             }
 
             .k-bottom-nav-item.k-selected {
-                @include fill( $color: contrast-wcag( $color ) );
+                @include fill( $color: k-contrast-legacy( $color ) );
             }
         }
     }
@@ -35,7 +35,7 @@
         @each $name, $color in $kendo-theme-colors {
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
-                    @include fill( $color: try-shade($color, 3) );
+                    @include fill( $color: k-try-shade($color, 3) );
                 } @else {
                     @include fill( $color: $color );
                 }
@@ -44,11 +44,3 @@
     }
 
 }
-
-@include exports( "bottom-navigation/theme/legacy" ) {
-
-    .k-ie .k-bottom-nav-item {
-        background-color: transparent;
-    }
-
-}