@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/input/_layout.scss

@@ -11,24 +11,21 @@
     .k-input,
     .k-picker {
 
-        &:focus,
-        &.k-focus,
-        &:focus-within {
-
-            &::after {
-                content: '';
-                display: block;
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                border-width: $kendo-input-focus-border-width;
-                border-style: solid;
-                border-radius: inherit;
-                pointer-events: none;
-                z-index: 1;
-            }
+        &::after {
+            content: '';
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            inset-inline-end: -1px;
+            inset-block-end: -1px;
+            inset-inline-start: -1px;
+            height: 4px;
+            border-width: 0 0 $kendo-input-border-width;
+            border-style: solid;
+            border-end-start-radius: inherit;
+            border-end-end-radius: inherit;
+            pointer-events: none;
+            z-index: 1;
         }
     }
 
@@ -65,12 +62,6 @@
         padding-block: $kendo-input-md-padding-y;
     }
 
-    // Input button
-    .k-input-button {
-        border-radius: 0;
-        border-width: 0;
-        border-color: inherit;
-    }
     .k-input-outline .k-input-button {
         border-inline-start-width: $kendo-input-button-border-width;
     }
@@ -89,8 +80,8 @@
 
 
     // Fill mode
-    .k-input-flat,
-    .k-picker-flat {
+    .k-input,
+    .k-picker {
 
         &:focus,
         &.k-focus,
@@ -117,6 +108,36 @@
         }
     }
 
+    .k-input-outline,
+    .k-picker-outline {
+
+        &::after {
+            display: none;
+        }
+
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+
+            outline: $kendo-input-focus-border-width solid k-color(primary);
+            outline-offset: calc( -1 * #{$kendo-input-focus-border-width} );
+
+        }
+
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+
+            &:focus,
+            &.k-focus,
+            &:focus-within {
+
+                outline-color: k-color(error-on-surface);
+            }
+        }
+
+    }
+
     .k-input-flat,
     .k-input-outline {
         background: none !important; // stylelint-disable-line declaration-no-important
@@ -132,20 +153,6 @@
         .k-input-#{$size},
         .k-picker-#{$size} {
 
-            .k-input-values {
-                padding: 0;
-            }
-            .k-input-values > .k-searchbar,
-            .k-input-values > .k-input-inner {
-                margin: 0;
-            }
-
-            .k-input-button {
-                width: if( $kendo-use-input-button-width, var( --kendo-input-button-width, #{$_button-width} ), auto );
-                padding-inline: $_button-padding-x;
-                padding-block: $_button-padding-y;
-            }
-
             .k-input-spinner {
                 width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
 

package/scss/input/_theme.scss

@@ -18,6 +18,20 @@
             }
         }
 
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+
+            &:focus,
+            &.k-focus,
+            &:focus-within {
+
+                &::after {
+                    border-color: $kendo-input-invalid-border;
+                }
+            }
+        }
+
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -35,31 +49,30 @@
                 background: none;
             }
         }
+    }
 
-        // Invalid
-        &.k-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            border-color: $kendo-input-invalid-border;
+    .k-input-solid,
+    .k-picker-solid {
+        border-bottom-color: k-color(border);
 
-            &::after {
-                border-color: $kendo-input-invalid-border;
-            }
+        &:hover,
+        &.k-hover {
+             border-bottom-color: k-color(border);
+        }
 
-            .k-input-validation-icon {
-                color: $kendo-input-invalid-text;
-            }
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+            border-color: $kendo-input-border;
+            border-bottom-color: $kendo-input-focus-border;
 
-            &:focus:hover,
-            &.k-focus:hover,
-            &:focus.k-hover,
-            &.k-focus.k-hover {
-                border-color: $kendo-input-invalid-border;
+        }
 
-                .k-input-validation-icon {
-                    color: $kendo-input-invalid-text;
-                }
-            }
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: $kendo-input-border;
+            border-bottom-color: $kendo-input-invalid-border;
         }
     }
 
