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

package/scss/dropdowntree/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../multiselect/_index.scss" as *;
+@use "../treeview/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dropdown-tree--styles() {
+    @include import-once( "dropdown-tree" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-multiselect--styles();
+        @include kendo-treeview--styles();
+        @include kendo-dropdown-tree--layout();
+        @include kendo-dropdown-tree--theme();
+        @include kendo-utils--typography--text-align();
+    }
+}

package/scss/dropzone/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dropzone--styles() {
+    @include import-once( "dropzone" ) {
+        @include core-styles();
+        @include kendo-dropzone--layout();
+        @include kendo-dropzone--theme();
+    }
+}

package/scss/editor/_index.scss

@@ -0,0 +1,32 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../colorpicker/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../window/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-editor--styles() {
+    @include import-once( "editor" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-color-picker--styles();
+        @include kendo-combobox--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-upload--styles();
+        @include kendo-window--styles();
+        @include kendo-editor--layout();
+        @include kendo-editor--theme();
+    }
+}

package/scss/editor/_layout.scss

@@ -41,8 +41,8 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( k-border-radius(md) );
-        padding-block: $kendo-padding-sm-y;
-        padding-inline: $kendo-padding-sm-x;
+        padding-block: k-spacing(0.5);
+        padding-inline: k-spacing(1);
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
@@ -182,7 +182,7 @@
         }
 
         > .ProseMirror { // stylelint-disable-line
-            padding: $kendo-padding-md-x;
+            padding: k-spacing(2);
             width: 100%;
             height: 100%;
             position: relative;
@@ -405,8 +405,8 @@
             height: 390px;
             max-height: 50vh;
             margin-block-end: k-spacing(4);
-            padding-block: $kendo-padding-md-y;
-            padding-inline: $kendo-padding-md-x;
+            padding-block: k-spacing(1);
+            padding-inline: k-spacing(2);
             border-top-width: 0;
             overflow: auto;
         }
@@ -414,8 +414,8 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding-block: $kendo-padding-md-y;
-            padding-inline: $kendo-padding-md-x;
+            padding-block: k-spacing(1);
+            padding-inline: k-spacing(2);
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -459,7 +459,7 @@
 
         .k-thumb {
             float: left;
-            margin-inline-end: $kendo-padding-sm-x;
+            margin-inline-end: k-spacing(1);
         }
 
         .k-breadcrumbs-wrap {
@@ -509,8 +509,8 @@
 
             td {
                 min-width: 1px;
-                padding-block: $kendo-padding-sm-y;
-                padding-inline: $kendo-padding-sm-x;
+                padding-block: k-spacing(0.5);
+                padding-inline: k-spacing(1);
             }
         }
 

package/scss/expansion-panel/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-expander--styles() {
+    @include import-once( "expander" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-expander--layout();
+        @include kendo-expander--theme();
+        @include kendo-utils--layout--display();
+    }
+}

package/scss/fab/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../badge/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-fab--styles() {
+    @include import-once( "fab" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-badge--styles();
+        @include kendo-fab--layout();
+        @include kendo-fab--theme();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--typography--text-align();
+        @include kendo-utils--layout--overflow();
+    }
+}

package/scss/filemanager/_index.scss

@@ -0,0 +1,38 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../switch/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../breadcrumb/_index.scss" as *;
+@use "../treeview/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+@use "../listview/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-file-manager--styles() {
+    @include import-once( "file-manager" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-upload--styles();
+        @include kendo-switch--styles();
+        @include kendo-menu--styles();
+        @include kendo-dialog--styles();
+        @include kendo-breadcrumb--styles();
+        @include kendo-treeview--styles();
+        @include kendo-splitter--styles();
+        @include kendo-grid--styles();
+        @include kendo-listview--styles();
+        @include kendo-file-manager--layout();
+        @include kendo-file-manager--theme();
+    }
+}

package/scss/filemanager/_layout.scss

