@progress/kendo-theme-classic 9.1.1-dev.2 → 10.0.0-dev.1

package/scss/loader/_index.scss

@@ -1,40 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "loader",
-    dependencies: (
-        "overlay"
-    )
-);
-
-
 // Dependencies
-@import "../overlay/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-loader--styles() {
-    @include module-render( "loader" ) {
+    @include import-once( "loader" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
         @include kendo-loader--layout();
         @include kendo-loader--theme();
         @include kendo-utils--typography--text-color();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-loader--styles();
-}

package/scss/loader/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/loader/_layout.scss";
+@use "@progress/kendo-theme-default/scss/loader/_layout.scss" as *;
 
 
 @mixin kendo-loader--layout() {

package/scss/loader/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/loader/_theme.scss";
+@use "@progress/kendo-theme-default/scss/loader/_theme.scss" as *;
 
 
 @mixin kendo-loader--theme() {

package/scss/loader/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Loader
 
 /// The border radius of the Loader segment.
@@ -123,3 +125,44 @@ $kendo-loading-opacity: .3 !default;
 /// The z-index of the Loading indicator.
 /// @group loading
 $kendo-zindex-loading: 100 !default;
+
+
+@forward "@progress/kendo-theme-default/scss/loader/_variables.scss" with (
+    $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius,
+    $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size,
+    $kendo-loader-md-segment-size: $kendo-loader-md-segment-size,
+    $kendo-loader-lg-segment-size: $kendo-loader-lg-segment-size,
+    $kendo-loader-sm-padding: $kendo-loader-sm-padding,
+    $kendo-loader-md-padding: $kendo-loader-md-padding,
+    $kendo-loader-lg-padding: $kendo-loader-lg-padding,
+    $kendo-loader-sm-spinner-3-width: $kendo-loader-sm-spinner-3-width,
+    $kendo-loader-md-spinner-3-width: $kendo-loader-md-spinner-3-width,
+    $kendo-loader-lg-spinner-3-width: $kendo-loader-lg-spinner-3-width,
+    $kendo-loader-sm-spinner-3-height: $kendo-loader-sm-spinner-3-height,
+    $kendo-loader-md-spinner-3-height: $kendo-loader-md-spinner-3-height,
+    $kendo-loader-lg-spinner-3-height: $kendo-loader-lg-spinner-3-height,
+    $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-spinner-4-width,
+    $kendo-loader-md-spinner-4-width: $kendo-loader-md-spinner-4-width,
+    $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-spinner-4-width,
+    $kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-height,
+    $kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-height,
+    $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-height,
+    $kendo-loader-container-panel-border-width: $kendo-loader-container-panel-border-width,
+    $kendo-loader-container-panel-border-style: $kendo-loader-container-panel-border-style,
+    $kendo-loader-container-panel-border-color: $kendo-loader-container-panel-border-color,
+    $kendo-loader-container-panel-border-radius: $kendo-loader-container-panel-border-radius,
+    $kendo-loader-container-panel-bg: $kendo-loader-container-panel-bg,
+    $kendo-loader-sm-container-padding: $kendo-loader-sm-container-padding,
+    $kendo-loader-md-container-padding: $kendo-loader-md-container-padding,
+    $kendo-loader-lg-container-padding: $kendo-loader-lg-container-padding,
+    $kendo-loader-sm-container-gap: $kendo-loader-sm-container-gap,
+    $kendo-loader-md-container-gap: $kendo-loader-md-container-gap,
+    $kendo-loader-lg-container-gap: $kendo-loader-lg-container-gap,
+    $kendo-loader-sm-container-font-size: $kendo-loader-sm-container-font-size,
+    $kendo-loader-md-container-font-size: $kendo-loader-md-container-font-size,
+    $kendo-loader-lg-container-font-size: $kendo-loader-lg-container-font-size,
+    $kendo-loading-bg: $kendo-loading-bg,
+    $kendo-loading-text: $kendo-loading-text,
+    $kendo-loading-opacity: $kendo-loading-opacity,
+    $kendo-zindex-loading: $kendo-zindex-loading
+);

package/scss/map/_index.scss

@@ -1,42 +1,22 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "map",
-    dependencies: (
-        "button",
-        "icon",
-        "scroller"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../scroller/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../scroller/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-map--styles() {
-    @include module-render( "map" ) {
+    @include import-once( "map" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-scroller--styles();
+        @include kendo-icon--styles();
         @include kendo-map--layout();
         @include kendo-map--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-map--styles();
-}

package/scss/map/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/map/_layout.scss";
+@use "@progress/kendo-theme-default/scss/map/_layout.scss" as *;
 
 
 @mixin kendo-map--layout() {

package/scss/map/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/map/_theme.scss";
+@use "@progress/kendo-theme-default/scss/map/_theme.scss" as *;
 
 
 @mixin kendo-map--theme() {

package/scss/map/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Map
 /// The border width of the Map.
 /// @group map
@@ -51,10 +55,10 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
 
 /// The horizontal padding of the Map attribution.
 /// @group map
-$kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
+$kendo-map-attribution-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Map attribution.
 /// @group map
-$kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
+$kendo-map-attribution-padding-y: k-spacing(0.5) !default;
 /// The font size of the Map attribution.
 /// @group map
 $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
@@ -66,4 +70,29 @@ $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-c
 /// @group map
 $kendo-map-marker-fill: $kendo-color-primary !default;
 
-$kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==";
+$kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default;
+
+
+@forward "@progress/kendo-theme-default/scss/map/_variables.scss" with (
+    $kendo-map-border-width: $kendo-map-border-width,
+    $kendo-map-font-size: $kendo-map-font-size,
+    $kendo-map-line-height: $kendo-map-line-height,
+    $kendo-map-font-family: $kendo-map-font-family,
+    $kendo-map-bg: $kendo-map-bg,
+    $kendo-map-text: $kendo-map-text,
+    $kendo-map-border: $kendo-map-border,
+    $kendo-map-navigator-margin: $kendo-map-navigator-margin,
+    $kendo-map-navigator-padding: $kendo-map-navigator-padding,
+    $kendo-map-navigator-width: $kendo-map-navigator-width,
+    $kendo-map-navigator-height: $kendo-map-navigator-height,
+    $kendo-map-navigator-border-width: $kendo-map-navigator-border-width,
+    $kendo-map-zoom-control-margin: $kendo-map-zoom-control-margin,
+    $kendo-map-zoom-control-button-padding-x: $kendo-map-zoom-control-button-padding-x,
+    $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-y,
+    $kendo-map-attribution-padding-x: $kendo-map-attribution-padding-x,
+    $kendo-map-attribution-padding-y: $kendo-map-attribution-padding-y,
+    $kendo-map-attribution-font-size: $kendo-map-attribution-font-size,
+    $kendo-map-attribution-bg: $kendo-map-attribution-bg,
+    $kendo-map-marker-fill: $kendo-map-marker-fill,
+    $kendo-map-marker-images: $kendo-map-marker-images
+);

package/scss/maskedtextbox/_index.scss

@@ -1,42 +1,22 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "masked-textbox",
-    dependencies: (
-        "icon",
-        "input",
-        "floating-label"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-masked-textbox--styles() {
-    @include module-render( "masked-textbox" ) {
+    @include import-once( "masked-textbox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-icon--styles();
         @include kendo-masked-textbox--layout();
         @include kendo-masked-textbox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-masked-textbox--styles();
-}

package/scss/maskedtextbox/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss";
+@use "@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss" as *;
 
 
 @mixin kendo-masked-textbox--layout() {

package/scss/maskedtextbox/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss";
+@use "@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss" as *;
 
 
 @mixin kendo-masked-textbox--theme() {

package/scss/mediaplayer/_index.scss

@@ -1,44 +1,22 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "media-player",
-    dependencies: (
-        "button",
-        "icon",
-        "listview",
-        "slider",
-        "toolbar"
-    )
-);
-
-
 // Dependencies
-@import "../slider/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-media-player--styles() {
-    @include module-render( "media-player" ) {
+    @include import-once( "media-player" ) {
+        @include core-styles();
+        @include kendo-slider--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-icon--styles();
         @include kendo-media-player--layout();
         @include kendo-media-player--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-media-player--styles();
-}

package/scss/mediaplayer/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/mediaplayer/_layout.scss";
+@use "@progress/kendo-theme-default/scss/mediaplayer/_layout.scss" as *;
 
 
 @mixin kendo-media-player--layout() {

package/scss/mediaplayer/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/mediaplayer/_theme.scss";
+@use "@progress/kendo-theme-default/scss/mediaplayer/_theme.scss" as *;
 
 
 @mixin kendo-media-player--theme() {

package/scss/mediaplayer/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Media player
 
 /// The border width of the MediaPlayer.
@@ -41,3 +43,20 @@ $kendo-media-player-titlebar-border: null !default;
 /// The gradient of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/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-bg: $kendo-media-player-titlebar-bg,
+    $kendo-media-player-titlebar-text: $kendo-media-player-titlebar-text,
+    $kendo-media-player-titlebar-border: $kendo-media-player-titlebar-border,
+    $kendo-media-player-titlebar-gradient: $kendo-media-player-titlebar-gradient
+);

package/scss/menu/_index.scss

@@ -1,44 +1,24 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "menu",
-    dependencies: (
-        "button",
-        "icon",
-        "list",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-@import "../icons/_index.scss";
-@import "../button/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../button/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-menu--styles() {
-    @include module-render( "menu" ) {
+    @include import-once( "menu" ) {
+        @include core-styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
         @include kendo-menu--layout();
         @include kendo-menu--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-menu--styles();
-}

package/scss/menu/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/menu/_layout.scss";
+@use "@progress/kendo-theme-default/scss/menu/_layout.scss" as *;
 
 
 @mixin kendo-menu--layout() {

package/scss/menu/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/menu/_theme.scss";
+@use "@progress/kendo-theme-default/scss/menu/_theme.scss" as *;
 
 
 @mixin kendo-menu--theme() {

package/scss/menu/_variables.scss

@@ -1,3 +1,9 @@
+@use "sass:list";
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Menu
 
 /// The width of the border around the Menu.
@@ -37,7 +43,7 @@ $kendo-menu-item-padding-x: k-spacing(2) !default;
 $kendo-menu-item-padding-y: k-spacing(1) !default;
 /// The spacing between the Menu items.
 /// @group menu
-$kendo-menu-item-spacing: null !default;
+$kendo-menu-item-spacing: unset !default;
 /// The spacing between the Menu item text and icons.
 /// @group menu
 $kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
@@ -94,7 +100,7 @@ $kendo-menu-item-focus-shadow: inset 0 0 3px 1px if($kendo-enable-color-system,
 $kendo-menu-item-selected-bg: null !default;
 /// The text color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-text: null !default;
+$kendo-menu-item-selected-text: unset !default;
 /// The border color of selected Menu item.
 /// @group menu
 $kendo-menu-item-selected-border: null !default;
@@ -133,10 +139,10 @@ $kendo-menu-scroll-button-hover-gradient: null !default;
 
 /// The inline margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-inline: k-spacing(1);
+$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(1.5);
+$kendo-menu-separator-margin-block: k-spacing(1.5) !default;
 /// The border color of Menu separator.
 /// @group menu
 $kendo-menu-separator-border: if($kendo-enable-color-system, k-color(border), $kendo-component-border) !default;
@@ -215,9 +221,9 @@ $kendo-menu-popup-lg-item-icon-margin-start: $kendo-menu-popup-lg-item-padding-x
 
 /// The end margin of the Menu item expand icon.
 /// @group menu
-$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) !default;
-$kendo-menu-popup-md-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{k-math-div( $kendo-menu-popup-md-item-padding-x, 2 )}) ) !default;
-$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{k-math-div( $kendo-menu-popup-lg-item-padding-x, 2 )}) ) !default;
+$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{list.slash( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) !default;
+$kendo-menu-popup-md-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{list.slash( $kendo-menu-popup-md-item-padding-x, 2 )}) ) !default;
+$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{list.slash( $kendo-menu-popup-lg-item-padding-x, 2 )}) ) !default;
 
 /// The spacing between the Menu items in popup.
 /// @group menu
@@ -265,3 +271,95 @@ $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-default/scss/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
+);