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

package/scss/filter/_index.scss

@@ -1,52 +1,30 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "filter",
-    dependencies: (
-        "button",
-        "checkbox",
-        "date-time-picker",
-        "dropdown-list",
-        "input",
-        "numeric-textbox",
-        "textbox",
-        "toolbar"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../input/_index.scss";
-@import "../checkbox/_index.scss";
-@import "../datetimepicker/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../toolbar/_index.scss";
-
+@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
-@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-filter--styles() {
-    @include module-render( "filter" ) {
+    @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();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-filter--styles();
-}

package/scss/filter/_layout.scss

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

package/scss/filter/_theme.scss

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

package/scss/filter/_variables.scss

@@ -1,11 +1,13 @@
+@use "../core/_index.scss" as *;
+
 // Filter expression builder
 
 /// 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

@@ -1,39 +1,16 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "floating-label",
-    dependencies: (
-        "input"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-
+@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-floating-label--styles() {
-    @include module-render( "floating-label" ) {
+    @include import-once( "floating-label" ) {
+        @include core-styles();
         @include kendo-floating-label--layout();
         @include kendo-floating-label--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-floating-label--styles();
-}

package/scss/floating-label/_layout.scss

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

package/scss/floating-label/_theme.scss

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

package/scss/floating-label/_variables.scss

@@ -1,3 +1,5 @@
+@use "../input/_variables.scss" as *;
+
 // Floating label
 
 /// The transformation scale of the Floating Label.

package/scss/forms/_index.scss

@@ -1,38 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "form",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "validator"
-    )
-);
-
-
 // Dependencies // TODO: extract variables
-@import "../toolbar/_index.scss";
-@import "../action-buttons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../toolbar/_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-form--styles() {
-    @include module-render( "form" ) {
+    @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();
@@ -41,7 +23,3 @@ $_kendo-module-meta: (
         @include kendo-utils--flex-grid--grid-column-start-end();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-form--styles();
-}

package/scss/forms/_layout.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "../input/_variables.scss" as *;
+
 @mixin kendo-form--layout-base() {
 
     // Common
@@ -17,7 +22,7 @@
 
         > legend {
             margin-left: 0;
-            padding: 0 $kendo-padding-md-x 0 0;
+            padding: $kendo-fieldset-legend-padding;
             text-transform: uppercase;
         }
     }
@@ -112,7 +117,7 @@
 
         .k-alert-error {
             font-size: var( --kendo-font-size-sm, inherit );
-            margin-top: calc( #{$kendo-padding-md-y} * 2 );
+            margin-top: $kendo-form-alert-error-margin;
         }
 
         .k-field-info {
@@ -120,7 +125,7 @@
             font-size: var( --kendo-font-size-xs, inherit );
             line-height: 1;
             margin-block: 0;
-            margin-inline: $kendo-padding-md-x;
+            margin-inline: $kendo-form-field-info-margin;
         }
 
 
@@ -220,7 +225,7 @@
 
     // Sizes
     @each $size, $size-props in $kendo-form-sizes {
-        $_form-rows-spacing: k-map-get($size-props, form-rows-spacing);
+        $_form-rows-spacing: map.get($size-props, form-rows-spacing);
 
         .k-form-#{$size} {
             .k-form-field,
@@ -255,9 +260,9 @@
             text-align: start;
             font-weight: 600;
             line-height: 1;
-            margin-bottom: calc( #{$kendo-padding-lg-y} * 2 );
+            margin-bottom: $kendo-fieldset-legend-margin;
             text-transform: uppercase;
-            padding: 0 $kendo-padding-md-x 0 0;
+            padding: $kendo-fieldset-legend-padding;
             width: auto;
         }
 
@@ -265,15 +270,14 @@
             display: flex;
             align-items: flex-start;
             text-align: start;
-            margin-bottom: calc( #{$kendo-padding-lg-y} * 2 );
+            margin-bottom: $kendo-fieldset-legend-margin;
 
             > span:not(.k-widget) {
                 width: $kendo-inline-form-element-width;
                 text-align: end;
                 line-height: var( --kendo-line-height, normal );
-                // TODO: do we need the input variable?
-                padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
-                padding-right: $kendo-padding-lg-x;
+                padding-block: $kendo-inline-form-field-padding-y;
+                padding-inline: $kendo-inline-form-field-padding-x;
                 align-self: center;
             }
 
@@ -287,7 +291,7 @@
 
             .k-alert-error {
                 font-size: var( --kendo-font-size-sm, inherit );
-                margin-top: calc( #{$kendo-padding-md-y} * 2 );
+                margin-top: $kendo-form-alert-error-margin;
             }
 
             .k-field-info {
@@ -319,7 +323,7 @@
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
         // TODO: refactor
-        margin: k-spacing(4) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+        margin: k-spacing(4) calc(#{k-spacing(4)} * -1) calc(#{k-spacing(4)} * -1);
     }
 
 

package/scss/forms/_theme.scss

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

package/scss/forms/_variables.scss

@@ -1,14 +1,15 @@
-@import "../input/_variables.scss";
-@import "../tooltip/_variables.scss";
-@import "../typography/_variables.scss";
-@import "../window/_variables.scss";
+@use "../input/_variables.scss" as *;
+@use "../tooltip/_variables.scss" as *;
+@use "../typography/_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 
 // Forms
 
 /// 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
@@ -114,6 +115,14 @@ $kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-
 /// @group form
 $kendo-inline-form-element-width: 25% !default;
 
+/// The horizontal padding of the inline Form field.
+/// @group form
+$kendo-inline-form-field-padding-x: 0 k-spacing(3) !default;
+
+/// The vertical padding of the inline Form field.
+/// @group form
+$kendo-inline-form-field-padding-y: calc( #{k-spacing(1)} + #{$kendo-input-border-width} ) !default;
+
 /// The invalid text color of the Form.
 /// @group form
 $kendo-forms-invalid-color: $kendo-color-error !default;
@@ -146,6 +155,21 @@ $kendo-fieldset-text: null !default;
 /// @group form
 $kendo-fieldset-border: null !default;
 
+/// The padding of the Form fieldset legend.
+/// @group form
+$kendo-fieldset-legend-padding: 0 k-spacing(2) 0 0 !default;
+/// The margin of the Form fieldset legend
+/// @group form
+$kendo-fieldset-legend-margin: calc( #{k-spacing(1.5)} * 2 ) !default;
+
+/// The margin of the Form alert error.
+/// @group form
+$kendo-form-alert-error-margin: calc( #{k-spacing(1)} * 2 ) !default;
+
+/// The margin of the Form field info.
+/// @group form
+$kendo-form-field-info-margin: k-spacing(2) !default;
+
 /// The background color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-bg: null !default;
@@ -169,3 +193,4 @@ $kendo-form-sizes: (
         form-rows-spacing: $kendo-form-lg-rows-spacing
     )
 ) !default;
+

package/scss/gantt/_index.scss

@@ -1,59 +1,35 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "gantt",
-    dependencies: (
-        "button",
-        "date-time-picker",
-        "icon",
-        "input",
-        "numeric-textbox",
-        "splitter",
-        "toolbar",
-        "treelist",
-        "validator",
-        "window",
-        "time-marker"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../input/_index.scss";
-@import "../validator/_index.scss";
-@import "../datetimepicker/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../window/_index.scss";
-@import "../splitter/_index.scss";
-@import "../treelist/_index.scss";
-
+@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
-@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-gantt--styles() {
-    @include module-render( "gantt" ) {
+    @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();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-gantt--styles();
-}

package/scss/gantt/_layout.scss

@@ -1,3 +1,11 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../table/_variables.scss" as *;
+@use "../grid/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 @mixin kendo-gantt--layout-base() {
 
     $row-height: #{$kendo-line-height-em} + calc( 2 * #{$kendo-table-md-cell-padding-y} ) + #{$kendo-grid-cell-horizontal-border-width};
@@ -591,7 +599,7 @@
         text-overflow: ellipsis;
     }
     .k-task-actions {
-        padding: $kendo-padding-sm-y;
+        padding: $kendo-gantt-task-actions-padding;
         white-space: nowrap;
         display: flex;
         flex-direction: row;
@@ -622,8 +630,8 @@
 
     // Task tooltip
     .k-task-details {
-        padding-block: $kendo-padding-md-y;
-        padding-inline: $kendo-padding-md-x;
+        padding-block: $kendo-gantt-task-tooltip-padding-y;
+        padding-inline: $kendo-gantt-task-tooltip-padding-x;
         white-space: nowrap;
 
         strong {

package/scss/gantt/_theme.scss

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

package/scss/gantt/_variables.scss

@@ -1,4 +1,7 @@
-@import "../table/_variables.scss";
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "../table/_variables.scss" as *;
 
 
 // Gantt
@@ -135,6 +138,10 @@ $kendo-gantt-task-selected-border: null !default;
 /// @group gantt
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
 
+/// The padding of the Gantt task actions.
+/// @group gantt
+$kendo-gantt-task-actions-padding: k-spacing(0.5) !default;
+
 /// The vertical margin of the Gantt task planned line.
 /// @group gantt
 $kendo-gantt-planned-margin-y: .35em !default;
@@ -160,10 +167,10 @@ $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
 $kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
 /// The horizontal margin of the Gantt planned line dot.
 /// @group gantt
-$kendo-gantt-planned-moment-left-margin-x: calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
+$kendo-gantt-planned-moment-left-margin-x: calc( #{math.div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
 /// The horizontal margin of the Gantt milestone planned line dot.
 /// @group gantt
-$kendo-gantt-planned-milestone-moment-margin-x: k-math-div( $kendo-gantt-planned-moment-width, 2 ) !default;
+$kendo-gantt-planned-milestone-moment-margin-x: math.div( $kendo-gantt-planned-moment-width, 2 ) !default;
 
 /// The default height of the Gantt planned line.
 /// @group gantt
@@ -239,3 +246,12 @@ $kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
+
+/// The horizontal padding of the Gantt task Tooltip.
+/// @group gantt
+$kendo-gantt-task-tooltip-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Gantt task Tooltip.
+/// @group gantt
+$kendo-gantt-task-tooltip-padding-y: k-spacing(1) !default;
+
+