@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0

package/scss/list/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // List
 
@@ -10,16 +11,16 @@ $kendo-list-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the List component, if no size is set.
 /// @group list
 $kendo-list-font-size: null !default;
-$kendo-list-sm-font-size: var( --kendo-font-size, inherit )!default;
-$kendo-list-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-list-sm-font-size: var( --kendo-font-size-lg, inherit )!default;
+$kendo-list-md-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-list-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the List component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-sm-line-height: math.div( 20, 14 ) !default;
-$kendo-list-md-line-height: math.div( 20, 14 ) !default;
-$kendo-list-lg-line-height: 1.5 !default;
+$kendo-list-sm-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-list-md-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-list-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The horizontal padding of the List header, if no size is set.
 /// @group list
@@ -31,9 +32,9 @@ $kendo-list-lg-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the List header, if no size is set.
 /// @group list
 $kendo-list-header-padding-y: null !default;
-$kendo-list-sm-header-padding-y: k-spacing(1.5) !default;
-$kendo-list-md-header-padding-y: k-spacing(2) !default;
-$kendo-list-lg-header-padding-y: k-spacing(2) !default;
+$kendo-list-sm-header-padding-y: k-spacing(2) !default;
+$kendo-list-md-header-padding-y: k-spacing(3) !default;
+$kendo-list-lg-header-padding-y: k-spacing(4) !default;
 
 /// The border width of the List header.
 /// @group list
@@ -61,6 +62,21 @@ $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default
 /// @group list
 $kendo-list-filter-padding: k-spacing(4) !default;
 
+/// The horizontal padding of the List filter, when no size is set.
+/// @group list
+$kendo-list-filter-padding-x: $kendo-list-filter-padding !default;
+$kendo-list-sm-filter-padding-x: k-spacing(4) !default;
+$kendo-list-md-filter-padding-x: k-spacing(4) !default;
+$kendo-list-lg-filter-padding-x: k-spacing(4) !default;
+
+/// The vertical padding of the List filter, when no size is set.
+/// @group list
+$kendo-list-filter-padding-y: k-spacing(1) !default;
+$kendo-list-sm-filter-padding-y: k-spacing(0.5) !default;
+$kendo-list-md-filter-padding-y: k-spacing(1) !default;
+$kendo-list-lg-filter-padding-y: k-spacing(1.5) !default;
+
+
 /// The horizontal padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
@@ -71,9 +87,9 @@ $kendo-list-lg-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-y: null !default;
-$kendo-list-sm-item-padding-y: k-spacing(1.5) !default;
-$kendo-list-md-item-padding-y: k-spacing(2) !default;
-$kendo-list-lg-item-padding-y: k-spacing(2) !default;
+$kendo-list-sm-item-padding-y: k-spacing(2) !default;
+$kendo-list-md-item-padding-y: k-spacing(3) !default;
+$kendo-list-lg-item-padding-y: k-spacing(4) !default;
 
 /// The font size of the List items, if no size is set.
 /// @group list
@@ -125,6 +141,30 @@ $kendo-list-lg-group-item-line-height: null !default;
 /// @group list
 $kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
+/// The font size of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-list-item-group-label-md-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-list-item-group-label-lg-font-size: var( --kendo-font-size-sm, inherit ) !default;
+
+/// The line-height of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-line-height: var( --kendo-line-height-xs, inherit ) !default;
+$kendo-list-item-group-label-md-line-height: var( --kendo-line-height-xs, inherit ) !default;
+$kendo-list-item-group-label-lg-line-height: var( --kendo-line-height-xs, inherit ) !default;
+
+/// The horizontal padding of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-padding-x: k-spacing(1) !default;
+$kendo-list-item-group-label-md-padding-x: k-spacing(1) !default;
+$kendo-list-item-group-label-lg-padding-x: k-spacing(1) !default;
+
+/// The vertical padding of the List item group label.
+/// @group list
+$kendo-list-item-group-label-sm-padding-y: k-spacing(0.5) !default;
+$kendo-list-item-group-label-md-padding-y: k-spacing(0.5) !default;
+$kendo-list-item-group-label-lg-padding-y: k-spacing(0.5) !default;
+
 
 /// The map with the sizes of the List.
 /// /// @group list
