@progress/kendo-theme-fluent 8.0.0-dev.0 → 8.0.0-dev.10

package/scss/filter/_variables.scss

@@ -1,4 +1,5 @@
 @use "../core/" as *;
+@use "../core/spacing" as *;
 
 /// The horizontal padding of the Filter.
 /// @group filter
@@ -9,7 +10,7 @@ $kendo-filter-padding-y: $kendo-padding-md-y !default;
 
 /// The bottom margin of the Filter.
 /// @group filter
-$kendo-filter-bottom-margin: 30px !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;

package/scss/forms/_layout.scss

@@ -4,6 +4,7 @@
 @use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../window/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-forms--layout() {
 
@@ -281,12 +282,12 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: map.get( $kendo-spacing, 4 ) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+        margin: k-spacing(4) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
     }
 
 
     .k-edit-label {
-        margin-block-end: map.get( $kendo-spacing, 4 );
+        margin-block-end: k-spacing(4);
         padding-block: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} );
         width: 30%;
         line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
@@ -295,7 +296,7 @@
         clear: both;
     }
     .k-edit-field {
-        margin-block-end: map.get( $kendo-spacing, 4 );
+        margin-block-end: k-spacing(4);
         width: 65%;
         float: right;
         clear: right;
@@ -320,11 +321,11 @@
 
         .k-radio-label,
         .k-checkbox-label {
-            margin-inline-end: map.get( $kendo-spacing, 4 );
+            margin-inline-end: k-spacing(4);
         }
 
         > .k-reset > li + li {
-            margin-block-start: map.get( $kendo-spacing, 2 );
+            margin-block-start: k-spacing(2);
         }
 
         .k-reset .k-widget {

package/scss/forms/_variables.scss

@@ -1,9 +1,10 @@
 @use "sass:map";
 @use "../core/" as *;
+@use "../core/spacing" as *;
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: ( $kendo-padding-md-x * 2 ) !default;
+$kendo-form-spacer: calc( #{$kendo-padding-md-x} * 2 ) !default;
 
 /// The font size of the Form.
 /// @group form
@@ -28,19 +29,19 @@ $kendo-form-fieldset-margin: 2em 0 0 !default;
 
 /// The padding of the Form fieldset.
 /// @group form
-$kendo-form-fieldset-padding: 0px !default;
+$kendo-form-fieldset-padding: k-spacing(0) !default;
 
 /// The margin of the Form legend.
 /// @group form
-$kendo-form-legend-margin: 0 0 map.get( $kendo-spacing, 3 ) !default;
+$kendo-form-legend-margin: 0 0 k-spacing(3) !default;
 
 /// The padding of the Form legend.
 /// @group form
-$kendo-form-legend-padding: 0px !default;
+$kendo-form-legend-padding: k-spacing(0) !default;
 
 /// The border width of the Form legend.
 /// @group form
-$kendo-form-legend-border-width: 0 0 map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-form-legend-border-width: 0 0 k-spacing(0.5) !default;
 
 /// The border style of the Form legend.
 /// @group form
@@ -65,7 +66,7 @@ $kendo-form-legend-text-transform: uppercase !default;
 
 /// The bottom margin of the Form label.
 /// @group form
-$kendo-form-label-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
+$kendo-form-label-margin-bottom: k-spacing(2) !default;
 
 /// The font weight of the form label
 /// @group form
@@ -73,7 +74,7 @@ $kendo-form-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default
 
 /// The horizontal margin of the Form buttons.
 /// @group form
-$kendo-form-button-margin-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-form-button-margin-x: k-spacing(2) !default;
 
 /// The font size of the Form hint.
 /// @group form
@@ -85,7 +86,7 @@ $kendo-form-hint-font-style: normal !default;
 
 /// The top margin of the Form hint.
 /// @group form
-$kendo-form-hint-margin-top: map.get( $kendo-spacing, 1 ) !default;
+$kendo-form-hint-margin-top: k-spacing(1) !default;
 
 /// The text color of the Form hint.
 /// @group form
@@ -93,7 +94,7 @@ $kendo-form-hint-text: if($kendo-enable-color-system, k-color( subtle ), k-get-t
 
 /// The row spacing of the small Form.
 /// @group form
-$kendo-form-sm-rows-spacing: map.get( $kendo-spacing, 3 ) !default;
+$kendo-form-sm-rows-spacing: k-spacing(3) !default;
 /// The row spacing of the medium Form.
 /// @group form
 $kendo-form-md-rows-spacing: $kendo-form-sm-rows-spacing !default;
@@ -103,7 +104,7 @@ $kendo-form-lg-rows-spacing: $kendo-form-sm-rows-spacing !default;
 
 /// The margin of the Form separator.
 /// @group form
-$kendo-form-separator-margin: map.get( $kendo-spacing, 3 ) 0 0 !default;
+$kendo-form-separator-margin: k-spacing(3) 0 0 !default;
 
 /// The border color of the Form separator.
 /// @group form
@@ -111,11 +112,11 @@ $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: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-horizontal-form-label-padding-top: k-spacing(1.5) !default;
 
 /// The horizontal margin of the label in the horizontal Form.
 /// @group form
-$kendo-horizontal-form-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-horizontal-form-label-margin-x: k-spacing(2) !default;
 
 /// The width of the label in the horizontal Form.
 /// @group form
@@ -140,7 +141,7 @@ $kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
 
 /// The horizontal margin of the optional label in the Form.
 /// @group form
-$kendo-label-optional-margin-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-label-optional-margin-x: k-spacing(1.5) !default;
 /// The font size of the optional label in the Form.
 /// @group form
 $kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -151,7 +152,7 @@ $kendo-label-optional-font-style: normal !default;
 
 /// The margin of the Form fieldset.
 /// @group form
-$kendo-fieldset-margin: map.get( $kendo-spacing, 7.5 ) !default;
+$kendo-fieldset-margin: k-spacing(7.5) !default;
 /// The font size of the Form fieldset.
 /// @group form
 $kendo-fieldset-font-size: var( --kendo-font-size-xl, inherit ) !default;

package/scss/gantt/_layout.scss

@@ -3,6 +3,7 @@
 @use "../grid/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-gantt--layout() {
 
@@ -32,7 +33,7 @@
             vertical-align: top;
         }
         .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
         }
         .k-grid-header .k-header {
             position: static;
@@ -42,11 +43,11 @@
             position: relative;
         }
         .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-border-width-y} );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2) + #{$kendo-grid-cell-border-width-y} );
         }
 
         &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} * 1.7 + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-border-width-y} );
