@progress/kendo-theme-material 5.11.1-dev.1 → 5.11.1-dev.2

package/dist/all.css

@@ -6874,7 +6874,8 @@ kendo-sortable {
     display: none;
 }
 
-.k-widget .k-icon.k-i-expand, .k-widget .k-icon.k-i-collapse {
+.k-icon-action {
+    padding: 4px;
     cursor: pointer;
 }
 
@@ -15499,97 +15500,93 @@ textarea.k-input-inner {
 }
 
 .k-chip-solid-base {
-    border-color: rgba(192, 192, 192, 0.961);
+    border-color: #ebebeb;
     color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(235, 235, 235, 0.987);
+    background-color: #ebebeb;
 }
 
 .k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
-    background-color: rgba(239, 239, 239, 0.9896);
+    background-color: #cccccc;
 }
 
 .k-chip-solid-base:hover, .k-chip-solid-base.k-hover {
-    background-color: rgba(222, 222, 222, 0.9792);
+    background-color: #d6d6d6;
 }
 
 .k-chip-solid-base.k-selected {
-    background-color: rgba(205, 205, 205, 0.9688);
+    background-color: #c2c2c2;
 }
 
 .k-chip-solid-error {
-    border-color: #fbb9b3;
-    color: #f31700;
-    background-color: #feeceb;
+    border-color: #f65140;
+    color: #550800;
+    background-color: #fdd1cc;
 }
 
 .k-chip-solid-error:focus, .k-chip-solid-error.k-focus {
     box-shadow: 0 0 0 2px rgba(243, 23, 0, 0.16);
-    background-color: #feeceb;
 }
 
 .k-chip-solid-error:hover, .k-chip-solid-error.k-hover {
-    background-color: #fddad6;
+    background-color: #fbaea6;
 }
 
 .k-chip-solid-error.k-selected {
-    background-color: #fcc7c2;
+    background-color: #f98b80;
 }
 
 .k-chip-solid-info {
-    border-color: #b3cdf8;
-    color: #0058e9;
-    background-color: #ebf2fd;
+    border-color: #4082ef;
+    color: #001f52;
+    background-color: #ccdefb;
 }
 
 .k-chip-solid-info:focus, .k-chip-solid-info.k-focus {
     box-shadow: 0 0 0 2px rgba(0, 88, 233, 0.16);
-    background-color: #ebf2fd;
 }
 
 .k-chip-solid-info:hover, .k-chip-solid-info.k-hover {
-    background-color: #d6e4fb;
+    background-color: #a6c5f7;
 }
 
 .k-chip-solid-info.k-selected {
-    background-color: #c2d7fa;
+    background-color: #80acf4;
 }
 
 .k-chip-solid-warning {
-    border-color: #ffecb3;
-    color: #ffc000;
-    background-color: #fffaeb;
+    border-color: #ffd040;
+    color: #594300;
+    background-color: #fff2cc;
 }
 
 .k-chip-solid-warning:focus, .k-chip-solid-warning.k-focus {
     box-shadow: 0 0 0 2px rgba(255, 192, 0, 0.16);
-    background-color: #fffaeb;
 }
 
 .k-chip-solid-warning:hover, .k-chip-solid-warning.k-hover {
-    background-color: #fff5d6;
+    background-color: #ffe9a6;
 }
 
 .k-chip-solid-warning.k-selected {
-    background-color: #fff0c2;
+    background-color: #ffe080;
 }
 
 .k-chip-solid-success {
-    border-color: #c3e9b3;
-    color: #37b400;
-    background-color: #eff9eb;
+    border-color: #69c740;
+    color: #133f00;
+    background-color: #d7f0cc;
 }
 
 .k-chip-solid-success:focus, .k-chip-solid-success.k-focus {
     box-shadow: 0 0 0 2px rgba(55, 180, 0, 0.16);
-    background-color: #eff9eb;
 }
 
 .k-chip-solid-success:hover, .k-chip-solid-success.k-hover {
-    background-color: #dff3d6;
+    background-color: #b9e5a6;
 }
 
 .k-chip-solid-success.k-selected {
-    background-color: #cfedc2;
+    background-color: #9bda80;
 }
 
 .k-chip-outline-base {
@@ -15599,18 +15596,18 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-base:hover, .k-chip-outline-base.k-hover {
-    color: white;
-    background-color: rgba(0, 0, 0, 0.87);
+    color: black;
+    background-color: #ebebeb;
 }
 
 .k-chip-outline-base.k-selected {
-    color: white;
-    background-color: rgba(0, 0, 0, 0.87);
+    color: black;
+    background-color: #d6d6d6;
 }
 
 .k-chip-outline-error {
-    border-color: #f31700;
-    color: #f31700;
+    border-color: #b61100;
+    color: #b61100;
     background-color: white;
 }
 
@@ -15620,17 +15617,17 @@ textarea.k-input-inner {
 
 .k-chip-outline-error:hover, .k-chip-outline-error.k-hover {
     color: white;
-    background-color: #f31700;
+    background-color: #b61100;
 }
 
 .k-chip-outline-error.k-selected {
     color: white;
-    background-color: #f31700;
+    background-color: #b61100;
 }
 
 .k-chip-outline-info {
-    border-color: #0058e9;
-    color: #0058e9;
+    border-color: #0042af;
+    color: #0042af;
     background-color: white;
 }
 
@@ -15640,17 +15637,17 @@ textarea.k-input-inner {
 
 .k-chip-outline-info:hover, .k-chip-outline-info.k-hover {
     color: white;
-    background-color: #0058e9;
+    background-color: #0042af;
 }
 
 .k-chip-outline-info.k-selected {
     color: white;
-    background-color: #0058e9;
+    background-color: #0042af;
 }
 
 .k-chip-outline-warning {
     border-color: #ffc000;
-    color: #ffc000;
+    color: rgba(0, 0, 0, 0.87);
     background-color: white;
 }
 
@@ -15659,18 +15656,18 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-warning:hover, .k-chip-outline-warning.k-hover {
-    color: black;
+    color: #332600;
     background-color: #ffc000;
 }
 
 .k-chip-outline-warning.k-selected {
-    color: black;
+    color: #332600;
     background-color: #ffc000;
 }
 
 .k-chip-outline-success {
-    border-color: #37b400;
-    color: #37b400;
+    border-color: #298700;
+    color: #298700;
     background-color: white;
 }
 
@@ -15680,171 +15677,117 @@ textarea.k-input-inner {
 
 .k-chip-outline-success:hover, .k-chip-outline-success.k-hover {
     color: white;
-    background-color: #37b400;
+    background-color: #298700;
 }
 
 .k-chip-outline-success.k-selected {
     color: white;
-    background-color: #37b400;
+    background-color: #298700;
 }
 
 .k-chip-solid {
     border-color: transparent;
 }
 
-.k-chip-solid-base:hover, .k-chip-solid-base.k-hover {
-    color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(0, 0, 0, 0.16);
-}
-
 .k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
     box-shadow: none;
-    color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(0, 0, 0, 0.24);
-}
-
-.k-chip-solid-base.k-selected {
-    color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(0, 0, 0, 0.24);
-}
-
-.k-chip-solid-error:hover, .k-chip-solid-error.k-hover {
-    color: #f31700;
-    background-color: rgba(243, 23, 0, 0.16);
 }
 
 .k-chip-solid-error:focus, .k-chip-solid-error.k-focus {
     box-shadow: none;
-    color: #f31700;
-    background-color: rgba(243, 23, 0, 0.24);
-}
-
-.k-chip-solid-error.k-selected {
-    color: #f31700;
-    background-color: rgba(243, 23, 0, 0.24);
-}
-
-.k-chip-solid-info:hover, .k-chip-solid-info.k-hover {
-    color: #0058e9;
-    background-color: rgba(0, 88, 233, 0.16);
 }
 
 .k-chip-solid-info:focus, .k-chip-solid-info.k-focus {
     box-shadow: none;
-    color: #0058e9;
-    background-color: rgba(0, 88, 233, 0.24);
-}
-
-.k-chip-solid-info.k-selected {
-    color: #0058e9;
-    background-color: rgba(0, 88, 233, 0.24);
-}
-
-.k-chip-solid-warning:hover, .k-chip-solid-warning.k-hover {
-    color: #ffc000;
-    background-color: rgba(255, 192, 0, 0.16);
 }
 
 .k-chip-solid-warning:focus, .k-chip-solid-warning.k-focus {
     box-shadow: none;
-    color: #ffc000;
-    background-color: rgba(255, 192, 0, 0.24);
-}
-
-.k-chip-solid-warning.k-selected {
-    color: #ffc000;
-    background-color: rgba(255, 192, 0, 0.24);
-}
-
-.k-chip-solid-success:hover, .k-chip-solid-success.k-hover {
-    color: #37b400;
-    background-color: rgba(55, 180, 0, 0.16);
 }
 
 .k-chip-solid-success:focus, .k-chip-solid-success.k-focus {
     box-shadow: none;
-    color: #37b400;
-    background-color: rgba(55, 180, 0, 0.24);
-}
-
-.k-chip-solid-success.k-selected {
-    color: #37b400;
-    background-color: rgba(55, 180, 0, 0.24);
 }
 
 .k-chip-outline-base:focus, .k-chip-outline-base.k-focus {
     box-shadow: none;
-    background-color: rgba(0, 0, 0, 0.24);
-}
-
-.k-chip-outline-base:hover, .k-chip-outline-base.k-hover {
-    color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: #e0e0e0;
 }
 
-.k-chip-outline-base.k-selected {
-    color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(0, 0, 0, 0.24);
+.k-chip-outline-error {
+    color: #7a0c00;
 }
 
 .k-chip-outline-error:focus, .k-chip-outline-error.k-focus {
     box-shadow: none;
-    background-color: rgba(243, 23, 0, 0.24);
+    background-color: #fbaea6;
 }
 
 .k-chip-outline-error:hover, .k-chip-outline-error.k-hover {
-    color: #f31700;
-    background-color: rgba(243, 23, 0, 0.08);
+    color: #7a0c00;
+    background-color: #fdd1cc;
 }
 
 .k-chip-outline-error.k-selected {
-    color: #f31700;
-    background-color: rgba(243, 23, 0, 0.24);
+    color: #7a0c00;
+    background-color: #fbaea6;
+}
+
+.k-chip-outline-info {
+    color: #002c75;
 }
 
 .k-chip-outline-info:focus, .k-chip-outline-info.k-focus {
     box-shadow: none;
-    background-color: rgba(0, 88, 233, 0.24);
+    background-color: #a6c5f7;
 }
 
 .k-chip-outline-info:hover, .k-chip-outline-info.k-hover {
-    color: #0058e9;
-    background-color: rgba(0, 88, 233, 0.08);
+    color: #002c75;
+    background-color: #ccdefb;
 }
 
 .k-chip-outline-info.k-selected {
-    color: #0058e9;
-    background-color: rgba(0, 88, 233, 0.24);
+    color: #002c75;
+    background-color: #a6c5f7;
+}
+
+.k-chip-outline-warning {
+    color: rgba(0, 0, 0, 0.87);
 }
 
 .k-chip-outline-warning:focus, .k-chip-outline-warning.k-focus {
     box-shadow: none;
-    background-color: rgba(255, 192, 0, 0.24);
+    background-color: #ffe9a6;
 }
 
 .k-chip-outline-warning:hover, .k-chip-outline-warning.k-hover {
-    color: #ffc000;
-    background-color: rgba(255, 192, 0, 0.08);
+    color: rgba(0, 0, 0, 0.87);
+    background-color: #fff2cc;
 }
 
 .k-chip-outline-warning.k-selected {
-    color: #ffc000;
-    background-color: rgba(255, 192, 0, 0.24);
+    color: rgba(0, 0, 0, 0.87);
+    background-color: #ffe9a6;
+}
+
+.k-chip-outline-success {
+    color: #1c5a00;
 }
 
 .k-chip-outline-success:focus, .k-chip-outline-success.k-focus {
     box-shadow: none;
-    background-color: rgba(55, 180, 0, 0.24);
+    background-color: #b9e5a6;
 }
 
 .k-chip-outline-success:hover, .k-chip-outline-success.k-hover {
-    color: #37b400;
-    background-color: rgba(55, 180, 0, 0.08);
+    color: #1c5a00;
+    background-color: #d7f0cc;
 }
 
 .k-chip-outline-success.k-selected {
-    color: #37b400;
-    background-color: rgba(55, 180, 0, 0.24);
+    color: #1c5a00;
+    background-color: #b9e5a6;
 }
 
 .k-color-preview {
@@ -24343,6 +24286,7 @@ kendo-card-footer {
 .k-popover-inner {
     position: relative;
     border-radius: inherit;
+    height: inherit;
 }
 
 .k-popover-header {
@@ -34726,6 +34670,11 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
     vertical-align: top;
 }
 
+.k-scheduler-layout td.k-selected,
+.k-scheduler-layout .k-scheduler-cell.k-selected {
+    outline: none;
+}
+
 .k-scheduler-layout tr + tr .k-scheduler-times tr th,
 .k-scheduler-layout .k-scheduler-pane + .k-scheduler-pane .k-scheduler-times tr th {
     border-bottom-color: transparent;
@@ -34815,6 +34764,10 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
     overflow: auto;
 }
 
+.k-scheduler-content:focus {
+    outline: none;
+}
+
 kendo-scheduler .k-event,
 .k-event {
     border-radius: 4px;

package/dist/all.scss

@@ -2610,6 +2610,7 @@ $box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rg
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
 $icon-spacing: k-map-get( $spacing, 2 ) !default;
+$icon-padding: k-map-get( $spacing, 1 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL
@@ -6591,11 +6592,9 @@ $utils-border-radius: (
         display: none;
     }
 
-    .k-widget .k-icon {
-        &.k-i-expand,
-        &.k-i-collapse {
-            cursor: pointer;
-        }
+    .k-icon-action {
+        padding: $icon-padding;
+        cursor: pointer;
     }
 
     .k-icon-xs { font-size: ( $icon-size * .5 ); }
@@ -13478,7 +13477,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: $base-text !default;
+$kendo-chip-base-bg: if( $dark-theme, $white, $black) !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -13492,20 +13491,23 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 90% ) !default;
+$kendo-chip-solid-bg: if( $dark-theme, $kendo-button-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;
+$kendo-chip-solid-text: $kendo-button-text !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: k-try-tint( $kendo-chip-base-bg, 70% ) !default;
+$kendo-chip-solid-border: $kendo-chip-solid-bg !default;
 /// The base shadow of solid chip.
 /// @group chip
 $kendo-chip-solid-shadow: null !default;
+/// The base gradient of solid chip.
+/// @group chip
+$kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 80% ) !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
@@ -13529,24 +13531,24 @@ $kendo-chip-solid-selected-text: null !default;
 $kendo-chip-outline-bg: $component-bg !default;
 /// The base text color of outline chip.
 /// @group chip
-$kendo-chip-outline-text: $kendo-chip-base-bg !default;
+$kendo-chip-outline-text: $kendo-chip-solid-text !default;
 /// The base border color of outline chip.
 /// @group chip
-$kendo-chip-outline-border: $kendo-chip-base-bg !default;
+$kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of outline chip.
 /// @group chip
 $kendo-chip-outline-shadow: null !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: $kendo-chip-base-bg !default;
+$kendo-chip-outline-hover-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-base-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
-$kendo-chip-outline-selected-bg: $kendo-chip-outline-hover-bg !default;
+$kendo-chip-outline-selected-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
 /// The base text color of selected outline chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
@@ -13753,7 +13755,8 @@ $kendo-chip-list-sizes: (
                 @include fill(
                     $kendo-chip-solid-text,
                     $kendo-chip-solid-bg,
-                    $kendo-chip-solid-border
+                    $kendo-chip-solid-border,
+                    $kendo-chip-solid-gradient
                 );
 
                 &:focus,
@@ -13772,24 +13775,24 @@ $kendo-chip-list-sizes: (
                 }
             } @else {
                 @include fill(
-                    $color,
-                    try-tint( $color, 92% ),
-                    try-tint( $color, 70% )
+                    try-shade( $color, 65% ),
+                    try-tint( $color, 80% ),
+                    try-tint( $color, 25% ),
+                    $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
-                    @include fill( $bg: try-tint( $color, 92% ) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: try-tint($color, 84% ) );
+                    @include fill( $bg: try-tint($color, 65% ) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: try-tint( $color, 76% ) );
+                    @include fill( $bg: try-tint( $color, 50% ) );
                 }
             }
         }
@@ -13825,30 +13828,56 @@ $kendo-chip-list-sizes: (
                         $bg: $kendo-chip-outline-selected-bg
                     );
                 }
+            } @else if ($name == "warning") {
+                @include fill(
+                    if( $dark-theme, tint($color, 25%), $kendo-chip-outline-text),
+                    if( $dark-theme, $black, $white ),
+                    if( $dark-theme, tint($color, 25%), $color)
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
+                        $bg: if( $dark-theme, tint($color, 25%), $color)
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
+                        $bg: if( $dark-theme, tint($color, 25%), $color)
+                    );
+                }
             } @else {
                 @include fill(
-                    $color,
-                    $white,
-                    $color
+                    try-shade( $color, 25% ),
+                    if( $dark-theme, $black, $white ),
+                    try-shade( $color, 25% )
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: contrast-wcag( $color ),
-                        $bg: $color
+                        $color: contrast-wcag( try-shade( $color, 25% ) ),
+                        $bg: try-shade( $color, 25% )
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: contrast-wcag( $color ),
-                        $bg: $color
+                        $color: contrast-wcag( try-shade( $color, 25% ) ),
+                        $bg: try-shade( $color, 25% )
                     );
                 }
             }
@@ -13865,30 +13894,13 @@ $kendo-chip-list-sizes: (
     .k-chip-solid {
         border-color: transparent;
     }
+
+    // Solid
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-solid-#{$name} {
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $bg: rgba( $color, .16 ),
-                    $color: $color
-                );
-            }
-
             &:focus,
             &.k-focus {
                 @include box-shadow( none );
-                @include fill(
-                    $bg: rgba( $color, .24),
-                    $color: $color
-                );
-            }
-
-            &.k-selected {
-                @include fill(
-                    $bg: rgba( $color, .24 ),
-                    $color: $color
-                );
             }
         }
     }
