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

package/scss/upload/_index.scss

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

package/scss/upload/_layout.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 @mixin kendo-upload--layout-base() {
 
     .k-upload {
@@ -130,7 +134,7 @@
 
             ~ .k-clear-selected,
             ~ .k-upload-selected {
-                margin-top: -$kendo-padding-md-y;
+                margin-top: $kendo-upload-files-list-margin;
                 border-width: 0;
             }
 
@@ -183,7 +187,7 @@
 
         .k-multiple-files-wrapper,
         .k-file-single > .k-file-info {
-            margin-inline-start: $kendo-padding-md-x;
+            margin-inline-start: $kendo-upload-file-info-margin;
             min-height: $kendo-icon-size-xxl;
             display: block;
             overflow: hidden;

package/scss/upload/_theme.scss

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

package/scss/upload/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Upload
 
 /// The width of the border around the Upload.
@@ -100,3 +103,7 @@ $kendo-upload-error-bg: $kendo-color-error !default;
 /// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload
 $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+
+$kendo-upload-files-list-margin: calc( -1 * #{k-spacing(1)} ) !default;
+
+$kendo-upload-file-info-margin: k-spacing(2) !default;

package/scss/utils/_index.scss

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

package/scss/validator/_index.scss

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

package/scss/validator/_layout.scss

@@ -1,3 +1,5 @@
+@use "../tooltip/_variables.scss" as *;
+
 @mixin kendo-validator--layout-base() {
 
     // Validator

package/scss/virtual-scroller/_index.scss

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

package/scss/window/_index.scss

@@ -1,47 +1,26 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "window",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "form",
-        "icon",
-        "overlay"
-    )
-);
-
-
 // Dependencies
-@import "../overlay/_index.scss";
-@import "../forms/_index.scss";
-@import "../button/_index.scss";
-@import "../action-buttons/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../button/_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-window--styles() {
-    @include module-render( "window" ) {
+    @include import-once( "window" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
+        @include kendo-form--styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-icon--styles();
         @include kendo-window--layout();
         @include kendo-window--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-window--styles();
-}

package/scss/window/_layout.scss

@@ -1,3 +1,7 @@
+@use "sass:list";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-window--layout-base() {
 
     .k-window {
@@ -112,7 +116,7 @@
         flex: 1 1 auto;
     }
     .k-window-content + .k-prompt-container {
-        margin-top: - k-math-div( $kendo-window-inner-padding-y, 2 );
+        margin-top: - list.slash( $kendo-window-inner-padding-y, 2 );
     }
     .k-window-content:first-child {
         padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );

package/scss/window/_theme.scss

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

package/scss/window/_variables.scss

@@ -1,4 +1,6 @@
-@import "../action-buttons/_variables.scss";
+@use "sass:map";
+@use "../action-buttons/_variables.scss" as *;
+@use "../core/_index.scss" as *;
 
 // Window
 
@@ -105,7 +107,7 @@ $kendo-window-sizes: (
 /// The theme colors map for the Window.
 /// @group window
 $kendo-window-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/wizard/_index.scss

@@ -1,45 +1,24 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "wizard",
-    dependencies: (
-        "button",
-        "form",
-        "icon",
-        "stepper"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../stepper/_index.scss";
-@import "../forms/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../stepper/_index.scss" as *;
+@use "../forms/_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-wizard--styles() {
-    @include module-render( "wizard" ) {
+    @include import-once( "wizard" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-stepper--styles();
+        @include kendo-form--styles();
+        @include kendo-icon--styles();
         @include kendo-wizard--layout();
         @include kendo-wizard--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-wizard--styles();
-}

package/scss/wizard/_layout.scss

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "./variables.scss" as *;
+
 @mixin kendo-wizard--layout-base() {
 
     // Wizard
@@ -26,7 +29,7 @@
 
         .k-wizard-step {
             box-sizing: border-box;
-            padding: calc(#{k-math-div( $kendo-wizard-content-padding-x, 4 )} + 2px);
+            padding: calc(#{list.slash( $kendo-wizard-content-padding-x, 4 )} + 2px);
             width: 100%;
             display: flex;
             flex-direction: column;

package/scss/wizard/_theme.scss

@@ -1,3 +1,5 @@
+@use "./variables.scss" as *;
+
 @mixin kendo-wizard--theme-base() {
 
     .k-wizard-step {

package/scss/wizard/_variables.scss

@@ -1,17 +1,19 @@
+@use "../core/_index.scss" as *;
+
 // Wizard
 
 /// The horizontal padding of the Wizard.
 /// @group wizard
-$kendo-wizard-padding-x: calc( #{$kendo-padding-md-x} * 2.5 ) !default;
+$kendo-wizard-padding-x: calc( #{k-spacing(2)} * 2.5 ) !default;
 /// The vertical padding of the Wizard.
 /// @group wizard
 $kendo-wizard-padding-y: $kendo-wizard-padding-x !default;
 /// The horizontal padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-x: calc( #{$kendo-padding-md-x} * 4 ) !default;
+$kendo-wizard-content-padding-x: calc( #{k-spacing(2)} * 4 ) !default;
 /// The vertical padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-y: calc( #{$kendo-padding-md-y} * 8 ) !default;
+$kendo-wizard-content-padding-y: calc( #{k-spacing(1)} * 8 ) !default;
 /// The horizontal margin of the Wizard's Button container.
 /// @group wizard
 $kendo-wizard-buttons-margin-x: k-spacing(2.5) !default;