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

package/scss/switch/_variables.scss

@@ -74,7 +74,7 @@ $kendo-switch-off-track-disabled-border: var( --kendo-switch-off-track-disabled-
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-bg, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
+$kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-bg, k-color(subtle) ) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: var( --kendo-switch-off-thumb-text, inherit ) !default;

package/scss/table/_layout.scss

@@ -10,20 +10,6 @@
         font-weight: $kendo-table-header-font-weight;
     }
 
-    .k-table-group-sticky-header,
-    .k-table-group-header {
-        flex: none;
-        position: relative;
-        z-index: 1;
-
-        .k-table-th {
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            align-content: center;
-        }
-    }
-
     .k-table-list {
 
         .k-table-row:last-child .k-table-td {

package/scss/tabstrip/_variables.scss

@@ -129,13 +129,13 @@ $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, color-mix(in srgb, #{k-color(on-app-surface) 12%, transparent}) ) !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-semibold, 600 ) ) !default;
@@ -145,7 +145,7 @@ $kendo-tabstrip-item-selected-font-weight: var( --kendo-tabstrip-item-selected-f
 $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.
@@ -153,7 +153,7 @@ $kendo-tabstrip-item-dragging-text: var( --kendo-tabstrip-item-dragging-text, #{
 $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

package/scss/timeline/_variables.scss

@@ -113,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/timeselector/_variables.scss

@@ -36,7 +36,7 @@ $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, k-color(primary) ) !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: null !default;

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,23 +4,23 @@
 
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-x: var( --kendo-toolbar-sm-padding-x, calc( #{k-spacing(2)} + 1px ) ) !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, calc( #{k-spacing(3)} + 1px ) ) !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, calc( #{k-spacing(4.5)} + 1px )) !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, calc( #{k-spacing(0.5)} + 1px ) ) !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, calc( #{k-spacing(0.5)} + 1px ) ) !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, calc( #{k-spacing(0.5)} + 1px ) ) !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
@@ -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, transparent ) !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/treeview/_variables.scss

@@ -168,7 +168,7 @@ $kendo-treeview-item-disabled-border: var( --kendo-treeview-item-disabled-border
 $kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-bg, transparent ) !default;
 /// The text color of the Load More button in the TreeView
 /// @group treeview
-$kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-text, k-color(primary) ) !default;
+$kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-text, k-color(primary-on-surface) ) !default;
 /// The border color of the Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-border, inherit ) !default;

package/scss/upload/_layout.scss

@@ -16,6 +16,10 @@
             margin-inline-end: 0;
         }
 
+        .k-upload-files .k-file {
+            padding-block: $kendo-upload-item-padding-y;
+        }
+
         .k-file-size,
         .k-file-validation-message {
             line-height: var( --kendo-line-height-xs, normal );

package/scss/upload/_variables.scss

@@ -29,10 +29,10 @@ $kendo-upload-border: var( --kendo-upload-border, color-mix(in srgb, k-color(bor
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-x: var( --kendo-upload-dropzone-padding-x, calc( #{k-spacing(3)} + 1px ) ) !default;
+$kendo-upload-dropzone-padding-x: calc( var( --kendo-upload-dropzone-padding-x, #{k-spacing(3)} ) + 1px ) !default;
 /// The vertical padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-y: var( --kendo-upload-dropzone-padding-y, calc( #{k-spacing(0.5)} + 1px ) ) !default;
+$kendo-upload-dropzone-padding-y: calc( var( --kendo-upload-dropzone-padding-y, #{k-spacing(0.5)} ) + 1px ) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-text: var( --kendo-upload-dropzone-text, k-color(subtle) ) !default;
@@ -55,10 +55,10 @@ $kendo-upload-status-text-opacity: var( --kendo-upload-status-text-opacity, null
 
 /// The horizontal padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-x: var( --kendo-upload-item-padding-x, $kendo-upload-dropzone-padding-x ) !default;
+$kendo-upload-item-padding-x: calc( var( --kendo-upload-item-padding-x, #{k-spacing(3)} ) + 1px ) !default;
 /// The vertical padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-y: var( --kendo-upload-item-padding-y, $kendo-upload-dropzone-padding-y ) !default;
+$kendo-upload-item-padding-y: calc( var( --kendo-upload-item-padding-y, #{k-spacing(0.5)} ) + 1px ) !default;
 
 /// The vertical spacing between uploaded batch items.
 /// @group upload

package/scss/window/_layout.scss

@@ -13,8 +13,10 @@
         }
     }
 
-    .k-window-titlebar {
-        padding-block-start: $kendo-window-titlebar-padding-x;
+    .k-window-content:first-child,
+    .k-window-content:last-child {
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
     // Title bar title text
@@ -24,10 +26,6 @@
         margin-block: 0;
     }
 
-    .k-window-content {
-        padding-block-start: 0;
-    }
-
     // Buttons Layout
     .k-window-actions {
         gap: $kendo-window-buttongroup-spacing;

package/scss/window/_variables.scss

@@ -22,7 +22,7 @@ $kendo-window-line-height: var( --kendo-window-line-height, var( --kendo-line-he
 $kendo-window-titlebar-padding-x: var( --kendo-window-titlebar-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-y: var( --kendo-window-titlebar-padding-y, k-spacing(4) ) !default;
+$kendo-window-titlebar-padding-y: var( --kendo-window-titlebar-padding-y, k-spacing(6) k-spacing(4) ) !default;
 /// The width of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-width: var( --kendo-window-titlebar-border-width, 0 ) !default;
@@ -55,7 +55,7 @@ $kendo-window-action-hover-opacity: var( --kendo-window-action-hover-opacity, 1
 $kendo-window-inner-padding-x: var( --kendo-window-inner-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-y: var( --kendo-window-inner-padding-y, k-spacing(6) ) !default;
+$kendo-window-inner-padding-y: var( --kendo-window-inner-padding-y, k-spacing(3) ) !default;
 
 /// The horizontal padding of the Window action buttons.
 /// @group window