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

package/scss/pivotgrid/_variables.scss

@@ -50,41 +50,41 @@ $kendo-pivotgrid-cell-border-width: 1px !default;
 
 /// The background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-bg: $kendo-component-bg !default;
+$kendo-pivotgrid-bg: k-color(app-surface) !default;
 /// The text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-text: $kendo-component-text !default;
+$kendo-pivotgrid-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-border: $kendo-component-border !default;
+$kendo-pivotgrid-border: k-color(border) !default;
 
 /// The alt border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
+$kendo-pivotgrid-alt-border: k-color(border-alt) !default;
 
 /// The background color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
+$kendo-pivotgrid-headers-bg: k-color(surface) !default;
 /// The text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-headers-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
+$kendo-pivotgrid-headers-border: k-color(border) !default;
 
 /// The background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
+$kendo-pivotgrid-total-bg: k-color(base-subtle) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-border: $kendo-component-header-border !default;
+$kendo-pivotgrid-total-border: k-color(border) !default;
 
 /// The hover background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
+$kendo-pivotgrid-hover-bg: k-color(base-subtle-hover) !default;
 /// The hover text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-hover-text: null !default;
@@ -94,7 +94,7 @@ $kendo-pivotgrid-hover-border: null !default;
 
 /// The selected background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
+$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 /// The selected text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-selected-text: null !default;
@@ -153,20 +153,20 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
 
 /// The background color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-bg: $kendo-component-bg !default;
+$kendo-pivotgrid-configurator-bg: k-color(app-surface) !default;
 /// The text color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-text: $kendo-component-text !default;
+$kendo-pivotgrid-configurator-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-border: $kendo-component-border !default;
+$kendo-pivotgrid-configurator-border: k-color(border) !default;
 
 /// The background color of the PivotGrid configurator header.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-header-bg: null !default;
 /// The text color of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-configurator-header-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid configurator header.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-header-border: null !default;
@@ -219,20 +219,20 @@ $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 /// The background color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;
+$kendo-pivotgrid-calculated-field-bg: k-color(app-surface) !default;
 /// The text color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-text: $kendo-component-text !default;
+$kendo-pivotgrid-calculated-field-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border: $kendo-component-border !default;
+$kendo-pivotgrid-calculated-field-border: k-color(border) !default;
 
 /// The background color of the PivotGrid calculated field header.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-header-bg: null !default;
 /// The text color of the PivotGrid calculated field header.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-calculated-field-header-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid calculated field header.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-header-border: null !default;
@@ -250,8 +250,8 @@ $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;
 $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
 $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 
-$kendo-pivotgrid-container-bg: $kendo-component-header-bg !default;
-$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-header-bg, .5 )) !default;
+$kendo-pivotgrid-container-bg: k-color(surface) !default;
+$kendo-pivotgrid-row-headers-bg: k-color(base-subtle) !default;
 
 $kendo-pivotgrid-button-bg: null !default;
 $kendo-pivotgrid-button-text: null !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(app-surface) !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( base-subtle ), #e9ecef) !default;
