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

package/scss/grid/_theme.scss

@@ -8,97 +8,8 @@
 
     @include kendo-grid--theme-base();
 
-    $kendo-grid-filter-button-focus: rgba( black, .12 ) !default;
-
     .k-grid {
 
-        @if($kendo-enable-color-system) {
-            .k-table {
-                td:focus,
-                td.k-focus,
-                th:focus,
-                th.k-focus {
-                    &::after {
-                        background-color: $kendo-grid-hover-bg;
-                    }
-                }
-            }
-        } @else {
-
-            // Selected state
-            .k-table-td.k-selected,
-            .k-table-row.k-selected {
-                color: $kendo-grid-selected-text;
-                background-color: $kendo-grid-selected-bg;
-            }
-
-            .k-table-row.k-selected > td,
-            .k-table-row.k-selected > .k-table-td {
-                color: inherit;
-                background-color: transparent;
-            }
-
-            // Hover, Focused state
-            .k-table {
-                > .k-table-row:not(.k-detail-row):hover,
-                > .k-table-row:not(.k-detail-row).k-hover,
-                td:focus,
-                td.k-focus,
-                .k-table-td:focus,
-                .k-table-td.k-focus,
-                .k-table-th:focus,
-                .k-table-th.k-focus,
-                .k-master-row > td:focus,
-                .k-grouping-row > td:focus,
-                .k-detail-row > td:focus,
-                .k-group-footer > td:focus,
-                .k-master-row > .k-table-td:focus,
-                .k-grouping-row > .k-table-td:focus,
-                .k-detail-row > .k-table-td:focus,
-                .k-group-footer > .k-table-td:focus {
-                    color: inherit;
-                    background-color: $kendo-grid-hover-bg;
-                }
-
-                .k-table-row:hover,
-                .k-table-row.k-hover {
-                    .k-grid-header-sticky,
-                    .k-grid-footer-sticky {
-                        color: inherit;
-                        background-color: $kendo-grid-sticky-hover-bg;
-                    }
-                }
-
-                .k-table-th,
-                td,
-                .k-table-td,
-                .k-master-row > td,
-                .k-grouping-row > td,
-                .k-detail-row > td,
-                .k-group-footer > td,
-                .k-master-row > .k-table-td,
-                .k-grouping-row > .k-table-td,
-                .k-detail-row > .k-table-td,
-                .k-group-footer > .k-table-td {
-                    &:focus,
-                    &.k-focus {
-                        &.k-grid-header-sticky,
-                        &.k-grid-content-sticky,
-                        &.k-grid-footer-sticky {
-                            color: inherit;
-                            background-color: $kendo-grid-sticky-hover-bg;
-                        }
-                    }
-                }
-            }
-
-        }
-
-        .k-grid-pager:focus,
-        .k-grid-pager.k-focus {
-            color: inherit;
-        }
-
         .k-table-th,
         td,
         .k-table-td {
@@ -137,37 +48,6 @@
     }
 
     .k-grid-header {
-        .k-sorted,
-        .k-link:hover {
-            color: $kendo-grid-text;
-
-            > .k-icon {
-                color: inherit;
-            }
-        }
-
-        .k-grid-filter,
-        .k-table-th-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            &:hover {
-                color: $kendo-grid-text;
-                background-color: transparent;
-            }
-
-            &:focus,
-            &.k-focus {
-                color: $kendo-grid-text;
-                background-color: $kendo-grid-filter-button-focus;
-                box-shadow: none;
-            }
-
-            &.k-active {
-                color: $kendo-color-primary-contrast;
-                background-color: $kendo-color-primary;
-            }
-        }
-
         .k-table-thead > .k-table-row:not(:only-child) > .k-table-th,
         .k-table-thead > .k-table-row:not(:only-child) > .k-table-td {
             border-inline-start-color: $kendo-grid-border;
@@ -198,9 +78,8 @@
         }
     }
 
-    .k-grouping-dropclue,
     .k-reorder-cue {
-        border-color: $kendo-color-primary;
+        border-color: k-color(primary);
 
         &::before {
             border-color: transparent;
@@ -212,16 +91,23 @@
         }
     }
 
