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

package/scss/grid/_index.scss

@@ -1,78 +1,60 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "grid",
-    dependencies: (
-        "action-buttons",
-        "autocomplete",
-        "badge",
-        "button",
-        "checkbox",
-        "chip",
-        "date-time-picker",
-        "dialog",
-        "dropdown-list",
-        "icon",
-        "input",
-        "list",
-        "menu",
-        "numeric-textbox",
-        "pager",
-        "progressbar",
-        "radio",
-        "skeleton",
-        "table",
-        "tabstrip",
-        "textbox",
-        "toolbar",
-        "validator",
-    )
-);
-
-
 // Dependencies
-@import "../adaptive/_index.scss";
-@import "../progressbar/_index.scss";
-@import "../button/_index.scss";
-@import "../action-buttons/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../input/_index.scss";
-@import "../textbox/_index.scss";
-@import "../checkbox/_index.scss";
-@import "../radio/_index.scss";
-@import "../validator/_index.scss";
-@import "../autocomplete/_index.scss";
-@import "../datetimepicker/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../menu/_index.scss";
-@import "../dialog/_index.scss";
-@import "../pager/_index.scss";
-@import "../chip/_index.scss";
-@import "../skeleton/_index.scss";
-@import "../list/_index.scss";
-@import "../table/_index.scss";
-@import "../tabstrip/_index.scss";
-
+@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
-@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-grid--styles() {
-    @include module-render( "grid" ) {
+    @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();
@@ -80,7 +62,3 @@ $_kendo-module-meta: (
         @include kendo-utils--layout--display();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-grid--styles();
-}

package/scss/grid/_layout.scss

@@ -1,3 +1,17 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:list";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../chip/_variables.scss" as *;
+@use "../forms/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../tabstrip/_variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 @mixin kendo-grid--layout-base() {
 
     // Grid
@@ -278,8 +292,8 @@
         }
 
         .k-grouping-row .k-icon {
-            margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
-            margin-inline-end: k-math-div( $kendo-icon-size, 2 );
+            margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: math.div( $kendo-icon-size, 2 );
             text-decoration: none;
         }
 
@@ -443,7 +457,7 @@
             width: $kendo-grid-group-drop-hint-line-size;
             height: calc(100% - #{$kendo-grid-group-drop-hint-size});
             top: $kendo-grid-group-drop-hint-size;
-            inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{k-math-div( $kendo-grid-group-drop-hint-line-size, 2 )} );
+            inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{math.div( $kendo-grid-group-drop-hint-line-size, 2 )} );
         }
     }
 
@@ -901,22 +915,22 @@
 
     // Grid Sizes
     @each $size, $size-props in $kendo-grid-sizes {
-        $_header-padding-x: k-map-get( $size-props, header-padding-x );
-        $_header-padding-y: k-map-get( $size-props, header-padding-y );
-        $_grouping-header-padding-x: k-map-get( $size-props, grouping-header-padding-x );
-        $_grouping-header-padding-y: k-map-get( $size-props, grouping-header-padding-y );
-        $_cell-padding-x: k-map-get( $size-props, cell-padding-x );
-        $_cell-padding-y: k-map-get( $size-props, cell-padding-y );
-        $_filter-cell-padding-x: k-map-get( $size-props, filter-cell-padding-x );
-        $_filter-cell-padding-y: k-map-get( $size-props, filter-cell-padding-y );
-        $_edit-cell-padding-x: k-map-get( $size-props, edit-cell-padding-x );
-        $_edit-cell-padding-y: k-map-get( $size-props, edit-cell-padding-y );
-        $_button-padding-y: k-map-get( $size-props, button-padding-y );
-        $_button-calc-size: k-map-get( $size-props, button-calc-size );
-        $_button-line-height: k-map-get( $size-props, button-line-height );
-        $_group-dropclue-height: k-map-get( $size-props, group-dropclue-height );
-        $_selection-aggregates-padding-x: k-map-get( $size-props, selection-aggregates-padding-x );
-        $_selection-aggregates-padding-y: k-map-get( $size-props, selection-aggregates-padding-y );
+        $_header-padding-x: map.get( $size-props, header-padding-x );
+        $_header-padding-y: map.get( $size-props, header-padding-y );
+        $_grouping-header-padding-x: map.get( $size-props, grouping-header-padding-x );
+        $_grouping-header-padding-y: map.get( $size-props, grouping-header-padding-y );
+        $_cell-padding-x: map.get( $size-props, cell-padding-x );
+        $_cell-padding-y: map.get( $size-props, cell-padding-y );
+        $_filter-cell-padding-x: map.get( $size-props, filter-cell-padding-x );
+        $_filter-cell-padding-y: map.get( $size-props, filter-cell-padding-y );
+        $_edit-cell-padding-x: map.get( $size-props, edit-cell-padding-x );
+        $_edit-cell-padding-y: map.get( $size-props, edit-cell-padding-y );
+        $_button-padding-y: map.get( $size-props, button-padding-y );
+        $_button-calc-size: map.get( $size-props, button-calc-size );
+        $_button-line-height: map.get( $size-props, button-line-height );
+        $_group-dropclue-height: map.get( $size-props, group-dropclue-height );
+        $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
+        $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
 
         .k-grid .k-grid-#{$size},
         .k-grid-#{$size} {
@@ -957,7 +971,7 @@
                     width: $_button-calc-size;
                     height: $_button-calc-size;
                     line-height: $_button-line-height;
-                    bottom: calc( #{$_header-padding-y} + #{k-math-div( $kendo-line-height-em, 2)} - #{k-math-div( $kendo-button-inner-calc-size, 2 )} );
+                    bottom: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
                 }
             }
 
