@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/fab/_variables.scss

@@ -1,6 +1,6 @@
+@use "sass:map";
 @use "sass:math";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 @use "../button/_variables.scss" as *;
 
 /// Width of the border around the FAB.
@@ -21,7 +21,7 @@ $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
 $kendo-fab-padding-x-sm: math.div( $kendo-fab-padding-x, 2 ) !default;
 $kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
 $kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
@@ -51,21 +51,21 @@ $kendo-fab-icon-width: 20px !default;
 $kendo-fab-icon-height: $kendo-fab-icon-width !default;
 /// FAB icon spacing.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: math.div( map-get( $kendo-spacing, 1 ), 2 ) !default;
+$kendo-fab-icon-spacing: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// FAB items horizontal padding.
 /// @group floating-action-button
 $kendo-fab-items-padding-x: 0px !default;
 /// FAB items vertical padding.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-items-padding-y: map.get( $kendo-spacing, 4 ) !default;
 
 /// FAB item text horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map-get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: map.get( $kendo-spacing, 1 ) !default;
 /// FAB item text vertical padding.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-y: map.get( $kendo-spacing, 1 ) !default;
 /// Width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: 1px !default;
@@ -83,7 +83,7 @@ $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
 /// The bottom margin of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text-offset-x: map-get( $kendo-spacing, 2 );
+$kendo-fab-item-text-offset-x: map.get( $kendo-spacing, 2 ) !default;
 
 /// Offset of the focused FAB item.
 /// @group floating-action-button
@@ -97,10 +97,10 @@ $kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// FAB item icon vertical padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Width of the FAB item icon border.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-width: 1px !default;
@@ -120,7 +120,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 /// Theme colors map for the FAB.
 /// @group floating-action-button
 $kendo-fab-theme-colors: (
-    solid: map-get( $kendo-button-theme-colors, "solid")
+    solid: map.get( $kendo-button-theme-colors, "solid")
 ) !default;
 
 /// Sizes map for the FAB.
@@ -138,11 +138,11 @@ $kendo-fab-sizes: (
         padding-x: $kendo-fab-padding-x-lg,
         padding-y: $kendo-fab-padding-y-lg
     )
-);
+) !default;
 
 /// The bottom margin of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-offset-y: map-get( $kendo-spacing, 2 );
+$kendo-fab-item-offset-y: map.get( $kendo-spacing, 2 ) !default;
 /// The base text color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-text: get-theme-color-var( neutral-160 ) !default;
@@ -175,7 +175,7 @@ $kendo-fab-item-focus-border: get-theme-color-var( neutral-110 ) !default;
 $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
 /// The active background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-bg: var( --kendo-selected-bg, inherit )  !default;
+$kendo-fab-item-active-bg: var( --kendo-selected-bg, inherit ) !default;
 /// The active border color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-border: get-theme-color-var( neutral-110 ) !default;

package/scss/fab/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/filemanager/_layout.scss