-    .k-resize-handle:hover .k-resize-handle-inner {
-        background-color: $kendo-color-primary;
-    }
+    .k-grouping-dropclue {
+        &::before {
+            border-color: k-color(primary) transparent transparent;
+        }
 
-    .k-column-resizer:hover {
-        color: $kendo-color-primary;
+        &::after {
+            background-color: k-color(primary);
+        }
     }
 
+    .k-resize-handle:hover .k-resize-handle-inner,
     .k-reorder-cue {
-        background-color: $kendo-color-primary;
+        background-color: k-color(primary);
+    }
+
+    .k-column-resizer:hover {
+        color: k-color(primary);
     }
 
     .k-columnmenu-item {

package/scss/grid/_variables.scss

@@ -27,12 +27,12 @@ $kendo-grid-padding-y: $kendo-table-md-cell-padding-y !default;
 $kendo-grid-header-padding-x: $kendo-grid-padding-x !default;
 /// The vertical padding of the Grid header.
 /// @group grid
-$kendo-grid-header-padding-y: k-spacing(4) !default;
+$kendo-grid-header-padding-y: $kendo-grid-padding-y !default;
 
 
 /// The horizontal padding of the Grid grouping header.
 /// @group grid
-$kendo-grid-grouping-header-padding-x: k-spacing(2) !default;
+$kendo-grid-grouping-header-padding-x: $kendo-grid-padding-x !default;
 /// The vertical padding of the Grid grouping header.
 /// @group grid
 $kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-x !default;
@@ -56,26 +56,26 @@ $kendo-grid-filter-cell-padding-y: $kendo-grid-padding-y !default;
 $kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
 /// The vertical padding of the Grid filter cell.
 /// @group grid
-$kendo-grid-edit-cell-padding-y: k-spacing(1.5) !default;
+$kendo-grid-edit-cell-padding-y: k-spacing(2) !default;
 
 $kendo-grid-group-drop-hint-size: 6px !default;
-$kendo-grid-group-drop-hint-line-size: math.div( $kendo-grid-group-drop-hint-size, 3 ) !default;
+$kendo-grid-group-drop-hint-line-size: calc( #{$kendo-grid-group-drop-hint-size} / 3 ) !default;
 $kendo-grid-group-drop-hint-height: $kendo-chip-calc-size !default;
-$kendo-grid-group-drop-hint-top: calc( ( #{$kendo-chip-calc-size} + calc( #{$kendo-grid-grouping-header-padding-y} * 2 ) - #{$kendo-grid-group-drop-hint-height} ) / 2) !default;
+$kendo-grid-group-drop-hint-top: null !default;
 
 
-$kendo-grid-sm-padding-x: k-spacing(2.5) !default;
-$kendo-grid-sm-padding-y: k-spacing(1) !default;
+$kendo-grid-sm-padding-x: k-spacing(2) !default;
+$kendo-grid-sm-padding-y: k-spacing(2) !default;
 $kendo-grid-sm-header-padding-x: $kendo-grid-sm-padding-x !default;
-$kendo-grid-sm-header-padding-y: k-spacing(2.5) !default;
-$kendo-grid-sm-grouping-header-padding-x: k-spacing(1.5) !default;
+$kendo-grid-sm-header-padding-y: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-grouping-header-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-x !default;
 $kendo-grid-sm-cell-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-cell-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-filter-cell-padding-x: $kendo-grid-sm-padding-x !default;
-$kendo-grid-sm-filter-cell-padding-y: k-spacing(2) !default;
+$kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-cell-padding-x !default;
-$kendo-grid-sm-edit-cell-padding-y: k-spacing(1) !default;
+$kendo-grid-sm-edit-cell-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
 $kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
@@ -135,7 +135,7 @@ $kendo-grid-sizes: (
     ),
 ) !default;
 
-$kendo-grid-header-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-grid-header-font-size: var( --kendo-font-size-md, inherit ) !default;
 $kendo-grid-header-first-border: 1px !default;
 $kendo-grid-header-menu-icon-spacing: k-spacing(3.5) !default;
 
@@ -234,7 +234,7 @@ $kendo-grid-grouping-row-bg: transparent !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: k-spacing(1) !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
+$kendo-grid-sorted-bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent) !default;
 $kendo-grid-sorting-indicator-text: $kendo-grid-header-text !default;
 $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -250,7 +250,7 @@ $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$ke
 // Must be a solid color
 $kendo-grid-sticky-bg: $kendo-grid-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
-$kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
+$kendo-grid-sticky-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 // Must be a solid color
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -262,12 +262,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
-$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-bg, 4%)) !default;
+$kendo-grid-sticky-selected-bg: color-mix(in srgb, k-color(primary) 12%, transparent) !default;
 $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !default;
 
 // Must be a solid color
-$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade($kendo-grid-bg, 7%)) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
+$kendo-grid-sticky-hover-bg: k-color(base-hover) !default;
+$kendo-grid-sticky-selected-hover-bg: color-mix(in srgb, k-color(primary) 12%, transparent) !default;
 
 $kendo-grid-column-menu-width: 250px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -306,7 +306,7 @@ $kendo-grid-column-menu-group-header-border: $kendo-popup-border !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default;
 