+            height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-border-width-y} );
         }
 
         // Layout
@@ -270,7 +271,7 @@
             padding: 0 !important; // stylelint-disable-line declaration-no-important
         }
         .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} * 2 + #{$kendo-grid-header-padding-y * 4} + 2px );
+            height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -281,7 +282,7 @@
             vertical-align: middle;
         }
         .k-gantt-treelist-nested-columns .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
         }
 
         &.k-gantt-treelist-scrollable {
@@ -422,8 +423,8 @@
         flex: 1 1 auto;
     }
     .k-task-dot {
-        width: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
-        height: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
+        width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
+        height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
         line-height: 1;
         cursor: pointer;
         display: none;
@@ -532,7 +533,7 @@
     // Single task
     .k-single-wrap {}
     .k-task-single {
-        border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} );
+        border-radius: k-border-radius(md);
         border-width: var( --kendo-gantt-task-border-width, #{$kendo-gantt-task-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -565,7 +566,7 @@
         }
     }
     .k-task-complete {
-        border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} );
+        border-radius: k-border-radius(md);
         width: 20%;
         position: absolute;
         z-index: 1;

package/scss/gantt/_variables.scss

@@ -1,241 +1,242 @@
 @use "sass:map";
 @use "sass:math";
 @use "../core/" as *;
