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

package/scss/tabstrip/_variables.scss

@@ -5,188 +5,182 @@
 
 /// The horizontal padding of the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+$kendo-tabstrip-wrapper-padding-x: var( --kendo-tabstrip-wrapper-padding-x, #{k-spacing(0)} ) !default;
 /// The vertical padding of the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
+$kendo-tabstrip-wrapper-padding-y: var( --kendo-tabstrip-wrapper-padding-y, #{k-spacing(0)} ) !default;
 /// The border width around the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-border-width: 0px !default;
+$kendo-tabstrip-wrapper-border-width: var( --kendo-tabstrip-wrapper-border-width, 0px ) !default;
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-bg: transparent !default;
+$kendo-tabstrip-wrapper-bg: var( --kendo-tabstrip-wrapper-bg, transparent ) !default;
 /// The text color of the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-text: initial !default;
+$kendo-tabstrip-wrapper-text: var( --kendo-tabstrip-wrapper-text, initial ) !default;
 /// The border color of the TabStrip wrapper.
 /// @group tabstrip
-$kendo-tabstrip-wrapper-border: initial !default;
+$kendo-tabstrip-wrapper-border: var( --kendo-tabstrip-wrapper-border, initial ) !default;
 
 /// The font family of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-tabstrip-font-family: var( --kendo-tabstrip-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-tabstrip-font-size: var( --kendo-tabstrip-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-tabstrip-line-height: var( --kendo-tabstrip-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The border width around the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-border-width: 0px !default;
+$kendo-tabstrip-border-width: var( --kendo-tabstrip-border-width, 0px ) !default;
 
 /// The font size of the small TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default;
+$kendo-tabstrip-sm-font-size: var( --kendo-tabstrip-sm-font-size, #{$kendo-tabstrip-font-size} ) !default;
 /// The line height of the small TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
+$kendo-tabstrip-sm-line-height: var( --kendo-tabstrip-sm-line-height, #{$kendo-tabstrip-line-height} ) !default;
 /// The font size of the medium TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+$kendo-tabstrip-md-font-size: var( --kendo-tabstrip-md-font-size, #{$kendo-tabstrip-font-size} ) !default;
 /// The line height of the medium TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+$kendo-tabstrip-md-line-height: var( --kendo-tabstrip-md-line-height, #{$kendo-tabstrip-line-height} ) !default;
 /// The font size of the large TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-lg-font-size: $kendo-tabstrip-font-size !default;
+$kendo-tabstrip-lg-font-size: var( --kendo-tabstrip-lg-font-size, #{$kendo-tabstrip-font-size} ) !default;
 /// The line height of the large TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default;
+$kendo-tabstrip-lg-line-height: var( --kendo-tabstrip-lg-line-height, #{$kendo-tabstrip-line-height} ) !default;
 
 /// The background color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-bg: transparent !default;
+$kendo-tabstrip-bg: var( --kendo-tabstrip-bg, transparent ) !default;
 /// The text color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-text: k-color(on-app-surface) !default;
+$kendo-tabstrip-text: var( --kendo-tabstrip-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-border: transparent !default;
+$kendo-tabstrip-border: var( --kendo-tabstrip-border, transparent ) !default;
 
-/// The horizontal padding of the TabStrip items.
-/// @group tabstrip
-$kendo-tabstrip-item-padding-x: k-spacing(2) !default;
-/// The vertical padding of the TabStrip items.
-/// @group tabstrip
-$kendo-tabstrip-item-padding-y: k-spacing(3) !default;
 /// The border width around the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border-width: 0px !default;
+$kendo-tabstrip-item-border-width: var( --kendo-tabstrip-item-border-width, 0px ) !default;
 /// The border radius of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
+$kendo-tabstrip-item-border-radius: var( --kendo-tabstrip-item-border-radius, #{k-border-radius(md)} ) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-gap: k-spacing(2) !default;
+$kendo-tabstrip-item-gap: var( --kendo-tabstrip-item-gap, #{k-spacing(2)} ) !default;
 
 /// The horizontal padding of the small TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-sm-item-padding-x: k-spacing(2) !default;
+$kendo-tabstrip-sm-item-padding-x: var( --kendo-tabstrip-sm-item-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the small TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-sm-item-padding-y: k-spacing(2.5) !default;
+$kendo-tabstrip-sm-item-padding-y: var( --kendo-tabstrip-sm-item-padding-y, #{k-spacing(2.5)} ) !default;
 /// The horizontal padding of the medium TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+$kendo-tabstrip-md-item-padding-x: var( --kendo-tabstrip-md-item-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the medium TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+$kendo-tabstrip-md-item-padding-y: var( --kendo-tabstrip-md-item-padding-y, #{k-spacing(3)} ) !default;
 /// The horizontal padding of the large TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-lg-item-padding-x: k-spacing(2) !default;
+$kendo-tabstrip-lg-item-padding-x: var( --kendo-tabstrip-lg-item-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the large TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-lg-item-padding-y: k-spacing(3.5) !default;
+$kendo-tabstrip-lg-item-padding-y: var( --kendo-tabstrip-lg-item-padding-y, #{k-spacing(3.5)} ) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-bg: transparent !default;
+$kendo-tabstrip-item-bg: var( --kendo-tabstrip-item-bg, transparent ) !default;
 /// The text color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-text: k-color(on-app-surface) !default;
+$kendo-tabstrip-item-text: var( --kendo-tabstrip-item-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border: transparent !default;
+$kendo-tabstrip-item-border: var( --kendo-tabstrip-item-border, transparent ) !default;
 /// The text color of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-tabstrip-item-disabled-text: var( --kendo-tabstrip-item-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
 /// The background color of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-bg: none !default;
+$kendo-tabstrip-item-disabled-bg: var( --kendo-tabstrip-item-disabled-bg, none ) !default;
 /// The border color of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-border: transparent !default;
+$kendo-tabstrip-item-disabled-border: var( --kendo-tabstrip-item-disabled-border, transparent ) !default;
 /// The opacity of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-opacity: null !default;
+$kendo-tabstrip-item-disabled-opacity: var( --kendo-tabstrip-item-disabled-opacity, null ) !default;
 /// The filter of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-filter: null !default;
+$kendo-tabstrip-item-disabled-filter: var( --kendo-tabstrip-item-disabled-filter, null ) !default;
 
 /// The background color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-bg: k-color(base-hover) !default;
+$kendo-tabstrip-item-hover-bg: var( --kendo-tabstrip-item-hover-bg, #{k-color(base-hover)} ) !default;
 /// The text color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-text: k-color(on-base) !default;
+$kendo-tabstrip-item-hover-text: var( --kendo-tabstrip-item-hover-text, #{k-color(on-base)} ) !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: k-color(base-hover) !default;
+$kendo-tabstrip-item-hover-border: var( --kendo-tabstrip-item-hover-border, #{k-color(base-hover)} ) !default;
 /// The background color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-bg: k-color(surface-alt) !default;
+$kendo-tabstrip-item-selected-bg: var( --kendo-tabstrip-item-selected-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-text: k-color(on-app-surface) !default;
+$kendo-tabstrip-item-selected-text: var( --kendo-tabstrip-item-selected-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-border: k-color(primary) !default;
+$kendo-tabstrip-item-selected-border: var( --kendo-tabstrip-item-selected-border, #{k-color(primary)} ) !default;
 /// The font weight of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-tabstrip-item-selected-font-weight: var( --kendo-tabstrip-item-selected-font-weight, var( --kendo-font-weight-bold, normal ) ) !default;
 
 /// The shadow of the focused TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-tabstrip-item-focus-shadow: var( --kendo-tabstrip-item-focus-shadow, #{$kendo-list-item-focus-shadow} ) !default;
 /// The text color of the dragged TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-dragging-text: k-color(primary) !default;
+$kendo-tabstrip-item-dragging-text: var( --kendo-tabstrip-item-dragging-text, #{k-color(primary)} ) !default;
 
 // Indicator
 /// The border width of the TabStrip indicator.
 /// @group tabstrip
-$kendo-tabstrip-indicator-size: k-spacing(0.5) !default;
+$kendo-tabstrip-indicator-size: var( --kendo-tabstrip-indicator-size, #{k-spacing(0.5)} ) !default;
 /// The border color of the TabStrip ripple.
 /// @group tabstrip
-$kendo-tabstrip-indicator-color: k-color(primary) !default;
+$kendo-tabstrip-indicator-color: var( --kendo-tabstrip-indicator-color, #{k-color(primary)} ) !default;
 
 /// The horizontal padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: k-spacing(3) !default;
+$kendo-tabstrip-content-padding-x: var( --kendo-tabstrip-content-padding-x, #{k-spacing(3)} ) !default;
 /// The vertical padding of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: k-spacing(1.5) !default;
+$kendo-tabstrip-content-padding-y: var( --kendo-tabstrip-content-padding-y, #{k-spacing(1.5)} ) !default;
 /// The border width around the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-border-width: 1px !default;
+$kendo-tabstrip-content-border-width: var( --kendo-tabstrip-content-border-width, 1px ) !default;
 
 /// The background color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-bg: k-color(surface-alt) !default;
+$kendo-tabstrip-content-bg: var( --kendo-tabstrip-content-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-text: k-color(on-app-surface) !default;
+$kendo-tabstrip-content-text: var( --kendo-tabstrip-content-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-border: transparent !default;
+$kendo-tabstrip-content-border: var( --kendo-tabstrip-content-border, transparent ) !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
+$kendo-tabstrip-content-focus-border: var( --kendo-tabstrip-content-focus-border, #{k-color(on-app-surface)} ) !default;
 
 /// The left and right scroll overlay of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
+$kendo-tabstrip-scroll-overlay: var( --kendo-tabstrip-scroll-overlay, #{k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent)} ) !default;
 
 /// The size map of the TabStrip.
 /// @group tabstrip
@@ -210,3 +204,61 @@ $kendo-tabstrip-sizes: (
         item-padding-y: $kendo-tabstrip-lg-item-padding-y
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/tabstrip/_variables.scss" with (
+    $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
+    $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y,
+    $kendo-tabstrip-wrapper-border-width: $kendo-tabstrip-wrapper-border-width,
+    $kendo-tabstrip-font-family: $kendo-tabstrip-font-family,
+    $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
+    $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
+    $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size,
+    $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height,
+    $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size,
+    $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height,
+    $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size,
+    $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height,
+    $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
+    $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
+    $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
+    $kendo-tabstrip-bg: $kendo-tabstrip-bg,
+    $kendo-tabstrip-text: $kendo-tabstrip-text,
+    $kendo-tabstrip-border: $kendo-tabstrip-border,
+    $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width,
+    $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
+    $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
+    $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+    $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,
+    $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x,
+    $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y,
+    $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+    $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y,
+    $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
+    $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
+    $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,
+    $kendo-tabstrip-item-hover-bg: $kendo-tabstrip-item-hover-bg,
+    $kendo-tabstrip-item-hover-text: $kendo-tabstrip-item-hover-text,
+    $kendo-tabstrip-item-hover-border: $kendo-tabstrip-item-hover-border,
+    $kendo-tabstrip-item-selected-bg: $kendo-tabstrip-item-selected-bg,
+    $kendo-tabstrip-item-selected-text: $kendo-tabstrip-item-selected-text,
+    $kendo-tabstrip-item-selected-border: $kendo-tabstrip-item-selected-border,
+    $kendo-tabstrip-item-selected-font-weight: $kendo-tabstrip-item-selected-font-weight,
+    $kendo-tabstrip-item-focus-shadow: $kendo-tabstrip-item-focus-shadow,
+    $kendo-tabstrip-item-disabled-bg: $kendo-tabstrip-item-disabled-bg,
+    $kendo-tabstrip-item-disabled-text: $kendo-tabstrip-item-disabled-text,
+    $kendo-tabstrip-item-disabled-border: $kendo-tabstrip-item-disabled-border,
+    $kendo-tabstrip-item-disabled-opacity: $kendo-tabstrip-item-disabled-opacity,
+    $kendo-tabstrip-item-disabled-filter: $kendo-tabstrip-item-disabled-filter,
+    $kendo-tabstrip-indicator-size: $kendo-tabstrip-indicator-size,
+    $kendo-tabstrip-indicator-color: $kendo-tabstrip-indicator-color,
+    $kendo-tabstrip-content-padding-x: $kendo-tabstrip-content-padding-x,
+    $kendo-tabstrip-content-padding-y: $kendo-tabstrip-content-padding-y,
+    $kendo-tabstrip-content-border-width: $kendo-tabstrip-content-border-width,
+    $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg,
+    $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
+    $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
+    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border,
+    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay,
+    $kendo-tabstrip-sizes: $kendo-tabstrip-sizes
+);

package/scss/taskboard/_layout.scss

@@ -1,206 +1,56 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/taskboard/_layout.scss" as *;
 
 @mixin kendo-task-board--layout() {
+    @include kendo-task-board--layout-base();
 
-    // 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-block: 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;
+        border-width: $kendo-taskboard-border-width;
+        border-style: $kendo-taskboard-border-style;
     }
 
-    // Content
     .k-taskboard-content {
-        padding-inline: var( --kendo-taskboard-content-padding-x, #{$kendo-taskboard-content-padding-x} );
+        padding-inline: $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;
+        padding-block-end: $kendo-taskboard-content-padding-y;
     }
 
-    .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-container {
+        margin-bottom: 0;
+     }
 
     .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-block-width: 0;
-        border-inline-start-width: var( --kendo-taskboard-pane-border-width, #{$kendo-taskboard-pane-border-width} );
-        border-inline-end-width: 0;
-        border-style: solid;
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        inset-block-start: 0;
-        inset-block-end: 0;
-        inset-inline-end: 0;
-        overflow: hidden;
-        z-index: 2;
+        margin-bottom: $kendo-taskboard-column-container-spacing-y;
     }
 
     .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} );
+        font-size: $kendo-taskboard-pane-header-font-size;
     }
 
-    .k-taskboard-pane-start {
-        border-inline-end-width: var( --kendo-taskboard-pane-border-width, #{$kendo-taskboard-pane-border-width} );
-        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 {
-            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} );
-        }
+            font-size: $kendo-taskboard-card-title-font-size;
+            font-weight: $kendo-taskboard-card-title-font-weight;
 
-        .k-card-header-actions {
-            align-self: flex-start;
+            &:focus,
+            &.k-focus,
+            &:hover,
+            &.k-hover {
+                text-decoration: none;
+            }
         }
     }
 
-    // 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;
+    .k-taskboard-pane {
+        border: 0;
     }
 
+    // Toolbar
+    .k-taskboard-toolbar {
+        border-width: $kendo-toolbar-border-width;
+        border-inline-width: 0;
+        border-block-start-width: 0;
+    }
 }

package/scss/taskboard/_theme.scss

@@ -1,61 +1,26 @@
 @use "../core/_index.scss" as *;
+@use "../card/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/taskboard/_theme.scss" as *;
 
 @mixin kendo-task-board--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} )
-        );
-    }
+    @include kendo-task-board--theme-base();
 
     // Cards
     .k-taskboard-card {
-        &.k-selected {
-            @include box-shadow(
-                var( --kendo-taskboard-card-selected-shadow, #{$kendo-taskboard-card-selected-shadow} )
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $kendo-card-focus-text,
+                $kendo-card-focus-bg,
+                $kendo-card-focus-border
             );
+            @include focus-indicator( $kendo-card-focus-shadow );
+        }
+
+        &.k-selected {
+            @include box-shadow( $kendo-card-focus-shadow );
         }
 
         &.k-disabled {
@@ -72,12 +37,12 @@
         }
     }
 
-    // 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} )
+    // Toolbar
+    .k-taskboard-toolbar {
+       @include fill(
+            $bg: $kendo-toolbar-bg
         );
+        @include box-shadow( $kendo-toolbar-shadow );
     }
 
 }