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

package/scss/drawer/_variables.scss

@@ -5,16 +5,16 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: k-color(surface-alt) !default;
+$kendo-drawer-bg: k-color(surface) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: k-color(on-app-surface) !default;
+$kendo-drawer-text: k-color(subtle) !default;
 /// The border color of the Drawer.
 /// @group drawer
 $kendo-drawer-border: k-color(border) !default;
 /// The border width of the Drawer.
 /// @group drawer
-$kendo-drawer-border-width: 1px !default;
+$kendo-drawer-border-width: 0 !default;
 
 /// The font family of the Drawer.
 /// @group drawer
@@ -28,39 +28,51 @@ $kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-x: null !default;
+$kendo-drawer-content-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: null !default;
+$kendo-drawer-content-padding-y: k-spacing(3) !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-width: 7px !default;
+$kendo-drawer-scrollbar-width: 8px !default;
 /// The color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+$kendo-drawer-scrollbar-color: k-color(dark-emphasis) !default;
 /// The background color of the Drawer scrollbar thumb.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: #dedede !default;
+$kendo-drawer-scrollbar-bg: transparent !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-radius: 20px !default;
+$kendo-drawer-scrollbar-radius: k-border-radius( full ) !default;
 /// The hover color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
+$kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-color !default;
 
+/// The horizontal padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-x: k-spacing(3) !default;
+/// The vertical padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-y: k-spacing(3) !default;
 /// The horizontal padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: k-spacing(3) !default;
+$kendo-drawer-item-padding-y: k-spacing(4) !default;
+/// The spacing between the items in the Drawer item.
+/// @group drawer
+$kendo-drawer-item-spacing: k-spacing(3) !default;
 /// The font size of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
 /// The line height of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-drawer-item-line-height: $kendo-drawer-line-height !default;
+/// The font weight of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-font-weight: var( --kendo-font-weight-medium, 500 ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
@@ -68,45 +80,52 @@ $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 /// The count of the Drawer item levels.
 /// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
+/// The border radius of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-border-radius: k-border-radius(full) !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-x: k-spacing(0) !default;
+$kendo-drawer-icon-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Drawer icon.
 /// @group drawer
 $kendo-drawer-icon-padding-y: k-spacing(1) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size}) !default;
+$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size} + 2 * #{$kendo-drawer-icon-padding-x} + 2 * #{$kendo-drawer-items-padding-x}) !default;
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-bg: k-color(base-hover) !default;
+$kendo-drawer-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-text: k-color(on-app-surface) !default;
+$kendo-drawer-hover-text: $kendo-drawer-text !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-focus-bg: k-color(base-hover) !default;
+$kendo-drawer-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
 $kendo-drawer-focus-shadow: none !default;
 
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-bg: unset !default;
+$kendo-drawer-selected-bg: k-color(secondary) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-text: k-color(secondary) !default;
+$kendo-drawer-selected-text: k-color(on-secondary) !default;
 
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-bg: k-color(base-hover) !default;
+$kendo-drawer-selected-hover-bg: k-color(secondary-hover) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-text: k-color(secondary) !default;
+$kendo-drawer-selected-hover-text: $kendo-drawer-selected-text !default;
+
+/// The background color of the selected and focused Drawer item.
+/// @group drawer
+$kendo-drawer-selected-focus-bg: k-color(secondary-active) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (
     $kendo-drawer-bg: $kendo-drawer-bg,
@@ -123,12 +142,17 @@ $kendo-drawer-selected-hover-text: k-color(secondary) !default;
     $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg,
     $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius,
     $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color,
+    $kendo-drawer-items-padding-x: $kendo-drawer-items-padding-x,
+    $kendo-drawer-items-padding-y: $kendo-drawer-items-padding-y,
     $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x,
     $kendo-drawer-item-padding-y: $kendo-drawer-item-padding-y,
+    $kendo-drawer-item-spacing: $kendo-drawer-item-spacing,
     $kendo-drawer-item-font-size: $kendo-drawer-item-font-size,
     $kendo-drawer-item-line-height: $kendo-drawer-item-line-height,
+    $kendo-drawer-item-font-weight: $kendo-drawer-item-font-weight,
     $kendo-drawer-item-level-padding-x: $kendo-drawer-item-level-padding-x,
     $kendo-drawer-item-level-count: $kendo-drawer-item-level-count,
+    $kendo-drawer-item-border-radius: $kendo-drawer-item-border-radius,
     $kendo-drawer-icon-padding-x: $kendo-drawer-icon-padding-x,
     $kendo-drawer-icon-padding-y: $kendo-drawer-icon-padding-y,
     $kendo-drawer-mini-initial-width: $kendo-drawer-mini-initial-width,
@@ -139,5 +163,6 @@ $kendo-drawer-selected-hover-text: k-color(secondary) !default;
     $kendo-drawer-selected-bg: $kendo-drawer-selected-bg,
     $kendo-drawer-selected-text: $kendo-drawer-selected-text,
     $kendo-drawer-selected-hover-bg: $kendo-drawer-selected-hover-bg,
-    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text
+    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text,
+    $kendo-drawer-selected-focus-bg: $kendo-drawer-selected-focus-bg
 );