-$kendo-grid-column-menu-tabbed-bg: $kendo-base-bg !default;
+$kendo-grid-column-menu-tabbed-bg: k-color(base) !default;
 
 $kendo-grid-drag-cell-width: ($kendo-icon-size * 3) !default;
 
@@ -320,10 +320,10 @@ $kendo-grid-group-footer-second-cell-border: 0px !default;
 
 /// The background color of the Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .24 )) !default;
+$kendo-grid-row-resizer-hover-bg: color-mix(in srgb, k-color(on-base) 20%, transparent) !default;
 /// The background color of the active Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
+$kendo-grid-row-resizer-active-bg: k-color(primary) !default;
 /// The height of the Grid row resize indicator.
 /// @group grid
 $kendo-grid-row-resizer-height: k-spacing(0.5) !default;

package/scss/imageeditor/_variables.scss

@@ -25,15 +25,15 @@ $kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 $kendo-image-editor-resize-handle-size: 15px !default;
 
-$kendo-image-editor-bg: $kendo-component-bg !default;
-$kendo-image-editor-text: $kendo-component-text !default;
-$kendo-image-editor-border: $kendo-component-border !default;
+$kendo-image-editor-bg: k-color(surface) !default;
+$kendo-image-editor-text: k-color(on-app-surface) !default;
+$kendo-image-editor-border: k-color(border) !default;
 
 $kendo-image-editor-content-bg: #c6c6c6 !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 
-$kendo-image-editor-action-pane-bg: $kendo-component-bg !default;
+$kendo-image-editor-action-pane-bg: k-color(surface) !default;
 $kendo-image-editor-action-pane-text: null !default;
 $kendo-image-editor-action-pane-border: null !default;
 

package/scss/index.scss

@@ -116,6 +116,7 @@
 @forward "./signature/_index.scss";
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
+@forward "./marquee/_index.scss";
 
 
 // Use component modules
@@ -152,6 +153,7 @@
 @use "./loader/_index.scss" as *;
 @use "./skeleton/_index.scss" as *;
 @use "./time-marker/_index.scss" as *;
+@use "./marquee/_index.scss" as *;
 
 
 // Native forms
@@ -323,6 +325,7 @@
     @include kendo-skeleton--styles();
     @include kendo-tooltip--styles();
     @include kendo-time-marker--styles();
+    @include kendo-marquee--styles();
 
 
     // Form helpers

package/scss/input/_layout.scss

@@ -32,12 +32,6 @@
             background: none;
             border-color: transparent;
         }
-
-        &:disabled,
-        &[disabled],
-        &.k-disabled  {
-            border-bottom-style: dashed;
-        }
     }
 
 
@@ -45,19 +39,21 @@
     .k-input,
     .k-picker {
 
+        .k-button {
+            &:hover,
+            &.k-hover,
+            &:focus,
+            &.k-focus {
+                box-shadow: none;
+                outline: none;
+            }
+        }
+
         &:disabled,
         &[disabled],
         &.k-disabled {
-            opacity: 1;
             filter: none;
         }
-
-        .k-input-button,
-        .k-input-spinner .k-spinner-increase,
-        .k-input-spinner .k-spinner-decrease,
-        .k-input-values .k-chip {
-            color: inherit;
-        }
     }
 
 

package/scss/input/_variables.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
+@use "../button/_variables.scss" as *;
 
 // Input
 
@@ -25,23 +26,23 @@ $kendo-input-padding-x: k-spacing(4) !default;
 $kendo-input-sm-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-x: k-spacing(4) !default;
+$kendo-input-md-padding-x: $kendo-input-padding-x !default;
 /// The horizontal padding of the large Input components.
 /// @group input
 $kendo-input-lg-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the Input components.
 /// @group input
-$kendo-input-padding-y: k-spacing(2) !default;
+$kendo-input-padding-y: calc( k-spacing(1.5) + k-spacing(1px) ) !default;
 /// The vertical padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-y: k-spacing(1.5) !default;
+$kendo-input-sm-padding-y: calc( k-spacing(1) + k-spacing(1px) ) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-y: k-spacing(2) !default;
+$kendo-input-md-padding-y: $kendo-input-padding-y !default;
 /// The vertical padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-y: k-spacing(2) !default;