+@use "../core/spacing" as *;
 
-/// Border width of the gantt.
+/// The border width of the Gantt.
 /// @group gantt
 $kendo-gantt-border-width: 1px !default;
-/// Font family of the gantt.
+/// The font family of the Gantt.
 /// @group gantt
 $kendo-gantt-font-family: var( --kendo-font-family, initial ) !default;
-/// Font size of the gantt.
+/// The font size of the Gantt.
 /// @group gantt
 $kendo-gantt-font-size: var( --kendo-font-size, initial ) !default;
-/// Line height of the gantt.
+/// The line height of the Gantt.
 /// @group gantt
 $kendo-gantt-line-height: var( --kendo-line-height, initial ) !default;
-/// Background color of the gantt.
+/// The background color of the Gantt.
 /// @group gantt
 $kendo-gantt-bg: var( --kendo-component-bg, inherit ) !default;
-/// Text color of the gantt.
+/// The text color of the Gantt.
 /// @group gantt
 $kendo-gantt-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the gantt.
+/// The border color of the Gantt.
 /// @group gantt
 $kendo-gantt-border: var( --kendo-component-border, inherit ) !default;
 
-/// Background color of the gantt non-working days.
+/// 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-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 )) !default;
-/// Text color of the gantt non-working days.
+/// The text color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-text: inherit !default;
-/// Border color of the gantt non-working days.
+/// The border color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-border: inherit !default;
 
-/// Size of the gantt connecting lines.
+/// The size of the Gantt connecting lines.
 /// @group gantt
 $kendo-gantt-line-size: 2px !default;
-/// Background fill color of the gantt connecting lines.
+/// The background fill color of the Gantt connecting lines.
 /// @group gantt
 $kendo-gantt-line-fill: black !default;
-/// Selected background fill of the gantt connecting lines.
+/// The background fill of the selected Gantt connecting lines.
 /// @group gantt
 $kendo-gantt-line-selected-fill: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
 
-/// Size of the gantt task dot.
+/// The size of the Gantt task dot.
 /// @group gantt
 $kendo-gantt-dot-size: 8px !default;
-/// Spacing of the gantt task dot.
+/// The spacing of the Gantt task dot.
 /// @group gantt
-$kendo-gantt-dot-spacing: map.get( $kendo-spacing, 0.5 ) !default;
-/// Background color of the gantt task dot.
+$kendo-gantt-dot-spacing: k-spacing(0.5) !default;
+/// The background color of the Gantt task dot.
 /// @group gantt
 $kendo-gantt-dot-bg: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
-/// Border color of the gantt task dot.
+/// The border color of the Gantt task dot.
 /// @group gantt
 $kendo-gantt-dot-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
-/// Hover background color of the gantt task dot.
+/// The background color of the hovered Gantt task dot.
 /// @group gantt
 $kendo-gantt-dot-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
-/// Hover border color of the gantt task dot.
+/// The border color of the hovered Gantt task dot.
 /// @group gantt
 $kendo-gantt-dot-hover-border: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 
-/// Background color of the gantt milestone.
+/// The background color of the Gantt milestone.
 /// @group gantt
 $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
-/// Border color of the gantt milestone.
+/// The border color of the Gantt milestone.
 /// @group gantt
 $kendo-gantt-milestone-border: $kendo-gantt-text !default;
-/// Selected background color of the gantt milestone.
+/// The background color of the selected Gantt milestone.
 /// @group gantt
 $kendo-gantt-milestone-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
-/// Selected border color of the gantt milestone.
+/// The border color of the selected Gantt milestone.
 /// @group gantt
 $kendo-gantt-milestone-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
-/// Background color of the gantt summary.
+/// The background color of the Gantt summary.
 /// @group gantt
 $kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) !default;
-/// Background color of the gantt summary progress.
+/// The background color of the Gantt summary progress.
 /// @group gantt
 $kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
