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

package/scss/core/typography/index.import.scss

@@ -1,64 +1,65 @@
+@use "sass:map";
 
 /// The base font size across all components.
 /// @group typography
-$kendo-font-size: $font-size-base !default;
+$kendo-font-size: 1rem !default;
 /// The extra small font size across all components.
 /// @group typography
 $kendo-font-size-xs: ( $kendo-font-size * .75 ) !default;
 /// The small font size across all components.
 /// @group typography
-$kendo-font-size-sm: $font-size-sm !default;
+$kendo-font-size-sm: ( $kendo-font-size * .875 ) !default;
 /// The medium font size across all components.
 /// @group typography
 $kendo-font-size-md: $kendo-font-size !default;
 /// The large font size across all components.
 /// @group typography
-$kendo-font-size-lg: $font-size-lg !default;
+$kendo-font-size-lg: ( $kendo-font-size * 1.25 ) !default;
 /// The extra large font size across all components.
 /// @group typography
 $kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
 
 /// The base line height across all components.
 /// @group typography
-$kendo-line-height: $line-height-base !default;
+$kendo-line-height: 1.5 !default;
 /// The extra small line height across all components.
 /// @group typography
 $kendo-line-height-xs: 1 !default;
 /// The small line height across all components.
 /// @group typography
-$kendo-line-height-sm: $line-height-sm !default;
+$kendo-line-height-sm: 1.25 !default;
 /// The medium line height across all components.
 /// @group typography
 $kendo-line-height-md: $kendo-line-height !default;
 /// The large line height across all components.
 /// @group typography
-$kendo-line-height-lg: $line-height-lg !default;
+$kendo-line-height-lg: 2 !default;
 /// The base line height in ems across all components.
 /// @group typography
 $kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
 
 /// The light font weight across all components.
 /// @group typography
-$kendo-font-weight-light: $font-weight-light !default;
+$kendo-font-weight-light: 300 !default;
 /// The base font weight across all components.
 /// @group typography
-$kendo-font-weight-normal: $font-weight-normal !default;
+$kendo-font-weight-normal: 400 !default;
 /// The medium font weight across all components.
 /// @group typography
-$kendo-font-weight-medium: 500 !default; // TODO: use from bootstrap when we update
+$kendo-font-weight-medium: 500 !default;
 /// The semibold font weight across all components.
 /// @group typography
-$kendo-font-weight-semibold: 600 !default; // TODO: use from bootstrap when we update
+$kendo-font-weight-semibold: 600 !default;
 /// The bold font weight across all components.
 /// @group typography
-$kendo-font-weight-bold: $font-weight-bold !default;
+$kendo-font-weight-bold: 700 !default;
 
 /// The sans-serif font family across all components.
 /// @group typography
-$kendo-font-family-sans-serif: $font-family-sans-serif !default;
+$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 /// The monospace font family across all components.
 /// @group typography
-$kendo-font-family-monospace: $font-family-monospace !default;
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 /// The base font family across all components.
 /// @group typography
 $kendo-font-family: $kendo-font-family-sans-serif !default;
@@ -94,18 +95,19 @@ $_default-font-families: (
 /// The font sizes map
 /// @group typography
 $kendo-font-sizes: $_default-font-sizes !default;
+$kendo-font-sizes: map.merge( $_default-font-sizes, $kendo-font-sizes );
 
 /// The line heights map
 /// @group typography
 $kendo-line-heights: $_default-line-heights !default;
+$kendo-line-heights: map.merge( $_default-line-heights, $kendo-line-heights );
 
 /// The font weights map
 /// @group typography
 $kendo-font-weights: $_default-font-weights !default;
+$kendo-font-weights: map.merge( $_default-font-weights, $kendo-font-weights );
 
 /// The font families map
 /// @group typography
 $kendo-font-families: $_default-font-families !default;
-
-@import "@progress/kendo-theme-core/scss/typography/index.import.scss";
-
+$kendo-font-families: map.merge( $_default-font-families, $kendo-font-families );

package/scss/dataviz/_index.scss

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

package/scss/dataviz/_layout.scss

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

package/scss/dataviz/_theme.scss

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

package/scss/dataviz/_variables.scss

@@ -1,11 +1,11 @@
-@import "../button/_variables.scss";
-
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // Chart
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $blue) !default;
+$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $kendo-color-primary) !default;
 $kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix( black, $kendo-series-a, 25% )) !default;
 $kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix( black, $kendo-series-a, 50% )) !default;
 $kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix( white, $kendo-series-a, 25% )) !default;
@@ -13,7 +13,7 @@ $kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtle
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $purple) !default;
+$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $kendo-color-tertiary) !default;
 $kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix( black, $kendo-series-b, 25% )) !default;
 $kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix( black, $kendo-series-b, 50% )) !default;
 $kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix( white, $kendo-series-b, 25% )) !default;