+$kendo-progressbar-bg: k-color(base-subtle) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( #e9ecef )) !default;
+$kendo-progressbar-text: k-color(base-on-subtle) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: inherit !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
 
 /// The progress background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-bg: $kendo-selected-bg !default;
+$kendo-progressbar-value-bg: k-color(primary) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: $kendo-selected-text !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-body-bg !default;
+$kendo-progressbar-chunk-border: k-color(app-surface) !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(app-surface) !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(app-surface) !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(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/rating/_variables.scss

@@ -35,16 +35,16 @@ $kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: if($kendo-enable-color-system, k-color( subtle ) , $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-selected-bg !default;
+$kendo-rating-icon-selected-text: k-color(primary) !default;
 /// The text color of the hovered Rating icon.
 /// @group rating
-$kendo-rating-icon-hover-text: $kendo-selected-bg !default;
+$kendo-rating-icon-hover-text: k-color(primary) !default;
 /// The text color of the focused Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-text: $kendo-selected-bg !default;
+$kendo-rating-icon-focus-text: k-color(primary) !default;
 
 /// The shadow of the focused Rating icon.
 /// @group rating

package/scss/scheduler/_variables.scss

@@ -22,13 +22,13 @@ $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(app-surface) !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
@@ -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: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
+$kendo-scheduler-event-bg: k-color(primary) !default;
 /// The text color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: $kendo-selected-text !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: $kendo-selected-bg !default;
+$kendo-scheduler-event-selected-bg: k-color(primary) !default;
 /// The text color of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-text: $kendo-selected-text !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;
@@ -136,7 +136,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( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+$kendo-scheduler-nonwork-bg: k-color(base-subtle) !default;
 /// The text color of the non-working hours in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
@@ -150,7 +150,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( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+$kendo-scheduler-othermonth-bg: k-color(base-subtle) !default;
 /// The text color of the preceding/subsequent month cells in the Calendar.
 /// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
@@ -180,10 +180,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
@@ -196,10 +196,10 @@ $kendo-scheduler-tooltip-padding-y: k-spacing(3) !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;
@@ -270,6 +270,8 @@ $kendo-scheduler-marquee-label-inset-x: k-spacing(2) !default;
 /// @group scheduler
 $kendo-scheduler-marquee-label-inset-y: k-spacing(1) !default;
 
+$kendo-scheduler-header-bg: k-color(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,
@@ -349,5 +351,6 @@ $kendo-scheduler-marquee-label-inset-y: k-spacing(1) !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(app-surface) !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

@@ -22,7 +22,7 @@ $kendo-signature-lg-padding-y: k-spacing(2) !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/_variables.scss

@@ -54,46 +54,49 @@ $kendo-slider-draghandle-active-size: null !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: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) !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: if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% )) !default;
+$kendo-slider-draghandle-hover-bg: k-color(primary-hover) !default;
 /// The text color of the hovered Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-hover-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) !default;
+$kendo-slider-draghandle-hover-text: k-color(on-primary) !default;
 /// The border color of the hovered Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% )) !default;
+$kendo-slider-draghandle-hover-border: k-color(primary-hover) !default;
 /// The gradient of the hovered Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-hover-gradient: null !default;
+/// The shadow of the hovered Slider drag handle.
+/// @group slider
+$kendo-slider-draghandle-hover-shadow: null !default;
 
 /// The background color of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% )) !default;
+$kendo-slider-draghandle-pressed-bg: k-color(primary-active) !default;
 /// The text color of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-pressed-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) !default;
+$kendo-slider-draghandle-pressed-text: k-color(on-primary) !default;
 /// The border color of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% )) !default;
+$kendo-slider-draghandle-pressed-border: k-color(primary-active) !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 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), rgba( $kendo-color-primary, .5 )) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 3px color-mix(in srgb, k-color(primary) 50%, transparent) !default;
 
 /// The transition speed of the Slider.
 /// @group slider
@@ -110,10 +113,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( base-emphasis ), #e9ecef) !default;
+$kendo-slider-track-bg: k-color(base-emphasis) !default;
 /// The background color of the Slider's track selection.
 /// @group slider
-$kendo-slider-selection-bg: $kendo-selected-bg !default;
+$kendo-slider-selection-bg: k-color(primary) !default;
 /// @group slider
 /// The opacity of the disabled Slider.
 $kendo-slider-disabled-opacity: null !default;
@@ -125,6 +128,9 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4
 /// @group slider
 $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
 
+/// The background color of the Slider tick marker.
+/// @group slider
+$kendo-slider-tick-marker-bg: null !default;
 
 @forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with (
     $kendo-slider-size: $kendo-slider-size,
@@ -150,6 +156,7 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uA
     $kendo-slider-draghandle-hover-text: $kendo-slider-draghandle-hover-text,
     $kendo-slider-draghandle-hover-border: $kendo-slider-draghandle-hover-border,
     $kendo-slider-draghandle-hover-gradient: $kendo-slider-draghandle-hover-gradient,
+    $kendo-slider-draghandle-hover-shadow: $kendo-slider-draghandle-hover-shadow,
     $kendo-slider-draghandle-pressed-bg: $kendo-slider-draghandle-pressed-bg,
     $kendo-slider-draghandle-pressed-text: $kendo-slider-draghandle-pressed-text,
     $kendo-slider-draghandle-pressed-border: $kendo-slider-draghandle-pressed-border,
@@ -163,5 +170,6 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uA
     $kendo-slider-selection-bg: $kendo-slider-selection-bg,
     $kendo-slider-disabled-opacity: $kendo-slider-disabled-opacity,
     $kendo-slider-tick-horizontal-image: $kendo-slider-tick-horizontal-image,
-    $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image
+    $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image,
+    $kendo-slider-tick-marker-bg: $kendo-slider-tick-marker-bg
 );

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(app-surface) !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 splitbar.
 /// @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: $kendo-base-bg !default;
+$kendo-splitbar-bg: k-color(surface) !default;
 /// The text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-text: $kendo-base-text !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-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default;
+$kendo-splitbar-hover-bg: k-color(base-subtle-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-selected-bg !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-selected-text !default;
+$kendo-splitbar-selected-text: k-color(on-primary) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with (