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

package/scss/gantt/_variables.scss

@@ -21,13 +21,13 @@ $kendo-gantt-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: $kendo-component-bg !default;
+$kendo-gantt-bg: k-color(surface-alt) !default;
 /// The text color of the Gantt.
 /// @group gantt
-$kendo-gantt-text: $kendo-component-text !default;
+$kendo-gantt-text: k-color(on-app-surface) !default;
 /// The border color of the Gantt.
 /// @group gantt
-$kendo-gantt-border: $kendo-component-border !default;
+$kendo-gantt-border: k-color(border) !default;
 
 /// The background color of the Gantt TreeList.
 /// @group gantt
@@ -41,7 +41,7 @@ $kendo-gantt-treelist-border: null !default;
 
 /// The background color of the Gantt non-working days.
 /// @group gantt
-$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
+$kendo-gantt-nonwork-bg: color-mix(in srgb, k-color(on-base) 3%, transparent) !default;
 /// The text color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-text: null !default;
@@ -54,10 +54,10 @@ $kendo-gantt-nonwork-border: null !default;
 $kendo-gantt-line-size: 2px !default;
 /// The background fill color of the Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default;
+$kendo-gantt-line-fill: k-color(on-base) !default;
 /// The background fill of the selected Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-selected-fill: $kendo-color-primary !default;
+$kendo-gantt-line-selected-fill: k-color(primary) !default;
 
 /// The size of the Gantt task dot.
 /// @group gantt
@@ -86,23 +86,23 @@ $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
 $kendo-gantt-milestone-border: $kendo-gantt-border !default;
 /// The background color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-milestone-selected-bg: k-color(primary) !default;
 /// The border color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
+$kendo-gantt-milestone-selected-border: k-color(border) !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
+$kendo-gantt-summary-bg: k-color(subtle) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
+$kendo-gantt-summary-progress-bg: k-color(on-base) !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
+$kendo-gantt-summary-selected-bg: k-color(primary-subtle-active) !default;
 /// The background color of the selected Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-summary-progress-selected-bg: k-color(primary) !default;
 
 /// The border width of the Gantt task.
 /// @group gantt
@@ -115,10 +115,10 @@ $kendo-gantt-task-padding-x: k-spacing(2) !default;
 $kendo-gantt-task-padding-y: k-spacing(1) !default;
 /// The background color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
+$kendo-gantt-task-bg: k-color(subtle) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) !default;
+$kendo-gantt-task-text: k-color(base) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: null !default;
@@ -127,16 +127,16 @@ $kendo-gantt-task-border: null !default;
 $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
 /// The background color of selected the Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
+$kendo-gantt-task-selected-bg: k-color(primary-subtle-active) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-text: $kendo-selected-text !default;
+$kendo-gantt-task-selected-text: k-color(on-primary) !default;
 /// The border color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: null !default;
 /// The background color of the selected Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-task-progress-selected-bg: k-color(primary) !default;
 
 /// The padding of the Gantt task actions.
 /// @group gantt
@@ -205,24 +205,24 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
 /// The background color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: $kendo-color-primary !default;
+$kendo-gantt-planned-bg: k-color(primary) !default;
 /// The border color of the Gantt planned Tooltip.
 /// @group gantt
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
 /// The background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: $kendo-color-error !default;
+$kendo-gantt-delayed-bg: k-color(error) !default;
 /// The complement background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
+$kendo-gantt-delayed-bg-lighter: k-color(error-emphasis) !default;
 
 /// The background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: $kendo-color-success !default;
+$kendo-gantt-advanced-bg: k-color(success) !default;
 /// The complement background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
+$kendo-gantt-advanced-bg-lighter: k-color(success-emphasis) !default;
 
 /// The text color of the Gantt delayed task action.
 /// @group gantt
@@ -242,10 +242,10 @@ $kendo-gantt-validation-tooltip-label-width: 50px !default;
 $kendo-gantt-validation-tooltip-border: #656565 !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+$kendo-gantt-validation-tooltip-valid-border: k-color(success) !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
+$kendo-gantt-validation-tooltip-invalid-border: k-color(error)!default;
 
 /// The horizontal padding of the Gantt task Tooltip.
 /// @group gantt

package/scss/grid/_variables.scss

@@ -230,12 +230,12 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 /// @group grid
 $kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
