@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/mediaplayer/_layout.scss

@@ -1,82 +1,20 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/mediaplayer/_layout.scss" as *;
 
 @mixin kendo-media-player--layout() {
-
-    // Base
-    .k-mediaplayer {
-        border-width: var( --kendo-media-player-border-width, #{$kendo-media-player-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-media-player-font-family, #{$kendo-media-player-font-family} );
-        font-size: var( --kendo-media-player-font-size, #{$kendo-media-player-font-size} );
-        line-height: var( --kendo-media-player-line-height, #{$kendo-media-player-line-height} );
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        > iframe {
-            width: 100%;
-            height: 100%;
-            border: 0;
-            vertical-align: top;
-        }
-    }
-
+    @include kendo-media-player--layout-base();
 
     // Overlay
     .k-mediaplayer-overlay {
         height: 100%;
     }
 
-
     // Title bar
     .k-mediaplayer-titlebar {
-        font-size: var( --kendo-media-player-title-font-size, #{$kendo-media-player-title-font-size} );
-        padding-inline: var( --kendo-media-player-titlebar-padding-x, #{$kendo-media-player-titlebar-padding-x} );
-        padding-block: var( --kendo-media-player-titlebar-padding-y, #{$kendo-media-player-titlebar-padding-y} );
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        right: 0;
-    }
-
-
-    // Toolbar
-    .k-mediaplayer-toolbar-wrap {
-        position: absolute;
-        z-index: 2;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-    .k-mediaplayer-toolbar {
-        border-width: 0;
-        width: 100% !important; // stylelint-disable-line declaration-no-important
-        box-shadow: none;
-
-        .k-dropdown-list {
-            width: auto;
-        }
-    }
-    .k-mediaplayer-time-wrap {
-        flex: 1;
+        font-size: $kendo-media-player-title-font-size;
     }
 
-    .k-mediaplayer-volume {
-        width: 100px;
-    }
-
-
     // Seekbar
     .k-mediaplayer-seekbar {
         width: 100%;
@@ -87,13 +25,8 @@
         transform: translateY( -50% );
     }
 
-    .k-mediaplayer-fullscreen {
-        z-index: 10000;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100% !important; // stylelint-disable-line declaration-no-important
-        height: 100% !important; // stylelint-disable-line declaration-no-important
+    .k-mediaplayer-volume-wrap {
+        padding: 0;
     }
 
 }

package/scss/mediaplayer/_theme.scss

@@ -1,29 +1,19 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/mediaplayer/_theme.scss" as *;
 
 @mixin kendo-media-player--theme() {
-
-    .k-mediaplayer {
-        @include fill(
-            var( --kendo-media-player-text, #{$kendo-media-player-text} ),
-            var( --kendo-media-player-bg, #{$kendo-media-player-bg} ),
-            var( --kendo-media-player-border, #{$kendo-media-player-border} )
-        );
-    }
-
+    @include kendo-media-player--theme-base();
 
     .k-mediaplayer-overlay {
-        background-color: var( --kendo-media-player-overlay-bg, #{$kendo-media-player-overlay-bg} );
+        background-color: $kendo-media-player-overlay-bg;
     }
 
-
     .k-mediaplayer-titlebar {
-        color: var( --kendo-media-player-titlebar-text, #{$kendo-media-player-titlebar-text} );
-        background-color: var( --kendo-media-player-titlebar-bg, #{$kendo-media-player-titlebar-bg} );
+        background-color: $kendo-media-player-titlebar-bg;
     }
 
-
     .k-mediaplayer-quality {
-        border-color: var( --kendo-media-player-quality-border, #{$kendo-media-player-quality-border} );
+        border-color: $kendo-media-player-quality-border;
     }
 }

package/scss/mediaplayer/_variables.scss

@@ -3,47 +3,60 @@
 
 /// The border width of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-border-width: 1px !default;
+$kendo-media-player-border-width: var( --kendo-media-player-border-width, 1px ) !default;
 /// The font family of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-media-player-font-family: var( --kendo-media-player-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-media-player-font-size: var( --kendo-media-player-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-media-player-line-height: var( --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: var( --kendo-media-player-bg, k-color(surface-alt) ) !default;
 /// The text color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-text: k-color(on-app-surface) !default;
+$kendo-media-player-text: var( --kendo-media-player-text, k-color(on-app-surface) ) !default;
 /// The border color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-media-player-border: var( --kendo-media-player-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The background color of the MediaPlayer overlay.
 /// @group mediaplayer
-$kendo-media-player-overlay-bg: k-color(base-emphasis) !default;
+$kendo-media-player-overlay-bg: var( --kendo-media-player-overlay-bg, k-color(base-emphasis) ) !default;
 
 /// The border color of the MediaPlayer button.
 /// @group mediaplayer
-$kendo-media-player-quality-border: k-color(border) !default;
+$kendo-media-player-quality-border: var( --kendo-media-player-quality-border, k-color(border) ) !default;
 
 /// The font size of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
+$kendo-media-player-title-font-size: var( --kendo-media-player-title-font-size, var( --kendo-font-size-xl, inherit ) ) !default;
 /// The horizontal padding of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-padding-x: k-spacing(2) !default;
+$kendo-media-player-titlebar-padding-x: var( --kendo-media-player-titlebar-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-padding-y: k-spacing(2) !default;
+$kendo-media-player-titlebar-padding-y: var( --kendo-media-player-titlebar-padding-y, k-spacing(2) ) !default;
 /// The background color of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-bg: color-mix(in srgb, k-color(on-app-surface) 40%, transparent) !default;
+$kendo-media-player-titlebar-bg: var( --kendo-media-player-titlebar-bg, color-mix(in srgb, k-color(on-app-surface) 40%, transparent) ) !default;
 /// The text color of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
+$kendo-media-player-titlebar-text: var( --kendo-media-player-titlebar-text, $kendo-media-player-bg ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with (
+    $kendo-media-player-border-width: $kendo-media-player-border-width,
+    $kendo-media-player-font-family: $kendo-media-player-font-family,
+    $kendo-media-player-font-size: $kendo-media-player-font-size,
+    $kendo-media-player-line-height: $kendo-media-player-line-height,
+    $kendo-media-player-bg: $kendo-media-player-bg,
+    $kendo-media-player-text: $kendo-media-player-text,
+    $kendo-media-player-border: $kendo-media-player-border,
+    $kendo-media-player-titlebar-padding-x: $kendo-media-player-titlebar-padding-x,
+    $kendo-media-player-titlebar-padding-y: $kendo-media-player-titlebar-padding-y,
+    $kendo-media-player-titlebar-text: $kendo-media-player-titlebar-text
+);

package/scss/menu/_layout.scss

@@ -1,318 +1,76 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/menu/_layout.scss" as *;
 
 @mixin kendo-menu--layout() {
+    @include kendo-menu--layout-base();
 
     // Menu bar
     .k-menu-bar {
-        border-width: var( --kendo-menu-border-width, #{$kendo-menu-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-menu-font-family, #{$kendo-menu-font-family} );
-        font-size: var( --kendo-menu-font-size, #{$kendo-menu-font-size} );
-        line-height: var( --kendo-menu-line-height, #{$kendo-menu-line-height} );
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: stretch;
-        position: relative;
-        cursor: default;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
         > .k-separator {
             border-width: 0;
         }
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
     }
-    .k-menu { @extend .k-menu-bar !optional; }
 
-
-    // Menu item
+    // Menu item focus outline
     .k-menu-item {
-        border-width: 0;
-        outline: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        flex: none;
-        position: relative;
-        user-select: none;
-
         &:focus,
         &:focus-visible,
         &.k-focus {
-            outline-offset: var( --kendo-menu-item-focus-outline-offset, #{$kendo-menu-item-focus-outline-offset} );
-            outline-width: var( --kendo-menu-item-focus-outline-width, #{$kendo-menu-item-focus-outline-width} );
-            outline-style: var( --kendo-menu-item-focus-outline-style, #{$kendo-menu-item-focus-outline-style} );
-        }
-
-        &.k-selected {
-            font-weight: var( --kendo-menu-item-selected-font-weight, #{$kendo-menu-item-selected-font-weight} );
+            outline-offset: $kendo-menu-item-focus-outline-offset;
+            outline-width: $kendo-menu-item-focus-outline-width;
+            outline-style: $kendo-menu-item-focus-outline-style;
         }
     }
 
-
-    // Menu link
-    .k-menu-link {
-        padding-inline: var( --kendo-menu-item-padding-x, #{$kendo-menu-item-padding-x} );
-        padding-block: var( --kendo-menu-item-padding-y, #{$kendo-menu-item-padding-y} );
-        outline: 0;
-        color: inherit;
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-        gap: var( --kendo-menu-item-icon-spacing, #{$kendo-menu-item-icon-spacing} );
-        align-items: center;
-        position: relative;
-        white-space: nowrap;
-        cursor: pointer;
-    }
-
-
-    // Menu item text
-    .k-menu-link-text {
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-
-    // Expand arrow
-    .k-menu-expand-arrow {
-        display: inline-flex;
-        flex-flow: row wrap;
-        align-items: center;
-        flex: none;
-        position: relative;
-    }
-
-
-    // Orientation -- horizontal
+    // Horizontal separator styling
     .k-menu-horizontal {
-        flex-direction: row;
-
-        > .k-menu-item + .k-menu-item {
-            margin-inline-start: var( --kendo-menu-item-spacing, #{$kendo-menu-item-spacing} );
-        }
-
         > .k-separator {
-            margin-block: var(--kendo-menu-separator-margin-block, #{$kendo-menu-separator-margin-block});
-            margin-inline: var(--kendo-menu-separator-margin-inline, #{$kendo-menu-separator-margin-inline});
-            width: 0;
-            height: auto;
-            border-left-width: var( --kendo-menu-separator-width, #{$kendo-menu-separator-width});
-            border-style: solid;
+            border-left-width: $kendo-menu-separator-width;
         }
     }
 
-
-    // Orientation -- vertical
-    .k-menu-vertical {
-        flex-direction: column;
-        width: 100%;
-
-        > .k-menu-item > .k-menu-link {
-            padding-inline-end: var( --kendo-menu-popup-md-item-padding-end, #{$kendo-menu-popup-md-item-padding-end} );
-        }
-
-        > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
-            margin-inline-start: var( --kendo-menu-popup-item-icon-md-margin-start, #{$kendo-menu-popup-item-icon-md-margin-start} );
-            margin-inline-end: var( --kendo-menu-popup-item-icon-md-margin-end, #{$kendo-menu-popup-item-icon-md-margin-end} );
-        }
-
-        > .k-menu-item + .k-menu-item {
-            margin-block-start: var( --kendo-menu-item-spacing, #{$kendo-menu-item-spacing} );
-        }
-
-        > .k-separator {
-            margin-block: var(--kendo-menu-separator-margin-inline, #{$kendo-menu-separator-margin-inline});
-            margin-inline: 0;
-            height: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            display: block;
-        }
-    }
-
-
-    // Menu popup
-    .k-menu-popup {
-        padding-inline: var( --kendo-menu-popup-padding-x, #{$kendo-menu-popup-padding-x} );
-        padding-block: var( --kendo-menu-popup-padding-y, #{$kendo-menu-popup-padding-y} );
-        box-sizing: border-box;
-        border-width: var( --kendo-menu-popup-border-width, #{$kendo-menu-popup-border-width} );
-        border-style: solid;
-        overflow: auto;
-        max-height: 80vh;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-menu-item {
-            font-weight: initial;
-        }
-    }
-
-
-    // Sub menu
-    .k-menu-group {
-        font-size: var( --kendo-group-font-size, inherit );
-        line-height: var( --kendo-group-line-height, normal );
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: var( --kendo-menu-popup-item-spacing, #{$kendo-menu-popup-item-spacing} );
-        position: absolute;
-
-        .k-menu-link {
-            padding-inline-start: var( --kendo-menu-popup-item-padding-x );
-            padding-inline-end: var( --kendo-menu-popup-item-padding-end );
-            padding-block: var( --kendo-menu-popup-item-padding-y );
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: var( --kendo-menu-popup-item-icon-margin-start );
-            margin-inline-end: var( --kendo-menu-popup-item-icon-margin-end );
-        }
-
-        .k-separator {
-            margin-block: var( --kendo-menu-separator-margin-inline, #{$kendo-menu-separator-margin-inline} );
-            margin-inline: 0;
-            height: 0;
-            border-width: 0;
-            border-top-width: var( --kendo-menu-separator-width, #{$kendo-menu-separator-width});
-            border-style: solid;
-            display: block;
-        }
-    }
-    .k-menu-popup .k-menu-group {
-        position: relative;
-    }
+    // Sub menu group focus styles
     .k-menu-group,
     .k-menu.k-context-menu {
-
         .k-item {
             &:focus,
             &:focus-visible,
             &.k-focus {
-
                 > .k-link {
-                    outline-offset: var( --kendo-menu-item-focus-outline-offset, #{$kendo-menu-item-focus-outline-offset} );
-                    outline-width: var( --kendo-menu-item-focus-outline-width, #{$kendo-menu-item-focus-outline-width} );
-                    outline-style: var( --kendo-menu-item-focus-outline-style, #{$kendo-menu-item-focus-outline-style} );
+                    outline-offset: $kendo-menu-item-focus-outline-offset;
+                    outline-width: $kendo-menu-item-focus-outline-width;
+                    outline-style: $kendo-menu-item-focus-outline-style;
                 }
             }
         }
     }
 
-
-    // Sizes
-    @each $size, $size-pops in $kendo-menu-sizes {
-
-        // Group sizes
-        $_group-font-size: map.get( $size-pops, group-font-size );
-        $_group-line-height: map.get( $size-pops, group-line-height );
-
-        // Link sizes
-        $_link-padding-x: map.get( $size-pops, link-padding-x );
-        $_link-padding-y: map.get( $size-pops, link-padding-y );
-        $_link-padding-inline-end: map.get( $size-pops, link-padding-inline-end );
-
-        // Arrow sizes
-        $_arrow-margin-inline-start: map.get( $size-pops, arrow-margin-inline-start );
-        $_arrow-margin-inline-end: map.get( $size-pops, arrow-margin-inline-end );
-
-        .k-menu-group-#{$size} {
-            --kendo-group-font-size: var( --kendo-menu-popup-font-size-#{$size}, #{$_group-font-size} );
-            --kendo-group-line-height: var( --kendo-menu-popup-line-height-#{$size}, #{$_group-line-height} );
-
-            .k-menu-link {
-                --kendo-menu-popup-item-padding-x: var( --kendo-menu-popup-item-padding-x-#{$size}, #{$_link-padding-x} );
-                --kendo-menu-popup-item-padding-y: var( --kendo-menu-popup-item-padding-y-#{$size}, #{$_link-padding-y} );
-                --kendo-menu-popup-item-padding-end: var( --kendo-menu-popup-item-padding-end-#{$size}, #{$_link-padding-inline-end} );
-            }
-
-            .k-menu-expand-arrow {
-                --kendo-menu-popup-item-icon-margin-start: var( --kendo-menu-popup-item-icon-margin-start-#{$size}, #{$_arrow-margin-inline-start} );
-                --kendo-menu-popup-item-icon-margin-end: var( --kendo-menu-popup-item-icon-margin-end-#{$size}, #{$_arrow-margin-inline-end} );
-            }
-
+    // Sub menu group separator styling
+    .k-menu-group {
+        .k-separator {
+            border-top-width: $kendo-menu-separator-width;
         }
     }
 
-    // Context menu
-    .k-popups-wrapper {
-        position: relative;
-        border: 0;
-        margin: 0;
-        padding: 0;
-    }
-    .k-context-menu {
-        margin: 0;
-        padding-inline: var( --kendo-menu-popup-padding-x, #{$kendo-menu-popup-padding-x} );
-        padding-block: var( --kendo-menu-popup-padding-y, #{$kendo-menu-popup-padding-y} );
-        border-width: var( --kendo-menu-popup-border-width, #{$kendo-menu-popup-border-width} );
-        border-style: solid;
+    .k-menu-vertical {
 
-        &.k-menu-horizontal {
-            padding-inline: var( --kendo-menu-popup-padding-y, #{$kendo-menu-popup-padding-y} );
-            padding-block: var( --kendo-menu-popup-padding-x, #{$kendo-menu-popup-padding-x} );
+        > .k-menu-item > .k-menu-link {
+            padding-inline: $kendo-menu-item-padding-x;
+            padding-block: $kendo-menu-item-padding-y;
+            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
         }
-    }
-    .k-animation-container .k-context-menu.k-menu-horizontal {
-        // kendo-jquery adds `display: block` via js and we need to override it.
-        display: flex !important; // stylelint-disable-line declaration-no-important
-        flex-wrap: nowrap;
-    }
-    .k-context-menu-popup {
-        z-index: 12000;
 
-        .k-context-menu {
-            border-width: 0;
+        > .k-separator {
+            margin-block: $kendo-menu-separator-margin-inline;
+            border-width: 1px 0 0;
         }
     }
-    .k-popup .k-context-menu,
-    .k-context-menu-popup .k-context-menu {
-        border-width: 0;
-    }
-
 
-    // Scrolling
-    .k-menu-scroll-wrapper {
+    .k-menu-expand-arrow {
         margin: 0;
-        padding: 0;
-        border: 0;
-        position: relative;
-        display: flex;
-        align-items: center;
-
-        .k-menu {
-            overflow: hidden;
-            flex-wrap: nowrap;
-        }
     }
-
-    .k-menu-scroll-wrapper-vertical {
-        flex-direction: column;
-
-        > .k-menu-scroll-button {
-            width: 100%;
-        }
-    }
-
 }
 
 @mixin kendo-menu--extended-layout() {}

package/scss/menu/_theme.scss

@@ -1,116 +1,57 @@
 @use "../core/_index.scss" as *;
 @use '_variables.scss' as *;
+@use "@progress/kendo-theme-core/scss/components/menu/_theme.scss" as *;
 
 @mixin kendo-menu--theme() {
+    @include kendo-menu--theme-base();
+
     .k-menu:not(.k-context-menu) {
-        color: var( --kendo-menu-text, #{$kendo-menu-text} );
-        background-color: var( --kendo-menu-bg, #{$kendo-menu-bg} );
-        border-color: var( --kendo-menu-border, #{$kendo-menu-border} );
-        box-shadow: var( --kendo-menu-shadow, #{$kendo-menu-shadow} );
+        box-shadow: $kendo-menu-shadow;
 
         > .k-item {
-            color: var( --kendo-menu-item-text, #{$kendo-menu-item-text} );
-            background-color: var( --kendo-menu-item-bg, #{$kendo-menu-item-bg} );
-
-            &:hover,
-            &.k-hover {
-                color: var( --kendo-menu-item-hover-text, #{$kendo-menu-item-hover-text} );
-                background-color: var( --kendo-menu-item-hover-bg, #{$kendo-menu-item-hover-bg} );
-            }
 
             &:focus,
             &.k-focus {
-                color: var( --kendo-menu-item-focus-text, #{$kendo-menu-item-focus-text} );
-                background-color: var( --kendo-menu-item-focus-bg, #{$kendo-menu-item-focus-bg} );
-                outline-color: var( --kendo-menu-item-focus-outline, #{$kendo-menu-item-focus-outline} );
-            }
-
-            &:active,
-            &.k-active {
-                color: var( --kendo-menu-item-active-text, #{$kendo-menu-item-active-text} );
-                background-color: var( --kendo-menu-item-active-bg, #{$kendo-menu-item-active-bg} );
+                color: $kendo-menu-item-focus-text;
+                background-color: $kendo-menu-item-focus-bg;
+                outline-color: $kendo-menu-item-focus-outline;
             }
 
             &.k-disabled {
-                color: var( --kendo-menu-item-disabled-text, #{$kendo-menu-item-disabled-text} );
-                background-color: var( --kendo-menu-item-disabled-bg, #{$kendo-menu-item-disabled-bg} );
-            }
-
-            &.k-selected {
-                color: var( --kendo-menu-item-selected-text, #{$kendo-menu-item-selected-text} );
-                background-color: var( --kendo-menu-item-selected-bg, #{$kendo-menu-item-selected-bg} );
+                color: $kendo-menu-item-disabled-text;
+                background-color: $kendo-menu-item-disabled-bg;
             }
         }
 
         .k-link > .k-icon {
-            color: var( --kendo-menu-icon-color, #{$kendo-menu-icon-color} );
-        }
-
-        > .k-separator {
-            @include fill(
-                $border: var( --kendo-menu-separator-border, #{$kendo-menu-separator-border} )
-            );
+            color: $kendo-menu-icon-color;
         }
-
     }
 
     .k-menu-popup {
-        box-shadow: var( --kendo-menu-popup-shadow, #{$kendo-menu-popup-shadow} );
+        box-shadow: $kendo-menu-popup-shadow;
     }
 
     .k-menu-group,
     .k-menu.k-context-menu {
-        background-color: var( --kendo-menu-popup-bg, #{$kendo-menu-popup-bg} );
-        border-color: var( --kendo-menu-popup-border, #{$kendo-menu-popup-border} );
-
         .k-item {
 
             & > .k-link {
-                color: var( --kendo-menu-popup-item-text, #{$kendo-menu-popup-item-text} );
-                background-color: var( --kendo-menu-popup-item-bg, #{$kendo-menu-popup-item-bg} );
-
-                &:hover,
-                &.k-hover {
-                    color: var( --kendo-menu-popup-item-hover-text, #{$kendo-menu-popup-item-hover-text} );
-                    background-color: var( --kendo-menu-popup-item-hover-bg, #{$kendo-menu-popup-item-hover-bg} );
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    color: var( --kendo-menu-popup-item-active-text, #{$kendo-menu-popup-item-active-text} );
-                    background-color: var( --kendo-menu-popup-item-active-bg, #{$kendo-menu-popup-item-active-bg} );
-                }
 
                 &.k-disabled {
-                    color: var( --kendo-menu-popup-item-disabled-text, #{$kendo-menu-popup-item-disabled-text} );
-                    background-color: var( --kendo-menu-popup-item-disabled-bg, #{$kendo-menu-popup-item-disabled-bg} );
+                    color: $kendo-menu-popup-item-disabled-text;
+                    background-color: $kendo-menu-popup-item-disabled-bg;
                 }
             }
-
             &:focus,
             &:focus-visible,
             &.k-focus {
-
                 outline-color: transparent;
 
                 > .k-link {
-                    outline-color: var( --kendo-menu-popup-item-focus-outline, #{$kendo-menu-popup-item-focus-outline} );
+                    outline-color: $kendo-menu-popup-item-focus-outline;
                 }
             }
         }
-
-        > .k-separator {
-            @include fill(
-                $border: var( --kendo-menu-separator-border, #{$kendo-menu-separator-border} )
-            );
-        }
-    }
-
-    .k-menu-scroll-wrapper .k-menu-scroll-button {
-        border-color: var( --kendo-menu-scroll-btn-bg, transparent );
-        background-color: var( --kendo-menu-scroll-btn-bg, #{k-color(app-surface)} );
     }
 }
-
-@mixin kendo-menu--extended-theme() {}