@progress/kendo-theme-fluent 7.1.0-dev.8 → 7.1.0

package/scss/editor/_variables.scss

@@ -41,13 +41,13 @@ $kendo-editor-selectednode-outline-width: map.get( $kendo-spacing, 0.5 ) !defaul
 
 /// The selected text color of the Editor.
 /// @group editor
-$kendo-editor-selected-text: $kendo-color-white !default;
+$kendo-editor-selected-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The selected background color of the Editor.
 /// @group editor
-$kendo-editor-selected-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-editor-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: k-get-theme-color-var( primary-60 ) !default;
+$kendo-editor-highlighted-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 )) !default;
 
 /// The size of the Editor's resize handle.
 /// @group editor
@@ -57,14 +57,14 @@ $kendo-editor-resize-handle-size: map.get( $kendo-spacing, 2 ) !default;
 $kendo-editor-resize-handle-border-width: 1px !default;
 /// The border color of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-border: $kendo-color-black !default;
+$kendo-editor-resize-handle-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// The background color of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-bg: $kendo-color-white !default;
+$kendo-editor-resize-handle-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The outline color of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-editor-selectednode-outline-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The border color of the Inline Editor data cell.
 /// @group editor

package/scss/expansion-panel/_variables.scss

@@ -22,13 +22,13 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-expander-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-expander-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
 $kendo-expander-border: var( --kendo-component-border, initial ) !default;
 /// The box shadow of the ExpansionPanel.
 /// @group expander
-$kendo-expander-shadow: inset 0 0 0 2px k-get-theme-color-var( neutral-30 ) !default;
+$kendo-expander-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The background color of the expanded ExpansionPanel.
 /// @group expander
@@ -52,14 +52,14 @@ $kendo-expander-focus-outline-width: 1px !default;
 $kendo-expander-focus-outline-style: solid !default;
 /// The outline color of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-expander-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
 
 /// The background color of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-bg: var( --kendo-component-bg, initial ) !default;
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-shadow: inset 0px 0px 0px 2px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-expander-focus-shadow: inset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
@@ -70,18 +70,18 @@ $kendo-expander-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-expander-header-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The background color of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-bg: inherit !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-expander-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-expander-title-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander

package/scss/fab/_variables.scss

@@ -151,13 +151,13 @@ $kendo-fab-sizes: (
 $kendo-fab-item-offset-y: map.get( $kendo-spacing, 2 ) !default;
 /// The base text color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-fab-item-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-bg: var( --kendo-component-bg, inherit ) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 /// The text color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-text: var( --kendo-hover-text, inherit ) !default;
@@ -166,16 +166,16 @@ $kendo-fab-item-hover-text: var( --kendo-hover-text, inherit ) !default;
 $kendo-fab-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// The border color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-hover-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 /// The text color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-fab-item-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The background color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-bg: var( --kendo-component-bg, inherit ) !default;
 /// The border color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-focus-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 /// The text color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
@@ -184,4 +184,4 @@ $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
 $kendo-fab-item-active-bg: var( --kendo-selected-bg, inherit ) !default;
 /// The border color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-active-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;

package/scss/filemanager/_layout.scss

@@ -25,6 +25,7 @@
         border-bottom-width: var( --kendo-file-manager-toolbar-border-width, #{$kendo-file-manager-toolbar-border-width} );
         border-color: inherit;
         flex-shrink: 0;
+        z-index: 1;
     }
 
 
@@ -39,6 +40,10 @@
         overflow: hidden;
     }
 
+    .k-filemanager-splitter {
+        border-width: 0;
+    }
+
 
     // Navigation
     .k-filemanager-navigation {

package/scss/filter/_variables.scss

@@ -24,10 +24,10 @@ $kendo-filter-text: var( --kendo-component-text, initial ) !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-filter-preview-field-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-filter-preview-operator-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The background color of the line that connects the Filter items.
 /// @group filter
@@ -35,4 +35,4 @@ $kendo-filter-line-bg: var( --kendo-component-border, initial ) !default;
 
 /// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-filter-toolbar-focus-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;

package/scss/floating-label/_layout.scss

@@ -81,7 +81,7 @@
             &:focus-within > .k-label,
             &.k-focus > .k-label {
                 left: auto;
-                right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
+                right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
             }
         }
 