-$kendo-grid-grouping-row-bg: $kendo-base-bg !default;
+$kendo-grid-grouping-row-bg: k-color(surface) !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{k-spacing(2)} - 1px ) !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
-$kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
+$kendo-grid-sorted-bg: color-mix(in srgb, k-color(on-app-surface) 3%, transparent) !default;
+$kendo-grid-sorting-indicator-text: k-color(primary) !default;
 $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
 $kendo-grid-sorting-index-spacing-y: calc( #{$kendo-icon-spacing} / 2 ) !default;
@@ -249,12 +249,12 @@ $kendo-grid-command-cell-button-spacing: k-spacing(2) !default;
 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
 
 // Must be a solid color
-$kendo-grid-sticky-bg: $kendo-component-bg !default;
+$kendo-grid-sticky-bg: k-color(surface-alt) !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: rgba( black, .3 ) !default;
 
 // Must be a solid color
-$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default;
+$kendo-grid-sticky-alt-bg: k-color(base) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -263,12 +263,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), color.mix($kendo-selected-bg, #ffffff, 25%)) !default;
-$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
+$kendo-grid-sticky-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
+$kendo-grid-sticky-selected-alt-bg: color-mix(in srgb, k-color(primary) 24%, transparent) !default;
 
 // Must be a solid color
-$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
+$kendo-grid-sticky-hover-bg: k-color(base-hover) !default;
+$kendo-grid-sticky-selected-hover-bg: color-mix(in srgb, k-color(primary) 24%, transparent) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -305,7 +305,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(surface) !default;
 
 $kendo-grid-drag-cell-width: ($kendo-icon-size * 2.25) !default;
 
@@ -319,10 +319,10 @@ $kendo-grid-group-footer-second-cell-border: 1px !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 ), .12 )) !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-alt) !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-base-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
@@ -325,6 +327,7 @@
     @include kendo-skeleton--styles();
     @include kendo-tooltip--styles();
     @include kendo-time-marker--styles();
+    @include kendo-marquee--styles();
 
 
     // Form helpers

package/scss/input/_variables.scss

@@ -110,13 +110,13 @@ $kendo-input-sizes: (
 
 /// The background color of the Input components.
 /// @group input
-$kendo-input-bg: $kendo-component-bg !default;
+$kendo-input-bg: k-color(surface-alt) !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: $kendo-component-border !default;
+$kendo-input-border: k-color(border) !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -129,7 +129,7 @@ $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: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default;
+$kendo-input-hover-border: k-color(border-alt) !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
@@ -145,7 +145,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) !default;
+$kendo-input-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -178,7 +178,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-input-text !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) !default;
+$kendo-input-outline-border: color-mix(in srgb, k-color(on-base) 50%, transparent) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -188,7 +188,7 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 /// The border color of the outline hovered Input components.
 /// @group input
-$kendo-input-outline-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) !default;
+$kendo-input-outline-hover-border: color-mix(in srgb, k-color(on-base) 80%, transparent) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -238,7 +238,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;
@@ -285,17 +285,17 @@ $kendo-input-separator-opacity: .5 !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
@@ -369,14 +369,14 @@ $kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
 /// The border color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) !default;
+$kendo-picker-outline-border: color-mix(in srgb, k-color(on-base) 50%, transparent) !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
 /// The text color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) !default;
+$kendo-picker-outline-hover-text: k-color(base) !default;
 /// The border color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
@@ -416,13 +416,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) !default;
+$kendo-picker-flat-hover-bg: color-mix(in srgb, k-color(on-base) 4%, transparent) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
 /// The border color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default;
+$kendo-picker-flat-hover-border: k-color(border-alt) !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker

package/scss/list/_variables.scss

@@ -59,6 +59,20 @@ $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default
 /// @group list
 $kendo-list-filter-padding: k-spacing(2) !default;
 
+/// The horizontal padding of the List filter, when no size is set.
+/// @group list
+$kendo-list-filter-padding-x: $kendo-list-filter-padding !default;
+$kendo-list-sm-filter-padding-x: $kendo-list-filter-padding !default;
+$kendo-list-md-filter-padding-x: $kendo-list-filter-padding !default;
+$kendo-list-lg-filter-padding-x: $kendo-list-filter-padding !default;
+
+/// The vertical padding of the List filter, when no size is set.
+/// @group list
+$kendo-list-filter-padding-y: $kendo-list-filter-padding !default;
+$kendo-list-sm-filter-padding-y: $kendo-list-filter-padding !default;
+$kendo-list-md-filter-padding-y: $kendo-list-filter-padding !default;
+$kendo-list-lg-filter-padding-y: $kendo-list-filter-padding !default;
+
 /// The horizontal padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