@@ -143,7 +183,13 @@ $kendo-list-sizes: (
         group-item-padding-x: $kendo-list-sm-group-item-padding-x,
         group-item-padding-y: $kendo-list-sm-group-item-padding-y,
         group-item-font-size: null,
-        group-item-line-height: null
+        group-item-line-height: null,
+        item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-sm-line-height,
+        filter-padding-x: $kendo-list-sm-filter-padding-x,
+        filter-padding-y: $kendo-list-sm-filter-padding-y
     ),
     md: (
         font-size: $kendo-list-md-font-size,
@@ -159,7 +205,13 @@ $kendo-list-sizes: (
         group-item-padding-x: $kendo-list-md-group-item-padding-x,
         group-item-padding-y: $kendo-list-md-group-item-padding-y,
         group-item-font-size: null,
-        group-item-line-height: null
+        group-item-line-height: null,
+        item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-md-line-height,
+        filter-padding-x: $kendo-list-md-filter-padding-x,
+        filter-padding-y: $kendo-list-md-filter-padding-y
     ),
     lg: (
         font-size: $kendo-list-lg-font-size,
@@ -175,14 +227,20 @@ $kendo-list-sizes: (
         group-item-padding-x: $kendo-list-lg-group-item-padding-x,
         group-item-padding-y: $kendo-list-lg-group-item-padding-y,
         group-item-font-size: null,
-        group-item-line-height: null
+        group-item-line-height: null,
+        item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-lg-line-height,
+        filter-padding-x: $kendo-list-lg-filter-padding-x,
+        filter-padding-y: $kendo-list-lg-filter-padding-y
     )
 ) !default;
 
 
 /// The background color of the List component.
 /// @group list
-$kendo-list-bg: k-color(surface-alt) !default;
+$kendo-list-bg: k-color(surface) !default;
 /// The text color of the List component.
 /// @group list
 $kendo-list-text: k-color(on-app-surface) !default;
@@ -202,7 +260,7 @@ $kendo-list-header-text: null !default;
 $kendo-list-header-border: inherit !default;
 /// The box shadow of the List header.
 /// @group list
-$kendo-list-header-shadow: unset !default;
+$kendo-list-header-shadow: null !default;
 
 
 /// The background color of the List items.
@@ -214,27 +272,27 @@ $kendo-list-item-text: null !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: k-color(base-hover) !default;
+$kendo-list-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-text: k-color(on-app-surface) !default;
+$kendo-list-item-hover-text: null !default;
 
 /// The background color of the focused List items.
 /// @group list
-$kendo-list-item-focus-bg: $kendo-list-item-hover-bg !default;
+$kendo-list-item-focus-bg: null !default;
 /// The text color of the focused List items.
 /// @group list
 $kendo-list-item-focus-text: null !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: unset !default;
+$kendo-list-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 20%, transparent) !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: k-color(surface-alt) !default;
+$kendo-list-item-selected-bg: null !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: k-color(secondary) !default;
+$kendo-list-item-selected-text: k-color(primary) !default;
 
 /// The background color of the List group items.
 /// @group list
@@ -305,6 +363,26 @@ $kendo-list-option-label-text: k-color(subtle) !default;
     $kendo-list-sm-group-item-padding-y: $kendo-list-sm-group-item-padding-y,
     $kendo-list-md-group-item-padding-y: $kendo-list-md-group-item-padding-y,
     $kendo-list-lg-group-item-padding-y: $kendo-list-lg-group-item-padding-y,
