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

package/scss/filemanager/_variables.scss

@@ -5,178 +5,231 @@
 
 /// The space between the FileManager items.
 /// @group file-manager
-$kendo-file-manager-spacer: k-spacing(4) !default;
+$kendo-file-manager-spacer: var( --kendo-file-manager-spacer, #{k-spacing(4)} ) !default;
 /// The border width of the FileManager.
 /// @group file-manager
-$kendo-file-manager-border-width: 1px !default;
+$kendo-file-manager-border-width: var( --kendo-file-manager-border-width, 1px ) !default;
 /// The font family of the FileManager.
 /// @group file-manager
-$kendo-file-manager-font-family: var( --kendo-font-family, normal ) !default;
+$kendo-file-manager-font-family: var( --kendo-file-manager-font-family, var( --kendo-font-family, normal ) ) !default;
 /// The font size of the FileManager.
 /// @group file-manager
-$kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-file-manager-font-size: var( --kendo-file-manager-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the FileManager.
 /// @group file-manager
-$kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-file-manager-line-height: var( --kendo-file-manager-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The background color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-bg: k-color(surface-alt) !default;
+$kendo-file-manager-bg: var( --kendo-file-manager-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-text: k-color(on-app-surface) !default;
+$kendo-file-manager-text: var( --kendo-file-manager-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-file-manager-border: var( --kendo-file-manager-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The border width of the FileManager Toolbar.
 /// @group file-manager
-$kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
+$kendo-file-manager-toolbar-border-width: var( --kendo-file-manager-toolbar-border-width, #{$kendo-file-manager-border-width} ) !default;
 /// The background color of the FileManager Toolbar.
 /// @group file-manager
-$kendo-file-manager-toolbar-bg: $kendo-toolbar-bg !default;
+$kendo-file-manager-toolbar-bg: var( --kendo-file-manager-toolbar-bg, #{$kendo-toolbar-bg} ) !default;
 /// The text color of the FileManager Toolbar.
 /// @group file-manager
-$kendo-file-manager-toolbar-text: $kendo-toolbar-text !default;
+$kendo-file-manager-toolbar-text: var( --kendo-file-manager-toolbar-text, #{$kendo-toolbar-text} ) !default;
 /// The border color of the FileManager Toolbar.
 /// @group file-manager
-$kendo-file-manager-toolbar-border: $kendo-toolbar-border !default;
+$kendo-file-manager-toolbar-border: var( --kendo-file-manager-toolbar-border, #{$kendo-toolbar-border} ) !default;
 
 /// The horizontal padding of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-padding-x: $kendo-file-manager-spacer !default;
+$kendo-file-manager-navigation-padding-x: var( --kendo-file-manager-navigation-padding-x, #{$kendo-file-manager-spacer} ) !default;
 /// The vertical padding of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-padding-y: $kendo-file-manager-spacer !default;
+$kendo-file-manager-navigation-padding-y: var( --kendo-file-manager-navigation-padding-y, #{$kendo-file-manager-spacer} ) !default;
 /// The width of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-width: 20% !default;
+$kendo-file-manager-navigation-width: var( --kendo-file-manager-navigation-width, 20% ) !default;
 /// The border width of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-border-width: $kendo-file-manager-border-width !default;
+$kendo-file-manager-navigation-border-width: var( --kendo-file-manager-navigation-border-width, #{$kendo-file-manager-border-width} ) !default;
 /// The background color of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-bg: transparent !default;
+$kendo-file-manager-navigation-bg: var( --kendo-file-manager-navigation-bg, transparent ) !default;
 /// The text color of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-text: inherit !default;
+$kendo-file-manager-navigation-text: var( --kendo-file-manager-navigation-text, inherit ) !default;
 /// The border color of the FileManager Navigation.
 /// @group file-manager
-$kendo-file-manager-navigation-border: inherit !default;
+$kendo-file-manager-navigation-border: var( --kendo-file-manager-navigation-border, inherit ) !default;
 
 /// The horizontal padding of the FileManager Breadcrumb.
 /// @group file-manager
-$kendo-file-manager-breadcrumb-padding-x: k-spacing(2) !default;
+$kendo-file-manager-breadcrumb-padding-x: var( --kendo-file-manager-breadcrumb-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the FileManager Breadcrumb.
 /// @group file-manager
-$kendo-file-manager-breadcrumb-padding-y: k-spacing(2) !default;
+$kendo-file-manager-breadcrumb-padding-y: var( --kendo-file-manager-breadcrumb-padding-y, #{k-spacing(2)} ) !default;
 /// The border width of the FileManager Breadcrumb.
 /// @group file-manager
-$kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
+$kendo-file-manager-breadcrumb-border-width: var( --kendo-file-manager-breadcrumb-border-width, #{$kendo-file-manager-border-width} ) !default;
 /// The background color of the FileManager Breadcrumb.
 /// @group file-manager
-$kendo-file-manager-breadcrumb-bg: $kendo-toolbar-bg !default;
+$kendo-file-manager-breadcrumb-bg: var( --kendo-file-manager-breadcrumb-bg, #{$kendo-toolbar-bg} ) !default;
 /// The text color of the FileManager Breadcrumb.
 /// @group file-manager
-$kendo-file-manager-breadcrumb-text: inherit !default;
+$kendo-file-manager-breadcrumb-text: var( --kendo-file-manager-breadcrumb-text, inherit ) !default;
 /// The border color of the FileManager Breadcrumb.
 /// @group file-manager
-$kendo-file-manager-breadcrumb-border: inherit !default;
+$kendo-file-manager-breadcrumb-border: var( --kendo-file-manager-breadcrumb-border, inherit ) !default;
 
 /// The background color of the FileManager ListView.
 /// @group file-manager
-$kendo-file-manager-listview-bg: transparent !default;
+$kendo-file-manager-listview-bg: var( --kendo-file-manager-listview-bg, transparent ) !default;
 /// The text color of the FileManager ListView.
 /// @group file-manager
-$kendo-file-manager-listview-text: inherit !default;
+$kendo-file-manager-listview-text: var( --kendo-file-manager-listview-text, inherit ) !default;
 /// The border color of the FileManager ListView.
 /// @group file-manager
-$kendo-file-manager-listview-border: inherit !default;
+$kendo-file-manager-listview-border: var( --kendo-file-manager-listview-border, inherit ) !default;
 
 /// The horizontal padding of the FileManager ListView item.
 /// @group file-manager
-$kendo-file-manager-listview-item-padding-x: k-spacing(4) !default;
+$kendo-file-manager-listview-item-padding-x: var( --kendo-file-manager-listview-item-padding-x, #{k-spacing(4)} ) !default;
 /// The vertical padding of the FileManager ListView item.
 /// @group file-manager
-$kendo-file-manager-listview-item-padding-y: k-spacing(4) !default;
+$kendo-file-manager-listview-item-padding-y: var( --kendo-file-manager-listview-item-padding-y, #{k-spacing(4)} ) !default;
 /// The width of the FileManager ListView item.
 /// @group file-manager
-$kendo-file-manager-listview-item-width: 120px !default;
+$kendo-file-manager-listview-item-width: var( --kendo-file-manager-listview-item-width, 120px ) !default;
 /// The height of the FileManager ListView item.
 /// @group file-manager
-$kendo-file-manager-listview-item-height: 120px !default;
+$kendo-file-manager-listview-item-height: var( --kendo-file-manager-listview-item-height, 120px ) !default;
 
 /// The background color of the FileManager ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-bg: transparent !default;
+$kendo-file-manager-listview-item-icon-bg: var( --kendo-file-manager-listview-item-icon-bg, transparent ) !default;
 /// The text color of the FileManager ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-text: k-color(subtle) !default;
+$kendo-file-manager-listview-item-icon-text: var( --kendo-file-manager-listview-item-icon-text, #{k-color(subtle)} ) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-border: inherit !default;
+$kendo-file-manager-listview-item-icon-border: var( --kendo-file-manager-listview-item-icon-border, inherit ) !default;
 /// The background color of the FileManager focused ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-focus-bg: transparent !default;
+$kendo-file-manager-listview-item-icon-focus-bg: var( --kendo-file-manager-listview-item-icon-focus-bg, transparent ) !default;
 /// The text color of the FileManager focused ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-focus-text: inherit !default;
+$kendo-file-manager-listview-item-icon-focus-text: var( --kendo-file-manager-listview-item-icon-focus-text, inherit ) !default;
 /// The border color of the FileManager focused ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-focus-border: inherit !default;
+$kendo-file-manager-listview-item-icon-focus-border: var( --kendo-file-manager-listview-item-icon-focus-border, inherit ) !default;
 /// Background color of the FileManager selected ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-selected-bg: transparent !default;
+$kendo-file-manager-listview-item-icon-selected-bg: var( --kendo-file-manager-listview-item-icon-selected-bg, transparent ) !default;
 /// Text color of the FileManager selected ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-selected-text: inherit !default;
+$kendo-file-manager-listview-item-icon-selected-text: var( --kendo-file-manager-listview-item-icon-selected-text, inherit ) !default;
 /// Border color of the FileManager selected ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-selected-border: inherit !default;
+$kendo-file-manager-listview-item-icon-selected-border: var( --kendo-file-manager-listview-item-icon-selected-border, inherit ) !default;
 
 /// The background color of the FileManager Grid.
 /// @group file-manager
-$kendo-file-manager-grid-bg: transparent !default;
+$kendo-file-manager-grid-bg: var( --kendo-file-manager-grid-bg, transparent ) !default;
 /// The text color of the FileManager Grid.
 /// @group file-manager
-$kendo-file-manager-grid-text: inherit !default;
+$kendo-file-manager-grid-text: var( --kendo-file-manager-grid-text, inherit ) !default;
 /// The border color of the FileManager Grid.
 /// @group file-manager
-$kendo-file-manager-grid-border: inherit !default;
+$kendo-file-manager-grid-border: var( --kendo-file-manager-grid-border, inherit ) !default;
 
 /// The horizontal padding of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-padding-x: $kendo-file-manager-spacer !default;
+$kendo-file-manager-preview-padding-x: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-spacer} ) !default;
 /// The vertical padding of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-padding-y: $kendo-file-manager-spacer !default;
+$kendo-file-manager-preview-padding-y: var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-spacer} ) !default;
 /// The width of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-width: 20% !default;
+$kendo-file-manager-preview-width: var( --kendo-file-manager-preview-width, 20% ) !default;
 /// The border width of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !default;
+$kendo-file-manager-preview-border-width: var( --kendo-file-manager-preview-border-width, #{$kendo-file-manager-border-width} ) !default;
 /// The spacing of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
+$kendo-file-manager-preview-spacing: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-spacer} ) !default;
 /// The gap between the columns in the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-column-gap: k-spacing(1) !default;
+$kendo-file-manager-preview-column-gap: var( --kendo-file-manager-preview-column-gap, #{k-spacing(1)} ) !default;
 /// The background color of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-bg: transparent !default;
+$kendo-file-manager-preview-bg: var( --kendo-file-manager-preview-bg, transparent ) !default;
 /// The text color of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-text: inherit !default;
+$kendo-file-manager-preview-text: var( --kendo-file-manager-preview-text, inherit ) !default;
 /// The border color of the FileManager preview.
 /// @group file-manager
-$kendo-file-manager-preview-border: inherit !default;
+$kendo-file-manager-preview-border: var( --kendo-file-manager-preview-border, inherit ) !default;
 
 /// The background color of the FileManager preview icon.
 /// @group file-manager
-$kendo-file-manager-preview-icon-bg: transparent !default;
+$kendo-file-manager-preview-icon-bg: var( --kendo-file-manager-preview-icon-bg, transparent ) !default;
 /// The text color of the FileManager preview icon.
 /// @group file-manager
-$kendo-file-manager-preview-icon-text: k-color(subtle) !default;
+$kendo-file-manager-preview-icon-text: var( --kendo-file-manager-preview-icon-text, #{k-color(subtle)} ) !default;
 /// The border color of the FileManager preview icon.
 /// @group file-manager
-$kendo-file-manager-preview-icon-border: inherit !default;
+$kendo-file-manager-preview-icon-border: var( --kendo-file-manager-preview-icon-border, inherit ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/filemanager/variables" with (
+    $kendo-file-manager-spacer: $kendo-file-manager-spacer,
+    $kendo-file-manager-border-width: $kendo-file-manager-border-width,
+    $kendo-file-manager-font-family: $kendo-file-manager-font-family,
+    $kendo-file-manager-font-size: $kendo-file-manager-font-size,
+    $kendo-file-manager-line-height: $kendo-file-manager-line-height,
+    $kendo-file-manager-bg: $kendo-file-manager-bg,
+    $kendo-file-manager-text: $kendo-file-manager-text,
+    $kendo-file-manager-border: $kendo-file-manager-border,
+    $kendo-file-manager-toolbar-border-width: $kendo-file-manager-toolbar-border-width,
+    $kendo-file-manager-toolbar-bg: $kendo-file-manager-toolbar-bg,
+    $kendo-file-manager-toolbar-text: $kendo-file-manager-toolbar-text,
+    $kendo-file-manager-toolbar-border: $kendo-file-manager-toolbar-border,
+    $kendo-file-manager-navigation-padding-x: $kendo-file-manager-navigation-padding-x,
+    $kendo-file-manager-navigation-padding-y: $kendo-file-manager-navigation-padding-y,
+    $kendo-file-manager-navigation-width: $kendo-file-manager-navigation-width,
+    $kendo-file-manager-navigation-border-width: $kendo-file-manager-navigation-border-width,
+    $kendo-file-manager-navigation-bg: $kendo-file-manager-navigation-bg,
+    $kendo-file-manager-navigation-text: $kendo-file-manager-navigation-text,
+    $kendo-file-manager-navigation-border: $kendo-file-manager-navigation-border,
+    $kendo-file-manager-breadcrumb-padding-x: $kendo-file-manager-breadcrumb-padding-x,
+    $kendo-file-manager-breadcrumb-padding-y: $kendo-file-manager-breadcrumb-padding-y,
+    $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-breadcrumb-border-width,
+    $kendo-file-manager-breadcrumb-bg: $kendo-file-manager-breadcrumb-bg,
+    $kendo-file-manager-breadcrumb-text: $kendo-file-manager-breadcrumb-text,
+    $kendo-file-manager-breadcrumb-border: $kendo-file-manager-breadcrumb-border,
+    $kendo-file-manager-listview-bg: $kendo-file-manager-listview-bg,
+    $kendo-file-manager-listview-text: $kendo-file-manager-listview-text,
+    $kendo-file-manager-listview-border: $kendo-file-manager-listview-border,
+    $kendo-file-manager-listview-item-padding-x: $kendo-file-manager-listview-item-padding-x,
+    $kendo-file-manager-listview-item-padding-y: $kendo-file-manager-listview-item-padding-y,
+    $kendo-file-manager-listview-item-width: $kendo-file-manager-listview-item-width,
+    $kendo-file-manager-listview-item-height: $kendo-file-manager-listview-item-height,
+    $kendo-file-manager-listview-item-icon-bg: $kendo-file-manager-listview-item-icon-bg,
+    $kendo-file-manager-listview-item-icon-text: $kendo-file-manager-listview-item-icon-text,
+    $kendo-file-manager-listview-item-icon-border: $kendo-file-manager-listview-item-icon-border,
+    $kendo-file-manager-grid-bg: $kendo-file-manager-grid-bg,
+    $kendo-file-manager-grid-text: $kendo-file-manager-grid-text,
+    $kendo-file-manager-grid-border: $kendo-file-manager-grid-border,
+    $kendo-file-manager-preview-padding-x: $kendo-file-manager-preview-padding-x,
+    $kendo-file-manager-preview-padding-y: $kendo-file-manager-preview-padding-y,
+    $kendo-file-manager-preview-width: $kendo-file-manager-preview-width,
+    $kendo-file-manager-preview-border-width: $kendo-file-manager-preview-border-width,
+    $kendo-file-manager-preview-spacing: $kendo-file-manager-preview-spacing,
+    $kendo-file-manager-preview-column-gap: $kendo-file-manager-preview-column-gap,
+    $kendo-file-manager-preview-bg: $kendo-file-manager-preview-bg,
+    $kendo-file-manager-preview-text: $kendo-file-manager-preview-text,
+    $kendo-file-manager-preview-border: $kendo-file-manager-preview-border,
+    $kendo-file-manager-preview-icon-bg: $kendo-file-manager-preview-icon-bg,
+    $kendo-file-manager-preview-icon-text: $kendo-file-manager-preview-icon-text,
+    $kendo-file-manager-preview-icon-border: $kendo-file-manager-preview-icon-border
+);

package/scss/filter/_layout.scss

@@ -1,93 +1,30 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/filter/_layout.scss" as *;
 
 @mixin kendo-filter--layout() {
+    @include kendo-filter--layout-base();
 
     .k-filter {
-        box-sizing: border-box;
-        border-width: 0;
-        display: inline-block;
-        background-color: transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        ul {
-            padding: 0;
-
-            li {
-                list-style-type: none;
-            }
-        }
-
-        .k-filter-container,
-        .k-filter-preview {
-            margin-block-end: var( --kendo-filter-bottom-margin, #{$kendo-filter-bottom-margin} );
-        }
-
-        .k-filter-lines,
-        .k-filter-item {
-            padding-inline-start: var( --kendo-filter-padding-x, #{$kendo-filter-padding-x} );
-        }
-
         .k-filter-toolbar {
-            display: inline-flex;
-            position: relative;
-            padding-inline: 0;
-            padding-block: var( --kendo-filter-padding-y, #{$kendo-filter-padding-y} );
-
             &::before {
-                content: "";
-                position: absolute;
-                width: var( --kendo-filter-padding-x, #{$kendo-filter-padding-x} );
-                height: var( --kendo-filter-line-size, #{$kendo-filter-line-size} );
                 top: 50%;
-                inset-inline-start: calc( var( --kendo-filter-padding-x, #{$kendo-filter-padding-x} ) * -1 );
-            }
-
-            .k-toolbar {
-                border-style: solid;
+                inset-block-start: unset;
             }
         }
-        .k-filter-operator .k-dropdown-list {
-            width: var( --kendo-filter-operator-dropdown-width, #{$kendo-filter-operator-dropdown-width} );
-        }
 
         .k-filter-item {
-            position: relative;
-
             &::before {
-                content: "";
-                position: absolute;
-                width: var( --kendo-filter-line-size, #{$kendo-filter-line-size} );
-                height: 100%;
-                top: calc( var( --kendo-filter-padding-y, #{$kendo-filter-padding-y} ) * -1 );
-                inset-inline-start: 0;
+                top: calc( $kendo-filter-padding-y * -1 );
+                inset-block-start: unset;
             }
         }
 
-        // The second selector targets the Angular rendering
         .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-            content: "";
-            position: absolute;
-            width: var( --kendo-filter-line-size, #{$kendo-filter-line-size} );
-            top: calc( ( var( --kendo-filter-padding-y, #{$kendo-filter-padding-y} ) * -1 ) - var( --kendo-filter-line-size, #{$kendo-filter-line-size} ) );
+            top: calc( ( $kendo-filter-padding-y * -1 ) - $kendo-filter-line-size );
             bottom: 50%;
-            inset-inline-start: calc( var( --kendo-filter-padding-x, #{$kendo-filter-padding-x} ) * -1 );
-        }
-
-        // The forth and fifth selectors targets the Angular rendering
-        .k-filter-group-main::before,
-        .k-filter-group-main > .k-filter-toolbar::before,
-        .k-filter-group-main > .k-filter-toolbar::after,
-        .k-filter-group-main > * > .k-filter-toolbar::before,
-        .k-filter-group-main > * > .k-filter-toolbar::after,
-        .k-filter-lines .k-filter-item:last-child::before {
-            display: none;
+            inset-block-start: unset;
+            inset-block-end: unset;
         }
     }
-
 }

package/scss/filter/_theme.scss

@@ -1,31 +1,22 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/filter/_theme.scss" as *;
 
 @mixin kendo-filter--theme() {
+    @include kendo-filter--theme-base();
 
     .k-filter {
-        color: var( --kendo-filter-text, #{$kendo-filter-text} );
+        color: $kendo-filter-text;
 
-        .k-filter-preview-field {
-            color: var( --kendo-filter-preview-field-text, #{$kendo-filter-preview-field-text} );
-        }
-
-        .k-filter-preview-operator {
-            color: var( --kendo-filter-preview-operator-text, #{$kendo-filter-preview-operator-text} );
-        }
-
-        // The last selector targets the Angular rendering
         .k-filter-item::before,
         .k-filter-toolbar::before,
         .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-            background-color: var( --kendo-filter-line-bg, #{$kendo-filter-line-bg} );
+            background-color: $kendo-filter-line-bg;
         }
 
-        // Focus
         .k-toolbar:focus,
         .k-toolbar.k-focus {
-            border-color: var( --kendo-filter-toolbar-focus-border, #{$kendo-filter-toolbar-focus-border} );
+            border-color: $kendo-filter-toolbar-focus-border;
         }
     }
-
 }

package/scss/filter/_variables.scss

@@ -3,37 +3,47 @@
 
 /// The horizontal padding of the Filter.
 /// @group filter
-$kendo-filter-padding-x: k-spacing(2) !default;
+$kendo-filter-padding-x: var( --kendo-filter-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the Filter.
 /// @group filter
-$kendo-filter-padding-y: k-spacing(1) !default;
+$kendo-filter-padding-y: var( --kendo-filter-padding-y, #{k-spacing(1)} ) !default;
 
 /// The bottom margin of the Filter.
 /// @group filter
-$kendo-filter-bottom-margin: k-spacing(7.5) !default;
+$kendo-filter-bottom-margin: var( --kendo-filter-bottom-margin, #{k-spacing(7.5)} ) !default;
 /// The width of the line that connects the Filter items.
 /// @group filter
-$kendo-filter-line-size: 1px !default;
+$kendo-filter-line-size: var( --kendo-filter-line-size, 1px ) !default;
 
 /// The width of the dropdown elements in the Filter items.
 /// @group filter
-$kendo-filter-operator-dropdown-width: 15em !default;
+$kendo-filter-operator-dropdown-width: var( --kendo-filter-operator-dropdown-width, 15em ) !default;
 
 /// The text color of the Filter.
 /// @group filter
-$kendo-filter-text: k-color(on-app-surface) !default;
+$kendo-filter-text: var( --kendo-filter-text, #{k-color(on-app-surface)} ) !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: k-color(primary) !default;
+$kendo-filter-preview-field-text: var( --kendo-filter-preview-field-text, #{k-color(primary)} ) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: k-color(subtle) !default;
+$kendo-filter-preview-operator-text: var( --kendo-filter-preview-operator-text, #{k-color(subtle)} ) !default;
 
 /// The background color of the line that connects the Filter items.
 /// @group filter
-$kendo-filter-line-bg: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-filter-line-bg: var( --kendo-filter-line-bg, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: k-color(base-emphasis) !default;
+$kendo-filter-toolbar-focus-border: var( --kendo-filter-toolbar-focus-border, #{k-color(base-emphasis)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/filter/variables" with (
+    $kendo-filter-padding-x: $kendo-filter-padding-x,
+    $kendo-filter-padding-y: $kendo-filter-padding-y,
+    $kendo-filter-bottom-margin: $kendo-filter-bottom-margin,
+    $kendo-filter-line-size: $kendo-filter-line-size,
+    $kendo-filter-operator-dropdown-width: $kendo-filter-operator-dropdown-width,
+    $kendo-filter-preview-field-text: $kendo-filter-preview-field-text,
+    $kendo-filter-preview-operator-text: $kendo-filter-preview-operator-text
+);

package/scss/floating-label/_layout.scss

@@ -1,60 +1,12 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/floating-label/_layout.scss" as *;
 
 @mixin kendo-floating-label--layout() {
+    @include kendo-floating-label--layout-base();
 
-    // Floating label
     .k-floating-label-container {
-        padding-top: var( --kendo-floating-label-height, #{$kendo-floating-label-height} );
-        box-sizing: border-box;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        flex-direction: column;
-        justify-content: stretch;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
         > .k-floating-label {
-            max-width: var( --kendo-floating-label-max-width, #{$kendo-floating-label-max-width} );
-            font-size: var( --kendo-floating-label-font-size, #{$kendo-floating-label-font-size} );
-            font-weight: var( --kendo-floating-label-font-weight, #{$kendo-floating-label-font-weight} );
-            line-height: var( --kendo-floating-label-line-height, #{$kendo-floating-label-line-height} );
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            position: absolute;
-            top: var( --kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y} );
-            left: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
-            overflow: hidden;
-            cursor: text;
-            transform-origin: left center;
-            transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), left var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
-        }
-
-
-        &.k-empty {
-            > .k-floating-label {
-                top: var( --kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y} );
-                left: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
-                transform: scale( var( --kendo-floating-label-scale, #{$kendo-floating-label-scale} ) );
-                pointer-events: none;
-            }
-        }
-
-        > .k-floating-label,
-        &:focus-within > .k-floating-label,
-        &.k-focus > .k-floating-label {
-            top: var( --kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y} );
-            left: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
-            transform: scale( var( --kendo-floating-label-focus-scale, #{$kendo-floating-label-focus-scale} ) );
-        }
-
-
-        &.k-empty:not(.k-focus, :focus-within) ::placeholder {
-            color: transparent;
+            font-weight: $kendo-floating-label-font-weight;
         }
 
         &:disabled,
@@ -63,28 +15,4 @@
             background: none;
         }
     }
-
-    [dir="rtl"] .k-floating-label-container,
-    .k-rtl .k-floating-label-container,
-    .k-floating-label-container[dir="rtl"] {
-
-        > .k-floating-label {
-            transform-origin: right center;
-            transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
-        }
-
-        &.k-empty {
-            > .k-floating-label {
-                left: auto;
-                right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
-            }
-        }
-
-        > .k-floating-label,
-        &:focus-within > .k-floating-label,
-        &.k-focus > .k-floating-label {
-            left: auto;
-            right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
-        }
-    }
 }

package/scss/floating-label/_theme.scss

@@ -1,31 +1,15 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/floating-label/_theme.scss" as *;
 
 @mixin kendo-floating-label--theme() {
+    @include kendo-floating-label--theme-base();
 
-     // Floating label
-     .k-floating-label-container {
-
-        > .k-floating-label {
-            @include fill(
-                $color: var( --kendo-floating-label-text, #{$kendo-floating-label-text} ),
-                $bg: var( --kendo-floating-label-bg, #{$kendo-floating-label-bg} )
-            );
-        }
-
-        &.k-focus > .k-floating-label {
-            @include fill(
-                $color: var( --kendo-floating-label-focus-text, #{$kendo-floating-label-focus-text} ),
-                $bg: var( --kendo-floating-label-focus-bg, #{$kendo-floating-label-focus-bg} )
-            );
-        }
-
+    .k-floating-label-container {
         &.k-invalid > .k-floating-label,
         &.ng-invalid.ng-touched > .k-floating-label,
         &.ng-invalid.ng-dirty > .k-floating-label {
-            @include fill ( $color: var( --kendo-floating-label-invalid-text, #{$kendo-floating-label-invalid-text} ) );
+            @include fill ( $color: $kendo-floating-label-invalid-text );
         }
-
     }
-
 }