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

package/scss/spreadsheet/_layout.scss

@@ -12,50 +12,6 @@
 @mixin kendo-spreadsheet--layout() {
     @include kendo-spreadsheet--layout-base();
 
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {
-        padding: $kendo-toolbar-md-padding-y;
-    }
-
-    // Action bar
-    .k-spreadsheet-action-bar {
-        border-width: 0 0 $kendo-spreadsheet-action-bar-border-width;
-        padding-block: $kendo-spreadsheet-action-bar-padding-y;
-        padding-inline: $kendo-spreadsheet-action-bar-padding-x;
-        font-size: $kendo-spreadsheet-action-bar-font-size;
-        font-family: $kendo-spreadsheet-action-bar-font-family;
-        gap: $kendo-spreadsheet-action-bar-spacing;
-    }
-    .k-spreadsheet-formula-bar {
-        gap: $kendo-spreadsheet-formula-bar-gap;
-
-        .k-spreadsheet-formula-input {
-            padding-inline: $kendo-spreadsheet-formula-input-padding-x;
-            padding-block: $kendo-spreadsheet-formula-input-padding-y;
-            line-height: $kendo-spreadsheet-formula-input-line-height;
-        }
-    }
-    .k-spreadsheet-formula-list {
-        .k-item {
-            padding-inline: $kendo-list-md-item-padding-x;
-            padding-block: $kendo-list-md-item-padding-y;
-        }
-    }
-
-    // Cell editor
-    .k-spreadsheet-cell-editor {
-        padding-block: $kendo-spreadsheet-cell-editor-padding-y;
-        padding-inline: $kendo-spreadsheet-cell-editor-padding-x;
-        line-height: $kendo-spreadsheet-cell-editor-line-height;
-    }
-
-    // Sheets bar
-    .k-spreadsheet-sheets-bar {
-        padding-block-end: $kendo-spreadsheet-sheets-bar-padding-y;
-        padding-inline: $kendo-spreadsheet-sheets-bar-padding-x;
-        border-width: $kendo-spreadsheet-border-width 0 0;
-    }
-
     .k-spreadsheet-sheets-items {
         .k-item {
             .k-spreadsheet-sheets-remove {
@@ -65,44 +21,11 @@
         }
     }
 
-    // Spreadsheet view
-    .k-spreadsheet-view {
-        font-family: $kendo-spreadsheet-view-font-family;
-        font-size: $kendo-spreadsheet-view-font-size;
-    }
-
-    .k-spreadsheet-fixed-container {
-        width: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) );
-        height: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) );
-    }
-
-    // Cells
-    .k-spreadsheet-cell {
-        padding-block: $kendo-spreadsheet-cell-padding-y;
-        padding-inline: $kendo-spreadsheet-cell-padding-x;
-    }
-
     // Selection
     .k-spreadsheet .k-spreadsheet-selection {
         border-width: 2px;
     }
 
-    // Comments
-    .k-spreadsheet-has-comment::after {
-        inset-block-start: 0;
-        inset-inline-start: auto;
-        inset-inline-end: 0;
-    }
-
-    // Validation
-    .k-dirty {
-        inset-inline-start: 0;
-        inset-inline-end: auto;
-    }
-
-    .k-spreadsheet-filter {
-        padding: k-spacing(1);
-    }
 
     // Filter menu
     .k-spreadsheet-filter-menu {
@@ -129,94 +52,14 @@
         }
     }
 
