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

package/scss/daterangepicker/_index.scss

@@ -1,48 +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,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../input/_variables.scss" as *;
+
 @mixin kendo-date-range-picker--layout-base() {
 
     // Daterange picker

package/scss/datetimepicker/_index.scss

@@ -1,55 +1,30 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "date-time-picker",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "calendar",
-        "date-input",
-        "date-picker",
-        "floating-label",
-        "icon",
-        "input",
-        "list",
-        "popup",
-        "time-selector"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../button/_index.scss";
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-@import "../calendar/_index.scss";
-@import "../timeselector/_index.scss";
-@import "../action-buttons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../calendar/_index.scss" as *;
+@use "../timeselector/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-date-time-picker--styles() {
-    @include module-render( "date-time-picker" ) {
+    @include import-once( "date-time-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-calendar--styles();
+        @include kendo-time-selector--styles();
+        @include kendo-action-buttons--styles();
         @include kendo-date-time-picker--layout();
         @include kendo-date-time-picker--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-date-time-picker--styles();
-}

package/scss/datetimepicker/_layout.scss

@@ -1,3 +1,6 @@
+@use "./variables.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+
 @mixin kendo-date-time-picker--layout-base() {
 
     // Datetime container

package/scss/datetimepicker/_variables.scss

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

package/scss/dialog/_index.scss

@@ -1,42 +1,18 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dialog",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "icon",
-        "window"
-    )
-);
-
-
 // Dependencies
-@import "../window/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../window/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-dialog--styles() {
-    @include module-render( "dialog" ) {
+    @include import-once( "dialog" ) {
+        @include core-styles();
+        @include kendo-window--styles();
         @include kendo-dialog--layout();
         @include kendo-dialog--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dialog--styles();
-}

package/scss/dialog/_layout.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../window/_variables.scss" as *;
+
 @mixin kendo-dialog--layout-base() {
 
     .k-dialog-wrapper {

package/scss/dialog/_theme.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-dialog--theme-base() {
 
     // Dialog titlebar

package/scss/dialog/_variables.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+
 // Dialog
 
 /// The background color of the Dialog titlebar.
@@ -26,7 +30,7 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 /// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
-    "primary": k-map-get($kendo-theme-colors, "primary"),
-    "light": k-map-get($kendo-theme-colors, "light"),
-    "dark": k-map-get($kendo-theme-colors, "dark")
+    "primary": map.get($kendo-theme-colors, "primary"),
+    "light": map.get($kendo-theme-colors, "light"),
+    "dark": map.get($kendo-theme-colors, "dark")
 ) !default;

package/scss/dock-manager/_index.scss

@@ -1,38 +1,22 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dock-manager",
-    dependencies: (
-        "splitter",
-        "tabstrip",
-        "toolbar"
-    )
-);
-
 // Dependencies
-@import "../splitter/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../tabstrip/_index.scss";
+@use "../core/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-dock-manager--styles() {
-    @include module-render("dock-manager") {
+    @include import-once("dock-manager") {
+        @include core-styles();
+        @include kendo-splitter--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-tabstrip--styles();
         @include kendo-dock-manager--layout();
         @include kendo-dock-manager--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dock-manager--styles();
-}

package/scss/dock-manager/_layout.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-dock-manager--layout-base() {
 
     // DockManager

package/scss/dock-manager/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-dock-manager--theme-base() {
 
     // DockManager

package/scss/dock-manager/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 ///  The width of the border around the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-border-width: 1px !default;

package/scss/draggable/_index.scss

@@ -1,36 +1,16 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "draggable",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@use "../core/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-draggable--styles() {
-    @include module-render( "draggable" ) {
+    @include import-once( "draggable" ) {
+        @include core-styles();
         @include kendo-draggable--layout();
         @include kendo-draggable--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-draggable--styles();
-}

package/scss/draggable/_layout.scss

@@ -1,3 +1,7 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-draggable--layout-base() {
 
     // Layout
@@ -43,7 +47,7 @@
     .k-drop-hint-start,
     .k-drop-hint-end {
         flex-shrink: 0;
-        border-width: k-math-div( $kendo-drop-hint-arrow-size, 2 );
+        border-width: math.div( $kendo-drop-hint-arrow-size, 2 );
         border-style: solid;
         border-color: transparent;
     }
@@ -55,7 +59,7 @@
 
     .k-drop-hint-h {
         .k-drop-hint-start {
-            border-left-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-left-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
             border-left-color: $kendo-drop-hint-bg;
             border-right-width: 0;
         }
@@ -66,7 +70,7 @@
         }
 
         .k-drop-hint-end {
-            border-right-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-right-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
             border-right-color: $kendo-drop-hint-bg;
             border-left-width: 0;
         }
@@ -76,7 +80,7 @@
         flex-direction: column;
 
         .k-drop-hint-start {
-            border-top-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-top-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
             border-top-color: $kendo-drop-hint-bg;
             border-bottom-width: 0;
         }
@@ -87,7 +91,7 @@
         }
 
         .k-drop-hint-end {
-            border-bottom-width: ( k-math-div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-bottom-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
             border-bottom-color: $kendo-drop-hint-bg;
             border-top-width: 0;
         }

package/scss/draggable/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-draggable--theme-base() {
 
     // Drag hint

package/scss/draggable/_variables.scss

@@ -1,6 +1,9 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+
 // Drag hint
-$kendo-drag-hint-padding-x: $kendo-padding-md-x !default;
-$kendo-drag-hint-padding-y: $kendo-padding-md-y !default;
+$kendo-drag-hint-padding-x: k-spacing(2) !default;
+$kendo-drag-hint-padding-y: k-spacing(1) !default;
 $kendo-drag-hint-border-width: 1px !default;
 $kendo-drag-hint-border-radius: k-border-radius(md) !default;
 $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
@@ -18,7 +21,7 @@ $kendo-drag-hint-opacity: null !default;
 
 // Drop hint
 $kendo-drop-hint-arrow-size: 8px !default;
-$kendo-drop-hint-arrow-spacing: k-math-div( $kendo-drop-hint-arrow-size, 2 ) !default;
+$kendo-drop-hint-arrow-spacing: math.div( $kendo-drop-hint-arrow-size, 2 ) !default;
 $kendo-drop-hint-line-h-width: 20px !default;
 $kendo-drop-hint-line-h-height: 1px !default;
 $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;

package/scss/drawer/_index.scss

@@ -1,43 +1,22 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "drawer",
-    dependencies: (
-        "icon",
-        "list",
-        "overlay"
-    )
-);
-
-
 // Dependencies
-@import "../overlay/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../list/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-drawer--styles() {
-    @include module-render( "drawer" ) {
+    @include import-once( "drawer" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-list--styles();
         @include kendo-drawer--layout();
         @include kendo-drawer--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-drawer--styles();
-}

package/scss/drawer/_layout.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-drawer--layout-base() {
 
     // Container

package/scss/drawer/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-drawer--theme-base() {
 
     .k-drawer {

package/scss/drawer/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
 // Drawer
 
 /// The background color of the Drawer.
@@ -52,7 +56,7 @@ $kendo-drawer-scrollbar-hover-color: rgba(156, 156, 156, 1) !default;
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: $kendo-padding-md-x !default;
+$kendo-drawer-item-padding-y: k-spacing(2) !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: var( --kendo-font-size-lg, inherit ) !default;

package/scss/dropdowngrid/_index.scss

@@ -1,49 +1,26 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dropdown-grid",
-    dependencies: (
-        "button",
-        "floating-label",
-        "grid",
-        "icon",
-        "input",
-        "popup",
-        "table"
-    )
-);
-
-
 // Dependencies
-@import "../floating-label/_index.scss";
-@import "../icons/_index.scss";
-@import "../input/_index.scss";
-@import "../popup/_index.scss";
-@import "../table/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../table/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-dropdown-grid--styles() {
-    @include module-render( "dropdown-grid" ) {
+    @include import-once( "dropdown-grid" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-table--styles();
         @include kendo-dropdown-grid--layout();
         @include kendo-dropdown-grid--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dropdown-grid--styles();
-}

package/scss/dropdownlist/_index.scss

@@ -1,47 +1,24 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dropdown-list",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input",
-        "list",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-dropdown-list--styles() {
-    @include module-render( "dropdown-list" ) {
+    @include import-once( "dropdown-list" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-floating-label--styles();
         @include kendo-dropdown-list--layout();
         @include kendo-dropdown-list--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dropdown-list--styles();
-}