@progress/kendo-theme-default 4.41.3-dev.1 → 4.41.3-dev.2

package/dist/all.scss

@@ -598,6 +598,25 @@ $data-uris: () !default;
     }
 }
 
+// #endregion
+// #region @import "_disabled.scss"; -> packages/default/scss/core/mixins/_disabled.scss
+// Disabled
+@mixin disabled( $disabled-styling ) {
+    outline: none;
+    cursor: default;
+    opacity: map-get($disabled-styling, opacity);
+    filter: map-get($disabled-styling, filter);
+    pointer-events: none;
+    box-shadow: none;
+}
+
+@mixin disabled-legacy-ie( $disabled-styling ) {
+    outline: none;
+    cursor: default;
+    opacity: map-get($disabled-styling, opacity);
+    box-shadow: none;
+}
+
 // #endregion
 // #region @import "_decoration.scss"; -> packages/default/scss/core/mixins/_decoration.scss
 // Fill and outline
@@ -628,25 +647,6 @@ $data-uris: () !default;
     }
 }
 
-// #endregion
-// #region @import "_disabled.scss"; -> packages/default/scss/core/mixins/_disabled.scss
-// Disabled
-@mixin disabled( $disabled-styling ) {
-    outline: none;
-    cursor: default;
-    opacity: map-get($disabled-styling, opacity);
-    filter: map-get($disabled-styling, filter);
-    pointer-events: none;
-    box-shadow: none;
-}
-
-@mixin disabled-legacy-ie( $disabled-styling ) {
-    outline: none;
-    cursor: default;
-    opacity: map-get($disabled-styling, opacity);
-    box-shadow: none;
-}
-
 // #endregion
 // #region @import "_gradients.scss"; -> packages/default/scss/core/mixins/_gradients.scss
 @mixin linear-gradient( $gradient: null ) {
@@ -2938,21 +2938,18 @@ $display4-letter-spacing: null !default;
 
 
 // Dependencies
-// #region @import "../common/_decoration.scss"; -> packages/default/scss/common/_decoration.scss
+// #region @import "../utils/_theme-colors.scss"; -> packages/default/scss/utils/_theme-colors.scss
 @include exports( "common/decoration/color" ) {
 
     // sass-lint:disable-block no-important
     // stylelint-disable block-opening-brace-space-before
 
-    .k-text-primary     { color: $primary !important; }
-    .k-text-info        { color: $info !important; }
-    .k-text-success     { color: $success !important; }
-    .k-text-warning     { color: $warning !important; }
-    .k-text-error       { color: $error !important; }
-
-    .k-text-base        { color: $base-text; }
+    .k-text-base,
+    .k-color-base {
+        color: $base-text;
+    }
 
-    .k-color-inherit    { color: inherit; }
+    .k-color-inherit { color: inherit; }
 
     @each $name, $color in $theme-colors {
         .k-text-#{$name},
@@ -2968,11 +2965,11 @@ $display4-letter-spacing: null !default;
 
     // sass-lint:disable-block no-important
 
-    .k-bg-primary       { background-color: $primary !important; }
-    .k-bg-info          { background-color: $info !important; }
-    .k-bg-success       { background-color: $success !important; }
-    .k-bg-warning       { background-color: $warning !important; }
-    .k-bg-error         { background-color: $error !important; }
+    @each $name, $bg-color in $theme-colors {
+        .k-bg-#{$name} {
+            background-color: $bg-color !important;
+        }
+    }
 
 }
 
@@ -2985,12 +2982,11 @@ $display4-letter-spacing: null !default;
 
 @include exports( "common/decoration/variant" ) {
 
-    .k-state-primary    { @include variant( $primary ); }
-    .k-state-info       { @include variant( $info ); }
-    .k-state-success    { @include variant( $success ); }
-    .k-state-warning    { @include variant( $warning ); }
-    .k-state-error      { @include variant( $error ); }
-
+    @each $name, $variant in $theme-colors {
+        .k-state-#{$name} {
+            @include variant( $variant );
+        }
+    }
 }
 
 
@@ -3077,12 +3073,21 @@ $display4-letter-spacing: null !default;
         top: ( border-top-left-radius, border-top-right-radius ),
         right: ( border-top-right-radius, border-bottom-right-radius ),
         bottom: ( border-bottom-left-radius, border-bottom-right-radius ),