+$kendo-input-lg-padding-y: calc( k-spacing(2) + k-spacing(1px) ) !default;
 
 /// The font family of the Input components.
 /// @group input
@@ -55,23 +56,23 @@ $kendo-input-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-input-sm-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The font size of the medium Input components.
 /// @group input
-$kendo-input-md-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-input-md-font-size: $kendo-input-font-size !default;
 /// The font size of the large Input components.
 /// @group input
 $kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the Input components.
 /// @group input
-$kendo-input-line-height: 1.25 !default;
+$kendo-input-line-height: var( --kendo-line-height-lg, inherit ) !default;
 /// The line height of the small Input components.
 /// @group input
-$kendo-input-sm-line-height: 1.25 !default;
+$kendo-input-sm-line-height: var( --kendo-line-height-lg, inherit ) !default;
 /// The line height of the medium Input components.
 /// @group input
-$kendo-input-md-line-height: 1.25 !default;
+$kendo-input-md-line-height: $kendo-input-line-height !default;
 /// The line height of the large Input components.
 /// @group input
-$kendo-input-lg-line-height: 1.5 !default;
+$kendo-input-lg-line-height: var( --kendo-line-height-lg, inherit ) !default;
 
 /// The calculated height of the Input.
 /// @group input
@@ -88,36 +89,36 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-sm-padding-y,
         font-size: $kendo-input-sm-font-size,
         line-height: $kendo-input-sm-line-height,
-        button-padding-x: k-spacing(1),
-        button-padding-y: $kendo-input-sm-padding-y
+        button-padding-x: $kendo-button-sm-padding-y,
+        button-padding-y: $kendo-button-sm-padding-y
     ),
     md: (
         padding-x: $kendo-input-md-padding-x,
         padding-y: $kendo-input-md-padding-y,
         font-size: $kendo-input-md-font-size,
         line-height: $kendo-input-md-line-height,
-        button-padding-x: k-spacing(1),
-        button-padding-y: $kendo-input-md-padding-y
+        button-padding-x: $kendo-button-md-padding-y,
+        button-padding-y: $kendo-button-md-padding-y
     ),
     lg: (
         padding-x: $kendo-input-lg-padding-x,
         padding-y: $kendo-input-lg-padding-y,
         font-size: $kendo-input-lg-font-size,
         line-height: $kendo-input-lg-line-height,
-        button-padding-x: k-spacing(1),
-        button-padding-y: $kendo-input-lg-padding-y
+        button-padding-x: $kendo-button-lg-padding-y,
+        button-padding-y: $kendo-button-lg-padding-y
     )
 ) !default;
 
 /// The background color of the Input components.
 /// @group input
-$kendo-input-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) !default;
+$kendo-input-bg: k-color(surface) !default;
 /// The text color of the Input components.
 /// @group input
-$kendo-input-text: $kendo-component-text !default;
+$kendo-input-text: k-color(on-app-surface) !default;
 /// The border color of the Input components.
 /// @group input
-$kendo-input-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( $kendo-component-border, .38 )) !default;
+$kendo-input-border: color-mix(in srgb, k-color(on-app-surface) 44%, transparent) !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -130,10 +131,10 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: $kendo-input-text !default;
+$kendo-input-hover-border: k-color(on-app-surface)!default;
 /// The shadow of the hovered Input components.
 /// @group input
-$kendo-input-hover-shadow: unset !default;
+$kendo-input-hover-shadow: null !default;
 
 /// The background color of the focused Input components.
 /// @group input
@@ -143,10 +144,10 @@ $kendo-input-focus-bg: null !default;
 $kendo-input-focus-text: null !default;
 /// The border color of the focused Input components.
 /// @group input
-$kendo-input-focus-border: $kendo-color-primary !default;
+$kendo-input-focus-border: k-color(primary) !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: unset !default;
+$kendo-input-focus-shadow: null !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -156,13 +157,13 @@ $kendo-input-selected-bg: null !default;
 $kendo-input-selected-text: null !default;
 /// The background color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), k-try-shade( $kendo-component-bg, .25 )) !default;
+$kendo-input-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 11%, transparent) !default;
 /// The text color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 27%, transparent), $kendo-disabled-text) !default;
+$kendo-input-disabled-text: null !default;
 /// The border color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( color.alpha( $kendo-component-border ), 2 ) )) !default;
+$kendo-input-disabled-border: null !default;
 /// The gradient of the disabled Input components.
 /// @group input
 $kendo-input-disabled-gradient: null !default;
@@ -238,7 +239,7 @@ $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 /// The text color of the Input placeholder.
 /// @group input
