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

package/scss/core/color-system/_swatch-legacy.scss

@@ -1,74 +1,161 @@
-@if ($kendo-enable-color-system) {
-    $kendo-color-primary: k-color( primary );
-    $kendo-color-primary-contrast: k-color( on-primary );
-    $kendo-color-secondary: k-color( secondary );
-    $kendo-color-tertiary: k-color( tertiary );
-    $kendo-color-info: k-color( info );
-    $kendo-color-success: k-color( success );
-    $kendo-color-warning: k-color( warning );
-    $kendo-color-error: k-color( error );
-    $kendo-color-dark: k-color( dark );
-    $kendo-color-light: k-color( light );
-    $kendo-color-inverse: $kendo-color-dark;
-    $kendo-body-bg: k-color( app-surface );
-    $kendo-body-text: k-color( on-app-surface );
-    $kendo-subtle-text: k-color( subtle );
-    $kendo-app-bg: k-color( surface );
-    $kendo-app-text: $kendo-body-text;
-    $kendo-app-border: k-color( border );
-    $kendo-link-text: $kendo-color-primary;
-    $kendo-link-hover-text: k-color( primary-hover );
-    $kendo-component-bg: k-color( surface-alt );
-    $kendo-component-text: $kendo-body-text;
-    $kendo-component-border: $kendo-app-border;
-    $kendo-base-bg: k-color( surface );
-    $kendo-base-text: $kendo-body-text;
-    $kendo-base-border: $kendo-app-border;
-    $kendo-base-gradient: null;
-    $kendo-hover-bg: k-color( base-hover );
-    $kendo-hover-text: $kendo-base-text;
-    $kendo-hover-border: $kendo-base-border;
-    $kendo-hover-gradient: null;
-    $kendo-selected-bg: $kendo-color-primary;
-    $kendo-selected-text: $kendo-color-primary-contrast;
-    $kendo-selected-border: $kendo-base-border;
-    $kendo-selected-gradient: $kendo-base-gradient;
-    $kendo-selected-hover-bg: k-color( primary-hover );
-    $kendo-selected-hover-text: $kendo-selected-text;
-    $kendo-selected-hover-border: $kendo-base-border;
-    $kendo-selected-hover-gradient: $kendo-base-gradient;
-    $kendo-disabled-text: null;
-    $kendo-disabled-bg: null;
-    $kendo-disabled-border: null;
-    $kendo-disabled-opacity: .6;
-    $kendo-disabled-filter: grayscale(.1);
-    $kendo-component-header-bg: $kendo-base-bg;
-    $kendo-component-header-text: $kendo-base-text;
-    $kendo-component-header-border: $kendo-base-border;
-    $kendo-component-header-gradient: null;
-    $kendo-invalid-bg: null;
-    $kendo-invalid-text: $kendo-color-error;
-    $kendo-invalid-border: $kendo-color-error;
-    $kendo-invalid-shadow: null;
-
-    $kendo-theme-colors: (
-        "primary": $kendo-color-primary,
-        "secondary": $kendo-color-secondary,
-        "tertiary": $kendo-color-tertiary,
-        "info": $kendo-color-info,
-        "success": $kendo-color-success,
-        "warning": $kendo-color-warning,
-        "error": $kendo-color-error,
-        "dark": $kendo-color-dark,
-        "light": $kendo-color-light,
-        "inverse": $kendo-color-inverse,
-    );
-
-    $kendo-disabled-styling: (
-        bg: $kendo-disabled-bg,
-        color: $kendo-disabled-text,
-        border: $kendo-disabled-border,
-        opacity: $kendo-disabled-opacity,
-        filter: $kendo-disabled-filter
-    );
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+@use "../functions/index.import.scss" as *;
+
+// Primary colors
+$kendo-color-primary: if($kendo-enable-color-system, k-color( primary ), #ff6358 ) !default;
+$kendo-color-primary-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-primary, 2)) !default;
+$kendo-color-primary-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-primary, 2)) !default;
+$kendo-color-primary-contrast: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy($kendo-color-primary) ) !default;
+
+// Secondary colors
+$kendo-color-secondary: if($kendo-enable-color-system, k-color( secondary ), #666666 ) !default;
+$kendo-color-secondary-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-secondary, 2)) !default;
+$kendo-color-secondary-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-secondary, 2)) !default;
+$kendo-color-secondary-contrast: if($kendo-enable-color-system, k-color( on-secondary ), k-contrast-legacy($kendo-color-secondary) ) !default;
+
+// Tertiary colors
+$kendo-color-tertiary: if($kendo-enable-color-system, k-color( tertiary ), #03a9f4 ) !default;
+$kendo-color-tertiary-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-tertiary, 2)) !default;
+$kendo-color-tertiary-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-tertiary, 2)) !default;
+$kendo-color-tertiary-contrast: if($kendo-enable-color-system, k-color( on-tertiary ), k-contrast-legacy($kendo-color-tertiary) ) !default;
+
+// Info colors
+$kendo-color-info: if($kendo-enable-color-system, k-color( info ), #0058e9 ) !default;
+$kendo-color-info-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-info, 2)) !default;
+$kendo-color-info-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-info, 2)) !default;
+
+// Success colors
+$kendo-color-success: if($kendo-enable-color-system, k-color( success ), #37b400 ) !default;
+$kendo-color-success-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-success, 2)) !default;
+$kendo-color-success-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-success, 2)) !default;
+
+// Warning colors
+$kendo-color-warning: if($kendo-enable-color-system, k-color( warning ), #ffc000 ) !default;
+$kendo-color-warning-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-warning, 2)) !default;
+$kendo-color-warning-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-warning, 2)) !default;
+
+// Error colors
+$kendo-color-error: if($kendo-enable-color-system, k-color( error ), #f31700 ) !default;
+$kendo-color-error-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-error, 2)) !default;
+$kendo-color-error-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-error, 2)) !default;
+
+
+$kendo-color-dark: if($kendo-enable-color-system, k-color( dark ), #424242 ) !default;
+
+// Light colors
+$kendo-color-light: if($kendo-enable-color-system, k-color( light ), #ebebeb ) !default;
+
+// Inverse colors
+$kendo-color-inverse: if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) !default;
+
+// Body styles
+$kendo-body-bg: if($kendo-enable-color-system, k-color( app-surface ), #ffffff ) !default;
+$kendo-body-text: if($kendo-enable-color-system,  k-color( on-app-surface ), #424242 ) !default;
+
+// App styles
+$kendo-app-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade($kendo-body-bg, 0.25) ) !default;
+$kendo-app-text: $kendo-body-text !default;
+$kendo-app-border: if($kendo-enable-color-system, k-color( border ), rgba(#000000, 0.08) ) !default;
+
+// Component styles
+$kendo-component-bg: if($kendo-enable-color-system, k-color( surface-alt ), $kendo-body-bg ) !default;
+$kendo-component-text: $kendo-body-text  !default;
+$kendo-component-border: if($kendo-enable-color-system, $kendo-app-border, rgba(if($kendo-is-dark-theme, $kendo-color-white, #000000), 0.08) ) !default;
+
+$kendo-base-bg: if($kendo-enable-color-system, k-color( surface ), #fafafa ) !default;
+$kendo-base-text: $kendo-body-text !default;
+$kendo-base-border: $kendo-app-border !default;
+$kendo-base-gradient: if($kendo-enable-color-system, null, (rgba(black, 0), rgba(black, 0.02)) ) !default;
+
+// States styles
+$kendo-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade($kendo-base-bg, 0.5) ) !default;
+$kendo-hover-text: $kendo-base-text !default;
+$kendo-hover-border: $kendo-base-border !default;
+$kendo-hover-gradient: $kendo-base-gradient !default;
+
+$kendo-selected-bg: $kendo-color-primary !default;
+$kendo-selected-text: $kendo-color-primary-contrast !default;
+$kendo-selected-border: $kendo-base-border !default;
+$kendo-selected-gradient: $kendo-base-gradient !default;
+
+$kendo-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade($kendo-selected-bg, 0.5) ) !default;
+$kendo-selected-hover-text: $kendo-selected-text !default;
+$kendo-selected-hover-border: $kendo-base-border !default;
+$kendo-selected-hover-gradient: $kendo-base-gradient  !default;
+
+$kendo-component-header-bg: $kendo-base-bg !default;
+$kendo-component-header-text: $kendo-base-text !default;
+$kendo-component-header-border: $kendo-base-border !default;
+$kendo-component-header-gradient: null !default;
+
+$kendo-focus-outline: null !default;
+
+$kendo-subtle-text: if($kendo-enable-color-system, k-color( subtle ), #666666 ) !default;
+
+// Link
+$kendo-link-text: $kendo-color-primary !default;
+$kendo-link-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+
+// Validator
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: $kendo-color-error !default;
+$kendo-invalid-border: $kendo-color-error !default;
+$kendo-invalid-shadow: null !default;
+
+$kendo-valid-bg: null !default;
+$kendo-valid-text: $kendo-color-success !default;
+$kendo-valid-border: $kendo-color-success !default;
+$kendo-valid-shadow: null !default;
+
+// Disabled Styling
+
+/// The background color of disabled items.
+$kendo-disabled-bg: null !default;
+/// The text color of disabled items.
+$kendo-disabled-text: null !default;
+/// The border color of disabled items.
+$kendo-disabled-border: null !default;
+/// The opacity of disabled items.
+$kendo-disabled-opacity: .6 !default;
+/// The filter of disabled items.
+$kendo-disabled-filter: grayscale(.1) !default;
+
+$kendo-disabled-styling: (
+    bg: $kendo-disabled-bg,
+    color: $kendo-disabled-text,
+    border: $kendo-disabled-border,
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter
+) !default;
+
+
+$kendo-palettes: () !default;
+
+$kendo-theme-colors: (
+    "primary": $kendo-color-primary,
+    "secondary": $kendo-color-secondary,
+    "tertiary": $kendo-color-tertiary,
+    "info": $kendo-color-info,
+    "success": $kendo-color-success,
+    "warning": $kendo-color-warning,
+    "error": $kendo-color-error,
+    "dark": $kendo-color-dark,
+    "light": $kendo-color-light,
+    "inverse": $kendo-color-inverse,
+) !default;
+
+:root {
+    --kendo-disabled-text: #{$kendo-disabled-text};
+    --kendo-disabled-bg: #{$kendo-disabled-bg};
+    --kendo-disabled-border: #{$kendo-disabled-border};
+    --kendo-disabled-opacity: #{$kendo-disabled-opacity};
+    --kendo-disabled-filter: #{$kendo-disabled-filter};
+
+    --kendo-hr-border: #{$kendo-component-border};
+
+    --kendo-marquee-text: #{$kendo-selected-text};
+    --kendo-marquee-bg: #{$kendo-selected-bg};
+    --kendo-marquee-border: #{$kendo-selected-border};
+
+    --kendo-text-selection-bg: #{$kendo-color-primary};
 }

package/scss/core/color-system/index.import.scss

@@ -0,0 +1 @@
+@forward "@progress/kendo-theme-core/scss/color-system/index.import.scss";

package/scss/core/elevation/index.import.scss

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

package/scss/core/functions/index.import.scss

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

package/scss/core/mixins/index.import.scss

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

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

@@ -1,29 +1,3 @@
-@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+@forward "@progress/kendo-theme-core/scss/spacing/index.import.scss";
 
-$kendo-icon-spacing: k-spacing(1) !default;
-$kendo-icon-padding: k-spacing(1) !default;
-
-/// Horizontal padding.
-/// @group common
-$kendo-padding-x: k-spacing(2) !default;
-/// Vertical padding.
-/// @group common
-$kendo-padding-y: k-spacing(1) !default;
-/// Small horizontal padding.
-/// @group common
-$kendo-padding-sm-x: k-spacing(1) !default;
-/// Small vertical padding.
-/// @group common
-$kendo-padding-sm-y: k-spacing(0.5) !default;
-/// Medium horizontal padding.
-/// @group common
-$kendo-padding-md-x: k-spacing(2) !default;
-/// Medium vertical padding.
-/// @group common
-$kendo-padding-md-y: k-spacing(1) !default;
-/// Large horizontal padding.
-/// @group common
-$kendo-padding-lg-x: k-spacing(3) !default;
-/// Large vertical padding.
-/// @group common
-$kendo-padding-lg-y: k-spacing(1.5) !default;
+@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;

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 @@
-@import "@progress/kendo-theme-core/scss/typography/index.import.scss";
+@forward "@progress/kendo-theme-core/scss/typography/index.import.scss";

package/scss/dataviz/_index.scss

@@ -1,44 +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,3 +1,10 @@
+@use "sass:math";
+@use "sass:meta";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./variables.scss" as *;
+@use "../tooltip/_variables.scss" as *;
+
 @mixin kendo-dataviz--layout-base() {
 
     // Barcode
@@ -97,8 +104,8 @@
     .k-chart-tooltip td {
         width: auto;
         text-align: start;
-        padding-block: $kendo-padding-sm-y;
-        padding-inline: $kendo-padding-sm-x;
+        padding-block: $kendo-chart-tooltip-padding-y;
+        padding-inline: $kendo-chart-tooltip-padding-x;
         line-height: var( --kendo-line-height, normal );
         vertical-align: middle;
     }
@@ -153,31 +160,31 @@
     }
 
     .k-left-handle {
-        left: - k-math-div( $kendo-chart-selection-handle-size, 2 );
+        left: - math.div( $kendo-chart-selection-handle-size, 2 );
     }
 
     .k-right-handle {
-        right: - k-math-div( $kendo-chart-selection-handle-size, 2 );
+        right: - math.div( $kendo-chart-selection-handle-size, 2 );
     }
 
     .k-left-handle div {
-        margin: -($kendo-chart-selection-handle-size) 0 0 (- k-math-div( $kendo-chart-selection-handle-size, 1.5 ));
-        padding: ($kendo-chart-selection-handle-size * 2) (k-math-div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0;
+        margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 ));
+        padding: ($kendo-chart-selection-handle-size * 2) (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0;
     }
 
     .k-right-handle div {
-        margin: -($kendo-chart-selection-handle-size) 0 0 (- k-math-div( $kendo-chart-selection-handle-size, 1.5 ));
-        padding: ($kendo-chart-selection-handle-size * 2) 0 0 (k-math-div( $kendo-chart-selection-handle-size, 1.5 ) * 2);
+        margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 ));
+        padding: ($kendo-chart-selection-handle-size * 2) 0 0 (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2);
     }
 
     .k-left-handle.k-handle-active div {
         margin-left: -($kendo-chart-selection-handle-size * 2);
-        padding-left: ($kendo-chart-selection-handle-size * 2) + k-math-div( $kendo-chart-selection-handle-size, 1.5 );
+        padding-left: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 );
     }
 
     .k-right-handle.k-handle-active div {
         margin-left: -($kendo-chart-selection-handle-size * 2);
-        padding-right: ($kendo-chart-selection-handle-size * 2) + k-math-div( $kendo-chart-selection-handle-size, 1.5 );
+        padding-right: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 );
     }
 
     .k-mask {
@@ -327,8 +334,8 @@
 
         // Title
         .k-treemap-title {
-            padding-block: $kendo-padding-sm-y;
-            padding-inline: $kendo-padding-sm-x;
+            padding-block: $kendo-treemap-padding-y;
+            padding-inline: $kendo-treemap-padding-x;
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -337,8 +344,8 @@
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding-block: $kendo-padding-sm-x;
-            padding-inline: $kendo-padding-sm-y;
+            padding-block: $kendo-treemap-padding-x;
+            padding-inline: $kendo-treemap-padding-y;
             width: $kendo-line-height-em;
             white-space: nowrap;
             overflow: hidden;
@@ -369,16 +376,16 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            top: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            top: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            left: calc( calc( #{$kendo-padding-sm-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            left: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
         }
 
 
         // Leaf
         .k-leaf {
-            padding: $kendo-padding-sm-x;
+            padding: $kendo-treemap-padding-x;
         }
     }
 
@@ -481,7 +488,7 @@
     );
 
     @each $name, $value in $exported {
-        $type: k-meta-type-of($value);
+        $type: meta.type-of($value);
 
         .k-var--#{$name} {
             @if $type == "color" or $type == "string" {

package/scss/dataviz/_theme.scss

@@ -1,3 +1,8 @@
+
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../button/_variables.scss" as *;
+
 @mixin kendo-dataviz--theme-base() {
 
     // Exported variables

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: .3 !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;
 

package/scss/dateinput/_index.scss

@@ -1,41 +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/datepicker/_index.scss

@@ -1,46 +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();
-}