-        left: ( border-bottom-left-radius, border-top-left-radius )
+        left: ( border-bottom-left-radius, border-top-left-radius ),
+        top-left: border-top-left-radius,
+        top-right: border-top-right-radius,
+        bottom-left: border-bottom-left-radius,
+        bottom-right: border-bottom-right-radius
     ) !default;
 
     $utils-border-radius: (
         default: map-get( $spacing, 1 ),
-        0: 0
+        0: 0,
+        sm: map-get( $spacing, 1 ) / 2,
+        md: map-get( $spacing, 1 ),
+        lg: map-get( $spacing, 2 ),
+        circle: 50%,
+        pill: 9999px
     ) !default;
 
 
@@ -4067,6 +4072,9 @@ $display4-letter-spacing: null !default;
 
 }
 
+// #endregion
+// #region @import "_theme-colors.scss"; -> packages/default/scss/utils/_theme-colors.scss
+// File already imported_once. Skipping output.
 // #endregion
 // #region @import "_touch-action.scss"; -> packages/default/scss/utils/_touch-action.scss
 @include exports( "utils/touch-action" ) {
@@ -6678,81 +6686,170 @@ $chip-remove-icon-font-size: 14px !default;
 
 $chip-avatar-size: 16px !default;
 
-$chip-filled-bg: #ebebeb !default;
-$chip-filled-text: $body-text !default;
-$chip-filled-border: rgba( black, .08 ) !default;
+$chip-base-bg: get-base-hue( gray, 800 ) !default;
+
+$chip-solid-bg: rgba( $chip-base-bg, .08 ) !default;
+$chip-solid-text: $chip-base-bg !default;
+$chip-solid-border: rgba( $chip-base-bg, .3 ) !default;
+
+$chip-solid-hover-bg: rgba( $chip-base-bg, .16 ) !default;
+$chip-solid-hover-text: null !default;
+$chip-solid-hover-border: null !default;
+
+$chip-solid-focus-bg: $chip-solid-bg !default;
+$chip-solid-focus-shadow: 0 0 0 2px rgba( $chip-base-bg, .16 ) !default;
 
-$chip-filled-hovered-bg: try-shade( $chip-filled-bg, .5 ) !default;
-$chip-filled-hovered-text: null !default;
-$chip-filled-hovered-border: null !default;
+$chip-solid-selected-bg: rgba( $chip-base-bg, .24 ) !default;
+$chip-solid-selected-text: null !default;
+$chip-solid-selected-border: null !default;
 
-$chip-filled-focused-bg: $chip-filled-bg !default;
-$chip-filled-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$chip-solid-success-bg: rgba( $success, .08 ) !default;
+$chip-solid-success-text: $success !default;
+$chip-solid-success-border: rgba( $success, .3 ) !default;
 
-$chip-filled-selected-bg: try-shade( $chip-filled-bg, 1 ) !default;
-$chip-filled-selected-text: null !default;
-$chip-filled-selected-border: null !default;
+$chip-solid-success-hover-bg: rgba( $success, .16 ) !default;
+$chip-solid-success-hover-text: null !default;
+$chip-solid-success-hover-border: null !default;
 
-$chip-filled-success-bg: rgba( $success, .12 ) !default;
-$chip-filled-success-text: $success !default;
-$chip-filled-success-border: rgba( $success, .3 ) !default;
+$chip-solid-success-focus-bg: null !default;
+$chip-solid-success-focus-text: null !default;
+$chip-solid-success-focus-border: null !default;
 
-$chip-filled-warning-bg: rgba( $warning, .12 ) !default;
-$chip-filled-warning-text: $warning !default;
-$chip-filled-warning-border: rgba($warning, .3 ) !default;
+$chip-solid-success-selected-bg: rgba( $success, .24 ) !default;
+$chip-solid-success-selected-text: null !default;
+$chip-solid-success-selected-border: null !default;
 
-$chip-filled-error-bg: rgba( $error, .12 ) !default;
-$chip-filled-error-text: $error !default;
-$chip-filled-error-border: rgba( $error, .3 ) !default;
+$chip-solid-warning-bg: rgba( $warning, .08 ) !default;
+$chip-solid-warning-text: $warning !default;
+$chip-solid-warning-border: rgba( $warning, .3 ) !default;
 
-$chip-filled-info-bg: rgba( $info, .12 ) !default;
-$chip-filled-info-text: $info !default;
-$chip-filled-info-border: rgba( $info, .3 ) !default;
+$chip-solid-warning-hover-bg: rgba( $warning, .16 ) !default;
+$chip-solid-warning-hover-text: null !default;
+$chip-solid-warning-hover-border: null !default;
 
-$chip-outline-bg: transparent !default;
-$chip-outline-text: $body-text !default;
-$chip-outline-border: $body-text !default;
+$chip-solid-warning-focus-bg: null !default;
+$chip-solid-warning-focus-text: null !default;
+$chip-solid-warning-focus-border: null !default;
 
-$chip-outline-hovered-bg: $body-text !default;
-$chip-outline-hovered-text: #ffffff !default;
-$chip-outline-hovered-border: rgba( black, .08 ) !default;
+$chip-solid-warning-selected-bg: rgba( $warning, .24 ) !default;
+$chip-solid-warning-selected-text: null !default;
+$chip-solid-warning-selected-border: null !default;
 
-$chip-outline-focused-bg: $chip-outline-bg !default;
-$chip-outline-focused-text: $chip-outline-text !default;
-$chip-outline-focused-border: $chip-outline-border !default;
-$chip-outline-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$chip-solid-error-bg: rgba( $error, .08 ) !default;
+$chip-solid-error-text: $error !default;
+$chip-solid-error-border: rgba( $error, .3 ) !default;
 
-$chip-outline-selected-bg: $body-text !default;
-$chip-outline-selected-text: #ffffff !default;
+$chip-solid-error-hover-bg: rgba( $error, .16 ) !default;
+$chip-solid-error-hover-text: null !default;
+$chip-solid-error-hover-border: null !default;
 
-$chip-outline-success-bg: transparent !default;
+$chip-solid-error-focus-bg: null !default;
+$chip-solid-error-focus-text: null !default;
+$chip-solid-error-focus-border: null !default;
+
+$chip-solid-error-selected-bg: rgba( $error, .24 ) !default;
+$chip-solid-error-selected-text: null !default;
+$chip-solid-error-selected-border: null !default;
+
+$chip-solid-info-bg: rgba( $info, .08 ) !default;
+$chip-solid-info-text: $info !default;
+$chip-solid-info-border: rgba( $info, .3 ) !default;
+
+$chip-solid-info-hover-bg: rgba( $info, .16 ) !default;
+$chip-solid-info-hover-text: null !default;
+$chip-solid-info-hover-border: null !default;
+
+$chip-solid-info-focus-bg: null !default;
+$chip-solid-info-focus-text: null !default;
+$chip-solid-info-focus-border: null !default;
+
+$chip-solid-info-selected-bg: rgba( $info, .24 ) !default;
+$chip-solid-info-selected-text: null !default;
+$chip-solid-info-selected-border: null !default;
+
+$chip-outline-bg: $body-bg !default;
+$chip-outline-text: $chip-base-bg !default;
+$chip-outline-border: $chip-base-bg !default;
+
+$chip-outline-hover-bg: $chip-base-bg !default;
+$chip-outline-hover-text: contrast-wcag( $chip-outline-hover-bg ) !default;
+$chip-outline-hover-border: null !default;
+
+$chip-outline-focus-bg: null !default;
+$chip-outline-focus-text: null !default;
+$chip-outline-focus-border: null !default;
+$chip-outline-focus-shadow: 0 0 0 2px rgba( $black, .08 ) !default;
+
+$chip-outline-selected-bg: $chip-outline-hover-bg !default;
+$chip-outline-selected-text: $chip-outline-hover-text !default;
+
+$chip-outline-success-bg: null !default;
 $chip-outline-success-text: $success !default;
-$chip-outline-success-border: rgba( $success, .54 ) !default;
+$chip-outline-success-border: $success !default;
+
+$chip-outline-success-hover-bg: $success !default;
+$chip-outline-success-hover-text: contrast-wcag( $chip-outline-success-hover-bg ) !default;
+$chip-outline-success-hover-border: null !default;
+
+$chip-outline-success-focus-bg: nul !default;
+$chip-outline-success-focus-text: null !default;
+$chip-outline-success-focus-border: null !default;
+
+$chip-outline-success-selected-bg: $chip-outline-success-hover-bg !default;
+$chip-outline-success-selected-text: $chip-outline-success-hover-text !default;
+$chip-outline-success-selected-border: null !default;
 
-$chip-outline-warning-bg: transparent !default;
+$chip-outline-warning-bg: null !default;
 $chip-outline-warning-text: $warning !default;
-$chip-outline-warning-border: rgba( $warning, .54 ) !default;
+$chip-outline-warning-border: $warning !default;
 
-$chip-outline-error-bg: transparent !default;
+$chip-outline-warning-hover-bg: $warning !default;
+$chip-outline-warning-hover-text: $white !default;
+$chip-outline-warning-hover-border: null !default;
+
+$chip-outline-warning-focus-bg: nul !default;
+$chip-outline-warning-focus-text: null !default;
+$chip-outline-warning-focus-border: null !default;
+
+$chip-outline-warning-selected-bg: $chip-outline-warning-hover-bg !default;
+$chip-outline-warning-selected-text: $chip-outline-warning-hover-text !default;
+$chip-outline-warning-selected-border: null !default;
+
+$chip-outline-error-bg: null !default;
 $chip-outline-error-text: $error !default;
-$chip-outline-error-border: rgba( $error, .54 ) !default;
+$chip-outline-error-border: $error !default;
+
+$chip-outline-error-hover-bg: $error !default;
+$chip-outline-error-hover-text: contrast-wcag( $chip-outline-error-hover-bg ) !default;
+$chip-outline-error-hover-border: null !default;
 
-$chip-outline-info-bg: transparent !default;
+$chip-outline-error-focus-bg: nul !default;
+$chip-outline-error-focus-text: null !default;
+$chip-outline-error-focus-border: null !default;
+
+$chip-outline-error-selected-bg: $chip-outline-error-hover-bg !default;
+$chip-outline-error-selected-text: $chip-outline-error-hover-text !default;
+$chip-outline-error-selected-border: null !default;
+
+$chip-outline-info-bg: null !default;
 $chip-outline-info-text: $info !default;
-$chip-outline-info-border: rgba( $info, .54 ) !default;
+$chip-outline-info-border: $info !default;
+
+$chip-outline-info-hover-bg: $info !default;
+$chip-outline-info-hover-text: contrast-wcag( $chip-outline-info-hover-bg ) !default;
+$chip-outline-info-hover-border: null !default;
 
-$chip-filled-single-selected-bg: rgba( $primary, .08 ) !default;
-$chip-filled-single-selected-text: $primary !default;
-$chip-filled-single-selected-border: rgba( $primary, .2 ) !default;
+$chip-outline-info-focus-bg: nul !default;
+$chip-outline-info-focus-text: null !default;
+$chip-outline-info-focus-border: null !default;
 
-$chip-outline-single-selected-bg: transparent !default;
-$chip-outline-single-selected-text: $primary !default;
-$chip-outline-single-selected-border: rgba( $primary, .2 ) !default;
+$chip-outline-info-selected-bg: $chip-outline-info-hover-bg !default;
+$chip-outline-info-selected-text: $chip-outline-info-hover-text !default;
+$chip-outline-info-selected-border: null !default;
 
 $chip-multiple-selected-icon-bg: rgba( black, .44 ) !default;
 $chip-multiple-selected-icon-text: #ffffff !default;
 
-
 $chip-primary-focus-shadow: 0 0 0 2px rgba( $primary, .16 ) !default;
 $chip-secondary-focus-shadow: 0 0 0 2px rgba( $secondary, .16 ) !default;
 $chip-info-focus-shadow: 0 0 0 2px rgba( $info, .16 ) !default;
@@ -6799,11 +6896,9 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
             font-size: $chip-selected-icon-font-size;
         }
 
