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

package/scss/timeline/_variables.scss

@@ -7,191 +7,238 @@
 
 /// The horizontal spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-x: k-spacing(10) !default;
+$kendo-timeline-spacing-x: var( --kendo-timeline-spacing-x, k-spacing(10) ) !default;
 /// The vertical spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-y: k-spacing(10) !default;
+$kendo-timeline-spacing-y: var( --kendo-timeline-spacing-y, k-spacing(10) ) !default;
 /// The padding between the Timeline's track items.
 /// @group timeline
-$kendo-timeline-items-padding: k-spacing(4) !default;
+$kendo-timeline-items-padding: var( --kendo-timeline-items-padding, k-spacing(4) ) !default;
 
 /// The font family of the Timeline.
 /// @group timeline
-$kendo-timeline-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-timeline-font-family: var( --kendo-timeline-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Timeline.
 /// @group timeline
-$kendo-timeline-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-timeline-font-size: var( --kendo-timeline-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Timeline.
 /// @group timeline
-$kendo-timeline-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-timeline-line-height: var( --kendo-timeline-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The horizontal spacing of the mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-spacing-x: k-spacing(4) !default;
+$kendo-timeline-mobile-spacing-x: var( --kendo-timeline-mobile-spacing-x, k-spacing(4) ) !default;
 /// The vertical spacing of the mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-spacing-y: k-spacing(4) !default;
+$kendo-timeline-mobile-spacing-y: var( --kendo-timeline-mobile-spacing-y, k-spacing(4) ) !default;
 
 /// The width of the Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-width: k-spacing(7.5) !default;
+$kendo-timeline-track-arrow-width: var( --kendo-timeline-track-arrow-width, k-spacing(7.5) ) !default;
 /// The height of the Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-height: k-spacing(7.5) !default;
+$kendo-timeline-track-arrow-height: var( --kendo-timeline-track-arrow-height, k-spacing(7.5) ) !default;
 
 /// The size of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-size: k-spacing(1.5) !default;
+$kendo-timeline-track-size: var( --kendo-timeline-track-size, k-spacing(1.5) ) !default;
 /// The bottom padding of the Timeline's track wrapper.
 /// @group timeline
-$kendo-timeline-track-wrap-padding-bottom: calc( #{$kendo-timeline-track-size} / 2 ) !default;
+$kendo-timeline-track-wrap-padding-bottom: var( --kendo-timeline-track-wrap-padding-bottom, calc( #{$kendo-timeline-track-size} / 2 ) ) !default;
 /// The border width of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-border-width: 1px !default;
+$kendo-timeline-track-border-width: var( --kendo-timeline-track-border-width, 1px ) !default;
 /// The bottom margin of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-margin-bottom: k-spacing(4) !default;
+$kendo-timeline-track-margin-bottom: var( --kendo-timeline-track-margin-bottom, k-spacing(4) ) !default;
 /// The bottom offset of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bottom-calc: calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) !default;
+$kendo-timeline-track-bottom-calc: var( --kendo-timeline-track-bottom-calc, calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) ) !default;
 /// The left offset of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-start-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) !default;
+$kendo-timeline-track-start-calc: var( --kendo-timeline-track-start-calc, calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) ) !default;
 /// The right offset of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-end-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) !default;
+$kendo-timeline-track-end-calc: var( --kendo-timeline-track-end-calc, calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) ) !default;
 /// The background color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bg: k-color(surface) !default;
+$kendo-timeline-track-bg: var( --kendo-timeline-track-bg, k-color(surface) ) !default;
 /// The border color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-timeline-track-border-color: var( --kendo-timeline-track-border-color, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The block end inset of the Timeline arrow.
 /// @group timeline
-$kendo-timeline-arrow-inset-block-end: calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } ) !default;
+$kendo-timeline-arrow-inset-block-end: var( --kendo-timeline-arrow-inset-block-end, calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } ) ) !default;
 /// The background color of the disabled Timeline arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-bg: k-color(base-subtle) !default;
+$kendo-timeline-track-arrow-disabled-bg: var( --kendo-timeline-track-arrow-disabled-bg, k-color(base-subtle) ) !default;
 /// The text color of the disabled Timeline arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-timeline-track-arrow-disabled-text: var( --kendo-timeline-track-arrow-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 /// The border color of the disabled Timeline arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-border: transparent !default;
+$kendo-timeline-track-arrow-disabled-border: var( --kendo-timeline-track-arrow-disabled-border, transparent ) !default;
 
 /// The offset of the Timeline track event.
 /// @group timeline