package/scss/dropzone/_variables.scss

@@ -25,11 +25,11 @@ $kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the DropZone.
 /// @group dropzone
-$kendo-dropzone-line-height: math.div( 20, 14 ) !default;
+$kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: k-color(base-subtle) !default;
+$kendo-dropzone-bg: k-color(surface) !default;
 /// The text color of the DropZone.
 /// @group dropzone
 $kendo-dropzone-text: k-color(on-app-surface) !default;

package/scss/editor/_layout.scss

@@ -1,4 +1,3 @@
-@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/editor/_layout.scss" as *;
 
 
@@ -8,19 +7,10 @@
 
     // Insert table
     .k-ct-popup {
-        line-height: normal;
+        line-height: var( --kendo-line-height, normal);
 
         .k-status {
-            line-height: var( --kendo-line-height, inherit);
-        }
-    }
-
-    .k-editor-export {
-        text-transform: uppercase;
-        font-size: var( --kendo-font-size, inherit );
-
-        .k-icon {
-            margin-left: $kendo-editor-export-tool-icon-margin-x;
+            line-height: var( --kendo-line-height, normal);
         }
     }
 }

package/scss/editor/_variables.scss

@@ -58,14 +58,14 @@ $kendo-editor-resize-handle-bg: #ffffff !default;
 $kendo-editor-selectednode-outline-width: 2px !default;
 /// The outline color of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-color: #88ccff !default;
+$kendo-editor-selectednode-outline-color: k-color(primary) !default;
 
 /// The horizontal padding of the inline Editor.
 /// @group editor
-$kendo-editor-inline-padding-x: k-spacing(2) !default;
+$kendo-editor-inline-padding-x: k-spacing(4) !default;
 /// The vertical padding of the inline Editor.
 /// @group editor
-$kendo-editor-inline-padding-y: k-spacing(0.5) !default;
+$kendo-editor-inline-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Editor file browser tiles.
 /// @group editor
@@ -76,7 +76,7 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default;
 
 /// The padding of the Editor content.
 /// @group editor
-$kendo-editor-content-padding: k-spacing(4) !default;
+$kendo-editor-content-padding: k-spacing(2) !default;
 
 $kendo-editor-ct-cell-text: k-color(on-secondary) !default;
 $kendo-editor-ct-cell-bg: k-color(secondary) !default;

package/scss/expansion-panel/_layout.scss

@@ -3,4 +3,9 @@
 
 @mixin kendo-expander--layout() {
     @include kendo-expander--layout-base();
+
+    .k-expander-title {
+        text-transform: none;
+    }
+
 }

package/scss/expansion-panel/_variables.scss

@@ -30,14 +30,14 @@ $kendo-expander-border: k-color(border) !default;
 
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
+$kendo-expander-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-padding-x: k-spacing(6) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-y: k-spacing(3) !default;
+$kendo-expander-header-padding-y: k-spacing(3.5) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
@@ -51,17 +51,17 @@ $kendo-expander-header-border: null !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: rgba( black, .04 ) !default;
+$kendo-expander-header-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent)  !default;
 /// The background color of the focused ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-focus-bg: rgba( black, .12 ) !default;
+$kendo-expander-header-focus-bg: null !default;
 /// The box shadow of the focused ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-focus-shadow: none !default;
+$kendo-expander-header-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: k-color(secondary) !default;
+$kendo-expander-title-text: k-color(on-app-surface) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander

package/scss/fab/_layout.scss

@@ -6,7 +6,7 @@
     @include kendo-fab--layout-base();
 
     .k-fab-text {
-        text-transform: uppercase;
+        font-weight: var(--kendo-font-weight-md, 500);
     }
 
 }

package/scss/fab/_theme.scss

