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

package/scss/listgroup/_layout.scss

@@ -1,180 +1,8 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/listgroup/_layout.scss" as *;
 
 @mixin kendo-listgroup--layout() {
 
-    .k-listgroup {
-        @include border-radius( var( --kendo-listgroup-border-radius, #{$kendo-listgroup-border-radius} ) );
-        margin: 0;
-        padding: 0;
-        border-width: var( --kendo-listgroup-border-width, #{$kendo-listgroup-border-width} );
-        border-style: solid;
-        font-size: var( --kendo-listgroup-font-size, #{$kendo-listgroup-font-size} );
-        line-height: var( --kendo-listgroup-line-height, #{$kendo-listgroup-line-height} );
-        list-style: none;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-
-        > ul {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-        }
-
-        // Borders of items
-        .k-listgroup-item + .k-listgroup-item {
-            border-top-width: var( --kendo-listgroup-item-border-width, #{$kendo-listgroup-item-border-width} );
-        }
-    }
-    .k-listgroup-flush {
-        @include border-radius( 0 );
-        border-left-width: 0;
-        border-right-width: 0;
-    }
-
-
-    .k-listgroup-item {
-        padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
-        padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        flex: 0 0 auto;
-        position: relative;
-
-        > .k-link {
-            margin-inline: var( --kendo-listgroup-item-padding-x, calc( #{$kendo-listgroup-item-padding-x} * -1 ) );
-            margin-block: var( --kendo-listgroup-item-padding-y, calc( #{$kendo-listgroup-item-padding-y} * -1 ) );
-            padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
-            padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-            color: inherit;
-            text-decoration: none;
-            outline: 0;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-start;
-            flex: 1 1 auto;
-            position: relative;
-
-            > .k-select {
-                padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-                padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-                display: flex;
-                align-items: center;
-                flex: 0 0 auto;
-                position: absolute;
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-            }
-        }
-    }
-    .k-listgroup-item-segmented {
-        align-items: stretch;
-
-        > .k-link {
-            margin-inline-end: 0;
-        }
-
-        > .k-select {
-            margin-inline-start: 0;
-            margin-inline-end: var( --kendo-listgroup-item-padding-x, calc( #{$kendo-listgroup-item-padding-x} * -1 ) );
-            margin-block: var( --kendo-listgroup-item-padding-y, calc( #{$kendo-listgroup-item-padding-y} * -1 ) );
-            padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-            padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-            border-width: 0 0 0 1px;
-            border-style: solid;
-            border-color: inherit;
-            cursor: pointer;
-        }
-    }
-
-
-    // Forms in listgroup
-    .k-listgroup-form-row {
-        margin-inline: var( --kendo-listgroup-item-padding-x, calc( #{$kendo-listgroup-item-padding-x} * -1 ) );
-        margin-block: var( --kendo-listgroup-item-padding-y, calc( #{$kendo-listgroup-item-padding-y} * -1) );
-        padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
-        padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        flex: 1 1 auto;
-        position: relative;
-
-        .k-listgroup-form-field-label {
-            width: 40%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .k-listgroup-form-field-wrapper {
-            width: 50%;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-end;
-            text-align: end;
-            position: relative;
-
-            select,
-            input[type="text"],
-            input[type="password"],
-            input[type="date"],
-            input[type="time"],
-            input[type="datetime-local"],
-            input[type="number"],
-            textarea {
-                width: 100%;
-                box-sizing: border-box;
-                flex: 1 1 100%;
-            }
-
-            textarea {
-                min-height: 4em;
-                resize: vertical;
-            }
-        }
-    }
-    .k-listgroup-item.k-listgroup-form-row {
-        margin: 0;
-    }
-
-
-    // RTL Styles
-    [dir="rtl"] {
-
-        .k-listgroup-item {
-
-            > .k-link {
-
-                > .k-select {
-                    right: auto;
-                    left: 0;
-                }
-
-            }
-
-        }
-        .k-listgroup-item-segmented {
-
-            > .k-select {
-                border-right-width: 1px;
-                border-left-width: 0;
-            }
-
-        }
-    }
-
+    @include kendo-listgroup--layout-base();
 }

package/scss/listgroup/_theme.scss

@@ -1,14 +1,8 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/listgroup/_theme.scss" as *;
 
 @mixin kendo-listgroup--theme() {
-
-    .k-listgroup {
-        @include fill(
-            var( --kendo-listgroup-text, #{$kendo-listgroup-text} ),
-            var( --kendo-listgroup-bg, #{$kendo-listgroup-bg} ),
-            var( --kendo-listgroup-border, #{$kendo-listgroup-border} )
-        );
-    }
+    @include kendo-listgroup--theme-base();
 
 }

package/scss/listgroup/_variables.scss

@@ -4,34 +4,47 @@
 
 /// Border width of the listgroup.
 /// @group listgroup
-$kendo-listgroup-border-width: 1px !default;
+$kendo-listgroup-border-width: var( --kendo-listgroup-border-width, 1px ) !default;
 /// Border radius of the listgroup.
 /// @group listgroup
-$kendo-listgroup-border-radius: k-border-radius(md) !default;
+$kendo-listgroup-border-radius: var( --kendo-listgroup-border-radius, #{k-border-radius(md)} ) !default;
 
 /// Font size of the listgroup.
 /// @group listgroup
-$kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-listgroup-font-size: var( --kendo-listgroup-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// Line height of the listgroup.
 /// @group listgroup
-$kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-listgroup-line-height: var( --kendo-listgroup-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// Background color of the listgroup component.
 /// @group listgroup
-$kendo-listgroup-bg: k-color(surface-alt) !default;
+$kendo-listgroup-bg: var( --kendo-listgroup-bg, #{k-color(surface-alt)} ) !default;
 /// Text color of the listgroup component.
 /// @group listgroup
-$kendo-listgroup-text: k-color(on-app-surface) !default;
+$kendo-listgroup-text: var( --kendo-listgroup-text, #{k-color(on-app-surface)} ) !default;
 /// Border color of the listgroup component.
 /// @group listgroup
-$kendo-listgroup-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-listgroup-border: var( --kendo-listgroup-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// Horizontal padding of the listgroup items.
 /// @group listgroup
-$kendo-listgroup-item-padding-x: k-spacing(2) !default;
+$kendo-listgroup-item-padding-x: var( --kendo-listgroup-item-padding-x, #{k-spacing(2)} ) !default;
 /// Vertical padding of the listgroup items.
 /// @group listgroup
-$kendo-listgroup-item-padding-y: k-spacing(2) !default;
+$kendo-listgroup-item-padding-y: var( --kendo-listgroup-item-padding-y, #{k-spacing(2)} ) !default;
 /// Border width of the listgroup item.
 /// @group listgroup
-$kendo-listgroup-item-border-width: 1px !default;
+$kendo-listgroup-item-border-width: var( --kendo-listgroup-item-border-width, 1px ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/listgroup/_variables.scss" with (
+    $kendo-listgroup-border-width: $kendo-listgroup-border-width,
+    $kendo-listgroup-border-radius: $kendo-listgroup-border-radius,
+    $kendo-listgroup-font-size: $kendo-listgroup-font-size,
+    $kendo-listgroup-line-height: $kendo-listgroup-line-height,
+    $kendo-listgroup-bg: $kendo-listgroup-bg,
+    $kendo-listgroup-text: $kendo-listgroup-text,
+    $kendo-listgroup-border: $kendo-listgroup-border,
+    $kendo-listgroup-item-padding-x: $kendo-listgroup-item-padding-x,
+    $kendo-listgroup-item-padding-y: $kendo-listgroup-item-padding-y,
+    $kendo-listgroup-item-border-width: $kendo-listgroup-item-border-width
+);

package/scss/listview/_layout.scss

@@ -1,149 +1,22 @@
+@use "@progress/kendo-theme-core/scss/components/listview/_layout.scss" as *;
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-listview--layout() {
+    @include kendo-listview--layout-base();
 
-    // Listview
-    .k-listview {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-listview-font-family, #{$kendo-listview-font-family} );
-        font-size: var( --kendo-listview-font-size, #{$kendo-listview-font-size} );
-        line-height: var( --kendo-listview-line-height, #{$kendo-listview-line-height} );
-        display: flex;
-        flex-flow: column nowrap;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: transparent;
-    }
-    .k-listview-bordered {
-        border-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-    }
-
-
-    // Listview content
-    .k-listview-content {
-        margin: 0;
-        padding: 0;
-        outline: 0;
-        flex-grow: 1;
-        position: relative;
-        overflow: auto;
-
-        &::after {
-            height: 0;
-            clear: both;
-            display: block;
-        }
-    }
-    .k-listview-content.k-d-flex,
-    .k-listview-content.k-d-grid {
-        &::after { display: none; }
-    }
     .k-listview-content.k-d-grid {
         grid-gap: var( --kendo-listview-grid-gap, #{$kendo-listview-grid-gap} );
     }
-    .k-listview-content-padding-rectangle {
-        padding-inline: var( --kendo-listview-padding-x, #{$kendo-listview-padding-x} );
-        padding-block: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
-    }
-    .k-listview-content-padding-square {
-        padding: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
-    }
 
-
-    // Listview item
-    .k-listview-item {
-        padding: 0;
-        border-width: 0;
-        outline: 0;
-        border-style: solid;
-        box-sizing: border-box;
-        flex-shrink: 0;
-    }
-    .k-listview-item-padding-rectangle {
-        padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
-        padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
-    }
-    .k-listview-item-padding-rectangle .k-listview-link {
-        margin-inline: calc( var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} ) * -1);
-        margin-block: calc( var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} ) * -1);
-        padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
-        padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
-    }
-    .k-listview-item-padding-square {
-        padding: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
-    }
-    .k-listview-item-padding-square .k-listview-link {
-        margin: (-$kendo-listview-item-padding-y);
-        padding: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
-    }
-
-
-    // Header
     .k-listview-header {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        padding-inline: var( --kendo-listview-header-padding-x, #{$kendo-listview-header-padding-x} );
-        padding-block: var( --kendo-listview-header-padding-y, #{$kendo-listview-header-padding-y} );
+        padding-inline: $kendo-listview-header-padding-x;
+        padding-block: $kendo-listview-header-padding-y;
     }
-    .k-listview-bordered > .k-listview-header {
-        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-    }
-
 
-    // Listview footer
     .k-listview-footer {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        padding-inline: var( --kendo-listview-footer-padding-x, #{$kendo-listview-footer-padding-x} );
-        padding-block: var( --kendo-listview-footer-padding-y, #{$kendo-listview-footer-padding-y} );
-
-    }
-    .k-listview-bordered > .k-listview-footer {
-        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+        padding-inline: $kendo-listview-footer-padding-x;
+        padding-block: $kendo-listview-footer-padding-y;
     }
 
-
-    // Listview pager
-    .k-listview-pager {
-        border-width: 0;
-        border-color: inherit;
-    }
-    .k-listview-bordered > .k-listview-pager-top {
-        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-    }
-    .k-listview-bordered > .k-listview-pager-bottom {
-        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-    }
-
-
-    // Borders
-    .k-listview-borders-all {
-        .k-listview-item {
-            border-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-        }
-    }
-    .k-listview-borders-horizontal {
-        .k-listview-item {
-            border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-        }
-        .k-listview-item:first-child {
-            border-block-start-width: 0;
-        }
-    }
-    .k-listview-borders-vertical {
-        .k-listview-item {
-            border-inline-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
-        }
-        .k-listview-item:first-child {
-            border-inline-start-width: 0;
-        }
-    }
 }

package/scss/listview/_theme.scss

@@ -1,55 +1,26 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/listview/_theme.scss" as *;
 
 @mixin kendo-listview--theme() {
-    // Listview
-    .k-listview {
-        @include fill(
-            var( --kendo-listview-text, $kendo-listview-text ),
-            var( --kendo-listview-bg, $kendo-listview-bg ),
-            var( --kendo-listview-border, $kendo-listview-border )
-        );
-    }
-
-
-    // Listview content
-    .k-listview-content {
+    @include kendo-listview--theme-base();
 
-        > .k-focus {
-            @include fill(
-                var( --kendo-listview-item-focus-text, $kendo-listview-item-focus-text ),
-                var( --kendo-listview-item-focus-bg, $kendo-listview-item-focus-bg )
-            );
-            box-shadow: var( --kendo-listview-item-focus-shadow, $kendo-listview-item-focus-shadow );
-        }
-
-        > .k-selected {
-            @include fill(
-                var( --kendo-listview-item-selected-text, $kendo-listview-item-selected-text ),
-                var( --kendo-listview-item-selected-bg, $kendo-listview-item-selected-bg )
-            )
-        }
-    }
-
-    // List item
-    .k-listview-item {
-        border-color: $kendo-listview-border;
-    }
+    // Fluent-specific styles
 
     // Listview header
     .k-listview-header {
         @include fill(
-            var( --kendo-listview-header-text, $kendo-listview-header-text ),
-            var( --kendo-listview-header-bg, $kendo-listview-header-bg ),
-            var( --kendo-listview-header-border, $kendo-listview-header-border )
+            $kendo-listview-header-text,
+            $kendo-listview-header-bg,
+            $kendo-listview-header-border
         )
     }
 
     // Listview footer
     .k-listview-footer {
         @include fill(
-            var( --kendo-listview-footer-text, $kendo-listview-footer-text ),
-            var( --kendo-listview-footer-bg, $kendo-listview-footer-bg )
+            $kendo-listview-footer-text,
+            $kendo-listview-footer-bg
         )
     }
 }

package/scss/listview/_variables.scss

@@ -4,89 +4,116 @@
 
 /// The horizontal padding of the ListView.
 /// @group listview
-$kendo-listview-padding-x: k-spacing(1) !default;
+$kendo-listview-padding-x: var( --kendo-listview-padding-x, k-spacing(1) ) !default;
 /// The vertical padding of the ListView.
 /// @group listview
-$kendo-listview-padding-y: k-spacing(1) !default;
+$kendo-listview-padding-y: var( --kendo-listview-padding-y, k-spacing(1) ) !default;
 /// The width of the border around bordered ListView.
 /// @group listview
 $kendo-listview-border-width: 1px !default;
 
 /// The horizontal padding of the ListView header.
 /// @group listview
-$kendo-listview-header-padding-x: k-spacing(4) !default;
+$kendo-listview-header-padding-x: var( --kendo-listview-header-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the ListView header.
 /// @group listview
-$kendo-listview-header-padding-y: k-spacing(2) !default;
+$kendo-listview-header-padding-y: var( --kendo-listview-header-padding-y, k-spacing(2) ) !default;
 
 /// The horizontal padding of the ListView footer.
 /// @group listview
-$kendo-listview-footer-padding-x: $kendo-listview-header-padding-x !default;
+$kendo-listview-footer-padding-x: var( --kendo-listview-footer-padding-x, $kendo-listview-header-padding-x ) !default;
 /// The vertical padding of the ListView footer.
 /// @group listview
-$kendo-listview-footer-padding-y: $kendo-listview-header-padding-y !default;
+$kendo-listview-footer-padding-y: var( --kendo-listview-footer-padding-y, $kendo-listview-header-padding-y ) !default;
 
 /// The horizontal padding of the ListView items.
 /// @group listview
-$kendo-listview-item-padding-x: k-spacing(1) !default;
+$kendo-listview-item-padding-x: var( --kendo-listview-item-padding-x, k-spacing(1) ) !default;
 /// The vertical padding of the ListView items.
 /// @group listview
-$kendo-listview-item-padding-y: k-spacing(1) !default;
+$kendo-listview-item-padding-y: var( --kendo-listview-item-padding-y, k-spacing(1) ) !default;
 
 /// The font family of the ListView.
 /// @group listview
-$kendo-listview-font-family: var( --kendo-font-family, initial ) !default;
+$kendo-listview-font-family: var( --kendo-listview-font-family, var( --kendo-font-family, initial ) ) !default;
 /// The font size of the ListView.
 /// @group listview
-$kendo-listview-font-size: var( --kendo-font-size, initial ) !default;
+$kendo-listview-font-size: var( --kendo-listview-font-size, var( --kendo-font-size, initial ) ) !default;
 /// The line height of the ListView.
 /// @group listview
-$kendo-listview-line-height: var( --kendo-line-height, initial ) !default;
-
-/// The gap between items of ListView with grid layout.
-/// @group listview
-$kendo-listview-grid-gap: k-spacing(.0) !default;
+$kendo-listview-line-height: var( --kendo-listview-line-height, var( --kendo-line-height, initial ) ) !default;
 
 /// The text color of the ListView.
 /// @group listview
-$kendo-listview-text: k-color(on-app-surface) !default;
+$kendo-listview-text: var( --kendo-listview-text, k-color(on-app-surface) ) !default;
 /// The background color of the ListView.
 /// @group listview
-$kendo-listview-bg: k-color(surface-alt) !default;
+$kendo-listview-bg: var( --kendo-listview-bg, k-color(surface-alt) ) !default;
 /// The border color of the ListView.
 /// @group listview
-$kendo-listview-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-listview-border: var( --kendo-listview-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
-/// The text color of the ListView header.
+/// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-header-text: initial !default;
-/// The background color of the ListView header.
+$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, initial ) !default;
+/// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-header-bg: initial !default;
-/// The border color of the ListView header.
+$kendo-listview-item-selected-bg: var( --kendo-listview-item-selected-bg, k-color(base-active) ) !default;
+/// The border color of the selected ListView items.
 /// @group listview
-$kendo-listview-header-border: $kendo-listview-border !default;
+$kendo-listview-item-selected-border: var( --kendo-listview-item-selected-border, initial ) !default;
 
-/// The text color of the ListView footer.
+/// The text color of the focused ListView items.
 /// @group listview
-$kendo-listview-footer-text: initial !default;
-/// The background color of the ListView footer.
+$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, initial ) !default;
+/// The background color of the focused ListView items.
 /// @group listview
-$kendo-listview-footer-bg: initial !default;
-
-/// The text color of the selected ListView items.
+$kendo-listview-item-focus-bg: var( --kendo-listview-item-focus-bg, initial ) !default;
+/// The border color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-selected-text: initial !default;
-/// The background color of the selected ListView items.
+$kendo-listview-item-focus-border: var( --kendo-listview-item-focus-border, initial ) !default;
+/// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: k-color(base-active) !default;
+$kendo-listview-item-focus-shadow: var( --kendo-listview-item-focus-shadow, var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) ) !default;
 
-/// The text color of the focused ListView items.
+/// The gap between items of ListView with grid layout.
 /// @group listview
-$kendo-listview-item-focus-text: initial !default;
-/// The background color of the focused ListView items.
+$kendo-listview-grid-gap: var( --kendo-listview-grid-gap, k-spacing(.0) ) !default;
+
+/// The text color of the ListView header.
 /// @group listview
-$kendo-listview-item-focus-bg: initial !default;
-/// The box shadow of the focused ListView items.
+$kendo-listview-header-text: var( --kendo-listview-header-text, initial ) !default;
+/// The background color of the ListView header.
 /// @group listview
-$kendo-listview-item-focus-shadow: var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) !default;
+$kendo-listview-header-bg: var( --kendo-listview-header-bg, initial ) !default;
+/// The border color of the ListView header.
+/// @group listview
+$kendo-listview-header-border: var( --kendo-listview-header-border, $kendo-listview-border ) !default;
+
+/// The text color of the ListView footer.
+/// @group listview
+$kendo-listview-footer-text: var( --kendo-listview-footer-text, initial ) !default;
+/// The background color of the ListView footer.
+/// @group listview
+$kendo-listview-footer-bg: var( --kendo-listview-footer-bg, initial ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (
+    $kendo-listview-padding-x: $kendo-listview-padding-x,
+    $kendo-listview-padding-y: $kendo-listview-padding-y,
+    $kendo-listview-border-width: $kendo-listview-border-width,
+    $kendo-listview-font-family: $kendo-listview-font-family,
+    $kendo-listview-font-size: $kendo-listview-font-size,
+    $kendo-listview-line-height: $kendo-listview-line-height,
+    $kendo-listview-text: $kendo-listview-text,
+    $kendo-listview-bg: $kendo-listview-bg,
+    $kendo-listview-border: $kendo-listview-border,
+    $kendo-listview-item-padding-x: $kendo-listview-item-padding-x,
+    $kendo-listview-item-padding-y: $kendo-listview-item-padding-y,
+    $kendo-listview-item-selected-text: $kendo-listview-item-selected-text,
+    $kendo-listview-item-selected-bg: $kendo-listview-item-selected-bg,
+    $kendo-listview-item-selected-border: $kendo-listview-item-selected-border,
+    $kendo-listview-item-focus-text: $kendo-listview-item-focus-text,
+    $kendo-listview-item-focus-bg: $kendo-listview-item-focus-bg,
+    $kendo-listview-item-focus-border: $kendo-listview-item-focus-border,
+    $kendo-listview-item-focus-shadow: $kendo-listview-item-focus-shadow
+);