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

package/scss/popover/_variables.scss

@@ -24,13 +24,13 @@ $kendo-popover-line-height: $kendo-card-line-height !default;
 
 /// The text color of the Popover.
 /// @group popover
-$kendo-popover-text: $kendo-component-text !default;
+$kendo-popover-text: k-color(on-app-surface) !default;
 /// The background color of the Popover.
 /// @group popover
-$kendo-popover-bg: $kendo-component-bg !default;
+$kendo-popover-bg: k-color(surface-alt) !default;
 /// The border color of the Popover.
 /// @group popover
-$kendo-popover-border: $kendo-component-border !default;
+$kendo-popover-border: k-color(border) !default;
 /// The box shadow of the Popover.
 /// @group popover
 $kendo-popover-shadow: $kendo-card-shadow !default;

package/scss/popup/_variables.scss

@@ -29,13 +29,13 @@ $kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup
-$kendo-popup-bg: $kendo-component-bg !default;
+$kendo-popup-bg: k-color(surface-alt) !default;
 /// Text color of the popup.
 /// @group popup
-$kendo-popup-text: $kendo-component-text !default;
+$kendo-popup-text: k-color(on-app-surface) !default;
 /// Border color of the popup.
 /// @group popup
-$kendo-popup-border: $kendo-component-border !default;
+$kendo-popup-border: k-color(border) !default;
 /// Box shadow of the popup.
 /// @group popup
 $kendo-popup-shadow: k-elevation(4) !default;

package/scss/progressbar/_variables.scss

@@ -27,10 +27,10 @@ $kendo-progressbar-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) !default;
+$kendo-progressbar-bg: k-color(primary-subtle) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: $kendo-component-text !default;
+$kendo-progressbar-text: k-color(on-app-surface) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: unset !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
 
 /// The progress background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-bg: $kendo-color-primary !default;
+$kendo-progressbar-value-bg: k-color(primary) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: $kendo-color-primary-contrast !default;
+$kendo-progressbar-value-text: k-color(on-primary) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-border: unset !default;
@@ -66,12 +66,12 @@ $kendo-progressbar-indeterminate-gradient: null !default;
 
 /// The border color of the chunk ProgressBar.
 /// @group progressbar
-$kendo-progressbar-chunk-border: $kendo-component-bg !default;
+$kendo-progressbar-chunk-border: k-color(surface-alt) !default;
 
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
+$kendo-circular-progressbar-arc-stroke: k-color(primary) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/prompt/_variables.scss

@@ -4,23 +4,23 @@
 
 /// The text color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-text: $kendo-component-text !default;
+$kendo-prompt-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: $kendo-component-bg !default;
+$kendo-prompt-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-border: $kendo-component-border !default;
+$kendo-prompt-border: k-color(border) !default;
 
 /// The text color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-text: $kendo-component-header-text !default;
+$kendo-prompt-header-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: $kendo-component-bg !default;
+$kendo-prompt-header-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-border: $kendo-component-header-border !default;
+$kendo-prompt-header-border: k-color(border) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
@@ -33,13 +33,13 @@ $kendo-prompt-content-padding-x: k-spacing(4) !default;
 $kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-text: $kendo-component-header-text !default;
+$kendo-prompt-content-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-bg: $kendo-component-header-bg !default;
+$kendo-prompt-content-bg: k-color(app-surface) !default;
 /// The text border of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-border: $kendo-component-header-border !default;
+$kendo-prompt-content-border: k-color(border) !default;
 
 /// The spacing between the items of the AIPrompt content expander.
 /// @group prompt
@@ -56,13 +56,13 @@ $kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-text: $kendo-component-text !default;
+$kendo-prompt-suggestion-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: $kendo-body-bg !default;
+$kendo-prompt-suggestion-bg: k-color(app-surface) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border: $kendo-component-border !default;
+$kendo-prompt-suggestion-border: k-color(border) !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-shadow: k-elevation(1) !default;

package/scss/radio/_theme.scss

@@ -9,7 +9,7 @@
     // Radio
     // Disabled state
     .k-radio:disabled + .k-radio-label {
-        color: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ));
+        color: k-color(subtle);
         opacity: 1;
         filter: none;
     }

