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

package/scss/expansion-panel/_variables.scss

@@ -19,27 +19,27 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-text: var( --kendo-component-text, initial ) !default;
+$kendo-expander-text: k-color(on-app-surface) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-expander-bg: k-color(surface) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-border: var( --kendo-component-border, initial ) !default;
+$kendo-expander-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The box shadow of the ExpansionPanel.
 /// @group expander
-$kendo-expander-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-expander-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the expanded ExpansionPanel.
 /// @group expander
-$kendo-expander-expanded-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-expander-expanded-bg: k-color(surface-alt) !default;
 
 /// The text color of the disabled ExpansionPanel.
 /// @group expander
-$kendo-expander-disabled-text: var( --kendo-disabled-text, initial ) !default;
+$kendo-expander-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background color of the disabled ExpansionPanel.
 /// @group expander
-$kendo-expander-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+$kendo-expander-disabled-bg: k-color(base-subtle) !default;
 
 /// The offset of the focused 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: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
+$kendo-expander-focus-outline: k-color(base-emphasis) !default;
 
 /// The background color of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-expander-focus-bg: k-color(surface-alt) !default;
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$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;
+$kendo-expander-focus-shadow: inset 0px 0px 0px 2px k-color(base-emphasis) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
@@ -70,22 +70,22 @@ $kendo-expander-header-padding-y: k-spacing(3) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-expander-header-text: k-color(primary) !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: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-expander-header-hover-bg: k-color(base-hover) !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-expander-title-text: k-color(primary) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: var( --kendo-subtle-text, initial ) !default;
+$kendo-expander-header-sub-title-text: k-color(subtle) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander

package/scss/fab/_theme.scss

@@ -186,9 +186,9 @@
         &:disabled .k-fab-item-text,
         &.k-disabled .k-fab-item-text {
             @include disabled(
-                var( --kendo-disabled-text, inherit ),
-                var( --kendo-disabled-bg, inherit ),
-                var( --kendo-disabled-border, inherit )
+                color-mix(in srgb, k-color( on-app-surface ) 46%, transparent),
+                k-color( base-subtle ),
+                transparent
             );
         }
 

package/scss/fab/_variables.scss

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

package/scss/filemanager/_variables.scss

@@ -20,13 +20,13 @@ $kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-file-manager-bg: k-color(surface-alt) !default;
 /// The text color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-text: var( --kendo-component-text, inherit ) !default;
+$kendo-file-manager-text: k-color(on-app-surface) !default;
 /// The border color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-border: var( --kendo-component-border, inherit ) !default;
+$kendo-file-manager-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The border width of the FileManager Toolbar.
 /// @group file-manager
@@ -110,7 +110,7 @@ $kendo-file-manager-listview-item-height: 120px !default;
 $kendo-file-manager-listview-item-icon-bg: transparent !default;
 /// The text color of the FileManager ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-file-manager-listview-item-icon-text: k-color(subtle) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group file-manager
 $kendo-file-manager-listview-item-icon-border: inherit !default;
@@ -176,7 +176,7 @@ $kendo-file-manager-preview-border: inherit !default;
 $kendo-file-manager-preview-icon-bg: transparent !default;
 /// The text color of the FileManager preview icon.
 /// @group file-manager
-$kendo-file-manager-preview-icon-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-file-manager-preview-icon-text: k-color(subtle) !default;
 /// The border color of the FileManager preview icon.
 /// @group file-manager
 $kendo-file-manager-preview-icon-border: inherit !default;

package/scss/filter/_variables.scss

@@ -21,19 +21,19 @@ $kendo-filter-operator-dropdown-width: 15em !default;
 
 /// The text color of the Filter.
 /// @group filter
-$kendo-filter-text: var( --kendo-component-text, initial ) !default;
+$kendo-filter-text: k-color(on-app-surface) !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-filter-preview-field-text: k-color(primary) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-filter-preview-operator-text: k-color(subtle) !default;
 
 /// The background color of the line that connects the Filter items.
 /// @group filter
-$kendo-filter-line-bg: var( --kendo-component-border, initial ) !default;
+$kendo-filter-line-bg: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-filter-toolbar-focus-border: k-color(base-emphasis) !default;

package/scss/floating-label/_variables.scss

@@ -67,4 +67,4 @@ $kendo-floating-label-focus-text: inherit !default;
 
 /// The invalid text color of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;
+$kendo-floating-label-invalid-text: k-color(error-on-surface) !default;

package/scss/forms/_theme.scss