-$kendo-timeline-track-event-offset: k-spacing(8) !default;
+$kendo-timeline-track-event-offset: var( --kendo-timeline-track-event-offset, k-spacing(8) ) !default;
 
 /// The horizontal padding of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-padding-x: k-spacing(2) !default;
+$kendo-timeline-flag-padding-x: var( --kendo-timeline-flag-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-padding-y: k-spacing(2) !default;
+$kendo-timeline-flag-padding-y: var( --kendo-timeline-flag-padding-y, k-spacing(2) ) !default;
 /// The border radius of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-border-radius: k-spacing(0.5) !default;
+$kendo-timeline-flag-border-radius: var( --kendo-timeline-flag-border-radius, k-spacing(0.5) ) !default;
 /// The line height of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-timeline-flag-line-height: var( --kendo-timeline-flag-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The box shadow of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-box-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-timeline-flag-box-shadow: var( --kendo-timeline-flag-box-shadow, var( --kendo-box-shadow-depth-2, none ) ) !default;
 /// The minimum width of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-min-width: k-spacing(20) !default;
+$kendo-timeline-flag-min-width: var( --kendo-timeline-flag-min-width, k-spacing(20) ) !default;
 /// The maximum width of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) !default;
+$kendo-timeline-flag-max-width: var( --kendo-timeline-flag-max-width, calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) ) !default;
 /// The maximum width of the mobile Timeline flag.
 /// @group timeline
-$kendo-timeline-mobile-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } ) !default;
+$kendo-timeline-mobile-flag-max-width: var( --kendo-timeline-mobile-flag-max-width, calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } ) ) !default;
 /// The minimum width of the horizontal Timeline flag.
 /// @group timeline
-$kendo-timeline-horizontal-flag-min-width: k-spacing(15) !default;
+$kendo-timeline-horizontal-flag-min-width: var( --kendo-timeline-horizontal-flag-min-width, k-spacing(15) ) !default;
 /// The background color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-bg: k-color(primary) !default;
+$kendo-timeline-flag-bg: var( --kendo-timeline-flag-bg, k-color(primary) ) !default;
 /// The text color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-text: k-color(surface-alt) !default;
+$kendo-timeline-flag-text: var( --kendo-timeline-flag-text, k-color(surface-alt) ) !default;
 /// The width of the Timeline's flag callout.
 /// @group timeline
-$kendo-timeline-flag-callout-width: k-spacing(2.5) !default;
+$kendo-timeline-flag-callout-width: var( --kendo-timeline-flag-callout-width, k-spacing(2.5) ) !default;
 /// The height of the Timeline's flag callout.
 /// @group timeline
-$kendo-timeline-flag-callout-height: k-spacing(2.5) !default;
+$kendo-timeline-flag-callout-height: var( --kendo-timeline-flag-callout-height, k-spacing(2.5) ) !default;
 /// The bottom offset of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-offset-bottom: k-spacing(1) !default;
+$kendo-timeline-flag-offset-bottom: var( --kendo-timeline-flag-offset-bottom, k-spacing(1) ) !default;
 /// The bottom margin of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-margin-bottom-calc: calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } ) !default;
+$kendo-timeline-flag-margin-bottom-calc: var( --kendo-timeline-flag-margin-bottom-calc, calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } ) ) !default;
 
 /// The background color of the Timeline's Card header.
 /// @group timeline
-$kendo-timeline-card-header-bg: k-color(surface-alt) !default;
+$kendo-timeline-card-header-bg: var( --kendo-timeline-card-header-bg, k-color(surface-alt) ) !default;
 /// The text color of the Timeline's Card header.
 /// @group timeline
-$kendo-timeline-card-header-text: k-color(on-app-surface) !default;
+$kendo-timeline-card-header-text: var( --kendo-timeline-card-header-text, k-color(on-app-surface) ) !default;
 /// The border of the Timeline's Card body scroll.
 /// @group timeline
