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

package/scss/menu/_variables.scss

@@ -5,180 +5,180 @@
 
 /// The width of the border around the Menu.
 /// @group menu
-$kendo-menu-border-width: k-spacing(0) !default;
+$kendo-menu-border-width: var( --kendo-menu-border-width, #{k-spacing(0)} ) !default;
 
 // The font family of the Menu.
 /// @group menu
-$kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-menu-font-family: var( --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-menu-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line heights 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-menu-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The background color of the Menu.
 /// @group menu
-$kendo-menu-bg: transparent !default;
+$kendo-menu-bg: var( --kendo-menu-bg, transparent ) !default;
 /// The text color of the Menu.
 /// @group menu
-$kendo-menu-text: k-color(on-app-surface) !default;
+$kendo-menu-text: var( --kendo-menu-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the Menu.
 /// @group menu
-$kendo-menu-border: initial !default;
+$kendo-menu-border: var( --kendo-menu-border, initial ) !default;
 /// The shadow of the Menu.
 /// @group menu
-$kendo-menu-shadow: none !default;
+$kendo-menu-shadow: var( --kendo-menu-shadow, none ) !default;
 
 
 // Menu item
 
 /// The horizontal padding of Menu item.
 /// @group menu
-$kendo-menu-item-padding-x: k-spacing(2) !default;
+$kendo-menu-item-padding-x: var( --kendo-menu-item-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the Menu item.
 /// @group menu
-$kendo-menu-item-padding-y: k-spacing(3) !default;
+$kendo-menu-item-padding-y: var( --kendo-menu-item-padding-y, #{k-spacing(3)} ) !default;
 
 /// The spacing between the Menu items.
 /// @group menu
-$kendo-menu-item-spacing: k-spacing(0) !default;
+$kendo-menu-item-spacing: var( --kendo-menu-item-spacing, #{k-spacing(0)} ) !default;
 /// The spacing between the Menu item text and icons.
 /// @group menu
-$kendo-menu-item-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+$kendo-menu-item-icon-spacing: var( --kendo-menu-item-icon-spacing, var( --kendo-icon-spacing, .5rem ) ) !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-menu-item-selected-font-weight, var( --kendo-font-weight-bold, normal ) ) !default;
 
 /// The text color of Menu item.
 /// @group menu
-$kendo-menu-item-text: $kendo-menu-text !default;
+$kendo-menu-item-text: var( --kendo-menu-item-text, #{$kendo-menu-text} ) !default;
 /// The background color of Menu item.
 /// @group menu
-$kendo-menu-item-bg: transparent !default;
+$kendo-menu-item-bg: var( --kendo-menu-item-bg, transparent ) !default;
 
 /// The text color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-text: k-color(on-base) !default;
+$kendo-menu-item-hover-text: var( --kendo-menu-item-hover-text, #{k-color(on-base)} ) !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: var( --kendo-menu-item-hover-bg, #{k-color(base-hover)} ) !default;
 
 /// The text color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-text: $kendo-menu-item-hover-text !default;
+$kendo-menu-item-active-text: var( --kendo-menu-item-active-text, #{$kendo-menu-item-hover-text} ) !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: var( --kendo-menu-item-active-bg, #{k-color(base-active)} ) !default;
 
 /// The text color of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-text: $kendo-menu-item-text !default;
+$kendo-menu-item-focus-text: var( --kendo-menu-item-focus-text, #{$kendo-menu-item-text} ) !default;
 /// The background color of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-bg: $kendo-menu-item-bg !default;
+$kendo-menu-item-focus-bg: var( --kendo-menu-item-focus-bg, #{$kendo-menu-item-bg} ) !default;
 
 /// The outline of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-outline: k-color(base-emphasis) !default;
-$kendo-menu-item-focus-outline-offset: calc( #{k-spacing(0.5)} * -1 ) !default;
-$kendo-menu-item-focus-outline-width: 1px !default;
-$kendo-menu-item-focus-outline-style: solid !default;
+$kendo-menu-item-focus-outline: var( --kendo-menu-item-focus-outline, #{k-color(base-emphasis)} ) !default;
+$kendo-menu-item-focus-outline-offset: var( --kendo-menu-item-focus-outline-offset, calc( #{k-spacing(0.5)} * -1 ) ) !default;
+$kendo-menu-item-focus-outline-width: var( --kendo-menu-item-focus-outline-width, 1px ) !default;
+$kendo-menu-item-focus-outline-style: var( --kendo-menu-item-focus-outline-style, solid ) !default;
 
 /// The text color of disabled Menu item.
 /// @group menu
-$kendo-menu-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-menu-item-disabled-text: var( --kendo-menu-item-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 /// The background color of disabled Menu item.
 /// @group menu
-$kendo-menu-item-disabled-bg: $kendo-menu-item-bg !default;
+$kendo-menu-item-disabled-bg: var( --kendo-menu-item-disabled-bg, #{$kendo-menu-item-bg} ) !default;
 
 /// The text color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-text: null !default;
+$kendo-menu-item-selected-text: var( --kendo-menu-item-selected-text, null ) !default;
 /// The background color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-bg: null !default;
+$kendo-menu-item-selected-bg: var( --kendo-menu-item-selected-bg, null ) !default;
 
 
 // Menu Separator
 
 /// The inline margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-inline: k-spacing(1) !default;
+$kendo-menu-separator-margin-inline: var( --kendo-menu-separator-margin-inline, #{k-spacing(1)} ) !default;
 /// The block margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-block: k-spacing(3) !default;
+$kendo-menu-separator-margin-block: var( --kendo-menu-separator-margin-block, #{k-spacing(3)} ) !default;
 /// The width of the Menu separator.
 /// @group menu
-$kendo-menu-separator-width: 1px !default;
+$kendo-menu-separator-width: var( --kendo-menu-separator-width, 1px ) !default;
 /// The border color of Menu separator.
 /// @group menu
-$kendo-menu-separator-border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent) !default;
+$kendo-menu-separator-border: var( --kendo-menu-separator-border, color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent) ) !default;
 
 
 // Menu Popup
 
 /// The horizontal padding of the Menu popup.
 /// @group menu
-$kendo-menu-popup-padding-x: $kendo-popup-padding-x !default;
+$kendo-menu-popup-padding-x: var( --kendo-menu-popup-padding-x, #{$kendo-popup-padding-x} ) !default;
 /// The vertical padding of the Menu popup.
 /// @group menu
-$kendo-menu-popup-padding-y: $kendo-popup-padding-y !default;
+$kendo-menu-popup-padding-y: var( --kendo-menu-popup-padding-y, #{$kendo-popup-padding-y} ) !default;
 
 /// The width of the border around the Menu popup.
 /// @group menu
-$kendo-menu-popup-border-width: $kendo-popup-border-width !default;
+$kendo-menu-popup-border-width: var( --kendo-menu-popup-border-width, #{$kendo-popup-border-width} ) !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-sm-font-size: var( --kendo-menu-popup-sm-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-menu-popup-md-font-size: var( --kendo-menu-popup-md-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-menu-popup-lg-font-size: var( --kendo-menu-popup-lg-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
 
-$kendo-menu-popup-sm-line-height: var( --kendo-line-height, 30px ) !default;
-$kendo-menu-popup-md-line-height: var( --kendo-line-height, 30px ) !default;
-$kendo-menu-popup-lg-line-height: var( --kendo-line-height, 30px ) !default;
+$kendo-menu-popup-sm-line-height: var( --kendo-menu-popup-sm-line-height, var( --kendo-line-height, 30px ) ) !default;
+$kendo-menu-popup-md-line-height: var( --kendo-menu-popup-md-line-height, var( --kendo-line-height, 30px ) ) !default;
+$kendo-menu-popup-lg-line-height: var( --kendo-menu-popup-lg-line-height, var( --kendo-line-height, 30px ) ) !default;
 
 /// The background color of the Menu popup.
 /// @group menu
-$kendo-menu-popup-bg: k-color(surface-alt) !default;
+$kendo-menu-popup-bg: var( --kendo-menu-popup-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of the Menu popup.
 /// @group menu
-$kendo-menu-popup-border: initial !default;
+$kendo-menu-popup-border: var( --kendo-menu-popup-border, initial ) !default;
 /// The shadow of the Menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
+$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, var( --kendo-box-shadow-depth-6, none ) ) !default;
 
 /// The horizontal padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: k-spacing(2) !default;
-$kendo-menu-popup-sm-item-padding-x: $kendo-menu-popup-item-padding-x !default;
-$kendo-menu-popup-md-item-padding-x: $kendo-menu-popup-item-padding-x !default;
-$kendo-menu-popup-lg-item-padding-x: $kendo-menu-popup-item-padding-x !default;
+$kendo-menu-popup-item-padding-x: var( --kendo-menu-popup-item-padding-x, #{k-spacing(2)} ) !default;
+$kendo-menu-popup-sm-item-padding-x: var( --kendo-menu-popup-sm-item-padding-x, #{$kendo-menu-popup-item-padding-x} ) !default;
+$kendo-menu-popup-md-item-padding-x: var( --kendo-menu-popup-md-item-padding-x, #{$kendo-menu-popup-item-padding-x} ) !default;
+$kendo-menu-popup-lg-item-padding-x: var( --kendo-menu-popup-lg-item-padding-x, #{$kendo-menu-popup-item-padding-x} ) !default;
 /// The vertical padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-sm-item-padding-y: $kendo-list-sm-item-padding-y !default;
-$kendo-menu-popup-md-item-padding-y: $kendo-list-md-item-padding-y !default;
-$kendo-menu-popup-lg-item-padding-y: $kendo-list-lg-item-padding-y !default;
+$kendo-menu-popup-sm-item-padding-y: var( --kendo-menu-popup-sm-item-padding-y, #{$kendo-list-sm-item-padding-y} ) !default;
+$kendo-menu-popup-md-item-padding-y: var( --kendo-menu-popup-md-item-padding-y, #{$kendo-list-md-item-padding-y} ) !default;
+$kendo-menu-popup-lg-item-padding-y: var( --kendo-menu-popup-lg-item-padding-y, #{$kendo-list-lg-item-padding-y} ) !default;
 /// The end padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-sm-item-padding-end: calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-md-item-padding-end: calc( calc( #{$kendo-menu-popup-md-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-lg-item-padding-end: calc( calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-sm-item-padding-end: var( --kendo-menu-popup-sm-item-padding-end, calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) ) !default;
+$kendo-menu-popup-md-item-padding-end: var( --kendo-menu-popup-md-item-padding-end, calc( calc( #{$kendo-menu-popup-md-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) ) !default;
+$kendo-menu-popup-lg-item-padding-end: var( --kendo-menu-popup-lg-item-padding-end, calc( calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) ) !default;
 
 /// The start margin of the Menu item expand icon.
 /// @group menu
-$kendo-menu-popup-sm-item-icon-margin-start: k-spacing(0) !default;
-$kendo-menu-popup-item-icon-md-margin-start: k-spacing(0) !default;
-$kendo-menu-popup-lg-item-icon-margin-start: k-spacing(0) !default;
+$kendo-menu-popup-sm-item-icon-margin-start: var( --kendo-menu-popup-sm-item-icon-margin-start, #{k-spacing(0)} ) !default;
+$kendo-menu-popup-item-icon-md-margin-start: var( --kendo-menu-popup-md-item-icon-margin-start, #{k-spacing(0)} ) !default;
+$kendo-menu-popup-lg-item-icon-margin-start: var( --kendo-menu-popup-lg-item-icon-margin-start, #{k-spacing(0)} ) !default;
 /// The end margin of the Menu item expand icon.
 /// @group menu
-$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) !default;
-$kendo-menu-popup-item-icon-md-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-md-item-padding-x}) ) !default;
-$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-lg-item-padding-x}) ) !default;
+$kendo-menu-popup-sm-item-icon-margin-end: var( --kendo-menu-popup-sm-item-icon-margin-end, calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) ) !default;
+$kendo-menu-popup-item-icon-md-margin-end: var( --kendo-menu-popup-md-item-icon-margin-end, calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-md-item-padding-x}) ) ) !default;
+$kendo-menu-popup-lg-item-icon-margin-end: var( --kendo-menu-popup-lg-item-icon-margin-end, calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-lg-item-padding-x}) ) ) !default;
 
 /// The spacing between the Menu items in popup.
 /// @group menu
-$kendo-menu-popup-item-spacing: k-spacing(0) !default;
+$kendo-menu-popup-item-spacing: var( --kendo-menu-popup-item-spacing, #{k-spacing(0)} ) !default;
 
 /// The sizes map for the Menu.
 /// @group menu
@@ -214,50 +214,109 @@ $kendo-menu-sizes: (
 
 /// The text color of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-text: $kendo-list-item-text !default;
+$kendo-menu-popup-item-text: var( --kendo-menu-popup-item-text, #{$kendo-list-item-text} ) !default;
 /// The background color of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-bg: $kendo-list-item-bg !default;
+$kendo-menu-popup-item-bg: var( --kendo-menu-popup-item-bg, #{$kendo-list-item-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: var( --kendo-menu-popup-item-hover-text, #{$kendo-list-item-hover-text} ) !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: var( --kendo-menu-popup-item-hover-bg, #{$kendo-list-item-hover-bg} ) !default;
 
 /// The outline of focused Menu items.
 /// @group menu
-$kendo-menu-popup-item-focus-outline: k-color(base-emphasis) !default;
+$kendo-menu-popup-item-focus-outline: var( --kendo-menu-popup-item-focus-outline, #{k-color(base-emphasis)} ) !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: var( --kendo-menu-popup-item-active-text, #{$kendo-list-item-selected-text} ) !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: var( --kendo-menu-popup-item-active-bg, #{$kendo-list-item-selected-bg} ) !default;
 
 /// The text color of disabled Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-disabled-text: $kendo-list-item-disabled-text !default;
+$kendo-menu-popup-item-disabled-text: var( --kendo-menu-popup-item-disabled-text, #{$kendo-list-item-disabled-text} ) !default;
 /// The background color of disabled Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-disabled-bg: $kendo-list-item-disabled-bg !default;
+$kendo-menu-popup-item-disabled-bg: var( --kendo-menu-popup-item-disabled-bg, #{$kendo-list-item-disabled-bg} ) !default;
 
 /// The background color of Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-bg: k-color(surface-alt) !default;
+$kendo-menu-scroll-button-bg: var( --kendo-menu-scroll-button-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-menu-scroll-button-border: var( --kendo-menu-scroll-button-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The background color of hover Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-bg: null !default;
+$kendo-menu-scroll-button-hover-bg: var( --kendo-menu-scroll-button-hover-bg, null ) !default;
 /// The border color of hover Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-border: null !default;
+$kendo-menu-scroll-button-hover-border: var( --kendo-menu-scroll-button-hover-border, null ) !default;
 
 /// The color of the Menu items icon.
 /// @group menu
-$kendo-menu-icon-color: k-color(primary) !default;
+$kendo-menu-icon-color: var( --kendo-menu-icon-color, #{k-color(primary)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/menu/_variables.scss" with (
+    $kendo-menu-border-width: $kendo-menu-border-width,
+    $kendo-menu-font-family: $kendo-menu-font-family,
+    $kendo-menu-font-size: $kendo-menu-font-size,
+    $kendo-menu-line-height: $kendo-menu-line-height,
+    $kendo-menu-bg: $kendo-menu-bg,
+    $kendo-menu-text: $kendo-menu-text,
+    $kendo-menu-border: $kendo-menu-border,
+    $kendo-menu-item-padding-x: $kendo-menu-item-padding-x,
+    $kendo-menu-item-padding-y: $kendo-menu-item-padding-y,
+    $kendo-menu-item-spacing: $kendo-menu-item-spacing,
+    $kendo-menu-item-icon-spacing: $kendo-menu-item-icon-spacing,
+    $kendo-menu-item-selected-font-weight: $kendo-menu-item-selected-font-weight,
+    $kendo-menu-item-bg: $kendo-menu-item-bg,
+    $kendo-menu-item-text: $kendo-menu-item-text,
+    $kendo-menu-item-hover-bg: $kendo-menu-item-hover-bg,
+    $kendo-menu-item-hover-text: $kendo-menu-item-hover-text,
+    $kendo-menu-item-active-bg: $kendo-menu-item-active-bg,
+    $kendo-menu-item-active-text: $kendo-menu-item-active-text,
+    $kendo-menu-item-selected-bg: $kendo-menu-item-selected-bg,
+    $kendo-menu-item-selected-text: $kendo-menu-item-selected-text,
+    $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,
+    $kendo-menu-popup-padding-x: $kendo-menu-popup-padding-x,
+    $kendo-menu-popup-padding-y: $kendo-menu-popup-padding-y,
+    $kendo-menu-popup-border-width: $kendo-menu-popup-border-width,
+    $kendo-menu-popup-sm-font-size: $kendo-menu-popup-sm-font-size,
+    $kendo-menu-popup-md-font-size: $kendo-menu-popup-md-font-size,
+    $kendo-menu-popup-lg-font-size: $kendo-menu-popup-lg-font-size,
+    $kendo-menu-popup-sm-line-height: $kendo-menu-popup-sm-line-height,
+    $kendo-menu-popup-md-line-height: $kendo-menu-popup-md-line-height,
+    $kendo-menu-popup-lg-line-height: $kendo-menu-popup-lg-line-height,
+    $kendo-menu-popup-bg: $kendo-menu-popup-bg,
+    $kendo-menu-popup-border: $kendo-menu-popup-border,
+    $kendo-menu-popup-sm-item-padding-x: $kendo-menu-popup-sm-item-padding-x,
+    $kendo-menu-popup-md-item-padding-x: $kendo-menu-popup-md-item-padding-x,
+    $kendo-menu-popup-lg-item-padding-x: $kendo-menu-popup-lg-item-padding-x,
+    $kendo-menu-popup-sm-item-padding-y: $kendo-menu-popup-sm-item-padding-y,
+    $kendo-menu-popup-md-item-padding-y: $kendo-menu-popup-md-item-padding-y,
+    $kendo-menu-popup-lg-item-padding-y: $kendo-menu-popup-lg-item-padding-y,
+    $kendo-menu-popup-sm-item-padding-end: $kendo-menu-popup-sm-item-padding-end,
+    $kendo-menu-popup-md-item-padding-end: $kendo-menu-popup-md-item-padding-end,
+    $kendo-menu-popup-lg-item-padding-end: $kendo-menu-popup-lg-item-padding-end,
+    $kendo-menu-popup-sm-item-icon-margin-start: $kendo-menu-popup-sm-item-icon-margin-start,
+    $kendo-menu-popup-md-item-icon-margin-start: $kendo-menu-popup-item-icon-md-margin-start,
+    $kendo-menu-popup-lg-item-icon-margin-start: $kendo-menu-popup-lg-item-icon-margin-start,
+    $kendo-menu-popup-sm-item-icon-margin-end: $kendo-menu-popup-sm-item-icon-margin-end,
+    $kendo-menu-popup-md-item-icon-margin-end: $kendo-menu-popup-item-icon-md-margin-end,
+    $kendo-menu-popup-lg-item-icon-margin-end: $kendo-menu-popup-lg-item-icon-margin-end,
+    $kendo-menu-popup-item-spacing: $kendo-menu-popup-item-spacing,
+    $kendo-menu-popup-item-bg: $kendo-menu-popup-item-bg,
+    $kendo-menu-popup-item-text: $kendo-menu-popup-item-text,
+    $kendo-menu-popup-item-hover-bg: $kendo-menu-popup-item-hover-bg,
+    $kendo-menu-popup-item-hover-text: $kendo-menu-popup-item-hover-text,
+    $kendo-menu-popup-item-active-bg: $kendo-menu-popup-item-active-bg,
+    $kendo-menu-popup-item-active-text: $kendo-menu-popup-item-active-text
+);

package/scss/menu-button/_layout.scss

@@ -1,20 +1,15 @@
 @use "./_variables.scss" as *;
 @use "../button/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/menu-button/_layout.scss" as *;
 
 @mixin kendo-menu-button--layout() {
-
-    // Menu button
-    .k-menu-button,
-    .k-dropdown-button {
-        aspect-ratio: auto;
-        flex-flow: row nowrap;
-
-        > .k-button-arrow {
-            flex: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
+    @include kendo-menu-button--layout-base();
+
+    .k-menu-button > .k-button-arrow,
+    .k-dropdown-button > .k-button-arrow,
+    .k-menu-button.k-icon-button > .k-button-arrow,
+    .k-dropdown-button.k-icon-button > .k-button-arrow {
+        margin: 0;
+        padding: 0;
     }
-
 }

package/scss/menu-button/_theme.scss

@@ -1 +1,5 @@
-@mixin kendo-menu-button--theme() { }
+@use "@progress/kendo-theme-core/scss/components/menu-button/_theme.scss" as *;
+
+@mixin kendo-menu-button--theme() {
+    @include kendo-menu-button--theme-base();
+}

package/scss/menu-button/_variables.scss

@@ -1 +1,11 @@
+@use "../button/_variables.scss" as *;
+
 // Menu button variables.
+
+/// The horizontal padding of the button arrow in the Menu Button.
+/// @group menu-button
+$kendo-menu-button-arrow-padding-x: 0 !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
+);

package/scss/messagebox/_layout.scss

@@ -1,22 +1,6 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/messagebox/_layout.scss" as *;
 
 @mixin kendo-messagebox--layout() {
-
-    .k-messagebox {
-        margin: var( --kendo-message-box-margin, #{$kendo-message-box-margin} );
-        padding-inline: var( --kendo-message-box-padding-x, #{$kendo-message-box-padding-x} );
-        padding-block: var( --kendo-message-box-padding-y, #{$kendo-message-box-padding-y} );
-        border-width: var( --kendo-message-box-border-width, #{$kendo-message-box-border-width} );
-        border-style: var( --kendo-message-box-border-style, #{$kendo-message-box-border-style} );
-        box-sizing: border-box;
-        font-family: var( --kendo-message-box-font-family, #{$kendo-message-box-font-family} );
-        font-size: var( --kendo-message-box-font-size, #{$kendo-message-box-font-size} );
-        line-height: var( --kendo-message-box-line-height, #{$kendo-message-box-line-height} );
-
-        a {
-            font-style: var( --kendo-message-box-link-font-style, #{$kendo-message-box-link-font-style} );
-            text-decoration: var( --kendo-message-box-link-decoration, #{$kendo-message-box-link-decoration} );
-        }
-    }
-
+    @include kendo-messagebox--layout-base();
 }

package/scss/messagebox/_theme.scss

@@ -1,40 +1,25 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/messagebox/_theme.scss" as *;
 
 @mixin kendo-messagebox--theme() {
+    @include kendo-messagebox--theme-base();
 
     .k-messagebox {
-        color: var( --kendo-messagebox-text, initial );
-        background-color: var( --kendo-messagebox-bg, initial );
-        border-color: var( --kendo-messagebox-border, initial );
 
         a {
             @include fill(
-                $color: var( --kendo-message-box-link-text, #{$kendo-message-box-link-text} ),
+                $color: $kendo-message-box-link-text,
             );
 
             &:hover {
                 @include fill(
-                    $color: var( --kendo-message-box-link-hover-text, #{$kendo-message-box-link-hover-text} ),
+                    $color: $kendo-message-box-link-hover-text,
                 );
             }
         }
 
     }
 
-    @each $theme-color, $color-props in $kendo-messagebox-theme-colors {
-
-        $_text: currentColor;
-        $_bg: map.get( $color-props, bg );
-        $_border: map.get( $color-props, border );
-
-        .k-messagebox-#{$theme-color} {
-            --kendo-messagebox-text: var( --kendo-messagebox-#{$theme-color}-text, #{$_text} );
-            --kendo-messagebox-bg: var( --kendo-messagebox-#{$theme-color}-bg, #{$_bg} );
-            --kendo-messagebox-border: var( --kendo-messagebox-#{$theme-color}-border, #{$_border} );
-        }
-
-    }
-
 }

package/scss/messagebox/_variables.scss

@@ -3,66 +3,62 @@
 
 /// Margin around the message box.
 /// @group messagebox
-$kendo-message-box-margin: 0 0 k-spacing(3) 0 !default;
+$kendo-message-box-margin: var( --kendo-message-box-margin, 0 0 k-spacing(3) 0 ) !default;
 /// Horizontal padding of the message box.
 /// @group messagebox
-$kendo-message-box-padding-x: k-spacing(3) !default;
+$kendo-message-box-padding-x: var( --kendo-message-box-padding-x, k-spacing(3) ) !default;
 /// Vertical padding of the message box.
 /// @group messagebox
-$kendo-message-box-padding-y: k-spacing(2) !default;
+$kendo-message-box-padding-y: var( --kendo-message-box-padding-y, k-spacing(2) ) !default;
 /// Border width of the message box.
 /// @group messagebox
-$kendo-message-box-border-width: 0 !default;
+$kendo-message-box-border-width: var( --kendo-message-box-border-width, 0 ) !default;
 /// Border style of the message box.
 /// @group messagebox
-$kendo-message-box-border-style: solid !default;
+$kendo-message-box-border-style: var( --kendo-message-box-border-style, solid ) !default;
 /// Font family of the message box.
 /// @group messagebox
-$kendo-message-box-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-message-box-font-family: var( --kendo-message-box-font-family, var(--kendo-font-family, inherit) ) !default;
 /// Font size of the message box.
 /// @group messagebox
-$kendo-message-box-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-message-box-font-size: var( --kendo-message-box-font-size, var(--kendo-font-size-sm, inherit) ) !default;
 /// Line height of the message box.
 /// @group messagebox
-$kendo-message-box-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-message-box-line-height: var( --kendo-message-box-line-height, var(--kendo-line-height-sm, normal) ) !default;
 
 /// Font style of the message box links.
 /// @group messagebox
-$kendo-message-box-link-font-style: normal !default;
+$kendo-message-box-link-font-style: var( --kendo-message-box-link-font-style, normal ) !default;
 /// Text decoration of the message box links.
 /// @group messagebox
-$kendo-message-box-link-decoration: underline !default;
+$kendo-message-box-link-decoration: var( --kendo-message-box-link-decoration, underline ) !default;
 /// Text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-text: k-color(primary) !default;
+$kendo-message-box-link-text: var( --kendo-message-box-link-text, k-color(primary) ) !default;
 /// Hover text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-hover-text: k-color(primary-hover) !default;
+$kendo-message-box-link-hover-text: var( --kendo-message-box-link-hover-text, k-color(primary-hover) ) !default;
 
 $kendo-messagebox-theme-colors: (
-    primary: (
-        text: k-color(primary-emphasis),
-        bg: k-color(primary-subtle),
-        border: k-color(primary-subtle),
-    ),
-    info: (
-        text: k-color(info-on-surface),
-        bg: k-color(info-subtle),
-        border: k-color(info-subtle),
-    ),
-    success: (
-        text: k-color(success-on-surface),
-        bg: k-color(success-subtle),
-        border: k-color(success-subtle),
-    ),
-    warning: (
-        text: k-color(warning-on-surface),
-        bg: k-color(warning-subtle),
-        border: k-color(warning-subtle),
-    ),
-    error: (
-        text: k-color(error-on-surface),
-        bg: k-color(error-subtle),
-        border: k-color(error-subtle),
-    ),
+    "primary": k-color(primary),
+     "secondary": k-color(secondary),
+     "tertiary": k-color(tertiary),
+     "info": k-color(info),
+     "success": k-color(success),
+     "warning": k-color(warning),
+     "error": k-color(error),
+     "dark": k-color(dark),
+     "light": k-color(light),
+     "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with (
+    $kendo-message-box-margin: $kendo-message-box-margin,
+    $kendo-message-box-padding-x: $kendo-message-box-padding-x,
+    $kendo-message-box-padding-y: $kendo-message-box-padding-y,
+    $kendo-message-box-border-width: $kendo-message-box-border-width,
+    $kendo-message-box-font-size: $kendo-message-box-font-size,
+    $kendo-message-box-line-height: $kendo-message-box-line-height,
+    $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
+    $kendo-message-box-theme-colors: $kendo-messagebox-theme-colors
+);

package/scss/multiselect/_layout.scss

@@ -1,6 +1,5 @@
-@mixin kendo-multiselect--layout() {
-
-    // Multiselect
-    .k-multiselect {}
+@use "@progress/kendo-theme-core/scss/components/multiselect/_layout.scss" as *;
 
+@mixin kendo-multiselect--layout() {
+    @include kendo-multiselect--layout-base();
 }

package/scss/multiselect/_theme.scss

@@ -1,6 +1,5 @@
-@mixin kendo-multiselect--theme() {
-
-    // Multiselect
-    .k-multiselect {}
+@use "@progress/kendo-theme-core/scss/components/multiselect/_theme.scss" as *;
 
+@mixin kendo-multiselect--theme() {
+    @include kendo-multiselect--theme-base();
 }

package/scss/no-data/_layout.scss

@@ -1,21 +1,6 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/no-data/_layout.scss" as *;
 
 @mixin kendo-no-data--layout() {
-
-    .k-no-data {
-        min-height: var( --kendo-no-data-min-height, #{$kendo-no-data-min-height});
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: lighter;
-        text-align: center;
-        white-space: normal;
-    }
-
-
-    // Alias
-    .k-nodata {
-        @extend .k-no-data !optional;
-    }
+    @include kendo-no-data--layout-base();
 
 }