@@ -21,7 +21,7 @@ $kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtle
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), $teal) !default;
+$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #20c997) !default;
 $kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix( black, $kendo-series-c, 25% )) !default;
 $kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix( black, $kendo-series-c, 50% )) !default;
 $kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix( white, $kendo-series-c, 25% )) !default;
@@ -29,7 +29,7 @@ $kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtle
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $green) !default;
+$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $kendo-color-success) !default;
 $kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix( black, $kendo-series-d, 25% )) !default;
 $kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix( black, $kendo-series-d, 50% )) !default;
 $kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix( white, $kendo-series-d, 25% )) !default;
@@ -37,7 +37,7 @@ $kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtle
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $yellow) !default;
+$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $kendo-color-warning) !default;
 $kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix( black, $kendo-series-e, 25% )) !default;
 $kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix( black, $kendo-series-e, 50% )) !default;
 $kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix( white, $kendo-series-e, 25% )) !default;
@@ -45,7 +45,7 @@ $kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtle
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $red) !default;
+$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $kendo-color-error) !default;
 $kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix( black, $kendo-series-f, 25% )) !default;
 $kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix( black, $kendo-series-f, 50% )) !default;
 $kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix( white, $kendo-series-f, 25% )) !default;
@@ -111,6 +111,9 @@ $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .3 !default;
 
+$kendo-chart-tooltip-padding-x: k-spacing(2) !default;
+$kendo-chart-tooltip-padding-y: k-spacing(1) !default;
+
 $kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
 
 $kendo-chart-bg: $kendo-component-bg !default;
@@ -139,6 +142,9 @@ $kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-treemap-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
 
+$kendo-treemap-padding-x: k-spacing(2) !default;
+$kendo-treemap-padding-y: k-spacing(1) !default;
+
 // Chart Overlay
 $kendo-chart-overlay-bg: $kendo-base-bg !default;
 
@@ -146,3 +152,112 @@ $kendo-chart-overlay-bg: $kendo-base-bg !default;
 $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
 $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/dataviz/_variables.scss" with (