-$kendo-input-placeholder-text: $kendo-subtle-text !default;
+$kendo-input-placeholder-text: k-color(subtle) !default;
 /// The opacity of the Input placeholder.
 /// @group input
 $kendo-input-placeholder-opacity: 1 !default;
@@ -246,7 +247,7 @@ $kendo-input-placeholder-opacity: 1 !default;
 
 /// The color of the Input clear value icon.
 /// @group input
-$kendo-input-clear-value-text: null !default;
+$kendo-input-clear-value-text: k-color(base-on-surface) !default;
 /// The opacity of the Input clear value icon.
 /// @group input
 $kendo-input-clear-value-opacity: .5 !default;
@@ -259,44 +260,44 @@ $kendo-input-clear-value-hover-opacity: 1 !default;
 
 /// The vertical margin of the clear value icon.
 /// @group input
-$kendo-input-values-margin-y: k-spacing(0.5) !default;
+$kendo-input-values-margin-y: null !default;
 /// The horizontal margin of the clear value icon.
 /// @group input
-$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
+$kendo-input-values-margin-x: null !default;
 
 /// The width of the Input button.
 /// @group input
-$kendo-input-button-width: unset !default;
+$kendo-input-button-width: null !default;
 /// The border width of the Input button.
 /// @group input
 $kendo-input-button-border-width: 1px !default;
 /// The width of the Input spinner button.
 /// @group input
-$kendo-input-spinner-width: unset !default;
+$kendo-input-spinner-width: null !default;
 /// The icon offset of the Input spinner button.
 /// @group input
 $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-text: $kendo-component-border !default;
+$kendo-input-separator-text: k-color(border) !default;
 /// The opacity of the Input separator.
 /// @group input
-$kendo-input-separator-opacity: .5 !default;
+$kendo-input-separator-opacity: 0 !default;
 
 /// The text color of the Input prefix.
 /// @group input
-$kendo-input-prefix-text: $kendo-subtle-text !default;
+$kendo-input-prefix-text: k-color(subtle) !default;
 /// The text color of the Input suffix.
 /// @group input
-$kendo-input-suffix-text: $kendo-subtle-text !default;
+$kendo-input-suffix-text: k-color(subtle) !default;
 
 /// The border color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-border: $kendo-invalid-border !default;
+$kendo-input-invalid-border: k-color(error) !default;
 /// The shadow of the invalid Input components.
 /// @group input
-$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
+$kendo-input-invalid-shadow: null !default;
 
 /// The background color of the Picker components.
 /// @group picker
@@ -312,7 +313,7 @@ $kendo-picker-border: $kendo-input-border !default;
 $kendo-picker-gradient: none !default;
 /// The shadow of the Picker components.
 /// @group picker
-$kendo-picker-shadow: $kendo-input-shadow !default;
+$kendo-picker-shadow: null !default;
 
 /// The background color of the hovered Picker components.
 /// @group picker
@@ -374,10 +375,10 @@ $kendo-picker-outline-border: $kendo-picker-border !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-bg: unset !default;
+$kendo-picker-outline-hover-bg: null !default;
 /// The text color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-text: unset !default;
+$kendo-picker-outline-hover-text: null !default;
 /// The border color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-hover-border !default;
@@ -393,7 +394,7 @@ $kendo-picker-outline-focus-text: null !default;
 $kendo-picker-outline-focus-border: $kendo-picker-focus-border !default;
 /// The shadow of the outline focused Picker components.
 /// @group picker
-$kendo-picker-outline-focus-shadow: unset !default;
+$kendo-picker-outline-focus-shadow: null !default;
 
 /// The background color of the outline hovered and focused Picker components.
 /// @group picker
@@ -417,7 +418,7 @@ $kendo-picker-flat-border: $kendo-picker-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: unset !default;
+$kendo-picker-flat-hover-bg: null !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
@@ -436,7 +437,7 @@ $kendo-picker-flat-focus-text: null !default;
 $kendo-picker-flat-focus-border: $kendo-picker-focus-border !default;
 /// The shadow of the flat focused Picker components.
 /// @group picker
-$kendo-picker-flat-focus-shadow: unset !default;
+$kendo-picker-flat-focus-shadow: null !default;
 
 /// The background color of the flat hovered and focused Picker components.
 /// @group picker

package/scss/list/_theme.scss

@@ -11,7 +11,7 @@
     .k-list-item {
         &.k-selected:hover,
         &.k-selected.k-hover {
-            background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-shade( $kendo-list-item-selected-bg ));
+            background-color: $kendo-list-item-hover-bg;
         }
     }
 }