-$kendo-timeline-card-body-scroll-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-timeline-card-body-scroll-border: var( --kendo-timeline-card-body-scroll-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The background color of the Timeline's Card body scroll.
 /// @group timeline
-$kendo-timeline-card-body-scroll-bg: k-color(surface-alt) !default;
+$kendo-timeline-card-body-scroll-bg: var( --kendo-timeline-card-body-scroll-bg, k-color(surface-alt) ) !default;
 /// The color of the Timeline's hovered card scroll thumb.
 /// @group timeline
-$kendo-timeline-card-scroll-thumb-hover: color-mix(in srgb, k-color(border) 10%, transparent) !default;
+$kendo-timeline-card-scroll-thumb-hover: var( --kendo-timeline-card-scroll-thumb-hover, color-mix(in srgb, k-color(border) 10%, transparent) ) !default;
 
 /// The text color of the Timeline date body.
 /// @group timeline
-$kendo-timeline-date-body-text: k-color(on-app-surface) !default;
+$kendo-timeline-date-body-text: var( --kendo-timeline-date-body-text, k-color(on-app-surface) ) !default;
 /// The width of the Timeline date.
 /// @group timeline
-$kendo-timeline-date-width: calc( #{k-spacing(12)} + #{k-spacing(0.5)} ) !default;
+$kendo-timeline-date-width: var( --kendo-timeline-date-width, calc( #{k-spacing(12)} + #{k-spacing(0.5)} ) ) !default;
 /// The bottom margin of the Timeline date.
 /// @group timeline
-$kendo-timeline-date-margin-bottom: k-spacing(2) !default;
+$kendo-timeline-date-margin-bottom: var( --kendo-timeline-date-margin-bottom, k-spacing(2) ) !default;
 
 /// The padding of the vertical Timeline.
 /// @group timeline
-$kendo-timeline-vertical-padding-calc: calc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) !default;
+$kendo-timeline-vertical-padding-calc: var( --kendo-timeline-vertical-padding-calc, calc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) ) !default;
 /// The padding of the vertical Timeline date.
 /// @group timeline
-$kendo-timeline-vertical-padding-with-dates-calc: calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) !default;
+$kendo-timeline-vertical-padding-with-dates-calc: var( --kendo-timeline-vertical-padding-with-dates-calc, calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) ) !default;
 /// The border radius of the vertical Timeline.
 /// @group timeline
-$kendo-timeline-vertical-border-radius: k-border-radius(lg) !default;
+$kendo-timeline-vertical-border-radius: var( --kendo-timeline-vertical-border-radius, k-border-radius(lg) ) !default;
 /// The padding of the vertical mobile Timeline.
 /// @group timeline
-$kendo-timeline-mobile-vertical-padding-calc: calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) !default;
+$kendo-timeline-mobile-vertical-padding-calc: var( --kendo-timeline-mobile-vertical-padding-calc, calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) ) !default;
 /// The padding of the vertical mobile Timeline date.
 /// @group timeline
-$kendo-timeline-mobile-vertical-padding-with-dates-calc: calc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) !default;
+$kendo-timeline-mobile-vertical-padding-with-dates-calc: var( --kendo-timeline-mobile-vertical-padding-with-dates-calc, calc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) ) !default;
 
 /// The width of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-width: k-spacing(4) !default;
+$kendo-timeline-circle-width: var( --kendo-timeline-circle-width, k-spacing(4) ) !default;
 /// The height of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-height: k-spacing(4) !default;
+$kendo-timeline-circle-height: var( --kendo-timeline-circle-height, k-spacing(4) ) !default;
 /// The background color of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-bg: k-color(primary) !default;
+$kendo-timeline-circle-bg: var( --kendo-timeline-circle-bg, k-color(primary) ) !default;
 
 /// The width of the Timeline event.
 /// @group timeline
-$kendo-timeline-event-width: 400px !default;
+$kendo-timeline-event-width: var( --kendo-timeline-event-width, 400px ) !default;
 /// The height of the Timeline event.
 /// @group timeline
-$kendo-timeline-event-height: 600px !default;
+$kendo-timeline-event-height: var( --kendo-timeline-event-height, 600px ) !default;
 /// The minimum height of the Timeline event.
 /// @group timeline
-$kendo-timeline-event-min-height-calc: calc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) ) !default;
+$kendo-timeline-event-min-height-calc: var( --kendo-timeline-event-min-height-calc, calc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) ) ) !default;
 