+    $kendo-list-item-group-label-sm-padding-x: $kendo-list-item-group-label-sm-padding-x,
+    $kendo-list-item-group-label-md-padding-x: $kendo-list-item-group-label-md-padding-x,
+    $kendo-list-item-group-label-lg-padding-x: $kendo-list-item-group-label-lg-padding-x,
+    $kendo-list-item-group-label-sm-padding-y: $kendo-list-item-group-label-sm-padding-y,
+    $kendo-list-item-group-label-md-padding-y: $kendo-list-item-group-label-md-padding-y,
+    $kendo-list-item-group-label-lg-padding-y: $kendo-list-item-group-label-lg-padding-y,
+    $kendo-list-item-group-label-sm-font-size: $kendo-list-item-group-label-sm-font-size,
+    $kendo-list-item-group-label-md-font-size: $kendo-list-item-group-label-md-font-size,
+    $kendo-list-item-group-label-lg-font-size: $kendo-list-item-group-label-lg-font-size,
+    $kendo-list-item-group-label-sm-line-height: $kendo-list-item-group-label-sm-line-height,
+    $kendo-list-item-group-label-md-line-height: $kendo-list-item-group-label-md-line-height,
+    $kendo-list-item-group-label-lg-line-height: $kendo-list-item-group-label-lg-line-height,
+    $kendo-list-filter-padding-x: $kendo-list-filter-padding-x,
+    $kendo-list-filter-padding-y: $kendo-list-filter-padding-y,
+    $kendo-list-sm-filter-padding-x: $kendo-list-sm-filter-padding-x,
+    $kendo-list-sm-filter-padding-y: $kendo-list-sm-filter-padding-y,
+    $kendo-list-md-filter-padding-x: $kendo-list-md-filter-padding-x,
+    $kendo-list-md-filter-padding-y: $kendo-list-md-filter-padding-y,
+    $kendo-list-lg-filter-padding-x: $kendo-list-lg-filter-padding-x,
+    $kendo-list-lg-filter-padding-y: $kendo-list-lg-filter-padding-y,
     $kendo-list-group-item-border-width: $kendo-list-group-item-border-width,
     $kendo-list-group-item-font-size: $kendo-list-group-item-font-size,
     $kendo-list-sm-group-item-font-size: $kendo-list-sm-group-item-font-size,

package/scss/listbox/_variables.scss

@@ -33,7 +33,7 @@ $kendo-listbox-line-height: $kendo-list-md-line-height !default;
 $kendo-listbox-text: k-color(on-app-surface) !default;
 /// The background color of the ListBox.
 /// @group listbox
-$kendo-listbox-bg: k-color(surface-alt) !default;
+$kendo-listbox-bg: k-color(app-surface) !default;
 /// The border color of the ListBox.
 /// @group listbox
 $kendo-listbox-border: k-color(border) !default;

package/scss/listgroup/_variables.scss

@@ -6,14 +6,14 @@ $kendo-listgroup-border-width: 1px !default;
 $kendo-listgroup-border-radius: k-border-radius(md) !default;
 
 $kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-listgroup-line-height: math.div( 20, 14 ) !default;
+$kendo-listgroup-line-height: var( --kendo-line-height, inherit ) !default;
 
-$kendo-listgroup-bg: k-color(surface-alt) !default;
+$kendo-listgroup-bg: k-color(surface) !default;
 $kendo-listgroup-text: k-color(on-app-surface) !default;
 $kendo-listgroup-border: k-color(border) !default;
 
-$kendo-listgroup-item-padding-x: k-spacing(2) !default;
-$kendo-listgroup-item-padding-y: k-spacing(2) !default;
+$kendo-listgroup-item-padding-x: k-spacing(4) !default;
+$kendo-listgroup-item-padding-y: k-spacing(3) !default;
 $kendo-listgroup-item-border-width: 1px !default;
 
 @forward "@progress/kendo-theme-core/scss/components/listgroup/_variables.scss" with (

package/scss/listview/_theme.scss

@@ -1,6 +1,3 @@
-@use "./_variables.scss" as *;
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/listview/_theme.scss" as *;
 
 
@@ -8,14 +5,4 @@
 
     @include kendo-listview--theme-base();
 
-    // Listview
-    .k-listview {}
-
-
-    // Listview content
-    .k-listview-content {}
-    .k-listview-content > .k-selected.k-focus {
-        background-color: k-color(base-active);
-    }
-
 }

package/scss/listview/_variables.scss

@@ -27,7 +27,7 @@ $kendo-listview-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-listview-text: k-color(on-app-surface) !default;
 /// The background color of the ListView.
 /// @group listview
-$kendo-listview-bg: k-color(surface-alt) !default;
+$kendo-listview-bg: k-color(surface) !default;
 /// The border color of the ListView.
 /// @group listview
 $kendo-listview-border: k-color(border) !default;
@@ -41,10 +41,10 @@ $kendo-listview-item-padding-y: k-spacing(1) !default;
 
 /// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-text: k-color(primary)  !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: k-color(base-active) !default;
+$kendo-listview-item-selected-bg: null !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;
@@ -54,13 +54,13 @@ $kendo-listview-item-selected-border: null !default;
 $kendo-listview-item-focus-text: null !default;
 /// The background color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-bg: k-color(base-active) !default;