@@ -88,10 +101,6 @@
         &:focus,
         &.k-focus,
         &:focus-within {
-            color: $kendo-picker-focus-text;
-            background-color: $kendo-picker-focus-bg;
-            border-color: $kendo-picker-focus-border;
-
             &::after {
                 border-color: $kendo-picker-focus-border;
             }
@@ -101,25 +110,24 @@
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: $kendo-input-invalid-border;
-
-            &::after {
-                border-color: $kendo-input-invalid-border;
-            }
-
             .k-input-validation-icon {
                 color: $kendo-input-invalid-text;
             }
 
-            &:focus:hover,
-            &.k-focus:hover,
-            &:focus.k-hover,
-            &.k-focus.k-hover {
-                border-color: $kendo-input-invalid-border;
+        }
+    }
 
-                .k-input-validation-icon {
-                    color: $kendo-input-invalid-text;
-                }
+    .k-picker-solid,
+    .k-picker-flat {
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: $kendo-input-border;
+            border-bottom-color: $kendo-input-invalid-border;
+
+            &::after {
+                border-color: $kendo-input-invalid-border;
             }
         }
     }

package/scss/input/_variables.scss

@@ -22,17 +22,17 @@ $kendo-input-border-height: calc( $kendo-input-border-width * 2 ) !default;
 $kendo-input-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-x: var( --kendo-input-padding-x, k-spacing(2) ) !default;
+$kendo-input-md-padding-x: var( --kendo-input-padding-x, k-spacing(2.5) ) !default;
 /// The horizontal padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-x: k-spacing(2) !default;
+$kendo-input-lg-padding-x: k-spacing(4.5) !default;
 
 /// The vertical padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-y: k-spacing(1) !default;