package/scss/radio/_variables.scss

@@ -88,7 +88,7 @@ $kendo-radio-hover-border: $kendo-checkbox-border !default;
 $kendo-radio-checked-bg: unset !default;
 /// The color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-text: $kendo-color-primary !default;
+$kendo-radio-checked-text: k-color(primary) !default;
 /// The border color of the checked RadioButton.
 /// @group radio
 $kendo-radio-checked-border: $kendo-radio-checked-text !default;
@@ -183,7 +183,7 @@ $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the RadioButton ripple..
 /// @group radio
-$kendo-radio-ripple-bg: $kendo-color-primary !default;
+$kendo-radio-ripple-bg: k-color(primary) !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .2 !default;

package/scss/rating/_variables.scss

@@ -35,16 +35,16 @@ $kendo-rating-label-line-height: $kendo-line-height-lg !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: $kendo-subtle-text !default;
+$kendo-rating-icon-text: k-color(subtle) !default;
 /// The text color of the selected Rating icon.
 /// @group rating
-$kendo-rating-icon-selected-text: $kendo-color-primary-darker !default;
+$kendo-rating-icon-selected-text: k-color(primary-active) !default;
 /// The text color of the hovered Rating icon.
 /// @group rating
-$kendo-rating-icon-hover-text: $kendo-color-primary-darker !default;
+$kendo-rating-icon-hover-text: k-color(primary-active) !default;
 /// The text color of the focused Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-text: $kendo-color-primary-darker !default;
+$kendo-rating-icon-focus-text: k-color(primary-active) !default;
 
 /// The shadow of the focused Rating icon.
 /// @group rating

package/scss/scheduler/_theme.scss

@@ -10,13 +10,13 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+        background-color: color-mix(in srgb, k-color(secondary) 25%, transparent);
     }
 
     // Agenda view
     .k-scheduler-agendaview {
         .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+            background-color: color-mix(in srgb, k-color(secondary) 25%, transparent);
         }
     }
 
@@ -32,7 +32,7 @@
 
         .k-resize-handle::before {
             // TODO: $kendo-scheduler-content-area-bg
-            background-color: $kendo-color-primary-contrast;
+            background-color: k-color(on-primary);
         }
     }
 

package/scss/scheduler/_variables.scss

@@ -22,17 +22,17 @@ $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-bg: $kendo-component-bg !default;
+$kendo-scheduler-bg: k-color(surface-alt) !default;
 /// The text color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-text: $kendo-component-text !default;
+$kendo-scheduler-text: k-color(on-app-surface) !default;
 /// The border color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-border: $kendo-component-border !default;
+$kendo-scheduler-border: k-color(border) !default;
 
 /// The background color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-scheduler-toolbar-bg: k-color(surface) !default;
 /// The text color of the Scheduler ToolBar.
 /// @group scheduler
 $kendo-scheduler-toolbar-text: unset !default;
@@ -45,7 +45,7 @@ $kendo-scheduler-toolbar-gradient: none !default;
 
 /// The background color of the Scheduler footer.
 /// @group scheduler
-$kendo-scheduler-footer-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-scheduler-footer-bg: k-color(surface) !default;
 /// The text color of the Scheduler footer.
 /// @group scheduler
 $kendo-scheduler-footer-text: unset !default;
@@ -68,10 +68,10 @@ $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} -
 
 /// The background color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-bg: $kendo-color-primary !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( on-primary ), k-contrast-color( $kendo-scheduler-event-bg )) !default;
+$kendo-scheduler-event-text: k-color(on-primary) !default;
 /// The border color of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: null !default;
@@ -100,10 +100,10 @@ $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-try-tint( $kendo-color-primary, 1 )) !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: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-scheduler-event-selected-bg )) !default;
+$kendo-scheduler-event-selected-text: k-color(on-primary) !default;
 /// The border color of the selected Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-border: null !default;