@@ -1,4 +1,4 @@
-@use "../icon/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-file-manager--layout() {

package/scss/filemanager/_variables.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../toolbar/_variables.scss" as *;
-@use "../icon/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
 
 /// The space between the FileManager items.
 /// @group file-manager

package/scss/filter/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-filter--styles() {
+    @include import-once( "filter" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-filter--layout();
+        @include kendo-filter--theme();
+    }
+}

package/scss/filter/_variables.scss

@@ -3,10 +3,10 @@
 
 /// The horizontal padding of the Filter.
 /// @group filter
-$kendo-filter-padding-x: $kendo-padding-md-x !default;
+$kendo-filter-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Filter.
 /// @group filter
-$kendo-filter-padding-y: $kendo-padding-md-y !default;
+$kendo-filter-padding-y: k-spacing(1) !default;
 
 /// The bottom margin of the Filter.
 /// @group filter

package/scss/floating-label/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-floating-label--styles() {
+    @include import-once( "floating-label" ) {
+        @include core-styles();
+        @include kendo-floating-label--layout();
+        @include kendo-floating-label--theme();
+    }
+}

package/scss/forms/{index.scss → _index.scss}

@@ -1,28 +1,20 @@
-@use "../utils/index.scss" as *;
-
-// Module meta
-$_kendo-module-meta: (
-    name: "form",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "validator"
-    )
-);
-
+// Dependencies // TODO: extract variables
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
 @use "./_layout.scss" as *;
 @use "./_theme.scss" as *;
 
-// Register
-@use "../core/module-system/index.scss" as module;
-@include module.register( $_kendo-module-meta... );
-
 // Expose