@@ -13896,25 +13908,62 @@ $kendo-chip-list-sizes: (
     // Outline
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-outline-#{$name} {
-            &:focus,
-            &.k-focus {
-                @include box-shadow( none );
-                @include fill( $bg: rgba( $color, .24 ) );
-            }
-
-            &:hover,
-            &.k-hover {
+            @if ($name == "base") {
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( none );
+                    @include fill( $bg: k-try-tint( $color, 88% ) );
+                }
+            } @else if($name == "warning") {
                 @include fill(
-                    $bg: rgba( $color, .08 ),
-                    $color: $color
+                    $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
                 );
-            }
 
-            &.k-selected {
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( none );
+                    @include fill( $bg: k-try-tint( $color, 65% ) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $bg: k-try-tint( $color, 80% ),
+                        $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $bg: k-try-tint( $color, 65% ),
+                        $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                    );
+                }
+            } @else {
                 @include fill(
-                    $bg: rgba( $color, .24 ),
-                    $color: $color
+                    $color: k-try-shade( $color, 50% )
                 );
+
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( none );
+                    @include fill( $bg: k-try-tint( $color, 65% ) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $bg: k-try-tint( $color, 80% ),
+                        $color: k-try-shade( $color, 50% )
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $bg: k-try-tint( $color, 65% ),
+                        $color: k-try-shade( $color, 50% )
+                    );
+                }
             }
         }
     }
