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

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;
@@ -64,14 +64,14 @@ $kendo-scheduler-event-min-height: 25px !default;
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 /// The line height of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{k-spacing(0.5)}) ) !default;
+$kendo-scheduler-event-line-height: calc( $kendo-scheduler-event-min-height - k-spacing(1) )!default;
 
 /// 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;
@@ -120,10 +120,10 @@ $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
 /// The horizontal padding of the Scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
+$kendo-scheduler-cell-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
+$kendo-scheduler-cell-padding-y: k-spacing(3) !default;
 /// The height of the Scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-height: calc( var( --kendo-line-height, normal) * 1rem) !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-base) !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) !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/_layout.scss

@@ -22,6 +22,7 @@
                 top: 50%;
                 left: 50%;
                 margin: $tick-offset 0 0 $tick-offset;
+                border-radius: 50%;
             }
         }
 
@@ -31,6 +32,11 @@
     }
 
     .k-slider-horizontal {
+
+        .k-slider-track-wrap {
+            padding-inline: $kendo-slider-tick-size;
+        }
+
         .k-tick {
             &.k-first::after {
                 left: 0;
@@ -43,6 +49,11 @@
     }
 
     .k-slider-vertical {
+
+        .k-slider-track-wrap {
+            padding-block: $kendo-slider-tick-size;
+        }
+
         .k-tick {
             &.k-last::after {
                 top: 0;

package/scss/slider/_theme.scss

@@ -10,21 +10,12 @@
     .k-slider {
         cursor: pointer;
 
-        .k-slider-track,
-        .k-slider-selection {
-            border-radius: 0;
-        }
-
         .k-tick::after {
-            @include fill( $bg: $kendo-body-text );
+            @include fill( $bg: $kendo-slider-tick-marker-bg );
         }
 
         .k-draghandle {
             box-sizing: border-box;
-
-            &:focus {
-                @include box-shadow( $kendo-slider-draghandle-focus-shadow );
-            }
         }
 
         &.k-disabled {

package/scss/slider/_variables.scss

@@ -24,10 +24,10 @@ $kendo-slider-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The offset of the Slider Buttons.
 /// @group slider
-$kendo-slider-button-offset: 22px !default;
+$kendo-slider-button-offset: k-spacing(5.5) !default;
 /// The size of the Slider Buttons.
 /// @group slider
-$kendo-slider-button-size: 36px !default;
+$kendo-slider-button-size: k-spacing(9) !default;
 /// The spacing of the Slider Buttons.
 /// @group slider
 $kendo-slider-button-spacing: ($kendo-slider-button-size + $kendo-slider-button-offset) !default;
@@ -37,10 +37,10 @@ $kendo-slider-button-focus-shadow: null !default;
 
 /// The thickness of the Slider track.
 /// @group slider
-$kendo-slider-track-thickness: 2px !default;
+$kendo-slider-track-thickness: k-spacing(1) !default;
 /// The size of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-size: 14px !default;
+$kendo-slider-draghandle-size: k-spacing(5) !default;
 /// The border width of the Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-border-width: 0px !default;
@@ -49,50 +49,53 @@ $kendo-slider-draghandle-border-width: 0px !default;
 $kendo-slider-draghandle-active-scale: 1 !default;
 /// The size of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-active-size: 20px !default;
+$kendo-slider-draghandle-active-size: k-spacing(5) !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 shadow of the hovered Slider drag handle.
+/// @group slider
+$kendo-slider-draghandle-hover-shadow: 0 0 0 k-spacing(2.5) color-mix(in srgb, k-color(primary) 8%, transparent) !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 k-spacing(2.5) color-mix(in srgb, k-color(primary) 20%, transparent) !default;
 
 /// The transition speed of the Slider.
 /// @group slider
@@ -109,10 +112,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;
@@ -124,6 +127,10 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5
 /// @group slider
 $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" !default;
 
+/// The background color of the Slider tick marker.
+/// @group slider
+$kendo-slider-tick-marker-bg: k-color(primary-emphasis) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with (
     $kendo-slider-size: $kendo-slider-size,
     $kendo-slider-tick-size: $kendo-slider-tick-size,
@@ -148,6 +155,7 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BA
     $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,
@@ -161,5 +169,6 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BA
     $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/split-button/_layout.scss

@@ -1,6 +1,18 @@
+@use "sass:map";
+@use "../button/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *;
 
 
 @mixin kendo-split-button--layout() {
     @include kendo-split-button--layout-base();
+
+    @each $size, $size-props in $kendo-button-sizes {
+        $_padding-x: map.get( $size-props, padding-x );
+
+        .k-split-button {
+            .k-button-#{$size}:not(.k-split-button-arrow) {
+                padding-inline: calc( $_padding-x / 2) ;
+            }
+        }
+    }
 }

package/scss/split-button/_variables.scss

@@ -9,16 +9,16 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// The horizontal padding of the arrow Button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-arrow-padding-x: calc( k-spacing(5.5) / 2 ) !default;
 /// The horizontal padding of the small arrow Button.
 /// @group split-button
-$kendo-split-button-sm-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-sm-arrow-padding-x: calc( k-spacing(4.5) / 2 ) !default;
 /// The horizontal padding of the medium arrow Button.
 /// @group split-button
-$kendo-split-button-md-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-md-arrow-padding-x: calc( k-spacing(5.5) / 2 ) !default;
 /// The horizontal padding of the large arrow Button.
 /// @group split-button
-$kendo-split-button-lg-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-lg-arrow-padding-x: calc( k-spacing(6.5) / 2 ) !default;
 
 /// The vertical padding of the arrow Button.
 /// @group split-button

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) !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
@@ -37,7 +37,7 @@ $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: k-spacing(2) !default;
+$kendo-splitter-drag-icon-margin: calc( #{k-spacing(3.5)} / 2 ) !default;
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: null !default;
@@ -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-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-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/_layout.scss

@@ -1,4 +1,3 @@
-@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/spreadsheet/_layout.scss" as *;
 
 
@@ -6,19 +5,6 @@
 
     @include kendo-spreadsheet--layout-base();
 
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {
-        padding: k-spacing(1);
-
-        .k-button {
-            border-radius: 50%;
-            color: inherit;
-            background: none;
-            box-shadow: none;
-        }
-
-    }
-
     // Spreadsheet tabstrip
     .k-spreadsheet-tabstrip {
         padding-top: 0;
@@ -27,25 +13,4 @@
             border-width: 0;
         }
     }
-
-    // Spreadsheet footer
-    .k-spreadsheet-sheets-bar {
-
-        .k-spreadsheet-sheets-bar-add {
-            margin: k-spacing(1);
-            border-radius: 50%;
-            color: inherit;
-            background: none;
-            box-shadow: none;
-        }
-
-    }
-
-    // Selection
-    .k-spreadsheet .k-selection-full,
-    .k-spreadsheet .k-selection-partial {
-        &::after {
-            display: block;
-        }
-    }
 }

package/scss/spreadsheet/_theme.scss

@@ -5,31 +5,9 @@
 @mixin kendo-spreadsheet--theme() {
     @include kendo-spreadsheet--theme-base();
 
-    // Spreadsheet header
-    .k-spreadsheet > .k-tabstrip-wrapper {
-
-        .k-tabstrip-items-wrapper {
-            color: $kendo-color-primary-contrast;
-            background-color: $kendo-color-primary;
-        }
-        .k-tabstrip-items .k-item {
-            color: inherit;
-        }
-        .k-tabstrip-items .k-item.k-active::after {
-            border-color: $kendo-color-primary-contrast;
-        }
-    }
-
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {
-        color: $kendo-color-primary-contrast;
-        background-color: $kendo-color-primary;
-    }
-
-    // Selection
-    .k-spreadsheet .k-selection-full,
-    .k-spreadsheet .k-selection-partial {
-        &::after { border-color: $kendo-color-secondary; }
+    .k-spreadsheet-action-bar,
+    .k-spreadsheet-view {
+        background-color: k-color(surface-alt);
     }
 
 }