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

package/scss/splitter/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Splitter
 
 /// The width of the border around the Splitter.

package/scss/spreadsheet/_index.scss

@@ -1,72 +1,48 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "spreadsheet",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "checkbox",
-        "color-picker",
-        "combobox",
-        "date-time-picker",
-        "dropdown-list",
-        "form",
-        "icon",
-        "input",
-        "list",
-        "menu",
-        "radio",
-        "tabstrip",
-        "toolbar",
-        "treeview",
-        "upload",
-        "window"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../checkbox/_index.scss";
-@import "../radio/_index.scss";
-@import "../colorpicker/_index.scss";
-@import "../combobox/_index.scss";
-@import "../datetimepicker/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../upload/_index.scss";
-@import "../menu/_index.scss";
-@import "../window/_index.scss";
-@import "../tabstrip/_index.scss";
-@import "../treeview/_index.scss";
-@import "../icons/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../colorpicker/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+@use "../treeview/_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-spreadsheet--styles() {
-    @include module-render( "spreadsheet" ) {
+    @include import-once( "spreadsheet" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-color-picker--styles();
+        @include kendo-combobox--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-upload--styles();
+        @include kendo-menu--styles();
+        @include kendo-window--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-treeview--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
         @include kendo-spreadsheet--layout();
         @include kendo-spreadsheet--theme();
         @include kendo-utils--flex-grid--order();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-spreadsheet--styles();
-}

package/scss/spreadsheet/_layout.scss

@@ -1,3 +1,10 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../menu/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+
 @mixin kendo-spreadsheet--layout-base() {
 
     // Spreadsheet
@@ -66,7 +73,7 @@
         // move to legacy selector
         > .k-icon {
             padding-block: 0;
-            padding-inline: $kendo-padding-md-y;
+            padding-inline: $kendo-spreadsheet-formula-bar-icon-padding;
             box-sizing: content-box;
             border-width: 0 1px 0 0;
             border-style: solid;
@@ -525,7 +532,7 @@
     }
     .k-spreadsheet-filter {
         @include border-radius( k-border-radius(md) );
-        padding: $kendo-padding-y;
+        padding: $kendo-spreadsheet-filter-padding;
         line-height: 1;
         position: absolute;
         cursor: pointer;
@@ -550,11 +557,10 @@
                 color: inherit;
             }
             .k-link {
-                padding-left: calc( #{$kendo-icon-size} + calc( 2 * #{$kendo-padding-md-y} ) );
+                padding-left: $kendo-spreadsheet-filter-menu-link-padding-x;
             }
             .k-icon {
-                margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
-                margin-right: $kendo-padding-md-y;
+                margin: $kendo-spreadsheet-filter-menu-icon-margin;
             }
 
         }
@@ -567,7 +573,7 @@
             overflow-x: auto;
 
             .k-treeview {
-                padding: $kendo-padding-md-y;
+                padding: $kendo-spreadsheet-filter-padding;
                 overflow: visible;
             }
         }
@@ -594,7 +600,7 @@
 
             > .k-icon,
             > .k-expander-indicator {
-                margin-right: $kendo-padding-md-y;
+                margin-right: $kendo-spreadsheet-filter-padding;
             }
         }
         .k-details-content,

package/scss/spreadsheet/_theme.scss

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

package/scss/spreadsheet/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../input/_variables.scss" as *;
+
 // Spreadsheet
 
 /// The width of the border around the Spreadsheet.
@@ -82,6 +86,10 @@ $kendo-spreadsheet-formula-input-padding-y: $kendo-input-padding-y !default;
 /// @group spreadsheet
 $kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
 
+/// The padding of the Spreadsheet formula bar icon.
+/// @group spreadsheet
+$kendo-spreadsheet-formula-bar-icon-padding: k-spacing(1) !default;
+
 /// The font family of the Spreadsheet view.
 /// @group spreadsheet
 $kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
@@ -259,3 +267,11 @@ $kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(i
 /// @group spreadsheet
 $kendo-spreadsheet-dropzone-spacing-y: k-spacing(4) !default;
 
+/// The padding of the Spreadsheet filter.
+/// @group spreadsheet
+$kendo-spreadsheet-filter-padding: k-spacing(1) !default;
+
+
+$kendo-spreadsheet-filter-menu-link-padding-x: calc( #{$kendo-icon-size} + calc( 2 * #{k-spacing(1)} ) ) !default;
+
+$kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kendo-icon-size} + #{k-spacing(1)} ) ) !default;

package/scss/stepper/_index.scss

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

package/scss/stepper/_layout.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 @mixin kendo-stepper--layout-base() {
 
     // Base

package/scss/stepper/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-stepper--theme-base() {
 
     // Base
@@ -47,7 +50,7 @@
                             k-color( app-surface ),
                             $kendo-stepper-indicator-disabled-border
                         );
-                        
+
                         &::before {
                             background-color: $kendo-stepper-indicator-disabled-bg;
                         }
@@ -121,7 +124,7 @@
                             k-color( app-surface ),
                             $kendo-stepper-indicator-done-disabled-border
                         );
-                        
+
                         &::before {
                             background-color: $kendo-stepper-indicator-done-disabled-bg;
                         }
@@ -174,7 +177,7 @@
                             k-color( app-surface ),
                             $kendo-stepper-indicator-current-disabled-border
                         );
-                        
+
                         &::before {
                             background-color: $kendo-stepper-indicator-current-disabled-bg;
                         }

package/scss/stepper/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Stepper
 
 /// The horizontal margin the Stepper.

package/scss/switch/_index.scss

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

package/scss/switch/_layout.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-switch--layout-base() {
 
     .k-switch {
@@ -82,13 +87,13 @@
     // Switch sizes
     @each $size, $size-props in $kendo-switch-sizes {
 
-        $_font-size: k-map-get( $size-props, font-size );
-        $_track-width: k-map-get( $size-props, track-width );
-        $_track-height: k-map-get( $size-props, track-height );
-        $_thumb-width: k-map-get( $size-props, thumb-width );
-        $_thumb-height: k-map-get( $size-props, thumb-height );
-        $_thumb-offset: k-map-get( $size-props, thumb-offset );
-        $_label-offset: k-map-get( $size-props, label-offset );
+        $_font-size: map.get( $size-props, font-size );
+        $_track-width: map.get( $size-props, track-width );
+        $_track-height: map.get( $size-props, track-height );
+        $_thumb-width: map.get( $size-props, thumb-width );
+        $_thumb-height: map.get( $size-props, thumb-height );
+        $_thumb-offset: map.get( $size-props, thumb-offset );
+        $_label-offset: map.get( $size-props, label-offset );
 
         .k-switch-#{$size} {
             width: $_track-width;
@@ -109,10 +114,10 @@
             }
 
             &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( 100% - #{k-math-div( $_thumb-width, 2 )} - #{$_thumb-offset} );
+                left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
             }
             &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( #{k-math-div( $_thumb-width, 2 )} + #{$_thumb-offset} );
+                left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
             }
         }
 
@@ -130,10 +135,10 @@
             }
 
             &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( #{k-math-div( $_thumb-width, 2 )} + #{$_thumb-offset} );
+                left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
             }
             &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( 100% - #{k-math-div( $_thumb-width, 2 )} - #{$_thumb-offset} );
+                left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
             }
         }
     }

