@progress/kendo-theme-meridian 14.0.0-dev.1 → 14.0.0-dev.3

package/scss/pivotgrid/_variables.scss

@@ -69,24 +69,24 @@ $kendo-pivotgrid-alt-border: k-color(border-alt) !default;
 $kendo-pivotgrid-headers-bg: k-color(surface) !default;
 /// The text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: k-color(subtle) !default;
+$kendo-pivotgrid-headers-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// The border color of the PivotGrid header.
 /// @group pivotgrid
 $kendo-pivotgrid-headers-border: k-color(border) !default;
 
 /// The background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: k-color(base-subtle) !default;
+$kendo-pivotgrid-total-bg: k-color(secondary-subtle) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
+$kendo-pivotgrid-total-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// The border color of the PivotGrid total cells.
 /// @group pivotgrid
 $kendo-pivotgrid-total-border: k-color(border) !default;
 
 /// The hover background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-bg: k-color(base-hover) !default;
+$kendo-pivotgrid-hover-bg: color-mix(in srgb, k-color(base) 60%, transparent) !default;
 /// The hover text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-hover-text: null !default;
@@ -96,10 +96,10 @@ $kendo-pivotgrid-hover-border: null !default;
 
 /// The selected background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
+$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color(secondary) 12%, transparent) !default;
 /// The selected text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-text: null !default;
+$kendo-pivotgrid-selected-text: k-color(on-app-surface) !default;
 /// The selected border color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-selected-border: null !default;

package/scss/scrollview/_theme.scss

@@ -1,6 +1,32 @@
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/scrollview/_theme.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-scrollview--theme() {
     @include kendo-scrollview--theme-base();
+
+    .k-scrollview-next,
+    .k-scrollview-prev {
+        &:focus,
+        &.k-focus {
+            .k-icon::before {
+                @include focus-indicator( $kendo-scrollview-pagebutton-focus-outline-color, $inset: false, $type: "outline", $outline-offset: $kendo-scrollview-pagebutton-focus-outline-offset );
+            }
+        }
+    }
+
+    .k-scrollview-nav > .k-link {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-scrollview-pagebutton-focus-outline-color, $inset: false, $type: "outline", $outline-offset: $kendo-scrollview-pagebutton-focus-outline-offset );
+        }
+
+        &.k-primary {
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-scrollview-pagebutton-focus-outline-color, $inset: false, $type: "outline", $outline-offset: $kendo-scrollview-pagebutton-focus-outline-offset );
+            }
+        }
+    }
 }

package/scss/scrollview/_variables.scss

@@ -46,10 +46,16 @@ $kendo-scrollview-pagebutton-primary-bg: k-color(primary) !default;
 $kendo-scrollview-pagebutton-primary-border: k-color(primary) !default;
 /// The box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-shadow: 0 0 0 2px k-color(border-alt) !default;
+$kendo-scrollview-pagebutton-shadow: null !default;
 /// The box shadow of the selected ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-scrollview-pagebutton-primary-shadow: null !default;
+/// The outline color of the focused ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-focus-outline-color: k-color(subtle) !default;
+/// The outline offset of the focused ScrollView page button.
+/// @group scrollview
+$kendo-scrollview-pagebutton-focus-outline-offset: 1px !default;
 
 /// The offset of the ScrollView pager.
 /// @group scrollview

package/scss/spreadsheet/_layout.scss

@@ -12,4 +12,8 @@
     .k-spreadsheet-toolbar {
         border-radius: 0;
     }
+
+    .k-spreadsheet-sheets-bar {
+        border-inline-start: 0;
+    }
 }

package/scss/spreadsheet/_variables.scss

@@ -190,10 +190,13 @@ $kendo-spreadsheet-cell-dirty-border: k-color(error) !default;
 
 /// The horizontal padding of the Spreadsheet sheets bar.
 /// @group spreadsheet
-$kendo-spreadsheet-sheets-bar-padding-x: k-spacing(1) !default;
+$kendo-spreadsheet-sheets-bar-padding-x: k-spacing(2.5) !default;
 /// The vertical padding of the Spreadsheet sheets bar.
 /// @group spreadsheet
 $kendo-spreadsheet-sheets-bar-padding-y: k-spacing(1) !default;
+/// The gap between items in the Spreadsheet sheets bar.
+/// @group spreadsheet
+$kendo-spreadsheet-sheets-bar-gap: k-spacing(2.5) !default;
 /// The border width of the Spreadsheet sheets bar.
 /// @group spreadsheet
 $kendo-spreadsheet-sheets-bar-border-width: 1px !default;
