@progress/kendo-theme-fluent 8.0.0-dev.1 → 8.0.0-dev.11

package/scss/input/_variables.scss

@@ -492,41 +492,32 @@ $kendo-input-theme-colors: (
             text: $kendo-input-solid-text,
             bg: $kendo-input-solid-bg,
             border: $kendo-input-solid-border,
-
             hover-text: $kendo-input-solid-hover-text,
             hover-bg: $kendo-input-solid-hover-bg,
             hover-border: $kendo-input-solid-hover-border,
-
             focus-text: $kendo-input-solid-focus-text,
             focus-bg: $kendo-input-solid-focus-bg,
             focus-border: $kendo-input-solid-focus-border,
-
             hover-focus-text: $kendo-input-solid-hover-focus-text,
             hover-focus-bg: $kendo-input-solid-hover-focus-bg,
             hover-focus-border: $kendo-input-solid-hover-focus-border,
-
             disabled-text: $kendo-input-solid-disabled-text,
             disabled-bg: $kendo-input-solid-disabled-bg,
             disabled-border: $kendo-input-solid-disabled-border
-
         ),
         outline: (
             text: $kendo-input-outline-text,
             bg: $kendo-input-outline-bg,
             border: $kendo-input-outline-border,
-
             hover-text: $kendo-input-outline-hover-text,
             hover-bg: $kendo-input-outline-hover-bg,
             hover-border: $kendo-input-outline-hover-border,
-
             focus-text: $kendo-input-outline-focus-text,
             focus-bg: $kendo-input-outline-focus-bg,
             focus-border: $kendo-input-outline-focus-border,
-
             hover-focus-text: $kendo-input-outline-hover-focus-text,
             hover-focus-bg: $kendo-input-outline-hover-focus-bg,
             hover-focus-border: $kendo-input-outline-hover-focus-border,
-
             disabled-text: $kendo-input-outline-disabled-text,
             disabled-bg: $kendo-input-outline-disabled-bg,
             disabled-border: $kendo-input-outline-disabled-border
@@ -535,19 +526,15 @@ $kendo-input-theme-colors: (
             text: $kendo-input-flat-text,
             bg: $kendo-input-flat-bg,
             border: $kendo-input-flat-border,
-
             hover-text: $kendo-input-flat-hover-text,
             hover-bg: $kendo-input-flat-hover-bg,
             hover-border: $kendo-input-flat-hover-border,
-
             focus-text: $kendo-input-flat-focus-text,
             focus-bg: $kendo-input-flat-focus-bg,
             focus-border: $kendo-input-flat-focus-border,
-
             hover-focus-tex: $kendo-input-flat-hover-focus-text,
             hover-focus-bg: $kendo-input-flat-hover-focus-bg,
             hover-focus-border: $kendo-input-flat-hover-focus-border,
-
             disabled-text: $kendo-input-flat-disabled-text,
             disabled-bg: $kendo-input-flat-disabled-bg,
             disabled-border: $kendo-input-flat-disabled-border
@@ -558,19 +545,15 @@ $kendo-input-theme-colors: (
             text: $kendo-picker-solid-text,
             bg: $kendo-picker-solid-bg,
             border: $kendo-picker-solid-border,
-
             hover-text: $kendo-picker-solid-hover-text,
             hover-bg: $kendo-picker-solid-hover-bg,
             hover-border: $kendo-picker-solid-hover-border,
-
             focus-text: $kendo-picker-solid-focus-text,
             focus-bg: $kendo-picker-solid-focus-bg,
             focus-border: $kendo-picker-solid-focus-border,
-
             hover-focus-tex: $kendo-picker-solid-hover-focus-text,
             hover-focus-bg: $kendo-picker-solid-hover-focus-bg,
             hover-focus-border: $kendo-picker-solid-hover-focus-border,
-
             disabled-text: $kendo-picker-solid-disabled-text,
             disabled-bg: $kendo-picker-solid-disabled-bg,
             disabled-border: $kendo-picker-solid-disabled-border
@@ -579,19 +562,15 @@ $kendo-input-theme-colors: (
             text: $kendo-picker-outline-text,
             bg: $kendo-picker-outline-bg,
             border: $kendo-picker-outline-border,
-
             hover-text: $kendo-picker-outline-hover-text,
             hover-bg: $kendo-picker-outline-hover-bg,
             hover-border: $kendo-picker-outline-hover-border,
-
             focus-text: $kendo-picker-outline-focus-text,
             focus-bg: $kendo-picker-outline-focus-bg,
             focus-border: $kendo-picker-outline-focus-border,
-
             hover-focus-text: $kendo-picker-outline-hover-focus-text,
             hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
             hover-focus-border: $kendo-picker-outline-hover-focus-border,
-
             disabled-text: $kendo-picker-outline-disabled-text,
             disabled-bg: $kendo-picker-outline-disabled-bg,
             disabled-border: $kendo-picker-outline-disabled-border
@@ -600,19 +579,15 @@ $kendo-input-theme-colors: (
             text: $kendo-picker-flat-text,
             bg: $kendo-picker-flat-bg,
             border: $kendo-picker-flat-border,
-
             hover-text: $kendo-picker-flat-hover-text,
             hover-bg: $kendo-picker-flat-hover-bg,
             hover-border: $kendo-picker-flat-hover-border,
-
             focus-text: $kendo-picker-flat-focus-text,
             focus-bg: $kendo-picker-flat-focus-bg,
             focus-border: $kendo-picker-flat-focus-border,
-
             hover-focus-tex: $kendo-picker-flat-hover-focus-text,
             hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
             hover-focus-border: $kendo-picker-flat-hover-focus-border,
-
             disabled-text: $kendo-picker-flat-disabled-text,
             disabled-bg: $kendo-picker-flat-disabled-bg,
             disabled-border: $kendo-picker-flat-disabled-border

package/scss/listview/_layout.scss

@@ -14,6 +14,7 @@
         font-family: var( --kendo-listview-font-family, #{$kendo-listview-font-family} );
         font-size: var( --kendo-listview-font-size, #{$kendo-listview-font-size} );
         line-height: var( --kendo-listview-line-height, #{$kendo-listview-line-height} );
+        display: flex;
         flex-flow: column nowrap;
         position: relative;
         -webkit-touch-callout: none;

package/scss/loader/_layout.scss

@@ -372,7 +372,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 2001;
+        z-index: 20001;
 
         .k-loader {
             padding: 0;

package/scss/scheduler/_variables.scss

@@ -3,264 +3,264 @@
 @use "../calendar/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 
-/// Width of the border around the scheduler.
+/// The width of the border around the Scheduler.
 /// @group scheduler
 $kendo-scheduler-border-width: 1px !default;
-/// Font family of the scheduler.
+/// The font family of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the scheduler.
+/// The font size of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the scheduler.
+/// The line height of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the scheduler.
+/// The background color of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the scheduler.
+/// The text color of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the scheduler.
+/// The border color of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
 
-/// Background color of the selected row in scheduler.
+/// 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;
-/// Text color of the selected row in scheduler.
+/// The text color of the selected row in Scheduler.
 /// @group scheduler
 $kendo-scheduler-selected-text: $kendo-scheduler-text !default;
-/// Border color of the selected row in scheduler.
+/// The border color of the selected row in Scheduler.
 /// @group scheduler
 $kendo-scheduler-selected-border: $kendo-scheduler-border !default;
 
-/// Background color of the scheduler toolbar.
+/// The background color of the Scheduler ToolBar.
 /// @group scheduler
 $kendo-scheduler-toolbar-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
-/// Text color of the scheduler toolbar.
+/// The text color of the Scheduler ToolBar.
 /// @group scheduler
 $kendo-scheduler-toolbar-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
-/// Border color of the scheduler toolbar.
+/// The border color of the Scheduler ToolBar.
 /// @group scheduler
 $kendo-scheduler-toolbar-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
-/// Gradient of the scheduler toolbar.
+/// The gradient of the Scheduler ToolBar.
 /// @group scheduler
 $kendo-scheduler-toolbar-gradient: null !default; // $kendo-toolbar-gradient
 
-/// Background color of the scheduler footer.
+/// The background color of the Scheduler footer.
 /// @group scheduler
 $kendo-scheduler-footer-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
-/// Text color of the scheduler footer.
+/// The text color of the Scheduler footer.
 /// @group scheduler
 $kendo-scheduler-footer-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
-/// Border color of the scheduler footer.
+/// The border color of the Scheduler footer.
 /// @group scheduler
 $kendo-scheduler-footer-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
-/// Gradient of the scheduler footer.
+/// The gradient of the Scheduler footer.
 /// @group scheduler
 $kendo-scheduler-footer-gradient: null !default; // $kendo-toolbar-gradient
 
-/// Border radius of the scheduler event.
+/// The border radius of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
-/// Line height of the scheduler event.
+/// The line height of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-line-height: $kendo-scheduler-line-height !default;
-/// Horizontal padding of the scheduler event.
+/// The horizontal padding of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-padding-x: k-spacing(2) !default;
-/// Vertical padding of the scheduler event.
+/// The vertical padding of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-padding-y: k-spacing(0.5) !default;
-/// Minumum height of the scheduler event.
+/// The minimum height of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) !default;
 
-/// Background color of the scheduler event.
+/// 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;
-/// Text color of the scheduler event.
+/// 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;
-/// Border color of the scheduler event.
+/// The border color of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
-/// Gradient of the scheduler event.
+/// The gradient of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-gradient: null !default;
-/// Shadow of the scheduler event.
+/// The shadow of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-shadow: null !default;
 
-/// Background color of the hovered scheduler event.
+/// The background color of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-bg: var( --kendo-hover-bg, inherit ) !default;
-/// Text color of the hovered scheduler event.
+/// The text color of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-text: var( --kendo-hover-text, inherit ) !default;
-/// Boeswe color of the hovered scheduler event.
+/// The border color of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-border: var( --kendo-hover-border, inherit ) !default;
-/// Gradient of the hovered scheduler event.
+/// The gradient of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-gradient: null !default;
-/// Shadow of the hovered scheduler event.
+/// The shadow of the hovered Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-hover-shadow: null !default;
 
-/// Background color of the selected scheduler event.
+/// 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;
-/// Text color of the selected scheduler event.
+/// The text color of the selected Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-text: $kendo-scheduler-event-text !default;
-/// Border color of the selected scheduler event.
+/// The border color of the selected Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-border: $kendo-scheduler-event-bg !default;
-/// Gradient of the selected scheduler event.
+/// The gradient of the selected Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-gradient: null !default;
-/// Shadow of the selected scheduler event.
+/// The shadow of the selected Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-shadow: none !default;
 
-/// Shadow of the ongoing scheduler event.
+/// The shadow of the ongoing Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-/// Horizontal padding of the scheduler cell.
+/// The horizontal padding of the Scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-padding-x: k-spacing(2) !default;
-/// Vertical padding of the scheduler cell.
+/// The vertical padding of the Scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-padding-y: k-spacing(2) !default;
-/// Height of the scheduler cell.
+/// The height of the Scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
-/// Width of the scheduler date column.
+/// The width of the Scheduler date column.
 /// @group scheduler
 $kendo-scheduler-datecolumn-width: 12em !default;
-/// Width of the scheduler time column.
+/// The width of the Scheduler time column.
 /// @group scheduler
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-/// Background color of the non-working hours in the scheduler.
+/// 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;
-/// Text color of the non-working hours in the scheduler.
+/// The text color of the non-working hours in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
 
-/// Background color of the weekends in the scheduler.
+/// The background color of the weekends in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-weekend-bg: null !default;
-/// Text color of the weekends in the scheduler.
+/// The text color of the weekends in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-weekend-text: null !default;
 
-/// Background color of the other months in the scheduler.
+/// 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;
-/// Text color of the other months in the scheduler.
+/// The text color of the preceding/subsequent month cells in the Calendar.
 /// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
 
-/// Horizontal padding of the scheduler year view.
+/// The horizontal padding of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
-/// Vertical padding of the scheduler year view.
+/// The vertical padding of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
-/// Spacing between the calendars in the scheduler year view.
+/// The spacing between the calendars of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-calendar-gap: k-spacing(3) !default;
 
-/// Days with events indicator size in the scheduler year view.
+/// The days with events indicator size of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-indicator-size: 3px !default;
-/// Top position of the days with events indicator in the scheduler year view.
+/// The top position of the days with events indicator of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) ) !default;
-/// Left position of the days with events indicator in the scheduler year view.
+/// The left position of the days with events indicator of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) ) !default;
-/// Border radius of the days with events indicator in the scheduler year view.
+/// The border radius of the days with events indicator of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
-/// Background color of the days with events indicator in the scheduler year view.
+/// 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;
-/// Background color of the selected days with events indicator in the scheduler year view.
+/// 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;
 
-/// Horizontal padding of the scheduler tooltip.
+/// The horizontal padding of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
-/// Vertical padding of the scheduler tooltip.
+/// The vertical padding of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
-/// Width of the border of the scheduler tooltip.
+/// The width of the border of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-border-width: 0 !default;
-/// Background color of the scheduler tooltip.
+/// 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;
-/// Text color of the scheduler tooltip.
+/// 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;
-/// Border color of the scheduler tooltip.
+/// The border color of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
-/// Shadow of the scheduler tooltip.
+/// The shadow of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-shadow: k-elevation(5) !default;
 
-/// Vertical spacing of the scheduler tooltip title.
+/// The vertical margin of the Scheduler Tooltip title.
 /// @group scheduler
 $kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
-/// Font size of the month inside the scheduler tooltip.
+/// The font size of the month inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// Font size of the day inside the scheduler tooltip.
+/// The font size of the day inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-day-font-size: calc( $kendo-scheduler-tooltip-month-font-size * 2 ) !default;
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;
 
-/// Max height of the events inside the scheduler tooltip.
+/// The max height of the events inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
-/// Spacing between the events inside the scheduler tooltip.
+/// The spacing between the events inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-events-gap: k-spacing(2) !default;
 
-/// Horizontal padding of the events inside the scheduler tooltip.
+/// The horizontal padding of the events inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-event-padding-x !default;
-/// Vertical padding of the events inside the scheduler tooltip.
+/// The vertical padding of the events inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-event-padding-y !default;
-/// Border radius of the events inside the scheduler tooltip.
+/// The border radius of the events inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-event-border-radius !default;
-/// Spacing between the events items inside the scheduler tooltip.
+/// The spacing between the events items inside the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-event-gap: k-spacing(0.5) !default;
 
-/// Color of the scheduler tooltip callout.
+/// The color of the Scheduler Tooltip callout.
 /// @group scheduler
 $kendo-scheduler-tooltip-callout-color: $kendo-scheduler-tooltip-bg !default;
 
-/// Width of the scheduler resize handle.
+/// The width of the Scheduler resize handle.
 /// @group scheduler
 $kendo-scheduler-resize-handle-width: 2em !default;
 
-/// Height of the scheduler more events button.
+/// The height of the Scheduler more events button.
 /// @group scheduler
 $kendo-scheduler-more-btn-height: 13px !default;
 
-/// Color of the scheduler marquee.
+/// 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;

package/scss/slider/_variables.scss

@@ -33,19 +33,19 @@ $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, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !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, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-hover-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !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, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-focus-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the focused Slider track.
 /// @group slider
 $kendo-slider-track-focus-border: inherit !default;

package/scss/spreadsheet/_layout.scss

@@ -12,7 +12,7 @@
 
     // Spreadsheet
     .k-spreadsheet {
-        width: 800px;
+        width: 100%;
         height: 600px;
         border-width: var( --kendo-spreadsheet-border-width, #{$kendo-spreadsheet-border-width} );
         border-style: solid;