package/scss/forms/_variables.scss

@@ -89,7 +89,7 @@ $kendo-form-hint-margin-top: map.get( $kendo-spacing, 1 ) !default;
 
 /// The text color of the Form hint.
 /// @group form
-$kendo-form-hint-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-form-hint-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The row spacing of the small Form.
 /// @group form
@@ -171,7 +171,7 @@ $kendo-fieldset-border: initial !default;
 $kendo-fieldset-legend-bg: transparent !default;
 /// The text color of the Form legend.
 /// @group form
-$kendo-fieldset-legend-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: initial !default;

package/scss/gantt/_layout.scss

@@ -288,12 +288,20 @@
 
 
     // Timeline
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
 
-        .k-timeline {
+        .k-gantt-timeline {
             height: 100%;
             border-width: 0;
             display: flex;
+
+            *,
+            *::before,
+            *::after,
+            &::before,
+            &::after {
+                box-sizing: border-box;
+            }
         }
         .k-grid-header {}
         .k-grid-content {
@@ -770,7 +778,7 @@
         }
 
         .k-gantt,
-        .k-gantt-timeline,
+        .k-gantt-timeline-pane,
         .k-gantt-dependencies {
             width: auto !important; // stylelint-disable-line declaration-no-important
             height: auto !important; // stylelint-disable-line declaration-no-important

package/scss/gantt/_variables.scss

@@ -26,7 +26,7 @@ $kendo-gantt-border: var( --kendo-component-border, inherit ) !default;
 
 /// Background color of the gantt non-working days.
 /// @group gantt
-$kendo-gantt-nonwork-bg: rgba( $kendo-color-black, .04 ) !default;
+$kendo-gantt-nonwork-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 ) !default;
 /// Text color of the gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-text: inherit !default;
@@ -42,7 +42,7 @@ $kendo-gantt-line-size: 2px !default;
 $kendo-gantt-line-fill: black !default;
 /// Selected background fill of the gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-selected-fill: k-get-theme-color-var( primary-120 ) !default;
+$kendo-gantt-line-selected-fill: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
 
 /// Size of the gantt task dot.
 /// @group gantt
@@ -52,16 +52,16 @@ $kendo-gantt-dot-size: 8px !default;
 $kendo-gantt-dot-spacing: map.get( $kendo-spacing, 0.5 ) !default;
 /// Background color of the gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-bg: $kendo-color-black !default;
+$kendo-gantt-dot-bg: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// Border color of the gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-border: $kendo-color-black !default;
+$kendo-gantt-dot-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// Hover background color of the gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-hover-bg: $kendo-color-white !default;
+$kendo-gantt-dot-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Hover border color of the gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-hover-border: $kendo-color-black !default;
+$kendo-gantt-dot-hover-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 
 /// Background color of the gantt milestone.
 /// @group gantt
@@ -71,23 +71,23 @@ $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
 $kendo-gantt-milestone-border: $kendo-gantt-text !default;
 /// Selected background color of the gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-milestone-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Selected border color of the gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-milestone-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Background color of the gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) !default;
 /// Background color of the gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// Selected background color of the gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: k-get-theme-color-var( primary-50 ) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) !default;
 /// Selected background color of the gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-selected-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-summary-progress-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Border width of the gantt task.
 /// @group gantt
@@ -100,31 +100,31 @@ $kendo-gantt-task-padding-x: map.get( $kendo-spacing, 2 ) !default;
 $kendo-gantt-task-padding-y: map.get( $kendo-spacing, 1 ) !default;
 /// Background color of the gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) !default;
 /// Text color of the gantt task.
 /// @group gantt
-$kendo-gantt-task-text: $kendo-color-white !default;
+$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Border color of the gantt task.
 /// @group gantt
 $kendo-gantt-task-border: inherit !default;
 /// Background color of the gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-bg: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// Background hover color of the gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-hover-bg: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-gantt-task-progress-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// Selected background color of the gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: k-get-theme-color-var( primary-50 ) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) !default;
 /// Selected text color of the gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-text: $kendo-color-white !default;
+$kendo-gantt-task-selected-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Selected border color of the gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: transparent !default;
 /// Selected background color of the gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-selected-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-task-progress-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Vertical padding of the gantt task actions.
 /// @group gantt
@@ -186,40 +186,40 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
 /// Text color of the gantt planned tooltip.
 /// @group gantt
-$kendo-gantt-planned-text: $kendo-color-white !default;
+$kendo-gantt-planned-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Background color of the gantt planned tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-planned-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Border color of the gantt planned tooltip.
 /// @group gantt
-$kendo-gantt-planned-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-planned-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Text color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-text: $kendo-color-white !default;
+$kendo-gantt-delayed-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Background color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: k-get-theme-color-var( error-160 ) !default;
+$kendo-gantt-delayed-bg: if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 )) !default;
 /// Complement background color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg-lighter: k-get-theme-color-var( error-110) !default;