@@ -974,7 +988,7 @@
             }
 
             .k-grouping-row .k-icon {
-                margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
+                margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
             }
 
             .k-grouping-dropclue {

package/scss/grid/_theme.scss

@@ -1,3 +1,9 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+
 @mixin kendo-grid--theme-base() {
 
     .k-grid-header,

package/scss/grid/_variables.scss

@@ -1,3 +1,14 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "../table/_variables.scss" as *;
+@use "../chip/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "../menu/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+
 // Grid
 $kendo-grid-border-width: 1px !default;
 $kendo-grid-font-family: var( --kendo-font-family, inherit ) !default;
@@ -47,7 +58,7 @@ $kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
 $kendo-grid-edit-cell-padding-y: calc( #{k-spacing(1.5)} / 2 ) !default;
 
 $kendo-grid-group-drop-hint-size: 6px !default;
-$kendo-grid-group-drop-hint-line-size: k-math-div( $kendo-grid-group-drop-hint-size, 3 ) !default;
+$kendo-grid-group-drop-hint-line-size: math.div( $kendo-grid-group-drop-hint-size, 3 ) !default;
 $kendo-grid-group-drop-hint-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
 $kendo-grid-group-drop-hint-top: 3px !default;
 
@@ -221,7 +232,7 @@ $kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, nor
 $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
-$kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
+$kendo-grid-sorted-icon-spacing: calc( #{k-spacing(2)} - 1px ) !default;
 $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;

package/scss/icons/_index.scss

@@ -1,29 +1,16 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "icon",
-    dependencies: ()
-);
-
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_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-icon--styles() {
-    @include module-render( "icon" ) {
+    @include import-once( "icon" ) {
+        @include core-styles();
         @include kendo-icon--layout();
         @include kendo-icon--theme();
         @include kendo-utils--transform--rotate();
@@ -31,7 +18,3 @@ $_kendo-module-meta: (
         @include kendo-utils--typography--text-color();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-icon--styles();
-}

package/scss/icons/_layout.scss

@@ -1,7 +1,8 @@
-$ki-embed-font: false;
-$ki-icon-size: $kendo-icon-size;
+@use "./_variables.scss" as *;
 
-@import "@progress/kendo-svg-icons/scss/index.scss";
+@use "@progress/kendo-svg-icons/scss/index.scss" as * with (
+    $ki-icon-size: $kendo-icon-size
+);
 
 @mixin kendo-icon--layout-base() {
 

package/scss/icons/_variables.scss

@@ -0,0 +1,32 @@
+@use "../core/_index.scss" as *;
+
+/// The default size icon size.
+/// @group icon
+$kendo-icon-size: 16px !default;
+/// The extra small icon size.
+/// @group icon
+$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+/// The small icon size.
+/// @group icon
+$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+/// The medium icon size.
+/// @group icon
+$kendo-icon-size-md: $kendo-icon-size !default;
+/// The large icon size.
+/// @group icon
+$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+/// The extra large icon size.
+/// @group icon
+$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+/// The double extra large icon size.
+/// @group icon
+$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+/// The triple extra large icon size.
+/// @group icon
+$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
+/// The default icon spacing.
+/// @group icon
+$kendo-icon-spacing: k-spacing(1) !default;
+/// The default icon padding.
+/// @group icon
+$kendo-icon-padding: k-spacing(1) !default;

package/scss/imageeditor/_index.scss

@@ -1,47 +1,26 @@
-@import "../core/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "image-editor",
-    dependencies: (
-        "checkbox",
-        "dropdown-list",
-        "form",
-        "numeric-textbox",
-        "toolbar"
-    )
-);
-
-
 // Dependencies
-@import "../toolbar/_index.scss";
-@import "../forms/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../checkbox/_index.scss";
-
+@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
-@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-image-editor--styles() {
-    @include module-render( "image-editor" ) {
+    @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();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-image-editor--styles();
-}

package/scss/imageeditor/_layout.scss

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+
 @mixin kendo-image-editor--layout-base() {
 
     // Image Editor
@@ -110,14 +115,14 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - (#{k-math-div( $kendo-image-editor-resize-handle-size, 2 )}) );
+            left: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) );
             width: $kendo-image-editor-resize-handle-size;
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - (#{k-math-div( $kendo-image-editor-resize-handle-size, 2 )}) );
+            top: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) );
             width: 0;
             height: $kendo-image-editor-resize-handle-size;
         }

package/scss/imageeditor/_theme.scss

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

package/scss/imageeditor/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // ImageEditor
 $kendo-image-editor-margin-y: null !default;
 $kendo-image-editor-margin-x: null !default;