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

package/scss/scheduler/_theme.scss

@@ -71,7 +71,7 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: var( --kendo-selected-bg, #{$kendo-selected-bg} );
+        background-color: k-color(base-active);
     }
 
     .k-scheduler-layout-flex {
@@ -165,9 +165,9 @@
         .k-scheduler-content .k-scheduler-row:hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
-                var( --kendo-hover-text, #{$kendo-hover-text} ),
-                var( --kendo-hover-bg, #{$kendo-hover-bg} ),
-                var( --kendo-hover-border, #{$kendo-hover-border} )
+                k-color(on-base),
+                k-color(base-hover),
+                color-mix(in srgb, k-color(border) 10%, transparent)
             );
         }
 
@@ -227,7 +227,7 @@
         }
 
         .k-tooltip-title .k-day {
-            color: if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 ));
+            color: k-color(primary-emphasis);
         }
     }
 }

package/scss/scheduler/_variables.scss

@@ -18,17 +18,17 @@ $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-scheduler-bg: k-color(surface-alt) !default;
 /// The text color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-text: var( --kendo-component-text, initial ) !default;
+$kendo-scheduler-text: k-color(on-app-surface) !default;
 /// The border color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
+$kendo-scheduler-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the selected row in Scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) !default;
+$kendo-scheduler-selected-bg: k-color(primary-subtle) !default;
 /// The 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 * #
 
 /// The background color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-scheduler-event-bg: k-color(primary) !default;
 /// The text color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-scheduler-event-text: k-color(app-surface) !default;
 /// The border color of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
@@ -96,13 +96,13 @@ $kendo-scheduler-event-shadow: null !default;
 
 /// The background color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-scheduler-event-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-scheduler-event-hover-text: k-color(on-base) !default;
 /// The border color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-border: var( --kendo-hover-border, inherit ) !default;
+$kendo-scheduler-event-hover-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
 /// The gradient of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-gradient: null !default;
@@ -112,7 +112,7 @@ $kendo-scheduler-event-hover-shadow: null !default;
 
 /// The background color of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-scheduler-event-selected-bg: k-color(primary-active) !default;
 /// The 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;
 
 /// The background color of the non-working hours in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-scheduler-nonwork-bg: k-color(surface) !default;
 /// The 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;
 
 /// The background color of the preceding/subsequent month cells in the Calendar.
 /// @group scheduler
-$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-scheduler-othermonth-bg: k-color(surface) !default;
 /// The text color of the preceding/subsequent month cells in the Calendar.
 /// @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;
 /// The background color of the days with events indicator of the year view in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-scheduler-yearview-indicator-bg: k-color(primary) !default;
 /// The background color of the selected days with events indicator of the year view in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-selected-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-scheduler-yearview-indicator-selected-bg: k-color(app-surface) !default;
 
 /// The 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;
 /// The background color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-scheduler-tooltip-bg: k-color(app-surface) !default;
 /// The text color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-scheduler-tooltip-text: k-color(subtle) !default;
 /// The 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;
 
 /// The color of the Scheduler marquee.
 /// @group scheduler
-$kendo-scheduler-marquee-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-scheduler-marquee-color: k-color(primary) !default;

package/scss/scrollview/_variables.scss

@@ -16,41 +16,41 @@ $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-text: var( --kendo-component-text, inherit ) !default;
+$kendo-scrollview-text: k-color(on-app-surface) !default;
 /// The background color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-scrollview-bg: k-color(surface-alt) !default;
 /// The border color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-border: var( --kendo-component-border, inherit ) !default;
+$kendo-scrollview-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The size of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-size: 10px !default;
 /// The background color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-scrollview-pagebutton-bg: k-color(app-surface) !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: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-scrollview-pagebutton-primary-bg: k-color(primary) !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 if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px k-color(base) !default;
 /// The focus box shadow of the ScrollView page button.
 /// @group scrollview
-$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;
+$kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px k-color(base-emphasis) !default;
 /// The primary hover box shadow of the ScrollView page button.
 /// @group scrollview
-$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;
+$kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px k-color(base) !default;
 /// The primary focus box shadow of the ScrollView page button.
 /// @group scrollview
-$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;
+$kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px k-color(base-emphasis) !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: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-scrollview-navigation-color: k-color(app-surface) !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 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-scrollview-navigation-focus-shadow: 0 0 0 1px k-color(base-emphasis) !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: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-searchbox-icon-color: k-color(primary) !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: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 )) !default;
+$kendo-signature-line-color: color-mix(in srgb, k-color(info) 40%, transparent) !default;
 /// The color of the row line of the disabled signature component.
 /// @group signature
-$kendo-signature-line-disabled-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-signature-line-disabled-color: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-skeleton-item-bg: color-mix(in srgb, k-color(on-app-surface) 23%, transparent) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
-$kendo-skeleton-wave-bg: if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-skeleton-wave-bg: k-color(base) !default;

