@progress/kendo-theme-fluent 7.1.0-dev.0 → 7.1.0-dev.10

package/scss/scheduler/_variables.scss

@@ -28,7 +28,7 @@ $kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
 
 /// Background color of the selected row in scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-bg: k-get-theme-color-var( primary-20 ) !default;
+$kendo-scheduler-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) !default;
 /// Text color of the selected row in scheduler.
 /// @group scheduler
 $kendo-scheduler-selected-text: $kendo-scheduler-text !default;
@@ -80,10 +80,10 @@ $kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #
 
 /// Background color of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Text color of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: $kendo-color-white !default;
+$kendo-scheduler-event-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Border color of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
@@ -112,7 +112,7 @@ $kendo-scheduler-event-hover-shadow: null !default;
 
 /// Background color of the selected scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-bg: k-get-theme-color-var( primary-120 ) !default;
+$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
 /// Text color of the selected scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-text: $kendo-scheduler-event-text !default;
@@ -148,7 +148,7 @@ $kendo-scheduler-timecolumn-width: 11em !default;
 
 /// Background color of the non-working hours in the scheduler.
 /// @group scheduler
-$kendo-scheduler-nonwork-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the non-working hours in the scheduler.
 /// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
@@ -162,7 +162,7 @@ $kendo-scheduler-weekend-text: null !default;
 
 /// Background color of the other months in the scheduler.
 /// @group scheduler
-$kendo-scheduler-othermonth-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the other months in the scheduler.
 /// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
@@ -192,10 +192,10 @@ $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$kendo-sche
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
 /// Background color of the days with events indicator in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scheduler-yearview-indicator-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Background color of the selected days with events indicator in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-white !default;
+$kendo-scheduler-yearview-indicator-selected-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// Horizontal padding of the scheduler tooltip.
 /// @group scheduler
@@ -208,10 +208,10 @@ $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
 $kendo-scheduler-tooltip-border-width: 0 !default;
 /// Background color of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-bg: $kendo-color-white !default;
+$kendo-scheduler-tooltip-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Text color of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scheduler-tooltip-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// Border color of the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
@@ -263,4 +263,4 @@ $kendo-scheduler-more-btn-height: 13px !default;
 
 /// Color of the scheduler marquee.
 /// @group scheduler
-$kendo-scheduler-marquee-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scheduler-marquee-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/scrollview/_variables.scss

@@ -29,28 +29,28 @@ $kendo-scrollview-border: var( --kendo-component-border, inherit ) !default;
 $kendo-scrollview-pagebutton-size: 10px !default;
 /// The background color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-bg: $kendo-color-white !default;
+$kendo-scrollview-pagebutton-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The border color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-bg !default;
 /// The primary background color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scrollview-pagebutton-primary-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The primary border color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-bg !default;
 /// The hover box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
+$kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) !default;
 /// The focus box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The primary hover box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px k-get-theme-color-var( neutral-30 ) !default;
+$kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) !default;
 /// The primary focus box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The offset of the ScrollView pager.
 /// @group scrollview
@@ -67,7 +67,7 @@ $kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$
 
 /// The color of the ScrollView navigation arrows.
 /// @group scrollview
-$kendo-scrollview-navigation-color: $kendo-color-white !default;
+$kendo-scrollview-navigation-color: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -76,7 +76,7 @@ $kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none
 $kendo-scrollview-navigation-bg: transparent !default;
 /// The focus box shadow of the ScrollView navigation arrows.
 /// @group scrollview
-$kendo-scrollview-navigation-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scrollview-navigation-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The hover box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-hover-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

package/scss/searchbox/_variables.scss

@@ -2,4 +2,4 @@
 
 /// Color of the searchbox icon.
 /// @group searchbox
-$kendo-searchbox-icon-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-searchbox-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/signature/_variables.scss

@@ -38,10 +38,10 @@ $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
 /// The color of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-color: rgba( k-get-theme-color( info, 100 ), .4 ) !default;
+$kendo-signature-line-color: rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 ) !default;
 /// The color of the row line of the disabled signature component.
 /// @group signature
-$kendo-signature-line-disabled-color: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-signature-line-disabled-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// The width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;

package/scss/skeleton/_variables.scss