@@ -27412,6 +27461,7 @@ $popover-callout-border: $popover-border !default;
     .k-popover-inner {
         position: relative;
         border-radius: inherit;
+        height: inherit;
     }
 
     // Header
@@ -41545,6 +41595,11 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             vertical-align: top;
         }
 
+        td.k-selected,
+        .k-scheduler-cell.k-selected {
+            outline: none;
+        }
+
         // Remove bottom border from first cell of hours cells spaning on two rows
         tr + tr,
         .k-scheduler-pane + .k-scheduler-pane {
@@ -41634,6 +41689,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         border-color: inherit;
         position: relative;
         overflow: auto;
+
+        &:focus {
+            outline: none;
+        }
     }
 
 

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.11.1-dev.1",
+  "version": "5.11.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,12 +47,12 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.6.0",
-    "@progress/kendo-theme-core": "^5.11.1-dev.1",
-    "@progress/kendo-theme-default": "^5.11.1-dev.1",
-    "@progress/kendo-theme-utils": "^5.11.1-dev.1"
+    "@progress/kendo-theme-core": "^5.11.1-dev.2",
+    "@progress/kendo-theme-default": "^5.11.1-dev.2",
+    "@progress/kendo-theme-utils": "^5.11.1-dev.2"
   },
   "devDependencies": {
     "sass-build": "^1.1.0"
   },
