@progress/kendo-theme-classic 5.4.2-dev.3 → 5.4.2-dev.4

package/dist/all.css

@@ -13734,31 +13734,17 @@ textarea.k-input-inner {
 
 .k-input-flat,
 .k-picker-flat {
-    border-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
     border-width: 1px 0;
     border-top-color: transparent !important;
     background-image: none !important;
 }
 
-.k-input-flat:focus, .k-input-flat.k-focus,
-.k-picker-flat:focus,
-.k-picker-flat.k-focus {
-    border-radius: 4px 4px 0px 0px !important;
-}
-
-.k-input-flat:focus-within,
-.k-picker-flat:focus-within {
-    border-radius: 4px 4px 0px 0px !important;
-}
-
 .k-input-outline {
     background: none !important;
 }
 
-.k-picker.k-picker-flat {
-    border-radius: 4px 4px 0px 0px !important;
-}
-
 .k-input-sm,
 .k-picker-sm {
     font-size: 14px;
@@ -13983,59 +13969,59 @@ textarea.k-input-inner {
     animation-name: autoFillEnd;
 }
 
-.k-input {
+.k-input-solid {
     border-color: #cacaca;
     color: #272727;
     background-color: #ffffff;
 }
 
-.k-input:hover, .k-input.k-hover {
+.k-input-solid:hover, .k-input-solid.k-hover {
     border-color: #b6b6b6;
 }
 
-.k-input:focus, .k-input.k-focus {
+.k-input-solid:focus, .k-input-solid.k-focus {
     border-color: rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
 }
 
-.k-input:focus-within {
+.k-input-solid:focus-within {
     border-color: rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
 }
 
-.k-input.k-invalid, .k-input.ng-invalid.ng-touched, .k-input.ng-invalid.ng-dirty {
+.k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
     border-color: #d92800;
 }
 
-.k-input.k-invalid .k-input-validation-icon, .k-input.ng-invalid.ng-touched .k-input-validation-icon, .k-input.ng-invalid.ng-dirty .k-input-validation-icon {
+.k-input-solid.k-invalid .k-input-validation-icon, .k-input-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-input-solid.ng-invalid.ng-dirty .k-input-validation-icon {
     color: #d92800;
 }
 
-.k-picker {
+.k-picker-solid {
     border-color: #cacaca;
     color: #272727;
     background-color: #f0f0f0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
 }
 
-.k-picker:hover, .k-picker.k-hover {
+.k-picker-solid:hover, .k-picker-solid.k-hover {
     border-color: #b6b6b6;
     background-color: #dddddd;
 }
 
-.k-picker:focus, .k-picker.k-focus {
+.k-picker-solid:focus, .k-picker-solid.k-focus {
     box-shadow: 0 0 4px 0 rgba(202, 202, 202, 0.75);
 }
 
-.k-picker:focus-within {
+.k-picker-solid:focus-within {
     box-shadow: 0 0 4px 0 rgba(202, 202, 202, 0.75);
 }
 
-.k-picker.k-invalid, .k-picker.ng-invalid.ng-touched, .k-picker.ng-invalid.ng-dirty {
+.k-picker-solid.k-invalid, .k-picker-solid.ng-invalid.ng-touched, .k-picker-solid.ng-invalid.ng-dirty {
     border-color: #d92800;
 }
 
-.k-picker.k-invalid .k-input-validation-icon, .k-picker.ng-invalid.ng-touched .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty .k-input-validation-icon {
+.k-picker-solid.k-invalid .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-dirty .k-input-validation-icon {
     color: #d92800;
 }
 
@@ -14060,6 +14046,14 @@ textarea.k-input-inner {
     border-color: rgba(39, 39, 39, 0.8);
 }
 
+.k-input-outline:focus, .k-input-outline.k-focus {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
+}
+
+.k-input-outline:focus-within {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
+}
+
 .k-input-outline.k-invalid, .k-input-outline.ng-invalid.ng-touched, .k-input-outline.ng-invalid.ng-dirty {
     border-color: #d92800;
 }
@@ -14069,24 +14063,22 @@ textarea.k-input-inner {
 }
 
 .k-picker-outline {
-    border-color: #272727;
-    background-color: transparent;
+    border-color: rgba(39, 39, 39, 0.5);
+    color: #272727;
 }
 
 .k-picker-outline:hover, .k-picker-outline.k-hover {
-    color: #ffffff;
+    border-color: #272727;
+    color: white;
     background-color: #272727;
 }
 
 .k-picker-outline:focus, .k-picker-outline.k-focus {
-    border-color: #272727;
-    background-color: transparent;
     box-shadow: 0 0 4px 0 rgba(202, 202, 202, 0.75);
 }
 
-.k-picker-outline:focus:hover, .k-picker-outline:focus.k-hover, .k-picker-outline.k-focus:hover, .k-picker-outline.k-focus.k-hover {
-    color: #ffffff;
-    background-color: #272727;
+.k-picker-outline:focus-within {
+    box-shadow: 0 0 4px 0 rgba(202, 202, 202, 0.75);
 }
 
 .k-picker-outline.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
@@ -14100,7 +14092,18 @@ textarea.k-input-inner {
 .k-input-flat {
     border-color: #cacaca;
     color: #272727;
-    background-color: transparent;
+}
+
+.k-input-flat:hover, .k-input-flat.k-hover {
+    border-color: #b6b6b6;
+}
+
+.k-input-flat:focus, .k-input-flat.k-focus {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
+}
+
+.k-input-flat:focus-within {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
 }
 
 .k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
@@ -14114,7 +14117,6 @@ textarea.k-input-inner {
 .k-picker-flat {
     border-color: #cacaca;
     color: #272727;
-    background-color: transparent;
 }
 
 .k-picker-flat:hover, .k-picker-flat.k-hover {
@@ -14122,6 +14124,14 @@ textarea.k-input-inner {
     background-color: rgba(39, 39, 39, 0.04);
 }
 
+.k-picker-flat:focus, .k-picker-flat.k-focus {
+    box-shadow: 0 0 4px 0 rgba(202, 202, 202, 0.75);
+}
+
+.k-picker-flat:focus-within {
+    box-shadow: 0 0 4px 0 rgba(202, 202, 202, 0.75);
+}
+
 .k-picker-flat.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
     border-color: #d92800;
 }
@@ -19314,6 +19324,9 @@ kendo-label > .k-label {
 }
 
 .k-colorgradient-inputs .k-input-inner {
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
+    text-align: center;
     text-overflow: clip;
 }
 

package/dist/all.scss

@@ -889,42 +889,6 @@ $_kendo-imported-modules: ();
 
 // #endregion
 
-// Other
-// #region @import "_input-ripple.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/core/mixins/_input-ripple.scss
-@mixin input-ripple() {
-    $height: 2 * $kendo-input-border-width;
-
-    &::after {
-        display: block;
-        z-index: 2;
-        content: "";
-        position: absolute;
-        bottom: calc( 1px - #{$height} );
-        left: 0;
-        right: 0;
-        height: $height;
-        margin: auto;
-        opacity: 0;
-        transform: scaleX(.5);
-        transition: transform .3s;
-        background-color: $primary;
-    }
-
-    &.k-state-focused::after ,
-    &.k-focus::after {
-        opacity: 1;
-        transform: scaleX(1);
-    }
-
-
-    &.k-state-invalid::after ,
-    &.k-invalid::after {
-        background-color: $error;
-        transition: none;
-    }
-}
-
-// #endregion
 
 // #endregion
 
@@ -9031,17 +8995,20 @@ $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 $kendo-input-outline-focus-bg: null !default;
 $kendo-input-outline-focus-text: null !default;
 $kendo-input-outline-focus-border: null !default;
-$kendo-input-outline-focus-shadow: null !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-flat-bg: transparent !default;
+$kendo-input-flat-bg: null !default;
 $kendo-input-flat-text: $kendo-input-text !default;
 $kendo-input-flat-border: $kendo-input-border !default;
 
+$kendo-input-flat-hover-bg: null !default;
+$kendo-input-flat-hover-text: null !default;
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
+
 $kendo-input-flat-focus-bg: null !default;
 $kendo-input-flat-focus-text: null !default;
 $kendo-input-flat-focus-border: null !default;
-
-$kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
@@ -9067,24 +9034,24 @@ $kendo-picker-disabled-border: null !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
-$kendo-picker-outline-bg: transparent !default;
-$kendo-picker-outline-text: null !default;
-$kendo-picker-outline-border: $kendo-button-text !default;
+$kendo-picker-outline-bg: null !default;
+$kendo-picker-outline-text: $kendo-button-text !default;
+$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
-$kendo-picker-outline-hover-bg: $kendo-button-text !default;
-$kendo-picker-outline-hover-text: $body-bg !default;
-$kendo-picker-outline-hover-border: null !default;
+$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
-$kendo-picker-outline-focus-bg: transparent !default;
-$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
-$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-bg: null !default;
+$kendo-picker-outline-focus-text: null !default;
+$kendo-picker-outline-focus-border: null !default;
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
-$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
-$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+$kendo-picker-outline-hover-focus-bg: null !default;
+$kendo-picker-outline-hover-focus-text: null !default;
+$kendo-picker-outline-hover-focus-border: null !default;
 
-$kendo-picker-flat-bg: transparent !default;
+$kendo-picker-flat-bg: null !default;
 $kendo-picker-flat-text: $kendo-button-text !default;
 $kendo-picker-flat-border: $kendo-button-border !default;
 
@@ -9095,7 +9062,7 @@ $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
 $kendo-picker-flat-focus-bg: null !default;
 $kendo-picker-flat-focus-text: null !default;
 $kendo-picker-flat-focus-border: null !default;
-$kendo-picker-flat-focus-shadow: null !default;
+$kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
 $kendo-picker-flat-hover-focus-bg: null !default;
 $kendo-picker-flat-hover-focus-text: null !default;
@@ -9475,28 +9442,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
-        @include border-radius( 0 !important ); // sass-lint:disable-line no-important
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $kendo-input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
         background-image: none !important; // sass-lint:disable-line no-important
-
-        &:focus,
-        &.k-focus {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
-        &:focus-within {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
     }
 
     .k-input-outline {
         background: none !important; // sass-lint:disable-line no-important
     }
 
-    .k-picker.k-picker-flat {
-        @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-    }
-
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
@@ -9609,7 +9564,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 @include exports( "input/theme" ) {
 
     // Solid input
-    .k-input {
+    .k-input-solid {
         @include fill(
             $kendo-input-text,
             $kendo-input-bg,
@@ -9646,7 +9601,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -9663,7 +9618,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -9671,10 +9626,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
@@ -9682,7 +9637,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
 
     // Solid picker
-    .k-picker {
+    .k-picker-solid {
         @include fill(
             $kendo-picker-text,
             $kendo-picker-bg,
@@ -9723,7 +9678,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -9756,7 +9711,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
-    // Outline
+
+    // Outline input
     .k-input-outline {
         @include fill (
             $kendo-input-outline-text,
@@ -9777,6 +9733,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
            }
         }
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -9786,6 +9743,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -9795,12 +9753,33 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
              );
             @include box-shadow ( $kendo-input-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-focus-shadow );
+        }
+
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
+        }
 
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -9808,15 +9787,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
     }
 
+
+    // Outline picker
     .k-picker-outline {
         @include fill (
             $kendo-picker-outline-text,
@@ -9824,6 +9805,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-picker-outline-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -9833,6 +9815,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -9842,6 +9825,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
             @include box-shadow ( $kendo-picker-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -9854,11 +9845,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -9866,15 +9870,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
     }
 
-    // Flat
+
+    // Flat input
     .k-input-flat {
         @include fill (
             $kendo-input-flat-text,
@@ -9882,6 +9887,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-input-flat-border
         );
 
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-flat-hover-text,
+                $kendo-input-flat-hover-bg,
+                $kendo-input-flat-hover-border
+            );
+        }
+
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -9889,6 +9905,28 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-input-flat-focus-bg,
                 $kendo-input-flat-focus-border
             );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+        &:focus-within {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
         }
 
         // Invalid
@@ -9911,6 +9949,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Flat picker
     .k-picker-flat {
         @include fill (
             $kendo-picker-flat-text,
@@ -9918,6 +9958,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-picker-flat-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -9927,6 +9968,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -9936,6 +9978,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
             @include box-shadow( $kendo-picker-flat-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -9948,6 +9998,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -18374,6 +18437,9 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
         }
 
         .k-input-inner {
+            padding-inline-start: 2px;
+            padding-inline-end: 2px;
+            text-align: center;
             text-overflow: clip;
         }
     }
@@ -27046,6 +27112,7 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;
 
@@ -27154,7 +27221,7 @@ $panelbar-header-expanded-gradient: null !default;
         margin: 0;
         padding: 0;
         border-width: $panelbar-border-width;
-        border-style: solid;
+        border-style: $panelbar-border-style;
         box-sizing: border-box;
         outline: 0;
         font-family: $panelbar-font-family;

package/lib/swatches/classic-green-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Green Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#000000",
         "#131413",

package/lib/swatches/classic-green.json

@@ -3,7 +3,7 @@
     "name": "Classic Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#f3f4f3",

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

@@ -3,7 +3,7 @@
     "name": "Classic Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#000000",
         "#101010",

package/lib/swatches/classic-main.json

@@ -3,7 +3,7 @@
     "name": "Classic Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#f0f0f0",

package/lib/swatches/classic-opal-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#000000",
         "#1e242d",

package/lib/swatches/classic-opal.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#def4fd",

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#000000",
         "#131314",

package/lib/swatches/classic-silver.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.4.2-dev.3",
+  "version": "5.4.2-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,7 +49,7 @@
     "postpublish": "echo 'no postpublish for classic theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.4.2-dev.3"
+    "@progress/kendo-theme-default": "^5.4.2-dev.4"
   },
-  "gitHead": "3c98c61d0b83d13dfdc0d722e92c581db0f6269b"
+  "gitHead": "9007a9c66218ab09b365d2b71da9edce999b7d04"
 }

package/scss/input/_variables.scss

@@ -88,17 +88,20 @@ $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 $kendo-input-outline-focus-bg: null !default;
 $kendo-input-outline-focus-text: null !default;
 $kendo-input-outline-focus-border: null !default;
-$kendo-input-outline-focus-shadow: null !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-flat-bg: transparent !default;
+$kendo-input-flat-bg: null !default;
 $kendo-input-flat-text: $kendo-input-text !default;
 $kendo-input-flat-border: $kendo-input-border !default;
 
+$kendo-input-flat-hover-bg: null !default;
+$kendo-input-flat-hover-text: null !default;
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
+
 $kendo-input-flat-focus-bg: null !default;
 $kendo-input-flat-focus-text: null !default;
 $kendo-input-flat-focus-border: null !default;
-
-$kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
@@ -124,24 +127,24 @@ $kendo-picker-disabled-border: null !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
-$kendo-picker-outline-bg: transparent !default;
-$kendo-picker-outline-text: null !default;
-$kendo-picker-outline-border: $kendo-button-text !default;
+$kendo-picker-outline-bg: null !default;
+$kendo-picker-outline-text: $kendo-button-text !default;
+$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
-$kendo-picker-outline-hover-bg: $kendo-button-text !default;
-$kendo-picker-outline-hover-text: $body-bg !default;
-$kendo-picker-outline-hover-border: null !default;
+$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
-$kendo-picker-outline-focus-bg: transparent !default;
-$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
-$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-bg: null !default;
+$kendo-picker-outline-focus-text: null !default;
+$kendo-picker-outline-focus-border: null !default;
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
-$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
-$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+$kendo-picker-outline-hover-focus-bg: null !default;
+$kendo-picker-outline-hover-focus-text: null !default;
+$kendo-picker-outline-hover-focus-border: null !default;
 
-$kendo-picker-flat-bg: transparent !default;
+$kendo-picker-flat-bg: null !default;
 $kendo-picker-flat-text: $kendo-button-text !default;
 $kendo-picker-flat-border: $kendo-button-border !default;
 
@@ -152,7 +155,7 @@ $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
 $kendo-picker-flat-focus-bg: null !default;
 $kendo-picker-flat-focus-text: null !default;
 $kendo-picker-flat-focus-border: null !default;
-$kendo-picker-flat-focus-shadow: null !default;
+$kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
 $kendo-picker-flat-hover-focus-bg: null !default;
 $kendo-picker-flat-hover-focus-text: null !default;

package/scss/panelbar/_variables.scss

@@ -5,6 +5,7 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;