@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/scheduler/_variables.scss

@@ -5,255 +5,327 @@
 
 /// The width of the border around the Scheduler.
 /// @group scheduler
-$kendo-scheduler-border-width: 1px !default;
+$kendo-scheduler-border-width: var( --kendo-scheduler-border-width, 1px ) !default;
 /// The font family of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-scheduler-font-family: var( --kendo-scheduler-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-scheduler-font-size: var( --kendo-scheduler-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-scheduler-line-height: var( --kendo-scheduler-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The background color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-bg: k-color(surface-alt) !default;
+$kendo-scheduler-bg: var( --kendo-scheduler-bg, k-color(surface-alt) ) !default;
 /// The text color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-text: k-color(on-app-surface) !default;
+$kendo-scheduler-text: var( --kendo-scheduler-text, k-color(on-app-surface) ) !default;
 /// The border color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-scheduler-border: var( --kendo-scheduler-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The background color of the selected row in Scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-bg: k-color(primary-subtle) !default;
+$kendo-scheduler-selected-bg: var( --kendo-scheduler-selected-bg, k-color(primary-subtle) ) !default;
 /// The text color of the selected row in Scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-text: $kendo-scheduler-text !default;
+$kendo-scheduler-selected-text: var( --kendo-scheduler-selected-text, $kendo-scheduler-text ) !default;
 /// The border color of the selected row in Scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-border: $kendo-scheduler-border !default;
+$kendo-scheduler-selected-border: var( --kendo-scheduler-selected-border, $kendo-scheduler-border ) !default;
 
 /// The background color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
+$kendo-scheduler-toolbar-bg: var( --kendo-scheduler-toolbar-bg, var( --kendo-toolbar-bg, $kendo-toolbar-bg ) ) !default;
 /// The text color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
+$kendo-scheduler-toolbar-text: var( --kendo-scheduler-toolbar-text, var( --kendo-toolbar-text, $kendo-toolbar-text ) ) !default;
 /// The border color of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
+$kendo-scheduler-toolbar-border: var( --kendo-scheduler-toolbar-border, var( --kendo-toolbar-border, $kendo-toolbar-border ) ) !default;
 /// The gradient of the Scheduler ToolBar.
 /// @group scheduler
-$kendo-scheduler-toolbar-gradient: null !default; // $kendo-toolbar-gradient
+$kendo-scheduler-toolbar-gradient: var( --kendo-scheduler-toolbar-gradient, null ) !default; // $kendo-toolbar-gradient
 
 /// The background color of the Scheduler footer.
 /// @group scheduler
-$kendo-scheduler-footer-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
+$kendo-scheduler-footer-bg: var( --kendo-scheduler-footer-bg, var( --kendo-toolbar-bg, $kendo-toolbar-bg ) ) !default;
 /// The text color of the Scheduler footer.
 /// @group scheduler
-$kendo-scheduler-footer-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
+$kendo-scheduler-footer-text: var( --kendo-scheduler-footer-text, var( --kendo-toolbar-text, $kendo-toolbar-text ) ) !default;
 /// The border color of the Scheduler footer.
 /// @group scheduler
-$kendo-scheduler-footer-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
+$kendo-scheduler-footer-border: var( --kendo-scheduler-footer-border, var( --kendo-toolbar-border, $kendo-toolbar-border ) ) !default;
 /// The gradient of the Scheduler footer.
 /// @group scheduler
-$kendo-scheduler-footer-gradient: null !default; // $kendo-toolbar-gradient
+$kendo-scheduler-footer-gradient: var( --kendo-scheduler-footer-gradient, null ) !default; // $kendo-toolbar-gradient
 
 /// The border radius of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