+    $kendo-series-a: $kendo-series-a,
+    $kendo-series-a-dark: $kendo-series-a-dark,
+    $kendo-series-a-darker: $kendo-series-a-darker,
+    $kendo-series-a-light: $kendo-series-a-light,
+    $kendo-series-a-lighter: $kendo-series-a-lighter,
+    $kendo-series-b: $kendo-series-b,
+    $kendo-series-b-dark: $kendo-series-b-dark,
+    $kendo-series-b-darker: $kendo-series-b-darker,
+    $kendo-series-b-light: $kendo-series-b-light,
+    $kendo-series-b-lighter: $kendo-series-b-lighter,
+    $kendo-series-c: $kendo-series-c,
+    $kendo-series-c-dark: $kendo-series-c-dark,
+    $kendo-series-c-darker: $kendo-series-c-darker,
+    $kendo-series-c-light: $kendo-series-c-light,
+    $kendo-series-c-lighter: $kendo-series-c-lighter,
+    $kendo-series-d: $kendo-series-d,
+    $kendo-series-d-dark: $kendo-series-d-dark,
+    $kendo-series-d-darker: $kendo-series-d-darker,
+    $kendo-series-d-light: $kendo-series-d-light,
+    $kendo-series-d-lighter: $kendo-series-d-lighter,
+    $kendo-series-e: $kendo-series-e,
+    $kendo-series-e-dark: $kendo-series-e-dark,
+    $kendo-series-e-darker: $kendo-series-e-darker,
+    $kendo-series-e-light: $kendo-series-e-light,
+    $kendo-series-e-lighter: $kendo-series-e-lighter,
+    $kendo-series-f: $kendo-series-f,
+    $kendo-series-f-dark: $kendo-series-f-dark,
+    $kendo-series-f-darker: $kendo-series-f-darker,
+    $kendo-series-f-light: $kendo-series-f-light,
+    $kendo-series-f-lighter: $kendo-series-f-lighter,
+    $kendo-series-1: $kendo-series-1,
+    $kendo-series-2: $kendo-series-2,
+    $kendo-series-3: $kendo-series-3,
+    $kendo-series-4: $kendo-series-4,
+    $kendo-series-5: $kendo-series-5,
+    $kendo-series-6: $kendo-series-6,
+    $kendo-series-7: $kendo-series-7,
+    $kendo-series-8: $kendo-series-8,
+    $kendo-series-9: $kendo-series-9,
+    $kendo-series-10: $kendo-series-10,
+    $kendo-series-11: $kendo-series-11,
+    $kendo-series-12: $kendo-series-12,
+    $kendo-series-13: $kendo-series-13,
+    $kendo-series-14: $kendo-series-14,
+    $kendo-series-15: $kendo-series-15,
+    $kendo-series-16: $kendo-series-16,
+    $kendo-series-17: $kendo-series-17,
+    $kendo-series-18: $kendo-series-18,
+    $kendo-series-19: $kendo-series-19,
+    $kendo-series-20: $kendo-series-20,
+    $kendo-series-21: $kendo-series-21,
+    $kendo-series-22: $kendo-series-22,
+    $kendo-series-23: $kendo-series-23,
+    $kendo-series-24: $kendo-series-24,
+    $kendo-series-25: $kendo-series-25,
+    $kendo-series-26: $kendo-series-26,
+    $kendo-series-27: $kendo-series-27,
+    $kendo-series-28: $kendo-series-28,
+    $kendo-series-29: $kendo-series-29,
+    $kendo-series-30: $kendo-series-30,
+    $kendo-chart-border-width: $kendo-chart-border-width,
+    $kendo-chart-font-family: $kendo-chart-font-family,
+    $kendo-chart-font-size: $kendo-chart-font-size,
+    $kendo-chart-line-height: $kendo-chart-line-height,
+    $kendo-chart-sm-font-size: $kendo-chart-sm-font-size,
+    $kendo-chart-md-font-size: $kendo-chart-md-font-size,
+    $kendo-chart-lg-font-size: $kendo-chart-lg-font-size,
+    $kendo-chart-tooltip-font-size: $kendo-chart-tooltip-font-size,
+    $kendo-chart-label-font-size: $kendo-chart-label-font-size,
+    $kendo-chart-title-font-size: $kendo-chart-title-font-size,
+    $kendo-chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+    $kendo-chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+    $kendo-chart-major-lines: $kendo-chart-major-lines,
+    $kendo-chart-minor-lines: $kendo-chart-minor-lines,
+    $kendo-chart-inactive: $kendo-chart-inactive,
+    $kendo-chart-area-opacity: $kendo-chart-area-opacity,
+    $kendo-chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+    $kendo-chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+    $kendo-chart-tooltip-padding-x: $kendo-chart-tooltip-padding-x,
+    $kendo-chart-tooltip-padding-y: $kendo-chart-tooltip-padding-y,
+    $kendo-chart-tooltip-transition: $kendo-chart-tooltip-transition,
+    $kendo-chart-bg: $kendo-chart-bg,
+    $kendo-chart-text: $kendo-chart-text,
+    $kendo-chart-border: $kendo-chart-border,
+    $kendo-chart-crosshair-background: $kendo-chart-crosshair-background,
+    $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-crosshair-shared-tooltip-color,
+    $kendo-chart-crosshair-shared-tooltip-background: $kendo-chart-crosshair-shared-tooltip-background,
+    $kendo-chart-crosshair-shared-tooltip-border: $kendo-chart-crosshair-shared-tooltip-border,
+    $kendo-chart-notes-background: $kendo-chart-notes-background,
+    $kendo-chart-notes-border: $kendo-chart-notes-border,
+    $kendo-chart-notes-lines: $kendo-chart-notes-lines,
+    $kendo-chart-error-bars-background: $kendo-chart-error-bars-background,
+    $kendo-chart-selection-handle-size: $kendo-chart-selection-handle-size,
+    $kendo-chart-selection-border-color: $kendo-chart-selection-border-color,
+    $kendo-chart-selection-shadow: $kendo-chart-selection-shadow,
+    $kendo-chart-computed-title-height: $kendo-chart-computed-title-height,
+    $kendo-treemap-font-family: $kendo-treemap-font-family,
+    $kendo-treemap-font-size: $kendo-treemap-font-size,
+    $kendo-treemap-line-height: $kendo-treemap-line-height,
+    $kendo-treemap-padding-x: $kendo-treemap-padding-x,
+    $kendo-treemap-padding-y: $kendo-treemap-padding-y,
+    $kendo-chart-overlay-bg: $kendo-chart-overlay-bg,
+    $kendo-chart-no-data-font-size: $kendo-chart-no-data-font-size,
+    $kendo-chart-no-data-font-weight: $kendo-chart-no-data-font-weight,
+    $kendo-chart-no-data-padding-y: $kendo-chart-no-data-padding-y
+);

package/scss/dateinput/_index.scss

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

package/scss/dateinput/_layout.scss

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

package/scss/dateinput/_theme.scss

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

package/scss/datepicker/_index.scss

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

package/scss/datepicker/_layout.scss

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

package/scss/datepicker/_theme.scss

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

package/scss/daterangepicker/_index.scss

@@ -1,47 +1,24 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "date-range-picker",
-    dependencies: (
-        "calendar",
-        "date-input",
-        "date-picker",
-        "floating-label",
-        "icon",
-        "input",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../popup/_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 *;
+@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-date-range-picker--styles() {
-    @include module-render( "date-range-picker" ) {
+    @include import-once( "date-range-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
         @include kendo-date-range-picker--layout();
         @include kendo-date-range-picker--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-date-range-picker--styles();
-}

package/scss/daterangepicker/_layout.scss

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

package/scss/daterangepicker/_theme.scss

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

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();
-}