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

package/scss/daterangepicker/_variables.scss

@@ -1,2 +1,7 @@
 // Daterangepicker
 $kendo-daterange-picker-input-width: 10em !default;
+
+
+@forward "@progress/kendo-theme-default/scss/daterangepicker/_variables.scss" with (
+    $kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
+);

package/scss/datetimepicker/_index.scss

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

package/scss/datetimepicker/_layout.scss

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

package/scss/datetimepicker/_theme.scss

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

package/scss/datetimepicker/_variables.scss

@@ -1,2 +1,9 @@
+@use "../calendar/_variables.scss" as *;
+
 // DateTime
 $kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/datetimepicker/_variables.scss" with (
+    $kendo-datetime-width: $kendo-datetime-width
+);

package/scss/dialog/_index.scss

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

package/scss/dialog/_layout.scss

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

package/scss/dialog/_theme.scss

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

package/scss/dialog/_variables.scss

@@ -1,14 +1,18 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+
 // Dialog
 
 /// The background color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-bg: null !default;
+$kendo-dialog-titlebar-bg: $kendo-component-header-bg !default;
 /// The text color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-text: null !default;
+$kendo-dialog-titlebar-text: $kendo-component-header-text !default;
 /// The border color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-border: null !default;
+$kendo-dialog-titlebar-border: inherit !default;
 
 /// The horizontal padding of the Dialog action buttons.
 /// @group dialog
@@ -26,7 +30,19 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 /// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
-    "primary": k-map-get($kendo-theme-colors, "primary"),
-    "light": k-map-get($kendo-theme-colors, "light"),
-    "dark": k-map-get($kendo-theme-colors, "dark")
+    "primary": map.get($kendo-theme-colors, "primary"),
+    "light": map.get($kendo-theme-colors, "light"),
+    "dark": map.get($kendo-theme-colors, "dark")
 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/dialog/_variables.scss" with (
+    $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg,
+    $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text,
+    $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border,
+    $kendo-dialog-buttongroup-padding-x: $kendo-dialog-buttongroup-padding-x,
+    $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
+    $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
+    $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
+    $kendo-dialog-theme-colors: $kendo-dialog-theme-colors
+);

package/scss/dock-manager/_index.scss

@@ -1,37 +1,22 @@
-@import "../core/_index.scss";
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dock-manager",
-    dependencies: (
-        "splitter",
-        "tabstrip",
-        "toolbar"
-    )
-);
-
 // Dependencies
