@progress/kendo-theme-fluent 5.7.0

package/scss/list/_layout.scss

@@ -0,0 +1,255 @@
+@use "../core/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-list--layout() {
+
+    .k-list {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-size: var( --INTERNAL--kendo-list-font-size, 1rem );
+        line-height: var( --INTERNAL--kendo-list-line-height, normal );
+        display: flex;
+        flex-flow: column nowrap;
+        outline: none;
+        position: relative;
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // List in popup
+    .k-popup > .k-list {
+        height: 100%;
+        border-width: 0;
+    }
+
+
+    // List header
+    .k-list-group-sticky-header {
+        padding-inline: var( --INTERNAL--kendo-list-header-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-list-header-padding-y, 0 );
+        border-width: 0;
+        border-width: var( --kendo-list-header-border-width, #{$kendo-list-header-border-width} ); // sass-lint:disable-line no-duplicate-properties
+        border-style: solid;
+        font-size: var( --INTERNAL--kendo-list-header-font-size, 1rem );
+        line-height: var( --INTERNAL--kendo-list-header-line-height, normal );
+        font-weight: var( --kendo-list-header-font-weight, #{$kendo-list-header-font-weight} );
+        white-space: nowrap;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        flex: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        z-index: 1;
+    }
+
+
+    // List content
+    .k-list-content {
+        border-color: inherit;
+        flex: 1 1 auto;
+        overflow: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        position: relative;
+    }
+
+
+    // List UL
+    .k-list-ul {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        border-color: inherit;
+        height: auto;
+        list-style: none;
+    }
+
+
+    // List item
+    .k-list-item {
+        padding-inline: var( --INTERNAL--kendo-list-item-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-list-item-padding-y, 0 );
+        border: 0;
+        font-size: var( --INTERNAL--kendo-list-item-font-size, 1rem );
+        line-height: var( --INTERNAL--kendo-list-item-line-height, normal );
+        outline: none;
+        cursor: pointer;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: var( --kendo-icon-spacing, .5rem );
+        position: relative;
+        transition-property: color, background-color, outline-color, box-shadow;
+        transition-duration: 200ms;
+        transition-timing-function: ease;
+
+        &.k-first::before {
+            content: "";
+            border-width: 1px 0 0;
+            border-style: solid;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+    .k-list-item-text,
+    .k-list-optionlabel {
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+        }
+    }
+    .k-list-optionlabel {
+        @extend .k-list-item;
+    }
+
+
+    // List group item
+    .k-list-group-item {
+        padding-inline: var( --INTERNAL--kendo-list-group-item-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-list-group-item-padding-y, 0 );
+        border-width: 0;
+        border-width: var( --kendo-list-group-item-border-width, #{$kendo-list-group-item-border-width} ); // sass-lint:disable-line no-duplicate-properties
+        border-style: solid;
+        font-size: var( --INTERNAL--kendo-list-group-item-font-size, 1rem );
+        line-height: var( --INTERNAL--kendo-list-group-item-line-height, normal );
+        font-weight: var( --kendo-list-group-item-font-weight, #{$kendo-list-group-item-font-weight} );
+        cursor: default;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: var( --kendo-icon-spacing, .5rem );
+        position: relative;
+    }
+
+
+    // List item group label
+    .k-list-item-group-label {
+        padding-inline: var( --INTERNAL--kendo-list-item-group-label-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-list-item-group-label-padding-y, 0 );
+        font-size: var( --INTERNAL--kendo-list-item-group-label-font-size, 1rem );
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+
+    // Virtualization
+    .k-virtual-list {}
+    .k-virtual-content,
+    .k-virtual-list .k-list-content {
+        overflow-y: scroll;
+    }
+    .k-virtual-list .k-list-item,
+    .k-virtual-list .k-list-group-item,
+    .k-virtual-content .k-list-item,
+    .k-virtual-content .k-list-group-item {
+        position: absolute;
+        width: 100%;
+    }
+    .k-virtual-list .k-list-item-text,
+    .k-virtual-list .k-list-header-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .k-virtual-list .k-list-optionlabel {
+        position: relative;
+    }
+
+
+    // Filter
+    .k-list-filter {
+        display: block;
+        position: relative;
+        padding: var( --kendo-padding-x, #{$kendo-padding-x} );
+        box-sizing: border-box;
+        flex: 0 0 auto;
+    }
+
+
+    // Switch sizes
+    @each $size, $size-props in $kendo-list-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_header-padding-x: map-get( $size-props, header-padding-x );
+        $_header-padding-y: map-get( $size-props, header-padding-y );
+        $_header-font-size: map-get( $size-props, header-font-size );
+        $_header-line-height: map-get( $size-props, header-line-height );
+        $_item-padding-x: map-get( $size-props, item-padding-x );
+        $_item-padding-y: map-get( $size-props, item-padding-y );
+        $_item-font-size: map-get( $size-props, item-font-size );
+        $_item-line-height: map-get( $size-props, item-line-height );
+        $_item-group-label-padding-x: map-get( $size-props, item-group-label-padding-x );
+        $_item-group-label-padding-y: map-get( $size-props, item-group-label-padding-y );
+        $_item-group-label-font-size: map-get( $size-props, item-group-label-font-size );
+        $_group-item-padding-x: map-get( $size-props, group-item-padding-x );
+        $_group-item-padding-y: map-get( $size-props, group-item-padding-y );
+        $_group-item-font-size: map-get( $size-props, group-item-font-size );
+        $_group-item-line-height: map-get( $size-props, group-item-line-height );
+
+        .k-list-#{$size} {
+            --INTERNAL--kendo-list-font-size: var( --kendo-list-#{$size}-font-size, #{$_font-size} );
+            --INTERNAL--kendo-list-line-height: var( --kendo-list-#{$size}-line-height, #{$_line-height} );
+
+            .k-list-group-sticky-header {
+                --INTERNAL--kendo-list-header-padding-x: var( --kendo-list-#{$size}-header-padding-x, #{$_header-padding-x} );
+                --INTERNAL--kendo-list-header-padding-y: var( --kendo-list-#{$size}-header-padding-y, #{$_header-padding-y} );
+                --INTERNAL--kendo-list-header-font-size: var( --kendo-list-#{$size}-header-font-size, #{$_header-font-size} );
+                --INTERNAL--kendo-list-header-line-height: var( --kendo-list-#{$size}-header-line-height, #{$_header-line-height} );
+            }
+
+            .k-list-item {
+                --INTERNAL--kendo-list-item-padding-x: var( --kendo-list-#{$size}-item-padding-x, #{$_item-padding-x} );
+                --INTERNAL--kendo-list-item-padding-y: var( --kendo-list-#{$size}-item-padding-y, #{$_item-padding-y} );
+                --INTERNAL--kendo-list-item-font-size: var( --kendo-list-#{$size}-item-font-size, #{$_item-font-size} );
+                --INTERNAL--kendo-list-item-line-height: var( --kendo-list-#{$size}-item-line-height, #{$_item-line-height} );
+            }
+
+            .k-list-group-item {
+                --INTERNAL--kendo-list-group-item-padding-x: var( --kendo-list-#{$size}-group-item-padding-x, #{$_group-item-padding-x} );
+                --INTERNAL--kendo-list-group-item-padding-y: var( --kendo-list-#{$size}-group-item-padding-y, #{$_group-item-padding-y} );
+                --INTERNAL--kendo-list-group-item-font-size: var( --kendo-list-#{$size}-group-item-font-size, #{$_group-item-font-size} );
+                --INTERNAL--kendo-list-group-item-line-height: var( --kendo-list-#{$size}-group-item-line-height, #{$_group-item-line-height} );
+            }
+
+            .k-list-item-group-label {
+                --INTERNAL--kendo-list-item-group-label-padding-x: var( --kendo-list-#{$size}-item-group-label-padding-x, #{$_item-group-label-padding-x} );
+                --INTERNAL--kendo-list-item-group-label-padding-y: var( --kendo-list-#{$size}-item-group-label-padding-y, #{$_item-group-label-padding-y} );
+                --INTERNAL--kendo-list-item-group-label-font-size: var( --kendo-list-#{$size}-item-group-label-font-size, #{$_item-group-label-font-size} );
+            }
+        }
+    }
+
+
+    // No data
+    .k-no-data {
+        min-height: 140px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        text-align: center;
+        white-space: normal;
+    }
+
+
+    // Alias
+    .k-nodata {
+        @extend .k-no-data !optional;
+    }
+
+}

package/scss/list/_theme.scss

@@ -0,0 +1,104 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-list--theme() {
+
+    .k-list {
+        @include fill(
+            var( --kendo-list-text, #{$kendo-list-text} ),
+            var( --kendo-list-bg, #{$kendo-list-bg} ),
+            var( --kendo-list-border, #{$kendo-list-border} )
+        );
+    }
+
+
+    // List header
+    .k-list-group-sticky-header {
+        @include fill(
+            var( --kendo-list-header-text, #{$kendo-list-header-text} ),
+            var( --kendo-list-header-bg, #{$kendo-list-header-bg} ),
+            var( --kendo-list-header-border, #{$kendo-list-header-border} )
+        );
+        @include box-shadow( var( --kendo-list-header-shadow, #{$kendo-list-header-shadow} ) );
+    }
+
+
+    // List item
+    .k-list-item {
+        --INTERNAL--kendo-list-item-text: var( --kendo-list-item-text, #{$kendo-list-item-text} );
+        --INTERNAL--kendo-list-item-bg: var( --kendo-list-item-bg, #{$kendo-list-item-bg} );
+
+        @include fill(
+            var( --INTERNAL--kendo-list-item-text, inherit ),
+            var( --INTERNAL--kendo-list-item-bg, transparent )
+        );
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-list-item-text: var( --kendo-list-item-hover-text, #{$kendo-list-item-hover-text} );
+            --INTERNAL--kendo-list-item-bg: var( --kendo-list-item-hover-bg, #{$kendo-list-item-hover-bg} );
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-list-item-text: var( --kendo-list-item-focus-text, #{$kendo-list-item-focus-text} );
+            --INTERNAL--kendo-list-item-bg: var( --kendo-list-item-focus-bg, #{$kendo-list-item-focus-bg} );
+
+            @include box-shadow( var( --kendo-list-item-focus-shadow, #{$kendo-list-item-focus-shadow} ) );
+        }
+
+        // Selected
+        &.k-selected {
+            --INTERNAL--kendo-list-item-text: var( --kendo-list-item-selected-text, #{$kendo-list-item-selected-text} );
+            --INTERNAL--kendo-list-item-bg: var( --kendo-list-item-selected-bg, #{$kendo-list-item-selected-bg} );
+        }
+        &.k-selected:hover,
+        &.k-selected.k-hover {
+            --INTERNAL--kendo-list-item-text: var( --kendo-list-item-selected-hover-text, #{$kendo-list-item-selected-hover-text} );
+            --INTERNAL--kendo-list-item-bg: var( --kendo-list-item-selected-hover-bg, #{$kendo-list-item-selected-hover-bg } );
+        }
+
+        // Disabled
+        &:disabled,
+        &.k-disabled {
+            --INTERNAL--kendo-list-item-text: var( --kendo-list-item-disabled-text, #{$kendo-list-item-disabled-text} );
+            --INTERNAL--kendo-list-item-bg: var( --kendo-list-item-disabled-bg, #{$kendo-list-item-disabled-bg} );
+        }
+    }
+
+    // Icon
+    .k-list-item .k-icon {
+        @include fill(
+            $color: var( --kendo-list-item-icon-text, #{$kendo-list-item-icon-text} )
+        );
+    }
+
+
+    // List group item
+    .k-list-group-item {
+        @include fill(
+            var( --kendo-list-group-item-text, #{$kendo-list-group-item-text} ),
+            var( --kendo-list-group-item-bg, #{$kendo-list-group-item-bg} ),
+            var( --kendo-list-group-item-border, #{$kendo-list-group-item-border} )
+        );
+        @include box-shadow( var( --kendo-list-group-item-shadow, #{$kendo-list-group-item-shadow} ) );
+    }
+
+
+    // List item group label
+    .k-list-item-group-label {
+        @include fill(
+            var( --kendo-list-bg, #{$kendo-list-bg} ),
+            var( --kendo-list-text, #{$kendo-list-text} )
+        );
+    }
+
+
+    // No data
+    .k-no-data {
+        color: var( --kendo-list-no-data-text, #{$kendo-list-no-data-text} );
+    }
+
+}

package/scss/list/_variables.scss

@@ -0,0 +1,273 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Font size of the list component.
+/// @group list
+$kendo-list-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-list-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-list-font-size-lg: var( --kendo-font-size, inherit ) !default;
+
+/// Line height of the list component.
+/// @group list
+$kendo-list-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-list-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-list-line-height-lg: var( --kendo-line-height, normal ) !default;
+
+/// Horizontal padding of list header.
+/// @group list
+$kendo-list-header-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+
+/// Vertical padding of list header.
+/// @group list
+$kendo-list-header-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-list-header-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// Border width of list header.
+/// @group list
+$kendo-list-header-border-width: 0 !default;
+
+/// Font size of list header.
+/// @group list
+$kendo-list-header-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-list-header-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-list-header-font-size-lg: var( --kendo-font-size, inherit ) !default;
+
+/// Line height of list header.
+/// @group list
+$kendo-list-header-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-list-header-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-list-header-line-height-lg: var( --kendo-line-height, normal ) !default;
+
+/// Font weight of list header.
+/// @group list
+$kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+
+/// Horizontal padding of list items.
+/// @group list
+$kendo-list-item-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+
+/// Vertical padding of list items.
+/// @group list
+$kendo-list-item-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-list-item-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// Font size of list items.
+/// @group list
+$kendo-list-item-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-list-item-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-list-item-font-size-lg: var( --kendo-font-size, inherit ) !default;
+
+/// Line height of list items.
+/// @group list
+$kendo-list-item-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-list-item-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-list-item-line-height-lg: var( --kendo-line-height, normal ) !default;
+
+/// Font size of list item group label.
+/// @group list
+$kendo-list-item-group-label-font-size-sm: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-list-item-group-label-font-size-md: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-list-item-group-label-font-size-lg: var( --kendo-font-size-xs, inherit ) !default;
+
+/// Horizontal padding of list group items.
+/// @group list
+$kendo-list-group-item-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+
+/// Vertical padding of list group items.
+/// @group list
+$kendo-list-group-item-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-list-group-item-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// Horizontal padding of list item group label.
+/// @group list
+$kendo-list-item-group-label-padding-x-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-list-item-group-label-padding-x-md: map-get( $kendo-spacing, 1 ) !default;
+$kendo-list-item-group-label-padding-x-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// Vertical padding of list item group label.
+/// @group list
+$kendo-list-item-group-label-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-list-item-group-label-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
+$kendo-list-item-group-label-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// Border width of list group items.
+/// @group list
+$kendo-list-group-item-border-width: 1px 0 0 !default;
+
+/// Font size of list group items.
+/// @group list
+$kendo-list-group-item-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-list-group-item-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-list-group-item-font-size-lg: var( --kendo-font-size, inherit ) !default;
+
+/// Line height of list group items.
+/// @group list
+$kendo-list-group-item-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-list-group-item-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-list-group-item-line-height-lg: var( --kendo-line-height, normal ) !default;
+
+/// Font weight of list group item.
+/// @group list
+$kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+
+/// Color of the list item icon
+/// @group list
+$kendo-list-item-icon-text: get-theme-color-var( primary-100 ) !default;
+
+// Kendo list sizes
+$kendo-list-sizes: (
+    sm: (
+        font-size: $kendo-list-font-size-sm,
+        line-height: $kendo-list-line-height-sm,
+        header-padding-x: $kendo-list-header-padding-x-sm,
+        header-padding-y: $kendo-list-header-padding-y-sm,
+        header-font-size: $kendo-list-header-font-size-sm,
+        header-line-height: $kendo-list-header-line-height-sm,
+        item-padding-x: $kendo-list-item-padding-x-sm,
+        item-padding-y: $kendo-list-item-padding-y-sm,
+        item-font-size: $kendo-list-item-font-size-sm,
+        item-line-height: $kendo-list-item-line-height-sm,
+        item-group-label-padding-x: $kendo-list-item-group-label-padding-x-sm,
+        item-group-label-padding-y: $kendo-list-item-group-label-padding-y-sm,
+        item-group-label-font-size: $kendo-list-item-group-label-font-size-sm,
+        group-item-padding-x: $kendo-list-group-item-padding-x-sm,
+        group-item-padding-y: $kendo-list-group-item-padding-y-sm,
+        group-item-font-size: $kendo-list-group-item-font-size-sm,
+        group-item-line-height: $kendo-list-group-item-line-height-sm
+    ),
+    md: (
+        font-size: $kendo-list-font-size-md,
+        line-height: $kendo-list-line-height-md,
+        header-padding-x: $kendo-list-header-padding-x-md,
+        header-padding-y: $kendo-list-header-padding-y-md,
+        header-font-size: $kendo-list-header-font-size-md,
+        header-line-height: $kendo-list-header-line-height-md,
+        item-padding-x: $kendo-list-item-padding-x-md,
+        item-padding-y: $kendo-list-item-padding-y-md,
+        item-font-size: $kendo-list-item-font-size-md,
+        item-line-height: $kendo-list-item-line-height-md,
+        item-group-label-padding-x: $kendo-list-item-group-label-padding-x-md,
+        item-group-label-padding-y: $kendo-list-item-group-label-padding-y-md,
+        item-group-label-font-size: $kendo-list-item-group-label-font-size-md,
+        group-item-padding-x: $kendo-list-group-item-padding-x-md,
+        group-item-padding-y: $kendo-list-group-item-padding-y-md,
+        group-item-font-size: $kendo-list-group-item-font-size-md,
+        group-item-line-height: $kendo-list-group-item-line-height-md
+    ),
+    lg: (
+        font-size: $kendo-list-font-size-lg,
+        line-height: $kendo-list-line-height-lg,
+        header-padding-x: $kendo-list-header-padding-x-lg,
+        header-padding-y: $kendo-list-header-padding-y-lg,
+        header-font-size: $kendo-list-header-font-size-lg,
+        header-line-height: $kendo-list-header-line-height-lg,
+        item-padding-x: $kendo-list-item-padding-x-lg,
+        item-padding-y: $kendo-list-item-padding-y-lg,
+        item-font-size: $kendo-list-item-font-size-lg,
+        item-line-height: $kendo-list-item-line-height-lg,
+        item-group-label-padding-x: $kendo-list-item-group-label-padding-x-lg,
+        item-group-label-padding-y: $kendo-list-item-group-label-padding-y-lg,
+        item-group-label-font-size: $kendo-list-item-group-label-font-size-lg,
+        group-item-padding-x: $kendo-list-group-item-padding-x-lg,
+        group-item-padding-y: $kendo-list-group-item-padding-y-lg,
+        group-item-font-size: $kendo-list-group-item-font-size-lg,
+        group-item-line-height: $kendo-list-group-item-line-height-lg
+    )
+) !default;
+
+
+/// Background color of the list component.
+/// @group list
+$kendo-list-bg: var( --kendo-component-bg, transparent ) !default;
+/// Text color of the list component.
+/// @group list
+$kendo-list-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the list component.
+/// @group list
+$kendo-list-border: var( --kendo-component-border, inherit ) !default;
+
+
+/// Background color of list header.
+/// @group list
+$kendo-list-header-bg: $white !default;
+/// Text color of list header.
+/// @group list
+$kendo-list-header-text: get-theme-color-var( primary-100 ) !default;
+/// Border color of list header.
+/// @group list
+$kendo-list-header-border: inherit !default;
+/// Box shadow of list header.
+/// @group list
+$kendo-list-header-shadow: $kendo-box-shadow-depth-3 !default;
+
+
+/// Background color of list items.
+/// @group list
+$kendo-list-item-bg: $white !default;
+/// Text color of list items.
+/// @group list
+$kendo-list-item-text: get-theme-color-var( neutral-160 ) !default;
+
+/// Background color of hovered list items.
+/// @group list
+$kendo-list-item-hover-bg: get-theme-color-var( neutral-20 ) !default;
+/// Text color of hovered list items.
+/// @group list
+$kendo-list-item-hover-text: get-theme-color-var( neutral-190 ) !default;
+
+/// Background color of focused list items.
+/// @group list
+$kendo-list-item-focus-bg: $white !default;
+/// Text color of focused list items.
+/// @group list
+$kendo-list-item-focus-text: get-theme-color-var( neutral-160 ) !default;
+/// Box shadow of focused list items.
+/// @group list
+$kendo-list-item-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+
+/// Background color of selected list items.
+/// @group list
+$kendo-list-item-selected-bg: get-theme-color-var( neutral-40 ) !default;
+/// Text color of selected list items.
+/// @group list
+$kendo-list-item-selected-text: get-theme-color-var( neutral-190 ) !default;
+
+/// Background color of selected hovered list items.
+/// @group list
+$kendo-list-item-selected-hover-bg: get-theme-color-var( neutral-50 ) !default;
+/// Text color of selected hovered list items.
+/// @group list
+$kendo-list-item-selected-hover-text: get-theme-color-var( neutral-190 ) !default;
+
+/// Background color of disabled list items.
+/// @group list
+$kendo-list-item-disabled-bg: $white !default;
+/// Text color of disabled list items.
+/// @group list
+$kendo-list-item-disabled-text: get-theme-color-var( neutral-90 ) !default;
+
+/// Background color of list group items.
+/// @group list
+$kendo-list-group-item-bg: $white !default;
+/// Text color of list group items.
+/// @group list
+$kendo-list-group-item-text: get-theme-color-var( primary-100 ) !default;
+/// The border color of list group items.
+/// @group list
+$kendo-list-group-item-border: inherit !default;
+/// The base shadow of list group items.
+/// @group list
+$kendo-list-group-item-shadow: none !default;
+
+/// Text color of the 'No Data' text.
+/// @group list
+$kendo-list-no-data-text: get-theme-color-var( neutral-160 ) !default;

package/scss/list/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "list",
+    dependencies: (
+        "checkbox",
+        "icon"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "list" ) {
+        @include kendo-list--layout();
+        @include kendo-list--theme();
+    }
+}