-/// The spacing of the Timeline icons.
-/// @group timeline
-$kendo-timeline-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+@forward "@progress/kendo-theme-core/scss/components/timeline/_variables.scss" with (
+    $kendo-timeline-spacing-x: $kendo-timeline-spacing-x,
+    $kendo-timeline-spacing-y: $kendo-timeline-spacing-y,
+    $kendo-timeline-items-padding: $kendo-timeline-items-padding,
+    $kendo-timeline-font-family: $kendo-timeline-font-family,
+    $kendo-timeline-font-size: $kendo-timeline-font-size,
+    $kendo-timeline-line-height: $kendo-timeline-line-height,
+    $kendo-timeline-mobile-spacing-x: $kendo-timeline-mobile-spacing-x,
+    $kendo-timeline-mobile-spacing-y: $kendo-timeline-mobile-spacing-y,
+    $kendo-timeline-track-arrow-width: $kendo-timeline-track-arrow-width,
+    $kendo-timeline-track-arrow-height: $kendo-timeline-track-arrow-height,
+    $kendo-timeline-track-arrow-disabled-bg: $kendo-timeline-track-arrow-disabled-bg,
+    $kendo-timeline-track-arrow-disabled-text: $kendo-timeline-track-arrow-disabled-text,
+    $kendo-timeline-track-arrow-disabled-border: $kendo-timeline-track-arrow-disabled-border,
+    $kendo-timeline-track-size: $kendo-timeline-track-size,
+    $kendo-timeline-track-wrap-padding-bottom: $kendo-timeline-track-wrap-padding-bottom,
+    $kendo-timeline-track-border-width: $kendo-timeline-track-border-width,
+    $kendo-timeline-track-margin-bottom: $kendo-timeline-track-margin-bottom,
+    $kendo-timeline-track-bottom-calc: $kendo-timeline-track-bottom-calc,
+    $kendo-timeline-track-start-calc: $kendo-timeline-track-start-calc,
+    $kendo-timeline-track-end-calc: $kendo-timeline-track-end-calc,
+    $kendo-timeline-track-bg: $kendo-timeline-track-bg,
+    $kendo-timeline-track-border-color: $kendo-timeline-track-border-color,
+    $kendo-timeline-track-event-offset: $kendo-timeline-track-event-offset,
+    $kendo-timeline-flag-padding-x: $kendo-timeline-flag-padding-x,
+    $kendo-timeline-flag-padding-y: $kendo-timeline-flag-padding-y,
+    $kendo-timeline-flag-line-height: $kendo-timeline-flag-line-height,
+    $kendo-timeline-flag-min-width: $kendo-timeline-flag-min-width,
+    $kendo-timeline-flag-max-width: $kendo-timeline-flag-max-width,
+    $kendo-timeline-mobile-flag-max-width: $kendo-timeline-mobile-flag-max-width,
+    $kendo-timeline-horizontal-flag-min-width: $kendo-timeline-horizontal-flag-min-width,
+    $kendo-timeline-flag-bg: $kendo-timeline-flag-bg,
+    $kendo-timeline-flag-text: $kendo-timeline-flag-text,
+    $kendo-timeline-flag-callout-width: $kendo-timeline-flag-callout-width,
+    $kendo-timeline-flag-callout-height: $kendo-timeline-flag-callout-height,
+    $kendo-timeline-flag-offset-bottom: $kendo-timeline-flag-offset-bottom,
+    $kendo-timeline-flag-margin-bottom-calc: $kendo-timeline-flag-margin-bottom-calc,
+    $kendo-timeline-date-width: $kendo-timeline-date-width,
+    $kendo-timeline-date-margin-bottom: $kendo-timeline-date-margin-bottom,
+    $kendo-timeline-vertical-padding-calc: $kendo-timeline-vertical-padding-calc,
+    $kendo-timeline-vertical-padding-with-dates-calc: $kendo-timeline-vertical-padding-with-dates-calc,
+    $kendo-timeline-mobile-vertical-padding-calc: $kendo-timeline-mobile-vertical-padding-calc,
+    $kendo-timeline-mobile-vertical-padding-with-dates-calc: $kendo-timeline-mobile-vertical-padding-with-dates-calc,
+    $kendo-timeline-circle-width: $kendo-timeline-circle-width,
+    $kendo-timeline-circle-height: $kendo-timeline-circle-height,
+    $kendo-timeline-circle-bg: $kendo-timeline-circle-bg,
+    $kendo-timeline-event-width: $kendo-timeline-event-width,
+    $kendo-timeline-event-height: $kendo-timeline-event-height,
+    $kendo-timeline-event-min-height-calc: $kendo-timeline-event-min-height-calc
+);

package/scss/timepicker/_layout.scss