-@import "../splitter/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../tabstrip/_index.scss";
+@use "../core/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../tabstrip/_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-dock-manager--styles() {
-    @include module-render("dock-manager") {
+    @include import-once("dock-manager") {
+        @include core-styles();
+        @include kendo-splitter--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-tabstrip--styles();
         @include kendo-dock-manager--layout();
         @include kendo-dock-manager--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dock-manager--styles();
-}

package/scss/dock-manager/_layout.scss

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

package/scss/dock-manager/_theme.scss

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

package/scss/dock-manager/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 ///  The width of the border around the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-border-width: 1px !default;
@@ -111,3 +113,42 @@ $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
+
+
+@forward "@progress/kendo-theme-default/scss/dock-manager/_variables.scss" with (
+    $kendo-dock-manager-border-width: $kendo-dock-manager-border-width,
+    $kendo-dock-manager-border-style: $kendo-dock-manager-border-style,
+    $kendo-dock-manager-border: $kendo-dock-manager-border,
+    $kendo-dock-manager-pane-header-padding-y: $kendo-dock-manager-pane-header-padding-y,
+    $kendo-dock-manager-pane-header-padding-x: $kendo-dock-manager-pane-header-padding-x,
+    $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-pane-header-border-width,
+    $kendo-dock-manager-pane-header-border-style: $kendo-dock-manager-pane-header-border-style,
+    $kendo-dock-manager-pane-header-bg: $kendo-dock-manager-pane-header-bg,
+    $kendo-dock-manager-pane-title-padding-y: $kendo-dock-manager-pane-title-padding-y,
+    $kendo-dock-manager-pane-title-padding-x: $kendo-dock-manager-pane-title-padding-x,
+    $kendo-dock-manager-pane-title-font-family: $kendo-dock-manager-pane-title-font-family,
+    $kendo-dock-manager-pane-title-font-size: $kendo-dock-manager-pane-title-font-size,
+    $kendo-dock-manager-pane-title-line-height: $kendo-dock-manager-pane-title-line-height,
+    $kendo-dock-manager-pane-title-font-weight: $kendo-dock-manager-pane-title-font-weight,
+    $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-content-padding-x,
+    $kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-content-padding-y,
+    $kendo-dock-manager-tabbed-pane-padding-y: $kendo-dock-manager-tabbed-pane-padding-y,
+    $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-tabbed-pane-padding-x,
+    $kendo-dock-manager-unpinned-container-width: $kendo-dock-manager-unpinned-container-width,
+    $kendo-dock-manager-unpinned-container-bg: $kendo-dock-manager-unpinned-container-bg,
+    $kendo-dock-manager-unpinned-container-shadow: $kendo-dock-manager-unpinned-container-shadow,
+    $kendo-dock-indicator-padding: $kendo-dock-indicator-padding,
+    $kendo-dock-indicator-bg: $kendo-dock-indicator-bg,
+    $kendo-dock-indicator-text: $kendo-dock-indicator-text,
+    $kendo-dock-indicator-outline-width: $kendo-dock-indicator-outline-width,
+    $kendo-dock-indicator-outline-style: $kendo-dock-indicator-outline-style,
+    $kendo-dock-indicator-outline: $kendo-dock-indicator-outline,
+    $kendo-dock-indicator-shadow: $kendo-dock-indicator-shadow,
+    $kendo-dock-indicator-hover-bg: $kendo-dock-indicator-hover-bg,
+    $kendo-dock-indicator-hover-text: $kendo-dock-indicator-hover-text,
+    $kendo-dock-manager-dock-preview-border-width: $kendo-dock-manager-dock-preview-border-width,
+    $kendo-dock-manager-dock-preview-border-style: $kendo-dock-manager-dock-preview-border-style,
+    $kendo-dock-manager-dock-preview-border-radius: $kendo-dock-manager-dock-preview-border-radius,
+    $kendo-dock-manager-dock-preview-bg: $kendo-dock-manager-dock-preview-bg,
+    $kendo-dock-manager-dock-preview-border: $kendo-dock-manager-dock-preview-border
+);

package/scss/draggable/_index.scss

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

package/scss/draggable/_layout.scss

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

package/scss/draggable/_theme.scss

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

package/scss/draggable/_variables.scss

@@ -1,6 +1,10 @@
+
+@use "sass:math";
+@use "../core/_index.scss" as *;
+
 // Drag hint
-$kendo-drag-hint-padding-x: $kendo-padding-md-x !default;
-$kendo-drag-hint-padding-y: $kendo-padding-md-y !default;
+$kendo-drag-hint-padding-x: k-spacing(2) !default;
+$kendo-drag-hint-padding-y: k-spacing(1) !default;
 $kendo-drag-hint-border-width: 1px !default;
 $kendo-drag-hint-border-radius: k-border-radius(md) !default;
 $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
@@ -18,10 +22,34 @@ $kendo-drag-hint-opacity: null !default;
 
 // Drop hint
 $kendo-drop-hint-arrow-size: 8px !default;
-$kendo-drop-hint-arrow-spacing: k-math-div( $kendo-drop-hint-arrow-size, 2 ) !default;
+$kendo-drop-hint-arrow-spacing: math.div( $kendo-drop-hint-arrow-size, 2 ) !default;
 $kendo-drop-hint-line-h-width: 20px !default;
 $kendo-drop-hint-line-h-height: 1px !default;
 $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
 $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
 $kendo-drop-hint-bg: $kendo-color-primary !default;
+
+
+@forward "@progress/kendo-theme-default/scss/draggable/_variables.scss" with (
+    $kendo-drag-hint-padding-x: $kendo-drag-hint-padding-x,
+    $kendo-drag-hint-padding-y: $kendo-drag-hint-padding-y,
+    $kendo-drag-hint-border-width: $kendo-drag-hint-border-width,
+    $kendo-drag-hint-border-radius: $kendo-drag-hint-border-radius,
+    $kendo-drag-hint-font-size: $kendo-drag-hint-font-size,
+    $kendo-drag-hint-font-family: $kendo-drag-hint-font-family,
+    $kendo-drag-hint-line-height: $kendo-drag-hint-line-height,
+    $kendo-drag-hint-bg: $kendo-drag-hint-bg,
+    $kendo-drag-hint-text: $kendo-drag-hint-text,
+    $kendo-drag-hint-border: $kendo-drag-hint-border,
+    $kendo-drag-hint-gradient: $kendo-drag-hint-gradient,
+    $kendo-drag-hint-shadow: $kendo-drag-hint-shadow,
+    $kendo-drag-hint-opacity: $kendo-drag-hint-opacity,
+    $kendo-drop-hint-arrow-size: $kendo-drop-hint-arrow-size,
+    $kendo-drop-hint-arrow-spacing: $kendo-drop-hint-arrow-spacing,
+    $kendo-drop-hint-line-h-width: $kendo-drop-hint-line-h-width,
+    $kendo-drop-hint-line-h-height: $kendo-drop-hint-line-h-height,
+    $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-v-width,
+    $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-v-height,
+    $kendo-drop-hint-bg: $kendo-drop-hint-bg
+);

package/scss/drawer/_index.scss

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

package/scss/drawer/_layout.scss

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

package/scss/drawer/_theme.scss

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

package/scss/drawer/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
 // Drawer
 
 /// The background color of the Drawer.
@@ -51,7 +55,7 @@ $kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: $kendo-padding-md-x !default;
+$kendo-drawer-item-padding-y: k-spacing(2) !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: var( --kendo-font-size-lg, inherit ) !default;
@@ -105,3 +109,38 @@ $kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
 $kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;
+
+
+@forward "@progress/kendo-theme-default/scss/drawer/_variables.scss" with (
+    $kendo-drawer-bg: $kendo-drawer-bg,
+    $kendo-drawer-text: $kendo-drawer-text,
+    $kendo-drawer-border: $kendo-drawer-border,
+    $kendo-drawer-border-width: $kendo-drawer-border-width,
+    $kendo-drawer-font-family: $kendo-drawer-font-family,
+    $kendo-drawer-font-size: $kendo-drawer-font-size,
+    $kendo-drawer-line-height: $kendo-drawer-line-height,
+    $kendo-drawer-content-padding-x: $kendo-drawer-content-padding-x,
+    $kendo-drawer-content-padding-y: $kendo-drawer-content-padding-y,
+    $kendo-drawer-scrollbar-width: $kendo-drawer-scrollbar-width,
+    $kendo-drawer-scrollbar-color: $kendo-drawer-scrollbar-color,
+    $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg,
+    $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius,
+    $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color,
+    $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x,
+    $kendo-drawer-item-padding-y: $kendo-drawer-item-padding-y,
+    $kendo-drawer-item-font-size: $kendo-drawer-item-font-size,
+    $kendo-drawer-item-line-height: $kendo-drawer-item-line-height,
+    $kendo-drawer-item-level-padding-x: $kendo-drawer-item-level-padding-x,
+    $kendo-drawer-item-level-count: $kendo-drawer-item-level-count,
+    $kendo-drawer-icon-padding-x: $kendo-drawer-icon-padding-x,
+    $kendo-drawer-icon-padding-y: $kendo-drawer-icon-padding-y,
+    $kendo-drawer-mini-initial-width: $kendo-drawer-mini-initial-width,
+    $kendo-drawer-hover-bg: $kendo-drawer-hover-bg,
+    $kendo-drawer-hover-text: $kendo-drawer-hover-text,
+    $kendo-drawer-focus-bg: $kendo-drawer-focus-bg,
+    $kendo-drawer-focus-shadow: $kendo-drawer-focus-shadow,
+    $kendo-drawer-selected-bg: $kendo-drawer-selected-bg,
+    $kendo-drawer-selected-text: $kendo-drawer-selected-text,
+    $kendo-drawer-selected-hover-bg: $kendo-drawer-selected-hover-bg,
+    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text
+);

package/scss/dropdowngrid/_index.scss

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

package/scss/dropdowngrid/_layout.scss

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

package/scss/dropdowngrid/_theme.scss

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