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

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: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color ));
-            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: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-true-mix( #ffffff, $color, 8%));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-true-mix( #ffffff, $color, 8%));
+            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: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 12%));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 12%));
+            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: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 16%));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 16%));
-            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);
         }
     }
 
@@ -50,9 +51,9 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            border-color: if($kendo-enable-color-system, transparent, k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-color-tint( $kendo-disabled-text, 4));
+            border-color: 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;
         }
     }
@@ -78,25 +79,25 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: if($kendo-enable-color-system, k-color( base-hover ), k-true-mix( #000000, $kendo-fab-item-icon-border, 8%));
-        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-true-mix( #000000, $kendo-fab-item-icon-bg, 8%));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-true-mix( #000000, $kendo-fab-item-icon-text, 8%));
+        border-color: k-color(base-hover);
+        background-color: k-color(base-hover);
+        color: k-color(on-base);
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        border-color: if($kendo-enable-color-system, k-color( base-active ), k-true-mix( #000000, $kendo-fab-item-icon-border, 12%));
-        background-color: if($kendo-enable-color-system, k-color( base-active ), k-true-mix( #000000, $kendo-fab-item-icon-bg, 12%));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-true-mix( #000000, $kendo-fab-item-icon-text, 12%));
+        border-color: k-color(base-active);
+        background-color: k-color(base-active);
+        color: k-color(on-base);
     }
 
     // Active state
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: if($kendo-enable-color-system, k-color( base ), k-true-mix( #ffffff, $kendo-fab-item-icon-border, 12%));
-        background-color: if($kendo-enable-color-system, k-color( base ), k-true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%));
+        border-color: k-color(base);
+        background-color: k-color(base);
     }
 
     // Disabled state
@@ -107,8 +108,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
+            background-color: color-mix(in srgb, k-color(base) 60%, transparent);
+            color: color-mix(in srgb, k-color(on-base) 60%, transparent);
         }
     }
 

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
@@ -98,7 +98,18 @@ $kendo-fab-item-icon-border-radius: 50% !default;
 
 /// The theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $kendo-theme-colors !default;
+$kendo-fab-theme-colors:  (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
 /// The size map for the FAB.
 /// @group floating-action-button
@@ -119,23 +130,23 @@ $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: $kendo-component-text !default;
+$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: $kendo-component-bg !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: $kendo-component-border !default;
+$kendo-fab-item-border: k-color(border) !default;
 
 /// The base text color of the FAB item icon.
 /// @group floating-action-button

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,20 +21,20 @@ $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: $kendo-component-bg !default;
+$kendo-file-manager-bg: k-color(app-surface) !default;
 /// The text color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-text: $kendo-component-text !default;
+$kendo-file-manager-text: k-color(on-app-surface) !default;
 /// The border color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-border: $kendo-component-border !default;
+$kendo-file-manager-border: k-color(border) !default;
 
 /// The border width of the FileManager Toolbar.
 /// @group file-manager
 $kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
 /// The background color of the FileManager Toolbar.
 /// @group file-manager
-$kendo-file-manager-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-file-manager-toolbar-bg: k-color(surface) !default;
 /// The text color of the FileManager Toolbar.
 /// @group file-manager
 $kendo-file-manager-toolbar-text: null !default;
@@ -123,7 +123,7 @@ $kendo-file-manager-listview-item-border: null !default;
 $kendo-file-manager-listview-item-icon-bg: null !default;
 /// The text color of the FileManager ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
+$kendo-file-manager-listview-item-icon-text: k-color(subtle) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group file-manager
 $kendo-file-manager-listview-item-icon-border: null !default;
@@ -180,7 +180,7 @@ $kendo-file-manager-preview-border: null !default;
 $kendo-file-manager-preview-icon-bg: null !default;
 /// The text color of the FileManager preview icon.
 /// @group file-manager
-$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
+$kendo-file-manager-preview-icon-text: k-color(subtle) !default;
 /// The border color of the FileManager preview icon.
 /// @group file-manager
 $kendo-file-manager-preview-icon-border: null !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;
@@ -22,14 +22,14 @@ $kendo-filter-operator-dropdown-width: 15em !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: $kendo-color-primary !default;
+$kendo-filter-preview-field-text: k-color(primary) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: $kendo-subtle-text !default;
+$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/floating-label/_theme.scss

@@ -13,7 +13,7 @@
         .k-invalid + .k-floating-label,
         .ng-invalid.ng-touched + .k-floating-label,
         .ng-invalid.ng-dirty + .k-floating-label {
-            @include fill( $color: $kendo-color-error );
+            @include fill( $color: k-color(error) );
         }
     }
 

package/scss/floating-label/_variables.scss

@@ -44,14 +44,14 @@ $kendo-floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;
 $kendo-floating-label-bg: null !default;
 /// The text color of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-text: $kendo-subtle-text !default;
+$kendo-floating-label-text: k-color(subtle) !default;
 
 /// The background color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-bg: null !default;
 /// The text color of the focused Floating Label.
 /// @group floating-label
-$kendo-floating-label-focus-text: $kendo-color-primary !default;
+$kendo-floating-label-focus-text: k-color(primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
     $kendo-floating-label-scale: $kendo-floating-label-scale,

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
@@ -46,7 +46,7 @@ $kendo-form-legend-border-width: 0 0 2px !default;
 $kendo-form-legend-border-style: solid !default;
 /// The border color of the Form legend.
 /// @group form
-$kendo-form-legend-border-color: $kendo-component-border !default;
+$kendo-form-legend-border-color: k-color(border) !default;
 /// The width of the Form legend.
 /// @group form
 $kendo-form-legend-width: 100% !default;
@@ -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

@@ -20,13 +20,13 @@ $kendo-gantt-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: $kendo-component-bg !default;
+$kendo-gantt-bg: k-color(surface-alt) !default;
 /// The text color of the Gantt.
 /// @group gantt
-$kendo-gantt-text: $kendo-component-text !default;
+$kendo-gantt-text: k-color(on-app-surface) !default;
 /// The border color of the Gantt.
 /// @group gantt
-$kendo-gantt-border: $kendo-component-border !default;
+$kendo-gantt-border: k-color(border) !default;
 
 /// The background color of the Gantt TreeList.
 /// @group gantt
@@ -40,7 +40,7 @@ $kendo-gantt-treelist-border: null !default;
 
 /// The background color of the Gantt non-working days.
 /// @group gantt
-$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
+$kendo-gantt-nonwork-bg: color-mix(in srgb, k-color(on-base) 3%, transparent) !default;
 /// The text color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-text: null !default;
@@ -53,10 +53,10 @@ $kendo-gantt-nonwork-border: null !default;
 $kendo-gantt-line-size: 2px !default;
 /// The background fill color of the Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !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: $kendo-selected-bg !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: $kendo-color-primary !default;
+$kendo-gantt-milestone-bg: k-color(inverse) !default;
 /// The border color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-border: $kendo-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: $kendo-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: $kendo-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: if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) !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: $kendo-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: if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) !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: $kendo-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: if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
+$kendo-gantt-task-bg: k-color(inverse-subtle) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: $kendo-color-primary-contrast !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: $kendo-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: if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) !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: $kendo-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: $kendo-color-secondary !default;
+$kendo-gantt-task-progress-selected-bg: k-color(primary) !default;
 
 /// The padding of the Gantt task actions.
 /// @group gantt
@@ -204,24 +204,24 @@ $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: $kendo-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;
 
 /// The background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: $kendo-color-error !default;
+$kendo-gantt-delayed-bg: k-color(error) !default;
 /// The complement background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
+$kendo-gantt-delayed-bg-lighter: k-color(error-emphasis) !default;
 
 /// The background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: $kendo-color-success !default;
+$kendo-gantt-advanced-bg: k-color(success) !default;
 /// The complement background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
+$kendo-gantt-advanced-bg-lighter: k-color(success-emphasis) !default;
 
 /// The text color of the Gantt delayed task action.
 /// @group gantt
@@ -241,10 +241,10 @@ $kendo-gantt-validation-tooltip-label-width: 50px !default;
 $kendo-gantt-validation-tooltip-border: #656565 !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+$kendo-gantt-validation-tooltip-valid-border: k-color(success) !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
+$kendo-gantt-validation-tooltip-invalid-border: k-color(error) !default;
 
 /// The horizontal padding of the Gantt task Tooltip.
 /// @group gantt

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%;