@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/dataviz/index.scss

@@ -10,9 +10,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/dateinput/index.scss

@@ -7,9 +7,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/datepicker/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
  );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/daterangepicker/_layout.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 @use "../core/" as *;
 @use "../input/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-daterangepicker--layout() {
 
@@ -10,7 +11,7 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-end;
-        gap: map-get( $kendo-spacing, 2 );
+        gap: map.get( $kendo-spacing, 2 );
 
         *,
         *::before,

package/scss/daterangepicker/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/datetimepicker/_layout.scss

@@ -1,5 +1,5 @@
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 @use "../action-buttons/_variables.scss" as *;
 
 @mixin kendo-datetimepicker--layout() {

package/scss/datetimepicker/index.scss

@@ -13,9 +13,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/dialog/_layout.scss

@@ -1,7 +1,7 @@
 
-@use "../core/mixins" as *;
+@use "../core/" as *;
 @use "../window/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-dialog--layout() {
 
@@ -48,8 +48,13 @@
         padding-block: var( --kendo-dialog-titlebar-padding-y, #{$kendo-dialog-titlebar-padding-y} );
     }
 
+    .k-dialog-content {
+        padding-inline: var( --kendo-dialog-inner-padding-x, #{$kendo-dialog-inner-padding-x} );
+        padding-block: var( --kendo-dialog-inner-padding-y, #{$kendo-dialog-inner-padding-y} );
+    }
+
     // Buttons
-    .k-dialog-buttongroup {
+    .k-dialog-actions {
         @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
         padding-inline: var( --kendo-dialog-buttongroup-padding-x, #{$kendo-dialog-buttongroup-padding-x} );
         padding-block: var( --kendo-dialog-buttongroup-padding-y, #{$kendo-dialog-buttongroup-padding-y} );
@@ -64,7 +69,7 @@
         overflow: hidden;
     }
 
-    .k-dialog-content +  .k-dialog-buttongroup {
+    .k-dialog-content + .k-dialog-actions {
         padding-block-start: 0;
     }
 

package/scss/dialog/_theme.scss

@@ -1,5 +1,6 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-dialog--theme() {
 
@@ -8,14 +9,33 @@
     }
 
     // Title
-    .k-dialog-title {
+    .k-dialog-titlebar {
         @include fill(
-            var( --kendo-dialog-titlebar-text, #{$kendo-dialog-titlebar-text} ),
-            var( --kendo-dialog-titlebar-bg, #{$kendo-dialog-titlebar-bg} ),
-            var( --kendo-dialog-titlebar-border, #{$kendo-dialog-titlebar-border} ),
+            $bg: var( --kendo-dialog-titlebar-bg, #{$kendo-dialog-titlebar-bg} ),
+            $border: var( --kendo-dialog-titlebar-border, #{$kendo-dialog-titlebar-border} ),
         );
 
         @include box-shadow(none);
     }
 
+    .k-dialog-title {
+        color: var( --kendo-dialog-titlebar-text, #{$kendo-dialog-titlebar-text} );
+    }
+
+    // dialog theme colors
+    @each $theme-color, $color-props in $kendo-dialog-theme-colors {
+
+        $_text: map.get( $color-props, text );
+        $_bg: map.get( $color-props, bg );
+        $_border: map.get( $color-props, border );
+
+        .k-dialog-#{$theme-color} .k-dialog-titlebar {
+            color: var( --kendo-dialog-titlebar-text, #{$kendo-dialog-titlebar-text} );
+
+            --kendo-dialog-titlebar-text: var( --kendo-dialog-#{$theme-color}-text, #{$_text} );
+            --kendo-dialog-titlebar-bg: var( --kendo-dialog-#{$theme-color}-bg, #{$_bg} );
+            --kendo-dialog-titlebar-border: var( --kendo-dialog-#{$theme-color}-border, #{$_border} );
+        }
+    }
+
 }

package/scss/dialog/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Width of the border around the dialog.
 /// @group dialog
@@ -10,37 +10,88 @@ $kendo-dialog-border-width: 0 !default;
 $kendo-dialog-titlebar-bg: var( --kendo-component-bg, initial ) !default;
 /// The text color of the dialog title bar.
 /// @group dialog
-$kendo-dialog-titlebar-text: var( --kendo-component-text, initial )  !default;
+$kendo-dialog-titlebar-text: var( --kendo-component-text, initial ) !default;
 /// The border color of the dialog title bar.
 /// @group dialog
-$kendo-dialog-titlebar-border: var( --kendo-component-border, initial )  !default;
+$kendo-dialog-titlebar-border: var( --kendo-component-border, initial ) !default;
 /// Width of the border around the dialog title bar.
 /// @group dialog
 $kendo-dialog-titlebar-border-width: 0 !default;
 /// Horizontal padding of the dialog title bar.
 /// @group dialog
-$kendo-dialog-titlebar-padding-x: map-get( $kendo-spacing, 6 ) !default;
+$kendo-dialog-titlebar-padding-x: map.get( $kendo-spacing, 6 ) !default;
 /// Vertical padding of the dialog title bar.
 /// @group dialog
-$kendo-dialog-titlebar-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-dialog-titlebar-padding-y: map.get( $kendo-spacing, 4 ) !default;
+
+/// Horizontal padding of the content of the dialog.
+/// @group dialog
+$kendo-dialog-inner-padding-x: map.get( $kendo-spacing, 6 ) !default;
+/// Vertical padding of the content of the dialog.
+/// @group dialog
+$kendo-dialog-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-x: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+$kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-x
 /// Vertical padding of the dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+$kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-y
 /// Width of the top border of the dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 0 !default;
 /// Spacing between the action buttons of the dialog.
 /// @group dialog
-$kendo-dialog-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default;
+$kendo-dialog-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
 
 /// Spacing between the buttons in the header of the dialog.
 /// @group dialog
-$kendo-dialog-button-spacing: map-get( $kendo-spacing, 2 ) !default; // $actions-padding-y
+$kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $actions-padding-y
 
 /// Box shadow around the dialog.
 /// @group dialog
 $kendo-dialog-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+
+/// Theme variations for the dialog.
+$kendo-dialog-brand-colors: (
+    primary: primary
+ ) !default;
+
+// Matrix with dialog theme colors in the order: bg, color, border
+$_tc-dialog-matrix: (
+    (normal: (100, $kendo-color-white, 100)),
+) !default;
+
+$_tc-dialog-dark-matrix: (
+    (normal: (160, $kendo-color-white, 160)),
+) !default;
+
+$_tc-dialog-light-matrix: (
+    (normal: (50, 160, 50)),
+) !default;
+
+/// Theme colors map for the dialog variations.
+$kendo-dialog-theme-colors: () !default;
+
+@each $ui-states in $_tc-dialog-matrix {
+    @each $brand-color, $palette in $kendo-dialog-brand-colors {
+        $kendo-dialog-theme-colors: map.deep-merge(
+            $kendo-dialog-theme-colors,
+            generate-theme-variation( $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $ui-states in $_tc-dialog-dark-matrix {
+    $kendo-dialog-theme-colors: map.deep-merge(
+        $kendo-dialog-theme-colors,
+        generate-theme-variation( dark, neutral, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-dialog-light-matrix {
+    $kendo-dialog-theme-colors: map.deep-merge(
+        $kendo-dialog-theme-colors,
+        generate-theme-variation( light, neutral, $ui-states )
+    );
+}

package/scss/dialog/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/draggable/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 .k-drag-clue {
     @include border-radius( var( --kendo-drag-clue-border-radius, #{$kendo-drag-clue-border-radius} ) );

package/scss/draggable/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 .k-drag-clue {
     @include fill(

package/scss/draggable/_variables.scss

@@ -1,6 +1,5 @@
 @use "sass:math";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Borer radius of the drag clue.
 /// @group draggable
@@ -13,10 +12,10 @@ $kendo-drag-clue-border-width: 0px !default;
 $kendo-drag-clue-border-style: solid !default;
 /// Horizontal padding of the drag clue.
 /// @group draggable
-$kendo-drag-clue-padding-x: $kendo-padding-x-lg !default;
+$kendo-drag-clue-padding-x: $kendo-padding-lg-x !default;
 /// Vertical padding of the drag clue.
 /// @group draggable
-$kendo-drag-clue-padding-y: $kendo-padding-y-lg !default;
+$kendo-drag-clue-padding-y: $kendo-padding-lg-y !default;
 /// Font family of the drag clue.
 /// @group draggable
 $kendo-drag-clue-font-family: var( --kendo-font-family, inherit ) !default;

package/scss/draggable/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/drawer/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-drawer--layout() {
 
@@ -28,7 +28,7 @@
         transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -130,6 +130,7 @@
         flex-direction: column;
         align-items: stretch;
     }
+
     .k-drawer-item {
         padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
         padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
@@ -141,6 +142,7 @@
         display: flex;
         align-items: center;
         flex-flow: row nowrap;
+        gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
         cursor: pointer;
 
         &::before {
@@ -178,11 +180,10 @@
             display: flex;
             flex-flow: row nowrap;
             flex: 1 0 auto;
+            gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
         }
 
         .k-icon {
-            margin-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
-            margin-block: 0;
             height: auto;
             font-size: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
             line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
@@ -194,8 +195,6 @@
         }
 
         .k-item-text {
-            padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
-            padding-block: 0;
             display: inline-block;
             white-space: nowrap;
             overflow: hidden;
@@ -215,12 +214,13 @@
         .k-drawer-toggle {
             margin-inline-start: auto;
             cursor: pointer;
+            display: flex;
         }
 
         // Hierarchy items
         @for $i from 1 through $kendo-drawer-item-level-count {
             &.k-level-#{$i} {
-                padding-inline-start: calc( var( --kendo-drawer-item-level-padding-x, #{$kendo-drawer-item-level-padding-x} ) * $i );
+                padding-inline-start: calc( ( $i + 1 ) * var( --kendo-drawer-item-level-padding-x, #{$kendo-drawer-item-level-padding-x} ) );
             }
         }
     }

package/scss/drawer/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-drawer--theme() {
 

package/scss/drawer/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Background color of the drawer.
 /// @group drawer
@@ -24,17 +24,10 @@ $kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
 /// Horizontal padding of the drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-x: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+$kendo-drawer-content-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
 /// Vertical padding of the drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-y} ) !default;
-/// Horizontal padding of the drawer item in each level.
-/// @group drawer
-$kendo-drawer-item-level-padding-x: map-get( $kendo-spacing, 4 ) !default;
-
-/// Count of the drawer item levels.
-/// @group drawer
-$kendo-drawer-item-level-count: 5 !default;
+$kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y} ) !default;
 
 /// Scrollbar width of the drawer.
 /// @group drawer
@@ -54,27 +47,35 @@ $kendo-drawer-scrollbar-hover-color: get-theme-color-var( neutral-110 ) !default
 
 /// Horizontal padding of the drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+$kendo-drawer-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of the drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+$kendo-drawer-item-padding-y: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
 /// Font size of the drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
 /// Line height of the drawer item.
 /// @group drawer
 $kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+/// Horizontal padding of the drawer item in each level.
+/// @group drawer
+$kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+/// Count of the drawer item levels.
+/// @group drawer
+$kendo-drawer-item-level-count: 5 !default;
+
 /// Icon size of the drawer item.
 /// @group drawer
 $kendo-drawer-icon-size: var( --kendo-icon-size, 1rem ) !default;
 
 /// Initial width of the mini drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc( 4 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size} ) !default;
+$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size} ) !default;
 
 /// The border width of the drawer item ripple
 /// @group drawer
-$kendo-drawer-item-ripple-border-width: map-get( $kendo-spacing, thin ) !default;
+$kendo-drawer-item-ripple-border-width: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// The border color of the drawer item ripple
 /// @group drawer
 $kendo-drawer-item-ripple-border: get-theme-color-var( primary-100 ) !default;
@@ -119,7 +120,7 @@ $kendo-drawer-item-selected-font-weight: var( --kendo-font-weight-bold, normal )
 $kendo-drawer-item-selected-bg: var( --kendo-selected-bg, initial ) !default;
 /// Text color of the selected drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-text: $black !default;
+$kendo-drawer-item-selected-text: $kendo-color-black !default;
 /// Text color of the selected drawer item icon.
 /// @group drawer
 $kendo-drawer-item-selected-icon-text: get-theme-color-var( primary-120 ) !default;

package/scss/drawer/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/dropdowngrid/index.scss

@@ -15,9 +15,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/dropdownlist/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/dropdowntree/_layout.scss

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

package/scss/dropdowntree/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/dropzone/_layout.scss

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

package/scss/dropzone/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-dropzone--theme() {
 

package/scss/dropzone/_variables.scss

@@ -1,13 +1,13 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../icon/_variables.scss" as *;
 
 /// Horizontal padding of the dropzone.
 /// @group dropzone
-$kendo-dropzone-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the dropzone.
 /// @group dropzone
-$kendo-dropzone-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Border width of the dropzone.
 /// @group dropzone
 $kendo-dropzone-border-width: 1px !default;
@@ -40,7 +40,7 @@ $kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
 $kendo-dropzone-icon-size: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
 /// Spacing below the icon.
 /// @group dropzone
-$kendo-dropzone-icon-spacing: map-get( $kendo-spacing, 6 ) !default;
+$kendo-dropzone-icon-spacing: map.get( $kendo-spacing, 6 ) !default;
 /// Text color of the icon.
 /// @group dropzone
 $kendo-dropzone-icon-text: get-theme-color-var( neutral-90 ) !default;
@@ -56,7 +56,7 @@ $kendo-dropzone-hint-font-size: inherit !default;
 $kendo-dropzone-hint-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 /// Spacing below the hint.
 /// @group dropzone
-$kendo-dropzone-hint-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-dropzone-hint-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// Text color of the hint.
 /// @group dropzone
 $kendo-dropzone-hint-text: $kendo-dropzone-text !default;

package/scss/dropzone/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;