@progress/kendo-theme-fluent 10.6.0 → 11.0.0-dev.1

package/scss/input/_variables.scss

@@ -91,19 +91,19 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The text color of the solid Input components.
 /// @group input
-$kendo-input-solid-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-solid-text: k-color(on-app-surface) !default;
 
 /// The background color of the solid Input components.
 /// @group input
-$kendo-input-solid-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-input-solid-bg: k-color(app-surface) !default;
 
 /// The border color of the solid Input components.
 /// @group input
-$kendo-input-solid-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-input-solid-border: k-color(border) !default;
 
 /// The text color of the hovered solid Input components.
 /// @group input
-$kendo-input-solid-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-input-solid-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered solid Input components.
 /// @group input
@@ -111,7 +111,7 @@ $kendo-input-solid-hover-bg: $kendo-input-solid-bg !default;
 
 /// The border color of the hovered solid Input components.
 /// @group input
-$kendo-input-solid-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-solid-hover-border: k-color(border-alt) !default;
 
 /// The text color of the focused solid Input components.
 /// @group input
@@ -123,7 +123,7 @@ $kendo-input-solid-focus-bg: $kendo-input-solid-bg !default;
 
 /// The border color of the focused solid Input components.
 /// @group input
-$kendo-input-solid-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-input-solid-focus-border: k-color(primary) !default;
 
 /// The text color of the hovered and focused solid Input components.
 /// @group input
@@ -139,51 +139,51 @@ $kendo-input-solid-hover-focus-border: $kendo-input-solid-focus-border !default;
 
 /// The text color of the disabled solid Input components.
 /// @group input
-$kendo-input-solid-disabled-text: $kendo-disabled-text !default;
+$kendo-input-solid-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the disabled solid Input components.
 /// @group input
-$kendo-input-solid-disabled-bg: $kendo-disabled-bg !default;
+$kendo-input-solid-disabled-bg: k-color(base-subtle) !default;
 
 /// The border color of the disabled solid Input components.
 /// @group input
-$kendo-input-solid-disabled-border: $kendo-disabled-border !default;
+$kendo-input-solid-disabled-border: transparent !default;
 
 /// The text color of the outline Input components.
 /// @group input
-$kendo-input-outline-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-outline-text: k-color(on-app-surface) !default;
 
 /// The background color of the outline Input components.
 /// @group input
-$kendo-input-outline-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-input-outline-bg: k-color(app-surface) !default;
 
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-input-outline-border: k-color(border) !default;
 
 /// The text color of the hovered outline Input components.
 /// @group input
-$kendo-input-outline-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-input-outline-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered outline Input components.
 /// @group input
-$kendo-input-outline-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$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: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-outline-hover-border: k-color(border-alt) !default;
 
 /// The text color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-outline-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-input-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-input-outline-focus-border: k-color(primary) !default;
 
 /// The text color of the hovered and focused outline Input components.
 /// @group input
@@ -199,7 +199,7 @@ $kendo-input-outline-hover-focus-border: $kendo-input-outline-focus-border !defa
 
 /// The text color of the disabled outline Input components.
 /// @group input
-$kendo-input-outline-disabled-text: $kendo-disabled-text !default;
+$kendo-input-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the disabled outline Input components.
 /// @group input
@@ -207,43 +207,43 @@ $kendo-input-outline-disabled-bg: none !default;
 
 /// The border color of the disabled outline Input components.
 /// @group input
-$kendo-input-outline-disabled-border: $kendo-disabled-text !default;
+$kendo-input-outline-disabled-border: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The text color of the flat Input components.
 /// @group input
-$kendo-input-flat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-flat-text: k-color(on-app-surface) !default;
 
 /// The background color of the flat Input components.
 /// @group input
-$kendo-input-flat-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-input-flat-bg: k-color(app-surface) !default;
 
 /// The border color of the flat Input components.
 /// @group input
-$kendo-input-flat-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-input-flat-border: k-color(border) !default;
 
 /// The text color of the hovered flat Input components.
 /// @group input
-$kendo-input-flat-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-input-flat-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered flat Input components.
 /// @group input
-$kendo-input-flat-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-input-flat-hover-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered flat Input components.
 /// @group input
-$kendo-input-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-flat-hover-border: k-color(border-alt) !default;
 
 /// The text color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-input-flat-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-input-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-input-flat-focus-border: k-color(primary) !default;
 
 /// The text color of the hovered and focused flat Input components.
 /// @group input
@@ -259,7 +259,7 @@ $kendo-input-flat-hover-focus-border: $kendo-input-flat-focus-border !default;
 
 /// The text color of the disabled flat Input components.
 /// @group input