@@ -137,7 +137,7 @@ $kendo-scheduler-timecolumn-width: 11rem !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-try-shade( $kendo-scheduler-bg, .5 )) !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;
@@ -151,7 +151,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-try-shade( $kendo-scheduler-bg, .5 )) !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;
@@ -181,10 +181,10 @@ $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{math.div( $k
 $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: $kendo-color-primary !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: $kendo-color-primary-contrast !default;
+$kendo-scheduler-yearview-indicator-selected-bg: k-color(on-primary) !default;
 
 /// The horizontal padding of the Scheduler Tooltip.
 /// @group scheduler
@@ -197,10 +197,10 @@ $kendo-scheduler-tooltip-padding-y: k-spacing(2) !default;
 $kendo-scheduler-tooltip-border-width: 0 !default;
 /// The background color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
+$kendo-scheduler-tooltip-bg: k-color(on-primary) !default;
 /// The text color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-text: $kendo-base-text !default;
+$kendo-scheduler-tooltip-text: k-color(on-app-surface) !default;
 /// The border color of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
@@ -271,6 +271,8 @@ $kendo-scheduler-marquee-label-inset-x: k-spacing(2) !default;
 /// @group scheduler
 $kendo-scheduler-marquee-label-inset-y: k-spacing(0.5) !default;
 
+$kendo-scheduler-header-bg: k-color(app-surface) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/scheduler/_variables.scss" with (
     $kendo-scheduler-border-width: $kendo-scheduler-border-width,
     $kendo-scheduler-font-family: $kendo-scheduler-font-family,
@@ -350,5 +352,6 @@ $kendo-scheduler-marquee-label-inset-y: k-spacing(0.5) !default;
     $kendo-scheduler-indicators-margin: $kendo-scheduler-indicators-margin,
     $kendo-scheduler-rtl-indicators-margin: $kendo-scheduler-rtl-indicators-margin,
     $kendo-scheduler-marquee-label-inset-x: $kendo-scheduler-marquee-label-inset-x,
-    $kendo-scheduler-marquee-label-inset-y: $kendo-scheduler-marquee-label-inset-y
+    $kendo-scheduler-marquee-label-inset-y: $kendo-scheduler-marquee-label-inset-y,
+    $kendo-scheduler-header-bg: $kendo-scheduler-header-bg
 );

package/scss/scrollview/_variables.scss

@@ -18,13 +18,13 @@ $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-text: $kendo-component-text !default;
+$kendo-scrollview-text: k-color(on-app-surface) !default;
 /// The background color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-bg: $kendo-component-bg !default;
+$kendo-scrollview-bg: k-color(surface-alt) !default;
 /// The border color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-border: $kendo-component-border !default;
+$kendo-scrollview-border: k-color(border) !default;
 
 /// The size of the ScrollView page button.
 /// @group scrollview
@@ -37,10 +37,10 @@ $kendo-scrollview-pagebutton-bg: $kendo-button-bg !default;
 $kendo-scrollview-pagebutton-border: $kendo-button-border !default;
 /// The primary background color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !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-color-primary !default;
+$kendo-scrollview-pagebutton-primary-border: k-color(primary) !default;
 /// The box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;

package/scss/signature/_variables.scss

@@ -20,7 +20,7 @@ $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default;
 
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
-$kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 24%, transparent), rgba( $kendo-color-info, .24 )) !default;
+$kendo-signature-line-color: color-mix(in srgb, k-color(info) 24%, transparent) !default;
 
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
 $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;

package/scss/skeleton/_variables.scss

@@ -19,7 +19,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 ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) !default;
+$kendo-skeleton-item-bg: color-mix(in srgb, k-color(on-app-surface) 20%, transparent) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;

package/scss/slider/_theme.scss

