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

package/scss/gantt/_theme.scss

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

package/scss/gantt/_variables.scss

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "../table/_variables.scss" as *;
+
 // Gantt
 
 /// The border width of the Gantt.
@@ -132,6 +137,10 @@ $kendo-gantt-task-selected-border: null !default;
 /// @group gantt
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
 
+/// The padding of the Gantt task actions.
+/// @group gantt
+$kendo-gantt-task-actions-padding: k-spacing(0.5) !default;
+
 /// The vertical margin of the Gantt task planned line.
 /// @group gantt
 $kendo-gantt-planned-margin-y: .35em !default;
@@ -157,10 +166,10 @@ $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
 $kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
 /// The horizontal margin of the Gantt planned line dot.
 /// @group gantt
-$kendo-gantt-planned-moment-left-margin-x: calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
+$kendo-gantt-planned-moment-left-margin-x: calc( #{math.div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
 /// The horizontal margin of the Gantt milestone planned line dot.
 /// @group gantt
-$kendo-gantt-planned-milestone-moment-margin-x: k-math-div( $kendo-gantt-planned-moment-width, 2 ) !default;
+$kendo-gantt-planned-milestone-moment-margin-x: math.div( $kendo-gantt-planned-moment-width, 2 ) !default;
 
 /// The default height of the Gantt planned line.
 /// @group gantt
@@ -236,3 +245,89 @@ $kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
+
+/// The horizontal padding of the Gantt task Tooltip.
+/// @group gantt
+$kendo-gantt-task-tooltip-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Gantt task Tooltip.
+/// @group gantt
+$kendo-gantt-task-tooltip-padding-y: k-spacing(1) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/gantt/_variables.scss" with (
+    $kendo-gantt-border-width: $kendo-gantt-border-width,
+    $kendo-gantt-font-family: $kendo-gantt-font-family,
+    $kendo-gantt-font-size: $kendo-gantt-font-size,
+    $kendo-gantt-line-height: $kendo-gantt-line-height,
+    $kendo-gantt-bg: $kendo-gantt-bg,
+    $kendo-gantt-text: $kendo-gantt-text,
+    $kendo-gantt-border: $kendo-gantt-border,
+    $kendo-gantt-treelist-bg: $kendo-gantt-treelist-bg,
+    $kendo-gantt-treelist-text: $kendo-gantt-treelist-text,
+    $kendo-gantt-treelist-border: $kendo-gantt-treelist-border,
+    $kendo-gantt-nonwork-bg: $kendo-gantt-nonwork-bg,
+    $kendo-gantt-nonwork-text: $kendo-gantt-nonwork-text,
+    $kendo-gantt-nonwork-border: $kendo-gantt-nonwork-border,
+    $kendo-gantt-line-size: $kendo-gantt-line-size,
+    $kendo-gantt-line-fill: $kendo-gantt-line-fill,
+    $kendo-gantt-line-selected-fill: $kendo-gantt-line-selected-fill,
+    $kendo-gantt-dot-size: $kendo-gantt-dot-size,
+    $kendo-gantt-dot-spacing: $kendo-gantt-dot-spacing,
+    $kendo-gantt-dot-bg: $kendo-gantt-dot-bg,
+    $kendo-gantt-dot-border: $kendo-gantt-dot-border,
+    $kendo-gantt-dot-hover-bg: $kendo-gantt-dot-hover-bg,
+    $kendo-gantt-dot-hover-border: $kendo-gantt-dot-hover-border,
+    $kendo-gantt-milestone-bg: $kendo-gantt-milestone-bg,
+    $kendo-gantt-milestone-border: $kendo-gantt-milestone-border,
+    $kendo-gantt-milestone-selected-bg: $kendo-gantt-milestone-selected-bg,
+    $kendo-gantt-milestone-selected-border: $kendo-gantt-milestone-selected-border,
+    $kendo-gantt-summary-bg: $kendo-gantt-summary-bg,
+    $kendo-gantt-summary-progress-bg: $kendo-gantt-summary-progress-bg,
+    $kendo-gantt-summary-selected-bg: $kendo-gantt-summary-selected-bg,
+    $kendo-gantt-summary-progress-selected-bg: $kendo-gantt-summary-progress-selected-bg,
+    $kendo-gantt-task-border-width: $kendo-gantt-task-border-width,
+    $kendo-gantt-task-padding-x: $kendo-gantt-task-padding-x,
+    $kendo-gantt-task-padding-y: $kendo-gantt-task-padding-y,
+    $kendo-gantt-task-bg: $kendo-gantt-task-bg,
+    $kendo-gantt-task-text: $kendo-gantt-task-text,
+    $kendo-gantt-task-border: $kendo-gantt-task-border,
+    $kendo-gantt-task-progress-bg: $kendo-gantt-task-progress-bg,
+    $kendo-gantt-task-selected-bg: $kendo-gantt-task-selected-bg,
+    $kendo-gantt-task-selected-text: $kendo-gantt-task-selected-text,
+    $kendo-gantt-task-selected-border: $kendo-gantt-task-selected-border,
+    $kendo-gantt-task-progress-selected-bg: $kendo-gantt-task-progress-selected-bg,
+    $kendo-gantt-task-actions-padding: $kendo-gantt-task-actions-padding,
+    $kendo-gantt-planned-margin-y: $kendo-gantt-planned-margin-y,
+    $kendo-gantt-planned-border-width: $kendo-gantt-planned-border-width,
+    $kendo-gantt-planned-line-height: $kendo-gantt-planned-line-height,
+    $kendo-gantt-planned-dependency-margin-y: $kendo-gantt-planned-dependency-margin-y,
+    $kendo-gantt-planned-moment-width: $kendo-gantt-planned-moment-width,
+    $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-height,
+    $kendo-gantt-planned-moment-border-radius: $kendo-gantt-planned-moment-border-radius,
+    $kendo-gantt-planned-moment-left-margin-x: $kendo-gantt-planned-moment-left-margin-x,
+    $kendo-gantt-planned-milestone-moment-margin-x: $kendo-gantt-planned-milestone-moment-margin-x,
+    $kendo-gantt-planned-duration-height: $kendo-gantt-planned-duration-height,
+    $kendo-gantt-planned-duration-hover-height: $kendo-gantt-planned-duration-hover-height,
+    $kendo-gantt-planned-single-drag-hint-top: $kendo-gantt-planned-single-drag-hint-top,
+    $kendo-gantt-planned-summary-drag-hint-top: $kendo-gantt-planned-summary-drag-hint-top,
+    $kendo-gantt-planned-milestone-drag-hint-top: $kendo-gantt-planned-milestone-drag-hint-top,
+    $kendo-gantt-rtl-milestone-wrap-margin-x: $kendo-gantt-rtl-milestone-wrap-margin-x,
+    $kendo-gantt-rtl-milestone-planned-moment-margin-x: $kendo-gantt-rtl-milestone-planned-moment-margin-x,
+    $kendo-gantt-rtl-milestone-dot-start-margin-x: $kendo-gantt-rtl-milestone-dot-start-margin-x,
+    $kendo-gantt-planned-offset-resize-handler-margin-x: $kendo-gantt-planned-offset-resize-handler-margin-x,
+    $kendo-gantt-planned-bg: $kendo-gantt-planned-bg,
+    $kendo-gantt-planned-border: $kendo-gantt-planned-border,
+    $kendo-gantt-delayed-bg: $kendo-gantt-delayed-bg,
+    $kendo-gantt-delayed-bg-lighter: $kendo-gantt-delayed-bg-lighter,
+    $kendo-gantt-advanced-bg: $kendo-gantt-advanced-bg,
+    $kendo-gantt-advanced-bg-lighter: $kendo-gantt-advanced-bg-lighter,
+    $kendo-gantt-action-on-offset-text: $kendo-gantt-action-on-offset-text,
+    $kendo-gantt-offset-resize-handler-top: $kendo-gantt-offset-resize-handler-top,
+    $kendo-gantt-validation-tooltip-width: $kendo-gantt-validation-tooltip-width,
+    $kendo-gantt-validation-tooltip-label-width: $kendo-gantt-validation-tooltip-label-width,
+    $kendo-gantt-validation-tooltip-border: $kendo-gantt-validation-tooltip-border,
+    $kendo-gantt-validation-tooltip-valid-border: $kendo-gantt-validation-tooltip-valid-border,
+    $kendo-gantt-validation-tooltip-invalid-border: $kendo-gantt-validation-tooltip-invalid-border,
+    $kendo-gantt-task-tooltip-padding-x: $kendo-gantt-task-tooltip-padding-x,
+    $kendo-gantt-task-tooltip-padding-y: $kendo-gantt-task-tooltip-padding-y
+);