@@ -123,6 +137,29 @@ $kendo-list-lg-group-item-line-height: null !default;
 /// @group list
 $kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
+/// The font size of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-font-size: .75em !default;
+$kendo-list-item-group-label-md-font-size: .75em !default;
+$kendo-list-item-group-label-lg-font-size: .75em !default;
+
+/// The line-height of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-line-height: inherit !default;
+$kendo-list-item-group-label-md-line-height: inherit !default;
+$kendo-list-item-group-label-lg-line-height: inherit !default;
+
+/// The horizontal padding of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-padding-x: .5em !default;
+$kendo-list-item-group-label-md-padding-x: .5em !default;
+$kendo-list-item-group-label-lg-padding-x: .5em !default;
+
+/// The vertical padding of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-padding-y: 0 !default;
+$kendo-list-item-group-label-md-padding-y: 0 !default;
+$kendo-list-item-group-label-lg-padding-y: 0 !default;
 
 /// The map with the sizes of the List.
 /// @group list
@@ -141,7 +178,13 @@ $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: null,
-        group-item-line-height: null
+        group-item-line-height: null,
+        item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-sm-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,
@@ -157,7 +200,13 @@ $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: null,
-        group-item-line-height: null
+        group-item-line-height: null,
+        item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-md-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,
@@ -173,20 +222,26 @@ $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: null,
-        group-item-line-height: null
+        group-item-line-height: null,
+        item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-lg-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: $kendo-component-bg !default;
+$kendo-list-bg: k-color(surface-alt) !default;
 /// The text color of the List component.
 /// @group list
-$kendo-list-text: $kendo-component-text !default;
+$kendo-list-text: k-color(on-app-surface) !default;
 /// The border color of the List component.
 /// @group list
-$kendo-list-border: $kendo-component-border !default;
+$kendo-list-border: k-color(border) !default;
 
 
 /// The background color of the List header.
@@ -212,10 +267,10 @@ $kendo-list-item-text: null !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: $kendo-hover-bg !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: $kendo-hover-text !default;
+$kendo-list-item-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused List items.
 /// @group list
@@ -229,10 +284,10 @@ $kendo-list-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: $kendo-selected-bg !default;
+$kendo-list-item-selected-bg: k-color(primary) !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: $kendo-selected-text !default;
+$kendo-list-item-selected-text: k-color(on-primary) !default;
 
 /// The background color of the List group items.
 /// @group list
