@progress/kendo-theme-fluent 8.0.0-dev.0 → 8.0.0-dev.10

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: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
-/// Line height of the scheduler event.
+$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
+/// 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: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the scheduler event.
+$kendo-scheduler-event-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
-/// Minumum height of the scheduler event.
+$kendo-scheduler-event-padding-y: k-spacing(0.5) !default;
+/// 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: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the scheduler cell.
+$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Height of the scheduler cell.
+$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
+/// 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: map.get( $kendo-spacing, 3 ) !default;
-/// Vertical padding of the scheduler year view.
+$kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
+/// 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: map.get( $kendo-spacing, 3 ) !default;
+$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: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the scheduler tooltip.
+$kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
+/// 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: map.get( $kendo-spacing, 3 ) !default;
-/// Font size of the month inside the scheduler tooltip.
+$kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
+/// 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: map.get( $kendo-spacing, 2 ) !default;
+$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: map.get( $kendo-spacing, 0.5 ) !default;
+$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/scrollview/_variables.scss

@@ -57,13 +57,13 @@ $kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px if($kendo-enable-co
 $kendo-scrollview-pager-offset: 0px !default;
 /// The spacing between the ScrollView pager items.
 /// @group scrollview
-$kendo-scrollview-pager-item-spacing: 20px !default;
+$kendo-scrollview-pager-item-spacing: k-spacing(5) !default;
 /// The border width of the ScrollView pager items.
 /// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
 /// The height of the ScrollView pager.
 /// @group scrollview
-$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
+$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) !default;
 
 /// The color of the ScrollView navigation arrows.
 /// @group scrollview

package/scss/signature/_variables.scss

@@ -15,16 +15,16 @@ $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 /// The horizontal paddings of the signature component.
 /// @group signature
-$kendo-signature-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x: k-spacing(1) !default;
 $kendo-signature-sm-padding-x: $kendo-signature-padding-x !default;
 $kendo-signature-md-padding-x: $kendo-signature-padding-x !default;
 $kendo-signature-lg-padding-x: $kendo-signature-padding-x !default;
 /// The vertical paddings of the signature component.
 /// @group signature
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
-$kendo-signature-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-signature-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-signature-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-signature-sm-padding-y: k-spacing(0.5) !default;
+$kendo-signature-md-padding-y: k-spacing(1) !default;
+$kendo-signature-lg-padding-y: k-spacing(1.5) !default;
 
 /// The opacity of the disabled signature component.
 /// @group signature