package/scss/grid/_index.scss

@@ -1,79 +1,60 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "grid",
-    dependencies: (
-        "action-buttons",
-        "autocomplete",
-        "badge",
-        "button",
-        "checkbox",
-        "chip",
-        "date-time-picker",
-        "dialog",
-        "dropdown-list",
-        "icon",
-        "input",
-        "list",
-        "menu",
-        "numeric-textbox",
-        "pager",
-        "progressbar",
-        "radio",
-        "skeleton",
-        "table",
-        "tabstrip",
-        "textbox",
-        "toolbar",
-        "validator"
-    )
-);
-
-
 // Dependencies
-@import "../adaptive/_index.scss";
-@import "../progressbar/_index.scss";
-@import "../button/_index.scss";
-@import "../action-buttons/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../input/_index.scss";
-@import "../textbox/_index.scss";
-@import "../checkbox/_index.scss";
-@import "../radio/_index.scss";
-@import "../validator/_index.scss";
-@import "../autocomplete/_index.scss";
-@import "../datetimepicker/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../menu/_index.scss";
-@import "../dialog/_index.scss";
-@import "../pager/_index.scss";
-@import "../chip/_index.scss";
-@import "../skeleton/_index.scss";
-// @import "../utils/_float.scss";
-// @import "../utils/_spacer.scss";
-@import "../list/_index.scss";
-@import "../table/_index.scss";
-@import "../tabstrip/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../adaptive/_index.scss" as *;
+@use "../progressbar/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../validator/_index.scss" as *;
+@use "../autocomplete/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../pager/_index.scss" as *;
+@use "../chip/_index.scss" as *;
+@use "../skeleton/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../table/_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-grid--styles() {
-    @include module-render( "grid" ) {
+    @include import-once( "grid" ) {
+        @include core-styles();
+        @include kendo-adaptive--styles();
+        @include kendo-progressbar--styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-validator--styles();
+        @include kendo-autocomplete--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-menu--styles();
+        @include kendo-dialog--styles();
+        @include kendo-pager--styles();
+        @include kendo-chip--styles();
+        @include kendo-skeleton--styles();
+        @include kendo-list--styles();
+        @include kendo-table--styles();
+        @include kendo-tabstrip--styles();
         @include kendo-grid--layout();
         @include kendo-grid--theme();
         @include kendo-utils--interactivity--touch-action();
@@ -81,7 +62,3 @@ $_kendo-module-meta: (
         @include kendo-utils--layout--display();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-grid--styles();
-}

package/scss/grid/_layout.scss

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

package/scss/grid/_theme.scss

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

package/scss/grid/_variables.scss

@@ -1,3 +1,14 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "../table/_variables.scss" as *;
+@use "../chip/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../menu/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+
 // Grid
 $kendo-grid-border-width: 1px !default;
 $kendo-grid-font-family: var( --kendo-font-family, inherit ) !default;
@@ -18,13 +29,6 @@ $kendo-grid-header-padding-x: $kendo-grid-padding-x !default;
 /// @group grid
 $kendo-grid-header-padding-y: $kendo-grid-padding-y !default;
 
-/// Horizontal padding of the grid footer.
-/// @group grid
-$kendo-grid-footer-padding-x: $kendo-grid-header-padding-x !default;
-/// Vertical padding of the grid footer.
-/// @group grid
-$kendo-grid-footer-padding-y: $kendo-grid-header-padding-y !default;
-
 /// The horizontal padding of the Grid grouping header.
 /// @group grid
 $kendo-grid-grouping-header-padding-x: $kendo-grid-padding-y !default;
@@ -54,7 +58,7 @@ $kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
 $kendo-grid-edit-cell-padding-y: calc( #{k-spacing(1.5)} / 2 ) !default;
 
 $kendo-grid-group-drop-hint-size: 6px !default;
-$kendo-grid-group-drop-hint-line-size: k-math-div( $kendo-grid-group-drop-hint-size, 3) !default;
+$kendo-grid-group-drop-hint-line-size: math.div( $kendo-grid-group-drop-hint-size, 3) !default;
 $kendo-grid-group-drop-hint-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
 $kendo-grid-group-drop-hint-top: 3px !default;
 
@@ -226,7 +230,7 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 /// @group grid
 $kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
-$kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
+$kendo-grid-sorted-icon-spacing: calc( #{k-spacing(2)} - 1px ) !default;
 $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -290,7 +294,7 @@ $kendo-grid-column-menu-group-header-padding-y: $kendo-menu-popup-md-item-paddin
 
 $kendo-grid-column-menu-group-header-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-grid-column-menu-group-header-line-height: var( --kendo-line-height, normal ) !default;
-$kendo-grid-column-menu-group-header-text-transform: null !default;
+$kendo-grid-column-menu-group-header-text-transform: unset !default;
 $kendo-grid-column-menu-group-header-border-bottom-width: 1px !default;
 
 $kendo-grid-column-menu-group-header-bg: null !default;
@@ -321,3 +325,150 @@ $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
 /// The height of the Grid row resize indicator.
 /// @group grid
 $kendo-grid-row-resizer-height: k-spacing(0.5) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/grid/_variables.scss" with (
+    $kendo-grid-border-width: $kendo-grid-border-width,
+    $kendo-grid-font-family: $kendo-grid-font-family,
+    $kendo-grid-font-size: $kendo-grid-font-size,
+    $kendo-grid-line-height: $kendo-grid-line-height,
+    $kendo-grid-padding-x: $kendo-grid-padding-x,
+    $kendo-grid-padding-y: $kendo-grid-padding-y,
+    $kendo-grid-header-padding-x: $kendo-grid-header-padding-x,
+    $kendo-grid-header-padding-y: $kendo-grid-header-padding-y,
+    $kendo-grid-grouping-header-padding-x: $kendo-grid-grouping-header-padding-x,
+    $kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-y,
+    $kendo-grid-cell-padding-x: $kendo-grid-cell-padding-x,
+    $kendo-grid-cell-padding-y: $kendo-grid-cell-padding-y,
+    $kendo-grid-filter-cell-padding-x: $kendo-grid-filter-cell-padding-x,
+    $kendo-grid-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y,
+    $kendo-grid-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x,
+    $kendo-grid-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y,
+    $kendo-grid-group-drop-hint-size: $kendo-grid-group-drop-hint-size,
+    $kendo-grid-group-drop-hint-line-size: $kendo-grid-group-drop-hint-line-size,
+    $kendo-grid-group-drop-hint-height: $kendo-grid-group-drop-hint-height,
+    $kendo-grid-group-drop-hint-top: $kendo-grid-group-drop-hint-top,
+    $kendo-grid-sm-padding-x: $kendo-grid-sm-padding-x,
+    $kendo-grid-sm-padding-y: $kendo-grid-sm-padding-y,
+    $kendo-grid-sm-header-padding-x: $kendo-grid-sm-header-padding-x,
+    $kendo-grid-sm-header-padding-y: $kendo-grid-sm-header-padding-y,
+    $kendo-grid-sm-grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
+    $kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
+    $kendo-grid-sm-cell-padding-x: $kendo-grid-sm-cell-padding-x,
+    $kendo-grid-sm-cell-padding-y: $kendo-grid-sm-cell-padding-y,
+    $kendo-grid-sm-filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
+    $kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
+    $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
+    $kendo-grid-sm-edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
+    $kendo-grid-sm-group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+    $kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+    $kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y,
+    $kendo-grid-md-padding-x: $kendo-grid-md-padding-x,
+    $kendo-grid-md-padding-y: $kendo-grid-md-padding-y,
+    $kendo-grid-md-header-padding-x: $kendo-grid-md-header-padding-x,
+    $kendo-grid-md-header-padding-y: $kendo-grid-md-header-padding-y,
+    $kendo-grid-md-grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
+    $kendo-grid-md-grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
+    $kendo-grid-md-cell-padding-x: $kendo-grid-md-cell-padding-x,
+    $kendo-grid-md-cell-padding-y: $kendo-grid-md-cell-padding-y,
+    $kendo-grid-md-filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
+    $kendo-grid-md-filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
+    $kendo-grid-md-edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
+    $kendo-grid-md-edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
+    $kendo-grid-md-group-dropclue-height: $kendo-grid-md-group-dropclue-height,
+    $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+    $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y,
+    $kendo-grid-sizes: $kendo-grid-sizes,
+    $kendo-grid-header-font-size: $kendo-grid-header-font-size,
+    $kendo-grid-header-first-border: $kendo-grid-header-first-border,
+    $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-icon-spacing,
+    $kendo-grid-filterable-icon-spacing: $kendo-grid-filterable-icon-spacing,
+    $kendo-grid-toolbar-border-width: $kendo-grid-toolbar-border-width,
+    $kendo-grid-cell-horizontal-border-width: $kendo-grid-cell-horizontal-border-width,
+    $kendo-grid-cell-vertical-border-width: $kendo-grid-cell-vertical-border-width,
+    $kendo-grid-bg: $kendo-grid-bg,
+    $kendo-grid-text: $kendo-grid-text,
+    $kendo-grid-border: $kendo-grid-border,
+    $kendo-grid-header-bg: $kendo-grid-header-bg,
+    $kendo-grid-header-text: $kendo-grid-header-text,
+    $kendo-grid-header-border: $kendo-grid-header-border,
+    $kendo-grid-header-gradient: $kendo-grid-header-gradient,
+    $kendo-grid-footer-bg: $kendo-grid-footer-bg,
+    $kendo-grid-footer-text: $kendo-grid-footer-text,
+    $kendo-grid-footer-border: $kendo-grid-footer-border,
+    $kendo-grid-alt-bg: $kendo-grid-alt-bg,
+    $kendo-grid-alt-text: $kendo-grid-alt-text,
+    $kendo-grid-alt-border: $kendo-grid-alt-border,
+    $kendo-grid-hover-bg: $kendo-grid-hover-bg,
+    $kendo-grid-hover-text: $kendo-grid-hover-text,
+    $kendo-grid-hover-border: $kendo-grid-hover-border,
+    $kendo-grid-selected-bg: $kendo-grid-selected-bg,
+    $kendo-grid-selected-text: $kendo-grid-selected-text,
+    $kendo-grid-selected-border: $kendo-grid-selected-border,
+    $kendo-grid-selection-aggregates-bg: $kendo-grid-selection-aggregates-bg,
+    $kendo-grid-selection-aggregates-text: $kendo-grid-selection-aggregates-text,
+    $kendo-grid-selection-aggregates-border: $kendo-grid-selection-aggregates-border,
+    $kendo-grid-selection-aggregates-border-width: $kendo-grid-selection-aggregates-border-width,
+    $kendo-grid-selection-aggregates-spacing: $kendo-grid-selection-aggregates-spacing,
+    $kendo-grid-selection-aggregates-line-height: $kendo-grid-selection-aggregates-line-height,
+    $kendo-grid-selection-aggregates-font-weight: $kendo-grid-selection-aggregates-font-weight,
+    $kendo-grid-sorted-icon-spacing: $kendo-grid-sorted-icon-spacing,
+    $kendo-grid-sorted-bg: $kendo-grid-sorted-bg,
+    $kendo-grid-sorting-indicator-text: $kendo-grid-sorting-indicator-text,
+    $kendo-grid-sorting-index-font-size: $kendo-grid-sorting-index-font-size,
+    $kendo-grid-sorting-index-height: $kendo-grid-sorting-index-height,
+    $kendo-grid-sorting-index-spacing-y: $kendo-grid-sorting-index-spacing-y,
+    $kendo-grid-sorting-index-spacing-x: $kendo-grid-sorting-index-spacing-x,
+    $kendo-grid-grouping-row-bg: $kendo-grid-grouping-row-bg,
+    $kendo-grid-grouping-row-text: $kendo-grid-grouping-row-text,
+    $kendo-grid-focus-shadow: $kendo-grid-focus-shadow,
+    $kendo-grid-command-cell-button-spacing: $kendo-grid-command-cell-button-spacing,
+    $kendo-grid-command-cell-padding-y: $kendo-grid-command-cell-padding-y,
+    $kendo-grid-sticky-bg: $kendo-grid-sticky-bg,
+    $kendo-grid-sticky-text: $kendo-grid-sticky-text,
+    $kendo-grid-sticky-border: $kendo-grid-sticky-border,
+    $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-alt-bg,
+    $kendo-grid-sticky-header-bg: $kendo-grid-sticky-header-bg,
+    $kendo-grid-sticky-header-text: $kendo-grid-sticky-header-text,
+    $kendo-grid-sticky-header-border: $kendo-grid-sticky-header-border,
+    $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-footer-bg,
+    $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-hover-bg,
+    $kendo-grid-sticky-selected-bg: $kendo-grid-sticky-selected-bg,
+    $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-alt-bg,
+    $kendo-grid-sticky-hover-bg: $kendo-grid-sticky-hover-bg,
+    $kendo-grid-sticky-selected-hover-bg: $kendo-grid-sticky-selected-hover-bg,
+    $kendo-grid-column-menu-width: $kendo-grid-column-menu-width,
+    $kendo-grid-column-menu-max-width: $kendo-grid-column-menu-max-width,
+    $kendo-grid-filter-menu-check-all-border-bottom-width: $kendo-grid-filter-menu-check-all-border-bottom-width,
+    $kendo-grid-filter-menu-item-spacing-x: $kendo-grid-filter-menu-item-spacing-x,
+    $kendo-grid-filter-menu-item-spacing-y: $kendo-grid-filter-menu-item-spacing-y,
+    $kendo-grid-column-menu-popup-padding-x: $kendo-grid-column-menu-popup-padding-x,
+    $kendo-grid-column-menu-popup-padding-y: $kendo-grid-column-menu-popup-padding-y,
+    $kendo-grid-column-menu-item-padding-x: $kendo-grid-column-menu-item-padding-x,
+    $kendo-grid-column-menu-item-padding-y: $kendo-grid-column-menu-item-padding-y,
+    $kendo-grid-column-menu-list-item-padding-x: $kendo-grid-column-menu-list-item-padding-x,
+    $kendo-grid-column-menu-list-item-padding-y: $kendo-grid-column-menu-list-item-padding-y,
+    $kendo-grid-column-menu-items-wrap-padding-x: $kendo-grid-column-menu-items-wrap-padding-x,
+    $kendo-grid-column-menu-items-wrap-padding-y: $kendo-grid-column-menu-items-wrap-padding-y,
+    $kendo-grid-column-menu-group-header-padding-x: $kendo-grid-column-menu-group-header-padding-x,
+    $kendo-grid-column-menu-group-header-padding-y: $kendo-grid-column-menu-group-header-padding-y,
+    $kendo-grid-column-menu-group-header-font-size: $kendo-grid-column-menu-group-header-font-size,
+    $kendo-grid-column-menu-group-header-line-height: $kendo-grid-column-menu-group-header-line-height,
+    $kendo-grid-column-menu-group-header-text-transform: $kendo-grid-column-menu-group-header-text-transform,
+    $kendo-grid-column-menu-group-header-border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width,
+    $kendo-grid-column-menu-group-header-bg: $kendo-grid-column-menu-group-header-bg,
+    $kendo-grid-column-menu-group-header-text: $kendo-grid-column-menu-group-header-text,
+    $kendo-grid-column-menu-group-header-border: $kendo-grid-column-menu-group-header-border,
+    $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x,
+    $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y,
+    $kendo-grid-column-menu-tabbed-bg: $kendo-grid-column-menu-tabbed-bg,
+    $kendo-grid-drag-cell-width: $kendo-grid-drag-cell-width,
+    $kendo-grid-row-inner-height: $kendo-grid-row-inner-height,
+    $kendo-grid-hierarchy-col-width: $kendo-grid-hierarchy-col-width,
+    $kendo-grid-grouping-row-border-top: $kendo-grid-grouping-row-border-top,
+    $kendo-grid-group-footer-border-y: $kendo-grid-group-footer-border-y,
+    $kendo-grid-group-footer-second-cell-border: $kendo-grid-group-footer-second-cell-border,
+    $kendo-grid-row-resizer-hover-bg: $kendo-grid-row-resizer-hover-bg,
+    $kendo-grid-row-resizer-active-bg: $kendo-grid-row-resizer-active-bg,
+    $kendo-grid-row-resizer-height: $kendo-grid-row-resizer-height
+);

package/scss/icons/_index.scss

@@ -1,28 +1,16 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "icon",
-    dependencies: ()
-);
-
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_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-icon--styles() {
-    @include module-render( "icon" ) {
+    @include import-once( "icon" ) {
+        @include core-styles();
         @include kendo-icon--layout();
         @include kendo-icon--theme();
         @include kendo-utils--transform--rotate();
@@ -30,7 +18,3 @@ $_kendo-module-meta: (
         @include kendo-utils--typography--text-color();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-icon--styles();
-}

package/scss/icons/_layout.scss

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

package/scss/icons/_theme.scss

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

package/scss/icons/_variables.scss

@@ -0,0 +1,32 @@
+@use "../core/_index.scss" as *;
+
+/// The default size icon size.
+/// @group icon
+$kendo-icon-size: 16px !default;
+/// The extra small icon size.
+/// @group icon
+$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+/// The small icon size.
+/// @group icon
+$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+/// The medium icon size.
+/// @group icon
+$kendo-icon-size-md: $kendo-icon-size !default;
+/// The large icon size.
+/// @group icon
+$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+/// The extra large icon size.
+/// @group icon
+$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+/// The double extra large icon size.
+/// @group icon
+$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+/// The triple extra large icon size.
+/// @group icon
+$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
+/// The default icon spacing.
+/// @group icon
+$kendo-icon-spacing: k-spacing(1) !default;
+/// The default icon padding.
+/// @group icon
+$kendo-icon-padding: k-spacing(1) !default;

package/scss/imageeditor/_index.scss

@@ -1,46 +1,26 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "image-editor",
-    dependencies: (
-        "checkbox",
-        "dropdown-list",
-        "form",
-        "numeric-textbox",
-        "toolbar"
-    )
-);
-
-
 // Dependencies
-@import "../toolbar/_index.scss";
-@import "../forms/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../checkbox/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../checkbox/_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-image-editor--styles() {
-    @include module-render( "image-editor" ) {
+    @include import-once( "image-editor" ) {
+        @include core-styles();
+        @include kendo-toolbar--styles();
+        @include kendo-form--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-checkbox--styles();
         @include kendo-image-editor--layout();
         @include kendo-image-editor--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-image-editor--styles();
-}

package/scss/imageeditor/_layout.scss

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

package/scss/imageeditor/_theme.scss

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