@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/table/_variables.scss

@@ -14,26 +14,26 @@ $kendo-table-cell-vertical-border-width: var( --kendo-table-cell-vertical-border
 $kendo-table-cell-horizontal-border-width: var( --kendo-table-cell-horizontal-border-width, 1px ) !default;
 /// The horizontal padding of the cells in the table for small size.
 /// @group table
-$kendo-table-sm-cell-padding-x: var( --kendo-table-sm-cell-padding-x, #{k-spacing(3)} ) !default;
+$kendo-table-sm-cell-padding-x: var( --kendo-table-sm-cell-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the cells in the table for small size.
 /// @group table
-$kendo-table-sm-cell-padding-y: var( --kendo-table-sm-cell-padding-y, #{k-spacing(1.5)} ) !default;
+$kendo-table-sm-cell-padding-y: var( --kendo-table-sm-cell-padding-y, #{k-spacing(2)} ) !default;
 /// The horizontal padding of the cells in the table for medium size.
 /// @group table
-$kendo-table-md-cell-padding-x: var( --kendo-table-md-cell-padding-x, #{k-spacing(3)} ) !default;
+$kendo-table-md-cell-padding-x: var( --kendo-table-md-cell-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the cells in the table for medium size.
 /// @group table
-$kendo-table-md-cell-padding-y: var( --kendo-table-md-cell-padding-y, #{k-spacing(3)} ) !default;
+$kendo-table-md-cell-padding-y: var( --kendo-table-md-cell-padding-y, #{k-spacing(2.5)} ) !default;
 /// The horizontal padding of the cells in the table for large size.
 /// @group table
-$kendo-table-lg-cell-padding-x: var( --kendo-table-lg-cell-padding-x, #{k-spacing(3)} ) !default;
+$kendo-table-lg-cell-padding-x: var( --kendo-table-lg-cell-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the cells in the table for large size.
 /// @group table
-$kendo-table-lg-cell-padding-y: var( --kendo-table-lg-cell-padding-y, #{k-spacing(3.5)} ) !default;
+$kendo-table-lg-cell-padding-y: var( --kendo-table-lg-cell-padding-y, #{k-spacing(3)} ) !default;
 
 /// Font weight of the table header cells.
 /// @group table
-$kendo-table-header-font-weight: var( --kendo-table-header-font-weight, var( --kendo-font-weight-bold, normal ) ) !default;
+$kendo-table-header-font-weight: var( --kendo-table-header-font-weight, var( --kendo-font-weight-normal, normal ) ) !default;
 
 /// The sizes of the table.
 /// @group table
@@ -139,7 +139,7 @@ $kendo-table-alt-row-border: var( --kendo-table-alt-row-border, #{$kendo-table-b
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: var( --kendo-table-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-table-hover-bg: var( --kendo-table-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 5%, transparent)} ) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: var( --kendo-table-hover-text, #{k-color(on-base)} ) !default;
@@ -162,7 +162,7 @@ $kendo-table-focus-shadow: var( --kendo-table-focus-shadow, #{$kendo-list-item-f
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: var( --kendo-table-selected-bg, #{color-mix(in srgb, k-color(primary) 13%, transparent)} ) !default;
+$kendo-table-selected-bg: var( --kendo-table-selected-bg, #{color-mix(in srgb, k-color(primary) 8%, transparent)} ) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: var( --kendo-table-selected-text, #{$kendo-table-text} ) !default;
@@ -172,7 +172,7 @@ $kendo-table-selected-border: var( --kendo-table-selected-border, #{$kendo-table
 
 /// Background color of highlighted rows in table.
 /// @group table
-$kendo-table-highlighted-bg: var( --kendo-table-highlighted-bg, #{color-mix(in srgb, k-color(warning) 13%, transparent)} ) !default;
+$kendo-table-highlighted-bg: var( --kendo-table-highlighted-bg, #{color-mix(in srgb, k-color(warning) 8%, transparent)} ) !default;
 /// The font weight of highlighted rows in table.
 /// @group table
 $kendo-table-highlighted-font-weight: var( --kendo-table-highlighted-font-weight, var( --kendo-font-weight-semibold, bold ) ) !default;
@@ -181,16 +181,6 @@ $kendo-table-highlighted-font-weight: var( --kendo-table-highlighted-font-weight
 /// @group table
 $kendo-table-selected-highlighted-bg: var( --kendo-table-selected-highlighted-bg, #{color-mix(in srgb, color-mix(in srgb, k-color(primary), k-color(warning)) 23%, transparent)} ) !default;
 
-/// Hover background color of selected rows in table.
-/// @group table
-$kendo-table-selected-hover-bg: var( --kendo-table-selected-hover-bg, #{color-mix(in srgb, k-color(primary) 26%, transparent)} ) !default;
-/// Hover text color of selected rows in table.
-/// @group table
-$kendo-table-selected-hover-text: var( --kendo-table-selected-hover-text, #{$kendo-table-selected-text} ) !default;
-/// Hover border color of selected rows in table.
-/// @group table
-$kendo-table-selected-hover-border: var( --kendo-table-selected-hover-border, #{$kendo-table-selected-border} ) !default;
-
 /// The box shadow of the row spanned cells.
 /// @group table
 $kendo-table-cell-row-span-shadow: var( --kendo-table-cell-row-span-shadow, inset 0 0 0 1px #{$kendo-table-border} ) !default;

package/scss/tabstrip/_layout.scss

@@ -17,13 +17,55 @@
 
         .k-tabstrip-items-wrapper {
 
-            .k-item:active::after,
-            .k-item.k-active::after,
-            .k-item.k-selected::after {
-                opacity: 1;
-                transform: scaleY(1);
+            .k-item.k-active::after {
+                border: none;
+                height: $kendo-tabstrip-indicator-size;
+                border-radius: k-border-radius(md);
+                margin: 0 k-spacing(2.5);
             }
         }
+
+        .k-tabstrip-top {
+
+           > .k-tabstrip-items-wrapper {
+
+                .k-item.k-active::after {
+                    top: unset;
+                }
+            }
+        }
+        .k-tabstrip-left {
+
+           > .k-tabstrip-items-wrapper {
+
+                .k-item.k-active::after {
+                    left: unset;
+                }
+            }
+        }
+        .k-tabstrip-right {
+
+           > .k-tabstrip-items-wrapper {
+
+                .k-item.k-active::after {
+                    right: unset;
+                }
+            }
+        }
+
+        .k-tabstrip-left,
+        .k-tabstrip-right {
+
+            > .k-tabstrip-items-wrapper {
+
+                .k-item.k-active::after {
+                    width: $kendo-tabstrip-indicator-size;
+                    height: auto;
+                    margin: k-spacing(3) 0;
+                }
+            }
+        }
+
     }
 
 }

package/scss/tabstrip/_theme.scss

@@ -26,8 +26,7 @@
     @if ($kendo-tabstrip-indicator-size) {
         .k-tabstrip-items-wrapper {
             .k-item.k-active::after {
-                border-color: $kendo-tabstrip-indicator-color;
-                background: none;
+                background-color: $kendo-tabstrip-indicator-color;
             }
         }
     }

package/scss/tabstrip/_variables.scss

@@ -82,7 +82,7 @@ $kendo-tabstrip-sm-item-padding-x: var( --kendo-tabstrip-sm-item-padding-x, #{k-
 $kendo-tabstrip-sm-item-padding-y: var( --kendo-tabstrip-sm-item-padding-y, #{k-spacing(2.5)} ) !default;
 /// The horizontal padding of the medium TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-md-item-padding-x: var( --kendo-tabstrip-md-item-padding-x, #{k-spacing(2)} ) !default;
+$kendo-tabstrip-md-item-padding-x: var( --kendo-tabstrip-md-item-padding-x, #{k-spacing(2.5)} ) !default;
 /// The vertical padding of the medium TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-md-item-padding-y: var( --kendo-tabstrip-md-item-padding-y, #{k-spacing(3)} ) !default;
@@ -120,7 +120,7 @@ $kendo-tabstrip-item-disabled-filter: var( --kendo-tabstrip-item-disabled-filter
 
 /// The background color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-bg: var( --kendo-tabstrip-item-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-tabstrip-item-hover-bg: var( --kendo-tabstrip-item-hover-bg, color-mix(in srgb, #{k-color(on-app-surface) 5%, transparent}) ) !default;
 /// The text color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-text: var( --kendo-tabstrip-item-hover-text, #{k-color(on-base)} ) !default;
@@ -129,38 +129,38 @@ $kendo-tabstrip-item-hover-text: var( --kendo-tabstrip-item-hover-text, #{k-colo
 $kendo-tabstrip-item-hover-border: var( --kendo-tabstrip-item-hover-border, #{k-color(base-hover)} ) !default;
 /// The background color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-bg: var( --kendo-tabstrip-item-selected-bg, #{k-color(surface-alt)} ) !default;
+$kendo-tabstrip-item-selected-bg: var( --kendo-tabstrip-item-selected-bg, transparent ) !default;
 /// The text color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-text: var( --kendo-tabstrip-item-selected-text, #{k-color(on-app-surface)} ) !default;
+$kendo-tabstrip-item-selected-text: var( --kendo-tabstrip-item-selected-text, inherit ) !default;
 /// The border color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-border: var( --kendo-tabstrip-item-selected-border, #{k-color(primary)} ) !default;
+$kendo-tabstrip-item-selected-border: var( --kendo-tabstrip-item-selected-border, inherit ) !default;
 /// The font weight of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-font-weight: var( --kendo-tabstrip-item-selected-font-weight, var( --kendo-font-weight-bold, normal ) ) !default;
+$kendo-tabstrip-item-selected-font-weight: var( --kendo-tabstrip-item-selected-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
 
 /// The shadow of the focused TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-focus-shadow: var( --kendo-tabstrip-item-focus-shadow, #{$kendo-list-item-focus-shadow} ) !default;
 /// The text color of the dragged TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-dragging-text: var( --kendo-tabstrip-item-dragging-text, #{k-color(primary)} ) !default;
+$kendo-tabstrip-item-dragging-text: var( --kendo-tabstrip-item-dragging-text, #{k-color(primary-on-surface)} ) !default;
 
 // Indicator
 /// The border width of the TabStrip indicator.
 /// @group tabstrip
-$kendo-tabstrip-indicator-size: var( --kendo-tabstrip-indicator-size, #{k-spacing(0.5)} ) !default;
+$kendo-tabstrip-indicator-size: var( --kendo-tabstrip-indicator-size, #{k-spacing(1)} ) !default;
 /// The border color of the TabStrip ripple.
 /// @group tabstrip
-$kendo-tabstrip-indicator-color: var( --kendo-tabstrip-indicator-color, #{k-color(primary)} ) !default;
+$kendo-tabstrip-indicator-color: var( --kendo-tabstrip-indicator-color, #{k-color(primary-on-surface)} ) !default;
 
 /// The horizontal padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: var( --kendo-tabstrip-content-padding-x, #{k-spacing(3)} ) !default;
+$kendo-tabstrip-content-padding-x: var( --kendo-tabstrip-content-padding-x, #{k-spacing(2.5)} ) !default;
 /// The vertical padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: var( --kendo-tabstrip-content-padding-y, #{k-spacing(1.5)} ) !default;
+$kendo-tabstrip-content-padding-y: var( --kendo-tabstrip-content-padding-y, #{k-spacing(2.5)} ) !default;
 /// The border width around the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: var( --kendo-tabstrip-content-border-width, 1px ) !default;

package/scss/taskboard/_layout.scss

@@ -18,11 +18,11 @@
     }
 
      .k-taskboard-column-cards-container {
-        margin-bottom: 0;
+        margin-block-end: 0;
      }
 
     .k-taskboard-column-cards {
-        margin-bottom: $kendo-taskboard-column-container-spacing-y;
+        margin-block-end: $kendo-taskboard-column-container-spacing-y;
     }
 
     .k-taskboard-pane-header {
@@ -52,5 +52,6 @@
         border-width: $kendo-toolbar-border-width;
         border-inline-width: 0;
         border-block-start-width: 0;
+        padding: k-spacing(2);
     }
 }

package/scss/taskboard/_theme.scss

@@ -20,7 +20,11 @@
         }
 
         &.k-selected {
-            @include box-shadow( $kendo-card-focus-shadow );
+            background: $kendo-taskboard-card-selected-bg;
+
+            .k-card-header {
+                background: $kendo-taskboard-card-selected-bg;
+            }
         }
 
         &.k-disabled {

package/scss/taskboard/_variables.scss

@@ -30,7 +30,7 @@ $kendo-taskboard-font-size: var( --kendo-taskboard-font-size, var( --kendo-font-
 $kendo-taskboard-line-height: var( --kendo-taskboard-line-height, var( --kendo-line-height, inherit ) ) !default;
 /// The background color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-bg: var( --kendo-taskboard-bg, #{k-color(surface-alt)} ) !default;
+$kendo-taskboard-bg: var( --kendo-taskboard-bg, #{k-color(app-surface)} ) !default;
 /// The text color of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-text: var( --kendo-taskboard-text, #{k-color(on-app-surface)} ) !default;
@@ -69,7 +69,7 @@ $kendo-taskboard-column-border-width: var( --kendo-taskboard-column-border-width
 $kendo-taskboard-column-border-radius: var( --kendo-taskboard-column-border-radius, #{k-border-radius(md)} ) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-bg: var( --kendo-taskboard-column-bg, #{k-color(surface)} ) !default;
+$kendo-taskboard-column-bg: var( --kendo-taskboard-column-bg, #{k-color(app-surface)} ) !default;
 /// The text color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-text: var( --kendo-taskboard-column-text, #{k-color(on-app-surface)} ) !default;
@@ -169,7 +169,7 @@ $kendo-taskboard-pane-actions-padding-x: var( --kendo-taskboard-pane-actions-pad
 
 /// The vertical padding of the TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-padding-y: var( --kendo-taskboard-card-padding-y, calc( #{$kendo-taskboard-spacer} / 2 ) ) !default;
+$kendo-taskboard-card-padding-y: var( --kendo-taskboard-card-padding-y, #{k-spacing(3)} ) !default;
 /// The horizontal padding of the TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-padding-x: var( --kendo-taskboard-card-padding-x, #{$kendo-taskboard-card-padding-y} ) !default;
@@ -181,17 +181,20 @@ $kendo-taskboard-card-category-border-width: var( --kendo-taskboard-card-categor
 $kendo-taskboard-card-focus-shadow: var( --kendo-taskboard-card-focus-shadow, none ) !default;
 /// The border of the selected TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-selected-border: var( --kendo-taskboard-card-selected-border, #{k-color(primary)} ) !default;
+$kendo-taskboard-card-selected-border: var( --kendo-taskboard-card-selected-border, transparent ) !default;
 /// The shadow of the selected TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-selected-shadow: var( --kendo-taskboard-card-selected-shadow, var( --kendo-box-shadow-depth-3, none ) ) !default;
+$kendo-taskboard-card-selected-shadow: null !default;
+/// The background color of the selected TaskBoard Card.
+/// @group taskboard
+$kendo-taskboard-card-selected-bg: linear-gradient(0deg, color-mix(in srgb, k-color(on-app-surface) 12%, transparent) 0%, color-mix(in srgb, k-color(on-app-surface) 12%, transparent) 100%), k-color(surface-alt) !default;
 
 /// The font size of the TaskBoard Card title.
 /// @group taskboard
 $kendo-taskboard-card-title-font-size: var( --kendo-taskboard-card-title-font-size, var( --kendo-font-size, 1rem ) ) !default;
 /// The font weight of the TaskBoard Card title.
 /// @group taskboard
-$kendo-taskboard-card-title-font-weight: var( --kendo-taskboard-card-title-font-weight, var( --kendo-font-weight-bold, 600 ) ) !default;
+$kendo-taskboard-card-title-font-weight: var( --kendo-taskboard-card-title-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
 
 /// The border width of the TaskBoard Card placeholder.
 /// @group taskboard

package/scss/timeline/_layout.scss

@@ -11,10 +11,6 @@
         }
     }
 
-    .k-timeline-arrow {
-        inset-block-end: $kendo-timeline-arrow-inset-block-end;
-    }
-
     .k-timeline-vertical {
 
         &::after {

package/scss/timeline/_variables.scss

@@ -67,9 +67,6 @@ $kendo-timeline-track-bg: var( --kendo-timeline-track-bg, k-color(surface) ) !de
 /// @group timeline
 $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: 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: var( --kendo-timeline-track-arrow-disabled-bg, k-color(base-subtle) ) !default;
@@ -92,7 +89,7 @@ $kendo-timeline-flag-padding-x: var( --kendo-timeline-flag-padding-x, k-spacing(
 $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: var( --kendo-timeline-flag-border-radius, k-spacing(0.5) ) !default;
+$kendo-timeline-flag-border-radius: var( --kendo-timeline-flag-border-radius, k-border-radius(md) ) !default;
 /// The line height of the Timeline flag.
 /// @group timeline
 $kendo-timeline-flag-line-height: var( --kendo-timeline-flag-line-height, var( --kendo-line-height, normal ) ) !default;
@@ -116,7 +113,7 @@ $kendo-timeline-horizontal-flag-min-width: var( --kendo-timeline-horizontal-flag
 $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: var( --kendo-timeline-flag-text, k-color(surface-alt) ) !default;
+$kendo-timeline-flag-text: var( --kendo-timeline-flag-text, k-color(on-primary) ) !default;
 /// The width of the Timeline's flag callout.
 /// @group timeline
 $kendo-timeline-flag-callout-width: var( --kendo-timeline-flag-callout-width, k-spacing(2.5) ) !default;

package/scss/timepicker/_layout.scss

@@ -4,7 +4,4 @@
 @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/timeselector/_layout.scss

@@ -10,12 +10,24 @@
     .k-time-list-wrapper {
         .k-title {
             font-weight: 600;
+            padding-block-end: $kendo-time-list-title-spacing;
         }
     }
 
-    .k-time-container,
-    .k-time-list-content {
-        @include hide-scrollbar-dir-agnostic();
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+        .k-time-now {
+            text-transform: uppercase;
+        }
+    }
+
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+        .k-time-now {
+            text-transform: uppercase;
+        }
     }
 
     .k-time-separator {

package/scss/timeselector/_theme.scss

@@ -7,7 +7,7 @@
 
     .k-time-list {
         .k-item:hover {
-            color: k-color(primary-hover);
+            color: k-color(primary);
         }
     }
 

package/scss/timeselector/_variables.scss

@@ -36,13 +36,13 @@ $kendo-time-selector-header-padding-y: var( --kendo-time-selector-header-padding
 $kendo-time-selector-header-border-width: var( --kendo-time-selector-header-border-width, 0px ) !default;
 /// The text color of the title in the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-title-text: var( --kendo-time-selector-header-title-text, unset ) !default;
+$kendo-time-selector-header-title-text: var( --kendo-time-selector-header-title-text, k-color(primary-on-surface) ) !default;
 /// The text color of the time now in the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-time-now-text: var( --kendo-time-selector-header-time-now-text, k-color(primary) ) !default;
+$kendo-time-selector-header-time-now-text: null !default;
 /// The hover text color of the time now in the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-time-now-hover-text: var( --kendo-time-selector-header-time-now-hover-text, k-color(primary-hover) ) !default;
+$kendo-time-selector-header-time-now-hover-text: null !default;
 
 /// Visibility of the time-selector separator.
 /// @group time-selector
@@ -56,13 +56,13 @@ $kendo-time-list-height: var( --kendo-time-list-height, 240px ) !default;
 
 /// Spacing beneath the time selector titles.
 /// @group time-selector
-$kendo-time-list-title-spacing: var( --kendo-time-list-title-spacing, k-spacing(3) ) !default;
+$kendo-time-list-title-spacing: var( --kendo-time-list-title-spacing, k-spacing(1) ) !default;
 /// Font size of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-font-size: var( --kendo-time-list-title-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
 /// Line height of the time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-line-height: var( --kendo-time-list-title-line-height, var( --kendo-line-height-lg, inherit ) ) !default;
+$kendo-time-list-title-line-height: var( --kendo-time-list-title-line-height, 1 ) !default;
 /// Height of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-height: calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
@@ -76,7 +76,7 @@ $kendo-time-list-title-focus-text: var( --kendo-time-list-title-focus-text, $ken
 
 /// Horizontal padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-x: var( --kendo-time-list-item-padding-x, k-spacing(2) ) !default;
+$kendo-time-list-item-padding-x: var( --kendo-time-list-item-padding-x, k-spacing(3) ) !default;
 /// Vertical padding of the time-selector list items.
 /// @group time-selector
 $kendo-time-list-item-padding-y: var( --kendo-time-list-item-padding-y, k-spacing(1) ) !default;
@@ -86,17 +86,17 @@ $kendo-time-list-item-padding-y: var( --kendo-time-list-item-padding-y, k-spacin
 $kendo-time-list-highlight-border-width: var( --kendo-time-list-highlight-border-width, 1px 0px ) !default;
 /// Height of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
+$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{$kendo-time-list-item-padding-y} * 2 ) !default;
 /// Background color of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-bg: var( --kendo-time-list-highlight-bg, $kendo-time-selector-bg ) !default;
+$kendo-time-list-highlight-bg: var( --kendo-time-list-highlight-bg, color-mix(in srgb, k-color(on-app-surface) 12%, transparent ) ) !default;
 /// Border color of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-border: var( --kendo-time-list-highlight-border, $kendo-time-selector-border ) !default;
+$kendo-time-list-highlight-border: var( --kendo-time-list-highlight-border, transparent ) !default;
 
 /// Background color of the focused time-selector column.
 /// @group time-selector
-$kendo-time-list-focus-bg: var( --kendo-time-list-focus-bg, rgba(0, 0, 0, .04) ) !default;
+$kendo-time-list-focus-bg: var( --kendo-time-list-focus-bg, color-mix(in srgb, k-color(on-app-surface) 5%, transparent ) ) !default;
 
 
 /// Font sizes of the time-selector.
@@ -113,15 +113,15 @@ $kendo-time-selector-lg-line-height: var( --kendo-time-selector-lg-line-height,
 
 ///  Horizontal padding of the time-selector items.
 /// @group time-selector
-$kendo-time-selector-sm-list-item-padding-x: var( --kendo-time-selector-sm-list-item-padding-x, #{k-spacing(2)} ) !default;
-$kendo-time-selector-md-list-item-padding-x: var( --kendo-time-selector-md-list-item-padding-x, #{k-spacing(2)} ) !default;
-$kendo-time-selector-lg-list-item-padding-x: var( --kendo-time-selector-lg-list-item-padding-x, #{k-spacing(2)} ) !default;
+$kendo-time-selector-sm-list-item-padding-x: var( --kendo-time-selector-sm-list-item-padding-x, #{k-spacing(3)} ) !default;
+$kendo-time-selector-md-list-item-padding-x: var( --kendo-time-selector-md-list-item-padding-x, #{k-spacing(3)} ) !default;
+$kendo-time-selector-lg-list-item-padding-x: var( --kendo-time-selector-lg-list-item-padding-x, #{k-spacing(3)} ) !default;
 
 ///  Vertical padding of the time-selector items.
 /// @group time-selector
-$kendo-time-selector-sm-list-item-padding-y: var( --kendo-time-selector-sm-list-item-padding-y, #{k-spacing(1.5)} ) !default;
-$kendo-time-selector-md-list-item-padding-y: var( --kendo-time-selector-md-list-item-padding-y, #{k-spacing(2)} ) !default;
-$kendo-time-selector-lg-list-item-padding-y: var( --kendo-time-selector-lg-list-item-padding-y, #{k-spacing(2.5)} ) !default;
+$kendo-time-selector-sm-list-item-padding-y: var( --kendo-time-selector-sm-list-item-padding-y, #{k-spacing(1)} ) !default;
+$kendo-time-selector-md-list-item-padding-y: var( --kendo-time-selector-md-list-item-padding-y, #{k-spacing(1)} ) !default;
+$kendo-time-selector-lg-list-item-padding-y: var( --kendo-time-selector-lg-list-item-padding-y, #{k-spacing(2)} ) !default;
 
 /// Sizes map for the time-selector.
 /// @group time-selector

package/scss/toolbar/_theme.scss

@@ -12,4 +12,10 @@
         }
     }
 
+    .k-toolbar-flat {
+        > .k-separator,
+        .k-toolbar-separator {
+            border-inline-color: $kendo-toolbar-separator-border;
+        }
+    }
 }

package/scss/toolbar/_variables.scss

@@ -4,33 +4,33 @@
 
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-x: var( --kendo-toolbar-sm-padding-x, #{k-spacing(1)} ) !default;
+$kendo-toolbar-sm-padding-x: calc( var( --kendo-toolbar-sm-padding-x, #{k-spacing(2)} ) + 1px ) !default;
 /// The horizontal padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-x: var( --kendo-toolbar-md-padding-x, #{k-spacing(2)} ) !default;
+$kendo-toolbar-md-padding-x: calc( var( --kendo-toolbar-md-padding-x, #{k-spacing(3)} ) + 1px ) !default;
 /// The horizontal padding of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-padding-x: var( --kendo-toolbar-lg-padding-x, #{k-spacing(2.5)} ) !default;
+$kendo-toolbar-lg-padding-x: calc( var( --kendo-toolbar-lg-padding-x, #{k-spacing(4.5)} ) + 1px ) !default;
 
 /// The vertical padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-y: var( --kendo-toolbar-sm-padding-y, #{k-spacing(1)} ) !default;
+$kendo-toolbar-sm-padding-y: calc( var( --kendo-toolbar-sm-padding-y, #{k-spacing(1.5)} ) + 1px ) !default;
 /// The vertical padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-y: var( --kendo-toolbar-md-padding-y, #{k-spacing(2)} ) !default;
+$kendo-toolbar-md-padding-y: calc( var( --kendo-toolbar-md-padding-y, #{k-spacing(1.5)} ) + 1px ) !default;
 /// The vertical padding of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-padding-y: var( --kendo-toolbar-lg-padding-y, #{k-spacing(2.5)} ) !default;
+$kendo-toolbar-lg-padding-y: calc( var( --kendo-toolbar-lg-padding-y, #{k-spacing(1.5)} ) + 1px ) !default;
 
 /// The spacing between the tools of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-spacing: var( --kendo-toolbar-sm-spacing, #{k-spacing(2)} ) !default;
+$kendo-toolbar-sm-spacing: var( --kendo-toolbar-sm-spacing, #{k-spacing(3)} ) !default;
 /// The spacing between the tools of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-spacing: var( --kendo-toolbar-md-spacing, #{k-spacing(2)} ) !default;
+$kendo-toolbar-md-spacing: var( --kendo-toolbar-md-spacing, #{k-spacing(3)} ) !default;
 /// The spacing between the tools of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-spacing: var( --kendo-toolbar-lg-spacing, #{k-spacing(2)} ) !default;
+$kendo-toolbar-lg-spacing: var( --kendo-toolbar-lg-spacing, #{k-spacing(3)} ) !default;
 
 /// The height of the small Toolbar button separator.
 /// @group toolbar
@@ -64,7 +64,7 @@ $kendo-toolbar-bg: var( --kendo-toolbar-bg, #{k-color(surface)} ) !default;
 $kendo-toolbar-text: var( --kendo-toolbar-text, #{k-color(on-app-surface)} ) !default;
 /// The color of the border around the Toolbar.
 /// @group toolbar
-$kendo-toolbar-border: var( --kendo-toolbar-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-toolbar-border: var( --kendo-toolbar-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The left and right scroll overlay of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-scroll-overlay: var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-bg, color-mix(in srgb, k-color(app-surface) 0%, transparent)} ) !default;
@@ -75,10 +75,10 @@ $kendo-toolbar-scroll-overlay: var( --kendo-toolbar-scroll-overlay, #{$kendo-too
 $kendo-toolbar-outline-text: var( --kendo-toolbar-outline-text, null ) !default;
 /// The color of the border around the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-border: var( --kendo-toolbar-outline-border, #{k-color(border)} ) !default;
+$kendo-toolbar-outline-border: var( --kendo-toolbar-outline-border, $kendo-toolbar-border ) !default;
 /// The width of the border around the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-border-width: var( --kendo-toolbar-outline-border-width, #{$kendo-toolbar-border-width} ) !default;
+$kendo-toolbar-outline-border-width: var( --kendo-toolbar-outline-border-width, $kendo-toolbar-border-width ) !default;
 /// The left and right scroll overlay of the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-scroll-overlay: var( --kendo-toolbar-outline-scroll-overlay, #{k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent)} ) !default;
@@ -89,7 +89,7 @@ $kendo-toolbar-outline-scroll-overlay: var( --kendo-toolbar-outline-scroll-overl
 $kendo-toolbar-flat-text: var( --kendo-toolbar-flat-text, null ) !default;
 /// The color of the border around the flat Toolbar.
 /// @group toolbar
-$kendo-toolbar-flat-border: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-border} ) !default;
+$kendo-toolbar-flat-border: var( --kendo-toolbar-flat-border, transparent transparent color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The left and right scroll overlay of the flat Toolbar.
 /// @group toolbar
 $kendo-toolbar-flat-scroll-overlay: var( --kendo-toolbar-flat-scroll-overlay, #{k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent)} ) !default;
@@ -97,7 +97,7 @@ $kendo-toolbar-flat-scroll-overlay: var( --kendo-toolbar-flat-scroll-overlay, #{
 
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-separator-border: var( --kendo-toolbar-separator-border, inherit ) !default;
+$kendo-toolbar-separator-border: var( --kendo-toolbar-separator-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The width of the input in the Toolbar.
 /// @group toolbar

package/scss/tooltip/_layout.scss

@@ -5,15 +5,6 @@
 @mixin kendo-tooltip--layout() {
     @include kendo-tooltip--layout-base();
 
-    .k-tooltip {
-        padding-inline: $kendo-tooltip-padding-x;
-        padding-block: $kendo-tooltip-padding-y;
-        border-width: $kendo-tooltip-border-width;
-        font-family: $kendo-tooltip-font-family;
-        font-size: $kendo-tooltip-font-size;
-        line-height: $kendo-tooltip-line-height;
-    }
-
     .k-tooltip-icon {
         margin-inline-end: .5rem;
     }

package/scss/tooltip/_theme.scss

@@ -16,6 +16,11 @@
                 color: k-color(on-#{$name});
                 background-color: k-color(#{$name});
                 border-color: k-color(#{$name});
+
+                .k-tooltip-button {
+                    
+                    color: k-color(on-#{$name});
+                }
             }
         } @else {
             .k-tooltip-#{$name} {