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

package/scss/fab/_variables.scss

@@ -5,128 +5,135 @@
 
 /// The width of the border around the FAB.
 /// @group floating-action-button
-$kendo-fab-border-width: 1px !default;
+$kendo-fab-border-width: var( --kendo-fab-border-width, 1px ) !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: k-border-radius(md) !default;
+$kendo-fab-border-radius: var( --kendo-fab-border-radius, #{k-border-radius(md)} ) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-fab-font-family: var( --kendo-fab-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-fab-font-size: var( --kendo-fab-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the FAB.
 /// @group floating-action-button
-$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-fab-line-height: var( --kendo-fab-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: k-spacing(4) !default;
+$kendo-fab-padding-x: var( --kendo-fab-padding-x, #{k-spacing(4)} ) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
+$kendo-fab-sm-padding-x: var( --kendo-fab-sm-padding-x, calc( #{$kendo-fab-padding-x} / 2 ) ) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
-$kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
+$kendo-fab-md-padding-x: var( --kendo-fab-md-padding-x, #{$kendo-fab-padding-x} ) !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;
+$kendo-fab-lg-padding-x: var( --kendo-fab-lg-padding-x, calc( #{$kendo-fab-padding-x} * 1.5 ) ) !default;
 
 /// The vertical padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y: var( --kendo-fab-padding-y, #{$kendo-fab-padding-x} ) !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
+$kendo-fab-sm-padding-y: var( --kendo-fab-sm-padding-y, calc( #{$kendo-fab-padding-y} / 2 ) ) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
-$kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
+$kendo-fab-md-padding-y: var( --kendo-fab-md-padding-y, #{$kendo-fab-padding-y} ) !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;
+$kendo-fab-lg-padding-y: var( --kendo-fab-lg-padding-y, calc( #{$kendo-fab-padding-y} * 1.5 ) ) !default;
 
 /// The offset of the focused FAB.
 /// @group floating-action-button
-$kendo-fab-focus-offset: $kendo-button-focus-offset !default;
+$kendo-fab-focus-offset: var( --kendo-fab-focus-offset, #{$kendo-button-focus-offset} ) !default;
 /// The outline width of the focused FAB.
 /// @group floating-action-button
-$kendo-fab-focus-outline-width: $kendo-button-focus-outline-width !default;
+$kendo-fab-focus-outline-width: var( --kendo-fab-focus-outline-width, #{$kendo-button-focus-outline-width} ) !default;
 /// The outline style of the focused FAB.
 /// @group floating-action-button
-$kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
+$kendo-fab-focus-outline-style: var( --kendo-fab-focus-outline-style, #{$kendo-button-focus-outline-style} ) !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: k-spacing(0.5) !default;
+$kendo-fab-icon-padding-x: var( --kendo-fab-icon-padding-x, #{k-spacing(0.5)} ) !default;
 /// The vertical padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
+$kendo-fab-icon-padding-y: var( --kendo-fab-icon-padding-y, #{$kendo-fab-icon-padding-x} ) !default;
 /// The spacing of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: k-spacing(0.5) !default;
+$kendo-fab-icon-spacing: var( --kendo-fab-icon-spacing, #{k-spacing(0.5)} ) !default;
 
 /// The horizontal padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-x: k-spacing(0) !default;
+$kendo-fab-items-padding-x: var( --kendo-fab-items-padding-x, #{k-spacing(0)} ) !default;
 /// The vertical padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: k-spacing(4) !default;
+$kendo-fab-items-padding-y: var( --kendo-fab-items-padding-y, #{k-spacing(4)} ) !default;
 
 /// The horizontal padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: k-spacing(1) !default;
+$kendo-fab-item-text-padding-x: var( --kendo-fab-item-text-padding-x, #{k-spacing(1)} ) !default;
 /// The vertical padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-y: k-spacing(1) !default;
+$kendo-fab-item-text-padding-y: var( --kendo-fab-item-text-padding-y, #{k-spacing(1)} ) !default;
 /// The width of the FAB item text border.
 /// @group floating-action-button
-$kendo-fab-item-text-border-width: 1px !default;
+$kendo-fab-item-text-border-width: var( --kendo-fab-item-text-border-width, 1px ) !default;
 /// The border style of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-border-style: solid !default;
+$kendo-fab-item-text-border-style: var( --kendo-fab-item-text-border-style, solid ) !default;
 /// The border radius of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-border-radius: k-border-radius(md) !default;
+$kendo-fab-item-text-border-radius: var( --kendo-fab-item-text-border-radius, #{k-border-radius(md)} ) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-fab-item-text-font-size: var( --kendo-fab-item-text-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
-/// The bottom margin of the FAB item text.
-/// @group floating-action-button
-$kendo-fab-item-text-offset-x: k-spacing(2) !default;
+$kendo-fab-item-text-line-height: var( --kendo-fab-item-text-line-height, var( --kendo-line-height-sm, inherit ) ) !default;
 
 /// The offset of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-offset: $kendo-button-focus-offset !default;
+$kendo-fab-item-focus-offset: var( --kendo-fab-item-focus-offset, #{$kendo-button-focus-offset} ) !default;
 /// The outline width of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-outline-width: $kendo-button-focus-outline-width !default;
+$kendo-fab-item-focus-outline-width: var( --kendo-fab-item-focus-outline-width, #{$kendo-button-focus-outline-width} ) !default;
 /// The outline style of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
+$kendo-fab-item-focus-outline-style: var( --kendo-fab-item-focus-outline-style, #{$kendo-button-focus-outline-style} ) !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: calc( #{k-spacing(2)} + $kendo-fab-icon-padding-x ) !default;
+$kendo-fab-item-icon-padding-x: var( --kendo-fab-item-icon-padding-x, calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} ) ) !default;
 /// The vertical padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+$kendo-fab-item-icon-padding-y: var( --kendo-fab-item-icon-padding-y, #{$kendo-fab-item-icon-padding-x} ) !default;
 /// The border width of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-border-width: 1px !default;
+$kendo-fab-item-icon-border-width: var( --kendo-fab-item-icon-border-width, 1px ) !default;
 /// The border style of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-border-style: solid !default;
+$kendo-fab-item-icon-border-style: var( --kendo-fab-item-icon-border-style, solid ) !default;
 /// The border radius of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-border-radius: 50% !default;
+$kendo-fab-item-icon-border-radius: var( --kendo-fab-item-icon-border-radius, 50% ) !default;
 
 /// The theme colors map for the FAB.
 /// @group floating-action-button
 $kendo-fab-theme-colors: (
-    solid: map.get( $kendo-button-theme-colors, "solid")
+    "base": k-color(base),
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
 ) !default;
 
 /// The size map for the FAB.
@@ -146,46 +153,87 @@ $kendo-fab-sizes: (
     )
 ) !default;
 
-/// The bottom margin of the FAB item.
-/// @group floating-action-button
-$kendo-fab-item-offset-y: k-spacing(2) !default;
 /// The base text color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text: k-color(on-app-surface) !default;
+$kendo-fab-item-text: var( --kendo-fab-item-text, #{k-color(on-app-surface)} ) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: k-color(surface-alt) !default;
+$kendo-fab-item-bg: var( --kendo-fab-item-bg, #{k-color(surface-alt)} ) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: k-color(border) !default;
+$kendo-fab-item-border: var( --kendo-fab-item-border, #{k-color(border)} ) !default;
 /// The text color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-text: k-color(on-base) !default;
+$kendo-fab-item-hover-text: var( --kendo-fab-item-hover-text, #{k-color(on-base)} ) !default;
 /// The background color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-bg: k-color(base-hover) !default;
+$kendo-fab-item-hover-bg: var( --kendo-fab-item-hover-bg, #{k-color(base-hover)} ) !default;
 /// The border color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-border: k-color(border) !default;
+$kendo-fab-item-hover-border: var( --kendo-fab-item-hover-border, #{k-color(border)} ) !default;
 /// The text color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-text: k-color(on-app-surface) !default;
+$kendo-fab-item-focus-text: var( --kendo-fab-item-focus-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-bg: k-color(surface-alt) !default;
+$kendo-fab-item-focus-bg: var( --kendo-fab-item-focus-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-border: k-color(border) !default;
+$kendo-fab-item-focus-border: var( --kendo-fab-item-focus-border, #{k-color(border)} ) !default;
 /// The text color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-text: k-color(on-base) !default;
+$kendo-fab-item-active-text: var( --kendo-fab-item-active-text, #{k-color(on-base)} ) !default;
 /// The background color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-bg: k-color(base-active) !default;
+$kendo-fab-item-active-bg: var( --kendo-fab-item-active-bg, #{k-color(base-active)} ) !default;
 /// The border color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-border: k-color(border) !default;
+$kendo-fab-item-active-border: var( --kendo-fab-item-active-border, #{k-color(border)} ) !default;
+
+/// The background of the disabled FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-bg: var( --kendo-fab-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) ) !default;
+/// The text color of the disabled FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-text: var( --kendo-fab-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+/// The border color of the disabled FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-border: var( --kendo-fab-disabled-border, transparent ) !default;
 
 /// Тhe opacity of the generating FAB.
 /// @group floating-action-button
-$kendo-fab-generating-opacity: 60% !default;
+$kendo-fab-generating-opacity: var( --kendo-fab-generating-opacity, 60% ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
+    $kendo-fab-border-width: $kendo-fab-border-width,
+    $kendo-fab-font-family: $kendo-fab-font-family,
+    $kendo-fab-font-size: $kendo-fab-font-size,
+    $kendo-fab-line-height: $kendo-fab-line-height,
+    $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x,
+    $kendo-fab-md-padding-x: $kendo-fab-md-padding-x,
+    $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x,
+    $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y,
+    $kendo-fab-md-padding-y: $kendo-fab-md-padding-y,
+    $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y,
+    $kendo-fab-icon-padding-x: $kendo-fab-icon-padding-x,
+    $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-y,
+    $kendo-fab-icon-spacing: $kendo-fab-icon-spacing,
+    $kendo-fab-items-padding-x: $kendo-fab-items-padding-x,
+    $kendo-fab-items-padding-y: $kendo-fab-items-padding-y,
+    $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x,
+    $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y,
+    $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width,
+    $kendo-fab-item-text-border-radius: $kendo-fab-item-text-border-radius,
+    $kendo-fab-item-text-font-size: $kendo-fab-item-text-font-size,
+    $kendo-fab-item-text-line-height: $kendo-fab-item-text-line-height,
+    $kendo-fab-item-icon-padding-x: $kendo-fab-item-icon-padding-x,
+    $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
+    $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
+    $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
+    $kendo-fab-theme-colors: $kendo-fab-theme-colors,
+    $kendo-fab-sizes: $kendo-fab-sizes,
+    $kendo-fab-item-text: $kendo-fab-item-text,
+    $kendo-fab-item-bg: $kendo-fab-item-bg,
+    $kendo-fab-item-border: $kendo-fab-item-border,
+    $kendo-fab-generating-opacity: $kendo-fab-generating-opacity
+);

package/scss/filemanager/_layout.scss

@@ -1,245 +1,7 @@
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/filemanager/_layout.scss" as *;
 
 @mixin kendo-file-manager--layout() {
-
-    // File Manager
-    .k-filemanager {
-        border-width: var( --kendo-file-manager-border-width, #{$kendo-file-manager-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        font-family: var( --kendo-file-manager-font-family, #{$kendo-file-manager-font-family} );
-        font-size: var( --kendo-file-manager-font-size, #{$kendo-file-manager-font-size} );
-        line-height: var( --kendo-file-manager-line-height, #{$kendo-file-manager-line-height} );
-        display: flex;
-        flex-flow: column nowrap;
-    }
-
-
-    // Toolbar
-    .k-filemanager-header {
-        border-color: inherit;
-    }
-    .k-filemanager-toolbar {
-        border-width: 0;
-        border-bottom-width: var( --kendo-file-manager-toolbar-border-width, #{$kendo-file-manager-toolbar-border-width} );
-        border-color: inherit;
-        flex-shrink: 0;
-        z-index: 1;
-    }
-
-
-    // Content Wrapper
-    .k-filemanager-content-container {
-        border-color: inherit;
-        box-sizing: border-box;
-        flex: 1 1 0%;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        overflow: hidden;
-    }
-
-    .k-filemanager-splitter {
-        border-width: 0;
-    }
-
-
-    // Navigation
-    .k-filemanager-navigation {
-        padding-inline: var( --kendo-file-manager-navigation-padding-x, #{$kendo-file-manager-navigation-padding-x} );
-        padding-block: var( --kendo-file-manager-navigation-padding-y, #{$kendo-file-manager-navigation-padding-y} );
-        width: var( --kendo-file-manager-navigation-width, #{$kendo-file-manager-navigation-width} );
-        border-width: 0;
-        border-right-width: var( --kendo-file-manager-navigation-border-width, #{$kendo-file-manager-navigation-border-width} );
-        border-style: solid;
-        border-color: inherit;
-        box-sizing: border-box;
-        flex-shrink: 0;
-        overflow: auto;
-    }
-    .k-filemanager-treeview {
-        overflow: visible;
-    }
-
-
-    // Content
-    .k-filemanager-content {
-        border-color: inherit;
-        flex: 1 1 0%;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        overflow: hidden;
-    }
-
-    // Filemanager view
-    .k-filemanager-view {
-        overflow: auto;
-    }
-
-    // Breadcrumb
-    .k-filemanager-breadcrumb {
-        padding-inline: var( --kendo-file-manager-breadcrumb-padding-x, #{$kendo-file-manager-breadcrumb-padding-x} );
-        padding-block: var( --kendo-file-manager-breadcrumb-padding-y, #{$kendo-file-manager-breadcrumb-padding-y} );
-        border-width: 0;
-        border-bottom-width: var( --kendo-file-manager-breadcrumb-border-width, #{$kendo-file-manager-breadcrumb-border-width} );
-        flex-shrink: 0;
-    }
-
-
-    // Filemanager listview
-    .k-filemanager-listview {
-        border-width: 0;
-        flex: 1 1 0%;
-
-        // Listview item
-        .k-listview-item {
-            padding-inline: var( --kendo-file-manager-listview-item-padding-x, #{$kendo-file-manager-listview-item-padding-x} );
-            padding-block: var( --kendo-file-manager-listview-item-padding-y, #{$kendo-file-manager-listview-item-padding-y} );
-            width: var( --kendo-file-manager-listview-item-width, #{$kendo-file-manager-listview-item-width} );
-            height: var( --kendo-file-manager-listview-item-height, #{$kendo-file-manager-listview-item-height} );
-            text-align: center;
-        }
-
-        // File preview
-        .k-file-preview {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-        }
-
-        // File name
-        .k-file-name {
-            margin-block-start: calc( var( --kendo-file-manager-spacer, #{$kendo-file-manager-spacer} ) / 2 );
-            display: block;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        // Edit mode
-        .k-file-edit-input input {
-            width: 100%;
-        }
-    }
-
-
-    // Filemanager grid
-    .k-filemanager-grid {
-        border-width: 0;
-        flex: 1 1 0%;
-
-        // File preview
-        .k-file-preview {
-            margin-inline-end: var( --kendo-icon-spacing, .5rem );
-            display: inline-flex;
-            flex-direction: row;
-            vertical-align: middle;
-        }
-
-        // File name
-        .k-file-name {
-            display: inline-flex;
-            flex-direction: row;
-            vertical-align: middle;
-        }
-    }
-
-
-    // Filemanager preview
-    .k-filemanager-preview {
-        padding-inline-start: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-preview-padding-x} );
-        padding-inline-end: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-preview-padding-x} );
-        padding-block-start:  calc( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 3 );
-        padding-block-end: var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} );
-        width: var( --kendo-file-manager-preview-width, #{$kendo-file-manager-preview-width} );
-        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + var( --kendo-icon-size, 1rem ) * 2 + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
-        border-width: 0;
-        border-left-width: var( --kendo-file-manager-preview-border-width, #{$kendo-file-manager-preview-border-width} );
-        border-style: solid;
-        border-color: inherit;
-        box-sizing: border-box;
-        text-align: center;
-        overflow-y: auto;
-        flex-shrink: 0;
-
-        // File preview
-        .k-file-preview {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-        }
-
-        // File name
-        .k-file-name {
-            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
-            display: block;
-        }
-        .k-single-file-selected { font-weight: var( --kendo-font-weight-bold, bold ); }
-        .k-multiple-files-selected { font-weight: var( --kendo-font-weight-bold, bold ); }
-
-        // File Meta
-        .k-file-meta {
-            margin-inline: 0;
-            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
-            margin-block-end: 0;
-            box-sizing: border-box;
-            text-align: start;
-            display: flex;
-            flex-flow: row wrap;
-            grid-column-gap: $kendo-file-manager-preview-column-gap;
-        }
-        .k-file-meta-label {
-            display: inline-block;
-        }
-        .k-file-meta-value {
-            margin: 0;
-        }
-        .k-file-type {
-            text-transform: capitalize;
-        }
-        .k-line-break {
-            margin-inline: 0;
-            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
-            margin-block-end: 0;
-            width: 100%;
-            flex: 1 1 100%;
-            flex-flow: row nowrap;
-        }
-    }
-
-
-    // Resizing Handle
-    .k-filemanager .k-splitbar {
-        flex-shrink: 0;
-        display: inline-flex;
-        position: relative;
-        border-width: 0 1px;
-        border-style: solid;
-        border-color: inherit;
-    }
-
-
-    // Upload Dialog
-    .k-filemanager-upload-dialog .k-upload-files {
-        max-height: 200px;
-        overflow-y: auto;
-    }
-
-
-    // Drag Hint
-    // TODO: use drag-hint styles
-    .k-filemanager-drag-hint {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    .k-filemanager-drag-hint .k-icon {
-        margin-inline-end: var( --kendo-icon-spacing, .5rem );
-
-    }
-
+    @include kendo-file-manager--layout-base();
 }

package/scss/filemanager/_theme.scss

@@ -1,110 +1,29 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/filemanager/_theme.scss" as *;
 
 @mixin kendo-file-manager--theme() {
+    @include kendo-file-manager--theme-base();
 
-    // Filemanager
-    .k-filemanager {
-        @include fill(
-            var( --kendo-file-manager-text, #{$kendo-file-manager-text} ),
-            var( --kendo-file-manager-bg, #{$kendo-file-manager-bg} ),
-            var( --kendo-file-manager-border, #{$kendo-file-manager-border} )
-        );
-    }
-
-
-    // Filemanager toolbar
-    .k-filemanager-toolbar {
-        @include fill(
-            var( --kendo-file-manager-toolbar-text, #{$kendo-file-manager-toolbar-text} ),
-            var( --kendo-file-manager-toolbar-bg, #{$kendo-file-manager-toolbar-bg} ),
-            var( --kendo-file-manager-toolbar-border, #{$kendo-file-manager-toolbar-border} )
-        );
-    }
-
-
-    // Filemanager navigation
-    .k-filemanager-navigation {
-        @include fill(
-            var( --kendo-file-manager-navigation-text, #{$kendo-file-manager-navigation-text} ),
-            var( --kendo-file-manager-navigation-bg, #{$kendo-file-manager-navigation-bg} ),
-            var( --kendo-file-manager-navigation-border, #{$kendo-file-manager-navigation-border} )
-        );
-    }
-
-
-    // Filemanager breadcrumb
-    .k-filemanager-breadcrumb {
-        @include fill(
-            var( --kendo-file-manager-breadcrumb-text, #{$kendo-file-manager-breadcrumb-text} ),
-            var( --kendo-file-manager-breadcrumb-bg, #{$kendo-file-manager-breadcrumb-bg} ),
-            var( --kendo-file-manager-breadcrumb-border, #{$kendo-file-manager-breadcrumb-border} )
-        );
-    }
-
-
-    // Filemanager listview
     .k-filemanager-listview {
-        @include fill(
-            var( --kendo-file-manager-listview-text, #{$kendo-file-manager-listview-text} ),
-            var( --kendo-file-manager-listview-bg, #{$kendo-file-manager-listview-bg} ),
-            var( --kendo-file-manager-listview-border, #{$kendo-file-manager-listview-border} )
-        );
 
         .k-listview-item {
-            .k-file-icon {
-                @include fill(
-                    var( --kendo-file-manager-listview-item-icon-text, #{$kendo-file-manager-listview-item-icon-text} ),
-                    var( --kendo-file-manager-listview-item-icon-bg, #{$kendo-file-manager-listview-item-icon-bg} ),
-                    var( --kendo-file-manager-listview-item-icon-border, #{$kendo-file-manager-listview-item-icon-border} )
-                );
-            }
 
             &.k-focus .k-file-icon {
                 @include fill(
-                    var( --kendo-file-manager-listview-item-icon-focus-text, #{$kendo-file-manager-listview-item-icon-focus-text} ),
-                    var( --kendo-file-manager-listview-item-icon-focus-bg, #{$kendo-file-manager-listview-item-icon-focus-bg} ),
-                    var( --kendo-file-manager-listview-item-icon-focus-border, #{$kendo-file-manager-listview-item-icon-focus-border} )
+                    $kendo-file-manager-listview-item-icon-focus-text,
+                    $kendo-file-manager-listview-item-icon-focus-bg,
+                    $kendo-file-manager-listview-item-icon-focus-border
                 );
             }
 
             &.k-selected .k-file-icon {
                 @include fill(
-                    var( --kendo-file-manager-listview-item-icon-selected-text, #{$kendo-file-manager-listview-item-icon-selected-text} ),
-                    var( --kendo-file-manager-listview-item-icon-selected-bg, #{$kendo-file-manager-listview-item-icon-selected-bg} ),
-                    var( --kendo-file-manager-listview-item-icon-selected-border, #{$kendo-file-manager-listview-item-icon-selected-border} )
+                    $kendo-file-manager-listview-item-icon-selected-text,
+                    $kendo-file-manager-listview-item-icon-selected-bg,
+                    $kendo-file-manager-listview-item-icon-selected-border
                 );
             }
         }
-
-    }
-
-
-    // Filemanager grid
-    .k-filemanager-grid {
-        @include fill(
-            var( --kendo-file-manager-grid-text, #{$kendo-file-manager-grid-text} ),
-            var( --kendo-file-manager-grid-bg, #{$kendo-file-manager-grid-bg} ),
-            var( --kendo-file-manager-grid-border, #{$kendo-file-manager-grid-border} )
-        );
-    }
-
-
-    // Filemanager preview
-    .k-filemanager-preview {
-        @include fill(
-            var( --kendo-file-manager-preview-text, #{$kendo-file-manager-preview-text} ),
-            var( --kendo-file-manager-preview-bg, #{$kendo-file-manager-preview-bg} ),
-            var( --kendo-file-manager-preview-border, #{$kendo-file-manager-preview-border} )
-        );
-
-        .k-file-icon {
-            @include fill(
-                var( --kendo-file-manager-preview-icon-text, #{$kendo-file-manager-preview-icon-text} ),
-                var( --kendo-file-manager-preview-icon-bg, #{$kendo-file-manager-preview-icon-bg} ),
-                var( --kendo-file-manager-preview-icon-border, #{$kendo-file-manager-preview-icon-border} )
-            );
-        }
     }
-
 }