package/scss/slider/_variables.scss

@@ -33,26 +33,26 @@ $kendo-slider-track-size: k-spacing(1) !default;
 $kendo-slider-track-border-radius: k-spacing(0.5) !default;
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-bg: k-color(base-emphasis) !default;
 /// The border color of the Slider track.
 /// @group slider
 $kendo-slider-track-border: inherit !default;
 /// The background color of the hovered Slider track.
 /// @group slider
-$kendo-slider-track-hover-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-hover-bg: k-color(base-emphasis) !default;
 /// The border color of the hovered Slider track.
 /// @group slider
 $kendo-slider-track-hover-border: inherit !default;
 /// The background color of the focused Slider track.
 /// @group slider
-$kendo-slider-track-focus-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-focus-bg: k-color(base-emphasis) !default;
 /// The border color of the focused Slider track.
 /// @group slider
 $kendo-slider-track-focus-border: inherit !default;
 
 /// The background color of the Slider's track selection.
 /// @group slider
-$kendo-slider-selection-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-slider-selection-bg: k-color(primary) !default;
 
 /// The default size of the Slider thumb.
 /// @group slider
@@ -72,13 +72,13 @@ $kendo-slider-thumb-active-size: null !default;
 
 /// The background color of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-slider-thumb-bg: k-color(surface-alt) !default;
 /// The text color of the Slider thumb.
 /// @group slider
 $kendo-slider-thumb-text: inherit !default;
 /// The border color of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-slider-thumb-border: k-color(primary) !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 border color of the hovered Slider thumb.
 /// @group slider
-$kendo-slider-thumb-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-slider-thumb-hover-border: k-color(primary-hover) !default;
 /// The gradient of the hovered 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 border color of the active Slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-border: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 )) !default;
+$kendo-slider-thumb-active-border: k-color(primary-active) !default;
 /// The gradient of the active 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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-slider-disabled-text: color-mix(in srgb, k-color(on-app-surface) 70%, transparent) !default;
 /// The background color of the disabled Slider track.
 /// @group slider
-$kendo-slider-track-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-slider-track-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 6%, transparent) !default;
 /// The background color of the disabled Slider's track selection.
 /// @group slider
-$kendo-slider-selection-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-slider-selection-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background color of the disabled Slider thumb.
 /// @group slider
-$kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-thumb-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-split-button-arrow-delimiter-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// The sizes map for the SplitButton.
 /// @group split-button

package/scss/splitter/_variables.scss

@@ -16,13 +16,13 @@ $kendo-splitter-font-family: var( --kendo-font-family, initial ) !default;
 
 /// The background color of the Splitter.
 /// @group splitter
-$kendo-splitter-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-splitter-bg: k-color(surface-alt) !default;
 /// The text color of the Splitter.
 /// @group splitter
-$kendo-splitter-text: var( --kendo-component-text, initial ) !default;
+$kendo-splitter-text: k-color(on-app-surface) !default;
 /// The border color of the Splitter.
 /// @group splitter
-$kendo-splitter-border: var( --kendo-component-border, initial ) !default;
+$kendo-splitter-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
@@ -46,24 +46,24 @@ $kendo-splitter-collapse-icon-padding-y: k-spacing(.5) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-splitbar-bg: k-color(surface) !default;
 /// The text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-text: var( --kendo-component-text, initial ) !default;
+$kendo-splitbar-text: k-color(on-app-surface) !default;
 
 /// The hover background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-splitbar-hover-bg: k-color(base-hover) !default;
 /// The hover text color of the Splitter split bar.
 /// @group splitter
 $kendo-splitbar-hover-text: $kendo-splitbar-text !default;
 
 /// The selected background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-splitbar-selected-bg: k-color(primary) !default;
 /// The selected text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-text: var( --kendo-component-bg, inherit ) !default;
+$kendo-splitbar-selected-text: k-color(surface-alt) !default;
 
 /// The size of the Splitter static split bar.
 /// @group splitter

package/scss/spreadsheet/_variables.scss

@@ -19,23 +19,23 @@ $kendo-spreadsheet-font-size: var( --kendo-font-size, initial ) !default;
 $kendo-spreadsheet-line-height: var( --kendo-line-height, initial ) !default;
 /// The background color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-spreadsheet-bg: k-color(surface-alt) !default;
 /// The text color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-text: var( --kendo-component-text, initial ) !default;
+$kendo-spreadsheet-text: k-color(on-app-surface) !default;
 /// The border color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-border: var( --kendo-component-border, initial ) !default;
+$kendo-spreadsheet-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The primary border color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-primary-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-primary-border: k-color(primary) !default;
 /// The primary background color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-primary-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-primary-bg: k-color(primary) !default;
 
 /// The background color of the Spreadsheet header.
 /// @group spreadsheet
