@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/drawer/_variables.scss

@@ -4,16 +4,16 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: k-color(surface-alt) !default;
+$kendo-drawer-bg: var( --kendo-drawer-bg, k-color(surface-alt) ) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: k-color(on-app-surface) !default;
+$kendo-drawer-text: var( --kendo-drawer-text, k-color(on-app-surface) )!default;
 /// The border color of the Drawer.
 /// @group drawer
-$kendo-drawer-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-drawer-border: var( --kendo-drawer-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The border width of the Drawer.
 /// @group drawer
-$kendo-drawer-border-width: 1px !default;
+$kendo-drawer-border-width: var( --kendo-drawer-border-width, 1px ) !default;
 /// The font family of the Drawer.
 /// @group drawer
 $kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
@@ -26,131 +26,159 @@ $kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-x: null !default;
+$kendo-drawer-content-padding-x: var( --kendo-drawer-content-padding-x, null ) !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: null !default;
+$kendo-drawer-content-padding-y: var( --kendo-drawer-content-padding-y, null ) !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-width: 7px !default;
+$kendo-drawer-scrollbar-width: var( --kendo-drawer-scrollbar-width, 7px ) !default;
 /// The color of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-drawer-scrollbar-color: var( --kendo-drawer-scrollbar-color, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 /// The background of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: k-color(base-subtle) !default;
+$kendo-drawer-scrollbar-bg: var( --kendo-drawer-scrollbar-bg, k-color(base-subtle) ) !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-radius: 20px !default;
+$kendo-drawer-scrollbar-radius: var( --kendo-drawer-scrollbar-radius, 20px ) !default;
 /// The hover color of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: color-mix(in srgb, k-color(on-app-surface) 60%, transparent) !default;
+$kendo-drawer-scrollbar-hover-color: var( --kendo-drawer-scrollbar-hover-color color-mix(in srgb, k-color(on-app-surface) 60%, transparent) ) !default;
 
 /// The horizontal padding of the Drawer items.
 /// @group drawer
-$kendo-drawer-items-padding-x: 0 !default;
+$kendo-drawer-items-padding-x: var( --kendo-drawer-items-padding-x, 0 ) !default;
 /// The vertical padding of the Drawer items.
 /// @group drawer
-$kendo-drawer-items-padding-y: 0 !default;
+$kendo-drawer-items-padding-y: var( --kendo-drawer-items-padding-y, 0 ) !default;
 /// The horizontal padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-x: k-spacing(4) !default;
+$kendo-drawer-item-padding-x: var( --kendo-drawer-item-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: k-spacing(2) !default;
+$kendo-drawer-item-padding-y: var( --kendo-drawer-item-padding-y, k-spacing(2) ) !default;
 /// The spacing between the items in the Drawer item.
 /// @group drawer
-$kendo-drawer-item-spacing: $kendo-drawer-item-padding-x !default;
+$kendo-drawer-item-spacing: var( --kendo-drawer-item-spacing, $kendo-drawer-item-padding-x ) !default;
 /// The font size of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
+$kendo-drawer-item-font-size: var( --kendo-drawer-item-font-size, $kendo-drawer-font-size ) !default;
 /// The line height of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-drawer-item-line-height: var( --kendo-drawer-item-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 /// The font weight of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-font-weight: var( --kendo-font-weight, normal ) !default;
+$kendo-drawer-item-font-weight: var( --kendo-drawer-item-font-weight, var( --kendo-font-weight, normal ) ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
-$kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+$kendo-drawer-item-level-padding-x: var( --kendo-drawer-item-level-padding-x, $kendo-drawer-item-padding-x ) !default;
 /// The count of the Drawer item levels.
 /// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
 /// The border radius of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-border-radius: null !default;
+$kendo-drawer-item-border-radius: var( --kendo-drawer-item-border-radius, null ) !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-x: k-spacing(0) !default;
+$kendo-drawer-icon-padding-x: var( --kendo-drawer-icon-padding-x, k-spacing(0) ) !default;
 /// The vertical padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-y: k-spacing(1) !default;
+$kendo-drawer-icon-padding-y: var( --kendo-drawer-icon-padding-y, k-spacing(1) ) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-drawer-mini-initial-width: var( --kendo-drawer-mini-initial-width, calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) ) ) !default;
 
 /// The border width of the Drawer item ripple.
 /// @group drawer
 
-$kendo-drawer-item-ripple-border-width: k-spacing(0.5) !default;
+$kendo-drawer-item-ripple-border-width: var( --kendo-drawer-item-ripple-border-width, k-spacing(0.5) ) !default;
 /// The border color of the drawer item ripple
 /// @group drawer
-$kendo-drawer-item-ripple-border: k-color(primary) !default;
+$kendo-drawer-item-ripple-border: var( --kendo-drawer-item-ripple-border, k-color(primary) ) !default;
 /// The background color of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-bg: $kendo-drawer-bg !default;
+$kendo-drawer-item-bg: var( --kendo-drawer-item-bg, $kendo-drawer-bg ) !default;
 /// The text color of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-text: $kendo-drawer-text !default;
+$kendo-drawer-item-text: var( --kendo-drawer-item-text, $kendo-drawer-text ) !default;
 /// The text color of the Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-icon-text: k-color(primary) !default;
+$kendo-drawer-item-icon-text: var( --kendo-drawer-icon-text, k-color(primary) ) !default;
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-bg: $kendo-drawer-item-bg !default;
+$kendo-drawer-item-hover-bg: var( --kendo-drawer-item-hover-bg, $kendo-drawer-item-bg ) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-text: k-color(primary-hover) !default;
+$kendo-drawer-item-hover-text: var( --kendo-drawer-item-hover-text, k-color(primary-hover) ) !default;
 /// The text color of the hovered Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-hover-icon-text: k-color(primary-hover) !default;
+$kendo-drawer-item-hover-icon-text: var( --kendo-drawer-item-hover-icon-text, k-color(primary-hover) ) !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-bg: $kendo-drawer-item-bg !default;
+$kendo-drawer-item-focus-bg: var( --kendo-drawer-item-focus-bg, $kendo-drawer-item-bg ) !default;
 /// The text color of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-text: $kendo-drawer-item-text !default;
+$kendo-drawer-item-focus-text: var( --kendo-drawer-item-focus-text, $kendo-drawer-item-text ) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-shadow: inset 0 0 0 1px k-color(base-emphasis) !default;
+$kendo-drawer-item-focus-shadow: var( --kendo-drawer-item-focus-shadow, inset 0 0 0 1px k-color(base-emphasis) ) !default;
 /// The text color of the focused Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
+$kendo-drawer-item-focus-icon-text: var( --kendo-drawer-item-focus-icon-text, $kendo-drawer-item-icon-text ) !default;
 
 /// The font weight of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-drawer-item-selected-font-weight: var( --kendo-drawer-item-selected-font-weight, var( --kendo-font-weight-bold, normal ) ) !default;
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-bg: k-color(base-active) !default;
+$kendo-drawer-item-selected-bg: var( --kendo-drawer-item-selected-bg, k-color(base-active) ) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-text: k-color(on-app-surface) !default;
+$kendo-drawer-item-selected-text: var( --kendo-drawer-item-selected-text, k-color(on-app-surface) ) !default;
 /// The text color of the selected Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-selected-icon-text: k-color(primary-active) !default;
+$kendo-drawer-item-selected-icon-text: var( --kendo-drawer-item-selected-icon-text, k-color(primary-active) ) !default;
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-bg: k-color(base-subtle-active) !default;
+$kendo-drawer-item-selected-hover-bg: var( --kendo-drawer-item-selected-hover-bg, k-color(base-subtle-active) ) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-text: k-color(on-base) !default;
-/// The background color of the selected and focused Drawer item.
-/// @group drawer
-$kendo-drawer-item-selected-focus-bg: null !default;
+$kendo-drawer-item-selected-hover-text: var( --kendo-drawer-item-selected-hover-text, k-color(on-base) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (
+    $kendo-drawer-bg: $kendo-drawer-bg,
+    $kendo-drawer-text: $kendo-drawer-text,
+    $kendo-drawer-border: $kendo-drawer-border,
+    $kendo-drawer-border-width: $kendo-drawer-border-width,
+    $kendo-drawer-font-family: $kendo-drawer-font-family,
+    $kendo-drawer-font-size: $kendo-drawer-font-size,
+    $kendo-drawer-line-height: $kendo-drawer-line-height,
+    $kendo-drawer-content-padding-x: $kendo-drawer-content-padding-x,
+    $kendo-drawer-content-padding-y: $kendo-drawer-content-padding-y,
+    $kendo-drawer-scrollbar-width: $kendo-drawer-scrollbar-width,
+    $kendo-drawer-scrollbar-color: $kendo-drawer-scrollbar-color,
+    $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg,
+    $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius,
+    $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color,
+    $kendo-drawer-items-padding-x: $kendo-drawer-items-padding-x,
+    $kendo-drawer-items-padding-y: $kendo-drawer-items-padding-y,
+    $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x,
+    $kendo-drawer-item-padding-y: $kendo-drawer-item-padding-y,
+    $kendo-drawer-item-spacing: $kendo-drawer-item-spacing,
+    $kendo-drawer-item-font-size: $kendo-drawer-item-font-size,
+    $kendo-drawer-item-line-height: $kendo-drawer-item-line-height,
+    $kendo-drawer-item-font-weight: $kendo-drawer-item-font-weight,
+    $kendo-drawer-item-level-padding-x: $kendo-drawer-item-level-padding-x,
+    $kendo-drawer-item-level-count: $kendo-drawer-item-level-count,
+    $kendo-drawer-item-border-radius: $kendo-drawer-item-border-radius,
+    $kendo-drawer-icon-padding-x: $kendo-drawer-icon-padding-x,
+    $kendo-drawer-icon-padding-y: $kendo-drawer-icon-padding-y,
+    $kendo-drawer-mini-initial-width: $kendo-drawer-mini-initial-width
+);

package/scss/dropdowngrid/_layout.scss

@@ -1,13 +1,5 @@
-@mixin kendo-dropdown-grid--layout() {
-
-    // DropdownGrid
-    .k-dropdown-grid {}
+@use "@progress/kendo-theme-core/scss/components/dropdowngrid/_layout.scss" as *;
 
-    // DropdownGrid Popup
-    .k-dropdowngrid-popup {
-        overflow: hidden;
-    }
-    .k-dropdowngrid-popup > .k-data-table {
-        border-width: 0;
-    }
+@mixin kendo-dropdown-grid--layout() {
+    @include kendo-dropdown-grid--layout-base();
 }

package/scss/dropdowngrid/_theme.scss

@@ -1,5 +1,5 @@
-@mixin kendo-dropdown-grid--theme() {
+@use "@progress/kendo-theme-core/scss/components/dropdowngrid/_theme.scss" as *;
 
-    // Dropdown grid
-    .k-dropdown-grid {}
+@mixin kendo-dropdown-grid--theme() {
+    @include kendo-dropdown-grid--theme-base();
 }

package/scss/dropdownlist/_layout.scss

@@ -1,35 +1,11 @@
-@mixin kendo-dropdown-list--layout() {
-
-    // Dropdown list
-    .k-dropdown-list {}
-
-
-    // Native select
-    select.k-dropdown-list {}
+@use "@progress/kendo-theme-core/scss/components/dropdownlist/_layout.scss" as *;
 
-
-    // Dropdown operator
+@mixin kendo-dropdown-list--layout() {
+    @include kendo-dropdown-list--layout-base();
+    
     .k-dropdown-operator {
-        width: min-content;
-        flex: none;
-
         .k-input-button {
-            border-width: 0;
-        }
-        .k-input-button .k-button-icon {
             width: auto;
-            aspect-ratio: 1;
-        }
-
-        .k-input-inner {
-            display: none;
         }
     }
-
-    // Alias
-    .k-dropdown,
-    .k-dropdownlist {
-        @extend .k-dropdown-list !optional;
-    }
-
 }

package/scss/dropdownlist/_theme.scss

@@ -1,9 +1,5 @@
-@mixin kendo-dropdown-list--theme() {
-
-    // Dropdown list
-    .k-dropdown-list {}
-
-    // Native select
-    select.k-dropdown-list {}
+@use "@progress/kendo-theme-core/scss/components/dropdownlist/_theme.scss" as *;
 
+@mixin kendo-dropdown-list--theme() {
+    @include kendo-dropdown-list--theme-base();
 }

package/scss/dropdowntree/_layout.scss

@@ -1,40 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dropdowntree/_layout.scss" as *;
 
 @mixin kendo-dropdown-tree--layout() {
-
-    // Dropdown tree
-    .k-dropdown-tree {}
-
-    // Dropdowntree popup
-    .k-popup-dropdowntree, // remove legacy class once updated in components
-    .k-dropdowntree-popup,
-    .k-multiselecttree-popup {
-        .k-treeview {
-            padding-block: calc( var( --kendo-dropdowntree-popup-padding-y, #{$kendo-dropdowntree-popup-padding-y} ) / 2 );
-            padding-inline: calc( var( --kendo-dropdowntree-popup-padding-x, #{$kendo-dropdowntree-popup-padding-x} ) / 2 );
-        }
-
-        .k-check-all {
-            padding-block: var( --kendo-dropdowntree-popup-padding-y, #{$kendo-dropdowntree-popup-padding-y} );
-            padding-inline: var( --kendo-dropdowntree-popup-padding-x, #{$kendo-dropdowntree-popup-padding-x} );
-        }
-    }
-
-    .k-multiselecttree {
-        .k-input-values {
-            width: auto;
-            max-width: 100%;
-        }
-
-        .k-input-inner::before {
-            content: "\200b";
-            width: 0px;
-            overflow: hidden;
-            flex: none;
-            display: inline-block;
-            vertical-align: top;
-        }
-    }
-
+    @include kendo-dropdown-tree--layout-base();
 }

package/scss/dropdowntree/_theme.scss

@@ -1,6 +1,5 @@
-@mixin kendo-dropdown-tree--theme() {
-
-    // Dropdown tree
-    .k-dropdown-tree {}
+@use "@progress/kendo-theme-core/scss/components/dropdowntree/_theme.scss" as *;
 
+@mixin kendo-dropdown-tree--theme() {
+    @include kendo-dropdown-tree--theme-base();
 }

package/scss/dropdowntree/_variables.scss

@@ -9,6 +9,7 @@ $kendo-dropdowntree-popup-padding-x: $kendo-popup-content-padding-x !default;
 /// @group dropdowntree
 $kendo-dropdowntree-popup-padding-y: $kendo-popup-content-padding-y !default;
 
-/// The padding of the check-all CheckBox inside the DropDownTree popup
-/// @group dropdowntree
-$kendo-dropdowntree-check-all-padding: k-spacing(1) !default;
+@forward "@progress/kendo-theme-core/scss/components/dropdowntree/_variables.scss" with (
+    $kendo-dropdowntree-popup-padding-x: $kendo-dropdowntree-popup-padding-x,
+    $kendo-dropdowntree-popup-padding-y: $kendo-dropdowntree-popup-padding-y
+);

package/scss/dropzone/_layout.scss

@@ -1,46 +1,22 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dropzone/_layout.scss" as *;
 
 @mixin kendo-dropzone--layout() {
+    @include kendo-dropzone--layout-base();
 
-    // Dropzone
-    .k-external-dropzone {
-        height: var( --kendo-dropzone-min-height, #{$kendo-dropzone-min-height} );
-        display: flex;
-        flex-flow: row nowrap;
-    }
-
-    // Dropzone inner
     .k-dropzone-inner {
-        padding-inline: var( --kendo-dropzone-padding-x, #{$kendo-dropzone-padding-x} );
-        padding-block: var( --kendo-dropzone-padding-y, #{$kendo-dropzone-padding-y} );
-        border-width: var( --kendo-dropzone-border-width, #{$kendo-dropzone-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        font-size: var( --kendo-dropzone-font-size, #{$kendo-dropzone-font-size} );
-        font-family: var( --kendo-dropzone-font-family, #{$kendo-dropzone-font-family} );
-        line-height: var( --kendo-dropzone-line-height, #{$kendo-dropzone-line-height} );
-        flex: 1 1 auto;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-
         .k-dropzone-icon {
-            margin-block-end: var( --kendo-dropzone-icon-spacing, #{$kendo-dropzone-icon-spacing} );
+            margin-block-end: $kendo-dropzone-icon-spacing;
         }
 
         .k-dropzone-hint {
-            margin-block-end: var( --kendo-dropzone-hint-spacing, #{$kendo-dropzone-hint-spacing} );
-            font-size: var( --kendo-dropzone-hint-font-size, #{$kendo-dropzone-hint-font-size} );
-            font-weight: var( --kendo-dropzone-hint-font-weight, #{$kendo-dropzone-hint-font-weight} );
+            margin-block-end: $kendo-dropzone-hint-spacing;
+            font-weight: $kendo-dropzone-hint-font-weight;
         }
 
         .k-dropzone-note {
-            margin-block-end: var( --kendo-dropzone-note-spacing, #{$kendo-dropzone-note-spacing} );
-            font-size: var( --kendo-dropzone-note-font-size, #{$kendo-dropzone-note-font-size} );
-            font-weight: var( --kendo-dropzone-note-font-weight, #{$kendo-dropzone-note-font-weight} );
+            margin-block-end: $kendo-dropzone-note-spacing;
+            font-weight: $kendo-dropzone-note-font-weight;
         }
     }
-
 }

package/scss/dropzone/_theme.scss

@@ -1,35 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dropzone/_theme.scss" as *;
 
 @mixin kendo-dropzone--theme() {
-
-    // Dropzone
-    .k-dropzone-inner {
-        @include fill(
-            var( --kendo-dropzone-text, #{$kendo-dropzone-text} ),
-            var( --kendo-dropzone-bg, #{$kendo-dropzone-bg} ),
-            var( --kendo-dropzone-border, #{$kendo-dropzone-border} )
-        );
-
-        .k-icon,
-        .k-dropzone-icon {
-            color: var( --kendo-dropzone-icon-text, #{$kendo-dropzone-icon-text} );
-        }
-        .k-dropzone-hint {
-            color: var( --kendo-dropzone-hint-text, #{$kendo-dropzone-hint-text} );
-        }
-        .k-dropzone-note {
-            color: var( --kendo-dropzone-note-text, #{$kendo-dropzone-note-text} );
-        }
-    }
-
-
-    // Hover
-    .k-external-dropzone-hover {
-        .k-icon,
-        .k-dropzone-icon {
-            color: var( --kendo-dropzone-icon-hover-text, #{$kendo-dropzone-icon-hover-text} );
-        }
-    }
-
+    @include kendo-dropzone--theme-base();
 }

package/scss/dropzone/_variables.scss

@@ -3,69 +3,91 @@
 
 /// The horizontal padding of the DropZone.
 /// @group dropzone
-$kendo-dropzone-padding-x: k-spacing(2) !default;
+$kendo-dropzone-padding-x: var( --kendo-dropzone-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the DropZone.
 /// @group dropzone
-$kendo-dropzone-padding-y: k-spacing(2) !default;
+$kendo-dropzone-padding-y: var( --kendo-dropzone-padding-y, #{k-spacing(2)} ) !default;
 /// The border width of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border-width: 1px !default;
+$kendo-dropzone-border-width: var( --kendo-dropzone-border-width, 1px ) !default;
 /// The minimum height of the DropZone.
 /// @group dropzone
-$kendo-dropzone-min-height: 220px !default;
+$kendo-dropzone-min-height: var( --kendo-dropzone-min-height, 220px ) !default;
 
 /// The font family of the DropZone.
 /// @group dropzone
-$kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-dropzone-font-family: var( --kendo-dropzone-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the DropZone.
 /// @group dropzone
-$kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-dropzone-font-size: var( --kendo-dropzone-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the DropZone.
 /// @group dropzone
-$kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-dropzone-line-height: var( --kendo-dropzone-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: k-color(surface) !default;
+$kendo-dropzone-bg: var( --kendo-dropzone-bg, #{k-color(surface)} ) !default;
 /// Text color of the dropzone.
 /// @group dropzone
-$kendo-dropzone-text: k-color(on-app-surface) !default;
+$kendo-dropzone-text: var( --kendo-dropzone-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-dropzone-border: var( --kendo-dropzone-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The spacing below the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-spacing: k-spacing(6) !default;
+$kendo-dropzone-icon-spacing: var( --kendo-dropzone-icon-spacing, #{k-spacing(6)} ) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: k-color(subtle) !default;
+$kendo-dropzone-icon-text: var( --kendo-dropzone-icon-text, #{k-color(subtle)} ) !default;
 /// Text color of the icon when the dropzone is hovered.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: k-color(primary) !default;
+$kendo-dropzone-icon-hover-text: var( --kendo-dropzone-icon-hover-text, #{k-color(primary)} ) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-font-size: inherit !default;
+$kendo-dropzone-hint-font-size: var( --kendo-dropzone-hint-font-size, inherit ) !default;
 /// The font weight of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+$kendo-dropzone-hint-font-weight: var( --kendo-dropzone-hint-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
 /// The spacing below the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-spacing: k-spacing(2) !default;
+$kendo-dropzone-hint-spacing: var( --kendo-dropzone-hint-spacing, #{k-spacing(2)} ) !default;
 /// The text color of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-text: $kendo-dropzone-text !default;
+$kendo-dropzone-hint-text: var( --kendo-dropzone-hint-text, #{$kendo-dropzone-text} ) !default;
 
 /// The font size of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-dropzone-note-font-size: var( --kendo-dropzone-note-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The font weight of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-font-weight: inherit !default;
+$kendo-dropzone-note-font-weight: var( --kendo-dropzone-note-font-weight, inherit ) !default;
 /// The spacing below the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-spacing: k-spacing(0) !default;
+$kendo-dropzone-note-spacing: var( --kendo-dropzone-note-spacing, #{k-spacing(0)} ) !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: k-color(subtle) !default;
+$kendo-dropzone-note-text: var( --kendo-dropzone-note-text, #{k-color(subtle)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dropzone/variables" with (
+    $kendo-dropzone-padding-x: $kendo-dropzone-padding-x,
+    $kendo-dropzone-padding-y: $kendo-dropzone-padding-y,
+    $kendo-dropzone-border-width: $kendo-dropzone-border-width,
+    $kendo-dropzone-min-height: $kendo-dropzone-min-height,
+    $kendo-dropzone-font-family: $kendo-dropzone-font-family,
+    $kendo-dropzone-font-size: $kendo-dropzone-font-size,
+    $kendo-dropzone-line-height: $kendo-dropzone-line-height,
+    $kendo-dropzone-bg: $kendo-dropzone-bg,
+    $kendo-dropzone-text: $kendo-dropzone-text,
+    $kendo-dropzone-border: $kendo-dropzone-border,
+    $kendo-dropzone-icon-spacing: $kendo-dropzone-icon-spacing,
+    $kendo-dropzone-icon-text: $kendo-dropzone-icon-text,
+    $kendo-dropzone-icon-hover-text: $kendo-dropzone-icon-hover-text,
+    $kendo-dropzone-hint-font-size: $kendo-dropzone-hint-font-size,
+    $kendo-dropzone-hint-spacing: $kendo-dropzone-hint-spacing,
+    $kendo-dropzone-hint-text: $kendo-dropzone-hint-text,
+    $kendo-dropzone-note-font-size: $kendo-dropzone-note-font-size,
+    $kendo-dropzone-note-spacing: $kendo-dropzone-note-spacing,
+    $kendo-dropzone-note-text: $kendo-dropzone-note-text
+);