+$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110)) !default;
 /// Background hover color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-hover-bg: k-get-theme-color-var( error-190 ) !default;
+$kendo-gantt-delayed-hover-bg: if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) !default;
 
 /// Background color of the gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: k-get-theme-color-var( success-160 ) !default;
+$kendo-gantt-advanced-bg: if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 )) !default;
 /// Complement background color of the gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg-lighter: k-get-theme-color-var( success-110 ) !default;
+$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 )) !default;
 /// Background hover color of the gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-hover-bg: k-get-theme-color-var( success-190 ) !default;
+$kendo-gantt-advanced-hover-bg: if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 )) !default;
 
 /// Text color of the gantt delayed task action.
 /// @group gantt
-$kendo-gantt-action-on-offset-text: $kendo-color-black !default;
+$kendo-gantt-action-on-offset-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// Top position of the gantt delayed task resize handler.
 /// @group gantt
 $kendo-gantt-offset-resize-handler-top: 50% !default;
@@ -235,7 +235,7 @@ $kendo-gantt-validation-tooltip-label-width: 50px !default;
 $kendo-gantt-validation-tooltip-border: var( --kendo-component-border, inherit ) !default;
 /// Border color of the gantt validation tooltip in valid state.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: k-get-theme-color-var( success-100 ) !default;
+$kendo-gantt-validation-tooltip-valid-border: if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 )) !default;
 /// Border color of the gantt validation tooltip in invalid state.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: k-get-theme-color-var( error-100 ) !default;
+$kendo-gantt-validation-tooltip-invalid-border: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) !default;

package/scss/grid/_layout.scss

@@ -809,6 +809,16 @@
         }
     }
 