package/scss/switch/_theme.scss

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

package/scss/switch/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Switch
 
 /// The font family of the Switch.

package/scss/table/_index.scss

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

package/scss/table/_layout.scss

@@ -1,3 +1,6 @@
+@use "./_variables.scss" as *;
+@use "sass:map";
+
 @mixin kendo-table--layout-base() {
 
     // Table
@@ -221,10 +224,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-table-sizes {
-        $_font-size: k-map-get( $size-props, font-size);
-        $_line-height: k-map-get( $size-props, line-height);
-        $_cell-padding-x: k-map-get( $size-props, cell-padding-x);
-        $_cell-padding-y: k-map-get( $size-props, cell-padding-y);
+        $_font-size: map.get( $size-props, font-size);
+        $_line-height: map.get( $size-props, line-height);
+        $_cell-padding-x: map.get( $size-props, cell-padding-x);
+        $_cell-padding-y: map.get( $size-props, cell-padding-y);
 
         .k-table-#{$size} {
             font-size: $_font-size;

package/scss/table/_theme.scss

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

package/scss/table/_variables.scss

@@ -1,5 +1,6 @@
-@import "../list/_variables.scss";
-
+@use "../list/_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // Table
 

package/scss/tabstrip/_index.scss

@@ -1,47 +1,25 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "tabstrip",
-    dependencies: (
-        "button",
-        "icon",
-        "list",
-        "menu-button"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../icons/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_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-tabstrip--styles() {
-    @include module-render( "tabstrip" ) {
+    @include import-once( "tabstrip" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
         @include kendo-tabstrip--layout();
         @include kendo-tabstrip--theme();
         @include kendo-utils--layout--overflow();
         @include kendo-utils--layout--position();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-tabstrip--styles();
-}

package/scss/tabstrip/_layout.scss

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

package/scss/tabstrip/_theme.scss

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

package/scss/tabstrip/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+
 // TabStrip