@@ -1,5 +1,5 @@
 @use "../icon/_variables.scss"as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-filemanager--layout() {
 

package/scss/filemanager/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-filemanager--theme() {
 

package/scss/filemanager/_variables.scss

@@ -1,11 +1,11 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../icon/_variables.scss" as *;
 
 /// The space between the filemanger items.
 /// @group filemanger
-$kendo-filemanager-spacer: map-get( $kendo-spacing, 4 ) !default;
+$kendo-filemanager-spacer: map.get( $kendo-spacing, 4 ) !default;
 /// Border width of the filemanger.
 /// @group filemanger
 $kendo-filemanager-border-width: 1px !default;
@@ -65,10 +65,10 @@ $kendo-filemanager-navigation-border: inherit !default;
 
 /// Horizontal padding of the breadcrumb.
 /// @group filemanager
-$kendo-filemanager-breadcrumb-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-filemanager-breadcrumb-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the breadcrumb.
 /// @group filemanager
-$kendo-filemanager-breadcrumb-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-filemanager-breadcrumb-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Border width of the breadcrumb.
 /// @group filemanager
 $kendo-filemanager-breadcrumb-border-width: $kendo-filemanager-border-width !default;
@@ -94,10 +94,10 @@ $kendo-filemanager-listview-border: inherit !default;
 
 /// Horizontal padding of the listview item.
 /// @group filemanager
-$kendo-filemanager-listview-item-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-filemanager-listview-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of the listview item.
 /// @group filemanager
-$kendo-filemanager-listview-item-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-filemanager-listview-item-padding-y: map.get( $kendo-spacing, 4 ) !default;
 /// Width of the listview item.
 /// @group filemanager
 $kendo-filemanager-listview-item-width: 120px !default;
@@ -163,7 +163,7 @@ $kendo-filemanager-preview-border-width: $kendo-filemanager-border-width !defaul
 $kendo-filemanager-preview-spacing: $kendo-filemanager-spacer !default;
 /// Spacing of the preview.
 /// @group filemanager
-$kendo-filemanager-preview-column-gap: map-get( $kendo-spacing, 1 ) !default;
+$kendo-filemanager-preview-column-gap: map.get( $kendo-spacing, 1 ) !default;
 /// Background color of the preview.
 /// @group filemanager
 $kendo-filemanager-preview-bg: transparent !default;

package/scss/filemanager/index.scss

@@ -18,9 +18,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/filter/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-filter--layout() {
 

package/scss/filter/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-filter--theme() {
 

package/scss/filter/_variables.scss

@@ -1,12 +1,11 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Horizontal padding of the filter.
 /// @group filter
-$kendo-filter-padding-x: $kendo-padding-x !default;
+$kendo-filter-padding-x: $kendo-padding-md-x !default;
 /// Vertical padding of the filter.
 /// @group filter
-$kendo-filter-padding-y: $kendo-padding-y !default;
+$kendo-filter-padding-y: $kendo-padding-md-y !default;
 
 /// Bottom margin of the filter.
 /// @group filter

package/scss/filter/index.scss

@@ -14,9 +14,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/floating-label/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-floating-label--layout() {
 

package/scss/floating-label/_theme.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/mixins/" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-floating-label--theme() {
 

package/scss/floating-label/_variables.scss

@@ -1,5 +1,4 @@
 @use "../core/" as *;
-@use "../core/color-system" as *;
 @use "../input/_variables.scss" as *;
 
 /// The resize scale of the floating label

package/scss/floating-label/index.scss

@@ -7,9 +7,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/forms/_layout.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 @use "sass:math";
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../window/_variables.scss" as *;
 
@@ -87,10 +88,6 @@
             padding: 0;
         }
 
-        .k-form-field {
-            margin-block-start: var( --kendo-form-field-margin-top, #{$kendo-form-field-margin-top} );
-        }
-
         > * {
             &:not(.k-hidden):first-child,
             &.k-hidden + :not(.k-hidden) {
@@ -107,14 +104,14 @@
 
         .k-alert-error {
             font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-            margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-y} )  * 2 );
+            margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-md-y} ) * 2 );
         }
 
         .k-field-info {
             display: inline-block;
             font-size: var( --kendo-font-size-xs, #{$kendo-font-size-xs} );
             line-height: 1;
-            margin-inline: var( --kendo-padding-x, #{$kendo-padding-x} );
+            margin-inline: var( --kendo-padding-x, #{$kendo-padding-md-x} );
         }
 
 
@@ -130,7 +127,6 @@
     // Form Buttons Container
     .k-form-buttons {
         @extend .k-actions;
-        margin-block-start: calc( var( --kendo-form-field-margin-top, #{$kendo-form-field-margin-top} ) * 2 );
         padding: 0;
         overflow: visible;
     }
@@ -191,9 +187,24 @@
         }
     }
 
+    // Sizes
+    @each $size, $size-props in $kendo-form-sizes {
+        $_form-rows-spacing: map.get($size-props, form-rows-spacing);
+
+        .k-form-#{$size} {
+            .k-form-field {
+                margin-block-start: var( --kendo-form-rows-spacing-#{$size}, #{$_form-rows-spacing} );
+            }
+
+            .k-form-buttons {
+                margin-block-start: calc( var( --kendo-form-rows-spacing-#{$size}, #{$_form-rows-spacing} ) * 2 );
+            }
+        }
+    }
+
     // Scheduler
     .k-form-inline {
-        padding: var( --kendo-form-spacer #{$kendo-form-spacer} );
+        padding: var( --kendo-form-spacer, #{$kendo-form-spacer} );
 
         fieldset {
             border-width: 1px 0 0;
@@ -215,9 +226,9 @@
             text-align: left;
             font-weight: 600;
             line-height: 1;
-            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-y-lg} ) * 2 );
+            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
             text-transform: uppercase;
-            padding-inline-end: var( --kendo-padding-x, #{$kendo-padding-x} );
+            padding-inline-end: var( --kendo-padding-x, #{$kendo-padding-md-x} );
             width: auto;
         }
 
@@ -225,14 +236,14 @@
             display: flex;
             align-items: flex-start;
             text-align: left;
-            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-y-lg} ) * 2 );
+            margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
 
             > span:not(.k-widget) {
                 width: var( --kendo-inline-form-element-width, #{$kendo-inline-form-element-width} );
                 text-align: right;
                 line-height: var( --kendo-line-height, #{$kendo-line-height} );
-                padding-block: calc( #{$kendo-padding-y} + #{$kendo-input-border-width} );
-                padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} );
+                padding-block: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} );
+                padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-lg-x} );
                 align-self: center;
             }
 
@@ -246,7 +257,7 @@
 
             .k-alert-error {
                 font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-                margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-y} ) * 2 );