@@ -17,7 +17,7 @@ $kendo-skeleton-circle-border-radius: 9999px !default;
 
 /// The background color of the Skeleton item.
 /// @group skeleton
-$kendo-skeleton-item-bg: k-get-theme-color-var( neutral-50 ) !default;
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
-$kendo-skeleton-wave-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-skeleton-wave-bg: if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) !default;

package/scss/slider/_variables.scss

@@ -33,26 +33,26 @@ $kendo-slider-track-size: map.get( $kendo-spacing, 1 ) !default;
 $kendo-slider-track-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
 /// The background color of the slider track.
 /// @group slider
-$kendo-slider-track-bg: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the slider track.
 /// @group slider
 $kendo-slider-track-border: inherit !default;
 /// The hover background color of the slider track.
 /// @group slider
-$kendo-slider-track-hover-bg: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-slider-track-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// The hover border color of the slider track.
 /// @group slider
 $kendo-slider-track-hover-border: inherit !default;
 /// The focus background color of the slider track.
 /// @group slider
-$kendo-slider-track-focus-bg: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-slider-track-focus-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// The focus border color of the slider track.
 /// @group slider
 $kendo-slider-track-focus-border: inherit !default;
 
 /// The selection background color of the slider track.
 /// @group slider
-$kendo-slider-selection-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-slider-selection-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The default size of the slider thumb.
 /// @group slider
@@ -78,7 +78,7 @@ $kendo-slider-thumb-bg: var( --kendo-component-bg, transparent ) !default;
 $kendo-slider-thumb-text: inherit !default;
 /// The border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-slider-thumb-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-gradient: transparent !default;
@@ -91,7 +91,7 @@ $kendo-slider-thumb-hover-bg: $kendo-slider-thumb-bg !default;
 $kendo-slider-thumb-hover-text: inherit !default;
 /// The hover border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-hover-border: k-get-theme-color-var( primary-120 ) !default;
+$kendo-slider-thumb-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) !default;
 /// The hover gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-hover-gradient: transparent !default;
@@ -104,7 +104,7 @@ $kendo-slider-thumb-active-bg: $kendo-slider-thumb-hover-bg !default;
 $kendo-slider-thumb-active-text: inherit !default;
 /// The active border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-border: k-get-theme-color-var( primary-130 ) !default;
+$kendo-slider-thumb-active-border: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 )) !default;
 /// The active gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-active-gradient: transparent !default;
@@ -124,16 +124,16 @@ $kendo-slider-thumb-focus-gradient: transparent !default;
 
 /// The text color of the disabled slider.
 /// @group slider
-$kendo-slider-disabled-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-slider-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 )) !default;
 /// The background color of the disabled slider track.
 /// @group slider
-$kendo-slider-track-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-slider-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
 /// The selection background color of the disabled slider track.
 /// @group slider
-$kendo-slider-selection-disabled-bg: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-slider-selection-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
 /// The background color of the disabled slider thumb.
 /// @group slider
-$kendo-slider-thumb-disabled-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 
 
 /// The transition speed of the slider.

package/scss/split-button/_variables.scss