@@ -5,7 +5,7 @@
 
     .k-form,
     .k-form-inline {
-        @include fill( $color: var( --kendo-form-text, #{$kendo-body-text} ) );
+        @include fill( $color: var( --kendo-form-text, #{k-color( on-app-surface )} ) );
 
         fieldset {
             legend {
@@ -18,7 +18,7 @@
         }
 
         .k-field-info {
-            @include fill( $color: var( --kendo-field-info-text, #{$kendo-subtle-text} ) );
+            @include fill( $color: var( --kendo-field-info-text, #{k-color( subtle )} ) );
         }
 
         .k-alert-error {

package/scss/forms/_variables.scss

@@ -49,7 +49,7 @@ $kendo-form-legend-border-style: solid !default;
 
 /// The border color of the Form legend.
 /// @group form
-$kendo-form-legend-border-color: var( --kendo-component-border, initial ) !default;
+$kendo-form-legend-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The width of the Form legend.
 /// @group form
@@ -90,7 +90,7 @@ $kendo-form-hint-margin-top: k-spacing(1) !default;
 
 /// The text color of the Form hint.
 /// @group form
-$kendo-form-hint-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-form-hint-text: k-color(subtle) !default;
 
 /// The row spacing of the small Form.
 /// @group form
@@ -136,7 +136,7 @@ $kendo-inline-form-element-width: 25% !default;
 
 /// The invalid text color of the Form.
 /// @group form
-$kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
+$kendo-forms-invalid-color: k-color(error-on-surface) !default;
 
 
 /// The horizontal margin of the optional label in the Form.
@@ -172,7 +172,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: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-fieldset-legend-text: k-color(subtle) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: initial !default;

package/scss/gantt/_theme.scss

@@ -83,7 +83,7 @@
         );
 
         &.k-task-delayed {
-            @include repeating-striped-gradient( $kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px );
+            @include repeating-striped-gradient( $kendo-gantt-delayed-bg, k-color( app-surface ), 90deg, 4px, 2px );
         }
 
         &.k-task-advanced {
@@ -240,7 +240,7 @@
 
     // Delay offset
     .k-task-offset {
-        @include repeating-striped-gradient( $kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px );
+        @include repeating-striped-gradient( $kendo-gantt-delayed-bg, k-color( app-surface ), 135deg, 4px, 2px );
 
         .k-resize-e::before {
             @include fill(
@@ -256,7 +256,7 @@
     }
 
     .k-task-offset:hover {
-        @include repeating-striped-gradient( $kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px );
+        @include repeating-striped-gradient( $kendo-gantt-delayed-bg-lighter, k-color( app-surface ), 135deg, 4px, 2px );
     }
 
     .k-pdf-export .k-task-offset {

package/scss/gantt/_variables.scss

@@ -17,17 +17,17 @@ $kendo-gantt-font-size: var( --kendo-font-size, initial ) !default;
 $kendo-gantt-line-height: var( --kendo-line-height, initial ) !default;
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-gantt-bg: k-color(surface-alt) !default;
 /// The text color of the Gantt.
 /// @group gantt
-$kendo-gantt-text: var( --kendo-component-text, inherit ) !default;
+$kendo-gantt-text: k-color(on-app-surface) !default;
 /// The border color of the Gantt.
 /// @group gantt
-$kendo-gantt-border: var( --kendo-component-border, inherit ) !default;
+$kendo-gantt-border: color-mix(in srgb, k-color(border) 16%, transparent) !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-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 )) !default;
+$kendo-gantt-nonwork-bg: color-mix(in srgb, k-color(on-app-surface) 4%, transparent) !default;
 /// The text color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-text: inherit !default;
@@ -43,7 +43,7 @@ $kendo-gantt-line-size: 2px !default;
 $kendo-gantt-line-fill: black !default;
 /// The background fill of the selected Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-selected-fill: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-gantt-line-selected-fill: k-color(primary-active) !default;
 
 /// The size of the Gantt task dot.
 /// @group gantt
@@ -53,16 +53,16 @@ $kendo-gantt-dot-size: 8px !default;
 $kendo-gantt-dot-spacing: k-spacing(0.5) !default;
 /// The background color of the Gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-bg: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-gantt-dot-bg: k-color(on-app-surface) !default;
 /// The border color of the Gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-gantt-dot-border: k-color(on-app-surface) !default;
 /// The background color of the hovered Gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-gantt-dot-hover-bg: k-color(app-surface) !default;
 /// The border color of the hovered Gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-hover-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-gantt-dot-hover-border: k-color(on-app-surface) !default;
 
 /// The background color of the Gantt milestone.
 /// @group gantt
@@ -72,23 +72,23 @@ $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
 $kendo-gantt-milestone-border: $kendo-gantt-text !default;
 /// The background color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !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: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-gantt-milestone-selected-border: k-color(primary) !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) !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-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-gantt-summary-progress-bg: k-color(on-app-surface) !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-get-theme-color-var( primary-50 )) !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: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-gantt-summary-progress-selected-bg: k-color(primary) !default;
 
 /// The border width of the Gantt task.
 /// @group gantt
@@ -101,31 +101,31 @@ $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-get-theme-color-var( neutral-110 )) !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( app-surface ), $kendo-color-white) !default;
+$kendo-gantt-task-text: k-color(app-surface) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: inherit !default;
 /// The background color of the Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-gantt-task-progress-bg: k-color(on-app-surface) !default;
 /// The background color of the hovered Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-gantt-task-progress-hover-bg: k-color(on-app-surface) !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-get-theme-color-var( primary-50 )) !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: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-gantt-task-selected-text: k-color(app-surface) !default;
 /// The border color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: transparent !default;
 /// The background color of the selected Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-gantt-task-progress-selected-bg: k-color(primary) !default;
 
 /// The vertical padding of the Gantt task actions.
 /// @group gantt
@@ -187,40 +187,40 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
 /// The text color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-gantt-planned-text: k-color(app-surface) !default;
 /// The background color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-gantt-planned-bg: k-color(primary) !default;
 /// The border color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-gantt-planned-border: k-color(primary) !default;
 
 /// The text color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-gantt-delayed-text: k-color(app-surface) !default;
 /// The background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 )) !default;
+$kendo-gantt-delayed-bg: k-color(error-emphasis) !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 ), k-get-theme-color-var( error-110)) !default;
+$kendo-gantt-delayed-bg-lighter: k-color(error) !default;
 /// The background color of the hovered Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-hover-bg: if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) !default;
+$kendo-gantt-delayed-hover-bg: k-color(error-on-subtle) !default;
 
 /// The background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 )) !default;
+$kendo-gantt-advanced-bg: k-color(success-emphasis) !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 ), k-get-theme-color-var( success-110 )) !default;
+$kendo-gantt-advanced-bg-lighter: k-color(success) !default;
 /// The background color of the hovered Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-hover-bg: if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 )) !default;
+$kendo-gantt-advanced-hover-bg: k-color(success-on-subtle) !default;
 
 /// The text color of the Gantt delayed task action.
 /// @group gantt
-$kendo-gantt-action-on-offset-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-gantt-action-on-offset-text: k-color(on-app-surface) !default;
 /// The top position of the Gantt delayed task resize handler.
 /// @group gantt
 $kendo-gantt-offset-resize-handler-top: 50% !default;
@@ -233,10 +233,10 @@ $kendo-gantt-validation-tooltip-width: 200px !default;
 $kendo-gantt-validation-tooltip-label-width: 50px !default;
 /// The border color of the Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-border: var( --kendo-component-border, inherit ) !default;
+$kendo-gantt-validation-tooltip-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 )) !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: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) !default;
+$kendo-gantt-validation-tooltip-invalid-border: k-color(error) !default;

package/scss/grid/_layout.scss

@@ -1325,7 +1325,7 @@
     .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper,
     .k-column-menu-footer {
         border-top: 1px solid;
-        border-top-color: var( --kendo-component-border, inherit );
+        border-top-color: color-mix(in srgb, k-color(border) 16%, transparent);
     }
 
     .k-columnmenu-item-content {

package/scss/grid/_theme.scss

@@ -100,24 +100,6 @@
             border-block-color: var( --kendo-grid-selected-border, #{$kendo-grid-selected-border} );
         }
 
-        @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
         td:focus,
         td.k-focus,
@@ -236,18 +218,18 @@
         .k-hierarchy-cell .k-icon {
             &:hover {
                 @include fill(
-                    $color: var( --kendo-hover-text, inherit ),
-                    $bg: var( --kendo-hover-bg, inherit )
+                    $color: k-color( on-base ),
+                    $bg: k-color( base-hover )
                 );
             }
             &:focus,
             &.k-focus {
-                box-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 10%, transparent), rgba( $kendo-color-black, .1 ));
+                box-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 10%, transparent);
             }
             &.k-active {
                 @include fill(
-                    $color: var( --kendo-selected-text, inherit ),
-                    $bg: var( --kendo-selected-bg, inherit )
+                    $color: k-color( on-base ),
+                    $bg: k-color( base-active )
                 );
             }
         }
@@ -315,13 +297,9 @@
         &.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} ) );
+            @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 {
+            &::before {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
             }
         }
@@ -331,13 +309,9 @@
         &.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 {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
+            @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 {
+            &::before {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
             }
         }
@@ -365,13 +339,9 @@
         &.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 {
-            @if($kendo-enable-color-system) {
-                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
+            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 {
+            &::before {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
             }
         }
@@ -440,7 +410,7 @@
             &.k-disabled .k-link,
             &.k-disabled .k-icon {
                 @include disabled(
-                    var( --kendo-disabled-text, inherit )
+                    color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)
                 );
             }
         }
@@ -452,7 +422,7 @@
         .k-listgroup-item {
             &.k-disabled {
                 @include disabled(
-                    $bg: var( --kendo-disabled-bg, inherit )
+                    $bg: k-color( base-subtle )
                 );
             }
         }