+$kendo-input-sm-padding-y: calc( #{k-spacing(0.5)} + 1px ) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-y: var( --kendo-input-padding-y, k-spacing(1.5) ) !default;
+$kendo-input-md-padding-y: calc(var( --kendo-input-padding-y, #{k-spacing(1)} ) + 1px) !default;
 /// The vertical padding of the large Input components.
 /// @group input
 $kendo-input-lg-padding-y: k-spacing(2) !default;
@@ -45,7 +45,7 @@ $kendo-input-sm-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-input-md-font-size: var( --kendo-input-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The font size of the large Input components.
 /// @group input
-$kendo-input-lg-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the small Input components.
 /// @group input
@@ -55,7 +55,7 @@ $kendo-input-sm-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-input-md-line-height: var( --kendo-input-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The line height of the large Input components.
 /// @group input
-$kendo-input-lg-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 // The font family of the Input components.
 $kendo-input-font-family: var( --kendo-input-font-family, var( --kendo-font-family, inherit) ) !default;
@@ -95,11 +95,11 @@ $kendo-input-text: var( --kendo-input-text, k-color(on-app-surface) ) !default;
 
 /// The background color of the solid Input components.
 /// @group input
-$kendo-input-bg: var( --kendo-input-bg, k-color(app-surface) ) !default;
+$kendo-input-bg: var( --kendo-input-bg, k-color(surface-alt) ) !default;
 
 /// The border color of the solid Input components.
 /// @group input
-$kendo-input-border: var( --kendo-input-border, k-color(border) ) !default;
+$kendo-input-border: var( --kendo-input-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The text color of the hovered solid Input components.
 /// @group input
@@ -111,7 +111,7 @@ $kendo-input-hover-bg: $kendo-input-bg !default;
 
 /// The border color of the hovered solid Input components.
 /// @group input
-$kendo-input-hover-border: k-color(border-alt) !default;
+$kendo-input-hover-border: color-mix( in srgb, k-color(border) 34%, transparent ) !default;
 
 /// The text color of the focused solid Input components.
 /// @group input
@@ -127,15 +127,15 @@ $kendo-input-focus-border: k-color(primary) !default;
 
 /// The text color of the disabled solid Input components.
 /// @group input
-$kendo-input-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-input-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled solid Input components.
 /// @group input
-$kendo-input-disabled-bg: k-color(base-subtle) !default;
+$kendo-input-disabled-bg: null !default;
 
 /// The border color of the disabled solid Input components.
 /// @group input
-$kendo-input-disabled-border: transparent !default;
+$kendo-input-disabled-border: color-mix(in srgb, k-color(on-app-surface) 14%, transparent ) !default;
 
 /// The text color of the outline Input components.
 /// @group input
@@ -147,7 +147,7 @@ $kendo-input-outline-bg: var( --kendo-input-outline-bg, k-color(app-surface) ) !
 
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: var( --kendo-input-outline-border, k-color(border) ) !default;
+$kendo-input-outline-border: var( --kendo-input-outline-border, color-mix( in srgb, k-color(border) 26%, transparent ) ) !default;
 
 /// The text color of the hovered outline Input components.
 /// @group input
@@ -159,7 +159,7 @@ $kendo-input-outline-hover-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered outline Input components.
 /// @group input
-$kendo-input-outline-hover-border: k-color(border-alt) !default;
+$kendo-input-outline-hover-border: color-mix( in srgb, k-color(border) 34%, transparent ) !default;
 
 /// The text color of the focused outline Input components.
 /// @group input
@@ -175,7 +175,7 @@ $kendo-input-outline-focus-border: k-color(primary) !default;
 
 /// The text color of the disabled outline Input components.
 /// @group input
-$kendo-input-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-input-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled outline Input components.
 /// @group input
@@ -183,7 +183,7 @@ $kendo-input-outline-disabled-bg: none !default;
 
 /// The border color of the disabled outline Input components.
 /// @group input
-$kendo-input-outline-disabled-border: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-input-outline-disabled-border: color-mix(in srgb, k-color(on-app-surface) 14%, transparent) !default;
 
 /// The text color of the flat Input components.
 /// @group input
@@ -223,7 +223,7 @@ $kendo-input-flat-focus-border: k-color(primary) !default;
 
 /// The text color of the disabled flat Input components.
 /// @group input
-$kendo-input-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-input-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled flat Input components.
 /// @group input
@@ -231,7 +231,7 @@ $kendo-input-flat-disabled-bg: none !default;
 
 /// The border color of the disabled flat Input components.
 /// @group input
-$kendo-input-flat-disabled-border: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-input-flat-disabled-border: color-mix(in srgb, k-color(on-app-surface) 14%, transparent) !default;
 
 /// The text color of the solid Picker components.
 /// @group input
@@ -239,11 +239,11 @@ $kendo-picker-text: var( --kendo-picker-text, k-color(on-app-surface) ) !default
 
 /// The background color of the solid Picker components.
 /// @group input
-$kendo-picker-bg: var( --kendo-picker-bg, k-color(app-surface) ) !default;
+$kendo-picker-bg: var( --kendo-picker-bg, k-color(surface-alt) ) !default;
 
 /// The border color of the solid Picker components.
 /// @group input
-$kendo-picker-border: var( --kendo-picker-border, k-color(border) ) !default;
+$kendo-picker-border: var( --kendo-picker-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The text color of the hovered solid Picker components.
 /// @group input
@@ -251,11 +251,11 @@ $kendo-picker-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of hovered the solid Picker components.
 /// @group input
-$kendo-picker-hover-bg: k-color(app-surface) !default;
+$kendo-picker-hover-bg: k-color(surface-alt) !default;
 
 /// The border color of the hovered solid Picker components.
 /// @group input
-$kendo-picker-hover-border: k-color(border-alt) !default;
+$kendo-picker-hover-border: color-mix(in srgb, k-color(border) 34%, transparent) !default;
 
 /// The text color of the focused solid Picker components.
 /// @group input
@@ -263,7 +263,7 @@ $kendo-picker-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused solid Picker components.
 /// @group input
-$kendo-picker-focus-bg: k-color(app-surface) !default;
+$kendo-picker-focus-bg: k-color(surface-alt) !default;
 
 /// The border color of the focused solid Picker components.
 /// @group input
@@ -271,15 +271,15 @@ $kendo-picker-focus-border: k-color(primary)  !default;
 
 /// The text color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-picker-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !default;
+$kendo-picker-disabled-bg: null !default;
 
 /// The border color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-disabled-border: transparent !default;
+$kendo-picker-disabled-border: color-mix(in srgb, k-color(on-app-surface) 14%, transparent ) !default;
 
 /// The text color of the outline Picker components.
 /// @group input
@@ -291,19 +291,19 @@ $kendo-picker-outline-bg: var( --kendo-picker-outline-bg, none ) !default;
 
 /// The border color of the outline Picker components.
 /// @group input
-$kendo-picker-outline-border: var( --kendo-picker-outline-border, k-color(on-app-surface) ) !default;
+$kendo-picker-outline-border: var( --kendo-picker-outline-border, color-mix( in srgb, k-color(border) 26%, transparent ) ) !default;
 
 /// The text color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-text: k-color(app-surface) !default;
+$kendo-picker-outline-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-bg: k-color(on-app-surface) !default;
+$kendo-picker-outline-hover-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg!default;
+$kendo-picker-outline-hover-border: color-mix( in srgb, k-color(border) 34%, transparent ) !default;
 
 /// The text color of the focused outline Picker components.
 /// @group input
@@ -319,11 +319,11 @@ $kendo-picker-outline-focus-border: k-color(primary) !default;
 
 /// The text color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-text: k-color(app-surface) !default;
+$kendo-picker-outline-hover-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-bg: k-color(on-app-surface) !default;
+$kendo-picker-outline-hover-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered and focused outline Picker components.
 /// @group input
@@ -331,7 +331,7 @@ $kendo-picker-outline-hover-focus-border: k-color(primary) !default;
 
 /// The text color of the disabled outline Picker components.
 /// @group input
-$kendo-picker-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-picker-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled outline Picker components.
 /// @group input
@@ -359,7 +359,7 @@ $kendo-picker-flat-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered flat Picker components.
 /// @group input
-$kendo-picker-flat-hover-bg: k-color(base-hover) !default;
+$kendo-picker-flat-hover-bg: var( --kendo-picker-outline-bg, none ) !default;
 
 /// The border color of the hovered flat Picker components.
 /// @group input
@@ -391,7 +391,7 @@ $kendo-picker-flat-hover-focus-border: $kendo-picker-flat-border !default;
 
 /// The text color of the disabled flat Picker components.
 /// @group input
-$kendo-picker-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-picker-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled flat Picker components.
 /// @group input
@@ -471,7 +471,7 @@ $kendo-input-suffix-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28
 
 /// The border color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-border: k-color(error-emphasis) !default;
+$kendo-input-invalid-border: k-color(error-on-surface) !default;
 /// The text color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-text: k-color(error-on-surface) !default;
@@ -496,7 +496,7 @@ $kendo-input-clear-value-hover-text: inherit !default;
 /// @group input
 $kendo-input-clear-value-hover-opacity: 1 !default;
 
-$kendo-use-input-button-width: true !default;
+$kendo-use-input-button-width: false !default;
 $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 

package/scss/list/_layout.scss

@@ -10,7 +10,20 @@
     .k-list {
         border-radius: 0;
     }
+
     .k-list-group-sticky-header {
         z-index: 1;
     }
+
+    .k-list-ul {
+        display: flex;
+        flex-direction: column;
+        padding: $kendo-list-content-padding;
+        gap: $kendo-list-item-spacing;
+    }
+
+    .k-list-item {
+        border-radius: $kendo-list-item-border-radius;
+    }
+
 }