@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0

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;
@@ -70,7 +70,7 @@ $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,10 +97,10 @@ $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
@@ -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: k-color(base-hover) !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: k-color(on-app-surface) !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: k-color(on-app-surface) !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: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !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: k-color(primary) !default;
+$kendo-tabstrip-indicator-color: $kendo-tabstrip-item-selected-text !default;
 
 /// The horizontal padding of the TabStrip content.
 /// @group tabstrip
@@ -199,7 +199,7 @@ $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: k-color(on-app-surface) !default;
+$kendo-tabstrip-content-focus-border: k-color(border) !default;
 
 /// The left and right scroll overlay 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: k-color(surface) !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;
@@ -143,7 +143,7 @@ $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: k-color(surface-alt) !default;
+$kendo-taskboard-pane-bg: k-color(surface) !default;
 /// The text color of the TaskBoard pane.
 /// @group taskboard
 $kendo-taskboard-pane-text: k-color(on-app-surface) !default;
@@ -228,13 +228,13 @@ $kendo-taskboard-card-selected-shadow: none !default;
 
 /// The text color of the TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-text: k-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: k-color(primary-active) !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: k-color(primary-active) !default;
+$kendo-taskboard-card-header-hover-text: null !default;
 
 /// The border width of the TaskBoard Card placeholder.
 /// @group taskboard

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

@@ -12,7 +12,7 @@ $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
@@ -36,7 +36,7 @@ $kendo-tile-layout-hint-border-radius: k-border-radius(md) !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,10 +41,10 @@ $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: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !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: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !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: transparent !default;

package/scss/timeselector/_layout.scss

@@ -1,6 +1,44 @@
+@use "sass:map";
+@use "sass:list";
 @use "@progress/kendo-theme-core/scss/components/timeselector/_layout.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-time-selector--layout() {
     @include kendo-time-selector--layout-base();
+
+    .k-time-list-wrapper {
+        .k-title {
+            font-weight: var( --kendo-font-weight, normal );
+        }
+
+        &.k-focus {
+            &::before,
+            &::after {
+                height: calc( 50% - (calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height})) / 2);
+            }
+        }
+    }
+
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+        .k-time-now {
+            border-width: $kendo-time-selector-border-width;
+        }
+    }
+
+    .k-time-list-container {
+        padding: 0 k-spacing(3);
+    }
+
+    // Time list highlight
+    .k-time-highlight,
+    .k-time-list-highlight {
+        width: auto;
+        border-radius: k-border-radius(xxxl);
+        left: k-spacing(3);
+        right: k-spacing(3);
+    }
 }

package/scss/timeselector/_theme.scss

@@ -10,14 +10,16 @@
     // Time selector
     .k-timeselector {}
 