@@ -341,6 +344,7 @@ $kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kend
     $kendo-spreadsheet-cell-dirty-border: $kendo-spreadsheet-cell-dirty-border,
     $kendo-spreadsheet-sheets-bar-padding-x: $kendo-spreadsheet-sheets-bar-padding-x,
     $kendo-spreadsheet-sheets-bar-padding-y: $kendo-spreadsheet-sheets-bar-padding-y,
+    $kendo-spreadsheet-sheets-bar-gap: $kendo-spreadsheet-sheets-bar-gap,
     $kendo-spreadsheet-sheets-bar-border-width: $kendo-spreadsheet-sheets-bar-border-width,
     $kendo-spreadsheet-insert-image-dialog-border-style: $kendo-spreadsheet-insert-image-dialog-border-style,
     $kendo-spreadsheet-insert-image-dialog-border-width: $kendo-spreadsheet-insert-image-dialog-border-width,

package/scss/stepper/_theme.scss

@@ -1,6 +1,29 @@
 @use "@progress/kendo-theme-core/scss/components/stepper/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-stepper--theme() {
     @include kendo-stepper--theme-base();
+
+    .k-stepper {
+        .k-step.k-focus,
+        .k-step .k-step-link:focus {
+            .k-step-label:only-child {
+                box-shadow: none;
+                @include focus-indicator( k-color(subtle), $inset: true, $type: "outline", $outline-width: 1px, $outline-offset: 1px );
+            }
+
+            .k-step-indicator::after {
+                border-color: k-color(subtle);
+            }
+        }
+
+        .k-step-current.k-focus,
+        .k-step-current .k-step-link:focus {
+            .k-step-indicator::after {
+                border-color: $kendo-stepper-indicator-current-border;
+            }
+        }
+    }
 }

package/scss/table/_variables.scss

@@ -86,7 +86,7 @@ $kendo-table-border: k-color(border) !default;
 $kendo-table-header-bg: k-color(surface) !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: k-color(on-app-surface) !default;
+$kendo-table-header-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// Border color of table headers.
 /// @group table
 $kendo-table-header-border: k-color(border) !default;

package/scss/tabstrip/_layout.scss

@@ -40,4 +40,14 @@
         }
     }
 
+    .k-tabstrip-scrollable {
+        &.k-tabstrip-top .k-tabstrip-items-wrapper {
+            align-items: end;
+        }
+
+        &.k-tabstrip-bottom .k-tabstrip-items-wrapper {
+            align-items: start;
+        }
+    }
+
 }

package/scss/tabstrip/_variables.scss

@@ -201,6 +201,10 @@ $kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
 /// @group tabstrip
 $kendo-tabstrip-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
+/// The spacing around the TabStrip scroll buttons (prev/next).
+/// @group tabstrip
+$kendo-tabstrip-scroll-button-spacing: k-spacing(1) !default;
+
 /// The outline width of the focused TabStrip item.
 /// @group tabstrip
 $kendo-tabstrip-item-focus-outline-width: 1px !default;
@@ -269,5 +273,6 @@ $kendo-tabstrip-item-focus-outline-offset: 3px !default;
     $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
     $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
     $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border,
-    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay
+    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay,
+    $kendo-tabstrip-scroll-button-spacing: $kendo-tabstrip-scroll-button-spacing
 );

package/scss/taskboard/_layout.scss

@@ -1,6 +1,10 @@
 @use "@progress/kendo-theme-core/scss/components/taskboard/_layout.scss" as *;
-
+@use "../core/_index.scss" as *;
 
 @mixin kendo-task-board--layout() {
     @include kendo-task-board--layout-base();
+
+    .k-taskboard-columns-container {
+        padding: k-spacing(1);
+    }
 }

package/scss/taskboard/_theme.scss