@@ -29,7 +29,7 @@ $kendo-split-button-arrow-delimiter-size: calc( #{$kendo-button-inner-calc-size}
 $kendo-split-button-arrow-delimiter-line-size: 1px !default;
 /// The background color of the SplitButton arrow delimiter.
 /// @group split-button
-$kendo-split-button-arrow-delimiter-bg: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-split-button-arrow-delimiter-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The sizes map for the SplitButton.
 /// @group split-button

package/scss/splitter/_variables.scss

@@ -46,21 +46,21 @@ $kendo-splitter-collapse-icon-padding-y: map.get( $kendo-spacing, .5 ) !default;
 
 /// Background color of the splitter splitbar.
 /// @group splitter
-$kendo-splitbar-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-splitbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the splitter splitbar.
 /// @group splitter
 $kendo-splitbar-text: var( --kendo-component-text, initial ) !default;
 
 /// Hover background color of the splitter splitbar.
 /// @group splitter
-$kendo-splitbar-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
 /// Hover text color of the splitter splitbar.
 /// @group splitter
 $kendo-splitbar-hover-text: $kendo-splitbar-text !default;
 
 /// Selected background color of the splitter splitbar.
 /// @group splitter
-$kendo-splitbar-selected-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-splitbar-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Selected text color of the splitter splitbar.
 /// @group splitter
 $kendo-splitbar-selected-text: var( --kendo-component-bg, inherit ) !default;

package/scss/spreadsheet/_variables.scss

@@ -27,14 +27,14 @@ $kendo-spreadsheet-text: var( --kendo-component-text, initial ) !default;
 $kendo-spreadsheet-border: var( --kendo-component-border, initial ) !default;
 /// Primary border color of the spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-primary-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-primary-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Primary background color of the spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-primary-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-primary-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Background color of the spreadsheet header.
 /// @group spreadsheet
-$kendo-spreadsheet-header-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-spreadsheet-header-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the spreadsheet header.
 /// @group spreadsheet
 $kendo-spreadsheet-header-text: $kendo-table-header-text !default;
@@ -44,7 +44,7 @@ $kendo-spreadsheet-header-border: $kendo-table-header-border !default;
 
 /// Text color of the spreadsheet table headers.
 /// @group spreadsheet
-$kendo-spreadsheet-table-header-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-spreadsheet-table-header-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Background color of the spreadsheet table headers.
 /// @group spreadsheet
 $kendo-spreadsheet-table-header-text: $kendo-spreadsheet-header-text !default;
@@ -54,13 +54,13 @@ $kendo-spreadsheet-table-header-border: $kendo-spreadsheet-header-border !defaul
 
 /// Selected text color of the spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-selected-text: k-get-theme-color-var( primary-160 ) !default;
+$kendo-spreadsheet-selected-text: if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 )) !default;
 /// Selected background color of the spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-selected-bg: k-get-theme-color-var( primary-30 ) !default;
+$kendo-spreadsheet-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 )) !default;
 /// Selected border color of the spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-selected-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Horizontal padding of the spreadsheet popup menu.
 /// @group spreadsheet
@@ -186,15 +186,15 @@ $kendo-spreadsheet-cell-editor-border: null !default;
 
 /// Background color of the spreadsheet resize handle.
 /// @group spreadsheet
-$kendo-spreadsheet-resize-handle-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-resize-handle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Border color of the spreadsheet cell comment indicator.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-comment-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-cell-comment-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Border color of the spreadsheet cell comment indicator.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-dirty-border: k-get-theme-color-var( error-100 ) !default;
+$kendo-spreadsheet-cell-dirty-border: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) !default;
 
 /// Horizontal padding of the spreadsheet cell dirty indicator.
 /// @group spreadsheet
@@ -219,41 +219,41 @@ $kendo-filter-menu-padding-left: calc( var( --kendo-icon-size, 1rem ) + 2 * var(
 
 /// Text color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-spreadsheet-filter-button-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// Background color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-bg: $kendo-color-white !default;
+$kendo-spreadsheet-filter-button-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Border color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-spreadsheet-filter-button-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Hover text color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-spreadsheet-filter-button-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Hover background color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-spreadsheet-filter-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
 /// Hover border color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-spreadsheet-filter-button-hover-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Active text color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-spreadsheet-filter-button-active-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Active background color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-spreadsheet-filter-button-active-bg: f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) !default;
 /// Active border color of the spreadsheet filter button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-spreadsheet-filter-button-active-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Color of the spreadsheet menu icon.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-menu-icon-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-filter-menu-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Border color of the spreadsheet error.
 /// @group spreadsheet
-$kendo-spreadsheet-error-border: k-get-theme-color-var( error-190 ) !default;
+$kendo-spreadsheet-error-border: if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) !default;
 
 /// Border style of the spreadsheet image dialog.
 /// @group spreadsheet
@@ -306,10 +306,10 @@ $kendo-spreadsheet-drawing-handle-border-width: 1px !default;
 $kendo-spreadsheet-drawing-handle-border-color: var( --kendo-selected-bg, initial ) !default;
 /// Outline color of the spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-outline-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-drawing-handle-outline-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Border color of the spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-spreadsheet-drawing-handle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Border radius of the spreadsheet drawing handle.
 /// @group spreadsheet
 $kendo-spreadsheet-drawing-handle-border-radius: var( --kendo-border-radius-lg, initial ) !default;

package/scss/stepper/_layout.scss

@@ -75,6 +75,17 @@
             transition-duration: .4s;
             transition-timing-function: ease-in-out;
 
+            &::before {
+                @include border-radius( var( --kendo-stepper-indicator-border-radius, #{$kendo-stepper-indicator-border-radius} ) );
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: -1;
+            }
+
             &::after {
                 @include border-radius( 100% );
                 content: "";
@@ -97,8 +108,12 @@
         }
 
         .k-step.k-disabled {
-            .k-step-indicator::after {
-                display: none;
+            .k-step-indicator {
+                border: 0;
+                
+                &::after {
+                    display: none;
+                }
             }
         }
 

package/scss/stepper/_theme.scss

@@ -42,11 +42,23 @@
             &:disabled,
             &.k-disabled {
                 .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
-                        var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} ),
-                        var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
+                            k-color( app-surface ),
+                            var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
+                        );
+
+                        &::before {
+                            background-color: var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} );
+                        }
+                    } @else {
+                        @include fill(
+                            var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
+                            var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} ),
+                            var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
+                        );
+                    }
                 }
 
                 .k-step-label {
@@ -104,11 +116,23 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
-                        var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} ),
-                        var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
+                            k-color( app-surface ),
+                            var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
+                        );
+
+                        &::before {
+                            background-color: var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} );
+                        }
+                    } @else {
+                        @include fill(
+                            var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
+                            var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} ),
+                            var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
+                        );
+                    }
                 }
 
                 .k-step-label {
@@ -149,11 +173,23 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
-                        var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} ),
-                        var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
+                            k-color( app-surface ),
+                            var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
+                        );
+
+                        &::before {
+                            background-color: var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} );
+                        }
+                    } @else {
+                        @include fill(
+                            var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
+                            var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} ),
+                            var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
+                        );
+                    }
                 }
             }
         }