-  "gitHead": "19168e8bce86f6948eae191325e62150b6f31b8e"
+  "gitHead": "1abe5dc353ef37c2ad5ee6177c8fb1e3894956d6"
 }

package/scss/_variables.scss

@@ -109,6 +109,7 @@ $box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rg
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
 $icon-spacing: k-map-get( $spacing, 2 ) !default;
+$icon-padding: k-map-get( $spacing, 1 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL

package/scss/chip/_theme.scss

@@ -6,30 +6,13 @@
     .k-chip-solid {
         border-color: transparent;
     }
+
+    // Solid
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-solid-#{$name} {
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $bg: rgba( $color, .16 ),
-                    $color: $color
-                );
-            }
-
             &:focus,
             &.k-focus {
                 @include box-shadow( none );
-                @include fill(
-                    $bg: rgba( $color, .24),
-                    $color: $color
-                );
-            }
-
-            &.k-selected {
-                @include fill(
-                    $bg: rgba( $color, .24 ),
-                    $color: $color
-                );
             }
         }
     }
@@ -37,25 +20,62 @@
     // Outline
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-outline-#{$name} {
-            &:focus,
-            &.k-focus {
-                @include box-shadow( none );
-                @include fill( $bg: rgba( $color, .24 ) );
-            }
-
-            &:hover,
-            &.k-hover {
+            @if ($name == "base") {
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( none );
+                    @include fill( $bg: k-try-tint( $color, 88% ) );
+                }
+            } @else if($name == "warning") {
                 @include fill(
-                    $bg: rgba( $color, .08 ),
-                    $color: $color
+                    $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
                 );
-            }
 