+$kendo-scheduler-event-border-radius: var( --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;
+$kendo-scheduler-event-line-height: var( --kendo-scheduler-event-line-height, $kendo-scheduler-line-height ) !default;
 /// The horizontal padding of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-x: k-spacing(2) !default;
+$kendo-scheduler-event-padding-x: var( --kendo-scheduler-event-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-padding-y: k-spacing(0.5) !default;
+$kendo-scheduler-event-padding-y: var( --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;
+$kendo-scheduler-event-min-height: var( --kendo-scheduler-event-min-height, calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) ) !default;
 
 /// The background color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-bg: k-color(primary) !default;
+$kendo-scheduler-event-bg: var( --kendo-scheduler-event-bg, k-color(primary) ) !default;
 /// The text color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: k-color(app-surface) !default;
+$kendo-scheduler-event-text: var( --kendo-scheduler-event-text, k-color(app-surface) ) !default;
 /// The border color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
+$kendo-scheduler-event-border: var( --kendo-scheduler-event-border, $kendo-scheduler-event-bg ) !default;
 /// The gradient of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-gradient: null !default;
+$kendo-scheduler-event-gradient: var( --kendo-scheduler-event-gradient, null ) !default;
 /// The shadow of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-shadow: null !default;
+$kendo-scheduler-event-shadow: var( --kendo-scheduler-event-shadow, null ) !default;
 
 /// The background color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-bg: k-color(base-hover) !default;
+$kendo-scheduler-event-hover-bg: var( --kendo-scheduler-event-hover-bg, k-color(base-hover) ) !default;
 /// The text color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-text: k-color(on-base) !default;
+$kendo-scheduler-event-hover-text: var( --kendo-scheduler-event-hover-text, k-color(on-base) ) !default;
 /// The border color of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
+$kendo-scheduler-event-hover-border: var( --kendo-scheduler-event-hover-border, color-mix(in srgb, k-color(border) 10%, transparent) ) !default;
 /// The gradient of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-gradient: null !default;
+$kendo-scheduler-event-hover-gradient: var( --kendo-scheduler-event-hover-gradient, null ) !default;
 /// The shadow of the hovered Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-hover-shadow: null !default;
+$kendo-scheduler-event-hover-shadow: var( --kendo-scheduler-event-hover-shadow, null ) !default;
 
 /// The background color of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-bg: k-color(primary-active) !default;
+$kendo-scheduler-event-selected-bg: var( --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: $kendo-scheduler-event-text !default;
+$kendo-scheduler-event-selected-text: var( --kendo-scheduler-event-selected-text, $kendo-scheduler-event-text ) !default;
 /// The border color of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-border: $kendo-scheduler-event-bg !default;
+$kendo-scheduler-event-selected-border: var( --kendo-scheduler-event-selected-border, $kendo-scheduler-event-bg ) !default;
 /// The gradient of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-gradient: null !default;
+$kendo-scheduler-event-selected-gradient: var( --kendo-scheduler-event-selected-gradient, null ) !default;
 /// The shadow of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-shadow: none !default;
+$kendo-scheduler-event-selected-shadow: var( --kendo-scheduler-event-selected-shadow, none ) !default;
 
 /// The shadow of the ongoing Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+$kendo-scheduler-event-ongoing-shadow: var( --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: var( --kendo-scheduler-cell-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the Scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
+$kendo-scheduler-cell-padding-y: var( --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;
+$kendo-scheduler-cell-height: var( --kendo-scheduler-cell-height, $kendo-line-height-em ) !default;
 /// The width of the Scheduler date column.
 /// @group scheduler
-$kendo-scheduler-datecolumn-width: 12em !default;
+$kendo-scheduler-datecolumn-width: var( --kendo-scheduler-datecolumn-width, 12em ) !default;
 /// The width of the Scheduler time column.
 /// @group scheduler
-$kendo-scheduler-timecolumn-width: 11em !default;
+$kendo-scheduler-timecolumn-width: var( --kendo-scheduler-timecolumn-width, 11em ) !default;
 
 /// The background color of the non-working hours in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-nonwork-bg: k-color(surface) !default;
+$kendo-scheduler-nonwork-bg: var( --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;
+$kendo-scheduler-nonwork-text: var( --kendo-scheduler-nonwork-text, null ) !default;
 
 /// The background color of the preceding/subsequent month cells in the Calendar.
 /// @group scheduler
-$kendo-scheduler-othermonth-bg: k-color(surface) !default;
+$kendo-scheduler-othermonth-bg: var( --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;
+$kendo-scheduler-othermonth-text: var( --kendo-scheduler-othermonth-text, null ) !default;
 
 /// The horizontal padding of the year view in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
+$kendo-scheduler-yearview-padding-x: var( --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;
+$kendo-scheduler-yearview-padding-y: var( --kendo-scheduler-yearview-padding-y, $kendo-scheduler-yearview-padding-x ) !default;
 
 /// The spacing between the calendars of the year view in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-yearview-calendar-gap: k-spacing(3) !default;
+$kendo-scheduler-yearview-calendar-gap: var( --kendo-scheduler-yearview-calendar-gap, k-spacing(3) ) !default;
 
 /// The days with events indicator size of the year view in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-size: 3px !default;
+$kendo-scheduler-yearview-indicator-size: var( --kendo-scheduler-yearview-indicator-size, 3px ) !default;
 /// 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;
+$kendo-scheduler-yearview-indicator-calc-offset-top: var( --kendo-scheduler-yearview-indicator-calc-offset-top, calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) ) ) !default;
 /// 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;
+$kendo-scheduler-yearview-indicator-calc-offset-left: var( --kendo-scheduler-yearview-indicator-calc-offset-left, calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) ) ) !default;
 /// 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;
+$kendo-scheduler-yearview-indicator-border-radius: var( --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: k-color(primary) !default;
+$kendo-scheduler-yearview-indicator-bg: var( --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: k-color(app-surface) !default;
+$kendo-scheduler-yearview-indicator-selected-bg: var( --kendo-scheduler-yearview-indicator-selected-bg, k-color(app-surface) ) !default;
 
 /// The horizontal padding of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
+$kendo-scheduler-tooltip-padding-x: var( --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;
+$kendo-scheduler-tooltip-padding-y: var( --kendo-scheduler-tooltip-padding-y, $kendo-scheduler-tooltip-padding-x ) !default;
 /// The width of the border of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-border-width: 0 !default;
+$kendo-scheduler-tooltip-border-width: var( --kendo-scheduler-tooltip-border-width, 0 ) !default;
 /// The background color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-bg: k-color(app-surface) !default;
+$kendo-scheduler-tooltip-bg: var( --kendo-scheduler-tooltip-bg, k-color(app-surface) ) !default;
 /// The text color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-text: k-color(subtle) !default;
+$kendo-scheduler-tooltip-text: var( --kendo-scheduler-tooltip-text, k-color(subtle) ) !default;
 /// The border color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-border: null !default;
+$kendo-scheduler-tooltip-border: var( --kendo-scheduler-tooltip-border, null ) !default;
 /// The shadow of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-shadow: k-elevation(5) !default;
+$kendo-scheduler-tooltip-shadow: var( --kendo-scheduler-tooltip-shadow, k-elevation(5) ) !default;
 
 /// The vertical margin of the Scheduler Tooltip title.
 /// @group scheduler
-$kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
+$kendo-scheduler-tooltip-title-margin-y: var( --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;
+$kendo-scheduler-tooltip-month-font-size: var( --kendo-scheduler-tooltip-month-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The font size of the day inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;
+$kendo-scheduler-tooltip-day-font-size: var( --kendo-scheduler-tooltip-day-font-size, calc( var( --kendo-font-size-sm, .75rem ) * 2 ) ) !default;
 
 /// The max height of the events inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-events-max-height: 250px !default;
+$kendo-scheduler-tooltip-events-max-height: var( --kendo-scheduler-tooltip-events-max-height, 250px ) !default;
 /// The spacing between the events inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-events-gap: k-spacing(2) !default;
+$kendo-scheduler-tooltip-events-gap: var( --kendo-scheduler-tooltip-events-gap, k-spacing(2) ) !default;
 
 /// The horizontal padding of the events inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-event-padding-x !default;
+$kendo-scheduler-tooltip-event-padding-x: var( --kendo-scheduler-tooltip-event-padding-x, $kendo-scheduler-event-padding-x ) !default;
 /// The vertical padding of the events inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-event-padding-y !default;
+$kendo-scheduler-tooltip-event-padding-y: var( --kendo-scheduler-tooltip-event-padding-y, $kendo-scheduler-event-padding-y ) !default;
 /// The border radius of the events inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-event-border-radius !default;
+$kendo-scheduler-tooltip-event-border-radius: var( --kendo-scheduler-tooltip-event-border-radius, $kendo-scheduler-event-border-radius ) !default;
 /// The spacing between the events items inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-event-gap: k-spacing(0.5) !default;
+$kendo-scheduler-tooltip-event-gap: var( --kendo-scheduler-tooltip-event-gap, k-spacing(0.5) ) !default;
 
 /// The color of the Scheduler Tooltip callout.
 /// @group scheduler
-$kendo-scheduler-tooltip-callout-color: $kendo-scheduler-tooltip-bg !default;
+$kendo-scheduler-tooltip-callout-color: var( --kendo-scheduler-tooltip-callout-color, $kendo-scheduler-tooltip-bg ) !default;
 
 /// The width of the Scheduler resize handle.
 /// @group scheduler
-$kendo-scheduler-resize-handle-width: 2em !default;
+$kendo-scheduler-resize-handle-width: var( --kendo-scheduler-resize-handle-width, 2em ) !default;
 
 /// The height of the Scheduler more events button.
 /// @group scheduler
-$kendo-scheduler-more-btn-height: 13px !default;
+$kendo-scheduler-more-btn-height: var( --kendo-scheduler-more-btn-height, 13px ) !default;
 
 /// The color of the Scheduler marquee.
 /// @group scheduler
-$kendo-scheduler-marquee-color: k-color(primary) !default;
+$kendo-scheduler-marquee-color: var( --kendo-scheduler-marquee-color, k-color(primary) ) !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,
+    $kendo-scheduler-font-size: $kendo-scheduler-font-size,
+    $kendo-scheduler-line-height: $kendo-scheduler-line-height,
+    $kendo-scheduler-bg: $kendo-scheduler-bg,
+    $kendo-scheduler-text: $kendo-scheduler-text,
+    $kendo-scheduler-border: $kendo-scheduler-border,
+    $kendo-scheduler-toolbar-bg: $kendo-scheduler-toolbar-bg,
+    $kendo-scheduler-toolbar-text: $kendo-scheduler-toolbar-text,
+    $kendo-scheduler-toolbar-border: $kendo-scheduler-toolbar-border,
+    $kendo-scheduler-toolbar-gradient: $kendo-scheduler-toolbar-gradient,
+    $kendo-scheduler-footer-bg: $kendo-scheduler-footer-bg,
+    $kendo-scheduler-footer-text: $kendo-scheduler-footer-text,
+    $kendo-scheduler-footer-border: $kendo-scheduler-footer-border,
+    $kendo-scheduler-footer-gradient: $kendo-scheduler-footer-gradient,
+    $kendo-scheduler-event-min-height: $kendo-scheduler-event-min-height,
+    $kendo-scheduler-event-border-radius: $kendo-scheduler-event-border-radius,
+    $kendo-scheduler-event-line-height: $kendo-scheduler-event-line-height,
+    $kendo-scheduler-event-bg: $kendo-scheduler-event-bg,
+    $kendo-scheduler-event-text: $kendo-scheduler-event-text,
+    $kendo-scheduler-event-border: $kendo-scheduler-event-border,
+    $kendo-scheduler-event-gradient: $kendo-scheduler-event-gradient,
+    $kendo-scheduler-event-shadow: $kendo-scheduler-event-shadow,
+    $kendo-scheduler-event-hover-bg: $kendo-scheduler-event-hover-bg,
+    $kendo-scheduler-event-hover-text: $kendo-scheduler-event-hover-text,
+    $kendo-scheduler-event-hover-border: $kendo-scheduler-event-hover-border,
+    $kendo-scheduler-event-hover-gradient: $kendo-scheduler-event-hover-gradient,
+    $kendo-scheduler-event-hover-shadow: $kendo-scheduler-event-hover-shadow,
+    $kendo-scheduler-event-selected-bg: $kendo-scheduler-event-selected-bg,
+    $kendo-scheduler-event-selected-text: $kendo-scheduler-event-selected-text,
+    $kendo-scheduler-event-selected-border: $kendo-scheduler-event-selected-border,
+    $kendo-scheduler-event-selected-gradient: $kendo-scheduler-event-selected-gradient,
+    $kendo-scheduler-event-selected-shadow: $kendo-scheduler-event-selected-shadow,
+    $kendo-scheduler-event-ongoing-shadow: $kendo-scheduler-event-ongoing-shadow,
+    $kendo-scheduler-cell-padding-x: $kendo-scheduler-cell-padding-x,
+    $kendo-scheduler-cell-padding-y: $kendo-scheduler-cell-padding-y,
+    $kendo-scheduler-cell-height: $kendo-scheduler-cell-height,
+    $kendo-scheduler-datecolumn-width: $kendo-scheduler-datecolumn-width,
+    $kendo-scheduler-timecolumn-width: $kendo-scheduler-timecolumn-width,
+    $kendo-scheduler-nonwork-bg: $kendo-scheduler-nonwork-bg,
+    $kendo-scheduler-nonwork-text: $kendo-scheduler-nonwork-text,
+    $kendo-scheduler-othermonth-bg: $kendo-scheduler-othermonth-bg,
+    $kendo-scheduler-othermonth-text: $kendo-scheduler-othermonth-text,
+    $kendo-scheduler-yearview-padding-x: $kendo-scheduler-yearview-padding-x,
+    $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-y,
+    $kendo-scheduler-yearview-calendar-gap: $kendo-scheduler-yearview-calendar-gap,
+    $kendo-scheduler-yearview-indicator-size: $kendo-scheduler-yearview-indicator-size,
+    $kendo-scheduler-yearview-indicator-calc-offset-top: $kendo-scheduler-yearview-indicator-calc-offset-top,
+    $kendo-scheduler-yearview-indicator-calc-offset-left: $kendo-scheduler-yearview-indicator-calc-offset-left,
+    $kendo-scheduler-yearview-indicator-border-radius: $kendo-scheduler-yearview-indicator-border-radius,
+    $kendo-scheduler-yearview-indicator-bg: $kendo-scheduler-yearview-indicator-bg,
+    $kendo-scheduler-yearview-indicator-selected-bg: $kendo-scheduler-yearview-indicator-selected-bg,
+    $kendo-scheduler-tooltip-padding-x: $kendo-scheduler-tooltip-padding-x,
+    $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-y,
+    $kendo-scheduler-tooltip-border-width: $kendo-scheduler-tooltip-border-width,
+    $kendo-scheduler-tooltip-bg: $kendo-scheduler-tooltip-bg,
+    $kendo-scheduler-tooltip-text: $kendo-scheduler-tooltip-text,
+    $kendo-scheduler-tooltip-border: $kendo-scheduler-tooltip-border,
+    $kendo-scheduler-tooltip-shadow: $kendo-scheduler-tooltip-shadow,
+    $kendo-scheduler-tooltip-title-margin-y: $kendo-scheduler-tooltip-title-margin-y,
+    $kendo-scheduler-tooltip-month-font-size: $kendo-scheduler-tooltip-month-font-size,
+    $kendo-scheduler-tooltip-day-font-size: $kendo-scheduler-tooltip-day-font-size,
+    $kendo-scheduler-tooltip-events-max-height: $kendo-scheduler-tooltip-events-max-height,
+    $kendo-scheduler-tooltip-events-gap: $kendo-scheduler-tooltip-events-gap,
+    $kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-tooltip-event-padding-x,
+    $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-tooltip-event-padding-y,
+    $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-tooltip-event-border-radius,
+    $kendo-scheduler-tooltip-event-gap: $kendo-scheduler-tooltip-event-gap,
+    $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-color
+);

package/scss/scroller/_layout.scss

@@ -1,83 +1,5 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/scroller/_layout.scss" as *;
 
 @mixin kendo-scroller--layout() {
-
-    // Layout
-    .km-scrollview,
-    .km-scroll-container {
-        user-select: none;
-        border-collapse: separate;
-    }
-    .km-scroll-wrapper {
-        position: relative;
-    }
-    .km-scroll-header {
-        position: absolute;
-        z-index: 1001;
-        width: 100%;
-        top: 0;
-        left: 0;
-    }
-
-
-    // Pull to refresh
-    .km-scroller-pull {
-        width: 100%;
-        display: block;
-        position: absolute;
-        line-height: 3em;
-        font-size: 1.4em;
-        text-align: center;
-        transform: translate3d(0, -3em, 0);
-    }
-    .km-scroller-pull .km-template {
-        display: inline-block;
-        min-width: 200px;
-        text-align: start;
-    }
-    .km-load-more .km-icon,
-    .km-widget .km-scroller-pull .km-icon {
-        display: inline-block;
-        height: 2rem;
-        margin-right: 1rem;
-        vertical-align: middle;
-        width: 2rem;
-        font-size: 2rem;
-        transform: rotate(0deg);
-        transition: transform 300ms linear;
-    }
-    .km-widget .km-scroller-release .km-icon {
-        transform: rotate(180deg);
-    }
-    .km-widget .km-scroller-refresh .km-icon {
-        transition: none;
-    }
-
-
-    // Scrollbar
-    .km-touch-scrollbar {
-        position: absolute;
-        visibility: hidden;
-        z-index: 200000;
-        height: .4em;
-        width: .4em;
-        opacity: 0;
-        transform-origin: 0 0;
-        transition: opacity .3s linear;
-    }
-    .k-map .km-touch-scrollbar,
-    .k-diagram .km-touch-scrollbar {
-        display: none;
-    }
-    .km-vertical-scrollbar {
-        height: 100%;
-        right: 2px;
-        top: 0;
-    }
-    .km-horizontal-scrollbar {
-        width: 100%;
-        left: 0;
-        bottom: 2px;
-    }
-
+    @include kendo-scroller--layout-base();
 }

package/scss/scroller/_theme.scss

@@ -1,8 +1,5 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/scroller/_theme.scss" as *;
 
 @mixin kendo-scroller--theme() {
-
-    .km-touch-scrollbar {
-        background-color: #333333;
-    }
+    @include kendo-scroller--theme-base();
 }