-@mixin form-styles() {
-    @include module.render( "form" ) {
+@mixin kendo-form--styles() {
+    @include import-once( "form" ) {
+        @include core-styles();
+        @include kendo-toolbar--styles();
+        @include kendo-action-buttons--styles();
         @include kendo-form--layout();
         @include kendo-form--theme();
         @include kendo-utils--layout--display();

package/scss/forms/_layout.scss

@@ -3,7 +3,6 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
-@use "../window/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
 
 @mixin kendo-form--layout() {
@@ -101,14 +100,14 @@
 
         .k-alert-error {
             font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-            margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-md-y} ) * 2 );
+            margin-block-start: calc( #{k-spacing(1)} * 2 );
         }
 
         .k-field-info {
             display: inline-block;
             font-size: var( --kendo-font-size-xs, #{$kendo-font-size-xs} );
             line-height: 1;
-            margin-inline: var( --kendo-padding-x, #{$kendo-padding-md-x} );
+            margin-inline: k-spacing(2);
         }
 
 
@@ -223,9 +222,9 @@
             text-align: start;
             font-weight: 600;
             line-height: 1;
-            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
+            margin-block-end: calc( #{k-spacing(1.5)} * 2 );
             text-transform: uppercase;
-            padding-inline-end: var( --kendo-padding-x, #{$kendo-padding-md-x} );
+            padding-inline-end: k-spacing(2);
             width: auto;
         }
 
@@ -233,14 +232,14 @@
             display: flex;
             align-items: flex-start;
             text-align: start;
-            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
+            margin-block-end: calc( #{k-spacing(1.5)} * 2 );
 
             > span:not(.k-widget) {
                 width: var( --kendo-inline-form-element-width, #{$kendo-inline-form-element-width} );
                 text-align: end;
                 line-height: var( --kendo-line-height, #{$kendo-line-height-md} );
-                padding-block: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} );
-                padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-lg-x} );
+                padding-block: calc( #{k-spacing(1)} + #{$kendo-input-border-width} );
+                padding-inline-end: k-spacing(3);
                 align-self: center;
             }
 
@@ -254,7 +253,7 @@
 
             .k-alert-error {
                 font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-                margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-md-y} ) * 2 );
+                margin-block-start: calc( #{k-spacing(1)} * 2 );
             }
 
             .k-field-info {
@@ -282,7 +281,7 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: k-spacing(4) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+        margin: k-spacing(4) calc( -1 * #{k-spacing(6)} ) calc( -1 * k-spacing(3) );
     }
 
 

package/scss/forms/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: calc( #{$kendo-padding-md-x} * 2 ) !default;
+$kendo-form-spacer: calc( #{k-spacing(2)} * 2 ) !default;
 
 /// The font size of the Form.
 /// @group form

package/scss/gantt/_index.scss

@@ -0,0 +1,35 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../validator/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../treelist/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-gantt--styles() {
+    @include import-once( "gantt" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-validator--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-window--styles();
+        @include kendo-splitter--styles();
+        @include kendo-treelist--styles();
+        @include kendo-gantt--layout();
+        @include kendo-gantt--theme();
+        @include kendo-utils--typography--white-space();
+        @include kendo-utils--table--table-layout();
+    }
+}

package/scss/gantt/_layout.scss

@@ -624,8 +624,8 @@
 
     // Task tooltip
     .k-task-details {
-        padding-block: $kendo-padding-md-y;
-        padding-inline: $kendo-padding-md-x;
+        padding-block: k-spacing(1);
+        padding-inline: k-spacing(2);
         white-space: nowrap;
 
         strong {

package/scss/gantt/_variables.scss

@@ -129,10 +129,10 @@ $kendo-gantt-task-progress-selected-bg: if($kendo-enable-color-system, k-color(
 
 /// The vertical padding of the Gantt task actions.
 /// @group gantt
-$kendo-gantt-task-actions-padding-y: $kendo-padding-md-y !default;
+$kendo-gantt-task-actions-padding-y: k-spacing(1) !default;
 /// The horizontal padding of the Gantt task actions.
 /// @group gantt
-$kendo-gantt-task-actions-padding-x: $kendo-padding-md-x !default;
+$kendo-gantt-task-actions-padding-x: k-spacing(2) !default;
 
 /// The vertical margin of the Gantt task planned line.
 /// @group gantt

package/scss/grid/_index.scss

@@ -0,0 +1,64 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../adaptive/_index.scss" as *;
+@use "../progressbar/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../validator/_index.scss" as *;
+@use "../autocomplete/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../pager/_index.scss" as *;
+@use "../chip/_index.scss" as *;
+@use "../skeleton/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../table/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-grid--styles() {
+    @include import-once( "grid" ) {
+        @include core-styles();
+        @include kendo-adaptive--styles();
+        @include kendo-progressbar--styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-validator--styles();
+        @include kendo-autocomplete--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-menu--styles();
+        @include kendo-dialog--styles();
+        @include kendo-pager--styles();
+        @include kendo-chip--styles();
+        @include kendo-skeleton--styles();
+        @include kendo-list--styles();
+        @include kendo-table--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-grid--layout();
+        @include kendo-grid--theme();
+        @include kendo-utils--interactivity--touch-action();
+        @include kendo-utils--interactivity--cursor();
+        @include kendo-utils--layout--display();
+    }
+}

package/scss/grid/_layout.scss

@@ -521,10 +521,10 @@
     .k-grid-column-menu-standalone a.k-grid-filter {
         position: initial;
         display: inline-block;
-        margin-block: calc( #{$kendo-padding-md-y} * -1 );
+        margin-block: calc( #{k-spacing(1)} * -1 );
         margin-inline: 0;
-        padding-block: $kendo-padding-md-y;
-        padding-inline: $kendo-padding-md-x;
+        padding-block: k-spacing(1);
+        padding-inline: k-spacing(2);
     }
 
     // Filter row

package/scss/{icon/index.scss → icons/_index.scss}

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

package/scss/imageeditor/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-image-editor--styles() {
+    @include import-once( "image-editor" ) {
+        @include core-styles();
+        @include kendo-toolbar--styles();
+        @include kendo-form--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-image-editor--layout();
+        @include kendo-image-editor--theme();
+    }
+}