-    .k-spreadsheet-clipboard,
-    .k-spreadsheet-clipboard-paste {
-        inset-block-start: 0;
-        inset-inline-end: 0;
-    }
-
-    // Format preview window
-    .k-spreadsheet-format-cells {
-        .k-spreadsheet-preview {
-            margin-block-start: k-spacing(2);
-        }
-
-        .k-list-scroller {
-            margin-block-start: k-spacing(2);
-        }
-    }
-
-    // Export dialog
-    .k-export-config {
-        .k-edit-field {
-            margin-inline-start: 5%;
-            float: inline-start;
-        }
-
-        .k-page-orientation {
-            inset-inline-end: 0;
-            inset-block-start: k-spacing(2);
-        }
-    }
-
     // Insert image dialog
     .k-spreadsheet-insert-image-dialog {
-        border-radius: $kendo-spreadsheet-insert-image-dialog-preview-border-radius;
-        border-style: $kendo-spreadsheet-insert-image-dialog-border-style;
-        border-width: $kendo-spreadsheet-insert-image-dialog-border-width;
-
         label {
-            width: $kendo-spreadsheet-insert-image-dialog-preview-width;
-            height: $kendo-spreadsheet-insert-image-dialog-preview-height;
             background-image: $kendo-spreadsheet-insert-image-dialog-img;
-
-            div {
-                margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom;
-            }
-        }
-    }
-
-    .k-spreadsheet-drawing {
-        &.k-spreadsheet-active-drawing {
-            outline-style: $kendo-spreadsheet-drawing-outline-style;
-            outline-width: $kendo-spreadsheet-drawing-outline-width;
-        }
-
-        .k-spreadsheet-drawing-image {
-            inset-block-start: 0;
-            inset-inline-start: 0;
-        }
-
-        .k-spreadsheet-drawing-handle {
-            width: $kendo-spreadsheet-drawing-handle-width;
-            height: $kendo-spreadsheet-drawing-handle-height;
-            border-style: $kendo-spreadsheet-drawing-handle-border-style;
-            border-width: $kendo-spreadsheet-drawing-handle-border-width;
-            border-radius: $kendo-spreadsheet-drawing-handle-border-radius;
-
-            // stylelint-disable selector-class-pattern, declaration-block-single-line-max-declarations
-            &.N { inset-inline-start: 50%; inset-block-start: 0; cursor: ns-resize; }
-            &.NE { inset-inline-start: 100%; inset-block-start: 0; cursor: nesw-resize; }
-            &.E { inset-inline-start: 100%; inset-block-start: 50%; cursor: ew-resize; }
-            &.SE { inset-inline-start: 100%; inset-block-start: 100%; cursor: nwse-resize; }
-            &.S { inset-inline-start: 50%; inset-block-start: 100%; cursor: ns-resize; }
-            &.SW { inset-inline-start: 0; inset-block-start: 100%; cursor: nesw-resize; }
-            &.W { inset-inline-start: 0; inset-block-start: 50%; cursor: ew-resize; }
-            &.NW { inset-inline-start: 0; inset-block-start: 0; cursor: nwse-resize; }
-            // stylelint-enable selector-class-pattern, declaration-block-single-line-max-declarations
-        }
-
-        .k-spreadsheet-insert-image-dialog {
-            .k-spreadsheet-has-image {
-                &:hover,
-                &.k-hover {
-                    border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius;
-                }
-            }
         }
     }
 
-    .k-spreadsheet-tabstrip {
-        padding: 0;
+    .k-spreadsheet .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item.k-active::after {
+        top: unset;
     }
 }

package/scss/spreadsheet/_theme.scss