-/// Selected background color of the gantt summary.
+/// The background color of the selected Gantt summary.
 /// @group gantt
 $kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) !default;
-/// Selected background color of the gantt summary progress.
+/// The background color of the selected Gantt summary progress.
 /// @group gantt
 $kendo-gantt-summary-progress-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
-/// Border width of the gantt task.
+/// The border width of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border-width: 0px !default;
-/// Horizontal padding of the gantt task.
+/// The horizontal padding of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the gantt task.
+$kendo-gantt-task-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-padding-y: map.get( $kendo-spacing, 1 ) !default;
-/// Background color of the gantt task.
+$kendo-gantt-task-padding-y: k-spacing(1) !default;
+/// The background color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) !default;
-/// Text color of the gantt task.
+/// The text color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
-/// Border color of the gantt task.
+/// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: inherit !default;
-/// Background color of the gantt task progress.
+/// The background color of the Gantt task progress.
 /// @group gantt
 $kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
-/// Background hover color of the gantt task progress.
+/// The background color of the hovered Gantt task progress.
 /// @group gantt
 $kendo-gantt-task-progress-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
-/// Selected background color of the gantt task.
+/// The background color of selected the Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) !default;
-/// Selected text color of the gantt task.
+/// The text color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
-/// Selected border color of the gantt task.
+/// The border color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: transparent !default;
-/// Selected background color of the gantt task progress.
+/// The background color of the selected Gantt task progress.
 /// @group gantt
 $kendo-gantt-task-progress-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
-/// Vertical padding of the gantt task actions.
+/// The vertical padding of the Gantt task actions.
 /// @group gantt
 $kendo-gantt-task-actions-padding-y: $kendo-padding-md-y !default;
-/// Horizontal padding of the gantt task actions.
+/// The horizontal padding of the Gantt task actions.
 /// @group gantt
 $kendo-gantt-task-actions-padding-x: $kendo-padding-md-x !default;
 
-/// Vertical margin of the gantt task planned line.
+/// The vertical margin of the Gantt task planned line.
 /// @group gantt
 $kendo-gantt-planned-margin-y: .45em !default;
-/// Border width of the gantt task planned line.
+/// The border width of the Gantt task planned line.
 /// @group gantt
 $kendo-gantt-planned-border-width: 2px !default;
-/// Line height of the gantt task planned line.
+/// The line height of the Gantt task planned line.
 /// @group gantt
 $kendo-gantt-planned-line-height: .85em !default;
 
-/// Vertical margin of the gantt planned dependencies.
+/// The vertical margin of the Gantt planned dependencies.
 /// @group gantt
 $kendo-gantt-planned-dependency-margin-y: .65em !default;
 
-/// Default width of the gantt planned line dot.
+/// The default width of the Gantt planned line dot.
 /// @group gantt
 $kendo-gantt-planned-moment-width: 6px !default;
-/// Default height of the gantt planned line dot.
+/// The default height of the Gantt planned line dot.
 /// @group gantt
 $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
-/// Border radius of the gantt planned line dot.
+/// The border radius of the Gantt planned line dot.
 /// @group gantt
 $kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
