@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/menu/_layout.scss

@@ -1,323 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../icons/_variables.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-menu--layout-base() {
-
-    // Menu bar
-    .k-menu-bar {
-        border-width: $kendo-menu-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-menu-font-family;
-        font-size: $kendo-menu-font-size;
-        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;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-    .k-menu { @extend .k-menu-bar !optional; }
-
-    // Menu item
-    .k-menu-item {
-        border-width: 0;
-        outline: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        flex: none;
-        position: relative;
-        user-select: none;
-
-        &.k-selected {
-            font-weight: $kendo-menu-item-selected-font-weight;
-        }
-    }
-    .k-menu-item-content {
-        display: block;
-        height: auto;
-        overflow: visible;
-
-        .k-actions {
-            margin-top: 0;
-        }
-    }
-
-
-    // Menu link
-    .k-menu-link {
-        padding-block: $kendo-menu-item-padding-y;
-        padding-inline: $kendo-menu-item-padding-x;
-        outline: 0;
-        color: inherit;
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-        gap: $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 {
-        margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
-        display: inline-flex;
-        flex-flow: row wrap;
-        align-items: center;
-        flex: none;
-        position: relative;
-    }
-
-
-    // Orientation -- horizontal
-    .k-menu-horizontal {
-        flex-direction: row;
-
-        > .k-menu-item + .k-menu-item {
-            margin-inline-start: $kendo-menu-item-spacing;
-        }
-
-        > .k-separator {
-            margin-block: $kendo-menu-separator-margin-block;
-            margin-inline: $kendo-menu-separator-margin-inline;
-            width: 0;
-            height: auto;
-            border-width: 0 0 0 1px;
-            border-style: solid;
-        }
-    }
-
-
-    // Orientation -- vertical
-    .k-menu-vertical {
-        flex-direction: column;
-        width: 100%;
-
-        > .k-menu-item + .k-menu-item {
-            margin-top: $kendo-menu-item-spacing;
-        }
-
-        > .k-menu-item > .k-menu-link {
-            padding-block: $kendo-menu-popup-item-padding-y;
-            padding-inline: $kendo-menu-popup-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-item-padding-end;
-        }
-
-        > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
-        }
-
-        > .k-separator {
-            margin-block: $kendo-menu-separator-margin-block;
-            margin-inline: 0;
-            height: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            display: block;
-        }
-    }
-
-
-    // Menu popup
-    .k-menu-popup {
-        padding-block: $kendo-menu-popup-padding-y;
-        padding-inline: $kendo-menu-popup-padding-x;
-        box-sizing: border-box;
-        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 {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-flow: column nowrap;
-        position: absolute;
-
-        .k-menu-item + .k-menu-item {
-            margin-top: $kendo-menu-popup-item-spacing;
-        }
-
-        .k-separator {
-            margin-block: $kendo-menu-separator-margin-inline;
-            margin-inline: 0;
-            height: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            display: block;
-        }
-    }
-    .k-menu-popup .k-menu-group {
-        position: relative;
-    }
-
-
-    // Sizes
-    .k-menu-group-sm {
-        font-size: $kendo-menu-popup-sm-font-size;
-        line-height: $kendo-menu-popup-sm-line-height;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-sm-font-size;
-            line-height: $kendo-menu-popup-sm-line-height;
-        }
-
-        .k-menu-link {
-            padding-block: $kendo-menu-popup-sm-item-padding-y;
-            padding-inline: $kendo-menu-popup-sm-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end;
-        }
-    }
-    .k-menu-group-md {
-        font-size: $kendo-menu-popup-md-font-size;
-        line-height: $kendo-menu-popup-md-line-height;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-md-font-size;
-            line-height: $kendo-menu-popup-md-line-height;
-        }
-
-        .k-menu-link {
-            padding-block: $kendo-menu-popup-md-item-padding-y;
-            padding-inline: $kendo-menu-popup-md-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
-        }
-    }
-    .k-menu-group-lg {
-        font-size: $kendo-menu-popup-lg-font-size;
-        line-height: $kendo-menu-popup-lg-line-height;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-lg-font-size;
-            line-height: $kendo-menu-popup-lg-line-height;
-        }
-
-        .k-menu-link {
-            padding-block: $kendo-menu-popup-lg-item-padding-y;
-            padding-inline: $kendo-menu-popup-lg-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end;
-        }
-    }
-
-
-    // Context menu
-    .k-popups-wrapper {
-        position: relative;
-        border: 0;
-        margin: 0;
-        padding: 0;
-    }
-    .k-context-menu {
-        margin: 0;
-        padding-block: $kendo-menu-popup-padding-y;
-        padding-inline: $kendo-menu-popup-padding-x;
-        border-width: $kendo-menu-popup-border-width;
-        border-style: solid;
-
-        &.k-menu-horizontal {
-            padding-block: $kendo-menu-popup-padding-x;
-            padding-inline: $kendo-menu-popup-padding-y;
-        }
-    }
-    .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-popup .k-context-menu,
-    .k-context-menu-popup .k-context-menu {
-        border-width: 0;
-    }
-
-
-    // Scrolling
-    .k-menu-scroll-wrapper {
-        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%;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/menu/_layout.scss" as *;
 
 
 @mixin kendo-menu--layout() {

package/scss/menu/_theme.scss

@@ -1,143 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-menu--theme-base() {
-
-    .k-menu:not(.k-context-menu) {
-        @include fill(
-            $kendo-menu-text,
-            $kendo-menu-bg,
-            $kendo-menu-border,
-            $kendo-menu-gradient
-        );
-
-        > .k-item {
-            @include fill(
-                $kendo-menu-item-text,
-                $kendo-menu-item-bg,
-                $kendo-menu-item-border,
-                $kendo-menu-item-gradient
-            );
-
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $kendo-menu-item-hover-text,
-                    $kendo-menu-item-hover-bg,
-                    $kendo-menu-item-hover-border,
-                    $kendo-menu-item-hover-gradient
-                );
-            }
-
-            &:active,
-            &.k-active {
-                @include fill(
-                    $kendo-menu-item-active-text,
-                    $kendo-menu-item-active-bg,
-                    $kendo-menu-item-active-border,
-                    $kendo-menu-item-active-gradient
-                );
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-menu-item-focus-shadow, true );
-            }
-
-            &.k-selected {
-                @include fill(
-                    $kendo-menu-item-selected-text,
-                    $kendo-menu-item-selected-bg,
-                    $kendo-menu-item-selected-border,
-                    $kendo-menu-item-selected-gradient
-                );
-            }
-        }
-
-        > .k-separator {
-            @include fill(
-                $border: $kendo-menu-separator-border
-            );
-        }
-    }
-
-    .k-menu-group,
-    .k-menu.k-context-menu {
-        @include fill(
-            $kendo-menu-popup-text,
-            $kendo-menu-popup-bg,
-            $kendo-menu-popup-border,
-            $kendo-menu-popup-gradient
-        );
-
-        .k-item > .k-link {
-            @include fill(
-                $kendo-menu-popup-item-text,
-                $kendo-menu-popup-item-bg,
-                $kendo-menu-popup-item-border,
-                $kendo-menu-popup-item-gradient
-            );
-
-            &:hover,
-            &.k-hover {
-                @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
-                );
-            }
-
-            &:active,
-            &.k-active,
-            &.k-selected {
-                @include fill(
-                    $kendo-menu-popup-item-active-text,
-                    $kendo-menu-popup-item-active-bg,
-                    $kendo-menu-popup-item-active-border,
-                    $kendo-menu-popup-item-active-gradient
-                );
-            }
-        }
-
-        .k-item:focus,
-        .k-item.k-focus {
-            > .k-link {
-                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
-            }
-        }
-
-        > .k-separator {
-            @include fill(
-                $border: $kendo-menu-separator-border
-            );
-        }
-    }
-
-
-    // Scrolling
-    .k-menu-scroll-wrapper .k-menu-scroll-button {
-        @include fill(
-            $kendo-menu-scroll-button-text,
-            $kendo-menu-scroll-button-bg,
-            $kendo-menu-scroll-button-border,
-            $kendo-menu-scroll-button-gradient
-        );
-
-        &:hover {
-            @include fill(
-                $kendo-menu-scroll-button-hover-text,
-                $kendo-menu-scroll-button-hover-bg,
-                $kendo-menu-scroll-button-hover-border,
-                $kendo-menu-scroll-button-hover-gradient
-            );
-
-            &::before {
-                opacity: 0;
-            }
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/menu/_theme.scss" as *;
 
 
 @mixin kendo-menu--theme() {

package/scss/menu/_variables.scss

@@ -271,3 +271,94 @@ $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: $kendo-menu-item-focus-shadow !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-gradient: $kendo-menu-gradient,
+    $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-border: $kendo-menu-item-border,
+    $kendo-menu-item-gradient: $kendo-menu-item-gradient,
+    $kendo-menu-item-hover-bg: $kendo-menu-item-hover-bg,
+    $kendo-menu-item-hover-text: $kendo-menu-item-hover-text,
+    $kendo-menu-item-hover-border: $kendo-menu-item-hover-border,
+    $kendo-menu-item-hover-gradient: $kendo-menu-item-hover-gradient,
+    $kendo-menu-item-active-bg: $kendo-menu-item-active-bg,
+    $kendo-menu-item-active-text: $kendo-menu-item-active-text,
+    $kendo-menu-item-active-border: $kendo-menu-item-active-border,
+    $kendo-menu-item-active-gradient: $kendo-menu-item-active-gradient,
+    $kendo-menu-item-focus-shadow: $kendo-menu-item-focus-shadow,
+    $kendo-menu-item-selected-bg: $kendo-menu-item-selected-bg,
+    $kendo-menu-item-selected-text: $kendo-menu-item-selected-text,
+    $kendo-menu-item-selected-border: $kendo-menu-item-selected-border,
+    $kendo-menu-item-selected-gradient: $kendo-menu-item-selected-gradient,
+    $kendo-menu-scroll-button-bg: $kendo-menu-scroll-button-bg,
+    $kendo-menu-scroll-button-text: $kendo-menu-scroll-button-text,
+    $kendo-menu-scroll-button-border: $kendo-menu-scroll-button-border,
+    $kendo-menu-scroll-button-gradient: $kendo-menu-scroll-button-gradient,
+    $kendo-menu-scroll-button-hover-bg: $kendo-menu-scroll-button-hover-bg,
+    $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-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-font-size: $kendo-menu-popup-font-size,
+    $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-line-height: $kendo-menu-popup-line-height,
+    $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-text: $kendo-menu-popup-text,
+    $kendo-menu-popup-border: $kendo-menu-popup-border,
+    $kendo-menu-popup-gradient: $kendo-menu-popup-gradient,
+    $kendo-menu-popup-item-padding-x: $kendo-menu-popup-item-padding-x,
+    $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-item-padding-y: $kendo-menu-popup-item-padding-y,
+    $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-item-padding-end: $kendo-menu-popup-item-padding-end,
+    $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-md-item-icon-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-md-item-icon-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-border: $kendo-menu-popup-item-border,
+    $kendo-menu-popup-item-gradient: $kendo-menu-popup-item-gradient,
+    $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-hover-border: $kendo-menu-popup-item-hover-border,
+    $kendo-menu-popup-item-hover-gradient: $kendo-menu-popup-item-hover-gradient,
+    $kendo-menu-popup-item-active-bg: $kendo-menu-popup-item-active-bg,
+    $kendo-menu-popup-item-active-text: $kendo-menu-popup-item-active-text,
+    $kendo-menu-popup-item-active-border: $kendo-menu-popup-item-active-border,
+    $kendo-menu-popup-item-active-gradient: $kendo-menu-popup-item-active-gradient,
+    $kendo-menu-popup-item-focus-shadow: $kendo-menu-popup-item-focus-shadow
+);

package/scss/menu-button/_layout.scss

@@ -1,35 +1,4 @@
-@use "./_variables.scss" as *;
-@use "../button/_variables.scss" as *;
-
-@mixin kendo-menu-button--layout-base() {
-
-    // Menu button
-    .k-menu-button,
-    .k-dropdown-button {
-        aspect-ratio: auto;
-        outline: 0;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-
-        > .k-button-arrow {
-            margin-inline-start: calc( #{$kendo-menu-button-arrow-padding-x} * -1 );
-            margin-inline-end: calc( #{$kendo-button-padding-x} * -1 );
-            padding-left: $kendo-menu-button-arrow-padding-x;
-            padding-right: $kendo-menu-button-arrow-padding-x;
-            flex: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        &.k-icon-button > .k-button-arrow {
-            margin-inline-start: 0;
-            margin-inline-end: calc( #{$kendo-button-padding-y} * -1 );
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/menu-button/_layout.scss" as *;
 
 
 @mixin kendo-menu-button--layout() {

package/scss/menu-button/_theme.scss

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

package/scss/menu-button/_variables.scss

@@ -5,3 +5,7 @@
 /// The horizontal padding of the button arrow in the Menu Button..
 /// @group menu-button
 $kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !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,26 +1,4 @@
-@use "./_variables.scss" as *;
-
-@mixin kendo-messagebox--layout-base() {
-
-    // Base
-    .k-messagebox {
-        margin: $kendo-message-box-margin;
-        padding-block: $kendo-message-box-padding-y;
-        padding-inline: $kendo-message-box-padding-x;
-        border-width: $kendo-message-box-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        font-size: $kendo-message-box-font-size;
-        line-height: $kendo-message-box-line-height;
-
-        a {
-            color: inherit;
-            font-style: $kendo-message-box-link-font-style;
-            text-decoration: $kendo-message-box-link-text-decoration;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/messagebox/_layout.scss" as *;
 
 
 @mixin kendo-messagebox--layout() {

package/scss/messagebox/_theme.scss

@@ -1,28 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-messagebox--theme-base() {
-
-    @each $color-name, $color in $kendo-theme-colors {
-        .k-messagebox-#{$color-name} {
-            @if $color-name == "inverse" {
-                @include fill(
-                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
-                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
-                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
-                );
-            } @else {
-                @include fill(
-                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
-                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
-                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
-                );
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/messagebox/_theme.scss" as *;
 
 
 @mixin kendo-messagebox--theme() {

package/scss/messagebox/_variables.scss

@@ -15,3 +15,17 @@ $kendo-message-box-border-level: -9 !default;
 
 $kendo-message-box-link-font-style: italic !default;
 $kendo-message-box-link-text-decoration: underline !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-bg-level: $kendo-message-box-bg-level,
+    $kendo-message-box-text-level: $kendo-message-box-text-level,
+    $kendo-message-box-border-level: $kendo-message-box-border-level,
+    $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
+    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration
+);