@@ -10,9 +10,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
-            border-color: $color;
-            color: k-color(on-#{$name});
-            background-color: $color;
+            border-color: k-color(#{$name}-subtle);
+            color: k-color(#{$name}-on-subtle);
+            background-color: k-color(#{$name}-subtle);
         }
     }
 
@@ -20,8 +20,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: k-color(#{$name}-hover);
-            background-color: k-color(#{$name}-hover);
+            border-color: k-color(#{$name}-subtle-hover);
+            background-color: k-color(#{$name}-subtle-hover);
+            @include box-shadow(k-elevation(4));
         }
     }
 
@@ -29,8 +30,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-focus.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:focus {
-            border-color: k-color(#{$name}-active);
-            background-color: k-color(#{$name}-active);
+            border-color: k-color(#{$name}-subtle-active);
+            background-color: k-color(#{$name}-subtle-active);
         }
     }
 
@@ -39,9 +40,9 @@
         .k-active.k-fab-solid-#{$name},
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
-            border-color: k-color(#{$name}-active);
-            background-color: k-color(#{$name}-active);
-            box-shadow: $kendo-fab-active-shadow;
+            @include box-shadow($kendo-fab-active-shadow);
+            border-color: k-color(#{$name}-subtle-active);
+            background-color: k-color(#{$name}-subtle-active);
         }
     }
 
@@ -51,8 +52,8 @@
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
             border-color: transparent;
-            background-color: color-mix(in srgb, k-color(on-app-surface) 9%, transparent);
-            color: color-mix(in srgb, k-color(on-app-surface) 32%, transparent);
+            background-color: color-mix(in srgb, k-color(on-app-surface) 12%, transparent);
+            color: color-mix(in srgb, k-color(on-app-surface) 38%, transparent);
             opacity: 1;
         }
     }

package/scss/fab/_variables.scss

@@ -19,33 +19,33 @@ $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the FAB.
 /// @group floating-action-button
-$kendo-fab-line-height: math.div( 20, 14 ) !default;
+$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: k-spacing(4) !default;
+$kendo-fab-padding-x: k-spacing(4.5) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
+$kendo-fab-sm-padding-x: k-spacing(2.5) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;
+$kendo-fab-lg-padding-x: k-spacing(8) !default;
 
 /// The vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
+$kendo-fab-sm-padding-y: $kendo-fab-sm-padding-x !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;
+$kendo-fab-lg-padding-y: $kendo-fab-lg-padding-x !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
@@ -55,7 +55,7 @@ $kendo-fab-icon-padding-x: k-spacing(0.5) !default;
 $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
 /// The spacing FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: calc( #{k-spacing(1)} * 1.5 ) !default;
+$kendo-fab-icon-spacing: k-spacing(1.5) !default;
 
 /// The horizontal padding of the FAB items.
 /// @group floating-action-button
@@ -130,20 +130,20 @@ $kendo-fab-sizes: (
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: k-elevation(5) !default;
+$kendo-fab-shadow: k-elevation(3) !default;
 /// The shadow of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: k-elevation(5) !default;
+$kendo-fab-disabled-shadow: none !default;
 /// The shadow of the active FAB.
 /// @group floating-action-button
-$kendo-fab-active-shadow: k-elevation(7) !default;
+$kendo-fab-active-shadow: k-elevation(3) !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-text: k-color(on-app-surface) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: k-color(surface-alt) !default;
+$kendo-fab-item-bg: k-color(surface) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-border: k-color(border) !default;

package/scss/filemanager/_theme.scss

@@ -3,4 +3,8 @@
 
 @mixin kendo-file-manager--theme() {
     @include kendo-file-manager--theme-base();
+
+    .k-filemanager-breadcrumb {
+        border-color: transparent;
+    }
 }

package/scss/filemanager/_variables.scss

@@ -21,7 +21,7 @@ $kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-bg: k-color(surface-alt) !default;
+$kendo-file-manager-bg: k-color(app-surface) !default;
 /// The text color of the FileManager.
 /// @group file-manager
 $kendo-file-manager-text: k-color(on-app-surface) !default;

package/scss/filter/_variables.scss

@@ -11,7 +11,7 @@ $kendo-filter-padding-y: $kendo-filter-padding-x !default;
 
 /// The bottom margin of the Filter.
 /// @group filter
-$kendo-filter-bottom-margin: 2.1em !default;
+$kendo-filter-bottom-margin: k-spacing(7.5) !default;
 /// The width of the line that connects the Filter items.
 /// @group filter
 $kendo-filter-line-size: 1px !default;
@@ -29,7 +29,7 @@ $kendo-filter-preview-operator-text: k-color(subtle) !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
+$kendo-filter-toolbar-focus-shadow: null !default;
 
 @forward "@progress/kendo-theme-core/scss/components/filter/_variables.scss" with (
     $kendo-filter-padding-x: $kendo-filter-padding-x,

package/scss/forms/_variables.scss

@@ -1,13 +1,13 @@
 @use "../core/_index.scss" as *;
-@use"../input/_variables.scss" as *;
-@use"../tooltip/_variables.scss" as *;
-@use"../typography/_variables.scss" as *;
+@use "../input/_variables.scss" as *;
+@use "../tooltip/_variables.scss" as *;
+@use "../typography/_variables.scss" as *;
 
 // Forms
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: calc( #{k-spacing(4)} * 2 ) !default;
+$kendo-form-spacer: k-spacing(8) !default;
 
 /// The font size of the Form.
 /// @group form
@@ -94,7 +94,7 @@ $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
 /// The top padding of the label in the horizontal Form.
 /// @group form
-$kendo-horizontal-form-label-padding-top: calc( #{k-spacing(2.5)} / 2 ) !default;
+$kendo-horizontal-form-label-padding-top: k-spacing(2.5) !default;
 /// The horizontal margin of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-margin-x: k-spacing(2.5) !default;

package/scss/gantt/_variables.scss

@@ -56,7 +56,7 @@ $kendo-gantt-line-size: 2px !default;
 $kendo-gantt-line-fill: k-color(subtle) !default;
 /// The background fill of the selected Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-selected-fill: k-color(secondary) !default;
+$kendo-gantt-line-selected-fill: k-color(primary) !default;
 
 /// The size of the Gantt task dot.
 /// @group gantt
@@ -79,29 +79,29 @@ $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
 
 /// The background color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-bg: k-color(primary) !default;
+$kendo-gantt-milestone-bg: k-color(inverse) !default;
 /// The border color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-border: k-color(primary) !default;
+$kendo-gantt-milestone-border: k-color(inverse) !default;
 /// The background color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: k-color(secondary) !default;
+$kendo-gantt-milestone-selected-bg: k-color(primary) !default;
 /// The border color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-border: k-color(secondary) !default;
+$kendo-gantt-milestone-selected-border: k-color(primary) !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: k-color(primary-emphasis) !default;
+$kendo-gantt-summary-bg: k-color(inverse-subtle) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: k-color(primary) !default;
+$kendo-gantt-summary-progress-bg: k-color(inverse) !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: k-color(secondary-subtle-active) !default;
+$kendo-gantt-summary-selected-bg: k-color(primary-emphasis) !default;
 /// The background color of the selected Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-selected-bg: k-color(secondary) !default;
+$kendo-gantt-summary-progress-selected-bg: k-color(primary) !default;
 
 /// The horizontal padding of the Gantt task.
 /// @group gantt
@@ -114,28 +114,28 @@ $kendo-gantt-task-padding-y: k-spacing(1) !default;
 $kendo-gantt-task-border-width: 0px !default;
 /// The background color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: k-color(primary-emphasis) !default;
+$kendo-gantt-task-bg: k-color(inverse-subtle) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: k-color(on-primary) !default;
+$kendo-gantt-task-text: k-color(on-inverse) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: null !default;
 /// The background color of the Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-bg: k-color(primary) !default;
+$kendo-gantt-task-progress-bg: k-color(inverse) !default;
 /// The background color of selected the Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: k-color(secondary-subtle-active) !default;
+$kendo-gantt-task-selected-bg: k-color(primary-emphasis) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-text: k-color(secondary)-contrast !default;
+$kendo-gantt-task-selected-text: k-color(on-primary) !default;
 /// The border color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: null !default;
 /// The background color of the selected Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-selected-bg: k-color(secondary) !default;
+$kendo-gantt-task-progress-selected-bg: k-color(primary) !default;
 
 /// The padding of the Gantt task actions.
 /// @group gantt
@@ -204,7 +204,7 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
 /// The background color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: k-color(primary) !default;
+$kendo-gantt-planned-bg: k-color(inverse) !default;
 /// The border color of the Gantt planned Tooltip.
 /// @group gantt
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;

package/scss/grid/_layout.scss

@@ -10,8 +10,8 @@
     // Grid
     .k-grid {
 
-        .k-group-footer td,
-        .k-group-footer .k-table-td {
+        .k-table .k-group-footer td,
+        .k-table .k-group-footer .k-table-td {
             border-top-width: 0;
         }
 
@@ -24,20 +24,17 @@
     .k-grid-header {
 
         .k-table-th {
-            font-weight: 700;
+            font-weight: var( --kendo-font-weight-semibold, 600 );
 
             .k-grid-filter {
-                font-weight: normal;
+                font-weight: var( --kendo-font-weight-normal, 400 );
             }
         }
 
-        .k-grid-filter {
-            border-radius: 50%;
-        }
-
+        .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu  {
-            border-radius: 50%;
+            border-radius: k-border-radius( md );
         }
 
         .k-resizable-columns .k-table-th:not(.k-group-cell) {
@@ -68,18 +65,6 @@
         }
     }
 
-    .k-grouping-dropclue {
-        width: 0;
-        height: $kendo-grid-group-drop-hint-height;
-        top: $kendo-grid-group-drop-hint-top;
-        border-style: solid;
-        border-width: 0 2px 0 0;
-
-        &::before {
-            border-width: 0;
-        }
-    }
-
     .k-resize-handle:hover .k-resize-handle-inner {
         width: 1px;
         height: 100%;