@progress/kendo-theme-material 10.6.0 → 11.0.0-dev.1

package/scss/table/_layout.scss

@@ -5,29 +5,31 @@
 @mixin kendo-table--layout() {
     @include kendo-table--layout-base();
 
-    @if($kendo-enable-color-system) {
-        .k-table {
-            td:focus,
-            td.k-focus,
-            th:focus,
-            th.k-focus {
-                position: relative;
+    .k-table {
 
-                &::after {
-                    content: "";
-                    width: 100%;
-                    height: 100%;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    pointer-events: none;
-                }
-            }
+        th,
+        .k-table-th{
+            font-weight: var( --kendo-font-weight-semibold, 600 );
+        }
 
-            td.k-grid-content-sticky,
-            td.k-grid-header-sticky {
-                position: sticky;
+        td:focus,
+        td.k-focus,
+        th:focus,
+        th.k-focus {
+            position: relative;
+            &::after {
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                pointer-events: none;
             }
         }
+        td.k-grid-content-sticky,
+        td.k-grid-header-sticky {
+            position: sticky;
+        }
     }
 }

package/scss/table/_theme.scss

@@ -7,41 +7,15 @@
 
     @include kendo-table--theme-base();
 
-    @if($kendo-enable-color-system) {
-        .k-table .k-table-tbody {
-            td:focus,
-            td.k-focus,
-            th:focus,
-            th.k-focus {
-                &::after {
-                    background-color: $kendo-table-hover-bg;
-                }
-            }
-        }
-    } @else {
-
-        // Selected state
-        .k-table-tbody .k-table-row.k-selected,
-        .k-table-tbody .k-table-cell.k-selected {
-            color: $kendo-table-selected-text;
-            background-color: $kendo-table-selected-bg;
-        }
-
-        .k-table-tbody .k-table-row.k-selected > td {
-            color: inherit;
-            background-color: transparent;
-        }
-
-        .k-table .k-table-tbody {
-            td:focus,
-            td.k-focus,
-            th:focus,
-            th.k-focus {
-                color: inherit;
+    .k-table .k-table-tbody {
+        td:focus,
+        td.k-focus,
+        th:focus,
+        th.k-focus {
+            &::after {
                 background-color: $kendo-table-hover-bg;
             }
         }
-
     }
 
 }

package/scss/table/_variables.scss

@@ -31,14 +31,14 @@ $kendo-table-cell-padding-x: null !default;
 /// @group table
 $kendo-table-cell-padding-y: null !default;
 
-$kendo-table-sm-cell-padding-x: k-spacing(2.5) !default;
-$kendo-table-sm-cell-padding-y: k-spacing(1) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(2) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(2) !default;
 
-$kendo-table-md-cell-padding-x: k-spacing(6) !default;
-$kendo-table-md-cell-padding-y: k-spacing(2.5) !default;
+$kendo-table-md-cell-padding-x: k-spacing(3) !default;
+$kendo-table-md-cell-padding-y: k-spacing(3) !default;
 
-$kendo-table-lg-cell-padding-x: k-spacing(6) !default;
-$kendo-table-lg-cell-padding-y: k-spacing(2.5) !default;
+$kendo-table-lg-cell-padding-x: k-spacing(4) !default;
+$kendo-table-lg-cell-padding-y: k-spacing(4) !default;
 
 /// The sizes of the table.
 /// @group table
@@ -66,21 +66,21 @@ $kendo-table-sizes: (
 
 /// Background color of tables.
 /// @group table
-$kendo-table-bg: $kendo-component-bg !default;
+$kendo-table-bg: k-color(surface-alt) !default;
 /// Text color of tables.
 /// @group table
-$kendo-table-text: $kendo-component-text !default;
+$kendo-table-text: k-color(on-app-surface) !default;
 /// Border color of tables.
 /// @group table
-$kendo-table-border: $kendo-component-border !default;
+$kendo-table-border: k-color(border) !default;
 
 
 /// Background color of table headers.
 /// @group table
-$kendo-table-header-bg: $kendo-table-bg !default;
+$kendo-table-header-bg: k-color(surface) !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) !default;
+$kendo-table-header-text: k-color(on-app-surface) !default;
 /// Border color of table headers.
 /// @group table
 $kendo-table-header-border: $kendo-table-border !default;
@@ -124,7 +124,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .07 )) !default;
+$kendo-table-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -149,7 +149,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
+$kendo-table-selected-bg: color-mix(in srgb, k-color(primary) 20%, transparent) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;

package/scss/tabstrip/_layout.scss

@@ -1,3 +1,4 @@
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/tabstrip/_layout.scss" as *;
 
 
@@ -5,12 +6,107 @@
 
     @include kendo-tabstrip--layout-base();
 
-    .k-tabstrip-items {
-        text-transform: uppercase;
+    .k-tabstrip-items .k-item {
+        font-weight: var( --kendo-font-weight-medium, medium );
     }
 
-    .k-tabstrip-left .k-tabstrip-items .k-link {
-        justify-content: flex-end;
+    .k-tabstrip .k-tabstrip-items-wrapper .k-item.k-active::after {
+        border-width: 0;
     }
 
+    .k-tabstrip-items .k-item-actions {
+        align-self: center;
+    }
+
+    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
+    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
+        margin-bottom: 0;
+        border-bottom-width: 0;
+    }
+
+    .k-tabstrip-top,
+    .k-tabstrip-bottom {
+        .k-tabstrip-items-wrapper {
+            .k-item::after {
+                display: none;
+            }
+
+            .k-item .k-link {
+                position: relative;
+            }
+
+            .k-item .k-link::after {
+                content: "";
+                display: none;
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                height: $kendo-tabstrip-indicator-size;
+                margin: 0 $kendo-tabstrip-item-padding-x;
+                pointer-events: none;
+            }
+            .k-item.k-active .k-link::after {
+                display: block;
+            }
+
+            .k-item > .k-link {
+                z-index: 1;
+            }
+        }
+    }
+
+    .k-tabstrip-right,
+    .k-tabstrip-left {
+        .k-tabstrip-items-wrapper {
+            .k-item::after {
+                content: "";
+                display: none;
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                pointer-events: none;
+                width: $kendo-tabstrip-indicator-size;
+                height: auto;
+                margin: $kendo-tabstrip-item-padding-y 0;
+            }
+            .k-item.k-active::after {
+                display: block;
+            }
+        }
+    }
+
+    // Variants
+    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link::after {
+        top: auto;
+    }
+
+    .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {
+        left: auto;
+    }
+
+    .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after {
+        right: auto;
+    }
+
+    .k-tabstrip-top .k-tabstrip-items-wrapper .k-item.k-active .k-link::after {
+        border-radius: var( --kendo-border-radius-full, 9999px ) var( --kendo-border-radius-full, 9999px ) 0 0;
+    }
+
+    .k-tabstrip-bottom .k-tabstrip-items-wrapper .k-item.k-active .k-link::after {
+        border-radius: 0 0 var( --kendo-border-radius-full, 9999px ) var( --kendo-border-radius-full, 9999px );
+    }
+
+    .k-tabstrip-left .k-tabstrip-items-wrapper .k-item.k-active::after {
+        border-radius: var( --kendo-border-radius-full, 9999px ) 0 0 var( --kendo-border-radius-full, 9999px );
+    }
+
+    .k-tabstrip-right .k-tabstrip-items-wrapper .k-item.k-active::after {
+        border-radius: 0 var( --kendo-border-radius-full, 9999px ) var( --kendo-border-radius-full, 9999px ) 0;
+    }
 }

package/scss/tabstrip/_variables.scss

@@ -24,7 +24,7 @@ $kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-line-height: math.div( 20, 14 ) !default;
+$kendo-tabstrip-line-height: var( --kendo-line-height, inherit ) !default;
 /// The border width around the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
@@ -63,14 +63,14 @@ $kendo-tabstrip-wrapper-border: null !default;
 $kendo-tabstrip-bg: null !default;
 /// The text color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-text: $kendo-subtle-text !default;
+$kendo-tabstrip-text: k-color(subtle) !default;
 /// The border color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-border: $kendo-component-border !default;
+$kendo-tabstrip-border: k-color(border) !default;
 
 /// The horizontal padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-x: k-spacing(6) !default;
+$kendo-tabstrip-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-y: k-spacing(3.5) !default;
@@ -85,10 +85,10 @@ $kendo-tabstrip-item-border-radius: 0px !default;
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
 /// The horizontal padding of the small TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-sm-item-padding-x: k-spacing(6) !default;
+$kendo-tabstrip-sm-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the small TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-sm-item-padding-y: k-spacing(3) !default;
+$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;
@@ -97,17 +97,17 @@ $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
 $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
 /// The horizontal padding of the large TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-lg-item-padding-x: k-spacing(6) !default;
+$kendo-tabstrip-lg-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the large TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-lg-item-padding-y: k-spacing(4) !default;
+$kendo-tabstrip-lg-item-padding-y: k-spacing(4.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-bg: null !default;
 /// The text color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-text: $kendo-subtle-text !default;
+$kendo-tabstrip-item-text: k-color(subtle) !default;
 /// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: null !default;
@@ -117,10 +117,10 @@ $kendo-tabstrip-item-gradient: null !default;
 
 /// The background color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-bg: $kendo-hover-bg !default;
+$kendo-tabstrip-item-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-text: $kendo-body-text !default;
+$kendo-tabstrip-item-hover-text: null !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-border: null !default;
@@ -130,10 +130,10 @@ $kendo-tabstrip-item-hover-gradient: null !default;
 
 /// The background color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-bg: unset !default;
+$kendo-tabstrip-item-selected-bg: null !default;
 /// The text color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-text: $kendo-body-text !default;
+$kendo-tabstrip-item-selected-text: k-color(primary) !default;
 /// The border color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-border: unset !default;
@@ -146,7 +146,7 @@ $kendo-tabstrip-item-selected-font-weight: null !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: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The shadow of the dragged TabStrip items.
 /// @group tabstrip
@@ -157,7 +157,7 @@ $kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
 $kendo-tabstrip-item-disabled-bg: null !default;
 /// The text color of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), map.get( $theme, disabled-text )) !default;
+$kendo-tabstrip-item-disabled-text: null !default;
 /// The border color of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-border: null !default;
@@ -166,17 +166,17 @@ $kendo-tabstrip-item-disabled-border: null !default;
 $kendo-tabstrip-item-disabled-gradient: null !default;
 /// The opacity of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-opacity: 1 !default;
+$kendo-tabstrip-item-disabled-opacity: var(--kendo-disabled-opacity, unset) !default;
 /// The filter of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-filter: null !default;
 
 /// The border width of the TabStrip indicator.
 /// @group tabstrip
-$kendo-tabstrip-indicator-size: 2px !default;
+$kendo-tabstrip-indicator-size: 3px !default;
 /// The border color of the TabStrip ripple.
 /// @group tabstrip
-$kendo-tabstrip-indicator-color: $kendo-color-primary !default;
+$kendo-tabstrip-indicator-color: $kendo-tabstrip-item-selected-text !default;
 
 /// The horizontal padding of the TabStrip content.
 /// @group tabstrip
@@ -199,11 +199,11 @@ $kendo-tabstrip-content-text: unset !default;
 $kendo-tabstrip-content-border: unset !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-focus-border: $kendo-component-text !default;
+$kendo-tabstrip-content-focus-border: k-color(border) !default;
 
 /// The left and right scroll overlay of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$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

package/scss/taskboard/_layout.scss

@@ -3,4 +3,8 @@
 
 @mixin kendo-task-board--layout() {
     @include kendo-task-board--layout-base();
+
+    .k-taskboard-card .k-card-title {
+        font-size: var( --kendo-font-size-lg, inherit );
+    }
 }

package/scss/taskboard/_variables.scss

@@ -24,13 +24,13 @@ $kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-taskboard-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-bg: null !default;
+$kendo-taskboard-bg: k-color(surface) !default;
 /// The text color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-text: null !default;
+$kendo-taskboard-text: k-color(on-app-surface) !default;
 /// The border color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-border: null !default;
+$kendo-taskboard-border: k-color(border) !default;
 
 /// The vertical padding of the TaskBoard Toolbar.
 /// @group taskboard
@@ -82,7 +82,7 @@ $kendo-taskboard-column-border-width: 1px !default;
 $kendo-taskboard-column-border-radius: k-border-radius(md) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
+$kendo-taskboard-column-bg: k-color(app-surface) !default;
 /// The text color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-text: null !default;
@@ -98,7 +98,7 @@ $kendo-taskboard-column-focus-bg: null !default;
 $kendo-taskboard-column-focus-text: null !default;
 /// The border color of the focused TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default;
+$kendo-taskboard-column-focus-border: k-color(border-alt) !default;
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
@@ -117,7 +117,7 @@ $kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2
 $kendo-taskboard-column-header-font-weight: 500 !default;
 /// The text color of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-text: $kendo-component-header-text !default;
+$kendo-taskboard-column-header-text: k-color(on-app-surface) !default;
 
 /// The vertical padding of the TaskBoard column Card wrapper.
 /// @group taskboard
@@ -143,13 +143,13 @@ $kendo-taskboard-pane-padding-x: null !default;
 $kendo-taskboard-pane-border-width: 1px !default;
 /// The background color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-bg: $kendo-component-bg !default;
+$kendo-taskboard-pane-bg: k-color(surface) !default;
 /// The text color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-text: $kendo-component-text !default;
+$kendo-taskboard-pane-text: k-color(on-app-surface) !default;
 /// The border color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-border: $kendo-component-border !default;
+$kendo-taskboard-pane-border: k-color(border) !default;
 
 /// The vertical padding of the TaskBoard pane header.
 /// @group taskboard
@@ -162,7 +162,7 @@ $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-spacer !default;
 $kendo-taskboard-pane-header-font-weight: 500 !default;
 /// The text color of the TaskBoard pane header.
 /// @group taskboard
-$kendo-taskboard-pane-header-text: $kendo-component-header-text !default;
+$kendo-taskboard-pane-header-text: k-color(on-app-surface) !default;
 
 /// The vertical padding of the TaskBoard pane content.
 /// @group taskboard
@@ -198,7 +198,7 @@ $kendo-taskboard-card-bg: $kendo-card-bg !default;
 $kendo-taskboard-card-text: $kendo-card-text !default;
 /// The border color of the TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-border: $kendo-base-border !default;
+$kendo-taskboard-card-border: k-color(border) !default;
 /// The shadow of the TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-shadow: none !default;
@@ -209,11 +209,11 @@ $kendo-taskboard-card-category-border-width: 4px !default;
 
 /// The border color of the hovered TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default;
+$kendo-taskboard-card-hover-border: k-color(border-alt) !default;
 
 /// The border color of the focused TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 9% )) !default;
+$kendo-taskboard-card-focus-border: k-color(border-alt) !default;
 /// The shadow of the focused TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-focus-shadow: none !default;
@@ -221,20 +221,20 @@ $kendo-taskboard-card-focus-shadow: none !default;
 
 /// The border of the selected TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-selected-border: $kendo-color-primary-lighter !default;
+$kendo-taskboard-card-selected-border: color-mix(in srgb, k-color(primary) 60%, transparent) !default;
 /// The shadow of the selected TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-selected-shadow: none !default;
 
 /// The text color of the TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-text: $kendo-color-primary !default;
+$kendo-taskboard-card-header-text: null !default;
 /// The text color of the hovered TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-focus-text: $kendo-color-primary-darker !default;
+$kendo-taskboard-card-header-focus-text: null !default;
 /// The text color of the focused TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-hover-text: $kendo-color-primary-darker !default;
+$kendo-taskboard-card-header-hover-text: null !default;
 
 /// The border width of the TaskBoard Card placeholder.
 /// @group taskboard
@@ -247,7 +247,7 @@ $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-ra
 $kendo-taskboard-drag-placeholder-bg: rgba( white, .2 ) !default;
 /// The border color of the TaskBoard Card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
+$kendo-taskboard-drag-placeholder-border: k-color(border) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/taskboard/_variables.scss" with (
     $kendo-taskboard-spacer: $kendo-taskboard-spacer,

package/scss/tilelayout/_layout.scss

@@ -1,6 +1,12 @@
 @use "@progress/kendo-theme-core/scss/components/tilelayout/_layout.scss" as *;
-
+@use "../card/_variables.scss" as *;
 
 @mixin kendo-tile-layout--layout() {
     @include kendo-tile-layout--layout-base();
+
+    .k-tilelayout {
+        .k-card {
+            box-shadow: $kendo-card-shadow;
+        }
+    }
 }

package/scss/tilelayout/_variables.scss

@@ -8,11 +8,11 @@
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
 /// @group tile-layout
-$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
+$kendo-tile-layout-bg: k-color(surface) !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tile-layout
-$kendo-tile-layout-padding-x: k-spacing(4) !default;
+$kendo-tile-layout-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the TileLayout
 /// @group tile-layout
@@ -33,10 +33,10 @@ $kendo-tile-layout-hint-border-width: 1px !default;
 $kendo-tile-layout-hint-border-radius: k-border-radius(md) !default;
 /// The color of the border around the TileLayout hint.
 /// @group tile-layout
-$kendo-tile-layout-hint-border: $kendo-component-border !default;
+$kendo-tile-layout-hint-border: k-color(border) !default;
 /// The background color of the TileLayout hint.
 /// @group tile-layout
-$kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
+$kendo-tile-layout-hint-bg: color-mix(in srgb, k-color(surface-alt) .2, transparent ) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/tilelayout/_variables.scss" with (

package/scss/timeline/_variables.scss

@@ -41,13 +41,13 @@ $kendo-timeline-track-arrow-height: k-spacing(9) !default;
 
 /// The background color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-true-mix(#000000, $kendo-body-bg, 8%)) !default;
+$kendo-timeline-track-arrow-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent) !default;
 /// The text color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-text: color-mix(in srgb, k-color(on-app-surface) 38%, transparent) !default;
 /// The border color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, transparent, k-true-mix($kendo-button-border, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-border: transparent !default;
 
 /// The size of the Timeline track.
 /// @group timeline
@@ -72,7 +72,7 @@ $kendo-timeline-track-start-calc: calc(#{$kendo-timeline-track-arrow-width} - 2
 $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
 /// The background color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), #e0e0e0) !default;
+$kendo-timeline-track-bg: k-color(base-subtle) !default;
 /// The border color of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;
@@ -108,10 +108,10 @@ $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} +
 $kendo-timeline-horizontal-flag-min-width: 60px !default;
 /// The background color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-bg: $kendo-color-primary !default;
+$kendo-timeline-flag-bg: k-color(primary) !default;
 /// The text color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg )) !default;
+$kendo-timeline-flag-text: k-color(on-primary) !default;
 
 /// The width of the Timeline's flag callout.
 /// @group timeline
@@ -155,7 +155,7 @@ $kendo-timeline-circle-width: 16px !default;
 $kendo-timeline-circle-height: 16px !default;
 /// The background color of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-bg: $kendo-color-primary !default;
+$kendo-timeline-circle-bg: k-color(primary) !default;
 
 /// The horizontal padding of the Timeline collapse arrow.
 /// @group timeline