+    .k-master-row .k-grid-content-sticky::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+    }
+
     kendo-grid {
         .k-table-row.k-grid-row-sticky {
             border: 0;

package/scss/grid/_theme.scss

@@ -100,20 +100,22 @@
             border-block-color: var( --kendo-grid-selected-border, #{$kendo-grid-selected-border} );
         }
 
-        // Selected hover state
-        .k-table-tbody > .k-table-row:not(.k-detail-row):hover td.k-selected,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > td,
-        .k-table-tbody > .k-table-row:not(.k-detail-row):hover .k-table-td.k-selected,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > .k-table-td,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td.k-selected,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > td,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover .k-table-td.k-selected,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > .k-table-td {
-            @include fill(
-                $color: var( --kendo-grid-selected-hover-text, #{$kendo-grid-selected-hover-text} ),
-                $bg: var( --kendo-grid-selected-hover-bg, #{$kendo-grid-selected-hover-bg} )
-            );
+        @if($kendo-enable-color-system == false) {
+            // Selected hover state
+            .k-table-tbody > .k-table-row:not(.k-detail-row):hover td.k-selected,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > td,
+            .k-table-tbody > .k-table-row:not(.k-detail-row):hover .k-table-td.k-selected,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > .k-table-td,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td.k-selected,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > td,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover .k-table-td.k-selected,
+            .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > .k-table-td {
+                @include fill(
+                    $color: var( --kendo-grid-selected-hover-text, #{$kendo-grid-selected-hover-text} ),
+                    $bg: var( --kendo-grid-selected-hover-bg, #{$kendo-grid-selected-hover-bg} )
+                );
+            }
         }
 
         // Focused state
@@ -237,7 +239,7 @@
             }
             &:focus,
             &.k-focus {
-                box-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .1 );
+                box-shadow: inset 0 0 0 2px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .1 );
             }
             &.k-active {
                 @include fill(
@@ -303,18 +305,34 @@
         }
 
         // Selected state
-        &.k-selected .k-grid-content-sticky,
-        &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-selected,
-        .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
+        &.k-table-row.k-selected td.k-grid-content-sticky,
+        &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
+        &.k-table-row td.k-grid-content-sticky.k-selected,
+        &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
+
+                &::before {
+                    @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
+                }
+            } @else {
+                @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
+            }
         }
 
-        &.k-selected.k-table-alt-row .k-grid-content-sticky,
-        &.k-selected.k-table-alt-row .k-grid-row-sticky,
+        &.k-selected.k-table-alt-row td.k-grid-content-sticky,
+        &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
+
+                &::before {
+                    @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
+                }
+            } @else {
+                @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
+            }
         }
 
 
@@ -328,15 +346,23 @@
 
 
         // Selected hover
-        &.k-selected:hover .k-grid-content-sticky,
-        &.k-selected:hover .k-grid-row-sticky,
-        &.k-selected.k-hover .k-grid-content-sticky,
-        &.k-selected.k-hover .k-grid-row-sticky,
+        &.k-selected:hover td.k-grid-content-sticky,
+        &.k-selected:hover .k-table-td.k-grid-row-sticky,
+        &.k-selected.k-hover td.k-grid-content-sticky,
+        &.k-selected.k-hover .k-table-td.k-grid-row-sticky,
         &:hover td.k-grid-content-sticky.k-selected,
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
+            @if($kendo-enable-color-system) {
+                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
+
+                &::before {
+                    @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
+                }
+            } @else {
+                @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
+            }
         }
     }
 
@@ -380,14 +406,30 @@
         .k-selected.k-grid-row-sticky .k-table-td,
         .k-grid-row-sticky .k-table-td.k-selected,
         .k-selected.k-grid-content-sticky {
-            @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
+
+                &::before {
+                    @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
+                }
+            } @else {
+                @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
+            }
         }
 
         .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
         .k-selected.k-table-alt-row.k-grid-row-sticky td,
         .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
         .k-table-alt-row .k-selected.k-grid-content-sticky {
-            @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
+
+                &::before {
+                    @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
+                }
+            } @else {
+                @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
+            }
         }
 
         // Hover state
@@ -425,7 +467,15 @@
         .k-grid-row-sticky.k-hover .k-table-td.k-selected,
         .k-table-row:hover .k-grid-content-sticky.k-selected,
         .k-table-row.k-hover .k-grid-content-sticky.k-selected {
-            @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
+            @if($kendo-enable-color-system) {
+                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
+
+                &::before {
+                    @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
+                }
+            } @else {
+                @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
+            }
         }
     }
 
@@ -436,7 +486,7 @@
 
         &:hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
-            @include fill( $bg: vr( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} ) );
+            @include fill( $bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} ) );
         }
     }