-        .k-chip-selected {
-            .k-selected-icon-wrapper {
-                width: $chip-selected-icon-size;
-                visibility: visible;
-            }
+        .k-chip.k-selected .k-selected-icon-wrapper {
+            width: $chip-selected-icon-size;
+            visibility: visible;
         }
 
         > .k-chip-has-icon {
@@ -6820,10 +6915,8 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
                 transition: width .2s, opacity .2s;
             }
 
-            &.k-chip-selected {
-                .k-selected-icon-wrapper {
-                    opacity: 1;
-                }
+            &.k-selected .k-selected-icon-wrapper {
+                opacity: 1;
             }
         }
     }
@@ -6848,10 +6941,6 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
         &.k-chip-focus {
             outline: 0;
         }
-
-        &.k-chip-disabled {
-            @include disabled( $disabled-styling );
-        }
     }
 
     .k-chip-content {
@@ -6897,7 +6986,8 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
 
     .k-chip-list {
         &[dir="rtl"],
-        .k-rtl & {
+        .k-rtl &,
+        &.k-rtl {
             > * {
                 margin-right: 0;
                 margin-left: $chips-margin;
@@ -6911,7 +7001,8 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
 
     .k-chip {
         &[dir="rtl"],
-        .k-rtl & {
+        .k-rtl &,
+        &.k-rtl {
             .k-chip-icon {
                 margin-left: 0;
                 margin-right: $chip-icon-margin;
@@ -6944,91 +7035,192 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
 // #region @import "_theme.scss"; -> packages/default/scss/chip/_theme.scss
 @include exports("chip/theme") {
 
-    .k-selection-single {
-        .k-chip-selected {
-            &.k-chip-filled {
-                @include fill(
-                    $chip-filled-single-selected-text,
-                    $chip-filled-single-selected-bg,
-                    $chip-filled-single-selected-border
-                );
-            }
-
-            &.k-chip-outline {
-                @include fill(
-                    $chip-outline-single-selected-text,
-                    $chip-outline-single-selected-bg,
-                    $chip-outline-single-selected-border
-                );
-            }
-        }
-    }
-
-    .k-selection-multiple {
-        > .k-chip-has-icon {
-            &.k-chip-selected {
-                .k-selected-icon-wrapper {
-                    color: $chip-multiple-selected-icon-text;
-                    background-color: $chip-multiple-selected-icon-bg;
-                }
-            }
-        }
+    .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
+        @include fill(
+            $color: $chip-multiple-selected-icon-text,
+            $bg: $chip-multiple-selected-icon-bg
+        );
     }
 
-    .k-chip-filled {
+    // Solid
+    .k-chip-solid {
         @include fill(
-            $chip-filled-text,
-            $chip-filled-bg,
-            $chip-filled-border
+            $chip-solid-text,
+            $chip-solid-bg,
+            $chip-solid-border
         );
 
         &:hover,
-        &.k-chip-hover {
-            background-color: $chip-filled-hovered-bg;
-            border-color: $chip-filled-hovered-border;
+        &.k-state-hover,
+        &.k-hover {
+            @include fill(
+                $bg: $chip-solid-hover-bg,
+                $border: $chip-solid-hover-border
+            );
         }
 
         &:focus,
-        &.k-chip-focused {
-            background-color: $chip-filled-focused-bg;
-            box-shadow: $chip-filled-focused-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-solid-focus-shadow );
+            @include fill( $bg: $chip-solid-focus-bg );
         }
 
-        &.k-chip-selected {
-            background-color: $chip-filled-selected-bg;
-            border-color: $chip-filled-selected-border;
+        &.k-state-selected,
+        &.k-selected {
+            @include fill(
+                $bg: $chip-solid-selected-bg,
+                $border: $chip-solid-selected-border
+            );
         }
 
         &.k-chip-success {
             @include fill(
-                $chip-filled-success-text,
-                $chip-filled-success-bg,
-                $chip-filled-success-border
+                $chip-solid-success-text,
+                $chip-solid-success-bg,
+                $chip-solid-success-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-success-hover-text,
+                    $chip-solid-success-hover-bg,
+                    $chip-solid-success-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-success-focus-text,
+                    $chip-solid-success-focus-bg,
+                    $chip-solid-success-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-success-selected-text,
+                    $chip-solid-success-selected-bg,
+                    $chip-solid-success-selected-border
+                );
+            }
         }
 
+
         &.k-chip-warning {
             @include fill(
-                $chip-filled-warning-text,
-                $chip-filled-warning-bg,
-                $chip-filled-warning-border
+                $chip-solid-warning-text,
+                $chip-solid-warning-bg,
+                $chip-solid-warning-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-warning-hover-text,
+                    $chip-solid-warning-hover-bg,
+                    $chip-solid-warning-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-warning-focus-text,
+                    $chip-solid-warning-focus-bg,
+                    $chip-solid-warning-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-warning-selected-text,
+                    $chip-solid-warning-selected-bg,
+                    $chip-solid-warning-selected-border
+                );
+            }
         }
 
         &.k-chip-error {
             @include fill(
-                $chip-filled-error-text,
-                $chip-filled-error-bg,
-                $chip-filled-error-border
+                $chip-solid-error-text,
+                $chip-solid-error-bg,
+                $chip-solid-error-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-error-hover-text,
+                    $chip-solid-error-hover-bg,
+                    $chip-solid-error-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-error-focus-text,
+                    $chip-solid-error-focus-bg,
+                    $chip-solid-error-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-error-selected-text,
+                    $chip-solid-error-selected-bg,
+                    $chip-solid-error-selected-border
+                );
+            }
         }
 
         &.k-chip-info {
             @include fill(
-                $chip-filled-info-text,
-                $chip-filled-info-bg,
-                $chip-filled-info-border
+                $chip-solid-info-text,
+                $chip-solid-info-bg,
+                $chip-solid-info-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-info-hover-text,
+                    $chip-solid-info-hover-bg,
+                    $chip-solid-info-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-info-focus-text,
+                    $chip-solid-info-focus-bg,
+                    $chip-solid-info-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-info-selected-text,
+                    $chip-solid-info-selected-bg,
+                    $chip-solid-info-selected-border
+                );
+            }
         }
     }
 
@@ -7040,27 +7232,32 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
         );
 
         &:hover,
-        &.k-chip-hover {
+        &.k-state-hover,
+        &.k-hover {
             @include fill(
-                $chip-outline-hovered-text,
-                $chip-outline-hovered-bg,
-                $chip-outline-hovered-border
+                $chip-outline-hover-text,
+                $chip-outline-hover-bg,
+                $chip-outline-hover-border
             );
         }
 
         &:focus,
-        &.k-chip-focused {
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-outline-focus-shadow );
             @include fill(
-                $chip-outline-focused-text,
-                $chip-outline-focused-bg,
-                $chip-outline-focused-border
+                $chip-outline-focus-text,
+                $chip-outline-focus-bg,
+                $chip-outline-focus-border
             );
-            box-shadow: $chip-outline-focused-shadow;
         }
 
-        &.k-chip-selected {
-            color: $chip-outline-selected-text;
-            background-color: $chip-outline-selected-bg;
+        &.k-state-selected,
+        &.k-selected {
+            @include fill(
+                $color: $chip-outline-selected-text,
+                $bg: $chip-outline-selected-bg
+            );
         }
 
         &.k-chip-success {
@@ -7069,6 +7266,35 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
                 $chip-outline-success-bg,
                 $chip-outline-success-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-success-hover-text,
+                    $chip-outline-success-hover-bg,
+                    $chip-outline-success-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-success-focus-text,
+                    $chip-outline-success-focus-bg,
+                    $chip-outline-success-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-success-selected-text,
+                    $chip-outline-success-selected-bg,
+                    $chip-outline-success-selected-border
+                );
+            }
         }
 
         &.k-chip-warning {
@@ -7077,60 +7303,142 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
                 $chip-outline-warning-bg,
                 $chip-outline-warning-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-warning-hover-text,
+                    $chip-outline-warning-hover-bg,
+                    $chip-outline-warning-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-warning-focus-text,
+                    $chip-outline-warning-focus-bg,
+                    $chip-outline-warning-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-warning-selected-text,
+                    $chip-outline-warning-selected-bg,
+                    $chip-outline-warning-selected-border
+                );
+            }
         }
 
+
         &.k-chip-error {
             @include fill(
                 $chip-outline-error-text,
                 $chip-outline-error-bg,
                 $chip-outline-error-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-error-hover-text,
+                    $chip-outline-error-hover-bg,
+                    $chip-outline-error-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-error-focus-text,
+                    $chip-outline-error-focus-bg,
+                    $chip-outline-error-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-error-selected-text,
+                    $chip-outline-error-selected-bg,
+                    $chip-outline-error-selected-border
+                );
+            }
         }
 
+
         &.k-chip-info {
             @include fill(
                 $chip-outline-info-text,
                 $chip-outline-info-bg,
                 $chip-outline-info-border
             );
-        }
-    }
 
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-info-hover-text,
+                    $chip-outline-info-hover-bg,
+                    $chip-outline-info-hover-border
+                );
+            }
 
-    // Chip colors
-    .k-chip-primary {
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-info-focus-text,
+                    $chip-outline-info-focus-bg,
+                    $chip-outline-info-focus-border
+                );
+            }
 
-        &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-primary-focus-shadow;
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-info-selected-text,
+                    $chip-outline-info-selected-bg,
+                    $chip-outline-info-selected-border
+                );
+            }
         }
     }
-    .k-chip-info {
 
+
+    // Chip colors
+    .k-chip-info {
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-info-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-info-focus-shadow );
         }
     }
     .k-chip-success {
-
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-success-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-success-focus-shadow );
         }
     }
     .k-chip-warning {
-
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-warning-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-warning-focus-shadow );
         }
     }
     .k-chip-error {
-
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-error-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-error-focus-shadow );
         }
     }
 
@@ -36608,6 +36916,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
         }
 
+        &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell {
+            flex-basis: auto;
+        }
 
 
         .k-more-events {