@progress/kendo-theme-bootstrap 5.0.0-next.3 → 5.0.0-next.4

package/dist/all.scss

@@ -602,6 +602,25 @@ $data-uris: () !default;
     }
 }
 
+// #endregion
+// #region @import "_disabled.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-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/bootstrap/node_modules/@progress/kendo-theme-default/scss/core/mixins/_decoration.scss
 // Fill and outline
@@ -632,25 +651,6 @@ $data-uris: () !default;
     }
 }
 
-// #endregion
-// #region @import "_disabled.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-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/bootstrap/node_modules/@progress/kendo-theme-default/scss/core/mixins/_gradients.scss
 @mixin linear-gradient( $gradient: null ) {
@@ -4985,22 +4985,19 @@ $display4-letter-spacing: null !default;
 
 
 // Dependencies
-// #region @import "../common/_decoration.scss"; -> packages/bootstrap/scss/common/_decoration.scss
-// #region @import "~@progress/kendo-theme-default/scss/common/_decoration.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/common/_decoration.scss
+// #region @import "../utils/_theme-colors.scss"; -> packages/bootstrap/scss/utils/_theme-colors.scss
+// #region @import "~@progress/kendo-theme-default/scss/utils/_theme-colors.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-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},
@@ -5016,11 +5013,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;
+        }
+    }
 
 }
 
@@ -5033,12 +5030,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 );
+        }
+    }
 }
 
 
@@ -5128,12 +5124,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;
 
 
@@ -6159,6 +6164,9 @@ $display4-letter-spacing: null !default;
 
 // #endregion
 
+// #endregion
+// #region @import "_theme-colors.scss"; -> packages/bootstrap/scss/utils/_theme-colors.scss
+// File already imported_once. Skipping output.
 // #endregion
 // #region @import "_touch-action.scss"; -> packages/bootstrap/scss/utils/_touch-action.scss
 // #region @import "~@progress/kendo-theme-default/scss/utils/_touch-action.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_touch-action.scss
@@ -8817,74 +8825,165 @@ $chip-remove-icon-font-size: 14px !default;
 
 $chip-avatar-size: 24px !default;
 
-$chip-filled-bg: #e4e7eb !default;
-$chip-filled-text: $body-text !default;
-$chip-filled-border: transparent !default;
+$chip-base-bg: $base-text !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 3px rgba( $chip-base-bg, .16 ) !default;
 
-$chip-filled-hovered-bg: #ced3db !default;
-$chip-filled-hovered-border: transparent !default;
+$chip-solid-selected-bg: rgba( $chip-base-bg, .24 ) !default;
+$chip-solid-selected-border: null !default;
 
-$chip-filled-focused-bg: $chip-filled-bg !default;
-$chip-filled-focused-shadow: 0 0 0 3px rgba($chip-filled-bg, .5) !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: #c7cdd5 !default;
-$chip-filled-selected-border: transparent !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, .15) !default;
-$chip-filled-success-text: $success !default;
-$chip-filled-success-border: transparent !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, .15) !default;
-$chip-filled-warning-text: $warning !default;
-$chip-filled-warning-border: transparent !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, .15) !default;
-$chip-filled-error-text: $error !default;
-$chip-filled-error-border: transparent !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, .15) !default;
-$chip-filled-info-text: $info !default;
-$chip-filled-info-border: transparent !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: #6c757d !default;
-$chip-outline-border: $chip-outline-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: rgba(206, 211, 219, .3) !default;
-$chip-outline-hovered-text: $chip-outline-text !default;
-$chip-outline-hovered-border: $chip-outline-border !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: $chip-filled-focused-shadow !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: rgba(199, 205, 213, .5) !default;
-$chip-outline-selected-text: $chip-outline-text !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: $component-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: $chip-solid-focus-shadow !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: $success !default;
 
-$chip-outline-warning-bg: transparent !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: null !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: null !default;
 $chip-outline-warning-text: $warning !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: null !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: $error !default;
 
-$chip-outline-info-bg: transparent !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-error-focus-bg: null !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: $info !default;
 
-$chip-filled-single-selected-bg: rgba($primary, .12) !default;
-$chip-filled-single-selected-text: $primary !default;
-$chip-filled-single-selected-border: transparent !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-outline-info-focus-bg: null !default;
+$chip-outline-info-focus-text: null !default;
+$chip-outline-info-focus-border: null !default;
 
-$chip-outline-single-selected-bg: $chip-filled-single-selected-bg !default;
-$chip-outline-single-selected-text: $primary !default;
-$chip-outline-single-selected-border: $primary !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(0, 0, 0, .36) !default;
 $chip-multiple-selected-icon-text: #ffffff !default;
@@ -8892,10 +8991,10 @@ $chip-multiple-selected-icon-text: #ffffff !default;
 
 $chip-primary-focus-shadow: null !default;
 $chip-secondary-focus-shadow: null !default;
-$chip-info-focus-shadow: null !default;
-$chip-success-focus-shadow: null !default;
-$chip-warning-focus-shadow: null !default;
-$chip-error-focus-shadow: null !default;
+$chip-info-focus-shadow: 0 0 0 3px rgba( $info, .16 ) !default;
+$chip-success-focus-shadow: 0 0 0 3px rgba( $success, .16 ) !default;
+$chip-warning-focus-shadow: 0 0 0 3px rgba( $warning, .16 ) !default;
+$chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/chip/_layout.scss
@@ -8937,11 +9036,9 @@ $chip-error-focus-shadow: null !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 {
@@ -8958,10 +9055,8 @@ $chip-error-focus-shadow: null !default;
                 transition: width .2s, opacity .2s;
             }
 
-            &.k-chip-selected {
-                .k-selected-icon-wrapper {
-                    opacity: 1;
-                }
+            &.k-selected .k-selected-icon-wrapper {
+                opacity: 1;
             }
         }
     }
@@ -8986,10 +9081,6 @@ $chip-error-focus-shadow: null !default;
         &.k-chip-focus {
             outline: 0;
         }
-
-        &.k-chip-disabled {
-            @include disabled( $disabled-styling );
-        }
     }
 
     .k-chip-content {
@@ -9035,7 +9126,8 @@ $chip-error-focus-shadow: null !default;
 
     .k-chip-list {
         &[dir="rtl"],
-        .k-rtl & {
+        .k-rtl &,
+        &.k-rtl {
             > * {
                 margin-right: 0;
                 margin-left: $chips-margin;
@@ -9049,7 +9141,8 @@ $chip-error-focus-shadow: null !default;
 
     .k-chip {
         &[dir="rtl"],
-        .k-rtl & {
+        .k-rtl &,
+        &.k-rtl {
             .k-chip-icon {
                 margin-left: 0;
                 margin-right: $chip-icon-margin;
@@ -9085,91 +9178,192 @@ $chip-error-focus-shadow: null !default;
 // #region @import "~@progress/kendo-theme-default/scss/chip/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-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
+                );
+            }
         }
     }
 
@@ -9181,27 +9375,32 @@ $chip-error-focus-shadow: null !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 {
@@ -9210,6 +9409,35 @@ $chip-error-focus-shadow: null !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 {
@@ -9218,60 +9446,142 @@ $chip-error-focus-shadow: null !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 );
         }
     }
 
@@ -39943,6 +40253,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 {