+$kendo-listview-item-focus-bg: null !default;
 /// The border color of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: unset !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 20%, transparent) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (
     $kendo-listview-padding-x: $kendo-listview-padding-x,

package/scss/loader/_variables.scss

@@ -80,7 +80,7 @@ $kendo-loader-container-panel-border-color: k-color(border) !default;
 $kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-bg: $kendo-color-white !default;
+$kendo-loader-container-panel-bg: k-color(app-surface) !default;
 
 /// The padding of the small Loader container.
 /// @group loader
@@ -115,7 +115,7 @@ $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !defa
 // Loading indicator
 /// The background color of the Loading indicator.
 /// @group loading
-$kendo-loading-bg: k-color(surface-alt) !default;
+$kendo-loading-bg: k-color(app-surface) !default;
 /// The text color of the Loading indicator.
 /// @group loading
 $kendo-loading-text: currentColor !default;

package/scss/map/_variables.scss

@@ -19,7 +19,7 @@ $kendo-map-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The background color of the Map.
 /// @group map
-$kendo-map-bg: k-color(surface-alt) !default;
+$kendo-map-bg: k-color(app-surface) !default;
 /// The text color of the Map.
 /// @group map
 $kendo-map-text: k-color(on-app-surface) !default;
@@ -35,7 +35,7 @@ $kendo-map-navigator-margin: k-spacing(4) !default;
 $kendo-map-navigator-padding: k-spacing(0.5) !default;
 /// The width of the Map navigator.
 /// @group map