@@ -1,6 +1,10 @@
-@mixin kendo-time-picker--layout() {
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/timepicker/_layout.scss" as *;
 
-    // Time picker
-    .k-timepicker {}
+@mixin kendo-time-picker--layout() {
+    @include kendo-time-picker--layout-base();
 
+    .k-time-list-wrapper .k-title {
+        padding-block-end: k-spacing(3);
+    }
 }

package/scss/timepicker/_theme.scss

@@ -1,6 +1,5 @@
-@mixin kendo-time-picker--theme() {
-
-       // Time picker
-       .k-timepicker {}
+@use "@progress/kendo-theme-core/scss/components/timepicker/_theme.scss" as *;
 
+@mixin kendo-time-picker--theme() {
+    @include kendo-time-picker--theme-base();
 }

package/scss/timeselector/_layout.scss

@@ -2,243 +2,23 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/timeselector/_layout.scss" as *;
 
 @mixin kendo-time-selector--layout() {
+    @include kendo-time-selector--layout-base();
 
-    .k-timeselector {
-        border-width: var( --kendo-time-selector-border-width, $kendo-time-selector-border-width );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-time-selector-font-family, $kendo-time-selector-font-family );
-        font-size: var( --kendo-time-selector-font-size, $kendo-time-selector-font-size );
-        line-height: var( --kendo-time-selector-line-height, $kendo-time-selector-line-height );
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-flow: column nowrap;
-        user-select: none;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-    }
-
-    .k-popup > .k-timeselector {
-        border-width: 0;
-    }
-
-
-    // Time selector header
-    .k-time-header,
-    .k-time-selector-header {
-        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x );
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex: 0 0 auto;
-
-        .k-title,
-        .k-time-selector-header-title {
-            padding: var( --kendo-button-md-padding-y, $kendo-button-md-padding-y ) var( --kendo-button-md-padding-x, $kendo-button-md-padding-x );
-            font-weight: bold;
-            display: inline-block;
-        }
-
-        .k-time-now {
-            border-width: 0;
-            line-height: inherit;
-            cursor: pointer;
-        }
-    }
-
-
-    // Time selector footer
-    // .k-time-footer {}
-    // .k-time-selector-footer {}
-
-
-    // Time list container
-    .k-time-list-container {
-        display: flex;
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-
-
-    // Time list highlight
-    .k-time-highlight,
-    .k-time-list-highlight {
-        --kendo-time-list-title-height: #{$kendo-time-list-title-height};
-
-        width: 100%;
-        height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
-        border-width: var( --kendo-time-list-highlight-border-width, $kendo-time-list-highlight-border-width );
-        border-style: solid;
-        box-sizing: border-box;
-        position: absolute;
-        top: calc( 50% + var( --kendo-time-list-title-height ) / 2);
-        left: 0;
-        right: 0;
-        transform: translateY(-50%);
-        z-index: 1;
-    }
-
-
-    // Time list wrapper
     .k-time-list-wrapper {
-        min-width: var( --kendo-time-list-width, $kendo-time-list-width );
-        height: var( --kendo-time-list-height, $kendo-time-list-height );
-        box-sizing: content-box;
-        display: inline-flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        overflow: hidden;
-        position: relative;
-        text-align: center;
-        flex: 1 1 auto;
-
         .k-title {
-            padding-block-end: var( --kendo-time-list-title-spacing, $kendo-time-list-title-spacing );
-            font-size: var( --kendo-time-list-title-font-size, $kendo-time-list-title-font-size );
-            line-height: var( --kendo-time-list-title-line-height, $kendo-time-list-title-line-height );
             font-weight: 600;
-            text-align: center;
-            text-transform: capitalize;
-            display: block;
-        }
-
-        &.k-focus {
-            &::before,
-            &::after {
-                --kendo-time-list-highlight-height: #{$kendo-time-list-highlight-height};
-
-                display: block;
-                content: "\200b";
-                position: absolute;
-                width: 100%;
-                left: 0;
-                pointer-events: none;
-                height: calc( 50% - ( var( --kendo-time-list-highlight-height ) / 2) );
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-            }
-
-            &::before {
-                top: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) ;
-            }
-
-            &::after {
-                bottom: 0;
-            }
         }
     }
 
-
-    // Time list
-    .k-time-list {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        flex: 1;
-        position: relative;
-        z-index: 1;
-        outline: 0;
-        overflow: hidden;
-
-        &::before,
-        &::after {
-            display: block;
-            position: absolute;
-            content: "\200b";
-            height: 0;
-            line-height: 0;
-            z-index: 1;
-            width: 200%;
-            left: -50%;
-        }
-
-        &::before { top: 0; }
-        &::after { bottom: 0; }
-    }
-
-
-    // Time list content
     .k-time-container,
     .k-time-list-content {
-        position: relative;
-        flex: 1 1 auto;
-        display: block;
-        overflow-x: hidden;
-        overflow-y: scroll;
-
         @include hide-scrollbar-dir-agnostic();
-
-        > ul {
-            height: auto;
-            width: var( --kendo-time-list-width, $kendo-time-list-width );
-            margin: auto;
-        }
-
-        .k-scrollable-placeholder {
-            position: absolute;
-            width: 1px;
-            top: 0;
-            right: 0;
-        }
-    }
-
-
-    // Time list item
-    .k-time-list-item,
-    .k-time-list .k-item {
-        padding: var( --kendo-time-list-item-padding-y, $kendo-time-list-item-padding-y ) var( --kendo-time-list-item-padding-x, $kendo-time-list-item-padding-x );
     }
 
-
-    // Time separator
     .k-time-separator {
-        --kendo-time-list-tile-height: #{$kendo-time-list-title-height};
-
-        width: 0;
-        height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
-        align-self: center;
-        display: var( --kendo-time-list-separator-display, #{$kendo-time-list-separator-display} );
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        z-index: 11;
-        top: calc( var( --kendo-time-list-title-height ) / 2);
-    }
-
-
-    // Time selector sizes
-    @each $size, $size-props in $kendo-time-selector-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_list-item-padding-x: map.get( $size-props, list-item-padding-x );
-        $_list-item-padding-y: map.get( $size-props, list-item-padding-y );
-        $_highlight-height: calc( #{$_font-size} * #{$_line-height} + calc( #{ $_list-item-padding-y} * 2 ) );
-
-
-        .k-timeselector-#{$size} {
-            font-size: var( --kendo-time-selector-#{$size}-font-size, #{$_font-size} );
-            line-height: var( --kendo-time-selector-#{$size}-line-height, #{$_line-height} );
-
-            .k-time-highlight,
-            .k-time-list-highlight {
-                height: var( --kendo-time-selector-#{$size}-highlight-height, #{$_highlight-height} );
-            }
-
-            .k-time-separator {
-                height: var( --kendo-time-selector-#{$size}-highlight-height, #{$_highlight-height} );
-            }
-
-            .k-time-list-item,
-            .k-time-list .k-item {
-                padding: var( --kendo-list-#{$size}-item-padding-y, #{$_list-item-padding-y} ) var( --kendo-list-#{$size}-item-padding-x, #{$_list-item-padding-x} );
-            }
-        }
+        display: $kendo-time-list-separator-display;
     }
 }

package/scss/timeselector/_theme.scss

@@ -1,68 +1,18 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/timeselector/_theme.scss" as *;
 
 @mixin kendo-time-selector--theme() {
-    // Time selector
-    .k-timeselector {
-        @include fill(
-            var( --kendo-time-selector-text, #{$kendo-time-selector-text} ),
-            var( --kendo-time-selector-bg, #{$kendo-time-selector-bg} ),
-            var( --kendo-time-selector-border, #{$kendo-time-selector-border} )
-        );
-    }
-
-
-    // Time selector header
-    .k-time-header,
-    .k-time-selector-header {
-        .k-title {
-            color:  var( --kendo-time-selector-header-title-text, #{$kendo-time-selector-header-title-text} );
-        }
-
-        .k-time-now {
-            color: k-color(primary);
-        }
-        .k-time-now:hover {
-            color: k-color(primary-hover);
-        }
-    }
-
+    @include kendo-time-selector--theme-base();
 
-    // Time list wrapper
-    .k-time-list-wrapper {
-
-        .k-title {
-            color: var( --kendo-time-list-title-text, #{$kendo-time-list-title-text} );
-        }
-
-        &.k-focus {
-            .k-title {
-                color: var( --kendo-time-list-title-focus-text, #{$kendo-time-list-title-focus-text} );
-            }
-
-            &::before,
-            &::after {
-                background-color: var( --kendo-time-list-focus-bg, #{$kendo-time-list-focus-bg} );
-            }
-        }
-    }
-
-
-    // Time list
     .k-time-list {
         .k-item:hover {
             color: k-color(primary-hover);
         }
     }
 
-    .k-time-container {
-        background: transparent;
-    }
-
-    .k-time-highlight {
-        @include fill(
-            $bg: var( --kendo-time-list-highlight-bg, #{$kendo-time-list-highlight-bg} ),
-            $border: var( --kendo-time-list-highlight-border, #{$kendo-time-list-highlight-border} )
-        );
+    .k-time-list::before,
+    .k-time-list::after {
+        box-shadow: none;
     }
 }