package/scss/stepper/_variables.scss

@@ -75,7 +75,7 @@ $kendo-stepper-indicator-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-stepper-indicator-text: var( --kendo-component-text, initial ) !default;
 /// Border color of the stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-stepper-indicator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// The hover background color of the stepper indicator.
 /// @group stepper
@@ -99,17 +99,17 @@ $kendo-stepper-indicator-disabled-border: var( --kendo-disabled-border, initial
 
 /// Background color of the stepper done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-stepper-indicator-done-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Text color of the stepper done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-text: $kendo-color-white !default;
+$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white) !default;
 /// Border color of the stepper done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
 
 /// The hover background color of the stepper done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-hover-bg: k-get-theme-color-var( primary-110 ) !default;
+$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// The hover text color of the stepper done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-text !default;
@@ -119,7 +119,7 @@ $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-
 
 /// The disabled background color of the stepper done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-bg: k-get-theme-color-var( primary-30 ) !default;
+$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 )) !default;
 /// The disabled text color of the stepper done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-disabled-text: var( --kendo-disabled-text, initial ) !default;
@@ -129,7 +129,7 @@ $kendo-stepper-indicator-done-disabled-border: var( --kendo-disabled-border, ini
 
 /// The background color of the stepper current indicator.
 /// @group stepper
-$kendo-stepper-indicator-current-bg: k-get-theme-color-var( primary-120 ) !default;
+$kendo-stepper-indicator-current-bg: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
 /// The text color of the stepper current indicator.
 /// @group stepper
 $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-done-text !default;
@@ -162,10 +162,10 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-
 $kendo-stepper-label-text: inherit !default;
 /// The success text color of the stepper label.
 /// @group stepper
-$kendo-stepper-label-success-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-stepper-label-success-text: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) !default;
 /// The error text color of the stepper label.
 /// @group stepper
-$kendo-stepper-label-error-text: k-get-theme-color-var( error-190 ) !default;
+$kendo-stepper-label-error-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) !default;
 /// The hover text color of the stepper label.
 /// @group stepper
 $kendo-stepper-label-hover-text: $kendo-stepper-text !default;
@@ -178,7 +178,7 @@ $kendo-stepper-current-label-font-weight: var( --kendo-font-weight-bold, bold )
 
 /// The text color of the stepper optional label.
 /// @group stepper
-$kendo-stepper-optional-label-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-stepper-optional-label-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// The font size of the stepper optional label.
 /// @group stepper
 $kendo-stepper-optional-label-font-size: inherit !default;