+                margin-block-start: calc( var( --kendo-padding-y, #{$kendo-padding-md-y} ) * 2 );
             }
 
             .k-field-info {
@@ -274,12 +285,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: map.get( $kendo-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: map.get( $kendo-spacing, 4 );
         padding-block: calc( #{$kendo-input-padding-y-md} + #{$kendo-input-border-width} );
         width: 30%;
         line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
@@ -288,7 +299,7 @@
         clear: both;
     }
     .k-edit-field {
-        margin-block-end: map-get( $kendo-spacing, 4 );
+        margin-block-end: map.get( $kendo-spacing, 4 );
         width: 65%;
         float: right;
         clear: right;
@@ -313,11 +324,11 @@
 
         .k-radio-label,
         .k-checkbox-label {
-            margin-inline-end: map-get( $kendo-spacing, 4 );
+            margin-inline-end: map.get( $kendo-spacing, 4 );
         }
 
         > .k-reset > li + li {
-            margin-block-start: math.div( map-get( $kendo-spacing, 4 ), 2 );
+            margin-block-start: map.get( $kendo-spacing, 2 );
         }
 
         .k-reset .k-widget {

package/scss/forms/_theme.scss

@@ -1,5 +1,5 @@
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-forms--theme() {
 

package/scss/forms/_variables.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 @use "../core/" as *;
 
 /// The padding of the inline form
 /// @group form
-$kendo-form-spacer: ( $kendo-padding-x * 2 ) !default;
+$kendo-form-spacer: ( $kendo-padding-md-x * 2 ) !default;
 
 /// The font size of the form
 /// @group form
@@ -25,7 +26,7 @@ $kendo-form-fieldset-padding: 0px !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 map.get( $kendo-spacing, 3 ) !default;
 
 /// The padding of the form legend
 /// @group form
@@ -33,7 +34,7 @@ $kendo-form-legend-padding: 0px !default;
 
 /// The border width of the form legend
 /// @group form
-$kendo-form-legend-border-width: 0 0 map-get( $kendo-spacing, thin ) !default;
+$kendo-form-legend-border-width: 0 0 map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// The border style of the form legend
 /// @group form
@@ -58,7 +59,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: map.get( $kendo-spacing, 2 ) !default;
 
 /// The font weight of the form label
 /// @group form
@@ -66,7 +67,7 @@ $kendo-form-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default
 
 /// The horizontal margin of the form button
 /// @group form
-$kendo-form-button-margin-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-form-button-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
 /// The font size of the form hint
 /// @group form
@@ -78,19 +79,25 @@ $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: map.get( $kendo-spacing, 1 ) !default;
 
 /// The text color of the font hint
 /// @group form
-$kendo-form-hint-text: get-theme-color-var( neutral-130 );
+$kendo-form-hint-text: get-theme-color-var( neutral-130 ) !default;
 
-/// The top margin of the form field
+/// Form row small size spacing
 /// @group form
-$kendo-form-field-margin-top: map-get( $kendo-spacing, 3 ) !default;
+$kendo-form-rows-spacing-sm: map.get( $kendo-spacing, 3 ) !default;
+/// Form row medium size spacing
+/// @group form
+$kendo-form-rows-spacing-md: $kendo-form-rows-spacing-sm !default;
+/// Form row large size spacing
+/// @group form
+$kendo-form-rows-spacing-lg: $kendo-form-rows-spacing-sm !default;
 
 /// The margin of the form separator
 /// @group form
-$kendo-form-separator-margin: $kendo-form-field-margin-top 0 0 !default;
+$kendo-form-separator-margin: map.get( $kendo-spacing, 3 ) 0 0 !default;
 
 /// The border color of the form separator
 /// @group form
@@ -98,11 +105,11 @@ $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
 /// The top padding of the horizontal form label
 /// @group form
-$kendo-horizontal-form-label-padding-top: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-horizontal-form-label-padding-top: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// The horizontal margin of the horizontal form
 /// @group form
-$kendo-horizontal-form-label-margin-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-horizontal-form-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
 /// The width of the horizontal form label
 /// @group form
@@ -125,13 +132,13 @@ $kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
 
 
 // Label
-$kendo-label-optional-margin-x: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-label-optional-margin-x: map.get( $kendo-spacing, 1.5 ) !default;
 $kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-label-optional-font-style: normal !default;
 
 
 // Fieldset
-$kendo-fieldset-margin: map-get( $kendo-spacing, 8 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-fieldset-margin: map.get( $kendo-spacing, 7.5 ) !default;
 $kendo-fieldset-font-size: var( --kendo-font-size-xl, inherit ) !default;
 
 $kendo-fieldset-bg: transparent !default;
@@ -141,3 +148,16 @@ $kendo-fieldset-border: initial !default;
 $kendo-fieldset-legend-bg: transparent !default;
 $kendo-fieldset-legend-text: get-theme-color-var( neutral-130 ) !default;
 $kendo-fieldset-legend-border: initial !default;
+
+// Sizes
+$kendo-form-sizes: (
+    sm: (
+        form-rows-spacing: $kendo-form-rows-spacing-sm
+    ),
+    md: (
+        form-rows-spacing: $kendo-form-rows-spacing-md
+    ),
+    lg: (
+        form-rows-spacing: $kendo-form-rows-spacing-lg
+    )
+) !default;

package/scss/forms/index.scss

@@ -13,9 +13,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/gantt/_layout.scss

@@ -1,9 +1,8 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 @use "../button/_variables.scss" as *;
 @use "../grid/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-gantt--layout() {
 
@@ -20,7 +19,11 @@
         position: relative;
         white-space: nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        .k-table-td {
+            white-space: nowrap;
+        }
 
         // other
         td {
@@ -116,6 +119,7 @@
                 flex: 1 1 auto;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
             .k-task-actions {
                 flex-shrink: 0;
@@ -375,13 +379,15 @@
     .k-gantt-tasks {
         position: relative;
 
-        td {
+        td,
+        .k-table-td {
             padding: 0;
             position: relative;
             vertical-align: middle;
         }
         td::after { content: "\200b"; }
     }
+
     .k-task-wrap {
         margin: 0 -21px;
         padding: 5px 21px;
@@ -557,6 +563,7 @@
         flex-direction: row;
         align-items: center;
         text-align: start;
+        white-space: nowrap;
     }
     .k-task-template {
         padding-block: var( --kendo-gantt-task-padding-y, #{$kendo-gantt-task-padding-y} );
@@ -598,7 +605,7 @@
 
     // Task tooltip
     .k-task-details {
-        padding: $kendo-padding-y $kendo-padding-x;
+        padding: $kendo-padding-md-y $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {

package/scss/gantt/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/mixins" as *;
-@use "../core/color-system/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-gantt--theme() {