-
     // Time list
     .k-time-list {
-        .k-item:hover {
-            @include fill(
-                $kendo-list-item-hover-text,
-                $kendo-list-item-hover-bg
-            );
+        &::before,
+        &::after {
+            box-shadow: none;
+        }
+
+        &::before,
+        &::after {
+            box-shadow: none;
         }
     }
 

package/scss/timeselector/_variables.scss

@@ -7,24 +7,27 @@
 
 $kendo-time-selector-border-width: 1px !default;
 $kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
-$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-time-selector-line-height: math.div( 20, 14 ) !default;
+$kendo-time-selector-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-time-selector-line-height: var( --kendo-line-height-lg, normal ) !default;
 
-$kendo-time-selector-bg: k-color(surface-alt) !default;
+$kendo-time-selector-bg: k-color(surface) !default;
 $kendo-time-selector-text: k-color(on-app-surface) !default;
 $kendo-time-selector-border: k-color(border) !default;
 
-$kendo-time-selector-header-padding-x: $kendo-actions-padding-x !default;
-$kendo-time-selector-header-padding-y: $kendo-actions-padding-y !default;
+$kendo-time-selector-header-padding-x: k-spacing(1) !default;
+$kendo-time-selector-header-padding-y: k-spacing(3) !default;
 $kendo-time-selector-header-border-width: 0px !default;
+$kendo-time-selector-header-title-text: k-color(primary-on-surface) !default;
+$kendo-time-selector-header-time-now-text: unset !default;
+$kendo-time-selector-header-time-now-hover-text: unset !default;
 
-$kendo-time-selector-fast-selection-gap: k-spacing(2) !default;
+$kendo-time-selector-fast-selection-gap: null !default;
 
 $kendo-time-list-width: 4em !default;
 $kendo-time-list-height: 240px !default;
 
 $kendo-time-list-title-font-size: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-time-list-title-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-time-list-title-line-height: var( --kendo-line-height-sm, normal ) !default;
 $kendo-time-list-title-height: calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
 $kendo-time-list-title-text: k-color(subtle) !default;
 $kendo-time-list-title-focus-text: k-color(on-app-surface) !default;
@@ -32,29 +35,29 @@ $kendo-time-list-title-focus-text: k-color(on-app-surface) !default;
 $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
-$kendo-time-list-highlight-border-width: 1px 0px !default;
+$kendo-time-list-highlight-border-width: 1px !default;
 $kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
-$kendo-time-list-highlight-bg: k-color(surface-alt) !default;
-$kendo-time-list-highlight-border: k-color(border) !default;
+$kendo-time-list-highlight-bg: transparent !default;
+$kendo-time-list-highlight-border: k-color(primary-on-subtle) !default;
 
-$kendo-time-list-focus-bg: unset !default;
+$kendo-time-list-focus-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 
 // Time selector sizes
-$kendo-time-selector-sm-font-size: $kendo-list-sm-font-size !default;
-$kendo-time-selector-sm-line-height: $kendo-list-sm-line-height !default;
-$kendo-time-selector-sm-list-item-padding-x: $kendo-list-sm-item-padding-x !default;
-$kendo-time-selector-sm-list-item-padding-y: $kendo-list-sm-item-padding-y !default;
+$kendo-time-selector-sm-font-size: $kendo-time-selector-font-size !default;
+$kendo-time-selector-sm-line-height: $kendo-time-selector-line-height !default;
+$kendo-time-selector-sm-list-item-padding-x: k-spacing(2) !default;
+$kendo-time-selector-sm-list-item-padding-y: k-spacing(2) !default;
 
-$kendo-time-selector-md-font-size: $kendo-list-md-font-size !default;
-$kendo-time-selector-md-line-height: $kendo-list-md-line-height !default;
-$kendo-time-selector-md-list-item-padding-x: $kendo-list-md-item-padding-x !default;
-$kendo-time-selector-md-list-item-padding-y: $kendo-list-md-item-padding-y !default;
+$kendo-time-selector-md-font-size: $kendo-time-selector-font-size !default;
+$kendo-time-selector-md-line-height: $kendo-time-selector-line-height !default;
+$kendo-time-selector-md-list-item-padding-x: k-spacing(3) !default;
+$kendo-time-selector-md-list-item-padding-y: k-spacing(3) !default;
 
-$kendo-time-selector-lg-font-size: $kendo-list-lg-font-size !default;
-$kendo-time-selector-lg-line-height: $kendo-list-lg-line-height !default;
-$kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !default;
-$kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;
+$kendo-time-selector-lg-font-size: $kendo-time-selector-font-size !default;
+$kendo-time-selector-lg-line-height: $kendo-time-selector-line-height !default;
+$kendo-time-selector-lg-list-item-padding-x: k-spacing(4) !default;
+$kendo-time-selector-lg-list-item-padding-y: k-spacing(4) !default;
 
 $kendo-time-selector-sizes: (
     sm: (
@@ -92,6 +95,9 @@ $kendo-time-selector-now-button-hover-text: k-color(secondary-hover) !default;
     $kendo-time-selector-header-padding-y: $kendo-time-selector-header-padding-y,
     $kendo-time-selector-header-border-width: $kendo-time-selector-header-border-width,
     $kendo-time-selector-fast-selection-gap: $kendo-time-selector-fast-selection-gap,
+    $kendo-time-selector-header-title-text: $kendo-time-selector-header-title-text,
+    $kendo-time-selector-header-time-now-text: $kendo-time-selector-header-time-now-text,
+    $kendo-time-selector-header-time-now-hover-text: $kendo-time-selector-header-time-now-hover-text,
     $kendo-time-list-width: $kendo-time-list-width,
     $kendo-time-list-height: $kendo-time-list-height,
     $kendo-time-list-title-font-size: $kendo-time-list-title-font-size,

package/scss/toolbar/_layout.scss

@@ -1,4 +1,3 @@
-@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *;
 
 
@@ -6,50 +5,4 @@
 
     @include kendo-toolbar--layout-base();
 
-    .k-toolbar,
-    .k-toolbar-popup {
-
-        // Button
-        .k-button {
-            @include box-shadow( none );
-        }
-
-
-        // Button group
-        .k-button-group {
-            @include box-shadow( none );
-        }
-
-
-        // Split button
-        .k-split-button {
-            @include box-shadow( none );
-        }
-
-        &.k-toolbar-outline {
-            @include box-shadow( none );
-        }
-    }
-
-    // Overflow container
-    .k-overflow-container {
-
-        .k-button {
-            @include box-shadow( none );
-            font-weight: normal;
-            text-transform: unset;
-
-            &::before {
-                display: none;
-            }
-
-            &:disabled,
-            &.k-disabled {
-                opacity: .6;
-                filter: grayscale(.1);
-            }
-        }
-
-    }
-
 }

package/scss/toolbar/_theme.scss

@@ -1,3 +1,4 @@
+@use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../core/functions/index.import.scss" as *;
@@ -7,49 +8,8 @@
 @mixin kendo-toolbar--theme() {
 
     @include kendo-toolbar--theme-base();
-
-    .k-toolbar,
-    .k-toolbar-popup {
-
-        .k-button-solid-base {
-            background-color: k-color(base-subtle);
-            border-color: k-color(base-subtle);
-
-            // Hover state
-            &:hover,
-            &.k-hover {
-                background-color: k-color(base-subtle-hover);
-                border-color: k-color(base-subtle-hover);
-            }
-
-            // Focus state
-            &:focus,
-            &.k-focus {
-                background-color: k-color(base-subtle-hover);
-                border-color: k-color(base-subtle-hover);
-            }
-
-            // Active state
-            &:active,
-            &.k-active {
-                background-color: k-color(base-subtle-active);
-                border-color: k-color(base-subtle-active);
-            }
-
-            // Selected state
-            &.k-selected {
-                background-color: k-color(base-subtle-active);
-                border-color: k-color(base-subtle-active);
-            }
-
-            &.k-input-button,
-            &.k-input-spinner .k-spinner-increase,
-            &.k-input-spinner .k-spinner-decrease {
-                background: none;
-                border-color: transparent;
-            }
-        }
-
+    .k-toolbar-flat {
+        border-top-color: $kendo-toolbar-flat-border !important; // stylelint-disable-line declaration-no-important
+        border-inline-color: $kendo-toolbar-flat-border !important; // stylelint-disable-line declaration-no-important
     }
-
 }