@progress/kendo-theme-fluent 5.7.0

package/scss/taskboard/_layout.scss

@@ -0,0 +1,205 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-taskboard--layout() {
+
+    // TaskBoard
+    .k-taskboard {
+        border-width: var( --kendo-taskboard-border-width, #{$kendo-taskboard-border-width} );
+        border-style: var( --kendo-taskboard-border-style, #{$kendo-taskboard-border-style} );
+        padding-inline: var( --kendo-taskboard-padding-x, #{$kendo-taskboard-padding-x} );
+        padding-inline: var( --kendo-taskboard-padding-y, #{$kendo-taskboard-padding-y} );
+        box-sizing: border-box;
+        font-size: var( --kendo-taskboard-font-size, #{$kendo-taskboard-font-size} );
+        font-family: var( --kendo-taskboard-font-family, #{$kendo-taskboard-font-family} );
+        line-height: var( --kendo-taskboard-line-height, #{$kendo-taskboard-line-height} );
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Toolbar
+    .k-taskboard-toolbar {
+        border-inline-width: 0;
+        border-block-start-width: 0;
+    }
+
+    // Content
+    .k-taskboard-content {
+        padding-inline: var( --kendo-taskboard-content-padding-x, #{$kendo-taskboard-content-padding-x} );
+        padding-block-start: 0;
+        padding-block-end: var( --kendo-taskboard-content-padding-y, #{$kendo-taskboard-content-padding-y} );
+        display: flex;
+        position: relative;
+        flex: 1 1 auto;
+        overflow-x: auto;
+    }
+
+    // Columns
+    .k-taskboard-columns-container {
+        outline: none;
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        gap: var( --kendo-taskboard-columns-container-gap, #{$kendo-taskboard-columns-container-gap} );
+        overflow-x: visible;
+    }
+
+    .k-taskboard-column {
+        width: var( --kendo-taskboard-column-width, #{$kendo-taskboard-column-width} );
+        border-width: var( --kendo-taskboard-column-border-width, #{$kendo-taskboard-column-border-width} );
+        border-radius: var( --kendo-taskboard-column-border-radius, #{$kendo-taskboard-column-border-radius} );
+        border-style: solid;
+        outline: none;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        overflow: hidden;
+    }
+
+    .k-taskboard-column-header {
+        padding-inline: var( --kendo-taskboard-column-header-padding-x, #{$kendo-taskboard-column-header-padding-x} );
+        padding-block: var( --kendo-taskboard-column-header-padding-y, #{$kendo-taskboard-column-header-padding-y} );
+        font-weight: var( --kendo-taskboard-column-header-font-weight, #{$kendo-taskboard-column-header-font-weight} );
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var( --kendo-taskboard-column-header-gap, #{$kendo-taskboard-column-header-gap} );
+    }
+
+    .k-taskboard-column-header-actions {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-self: flex-start;
+        gap: var( --kendo-taskboard-column-header-actions-gap, #{$kendo-taskboard-column-header-actions-gap} );
+    }
+
+    .k-taskboard-column-cards-container {
+        padding-inline: var( --kendo-taskboard-column-container-padding-x, #{$kendo-taskboard-column-container-padding-x} );
+        padding-block: var( --kendo-taskboard-column-container-padding-y, #{$kendo-taskboard-column-container-padding-y} );
+        outline: none;
+        overflow: auto;
+        flex: 1 1 auto;
+    }
+
+    .k-taskboard-column-cards {
+        margin-block-end: var( --kendo-taskboard-column-container-spacing-y, #{$kendo-taskboard-column-container-spacing-y} );
+        padding-inline: var( --kendo-taskboard-column-cards-padding-x, #{$kendo-taskboard-column-cards-padding-x} );
+        padding-block: var( --kendo-taskboard-column-cards-padding-y, #{$kendo-taskboard-column-cards-padding-y});
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: var( --kendo-taskboard-column-cards-gap, #{$kendo-taskboard-column-cards-gap} );
+    }
+
+    .k-taskboard-column-new,
+    .k-taskboard-column-edit {
+        .k-taskboard-column-header {
+            font-weight: inherit;
+        }
+
+        .k-taskboard-column-header-text {
+            flex: 1 1 100%;
+        }
+    }
+
+    // Preview/Edit Pane
+    .k-taskboard-pane {
+        padding-inline: var( --kendo-taskboard-pane-padding-x, #{$kendo-taskboard-pane-padding-y} );
+        padding-block: var( --kendo-taskboard-pane-padding-y, #{$kendo-taskboard-pane-padding-y} );
+        width: var( --kendo-taskboard-pane-width, #{$kendo-taskboard-pane-width} );
+        border-width: var( --kendo-taskboard-pane-border-width, #{$kendo-taskboard-pane-border-width} );
+        border-style: solid;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        z-index: 2;
+    }
+
+    .k-taskboard-pane-header {
+        padding-inline: var( --kendo-taskboard-pane-header-padding-x, #{$kendo-taskboard-pane-header-padding-x} );
+        padding-block: var( --kendo-taskboard-pane-header-padding-y, #{$kendo-taskboard-pane-header-padding-y} );
+        font-size: var( --kendo-taskboard-pane-header-font-size, #{$kendo-taskboard-pane-header-font-size} );
+        font-weight: var( --kendo-taskboard-pane-header-font-weight, #{$kendo-taskboard-pane-header-font-weight} );
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .k-taskboard-pane-header-text {
+        word-break: normal;
+        overflow-wrap: anywhere;
+    }
+
+    .k-taskboard-pane-header-actions {
+        flex-shrink: 0;
+        align-self: flex-start;
+    }
+
+    .k-taskboard-pane-content {
+        padding-inline: var( --kendo-taskboard-pane-content-padding-x, #{$kendo-taskboard-pane-content-padding-x} );
+        padding-block: var( --kendo-taskboard-pane-content-padding-y, #{$kendo-taskboard-pane-content-padding-y} );
+        overflow: auto;
+        flex: 1 1 auto;
+    }
+
+    .k-taskboard-pane-actions {
+        padding-inline: var( --kendo-taskboard-pane-actions-padding-x, #{$kendo-taskboard-pane-actions-padding-x} );
+        padding-block: var( --kendo-taskboard-pane-actions-padding-y, #{$kendo-taskboard-pane-actions-padding-y} );
+    }
+
+    .k-taskboard-pane-start {
+        inset-inline-end: auto;
+        inset-inline-start: 0;
+    }
+
+    // Cards
+    .k-taskboard-card {
+        &.k-taskboard-card-category {
+            border-inline-start-width: var( --kendo-taskboard-card-category-border-width, #{$kendo-taskboard-card-category-border-width} );
+        }
+
+        .k-card-header,
+        .k-card-body,
+        .k-card-footer {
+            padding-inline: var( --kendo-taskboard-card-padding-x, #{$kendo-taskboard-card-padding-x} );
+            padding-block: var( --kendo-taskboard-card-padding-y, #{$kendo-taskboard-card-padding-y} );
+        }
+
+        .k-card-header {
+            align-items: center;
+        }
+
+        .k-card-title {
+            font-size: inherit;
+            font-weight: inherit;
+            word-break: normal;
+            overflow-wrap: anywhere;
+            font-size: var( --kendo-taskboard-card-title-font-size, #{$kendo-taskboard-card-title-font-size} );
+            font-weight: var( --kendo-taskboard-card-title-font-weight, #{$kendo-taskboard-card-title-font-weight} );
+        }
+
+        .k-card-header-actions {
+            align-self: flex-start;
+        }
+    }
+
+    // Card Drag Placeholder
+    .k-taskboard-drag-placeholder {
+        border-radius: var( --kendo-taskboard-drag-placeholder-border-radius, #{$kendo-taskboard-drag-placeholder-border-radius} );
+        border-width: var( --kendo-taskboard-drag-placeholder-border-width, #{$kendo-taskboard-drag-placeholder-border-width} );
+        border-style: solid;
+        position: relative;
+    }
+
+}

package/scss/taskboard/_theme.scss

@@ -0,0 +1,83 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-taskboard--theme() {
+
+    // TaskBoard
+    .k-taskboard {
+        @include fill(
+            var( --kendo-taskboard-text, #{$kendo-taskboard-text} ),
+            var( --kendo-taskboard-bg, #{$kendo-taskboard-bg} ),
+            var( --kendo-taskboard-border, #{$kendo-taskboard-border} )
+        );
+    }
+
+    // Columns
+    .k-taskboard-column {
+        @include fill(
+            var( --kendo-taskboard-column-text, #{$kendo-taskboard-column-text} ),
+            var( --kendo-taskboard-column-bg, #{$kendo-taskboard-column-bg} ),
+            var( --kendo-taskboard-column-border, #{$kendo-taskboard-column-border} )
+        );
+    }
+    .k-taskboard-column:focus,
+    .k-taskboard-column.k-focus {
+        @include fill(
+            var( --kendo-taskboard-column-focus-text, #{$kendo-taskboard-column-focus-text} ),
+            var( --kendo-taskboard-column-focus-bg, #{$kendo-taskboard-column-focus-bg} ),
+            var( --kendo-taskboard-column-border, #{$kendo-taskboard-column-focus-border} )
+        );
+    }
+
+    .k-taskboard-column-header {
+        @include fill(
+            $color: var( --kendo-taskboard-column-header-text, #{$kendo-taskboard-column-header-text} )
+        );
+    }
+
+    // Preview/Edit Pane
+    .k-taskboard-pane {
+        @include fill (
+            var( --kendo-taskboard-pane-text, #{$kendo-taskboard-pane-text} ),
+            var( --kendo-taskboard-pane-bg, #{$kendo-taskboard-pane-bg} ),
+            var( --kendo-taskboard-pane-border, #{$kendo-taskboard-pane-border} )
+        );
+    }
+
+    .k-taskboard-pane-header {
+        @include fill(
+            $color: var( --kendo-taskboard-pane-header-text, #{$kendo-taskboard-pane-header-text} )
+        );
+    }
+
+    // Cards
+    .k-taskboard-card {
+        &.k-selected {
+            @include box-shadow(
+                var( --kendo-taskboard-card-selected-shadow, #{$kendo-taskboard-card-selected-shadow} )
+            );
+        }
+
+        &.k-disabled {
+            @include fill(
+                var(  --kendo-disabled-text, inherit ),
+                var(  --kendo-disabled-bg, inherit ),
+                var(  --kendo-disabled-border, inherit )
+
+            );
+
+            .k-card-header {
+                @include fill( $color: var( --kendo-disabled-text, inherit ) );
+            }
+        }
+    }
+
+    // Card Drag Placeholder
+    .k-taskboard-drag-placeholder {
+        @include fill(
+            $bg: var( --kendo-taskboard-drag-placeholder-bg, #{$kendo-taskboard-drag-placeholder-bg} ),
+            $border: var( --kendo-taskboard-drag-placeholder-border, #{$kendo-taskboard-drag-placeholder-border} )
+        );
+    }
+
+}

package/scss/taskboard/_variables.scss

@@ -0,0 +1,207 @@
+@use "../core/_variables.scss" as *;
+@use "../core/color-system" as *;
+@use "../card/_variables.scss" as *;
+
+/// Spacing index of the task board.
+/// @group taskboard
+$kendo-taskboard-spacer: map-get( $kendo-spacing, 4 ) !default;
+
+/// Border width of the task board.
+/// @group taskboard
+$kendo-taskboard-border-width: 1px !default;
+/// Border style of the task board.
+/// @group taskboard
+$kendo-taskboard-border-style: solid !default;
+/// Vertical padding of the task board.
+/// @group taskboard
+$kendo-taskboard-padding-y: 0px !default;
+/// Horizontal of the task board.
+/// @group taskboard
+$kendo-taskboard-padding-x: 0px !default;
+/// Font family of the task board.
+/// @group taskboard
+$kendo-taskboard-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the task board.
+/// @group taskboard
+$kendo-taskboard-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// Line height of the task board.
+/// @group taskboard
+$kendo-taskboard-line-height: var( --kendo-line-height, inherit ) !default;
+/// Background color of the task board.
+/// @group taskboard
+$kendo-taskboard-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the task board.
+/// @group taskboard
+$kendo-taskboard-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the task board.
+/// @group taskboard
+$kendo-taskboard-border: var( --kendo-component-border, initial ) !default;
+
+/// Vertical padding of the task board content.
+/// @group taskboard
+$kendo-taskboard-content-padding-y: 0px !default;
+/// Horizontal padding of the task board content.
+/// @group taskboard
+$kendo-taskboard-content-padding-x: 0px !default;
+
+/// Vertical spacing of the task board column container.
+/// @group taskboard
+$kendo-taskboard-column-container-spacing-y: calc( $kendo-taskboard-spacer / 2 ) !default;
+/// Vertical padding of the task board column container.
+/// @group taskboard
+$kendo-taskboard-column-container-padding-y: 0px !default;
+/// Horizontal padding of the task board column container.
+/// @group taskboard
+$kendo-taskboard-column-container-padding-x: calc( $kendo-taskboard-spacer / 2 ) !default;
+/// Spacing of the task board columns container.
+/// @group taskboard
+$kendo-taskboard-columns-container-gap: $kendo-taskboard-spacer !default;
+
+/// Default width of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-width: 320px !default;
+/// Border width of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-border-width: 1px !default;
+/// Border radius of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Background color of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-border: transparent !default;
+/// Focus background color of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-focus-bg: $kendo-taskboard-column-bg !default;
+/// Focus text color of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-focus-text: $kendo-taskboard-column-text !default;
+/// Focus border color of the task board column.
+/// @group taskboard
+$kendo-taskboard-column-focus-border: get-theme-color-var( neutral-130 ) !default;
+
+/// Vertical padding of the task board column header.
+/// @group taskboard
+$kendo-taskboard-column-header-padding-y: calc( $kendo-taskboard-spacer / 2 ) !default;
+/// Horizontal padding of the task board column header.
+/// @group taskboard
+$kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
+/// Spacing of the task board column header.
+/// @group taskboard
+$kendo-taskboard-column-header-gap: calc( $kendo-taskboard-spacer / 4 ) !default;
+/// Spacing  of the task board column header actions.
+/// @group taskboard
+$kendo-taskboard-column-header-actions-gap: calc( $kendo-taskboard-spacer / 2 ) !default;
+/// Font weight of the task board column header.
+/// @group taskboard
+$kendo-taskboard-column-header-font-weight: 400 !default;
+///  Text color of the task board column header.
+/// @group taskboard
+$kendo-taskboard-column-header-text: var( --kendo-component-text, inherit )  !default;
+
+/// Vertical padding of the task board column cards wrapper.
+/// @group taskboard
+$kendo-taskboard-column-cards-padding-y: 0px !default;
+/// Horizontal padding of the task board column cards wrapper.
+/// @group taskboard
+$kendo-taskboard-column-cards-padding-x: 0px !default;
+/// Spacing of the task board column cards wrapper.
+/// @group taskboard
+$kendo-taskboard-column-cards-gap: calc( $kendo-taskboard-spacer / 2 ) !default;
+
+
+/// Default width of the task board pane.
+/// @group taskboard
+$kendo-taskboard-pane-width: $kendo-taskboard-column-width !default;
+/// Vertical padding of the task board pane
+/// @group taskboard
+$kendo-taskboard-pane-padding-y: 0px !default;
+/// Horizontal padding of the task board pane.
+/// @group taskboard
+$kendo-taskboard-pane-padding-x: 0px !default;
+/// Border width of the task board pane.
+/// @group taskboard
+$kendo-taskboard-pane-border-width: 1px !default;
+/// Background color of the task board pane.
+/// @group taskboard
+$kendo-taskboard-pane-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the task board pane.
+/// @group taskboard
+$kendo-taskboard-pane-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the task board pane.
+/// @group taskboard
+$kendo-taskboard-pane-border: var( --kendo-component-border, inherit ) !default;
+
+/// Vertical padding of the task board pane header.
+/// @group taskboard
+$kendo-taskboard-pane-header-padding-y: $kendo-taskboard-spacer !default;
+/// Horizontal padding of the task board pane header.
+/// @group taskboard
+$kendo-taskboard-pane-header-padding-x: map-get( $kendo-spacing, 6 )  !default;
+/// Font size of the task board pane header.
+/// @group taskboard
+$kendo-taskboard-pane-header-font-size: var( --kendo-font-size-lg, 1rem ) !default;
+/// Font weight of the task board pane header.
+/// @group taskboard
+$kendo-taskboard-pane-header-font-weight: 500 !default;
+/// Text color of the task board pane header.
+/// @group taskboard
+$kendo-taskboard-pane-header-text: $kendo-taskboard-pane-text !default;
+
+/// Vertical padding of the task board pane content.
+/// @group taskboard
+$kendo-taskboard-pane-content-padding-y: 0px !default;
+/// Horizontal padding of the task board pane content.
+/// @group taskboard
+$kendo-taskboard-pane-content-padding-x: $kendo-taskboard-pane-header-padding-x !default;
+
+/// Vertical padding of the task board pane actions.
+/// @group taskboard
+$kendo-taskboard-pane-actions-padding-y: map-get( $kendo-spacing, 6 ) !default;
+/// Horizontal padding of the task board pane actions.
+/// @group taskboard
+$kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-pane-actions-padding-y !default;
+
+/// Vertical padding of the task board card.
+/// @group taskboard
+$kendo-taskboard-card-padding-y: calc( $kendo-taskboard-spacer / 2 ) !default;
+/// Horizontal padding of the task board card.
+/// @group taskboard
+$kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-y !default;
+/// Border width of the task board card category.
+/// @group taskboard
+$kendo-taskboard-card-category-border-width: 4px !default;
+/// Focus shadow of the task board card.
+/// @group taskboard
+$kendo-taskboard-card-focus-shadow: none !default;
+/// Selected border of the task board card.
+/// @group taskboard
+$kendo-taskboard-card-selected-border: get-theme-color-var( primary-100 ) !default;
+/// Selected shadow of the task board card.
+/// @group taskboard
+$kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+
+/// Font size of the task board card title.
+/// @group taskboard
+$kendo-taskboard-card-title-font-size: var( --kendo-font-size-md, 1rem ) !default;
+/// Font weight of the task board card title.
+/// @group taskboard
+$kendo-taskboard-card-title-font-weight: var( --kendo-font-weight-bold, 600 ) !default;
+
+/// Border width of the task board card placeholder.
+/// @group taskboard
+$kendo-taskboard-drag-placeholder-border-width: 1px !default;
+/// Border radius of the task board card placeholder.
+/// @group taskboard
+$kendo-taskboard-drag-placeholder-border-radius: $kendo-card-border-radius !default;
+/// Background color of the task board card placeholder.
+/// @group taskboard
+$kendo-taskboard-drag-placeholder-bg: get-theme-color-var( neutral-50 ) !default;
+/// Border color of the task board card placeholder.
+/// @group taskboard
+$kendo-taskboard-drag-placeholder-border: var( --kendo-component-border, inherit ) !default;

package/scss/taskboard/index.scss

@@ -0,0 +1,31 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "taskboard",
+    dependencies: (
+        "icon",
+        "input",
+        "forms",
+        "textbox",
+        "searchbox",
+        "toolbar",
+        "card"
+    )
+);
+
+
+// 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( "taskboard" ) {
+        @include kendo-taskboard--layout();
+        @include kendo-taskboard--theme();
+    }
+}

package/scss/textarea/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-textarea--layout() {
+
+     // Textarea
+     .k-textarea {}
+
+}

package/scss/textarea/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-textarea--theme() {
+
+    // Textarea
+    .k-textarea {}
+
+}

package/scss/textarea/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "textarea",
+    dependencies: (
+        "input",
+        "floating-label",
+    )
+);
+
+// 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( "textarea" ) {
+        @include kendo-textarea--layout();
+        @include kendo-textarea--theme();
+    }
+}

package/scss/textbox/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-textbox--layout() {
+
+    // Textbox
+    .k-textbox {}
+
+}

package/scss/textbox/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-textbox--theme() {
+
+    // Textbox
+    .k-textbox {}
+
+}

package/scss/textbox/_variables.scss

@@ -0,0 +1 @@
+// Textbox

package/scss/textbox/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "textbox",
+    dependencies: (
+        "input",
+        "floating-label",
+    )
+);
+
+// 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( "textbox" ) {
+        @include kendo-textbox--layout();
+        @include kendo-textbox--theme();
+    }
+}

package/scss/tilelayout/_layout.scss

@@ -0,0 +1,39 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-tilelayout--layout() {
+
+    .k-tilelayout {
+        border-width: var( --kendo-tilelayout-border-width, #{$kendo-tilelayout-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        display: grid;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+    }
+
+    .k-tilelayout-item {
+        position: relative;
+        z-index: 0;
+    }
+
+    .k-layout-item-hint {
+        @include border-radius( var( --kendo-tilelayout-hint-border-radius, #{$kendo-tilelayout-hint-border-radius} ) );
+        border-width: var( --kendo-tilelayout-hint-border-width, #{$kendo-tilelayout-hint-border-width} );
+        border-style: solid;
+        position: relative;
+
+        &.k-layout-item-hint-resize {
+            z-index: 3;
+        }
+    }
+
+    .k-tilelayout-item-header.k-card-header {
+        z-index: 0;
+    }
+
+    .k-tilelayout-item-body {
+        min-height: 0;
+    }
+}

package/scss/tilelayout/_theme.scss

@@ -0,0 +1,18 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-tilelayout--theme() {
+
+    .k-tilelayout {
+        @include fill(
+            $bg: var( --kendo-tilelayout-bg, #{$kendo-tilelayout-bg} )
+        );
+    }
+
+    .k-layout-item-hint {
+        @include fill(
+            $bg: var( --kendo-tilelayout-hint-bg, #{$kendo-tilelayout-hint-bg} ),
+            $border: var( --kendo-tilelayout-hint-border, #{$kendo-tilelayout-hint-border} )
+        );
+    }
+}