-$kendo-spreadsheet-header-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-spreadsheet-header-bg: k-color(surface) !default;
 /// The text color of the Spreadsheet header.
 /// @group spreadsheet
 $kendo-spreadsheet-header-text: $kendo-table-header-text !default;
@@ -45,7 +45,7 @@ $kendo-spreadsheet-header-border: $kendo-table-header-border !default;
 
 /// The background color of the Spreadsheet table headers.
 /// @group spreadsheet
-$kendo-spreadsheet-table-header-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-spreadsheet-table-header-bg: k-color(surface) !default;
 /// The text color of the Spreadsheet table headers.
 /// @group spreadsheet
 $kendo-spreadsheet-table-header-text: $kendo-spreadsheet-header-text !default;
@@ -55,13 +55,13 @@ $kendo-spreadsheet-table-header-border: $kendo-spreadsheet-header-border !defaul
 
 /// The text color of the selected Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-selected-text: if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 )) !default;
+$kendo-spreadsheet-selected-text: k-color(primary-on-subtle) !default;
 /// The background color of the selected Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 )) !default;
+$kendo-spreadsheet-selected-bg: k-color(primary-subtle-active) !default;
 /// The border color of the selected Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-selected-border: k-color(primary) !default;
 
 /// The horizontal padding of the Spreadsheet popup Menu.
 /// @group spreadsheet
@@ -187,15 +187,15 @@ $kendo-spreadsheet-cell-editor-border: null !default;
 
 /// The background color of the Spreadsheet resize handle.
 /// @group spreadsheet
-$kendo-spreadsheet-resize-handle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-resize-handle-bg: k-color(primary) !default;
 
 /// The border color of the Spreadsheet cell comment indicator.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-comment-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-cell-comment-border: k-color(primary) !default;
 
 /// The border color of the Spreadsheet cell dirty indicator.
 /// @group spreadsheet
-$kendo-spreadsheet-cell-dirty-border: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) !default;
+$kendo-spreadsheet-cell-dirty-border: k-color(error) !default;
 
 /// The horizontal padding of the Spreadsheet sheets bar.
 /// @group spreadsheet
@@ -220,41 +220,41 @@ $kendo-filter-menu-padding-left: calc( var( --kendo-icon-size, 1rem ) + 2 * k-sp
 
 /// The text color of the Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-spreadsheet-filter-button-text: k-color(on-app-surface) !default;
 /// The background color of the Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-spreadsheet-filter-button-bg: k-color(app-surface) !default;
 /// The border color of the Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-spreadsheet-filter-button-border: k-color(border) !default;
 
 /// The text color of the hovered Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-spreadsheet-filter-button-hover-text: k-color(on-app-surface) !default;
 /// The background color of the hovered Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-spreadsheet-filter-button-hover-bg: k-color(base-hover) !default;
 /// The border color of the hovered Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-spreadsheet-filter-button-hover-border: k-color(border) !default;
 
 /// The text color of the active Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-spreadsheet-filter-button-active-text: k-color(on-app-surface) !default;
 /// The background color of the active Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-bg: f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-spreadsheet-filter-button-active-bg: k-color(base-active) !default;
 /// The border color of the active Spreadsheet filter Button.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-spreadsheet-filter-button-active-border: k-color(border) !default;
 
 /// The color of the Spreadsheet Menu icon.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-menu-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-filter-menu-icon-color: k-color(primary) !default;
 
 /// The border color of the Spreadsheet error.
 /// @group spreadsheet
-$kendo-spreadsheet-error-border: if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) !default;
+$kendo-spreadsheet-error-border: k-color(error-on-subtle) !default;
 
 /// The border style of the Spreadsheet image Dialog.
 /// @group spreadsheet
@@ -276,7 +276,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $kendo-spreadsheet-insert-image-dialog-preview-img: "image-fluent.png" !default;
 /// The border of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-preview-border: var( --kendo-component-border, initial ) !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The border radius of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-preview-border-radius: var( --kendo-border-radius-md, initial ) !default;
@@ -288,7 +288,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000p
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: var( --kendo-border-radius-md, initial ) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: var( --kendo-component-bg, initial ) !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: k-color(surface-alt) !default;
 
 /// The width of the Spreadsheet drawing handle.
 /// @group spreadsheet
@@ -304,13 +304,13 @@ $kendo-spreadsheet-drawing-handle-border-style: solid !default;
 $kendo-spreadsheet-drawing-handle-border-width: 1px !default;
 /// The border color of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-border-color: var( --kendo-selected-bg, initial ) !default;
+$kendo-spreadsheet-drawing-handle-border-color: k-color(base-active) !default;
 /// The outline color of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-outline-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-drawing-handle-outline-color: k-color(primary) !default;
 /// The border color of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-spreadsheet-drawing-handle-bg: k-color(primary) !default;
 /// The border radius of the Spreadsheet drawing handle.
 /// @group spreadsheet
 $kendo-spreadsheet-drawing-handle-border-radius: var( --kendo-border-radius-lg, initial ) !default;