@@ -6,6 +6,18 @@
 @mixin kendo-task-board--theme() {
     @include kendo-task-board--theme-base();
 
+    .k-taskboard-column {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-taskboard-column-focus-outline-color,
+                $outline-width: $kendo-taskboard-column-focus-outline-width,
+                $outline-offset: $kendo-taskboard-column-focus-outline-offset
+            );
+        }
+    }
+
     .k-taskboard-card {
         &:focus,
         &.k-focus {

package/scss/taskboard/_variables.scss

@@ -59,7 +59,7 @@ $kendo-taskboard-content-padding-y: $kendo-taskboard-spacer !default;
 $kendo-taskboard-column-container-spacing-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The vertical padding of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-padding-y: k-spacing(0) !default;
+$kendo-taskboard-column-container-padding-y: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The horizontal padding of the TaskBoard column container.
 /// @group taskboard
 $kendo-taskboard-column-container-padding-x: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
@@ -94,7 +94,16 @@ $kendo-taskboard-column-focus-bg: null !default;
 $kendo-taskboard-column-focus-text: null !default;
 /// The border color of the focused TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-focus-border: k-color(border-alt) !default;
+$kendo-taskboard-column-focus-border: null !default;
+/// The outline color of the focused TaskBoard column.
+/// @group taskboard
+$kendo-taskboard-column-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused TaskBoard column.
+/// @group taskboard
+$kendo-taskboard-column-focus-outline-width: 1px !default;
+/// The outline offset of the focused TaskBoard column.
+/// @group taskboard
+$kendo-taskboard-column-focus-outline-offset: 1px !default;
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
@@ -212,7 +221,7 @@ $kendo-taskboard-card-hover-border: k-color(border-alt) !default;
 
 /// The border color of the focused TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-focus-border: k-color(border-alt) !default;
+$kendo-taskboard-card-focus-border: null !default;
 /// The shadow of the focused TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-focus-shadow: none !default;

package/scss/tilelayout/_variables.scss

@@ -26,7 +26,7 @@ $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;
 $kendo-tile-layout-card-shadow: k-elevation(2) !default;
 /// The focus box shadow of the TileLayout card.
 /// @group tile-layout
-$kendo-tile-layout-card-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-tile-layout-card-focus-shadow: null !default;
 
 /// The width of the border around the TileLayout hint.
 /// @group tile-layout

package/scss/timeline/_theme.scss

@@ -1,4 +1,5 @@
 @use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/timeline/_theme.scss" as *;
 
 
@@ -8,4 +9,13 @@
     .k-timeline-card .k-card {
         background-color: k-color(surface-alt);
     }
+
+    .k-timeline-track-item.k-focus .k-timeline-circle {
+        @include focus-indicator(
+            $type: "outline",
+            $indicator: $kendo-timeline-track-item-focus-outline-color,
+            $outline-width: $kendo-timeline-track-item-focus-outline-width,
+            $outline-offset: $kendo-timeline-track-item-focus-outline-offset
+        );
+    }
 }

package/scss/timeline/_variables.scss

@@ -77,7 +77,16 @@ $kendo-timeline-track-border-color: k-color(border) !default;
 
 /// The shadow of the Timeline's focused track items.
 /// @group timeline
-$kendo-timeline-track-item-focus-shadow: k-elevation(2) !default;
+$kendo-timeline-track-item-focus-shadow: null !default;
+/// The outline color of the focused Timeline track item.
+/// @group timeline
+$kendo-timeline-track-item-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused Timeline track item.
+/// @group timeline
+$kendo-timeline-track-item-focus-outline-width: 1px !default;
+/// The outline offset of the focused Timeline track item.
+/// @group timeline
+$kendo-timeline-track-item-focus-outline-offset: 1px !default;
 
 /// The offset of the Timeline track event.
 /// @group timeline
@@ -113,10 +122,10 @@ $kendo-timeline-flag-text: k-color(on-primary) !default;
 
 /// The width of the Timeline's flag callout.
 /// @group timeline
-$kendo-timeline-flag-callout-width: 14px !default;
+$kendo-timeline-flag-callout-width: 10px !default;
 /// The height of the Timeline's flag callout.
 /// @group timeline
-$kendo-timeline-flag-callout-height: 7px !default;
+$kendo-timeline-flag-callout-height: 10px !default;
 
 /// The bottom offset of the Timeline flag.
 /// @group timeline

package/scss/treeview/_variables.scss

@@ -101,7 +101,7 @@ $kendo-treeview-border: null !default;
 
 /// The background color of hovered TreeView items.
 /// @group treeview
-$kendo-treeview-item-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-treeview-item-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-text: k-color(primary-on-subtle) !default;
@@ -114,7 +114,7 @@ $kendo-treeview-item-hover-gradient: null !default;
 
 /// The background color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-bg: k-color(primary-subtle-active) !default;
+$kendo-treeview-item-selected-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-text: k-color(primary-on-subtle) !default;

package/scss/upload/_layout.scss

@@ -11,5 +11,9 @@
         .k-upload-dropzone {
             padding-inline-end: k-spacing(4);
         }
+
+        &:has(.k-upload-dropzone.k-hover) {
+            border: 1px dashed k-color(border-alt);
+        }
     }
 }

package/scss/upload/_variables.scss

@@ -43,13 +43,13 @@ $kendo-upload-dropzone-padding-y: k-spacing(2.5) !default;
 $kendo-upload-dropzone-text: k-color(on-app-surface) !default;
 /// The background color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-bg: k-color(surface) !default;
+$kendo-upload-dropzone-bg: k-color(surface-alt) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-border: $kendo-upload-border !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-upload-dropzone-hover-bg: null !default;
 
 /// The text color of the Upload status message.
 /// @group upload