@@ -16,7 +16,7 @@
         }
 
         .k-tick::after {
-            @include fill( $bg: $kendo-body-text );
+            @include fill( $bg: k-color(on-app-surface) );
         }
 
         .k-draghandle {

package/scss/slider/_variables.scss

@@ -53,46 +53,46 @@ $kendo-slider-draghandle-active-size: 20px !default;
 
 /// The background color of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-bg: $kendo-color-primary !default;
+$kendo-slider-draghandle-bg: k-color(primary) !default;
 /// The text color of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-text: $kendo-color-primary-contrast !default;
+$kendo-slider-draghandle-text: k-color(on-primary) !default;
 /// The border color of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-border: $kendo-color-primary !default;
+$kendo-slider-draghandle-border: k-color(primary) !default;
 /// The gradient of the Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-gradient: null !default;
 
 /// The background color of the hovered Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-hover-bg: $kendo-color-primary !default;
+$kendo-slider-draghandle-hover-bg: k-color(primary) !default;
 /// The text color of the hovered Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-hover-text: null !default;
 /// The border color of the hovered Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-hover-border: $kendo-color-primary !default;
+$kendo-slider-draghandle-hover-border: k-color(primary) !default;
 /// The gradient of the hovered Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-hover-gradient: null !default;
 
 /// The background color of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-pressed-bg: $kendo-color-primary !default;
+$kendo-slider-draghandle-pressed-bg: k-color(primary) !default;
 /// The text color of the active Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-pressed-text: null !default;
 /// The border color of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-pressed-border: $kendo-color-primary !default;
+$kendo-slider-draghandle-pressed-border: k-color(primary) !default;
 /// The gradient of the active Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-pressed-gradient: null !default;
 
 /// The shadow of the focused Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-focus-shadow: 0 0 0 11px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 11px color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 /// The transition speed of the Slider.
 /// @group slider
@@ -109,10 +109,10 @@ $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !def
 
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) !default;
+$kendo-slider-track-bg: k-color(primary-subtle) !default;
 /// The background color of the Slider's track selection.
 /// @group slider
-$kendo-slider-selection-bg: $kendo-color-primary !default;
+$kendo-slider-selection-bg: k-color(primary) !default;
 /// @group slider
 /// The opacity of the disabled Slider.
 $kendo-slider-disabled-opacity: .65 !default;

package/scss/splitter/_variables.scss

@@ -18,13 +18,13 @@ $kendo-splitter-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Splitter.
 /// @group splitter
-$kendo-splitter-bg: $kendo-component-bg !default;
+$kendo-splitter-bg: k-color(surface-alt) !default;
 /// The text color of the Splitter.
 /// @group splitter
-$kendo-splitter-text: $kendo-component-text !default;
+$kendo-splitter-text: k-color(on-app-surface) !default;
 /// The border color of the Splitter.
 /// @group splitter
-$kendo-splitter-border: $kendo-component-border !default;
+$kendo-splitter-border: k-color(border) !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
@@ -47,24 +47,24 @@ $kendo-splitter-collapse-icon-padding-y: k-spacing(0.5) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-splitter-bg, 1 )) !default;
+$kendo-splitbar-bg: k-color(base-subtle) !default;
 /// The text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-text: $kendo-subtle-text !default;
+$kendo-splitbar-text: k-color(subtle) !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-try-shade( $kendo-splitbar-bg, .5 )) !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: $kendo-color-primary !default;
+$kendo-splitbar-selected-bg: k-color(primary) !default;
 /// The selected text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-selected-text: $kendo-color-primary-contrast !default;
+$kendo-splitbar-selected-text: k-color(on-primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with (
     $kendo-splitter-border-width: $kendo-splitter-border-width,

package/scss/spreadsheet/_theme.scss

@@ -9,27 +9,27 @@
     .k-spreadsheet > .k-tabstrip-wrapper {
 
         .k-tabstrip-items-wrapper {
-            color: $kendo-color-primary-contrast;
-            background-color: $kendo-color-primary;
+            color: k-color(on-primary);
+            background-color: k-color(primary);
         }
         .k-tabstrip-items .k-item {
             color: inherit;
         }
         .k-tabstrip-items .k-item.k-active::after {
-            border-color: $kendo-color-primary-contrast;
+            border-color: k-color(on-primary);
         }
     }
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        color: $kendo-color-primary-contrast;
-        background-color: $kendo-color-primary;
+        color: k-color(on-primary);
+        background-color: k-color(primary);
     }
 
     // Selection
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
-        &::after { border-color: $kendo-color-secondary; }
+        &::after { border-color: k-color(secondary); }
     }
 
 }