@@ -74,7 +74,7 @@ $kendo-signature-sizes: (
 
 /// The gap between individual action items of the signature component
 /// @group signature
-$kendo-signature-actions-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-signature-actions-gap: k-spacing(1) !default;
 
 /// The bottom-border width of the row line of the maximized signature component.
 /// @group signature

package/scss/skeleton/_variables.scss

@@ -5,11 +5,11 @@
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
 /// The border radius of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the rectangular Skeleton.
 /// @group skeleton
-$kendo-skeleton-rect-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-skeleton-rect-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the circular Skeleton.
 /// @group skeleton

package/scss/slider/_variables.scss

@@ -10,7 +10,7 @@ $kendo-slider-size: 200px !default;
 $kendo-slider-alt-size: 26px !default;
 /// The spacing of the Slider.
 /// @group slider
-$kendo-slider-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-slider-spacing: k-spacing(2) !default;
 
 /// The font family of the Slider.
 /// @group slider
@@ -27,25 +27,25 @@ $kendo-slider-text: inherit !default;
 
 /// The size of the Slider track.
 /// @group slider
-$kendo-slider-track-size: map.get( $kendo-spacing, 1 ) !default;
+$kendo-slider-track-size: k-spacing(1) !default;
 /// The border radius of the Slider track.
 /// @group slider
-$kendo-slider-track-border-radius: map.get( $kendo-spacing, 0.5 ) !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;
@@ -59,7 +59,7 @@ $kendo-slider-selection-bg: if($kendo-enable-color-system, k-color( primary ), k
 $kendo-slider-thumb-size: 16px !default;
 /// The default border width of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-border-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-slider-thumb-border-width: k-spacing(0.5) !default;
 /// The border radius of the Slider thumb.
 /// @group slider
 $kendo-slider-thumb-border-radius: 999em !default;

package/scss/splitter/_variables.scss

@@ -26,23 +26,23 @@ $kendo-splitter-border: var( --kendo-component-border, initial ) !default;
 
 /// The size of the Splitter split bar.
 /// @group splitter
-$kendo-splitter-splitbar-size: map.get( $kendo-spacing, 3 ) !default;
+$kendo-splitter-splitbar-size: k-spacing(3) !default;
 /// The length of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-length: map.get( $kendo-spacing, 5 ) !default;
+$kendo-splitter-drag-handle-length: k-spacing(5) !default;
 /// The thickness of the Splitter drag handle.
 /// @group splitter
-$kendo-splitter-drag-handle-thickness: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-splitter-drag-handle-thickness: k-spacing(0.5) !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: map.get( $kendo-spacing, 2 ) !default;
+$kendo-splitter-drag-icon-margin: k-spacing(2) !default;
 
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: null !default;
 /// The vertical padding of the collapse icon in the Splitter.
 /// @group splitter
-$kendo-splitter-collapse-icon-padding-y: map.get( $kendo-spacing, .5 ) !default;
+$kendo-splitter-collapse-icon-padding-y: k-spacing(.5) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
@@ -67,4 +67,4 @@ $kendo-splitbar-selected-text: var( --kendo-component-bg, inherit ) !default;
 
 /// The size of the Splitter static split bar.
 /// @group splitter
-$kendo-splitter-splitbar-static-size: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-splitter-splitbar-static-size: k-spacing(0.5) !default;

package/scss/spreadsheet/_layout.scss

@@ -6,12 +6,13 @@
 @use "../input/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-spreadsheet--layout() {
 
     // Spreadsheet
     .k-spreadsheet {
-        width: 800px;
+        width: 100%;
         height: 600px;
         border-width: var( --kendo-spreadsheet-border-width, #{$kendo-spreadsheet-border-width} );
         border-style: solid;
@@ -529,7 +530,7 @@
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $kendo-border-radius );
+        @include border-radius( k-border-radius(md) );
         padding: var( --kendo-padding-y, #{$kendo-padding-md-y} );
         line-height: 1;
         position: absolute;
@@ -615,7 +616,7 @@
             }
 
             .k-actions {
-                margin-block-start: map.get( $kendo-spacing, 3 );
+                margin-block-start: k-spacing(3);
             }
         }
 
@@ -644,10 +645,10 @@
         .k-reset-color { border-block-end-width: 1px; }
         .k-custom-color { border-block-start-width: 1px; }
         .k-spreadsheet-border-type-palette {
-            padding: map.get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: grid;
             grid-template-columns: repeat(5, max-content);
-            gap: map.get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
         }
     }
 
@@ -686,12 +687,12 @@
     .k-spreadsheet-format-cells {
 
         .k-spreadsheet-preview {
-            margin-block-start: map.get( $kendo-spacing, 2 );
+            margin-block-start: k-spacing(2);
             text-align: center;
         }
 
         .k-list-scroller {
-            margin-block-start: map.get( $kendo-spacing, 2 );
+            margin-block-start: k-spacing(2);
             height: 210px;
             border-width: 1px;
             border-style: solid;
@@ -721,7 +722,7 @@
         .k-page-orientation {
             position: absolute;
             inset-inline-end: 0;
-            inset-block-start: map.get( $kendo-spacing, 2 );
+            inset-block-start: k-spacing(2);
 
             .k-svg-icon {
                 width: 6em;