-$kendo-input-flat-disabled-text: $kendo-disabled-text !default;
+$kendo-input-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the disabled flat Input components.
 /// @group input
@@ -267,43 +267,43 @@ $kendo-input-flat-disabled-bg: none !default;
 
 /// The border color of the disabled flat Input components.
 /// @group input
-$kendo-input-flat-disabled-border: $kendo-disabled-text !default;
+$kendo-input-flat-disabled-border: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The text color of the solid Picker components.
 /// @group input
-$kendo-picker-solid-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-solid-text: k-color(on-app-surface) !default;
 
 /// The background color of the solid Picker components.
 /// @group input
-$kendo-picker-solid-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-solid-bg: k-color(app-surface) !default;
 
 /// The border color of the solid Picker components.
 /// @group input
-$kendo-picker-solid-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default;
+$kendo-picker-solid-border: k-color(border) !default;
 
 /// The text color of the hovered solid Picker components.
 /// @group input
-$kendo-picker-solid-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-picker-solid-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of hovered the solid Picker components.
 /// @group input
-$kendo-picker-solid-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-solid-hover-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered solid Picker components.
 /// @group input
-$kendo-picker-solid-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-solid-hover-border: k-color(border-alt) !default;
 
 /// The text color of the focused solid Picker components.
 /// @group input
-$kendo-picker-solid-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-solid-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused solid Picker components.
 /// @group input
-$kendo-picker-solid-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-solid-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused solid Picker components.
 /// @group input
-$kendo-picker-solid-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-picker-solid-focus-border: k-color(primary)  !default;
 
 /// The text color of the hovered and focused solid Picker components.
 /// @group input
@@ -319,19 +319,19 @@ $kendo-picker-solid-hover-focus-border: $kendo-picker-solid-focus-border !defaul
 
 /// The text color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-solid-disabled-text: $kendo-disabled-text !default;
+$kendo-picker-solid-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-solid-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-picker-solid-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !default;
 
 /// The border color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-solid-disabled-border: $kendo-disabled-border !default;
+$kendo-picker-solid-disabled-border: transparent !default;
 
 /// The text color of the outline Picker components.
 /// @group input
-$kendo-picker-outline-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-outline-text: k-color(on-app-surface) !default;
 
 /// The background color of the outline Picker components.
 /// @group input
@@ -339,15 +339,15 @@ $kendo-picker-outline-bg: none !default;
 
 /// The border color of the outline Picker components.
 /// @group input
-$kendo-picker-outline-border: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-outline-border: k-color(on-app-surface) !default;
 
 /// The text color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-outline-hover-text: k-color(app-surface) !default;
 
 /// The background color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-picker-outline-hover-bg: k-color(on-app-surface) !default;
 
 /// The border color of the hovered outline Picker components.
 /// @group input
@@ -355,31 +355,31 @@ $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg!default;
 
 /// The text color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-outline-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$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: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-outline-hover-focus-text: k-color(app-surface) !default;
 
 /// The background color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-picker-outline-hover-focus-bg: k-color(on-app-surface) !default;
 
 /// The border color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$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: $kendo-disabled-text !default;
+$kendo-picker-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the disabled outline Picker components.
 /// @group input
@@ -391,7 +391,7 @@ $kendo-picker-outline-disabled-border: $kendo-picker-outline-disabled-text!defau
 
 /// The text color of the flat Picker components.
 /// @group input
-$kendo-picker-flat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-flat-text: k-color(on-app-surface) !default;
 
 /// The background color of the flat Picker components.
 /// @group input
@@ -399,31 +399,31 @@ $kendo-picker-flat-bg: none !default;
 
 /// The border color of the flat Picker components.
 /// @group input
-$kendo-picker-flat-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-picker-flat-border: k-color(border) !default;
 
 /// The text color of the hovered flat Picker components.
 /// @group input
-$kendo-picker-flat-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$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: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-picker-flat-hover-bg: k-color(base-hover) !default;
 
 /// The border color of the hovered flat Picker components.
 /// @group input
-$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-flat-hover-border: k-color(border-alt) !default;
 
 /// The text color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-picker-flat-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-picker-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-picker-flat-focus-border: k-color(primary) !default;
 
 /// The text color of the hovered and focused flat Picker components.
 /// @group input
@@ -439,7 +439,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: $kendo-disabled-text !default;
+$kendo-picker-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the disabled flat Picker components.
 /// @group input
