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

package/scss/listview/_variables.scss

@@ -41,7 +41,7 @@ $kendo-listview-border: var( --kendo-listview-border, color-mix(in srgb, k-color
 
 /// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, initial ) !default;
+$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, k-color(on-app-surface) ) !default;
 /// The background color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-bg: var( --kendo-listview-item-selected-bg, #{color-mix(in srgb, k-color(on-app-surface) 12%, transparent)} ) !default;
@@ -51,7 +51,7 @@ $kendo-listview-item-selected-border: var( --kendo-listview-item-selected-border
 
 /// The text color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, initial ) !default;
+$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, k-color(on-app-surface) ) !default;
 /// The background color of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-bg: var( --kendo-listview-item-focus-bg, initial ) !default;

package/scss/menu/_layout.scss

@@ -32,6 +32,11 @@
         }
     }
 
+    .k-menu-group {
+        padding: k-spacing(1);
+        gap: k-spacing(0.5);
+    }
+
     // Sub menu group focus styles
     .k-menu-group,
     .k-menu.k-context-menu {

package/scss/menu/_variables.scss

@@ -146,7 +146,7 @@ $kendo-menu-popup-bg: var( --kendo-menu-popup-bg, #{k-color(surface-alt)} ) !def
 $kendo-menu-popup-border: var( --kendo-menu-popup-border, initial ) !default;
 /// The shadow of the Menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, var( --kendo-box-shadow-depth-6, none ) ) !default;
+$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, k-elevation(5) ) !default;
 
 /// The horizontal padding of the Menu item in popup.
 /// @group menu

package/scss/panelbar/_variables.scss

@@ -57,7 +57,7 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: var( --kendo-panelbar-bg, #{k-color(app-surface)} ) !default;
+$kendo-panelbar-bg: var( --kendo-panelbar-bg, #{k-color(base-subtle)} ) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-text: var( --kendo-panelbar-text, #{k-color(on-app-surface)} ) !default;

package/scss/pdf-viewer/_theme.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-pdf-viewer--theme() {
     @include kendo-pdf-viewer--theme-base();
-
-    .k-pdf-viewer .k-toolbar {
-        border-bottom-color: transparent;
-    }
 }

package/scss/popup/_variables.scss

@@ -39,7 +39,7 @@ $kendo-popup-text: var( --kendo-popup-text, #{k-color(on-app-surface)} ) !defaul
 $kendo-popup-border: var( --kendo-popup-border, transparent ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-popup-shadow, var( --kendo-box-shadow-depth-5, none ) ) !default;
+$kendo-popup-shadow: var( --kendo-popup-shadow, k-elevation(5) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with (
     $kendo-popup-border-width: $kendo-popup-border-width,

package/scss/progressbar/_variables.scss

@@ -34,7 +34,7 @@ $kendo-progressbar-padding-y: var( --kendo-progressbar-padding-y, #{k-spacing(0)
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(secondary)} ) !default;
+$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(secondary-on-surface)} ) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: var( --kendo-progressbar-text, #{k-color(on-app-surface)} ) !default;

package/scss/scheduler/_variables.scss

@@ -83,7 +83,7 @@ $kendo-scheduler-event-min-height: var( --kendo-scheduler-event-min-height, calc
 $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: var( --kendo-scheduler-event-text, k-color(app-surface) ) !default;
+$kendo-scheduler-event-text: var( --kendo-scheduler-event-text, k-color(on-primary) ) !default;
 /// The border color of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: var( --kendo-scheduler-event-border, $kendo-scheduler-event-bg ) !default;

package/scss/skeleton/_variables.scss

@@ -17,7 +17,7 @@ $kendo-skeleton-circle-border-radius: var( --kendo-skeleton-circle-border-radius
 
 /// The background color of the Skeleton item.
 /// @group skeleton
-$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, k-color(secondary) ) !default;
+$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, color-mix(in srgb, k-color(on-app-surface) 9%, transparent) ) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: var( --kendo-skeleton-wave-bg, k-color(base) ) !default;

package/scss/spreadsheet/_variables.scss

@@ -106,14 +106,14 @@ $kendo-spreadsheet-selection-bg: var( --kendo-spreadsheet-selection-bg, transpar
 $kendo-spreadsheet-selection-text: var( --kendo-spreadsheet-selection-text, null ) !default;
 /// The border color of the Spreadsheet selection.
 /// @group spreadsheet
-$kendo-spreadsheet-selection-border: var( --kendo-spreadsheet-selection-border, k-color(primary) ) !default;
+$kendo-spreadsheet-selection-border: var( --kendo-spreadsheet-selection-border, k-color(primary-on-surface) ) !default;
 /// The shadow of the Spreadsheet selection.
 /// @group spreadsheet
 $kendo-spreadsheet-selection-shadow: var( --kendo-spreadsheet-selection-shadow, none ) !default;
 
 /// The background color of the Spreadsheet single selection.
 /// @group spreadsheet
-$kendo-spreadsheet-single-selection-bg: var( --kendo-spreadsheet-single-selection-bg, k-color(primary) ) !default;
+$kendo-spreadsheet-single-selection-bg: var( --kendo-spreadsheet-single-selection-bg, k-color(primary-on-surface) ) !default;
 /// The text color of the Spreadsheet single selection.
 /// @group spreadsheet
 $kendo-spreadsheet-single-selection-text: var( --kendo-spreadsheet-single-selection-text, null ) !default;

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