@@ -249,7 +304,7 @@ $kendo-list-group-item-shadow: null !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;
 
 @forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with (
     $kendo-list-font-family: $kendo-list-font-family,
@@ -304,6 +359,18 @@ $kendo-list-option-label-text: $kendo-subtle-text !default;
     $kendo-list-sm-group-item-padding-y: $kendo-list-sm-group-item-padding-y,
     $kendo-list-md-group-item-padding-y: $kendo-list-md-group-item-padding-y,
     $kendo-list-lg-group-item-padding-y: $kendo-list-lg-group-item-padding-y,
+    $kendo-list-item-group-label-sm-padding-x: $kendo-list-item-group-label-sm-padding-x,
+    $kendo-list-item-group-label-md-padding-x: $kendo-list-item-group-label-md-padding-x,
+    $kendo-list-item-group-label-lg-padding-x: $kendo-list-item-group-label-lg-padding-x,
+    $kendo-list-item-group-label-sm-padding-y: $kendo-list-item-group-label-sm-padding-y,
+    $kendo-list-item-group-label-md-padding-y: $kendo-list-item-group-label-md-padding-y,
+    $kendo-list-item-group-label-lg-padding-y: $kendo-list-item-group-label-lg-padding-y,
+    $kendo-list-item-group-label-sm-font-size: $kendo-list-item-group-label-sm-font-size,
+    $kendo-list-item-group-label-md-font-size: $kendo-list-item-group-label-md-font-size,
+    $kendo-list-item-group-label-lg-font-size: $kendo-list-item-group-label-lg-font-size,
+    $kendo-list-item-group-label-sm-line-height: $kendo-list-item-group-label-sm-line-height,
+    $kendo-list-item-group-label-md-line-height: $kendo-list-item-group-label-md-line-height,
+    $kendo-list-item-group-label-lg-line-height: $kendo-list-item-group-label-lg-line-height,
     $kendo-list-group-item-border-width: $kendo-list-group-item-border-width,
     $kendo-list-group-item-font-size: $kendo-list-group-item-font-size,
     $kendo-list-sm-group-item-font-size: $kendo-list-sm-group-item-font-size,
@@ -313,6 +380,14 @@ $kendo-list-option-label-text: $kendo-subtle-text !default;
     $kendo-list-sm-group-item-line-height: $kendo-list-sm-group-item-line-height,
     $kendo-list-md-group-item-line-height: $kendo-list-md-group-item-line-height,
     $kendo-list-lg-group-item-line-height: $kendo-list-lg-group-item-line-height,
+    $kendo-list-filter-padding-x: $kendo-list-filter-padding-x,
+    $kendo-list-filter-padding-y: $kendo-list-filter-padding-y,
+    $kendo-list-sm-filter-padding-x: $kendo-list-sm-filter-padding-x,
+    $kendo-list-sm-filter-padding-y: $kendo-list-sm-filter-padding-y,
+    $kendo-list-md-filter-padding-x: $kendo-list-md-filter-padding-x,
+    $kendo-list-md-filter-padding-y: $kendo-list-md-filter-padding-y,
+    $kendo-list-lg-filter-padding-x: $kendo-list-lg-filter-padding-x,
+    $kendo-list-lg-filter-padding-y: $kendo-list-lg-filter-padding-y,
     $kendo-list-group-item-font-weight: $kendo-list-group-item-font-weight,
     $kendo-list-sizes: $kendo-list-sizes,
     $kendo-list-bg: $kendo-list-bg,

package/scss/listbox/_variables.scss

@@ -29,13 +29,13 @@ $kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ListBox.
 /// @group listbox
-$kendo-listbox-text: $kendo-component-text !default;
+$kendo-listbox-text: k-color(on-app-surface) !default;
 /// The background color of the ListBox.
 /// @group listbox
-$kendo-listbox-bg: $kendo-component-bg !default;
+$kendo-listbox-bg: k-color(surface-alt) !default;
 /// The border color of the ListBox.
 /// @group listbox
-$kendo-listbox-border: $kendo-component-border !default;
+$kendo-listbox-border: k-color(border) !default;
 
 /// The inline padding of the ListBox item.
 /// @group listbox

package/scss/listgroup/_variables.scss

@@ -7,9 +7,9 @@ $kendo-listgroup-border-radius: k-border-radius(md) !default;
 $kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-listgroup-bg: $kendo-component-bg !default;
-$kendo-listgroup-text: $kendo-component-text !default;
-$kendo-listgroup-border: $kendo-component-border !default;
+$kendo-listgroup-bg: k-color(surface-alt) !default;
+$kendo-listgroup-text: k-color(on-app-surface) !default;
+$kendo-listgroup-border: k-color(border) !default;
 
 $kendo-listgroup-item-padding-x: k-spacing(2) !default;
 $kendo-listgroup-item-padding-y: k-spacing(2) !default;

package/scss/listview/_variables.scss

@@ -23,13 +23,13 @@ $kendo-listview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ListView.
 /// @group listview
-$kendo-listview-text: $kendo-component-text !default;
+$kendo-listview-text: k-color(on-app-surface) !default;
 /// The background color of the ListView.
 /// @group listview
-$kendo-listview-bg: $kendo-component-bg !default;
+$kendo-listview-bg: k-color(surface-alt) !default;
 /// The border color of the ListView.
 /// @group listview
-$kendo-listview-border: $kendo-component-border !default;
+$kendo-listview-border: k-color(border) !default;
 
 /// The horizontal padding of the ListView items.
 /// @group listview
@@ -43,7 +43,7 @@ $kendo-listview-item-padding-y: k-spacing(1) !default;
 $kendo-listview-item-selected-text: null !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
+$kendo-listview-item-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;