@@ -604,53 +604,47 @@ $kendo-input-theme-colors: (
 
 /// The background color of the Input prefix.
 /// @group input
-$kendo-input-prefix-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-input-prefix-bg: k-color(base-subtle) !default;
 
 /// The background color of the Input suffix.
 /// @group input
-$kendo-input-suffix-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-input-suffix-bg: k-color(base-subtle) !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-text: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-input-separator-text: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The text color of the Input prefix.
 /// @group input
-$kendo-input-prefix-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-prefix-text: color-mix(in srgb, k-color(border-alt) 76%, transparent) !default;
 /// The text color of the Input suffix.
 /// @group input
-$kendo-input-suffix-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-suffix-text: color-mix(in srgb, k-color(border-alt) 76%, transparent) !default;
 
 /// The text color of the disabled Input prefix.
 /// @group input
-$kendo-input-prefix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-input-prefix-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The text color of the disabled Input suffix.
 /// @group input
-$kendo-input-suffix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-input-suffix-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// The border color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-border} ) !default;
+$kendo-input-invalid-border: k-color(error-emphasis) !default;
 /// The text color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;
-
-// REMOVE
-$kendo-valid-bg: initial !default;
-$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
-$kendo-valid-shadow: null !default;
+$kendo-input-invalid-text: k-color(error-on-surface) !default;
 
 /// The text color of the Input placeholder.
 /// @group input
-$kendo-input-placeholder-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-input-placeholder-text: k-color(subtle) !default;
 /// The opacity of the Input placeholder.
 /// @group input
 $kendo-input-placeholder-opacity: 1 !default;
 
 /// The color of the Input clear value icon.
 /// @group input
-$kendo-input-clear-value-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-input-clear-value-text: k-color(subtle) !default;
 /// The opacity of the Input clear value icon.
 /// @group input
 $kendo-input-clear-value-opacity: .6 !default;

package/scss/list/_layout.scss

@@ -220,6 +220,9 @@
         $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
         $_group-item-font-size: map.get( $size-props, group-item-font-size );
         $_group-item-line-height: map.get( $size-props, group-item-line-height );
+        $_filter-padding-x: map.get( $size-props, filter-padding-x );
+        $_filter-padding-y: map.get( $size-props, filter-padding-y );
+
 
         .k-list-#{$size} {
             --INTERNAL--kendo-list-font-size: var( --kendo-list-#{$size}-font-size, #{$_font-size} );
@@ -232,6 +235,11 @@
                 --INTERNAL--kendo-list-header-line-height: var( --kendo-list-#{$size}-header-line-height, #{$_header-line-height} );
             }
 
+            .k-list-filter {
+                padding-inline: $_filter-padding-x;
+                padding-block: $_filter-padding-y;
+            }
+
             .k-list-item {
                 --INTERNAL--kendo-list-item-padding-x: var( --kendo-list-#{$size}-item-padding-x, #{$_item-padding-x} );
                 --INTERNAL--kendo-list-item-padding-y: var( --kendo-list-#{$size}-item-padding-y, #{$_item-padding-y} );

package/scss/list/_variables.scss

@@ -49,6 +49,20 @@ $kendo-list-lg-header-line-height: var( --kendo-line-height, normal ) !default;
 /// @group list
 $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
+/// The horizontal padding of the List filter, when no size is set.
+/// @group list
+$kendo-list-filter-padding-x: k-spacing(2) !default;
+$kendo-list-sm-filter-padding-x: $kendo-list-filter-padding-x !default;
+$kendo-list-md-filter-padding-x: $kendo-list-filter-padding-x !default;
+$kendo-list-lg-filter-padding-x: $kendo-list-filter-padding-x !default;
+
+/// The vertical padding of the List filter, when no size is set.
+/// @group list
+$kendo-list-filter-padding-y: $kendo-list-filter-padding-x !default;
+$kendo-list-sm-filter-padding-y: $kendo-list-filter-padding-x !default;
+$kendo-list-md-filter-padding-y: $kendo-list-filter-padding-x !default;
+$kendo-list-lg-filter-padding-y: $kendo-list-filter-padding-x !default;
+
 /// The horizontal padding of the List items.
 /// @group list
 $kendo-list-sm-item-padding-x: k-spacing(2) !default;
@@ -125,7 +139,7 @@ $kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !def
 
 /// The text color of the List item icon
 /// @group list
-$kendo-list-item-icon-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-list-item-icon-text: k-color(primary) !default;
 
 /// The map with the sizes of the List.
 /// @group list
@@ -147,7 +161,9 @@ $kendo-list-sizes: (
         group-item-padding-x: $kendo-list-sm-group-item-padding-x,
         group-item-padding-y: $kendo-list-sm-group-item-padding-y,
         group-item-font-size: $kendo-list-sm-group-item-font-size,
-        group-item-line-height: $kendo-list-sm-group-item-line-height
+        group-item-line-height: $kendo-list-sm-group-item-line-height,
+        filter-padding-x: $kendo-list-sm-filter-padding-x,
+        filter-padding-y: $kendo-list-sm-filter-padding-y
     ),
     md: (
         font-size: $kendo-list-md-font-size,
@@ -166,7 +182,9 @@ $kendo-list-sizes: (
         group-item-padding-x: $kendo-list-md-group-item-padding-x,
         group-item-padding-y: $kendo-list-md-group-item-padding-y,
         group-item-font-size: $kendo-list-md-group-item-font-size,
-        group-item-line-height: $kendo-list-md-group-item-line-height
+        group-item-line-height: $kendo-list-md-group-item-line-height,
+        filter-padding-x: $kendo-list-md-filter-padding-x,
+        filter-padding-y: $kendo-list-md-filter-padding-y
     ),
     lg: (
         font-size: $kendo-list-lg-font-size,
@@ -185,28 +203,30 @@ $kendo-list-sizes: (
         group-item-padding-x: $kendo-list-lg-group-item-padding-x,
         group-item-padding-y: $kendo-list-lg-group-item-padding-y,
         group-item-font-size: $kendo-list-lg-group-item-font-size,
-        group-item-line-height: $kendo-list-lg-group-item-line-height
+        group-item-line-height: $kendo-list-lg-group-item-line-height,
+        filter-padding-x: $kendo-list-lg-filter-padding-x,
+        filter-padding-y: $kendo-list-lg-filter-padding-y
     )
 ) !default;
 
 
 /// The background color of the List component.
 /// @group list
-$kendo-list-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-list-bg: k-color(surface-alt) !default;
 /// The text color of the List component.
 /// @group list
-$kendo-list-text: var( --kendo-component-text, inherit ) !default;
+$kendo-list-text: k-color(on-app-surface) !default;
 /// The border color of the List component.
 /// @group list
-$kendo-list-border: var( --kendo-component-border, inherit ) !default;
+$kendo-list-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 
 /// The background color of the List header.
 /// @group list
-$kendo-list-header-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-list-header-bg: k-color(app-surface) !default;
 /// The text color of the List header.
 /// @group list
-$kendo-list-header-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-list-header-text: k-color(primary) !default;
 /// The border color of the List header.
 /// @group list
 $kendo-list-header-border: inherit !default;
@@ -217,55 +237,55 @@ $kendo-list-header-shadow: $kendo-box-shadow-depth-3 !default;
 
 /// The background color of the List items.
 /// @group list
-$kendo-list-item-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-list-item-bg: k-color(app-surface) !default;
 /// The text color of the List items.
 /// @group list
-$kendo-list-item-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-list-item-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-list-item-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-list-item-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused List items.
 /// @group list
-$kendo-list-item-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-list-item-focus-bg: k-color(app-surface) !default;
 /// The text color of the focused List items.
 /// @group list
-$kendo-list-item-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-list-item-focus-text: k-color(on-app-surface) !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
+$kendo-list-item-focus-shadow: inset 0 0 0 1px k-color(base-emphasis) !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 )) !default;
+$kendo-list-item-selected-bg: k-color(base-active) !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-list-item-selected-text: k-color(on-app-surface) !default;
 
 /// The background color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-list-item-selected-hover-bg: k-color(base-active) !default;
 /// The text color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-list-item-selected-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the disabled List items.
 /// @group list
-$kendo-list-item-disabled-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-list-item-disabled-bg: k-color(app-surface) !default;
 /// The text color of the disabled List items.
 /// @group list
-$kendo-list-item-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-list-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the List group items.
 /// @group list
-$kendo-list-group-item-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-list-group-item-bg: k-color(app-surface) !default;
 /// The text color of the List group items.
 /// @group list
-$kendo-list-group-item-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-list-group-item-text: k-color(primary) !default;
 /// The border color of the List group items.
 /// @group list
 $kendo-list-group-item-border: inherit !default;
@@ -275,7 +295,7 @@ $kendo-list-group-item-shadow: none !default;
 
 /// The color of the 'Option Label' text.
 /// @group list
-$kendo-list-option-label-text: $kendo-subtle-text !default;
+$kendo-list-option-label-text: k-color(subtle) !default;
 /// The color of the disabled 'Option Label' text.
 /// @group list
-$kendo-list-option-label-disabled-text: $kendo-disabled-text !default;
+$kendo-list-option-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;