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

package/scss/core/spacing/index.import.scss

@@ -1,14 +1,50 @@
-@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+@use "sass:map";
 
-$kendo-icon-spacing: k-spacing(1) !default;
-$kendo-icon-padding: k-spacing(1) !default;
+$_default-spacing: (
+    0: 0px,
+    1px: 1px,
+    0.5: .125rem,
+    1: .25rem,
+    1.5: .375rem,
+    2: .5rem,
+    2.5: .625rem,
+    3: .75rem,
+    3.5: .875rem,
+    4: 1rem,
+    4.5: 1.125rem,
+    5: 1.25rem,
+    5.5: 1.375rem,
+    6: 1.5rem,
+    6.5: 1.625rem,
+    7: 1.75rem,
+    7.5: 1.875rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
+    25: 7rem,
+    26: 8rem,
+    27: 9rem,
+    28: 10rem,
+    29: 11rem,
+    30: 12rem
+) !default;
 
-// Metrics
-$kendo-padding-x: k-spacing(2) !default;
-$kendo-padding-y: k-spacing(1) !default;
-$kendo-padding-sm-x: k-spacing(1) !default;
-$kendo-padding-sm-y: k-spacing(0.5) !default;
-$kendo-padding-md-x: k-spacing(2) !default;
-$kendo-padding-md-y: k-spacing(1) !default;
-$kendo-padding-lg-x: k-spacing(3) !default;
-$kendo-padding-lg-y: k-spacing(1.5) !default;
+/// The global default Spacing map.
+/// @group spacing
+$kendo-spacing: $_default-spacing !default;
+
+$kendo-spacing: map.merge($_default-spacing, $kendo-spacing);

package/scss/core/styles/index.import.scss

@@ -1 +1 @@
-@import "@progress/kendo-theme-core/scss/styles/index.import.scss";
+@forward "@progress/kendo-theme-core/scss/styles/index.import.scss";

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

@@ -1 +1,184 @@
-@import "@progress/kendo-theme-core/scss/typography/index.import.scss";
+@use "sass:map";
+@use "sass:math";
+
+/// The base font size across all components.
+/// @group typography
+$kendo-font-size: 0.875rem !default;
+/// The extra extra small font size across all components.
+/// @group typography
+$kendo-font-size-xxs: 0.5rem !default;
+/// The extra small font size across all components.
+/// @group typography
+$kendo-font-size-xs: 0.625rem !default;
+/// The small font size across all components.
+/// @group typography
+$kendo-font-size-sm: 0.75rem !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: 1rem !default;
+/// The extra large font size across all components.
+/// @group typography
+$kendo-font-size-xl: 1.25rem !default;
+
+/// The base line height across all components.
+/// @group typography
+$kendo-line-height: math.div( 20, 14 ) !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: 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: 1.5 !default;
+/// The base line height in ems across all components.
+/// @group typography
+$kendo-line-height-em: calc( #{$kendo-line-height-md} * 1em ) !default;
+
+/// The base font weight across all components.
+/// @group typography
+$kendo-font-weight: 400 !default;
+/// The thin font weight across all components.
+/// @group typography
+$kendo-font-weight-thin: 100 !default;
+/// The extra light font weight across all components.
+/// @group typography
+$kendo-font-weight-extra-light: 200 !default;
+/// The light font weight across all components.
+/// @group typography
+$kendo-font-weight-light: 300 !default;
+/// The normal font weight across all components.
+/// @group typography
+$kendo-font-weight-normal: $kendo-font-weight !default;
+/// The medium font weight across all components.
+/// @group typography
+$kendo-font-weight-medium: 500 !default;
+/// The semibold font weight across all components.
+/// @group typography
+$kendo-font-weight-semibold: 600 !default;
+/// The bold font weight across all components.
+/// @group typography
+$kendo-font-weight-bold: 700 !default;
+/// The extra bold font weight across all components.
+/// @group typography
+$kendo-font-weight-extra-bold: 800 !default;
+/// The most pronounced font weight across all components.
+/// @group typography
+$kendo-font-weight-black: 900 !default;
+
+/// The base letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing: null !default;
+/// The tightest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tightest: -.15px !default;
+/// Slightly looser than the tighter letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tighter: -.10px !default;
+/// Moderately tight letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tight: -.5px !default;
+/// The normal letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-normal: 0px !default;
+/// Wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wide: .5px !default;
+/// Slightly wider than the wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wider: .10px !default;
+/// The widest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-widest: .15px !default;
+
+/// The sans font family across all components.
+/// @group typography
+$kendo-font-family-sans: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans !default;
+/// The serif font family across all components.
+/// @group typography
+$kendo-font-family-serif: "Times New Roman", Georgia, Garamond, Palatino, Baskerville !default;
+/// The sans-serif font family across all components.
+/// @group typography
+$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: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+/// The base font family across all components.
+/// @group typography
+$kendo-font-family: inherit !default;
+
+$_default-font-sizes: (
+    xxs: $kendo-font-size-xxs,
+    xs: $kendo-font-size-xs,
+    sm: $kendo-font-size-sm,
+    md: $kendo-font-size-md,
+    lg: $kendo-font-size-lg,
+    xl: $kendo-font-size-xl
+) !default;
+
+$_default-line-heights: (
+    xs: $kendo-line-height-xs,
+    sm: $kendo-line-height-sm,
+    md: $kendo-line-height-md,
+    lg: $kendo-line-height-lg,
+) !default;
+
+$_default-font-weights: (
+    thin: $kendo-font-weight-thin,
+    extra-light: $kendo-font-weight-extra-light,
+    light: $kendo-font-weight-light,
+    normal: $kendo-font-weight-normal,
+    medium: $kendo-font-weight-medium,
+    semibold: $kendo-font-weight-semibold,
+    bold: $kendo-font-weight-bold
+) !default;
+
+$_default-letter-spacings: (
+    tightest: $kendo-letter-spacing-tightest,
+    tighter: $kendo-letter-spacing-tighter,
+    tight: $kendo-letter-spacing-tight,
+    normal: $kendo-letter-spacing-normal,
+    wide: $kendo-letter-spacing-wide,
+    wider: $kendo-letter-spacing-wider,
+    widest: $kendo-letter-spacing-widest
+) !default;
+
+$_default-font-families: (
+    sans: $kendo-font-family-sans,
+    serif: $kendo-font-family-serif,
+    sans-serif: $kendo-font-family-sans-serif,
+    monospace: $kendo-font-family-monospace
+) !default;
+
+/// 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 letter spacings map
+/// @group typography
+$kendo-letter-spacings: $_default-letter-spacings !default;
+$kendo-letter-spacings: map.merge( $_default-letter-spacings, $kendo-letter-spacings );
+
+/// The font families map
+/// @group typography
+$kendo-font-families: $_default-font-families !default;
+$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,5 +1,5 @@
-@import "../button/_variables.scss";
-
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // Chart
 
@@ -111,6 +111,9 @@ $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .1 !default;
 
+$kendo-chart-tooltip-padding-x: k-spacing(1) !default;
+$kendo-chart-tooltip-padding-y: k-spacing(0.5) !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(1) !default;
+$kendo-treemap-padding-y: k-spacing(0.5) !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() {