-            &.k-selected {
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( none );
+                    @include fill( $bg: k-try-tint( $color, 65% ) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $bg: k-try-tint( $color, 80% ),
+                        $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $bg: k-try-tint( $color, 65% ),
+                        $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                    );
+                }
+            } @else {
                 @include fill(
-                    $bg: rgba( $color, .24 ),
-                    $color: $color
+                    $color: k-try-shade( $color, 50% )
                 );
+
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( none );
+                    @include fill( $bg: k-try-tint( $color, 65% ) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $bg: k-try-tint( $color, 80% ),
+                        $color: k-try-shade( $color, 50% )
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $bg: k-try-tint( $color, 65% ),
+                        $color: k-try-shade( $color, 50% )
+                    );
+                }
             }
         }
     }

package/scss/chip/_variables.scss

@@ -60,7 +60,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: $base-text !default;
+$kendo-chip-base-bg: if( $dark-theme, $white, $black) !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -74,20 +74,23 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 90% ) !default;
+$kendo-chip-solid-bg: if( $dark-theme, $kendo-button-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;
+$kendo-chip-solid-text: $kendo-button-text !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: k-try-tint( $kendo-chip-base-bg, 70% ) !default;
+$kendo-chip-solid-border: $kendo-chip-solid-bg !default;
 /// The base shadow of solid chip.
 /// @group chip
 $kendo-chip-solid-shadow: null !default;
+/// The base gradient of solid chip.
+/// @group chip
+$kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 80% ) !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
@@ -111,24 +114,24 @@ $kendo-chip-solid-selected-text: null !default;
 $kendo-chip-outline-bg: $component-bg !default;
 /// The base text color of outline chip.
 /// @group chip
-$kendo-chip-outline-text: $kendo-chip-base-bg !default;
+$kendo-chip-outline-text: $kendo-chip-solid-text !default;
 /// The base border color of outline chip.
 /// @group chip
-$kendo-chip-outline-border: $kendo-chip-base-bg !default;
+$kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of outline chip.
 /// @group chip
 $kendo-chip-outline-shadow: null !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: $kendo-chip-base-bg !default;
+$kendo-chip-outline-hover-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-base-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
-$kendo-chip-outline-selected-bg: $kendo-chip-outline-hover-bg !default;
+$kendo-chip-outline-selected-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
 /// The base text color of selected outline chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;