@@ -6,43 +6,13 @@
 @mixin kendo-spreadsheet--theme() {
     @include kendo-spreadsheet--theme-base();
 
-
-    // Filter button
-    .k-spreadsheet .k-filter-range {
-        border-color: $kendo-spreadsheet-primary-border;
-    }
-    .k-spreadsheet-filter {
-        @include fill(
-            $kendo-spreadsheet-filter-button-text,
-            $kendo-spreadsheet-filter-button-bg,
-            $kendo-spreadsheet-filter-button-border
-        );
-        box-shadow: inset 0 0 0 1px $kendo-spreadsheet-filter-button-border;
-
-        &:hover {
-            @include fill(
-                $kendo-spreadsheet-filter-button-hover-text,
-                $kendo-spreadsheet-filter-button-hover-bg,
-                $kendo-spreadsheet-filter-button-hover-border
-            );
-        }
-
-        &.k-active {
-            @include fill(
-                $kendo-spreadsheet-filter-button-active-text,
-                $kendo-spreadsheet-filter-button-active-bg,
-                $kendo-spreadsheet-filter-button-active-border
-            );
-        }
-
+    .k-spreadsheet-view,
+    .k-spreadsheet-filter-menu .k-spreadsheet-value-treeview-wrapper {
+        background-color: $kendo-spreadsheet-view-bg;
     }
 
-    // Filter menu legacy - delete after new rendering adoption R3 23
-    .k-spreadsheet-filter-menu {
-
-        .k-columnmenu-item > .k-icon:first-child {
-            color: $kendo-spreadsheet-filter-menu-icon-color;
-        }
+    .k-spreadsheet .k-tabstrip-items-wrapper .k-item.k-active {
+        background-color: unset;
     }
 
 }

package/scss/spreadsheet/_variables.scss

@@ -19,20 +19,17 @@ $kendo-spreadsheet-font-size: var( --kendo-spreadsheet-font-size, var( --kendo-f
 $kendo-spreadsheet-line-height: var( --kendo-spreadsheet-line-height, var( --kendo-line-height, initial ) ) !default;
 /// The background color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-bg: var( --kendo-spreadsheet-bg, k-color(surface-alt) ) !default;
+$kendo-spreadsheet-bg: var( --kendo-spreadsheet-bg, k-color(app-surface) ) !default;
 /// The text color of the Spreadsheet.
 /// @group spreadsheet
 $kendo-spreadsheet-text: var( --kendo-spreadsheet-text, k-color(on-app-surface) ) !default;
 /// The border color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-border: var( --kendo-spreadsheet-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
-/// The primary border color of the Spreadsheet.
-/// @group spreadsheet
-$kendo-spreadsheet-primary-border: var( --kendo-spreadsheet-primary-border, k-color(primary) ) !default;
+$kendo-spreadsheet-border: var( --kendo-spreadsheet-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The background color of the Spreadsheet header.
 /// @group spreadsheet
-$kendo-spreadsheet-header-bg: var( --kendo-spreadsheet-header-bg, k-color(surface) ) !default;
+$kendo-spreadsheet-header-bg: var( --kendo-spreadsheet-header-bg, k-color(app-surface) ) !default;
 /// The text color of the Spreadsheet header.
 /// @group spreadsheet
 $kendo-spreadsheet-header-text: var( --kendo-spreadsheet-header-text, $kendo-table-header-text ) !default;
@@ -57,6 +54,10 @@ $kendo-spreadsheet-popup-menu-padding-x: var( --kendo-spreadsheet-popup-menu-pad
 /// @group spreadsheet
 $kendo-spreadsheet-popup-menu-padding-y: var( --kendo-spreadsheet-popup-menu-padding-y, $kendo-spreadsheet-popup-menu-padding-x ) !default;
 
+/// The background color of the Spreadsheet view.
+/// @group spreadsheet
+$kendo-spreadsheet-view-bg: var( --kendo-spreadsheet-view-bg, k-color(surface) ) !default;
+
 /// The border width of the Spreadsheet action bar.
 /// @group spreadsheet
 $kendo-spreadsheet-action-bar-border-width: var( --kendo-spreadsheet-action-bar-border-width, 1px ) !default;
@@ -105,7 +106,7 @@ $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, $kendo-spreadsheet-primary-border ) !default;
+$kendo-spreadsheet-selection-border: var( --kendo-spreadsheet-selection-border, k-color(primary) ) !default;
 /// The shadow of the Spreadsheet selection.
 /// @group spreadsheet
 $kendo-spreadsheet-selection-shadow: var( --kendo-spreadsheet-selection-shadow, none ) !default;
@@ -205,39 +206,9 @@ $kendo-spreadsheet-sheets-remove-inline-end: var( --kendo-spreadsheet-sheets-rem
 /// @group spreadsheet
 $kendo-filter-menu-padding-left: var( --kendo-filter-menu-padding-left, calc( var( --kendo-icon-size, 1rem ) + 2 * k-spacing(1) ) ) !default;
 
-/// The text color of the Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-text: var( --kendo-spreadsheet-filter-button-text, k-color(on-app-surface) ) !default;
-/// The background color of the Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-bg: var( --kendo-spreadsheet-filter-button-bg, k-color(app-surface) ) !default;
-/// The border color of the Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-border: var( --kendo-spreadsheet-filter-button-border, k-color(border) ) !default;
-
-/// The text color of the hovered Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-text: var( --kendo-spreadsheet-filter-button-hover-text, k-color(on-app-surface) ) !default;
-/// The background color of the hovered Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-bg: var( --kendo-spreadsheet-filter-button-hover-bg, k-color(base-hover) ) !default;
-/// The border color of the hovered Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-hover-border: var( --kendo-spreadsheet-filter-button-hover-border, k-color(border) ) !default;
-
-/// The text color of the active Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-text: var( --kendo-spreadsheet-filter-button-active-text, k-color(on-app-surface) ) !default;
-/// The background color of the active Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-bg: var( --kendo-spreadsheet-filter-button-active-bg, k-color(base-active) ) !default;
-/// The border color of the active Spreadsheet filter Button.
-/// @group spreadsheet
-$kendo-spreadsheet-filter-button-active-border: var( --kendo-spreadsheet-filter-button-active-border, k-color(border) ) !default;
-
-/// The color of the Spreadsheet Menu icon.
+/// The padding of the Spreadsheet filter.
 /// @group spreadsheet
-$kendo-spreadsheet-filter-menu-icon-color: var( --kendo-spreadsheet-filter-menu-icon-color, k-color(primary) ) !default;
+$kendo-spreadsheet-filter-padding: var( --kendo-spreadsheet-filter-padding, k-spacing(1) ) !default;
 
 /// The border style of the Spreadsheet image Dialog.
 /// @group spreadsheet
@@ -271,7 +242,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: var( --kendo-spre
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: var( --kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius, var( --kendo-border-radius-md, initial ) ) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: var( --kendo-spreadsheet-insert-image-dialog-overlay-hover-text, k-color(surface-alt) ) !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: var( --kendo-spreadsheet-insert-image-dialog-overlay-hover-text, k-color(app-surface) ) !default;
 
 /// The width of the Spreadsheet drawing handle.
 /// @group spreadsheet
@@ -372,6 +343,7 @@ $kendo-spreadsheet-insert-image-dialog-img: url("data:image/png;base64,iVBORw0KG
     $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-border-width: $kendo-spreadsheet-sheets-bar-border-width,
+    $kendo-spreadsheet-filter-padding: $kendo-spreadsheet-filter-padding,
     $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,
     $kendo-spreadsheet-insert-image-dialog-text-margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom,

package/scss/stepper/_layout.scss

@@ -9,14 +9,10 @@
         font-weight: $kendo-stepper-current-label-font-weight;
     }
 
-.k-stepper .k-step-disabled,
+    .k-stepper .k-step-disabled,
     .k-stepper .k-step.k-disabled {
         .k-step-label {
             font-weight: normal;
         }
-
-        .k-step-indicator {
-            border: 0;
-        }
     }
 }

package/scss/stepper/_theme.scss

@@ -10,7 +10,13 @@
             &.k-focus,
             .k-step-link:focus  {
                 .k-step-label:only-child {
-                    @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size color-mix(in srgb, k-color(border) 16%, transparent) );
+                    @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color(border-alt) );
+                }
+
+                .k-step-indicator::after {
+                    border-color: unset;
+                    outline: 2px solid k-color(border-alt);
+                    outline-offset: -2px;
                 }
             }
 

package/scss/stepper/_variables.scss

@@ -72,13 +72,13 @@ $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-foc
 
 /// The background color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-bg: var( --kendo-stepper-indicator-bg, k-color(surface-alt) ) !default;
+$kendo-stepper-indicator-bg: var( --kendo-stepper-indicator-bg, k-color(base) ) !default;
 /// The text color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-text: var( --kendo-stepper-indicator-text, k-color(on-app-surface) ) !default;
+$kendo-stepper-indicator-text: var( --kendo-stepper-indicator-text, k-color(on-base) ) !default;
 /// The border color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-border: var( --kendo-stepper-indicator-border, k-color(border) ) !default;
+$kendo-stepper-indicator-border: var( --kendo-stepper-indicator-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The background color of the hovered Stepper indicator.
 /// @group stepper
@@ -92,13 +92,13 @@ $kendo-stepper-indicator-hover-border: var( --kendo-stepper-indicator-hover-bord
 
 /// The background color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-bg: var( --kendo-stepper-indicator-disabled-bg, k-color(base-subtle) ) !default;
+$kendo-stepper-indicator-disabled-bg: var( --kendo-stepper-indicator-disabled-bg, color-mix(in srgb, k-color(on-base) 7%, transparent) ) !default;
 /// The text color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-text: var( --kendo-stepper-indicator-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-stepper-indicator-disabled-text: var( --kendo-stepper-indicator-disabled-text, color-mix(in srgb, k-color(on-base) 30%, transparent) ) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-border: var( --kendo-stepper-indicator-disabled-border, transparent ) !default;
+$kendo-stepper-indicator-disabled-border: var( --kendo-stepper-indicator-disabled-border, color-mix(in srgb, k-color(on-base) 14%, transparent) ) !default;
 
 /// The background color of the Stepper's done indicator.
 /// @group stepper
@@ -122,13 +122,13 @@ $kendo-stepper-indicator-done-hover-border: var( --kendo-stepper-indicator-done-
 
 /// The background color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-bg: var( --kendo-stepper-indicator-done-disabled-bg, color-mix(in srgb, k-color(primary) 22%, transparent) ) !default;
+$kendo-stepper-indicator-done-disabled-bg: var( --kendo-stepper-indicator-done-disabled-bg, color-mix(in srgb, k-color(primary) 46%, transparent) ) !default;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-text: var( --kendo-stepper-indicator-done-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-stepper-indicator-done-disabled-text: var( --kendo-stepper-indicator-done-disabled-text, k-color(on-primary) ) !default;
 /// The border color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-border: var( --kendo-stepper-indicator-done-disabled-border, transparent ) !default;
+$kendo-stepper-indicator-done-disabled-border: var( --kendo-stepper-indicator-done-disabled-border, color-mix(in srgb, k-color(primary) 46%, transparent) ) !default;
 
 /// The background color of the Stepper current indicator.
 /// @group stepper
@@ -177,7 +177,7 @@ $kendo-stepper-label-hover-text: var( --kendo-stepper-label-hover-text, $kendo-s
 $kendo-stepper-label-disabled-text: var( --kendo-stepper-label-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 /// The font weight of the disabled Stepper label.
 /// @group stepper
-$kendo-stepper-current-label-font-weight: var( --kendo-stepper-current-label-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
+$kendo-stepper-current-label-font-weight: var( --kendo-stepper-current-label-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper

package/scss/suggestion/_layout.scss

@@ -4,4 +4,13 @@
 
 @mixin kendo-suggestion--layout() {
     @include kendo-suggestion--layout-base();
+
+    .k-suggestion {
+        &:focus,
+        &.k-focus {
+            outline-width: calc( #{$kendo-suggestion-border-width} * 2);
+            outline-style: solid;
+            outline-offset: calc( #{$kendo-suggestion-border-width} * 2 * -1);
+        }
+    }
 }

package/scss/suggestion/_theme.scss

@@ -8,9 +8,9 @@
     .k-suggestion {
         &:focus,
         &.k-focus {
-            outline: 1px solid k-color(surface);
-            outline-offset: -2px;
-            box-shadow: inset 0 0 $kendo-suggestion-focus-shadow-blur $kendo-suggestion-focus-shadow-spread $kendo-suggestion-focus-shadow-color;
+            outline-color: $kendo-suggestion-focus-shadow-color;
+            box-shadow: inset 0 0 $kendo-suggestion-focus-shadow-blur $kendo-suggestion-focus-shadow-spread $kendo-suggestion-focus-shadow-color,
+                        inset 0 0 0 calc( #{$kendo-suggestion-border-width} * 2 ) k-color(surface);
         }
     }
 }

package/scss/suggestion/_variables.scss

@@ -59,10 +59,10 @@ $kendo-suggestion-active-border: var( --kendo-suggestion-active-border, #{k-colo
 $kendo-suggestion-focus-shadow-blur: var( --kendo-suggestion-focus-shadow-blur, 0 ) !default;
 /// The shadow spread of the focused Suggestion.
 /// @group suggestion
-$kendo-suggestion-focus-shadow-spread: var( --kendo-suggestion-focus-shadow-spread, 2px ) !default;
+$kendo-suggestion-focus-shadow-spread: var( --kendo-suggestion-focus-shadow-spread, 1px ) !default;
 /// The shadow color of the focused Suggestion.
 /// @group suggestion
-$kendo-suggestion-focus-shadow-color: var( --kendo-suggestion-focus-shadow-color, #{k-color(border-alt)} ) !default;
+$kendo-suggestion-focus-shadow-color: var( --kendo-suggestion-focus-shadow-color, #{k-color(on-base)} ) !default;
 
 $kendo-suggestion-theme-colors: (
     "primary": k-color(primary),

package/scss/switch/_layout.scss

@@ -11,8 +11,9 @@
         &::after {
             content: "";
             position: absolute;
-            inset: -2px;
+            inset: -4px;
             z-index: 1;
+            border-radius: k-border-radius(md);
         }
     }
 

package/scss/switch/_variables.scss

@@ -24,13 +24,13 @@ $kendo-switch-label-display: var( --kendo-switch-label-display, none ) !default;
 /// @group switch
 $kendo-switch-sizes: (
     sm: ( font-size: 10px, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ),
-    md: ( font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ),
-    lg: ( font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px )
+    md: ( font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 4px, label-offset: 5px ),
+    lg: ( font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 18px, thumb-height: 18px, thumb-offset: 5px, label-offset: 6px )
 ) !default;
 
 /// The ring around the focused Switch.
 /// @group switch
-$kendo-switch-focus-ring: var( --kendo-switch-focus-ring, 1px solid k-color(base-emphasis) ) !default;
+$kendo-switch-focus-ring: var( --kendo-switch-focus-ring, 2px solid k-color(border-alt) ) !default;
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
@@ -70,11 +70,11 @@ $kendo-switch-off-track-disabled-bg: var( --kendo-switch-off-track-disabled-bg,
 $kendo-switch-off-track-disabled-text: var( --kendo-switch-off-track-disabled-text, k-color(on-app-surface) ) !default;
 /// The border color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-border: var( --kendo-switch-off-track-disabled-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-switch-off-track-disabled-border: var( --kendo-switch-off-track-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-bg, k-color(subtle) ) !default;
+$kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-bg, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !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;
@@ -94,13 +94,13 @@ $kendo-switch-off-thumb-hover-border: var( --kendo-switch-off-thumb-hover-border
 
 /// The background of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-bg: var( --kendo-switch-off-thumb-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-switch-off-thumb-disabled-bg: var( --kendo-switch-off-thumb-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The text color of the thumb when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-disabled-text: var( --kendo-switch-off-thumb-disabled-text, inherit ) !default;
 /// The border color of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-border: var( --kendo-switch-off-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-switch-off-thumb-disabled-border: var( --kendo-switch-off-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 
 /// The background of the track when the Switch is checked.
 /// @group switch
@@ -134,7 +134,7 @@ $kendo-switch-on-track-focus-border: var( --kendo-switch-on-track-focus-border,
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-bg: var( --kendo-switch-on-track-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-switch-on-track-disabled-bg: var( --kendo-switch-on-track-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-text: var( --kendo-switch-on-track-disabled-text, k-color(app-surface) ) !default;
@@ -164,13 +164,13 @@ $kendo-switch-on-thumb-hover-border: var( --kendo-switch-on-thumb-hover-border,
 
 /// The background of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-bg: var( --kendo-switch-on-thumb-disabled-bg, k-color(surface) ) !default;
+$kendo-switch-on-thumb-disabled-bg: var( --kendo-switch-on-thumb-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The text color of the thumb when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-disabled-text: var( --kendo-switch-on-thumb-disabled-text, inherit ) !default;
 /// The border color of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-border: var( --kendo-switch-on-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) ) !default;
+$kendo-switch-on-thumb-disabled-border: var( --kendo-switch-on-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with (
     $kendo-switch-font-family: $kendo-switch-font-family,

package/scss/table/_layout.scss

@@ -36,9 +36,9 @@
             border-style: solid;
             border-color: currentColor;
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
         }
         .k-table-group-row .k-table-th {
             border-block-end-width: 1px;

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;