-/// Horizontal margin of the gantt planned line dot.
+/// The horizontal margin of the Gantt planned line dot.
 /// @group gantt
 $kendo-gantt-planned-moment-left-margin-x: calc( #{$kendo-gantt-planned-border-width} / 2 - #{$kendo-gantt-planned-moment-border-radius} ) !default;
-/// Horizontal margin of the gantt milestone planned line dot.
+/// The horizontal margin of the Gantt milestone planned line dot.
 /// @group gantt
 $kendo-gantt-planned-milestone-moment-margin-x: math.div( $kendo-gantt-planned-moment-width, 2 ) !default;
 
-/// Default height of the gantt planned line.
+/// The default height of the Gantt planned line.
 /// @group gantt
 $kendo-gantt-planned-duration-height: $kendo-gantt-planned-border-width !default;
-/// Hover height of the gantt planned line.
+/// The height of the hovered Gantt planned line.
 /// @group gantt
 $kendo-gantt-planned-duration-hover-height: calc( #{$kendo-gantt-planned-border-width} + 1px ) !default;
 
-/// Top position of the gantt drag hint.
+/// The top position of the Gantt drag hint.
 /// @group gantt
 $kendo-gantt-planned-single-drag-hint-top: 0 !default;
-/// Top position of the gantt summary drag hint.
+/// The top position of the Gantt summary drag hint.
 /// @group gantt
 $kendo-gantt-planned-summary-drag-hint-top: .5em !default;
-/// Top position of the gantt planned milestone drag hint.
+/// The top position of the Gantt planned milestone drag hint.
 /// @group gantt
 $kendo-gantt-planned-milestone-drag-hint-top: .3em !default;
 
-/// of the gantt.
+/// The horizontal offset of the Gantt delayed task resize handler.
 /// @group gantt
 $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
-/// Text color of the gantt planned tooltip.
+/// The text color of the Gantt planned Tooltip.
 /// @group gantt
 $kendo-gantt-planned-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
-/// Background color of the gantt planned tooltip.
+/// The background color of the Gantt planned Tooltip.
 /// @group gantt
 $kendo-gantt-planned-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
-/// Border color of the gantt planned tooltip.
+/// The border color of the Gantt planned Tooltip.
 /// @group gantt
 $kendo-gantt-planned-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
-/// Text color of the gantt delayed task.
+/// The text color of the Gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
-/// Background color of the gantt delayed task.
+/// The background color of the Gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-bg: if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 )) !default;
-/// Complement background color of the gantt delayed task.
+/// The complement background color of the Gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110)) !default;
-/// Background hover color of the gantt delayed task.
+/// The background color of the hovered Gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-hover-bg: if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) !default;
 
-/// Background color of the gantt advanced task.
+/// The background color of the Gantt advanced task.
 /// @group gantt
 $kendo-gantt-advanced-bg: if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 )) !default;
-/// Complement background color of the gantt advanced task.
+/// The complement background color of the Gantt advanced task.
 /// @group gantt
 $kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 )) !default;
-/// Background hover color of the gantt advanced task.
+/// The background color of the hovered Gantt advanced task.
 /// @group gantt
 $kendo-gantt-advanced-hover-bg: if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 )) !default;
 
-/// Text color of the gantt delayed task action.
+/// The text color of the Gantt delayed task action.
 /// @group gantt
 $kendo-gantt-action-on-offset-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
-/// Top position of the gantt delayed task resize handler.
+/// The top position of the Gantt delayed task resize handler.
 /// @group gantt
 $kendo-gantt-offset-resize-handler-top: 50% !default;
 
-/// Default width of the gantt validation tooltip.
+/// The default width of the Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-width: 200px !default;
-/// Default width of the gantt validation tooltip label.
+/// The default width of the Gantt validation Tooltip label.
 /// @group gantt
 $kendo-gantt-validation-tooltip-label-width: 50px !default;
-/// Border color of the gantt validation tooltip.
+/// The border color of the Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-border: var( --kendo-component-border, inherit ) !default;
-/// Border color of the gantt validation tooltip in valid state.
+/// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-valid-border: if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 )) !default;
-/// Border color of the gantt validation tooltip in invalid state.
+/// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-invalid-border: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) !default;

package/scss/grid/_layout.scss

@@ -7,6 +7,7 @@
 @use "../table/_variables.scss" as *;
 @use "../tabstrip/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-grid--layout() {
 
@@ -520,7 +521,7 @@
     .k-grid-column-menu-standalone a.k-grid-filter {
         position: initial;
         display: inline-block;
-        margin-block: ( $kendo-padding-md-y * -1 );
+        margin-block: calc( #{$kendo-padding-md-y} * -1 );
         margin-inline: 0;
         padding-block: $kendo-padding-md-y;
         padding-inline: $kendo-padding-md-x;