-$kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default;
+$kendo-map-navigator-width: calc( #{$kendo-icon-size} * 3 + #{$kendo-map-navigator-padding} * 2 ) !default;
 /// The height of the Map navigator.
 /// @group map
 $kendo-map-navigator-height: $kendo-map-navigator-width !default;

package/scss/mediaplayer/_variables.scss

@@ -17,7 +17,7 @@ $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-bg: k-color(surface-alt) !default;
+$kendo-media-player-bg: k-color(surface) !default;
 /// The text color of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-text: k-color(on-app-surface) !default;
@@ -42,7 +42,7 @@ $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
 $kendo-media-player-titlebar-border: null !default;
 /// The gradient of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-gradient: color-mix(in srgb, k-color(on-app-surface) 70%, transparent), color-mix(in srgb, k-color(on-app-surface) 0%, transparent) !default;
+$kendo-media-player-titlebar-gradient: ( color-mix(in srgb, k-color(on-app-surface) 70%, transparent), color-mix(in srgb, k-color(on-app-surface) 0%, transparent) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with (
     $kendo-media-player-border-width: $kendo-media-player-border-width,

package/scss/menu/_layout.scss

@@ -17,6 +17,10 @@
         }
     }
 
+    .k-menu-expand-arrow {
+        margin-inline-end: 0;
+    }
+
     // Scrolling
     .k-menu-scroll-wrapper {
 

package/scss/menu/_theme.scss

@@ -7,39 +7,14 @@
 
     @include kendo-menu--theme-base();
 
-    .k-menu:not(.k-context-menu) {
-
-        // Root items
-        > .k-menu-item {
-
-            // Focus state
-            &:focus,
-            &.k-focus {
-                @include fill(
-                    $kendo-menu-item-hover-text,
-                    $kendo-menu-item-hover-bg,
-                    $kendo-menu-item-hover-border,
-                    $kendo-menu-item-hover-gradient
-                );
-            }
-
-        }
-    }
-
     // Subitems
     .k-menu-group,
     .k-context-menu {
         .k-menu-item {
-
             // Focus state
             &:focus,
             &.k-focus {
-                @include fill(
-                    $kendo-menu-popup-item-hover-text,
-                    $kendo-menu-popup-item-hover-bg,
-                    $kendo-menu-popup-item-hover-border,
-                    $kendo-menu-popup-item-hover-gradient
-                );
+                box-shadow: $kendo-menu-item-focus-shadow;
             }
         }
     }

package/scss/menu/_variables.scss

@@ -17,10 +17,10 @@ $kendo-menu-border-width: 0px !default;
 $kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Menu.
 /// @group menu
-$kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-menu-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the Menu used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-menu-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The background color of the Menu.
 /// @group menu
@@ -39,27 +39,27 @@ $kendo-menu-gradient: null !default;
 
 /// The horizontal padding of the Menu item.
 /// @group menu
-$kendo-menu-item-padding-x: k-spacing(4) !default;
+$kendo-menu-item-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Menu item.
 /// @group menu
-$kendo-menu-item-padding-y: k-spacing(1) !default;
+$kendo-menu-item-padding-y: k-spacing(3) !default;
 /// The spacing between the Menu items.
 /// @group menu
-$kendo-menu-item-spacing: k-spacing(0.5) !default;
+$kendo-menu-item-spacing: 0 !default;
 /// The spacing between the Menu item text and icons.
 /// @group menu
-$kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
+$kendo-menu-item-icon-spacing: k-spacing(3) !default;
 
 /// The font weight of the selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-menu-item-selected-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The background color of the Menu item.
 /// @group menu
-$kendo-menu-item-bg: rgba( $kendo-menu-text, 0 ) !default;
+$kendo-menu-item-bg: null !default;
 /// The text color of the Menu item.
 /// @group menu
-$kendo-menu-item-text: unset !default;
+$kendo-menu-item-text: null !default;
 /// The border color of the Menu item.
 /// @group menu
 $kendo-menu-item-border: null !default;
@@ -69,10 +69,10 @@ $kendo-menu-item-gradient: null !default;
 
 /// The background color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-bg: k-color(base-hover) !default;
+$kendo-menu-item-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-text: unset !default;
+$kendo-menu-item-hover-text: null !default;
 /// The border color of hovered Menu item.
 /// @group menu
 $kendo-menu-item-hover-border: null !default;
@@ -82,10 +82,10 @@ $kendo-menu-item-hover-gradient: null !default;
 
 /// The background color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-bg: k-color(base-active) !default;
+$kendo-menu-item-active-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-text: unset !default;
+$kendo-menu-item-active-text: null !default;
 /// The border color of active Menu item.
 /// @group menu
 $kendo-menu-item-active-border: null !default;
@@ -95,14 +95,14 @@ $kendo-menu-item-active-gradient: null !default;
 
 /// The base shadow of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-shadow: unset !default;
+$kendo-menu-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The background color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-bg: null !default;
+$kendo-menu-item-selected-bg: k-color(secondary) !default;
 /// The text color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-text: unset !default;
+$kendo-menu-item-selected-text: k-color(on-secondary) !default;
 /// The border color of selected Menu item.
 /// @group menu
 $kendo-menu-item-selected-border: null !default;
@@ -112,23 +112,23 @@ $kendo-menu-item-selected-gradient: null !default;
 
 /// The background color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-bg: k-color(surface-alt) !default;
+$kendo-menu-scroll-button-bg: null !default;
 /// The text color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-text: k-color(subtle) !default;
+$kendo-menu-scroll-button-text: $kendo-menu-text !default;
 /// The border color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-border: transparent !default;
+$kendo-menu-scroll-button-border: null !default;
 /// The background gradient of the Menu scroll buttons.
 /// @group menu
 $kendo-menu-scroll-button-gradient: null !default;
 
 /// The background color of hovered Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-bg: null !default;
+$kendo-menu-scroll-button-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of hovered Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-text: $kendo-menu-text !default;
+$kendo-menu-scroll-button-hover-text: $kendo-menu-item-hover-text !default;
 /// The border color of hovered Menu scroll buttons.
 /// @group menu
 $kendo-menu-scroll-button-hover-border: null !default;
@@ -136,6 +136,12 @@ $kendo-menu-scroll-button-hover-border: null !default;
 /// @group menu
 $kendo-menu-scroll-button-hover-gradient: null !default;
 
+/// The horizontal padding of the Menu icon.
+/// @group menu
+$kendo-menu-icon-padding-x: k-spacing(1) !default;
+/// The vertical padding of the Menu icon.
+/// @group menu
+$kendo-menu-icon-padding-y: k-spacing(1) !default;
 
 
 // Menu Separator
@@ -170,14 +176,14 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 $kendo-menu-popup-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-menu-popup-sm-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-menu-popup-md-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-menu-popup-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The line heights used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-popup-line-height: 1.25 !default;
-$kendo-menu-popup-sm-line-height: 1.25 !default;
-$kendo-menu-popup-md-line-height: 1.25 !default;
-$kendo-menu-popup-lg-line-height: 1.25 !default;
+$kendo-menu-popup-line-height: $kendo-menu-line-height !default;
+$kendo-menu-popup-sm-line-height: $kendo-menu-line-height !default;
+$kendo-menu-popup-md-line-height: $kendo-menu-line-height !default;
+$kendo-menu-popup-lg-line-height: $kendo-menu-line-height !default;
 
 /// The background color of the Menu popup.
 /// @group menu
@@ -197,17 +203,17 @@ $kendo-menu-popup-gradient: null !default;
 
 /// The horizontal padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: k-spacing(4) !default;
-$kendo-menu-popup-sm-item-padding-x: k-spacing(4) !default;
-$kendo-menu-popup-md-item-padding-x: k-spacing(4) !default;
-$kendo-menu-popup-lg-item-padding-x: k-spacing(4) !default;
+$kendo-menu-popup-item-padding-x: $kendo-menu-item-padding-x !default;
+$kendo-menu-popup-sm-item-padding-x: $kendo-menu-item-padding-x !default;
+$kendo-menu-popup-md-item-padding-x: $kendo-menu-item-padding-x !default;
+$kendo-menu-popup-lg-item-padding-x: $kendo-menu-item-padding-x !default;
 
 /// The vertical padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: k-spacing(2) !default;
-$kendo-menu-popup-sm-item-padding-y: k-spacing(1.5) !default;
-$kendo-menu-popup-md-item-padding-y: k-spacing(2) !default;
-$kendo-menu-popup-lg-item-padding-y: k-spacing(2.5) !default;
+$kendo-menu-popup-item-padding-y: $kendo-menu-item-padding-y !default;
+$kendo-menu-popup-sm-item-padding-y: k-spacing(2) !default;
+$kendo-menu-popup-md-item-padding-y: $kendo-menu-item-padding-y !default;
+$kendo-menu-popup-lg-item-padding-y: k-spacing(4) !default;
 
 /// The end padding of the Menu item in popup.
 /// @group menu
@@ -247,10 +253,10 @@ $kendo-menu-popup-item-gradient: null !default;
 
 /// The background color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
+$kendo-menu-popup-item-hover-bg: $kendo-menu-item-hover-bg !default;
 /// The text color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
+$kendo-menu-popup-item-hover-text: inherit !default;
 /// The border color of hovered Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-hover-border: null !default;
@@ -260,10 +266,10 @@ $kendo-menu-popup-item-hover-gradient: null !default;
 
 /// The background color of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-active-bg: $kendo-list-item-selected-bg !default;
+$kendo-menu-popup-item-active-bg: $kendo-menu-item-active-bg !default;
 /// The text color of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-active-text: $kendo-list-item-selected-text !default;
+$kendo-menu-popup-item-active-text: inherit !default;
 /// The border color of active Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-active-border: null !default;
@@ -273,7 +279,7 @@ $kendo-menu-popup-item-active-gradient: null !default;
 
 /// The base shadow of focused Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-focus-shadow: unset !default;
+$kendo-menu-popup-item-focus-shadow: null !default;
 
 @forward "@progress/kendo-theme-core/scss/components/menu/_variables.scss" with (
     $kendo-menu-border-width: $kendo-menu-border-width,
@@ -314,6 +320,8 @@ $kendo-menu-popup-item-focus-shadow: unset !default;
     $kendo-menu-scroll-button-hover-text: $kendo-menu-scroll-button-hover-text,
     $kendo-menu-scroll-button-hover-border: $kendo-menu-scroll-button-hover-border,
     $kendo-menu-scroll-button-hover-gradient: $kendo-menu-scroll-button-hover-gradient,
+    $kendo-menu-icon-padding-x: $kendo-menu-icon-padding-x,
+    $kendo-menu-icon-padding-y: $kendo-menu-icon-padding-y,
     $kendo-menu-separator-margin-inline: $kendo-menu-separator-margin-inline,
     $kendo-menu-separator-margin-block: $kendo-menu-separator-margin-block,
     $kendo-menu-separator-border: $kendo-menu-separator-border,

package/scss/menu-button/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The horizontal padding of the button arrow in the Menu Button.
 /// @group menu-button
-$kendo-menu-button-arrow-padding-x: k-spacing(1) !default;
+$kendo-menu-button-arrow-padding-x: k-spacing(2) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/menu-button/_variables.scss" with (
     $kendo-menu-button-arrow-padding-x: $kendo-menu-button-arrow-padding-x