@progress/kendo-theme-bootstrap 9.1.1-dev.1 → 10.0.0-dev.0

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,16 +1,15 @@
-@import "@progress/kendo-theme-default/scss/menu/_layout.scss";
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-default/scss/menu/_layout.scss" as *;
 
 @mixin kendo-menu--layout() {
 
     @include kendo-menu--layout-base();
 
     .k-menu.k-menu-horizontal:not(.k-context-menu) {
-        padding-block: $navbar-padding-y;
-        padding-inline: $navbar-padding-x;
+        padding-block: k-spacing(2);
     }
     .k-menu.k-menu-vertical:not(.k-context-menu) {
-        padding-block: $navbar-padding-y;
-        padding-inline: 0;
+        padding-block: k-spacing(2);
     }
 
     .k-menu-popup :is(.k-menu-group, .k-menu-vertical) {

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 "../popup/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Menu
 
 /// The width of the border around the Menu.
@@ -94,7 +100,7 @@ $kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, co
 $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: $kendo-menu-item-text !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(2);;
+$kendo-menu-separator-margin-block: k-spacing(2) !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
+);

package/scss/menu-button/_index.scss

@@ -1,41 +1,20 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "menu-button",
-    dependencies: (
-        "button",
-        "icon",
-        "menu"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../menu/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../menu/_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-button--styles() {
-    @include module-render( "menu-button" ) {
+    @include import-once( "menu-button" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-menu--styles();
         @include kendo-menu-button--layout();
         @include kendo-menu-button--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-menu-button--styles();
-}

package/scss/menu-button/_layout.scss

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

package/scss/menu-button/_theme.scss

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

package/scss/menu-button/_variables.scss

@@ -1,5 +1,12 @@
+@use "../button/_variables.scss" as *;
+
 // Menu-button
 
 /// 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-default/scss/menu-button/_variables.scss" with (
+    $kendo-menu-button-arrow-padding-x: $kendo-menu-button-arrow-padding-x
+);

package/scss/messagebox/_index.scss

@@ -1,38 +1,18 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "messagebox",
-    dependencies: (
-        "icon"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_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-messagebox--styles() {
-    @include module-render( "messagebox" ) {
+    @include import-once( "messagebox" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
         @include kendo-messagebox--layout();
         @include kendo-messagebox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-messagebox--styles();
-}

package/scss/messagebox/_layout.scss

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

package/scss/messagebox/_theme.scss

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

package/scss/messagebox/_variables.scss

@@ -1,7 +1,9 @@
+@use "../core/_index.scss" as *;
+
 // Message box
 $kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
-$kendo-message-box-padding-x: $kendo-padding-md-x !default;
-$kendo-message-box-padding-y: $kendo-padding-md-y !default;
+$kendo-message-box-padding-x: k-spacing(4) !default;
+$kendo-message-box-padding-y: k-spacing(2) !default;
 $kendo-message-box-border-width: 0 0 0 4px !default;
 
 $kendo-message-box-font-size: var( --kendo-font-size, inherit )  !default;
@@ -13,3 +15,18 @@ $kendo-message-box-border-level: -9 !default;
 
 $kendo-message-box-link-font-style: normal !default;
 $kendo-message-box-link-text-decoration: underline !default;
+
+
+@forward "@progress/kendo-theme-default/scss/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
+);

package/scss/multiselect/_index.scss

@@ -1,50 +1,30 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "multiselect",
-    dependencies: (
-        "button",
-        "chip",
-        "floating-label",
-        "icon",
-        "input",
-        "list",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../input/_index.scss";
-@import "../chip/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../chip/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_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-multiselect--styles() {
-    @include module-render( "multiselect" ) {
+    @include import-once( "multiselect" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-chip--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
         @include kendo-multiselect--layout();
         @include kendo-multiselect--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-multiselect--styles();
-}

package/scss/multiselect/_layout.scss

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

package/scss/multiselect/_theme.scss

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

package/scss/no-data/_index.scss

@@ -1,32 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "no-data",
-    dependencies: ()
-);
-
 // Dependencies
-
+@use "../core/_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-no-data--styles() {
-    @include module-render( "no-data" ) {
+    @include import-once( "no-data" ) {
+        @include core-styles();
         @include kendo-no-data--layout();
         @include kendo-no-data--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-no-data--styles();
-}

package/scss/no-data/_layout.scss

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

package/scss/no-data/_theme.scss

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

package/scss/no-data/_variables.scss

@@ -1,7 +1,15 @@
+@use "../core/_index.scss" as *;
+
 /// The minimum height of the 'No Data' text container.
 /// @group no-data
 $kendo-no-data-min-height: 140px !default;
 
 /// The color of the 'No Data' text.
 /// @group no-data
-$kendo-no-data-text: $kendo-subtle-text !default;
+$kendo-no-data-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/no-data/_variables.scss" with (
+    $kendo-no-data-min-height: $kendo-no-data-min-height,
+    $kendo-no-data-text: $kendo-no-data-text
+);

package/scss/notification/_functions.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
+@function notification-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: map.merge(( $name: (
+            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade( $color, 6 )),
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint( $color, 9 )),
+            border: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint( $color, 10 )),
+        )), $_theme );
+    }
+
+    @return $_theme;
+}

package/scss/notification/_index.scss

@@ -1,41 +1,20 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "notification",
-    dependencies: (
-        "button",
-        "icon",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../popup/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../popup/_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-notification--styles() {
-    @include module-render( "notification" ) {
+    @include import-once( "notification" ) {
+        @include core-styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
         @include kendo-notification--layout();
         @include kendo-notification--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-notification--styles();
-}

package/scss/notification/_layout.scss

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

package/scss/notification/_theme.scss

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