@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/fab/_variables.scss

@@ -6,9 +6,6 @@
 /// The width of the border around the FAB.
 /// @group floating-action-button
 $kendo-fab-border-width: var( --kendo-fab-border-width, 1px ) !default;
-/// The border radius of the FAB.
-/// @group floating-action-button
-$kendo-fab-border-radius: var( --kendo-fab-border-radius, #{k-border-radius(md)} ) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-fab-font-family, var( --kendo-font-family, inherit ) ) !default;
@@ -19,65 +16,59 @@ $kendo-fab-font-size: var( --kendo-fab-font-size, var( --kendo-font-size, inheri
 /// @group floating-action-button
 $kendo-fab-line-height: var( --kendo-fab-line-height, var( --kendo-line-height, normal ) ) !default;
 
-/// The horizontal padding of the FAB.
-/// @group floating-action-button
-$kendo-fab-padding-x: var( --kendo-fab-padding-x, #{k-spacing(4)} ) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: var( --kendo-fab-sm-padding-x, calc( #{k-spacing(4)} / 2 ) ) !default;
+$kendo-fab-sm-padding-x: var( --kendo-fab-sm-padding-x, k-spacing(1.5) ) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
-$kendo-fab-md-padding-x: var( --kendo-fab-md-padding-x, #{k-spacing(4)} ) !default;
+$kendo-fab-md-padding-x: var( --kendo-fab-md-padding-x, k-spacing(4) ) !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: var( --kendo-fab-lg-padding-x, calc( #{k-spacing(4)} * 1.5 ) ) !default;
+$kendo-fab-lg-padding-x: var( --kendo-fab-lg-padding-x, k-spacing(6) ) !default;
 
-/// The vertical padding of the FAB.
-/// @group floating-action-button
-$kendo-fab-padding-y: var( --kendo-fab-padding-y, #{k-spacing(4)} ) !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: var( --kendo-fab-sm-padding-y, calc( #{k-spacing(4)} / 2 ) ) !default;
+$kendo-fab-sm-padding-y: var( --kendo-fab-sm-padding-y, k-spacing(1.5) ) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
-$kendo-fab-md-padding-y: var( --kendo-fab-md-padding-y, #{k-spacing(4)} ) !default;
+$kendo-fab-md-padding-y: var( --kendo-fab-md-padding-y, k-spacing(4) ) !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: var( --kendo-fab-lg-padding-y, calc( #{k-spacing(4)} * 1.5 ) ) !default;
+$kendo-fab-lg-padding-y: var( --kendo-fab-lg-padding-y, k-spacing(6) ) !default;
 
 /// The offset of the focused FAB.
 /// @group floating-action-button
-$kendo-fab-focus-offset: var( --kendo-fab-focus-offset, #{$kendo-button-focus-offset} ) !default;
+$kendo-fab-focus-offset: var( --kendo-fab-focus-offset, 2px ) !default;
 /// The outline width of the focused FAB.
 /// @group floating-action-button
-$kendo-fab-focus-outline-width: var( --kendo-fab-focus-outline-width, #{$kendo-button-focus-outline-width} ) !default;
+$kendo-fab-focus-outline-width: var( --kendo-fab-focus-outline-width, 2px ) !default;
 /// The outline style of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-outline-style: var( --kendo-fab-focus-outline-style, #{$kendo-button-focus-outline-style} ) !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: var( --kendo-fab-icon-padding-x, #{k-spacing(0.5)} ) !default;
+$kendo-fab-icon-padding-x: var( --kendo-fab-icon-padding-x, k-spacing(0.5) ) !default;
 /// The vertical padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-y: var( --kendo-fab-icon-padding-y, #{$kendo-fab-icon-padding-x} ) !default;
+$kendo-fab-icon-padding-y: var( --kendo-fab-icon-padding-y, $kendo-fab-icon-padding-x ) !default;
 /// The spacing of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: var( --kendo-fab-icon-spacing, #{k-spacing(0.5)} ) !default;
+$kendo-fab-icon-spacing: var( --kendo-fab-icon-spacing, k-spacing(0.5) ) !default;
 
 /// The horizontal padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-x: var( --kendo-fab-items-padding-x, #{k-spacing(0)} ) !default;
+$kendo-fab-items-padding-x: var( --kendo-fab-items-padding-x, k-spacing(0) ) !default;
 /// The vertical padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: var( --kendo-fab-items-padding-y, #{k-spacing(4)} ) !default;
+$kendo-fab-items-padding-y: var( --kendo-fab-items-padding-y, k-spacing(4) ) !default;
 
 /// The horizontal padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: var( --kendo-fab-item-text-padding-x, #{k-spacing(1)} ) !default;
+$kendo-fab-item-text-padding-x: var( --kendo-fab-item-text-padding-x, k-spacing(1.5) ) !default;
 /// The vertical padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-y: var( --kendo-fab-item-text-padding-y, #{k-spacing(1)} ) !default;
+$kendo-fab-item-text-padding-y: var( --kendo-fab-item-text-padding-y, k-spacing(1) ) !default;
 /// The width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: var( --kendo-fab-item-text-border-width, 1px ) !default;
@@ -89,27 +80,21 @@ $kendo-fab-item-text-border-style: var( --kendo-fab-item-text-border-style, soli
 $kendo-fab-item-text-border-radius: var( --kendo-fab-item-text-border-radius, #{k-border-radius(md)} ) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-font-size: var( --kendo-fab-item-text-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-fab-item-text-font-size: var( --kendo-fab-item-text-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
 /// The line height of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-line-height: var( --kendo-fab-item-text-line-height, var( --kendo-line-height-sm, inherit ) ) !default;
+$kendo-fab-item-text-line-height: var( --kendo-fab-item-text-line-height, var( --kendo-line-height-xs, inherit ) ) !default;
 
-/// The offset of the focused FAB item.
-/// @group floating-action-button
-$kendo-fab-item-focus-offset: var( --kendo-fab-item-focus-offset, #{$kendo-button-focus-offset} ) !default;
-/// The outline width of the focused FAB item.
+/// The outline color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-outline-width: var( --kendo-fab-item-focus-outline-width, #{$kendo-button-focus-outline-width} ) !default;
-/// The outline style of the focused FAB item.
-/// @group floating-action-button
-$kendo-fab-item-focus-outline-style: var( --kendo-fab-item-focus-outline-style, #{$kendo-button-focus-outline-style} ) !default;
+$kendo-fab-item-focus-outline: var( --kendo-fab-item-focus-outline, #{$kendo-button-focus-outline} ) !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: var( --kendo-fab-item-icon-padding-x, calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} ) ) !default;
+$kendo-fab-item-icon-padding-x: var( --kendo-fab-item-icon-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-y: var( --kendo-fab-item-icon-padding-y, #{$kendo-fab-item-icon-padding-x} ) !default;
+$kendo-fab-item-icon-padding-y: var( --kendo-fab-item-icon-padding-y, $kendo-fab-item-icon-padding-x ) !default;
 /// The border width of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-width: var( --kendo-fab-item-icon-border-width, 1px ) !default;
@@ -141,64 +126,71 @@ $kendo-fab-theme-colors: (
 $kendo-fab-sizes: (
     sm: (
         padding-x: $kendo-fab-sm-padding-x,
-        padding-y: $kendo-fab-sm-padding-y
+        padding-y: $kendo-fab-sm-padding-y,
+        gap: k-spacing(1)
     ),
     md: (
         padding-x: $kendo-fab-md-padding-x,
-        padding-y: $kendo-fab-md-padding-y
+        padding-y: $kendo-fab-md-padding-y,
+        gap: k-spacing(1.5)
     ),
     lg: (
         padding-x: $kendo-fab-lg-padding-x,
-        padding-y: $kendo-fab-lg-padding-y
+        padding-y: $kendo-fab-lg-padding-y,
+        gap: k-spacing(1.5)
     )
 ) !default;
 
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-shadow: k-elevation(4) !default;
+
 /// The base text color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text: var( --kendo-fab-item-text, #{k-color(on-app-surface)} ) !default;
+$kendo-fab-item-text: var( --kendo-fab-item-text, k-color(on-base) ) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: var( --kendo-fab-item-bg, #{k-color(surface-alt)} ) !default;
+$kendo-fab-item-bg: var( --kendo-fab-item-bg, k-color(base) ) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: var( --kendo-fab-item-border, #{k-color(border)} ) !default;
+$kendo-fab-item-border: var( --kendo-fab-item-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The text color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-text: var( --kendo-fab-item-hover-text, #{k-color(on-base)} ) !default;
+$kendo-fab-item-hover-text: var( --kendo-fab-item-hover-text, k-color(on-base) ) !default;
 /// The background color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-bg: var( --kendo-fab-item-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-fab-item-hover-bg: var( --kendo-fab-item-hover-bg, k-color(base-hover) ) !default;
 /// The border color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-border: var( --kendo-fab-item-hover-border, #{k-color(border)} ) !default;
+$kendo-fab-item-hover-border: var( --kendo-fab-item-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
 /// The text color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-text: var( --kendo-fab-item-focus-text, #{k-color(on-app-surface)} ) !default;
+$kendo-fab-item-focus-text: var( --kendo-fab-item-focus-text, k-color(on-base) ) !default;
 /// The background color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-bg: var( --kendo-fab-item-focus-bg, #{k-color(surface-alt)} ) !default;
+$kendo-fab-item-focus-bg: var( --kendo-fab-item-focus-bg, k-color(base) ) !default;
 /// The border color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-border: var( --kendo-fab-item-focus-border, #{k-color(border)} ) !default;
+$kendo-fab-item-focus-border: var( --kendo-fab-item-focus-border, $kendo-fab-item-border ) !default;
 /// The text color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-text: var( --kendo-fab-item-active-text, #{k-color(on-base)} ) !default;
+$kendo-fab-item-active-text: var( --kendo-fab-item-active-text, k-color(on-base) ) !default;
 /// The background color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-bg: var( --kendo-fab-item-active-bg, #{k-color(base-active)} ) !default;
+$kendo-fab-item-active-bg: var( --kendo-fab-item-active-bg, k-color(base-active) ) !default;
 /// The border color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-border: var( --kendo-fab-item-active-border, #{k-color(border)} ) !default;
+$kendo-fab-item-active-border: var( --kendo-fab-item-active-border, $kendo-fab-item-border ) !default;
 
 /// The background of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-bg: var( --kendo-fab-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) ) !default;
+$kendo-fab-disabled-bg: var( --kendo-fab-disabled-bg, color-mix(in srgb, k-color(on-base) 7%, transparent) ) !default;
 /// The text color of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-text: var( --kendo-fab-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-fab-disabled-text: var( --kendo-fab-disabled-text, color-mix(in srgb, k-color(on-base) 30%, transparent) ) !default;
 /// The border color of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-border: var( --kendo-fab-disabled-border, transparent ) !default;
+$kendo-fab-disabled-border: var( --kendo-fab-disabled-border, color-mix(in srgb, k-color(on-base) 14%, transparent) ) !default;
 
 /// Тhe opacity of the generating FAB.
 /// @group floating-action-button
@@ -220,6 +212,7 @@ $kendo-fab-generating-opacity: var( --kendo-fab-generating-opacity, 60% ) !defau
     $kendo-fab-icon-spacing: $kendo-fab-icon-spacing,
     $kendo-fab-items-padding-x: $kendo-fab-items-padding-x,
     $kendo-fab-items-padding-y: $kendo-fab-items-padding-y,
+    $kendo-fab-shadow: $kendo-fab-shadow,
     $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x,
     $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y,
     $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width,

package/scss/filemanager/_theme.scss

@@ -26,4 +26,12 @@
             }
         }
     }
+
+    .k-filemanager-splitter {
+        @include fill($bg: k-color(surface-alt));
+    }
+
+    .k-filemanager-breadcrumb {
+        @include fill($bg: k-color(app-surface));
+    }
 }

package/scss/filemanager/_variables.scss

@@ -33,7 +33,7 @@ $kendo-file-manager-border: var( --kendo-file-manager-border, #{color-mix(in srg
 $kendo-file-manager-toolbar-border-width: var( --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: var( --kendo-file-manager-toolbar-bg, #{$kendo-toolbar-bg} ) !default;
+$kendo-file-manager-toolbar-bg: var( --kendo-file-manager-toolbar-bg, #{k-color(app-surface)} ) !default;
 /// The text color of the FileManager Toolbar.
 /// @group file-manager
 $kendo-file-manager-toolbar-text: var( --kendo-file-manager-toolbar-text, #{$kendo-toolbar-text} ) !default;

package/scss/filter/_layout.scss

@@ -4,27 +4,8 @@
 @mixin kendo-filter--layout() {
     @include kendo-filter--layout-base();
 
-    .k-filter {
-        .k-filter-toolbar {
-            &::before {
-                top: 50%;
-                inset-block-start: unset;
-            }
-        }
-
-        .k-filter-item {
-            &::before {
-                top: calc( $kendo-filter-padding-y * -1 );
-                inset-block-start: unset;
-            }
-        }
-
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
-        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-            top: calc( ( $kendo-filter-padding-y * -1 ) - $kendo-filter-line-size );
-            bottom: 50%;
-            inset-block-start: unset;
-            inset-block-end: unset;
-        }
+    .k-filter .k-toolbar:focus,
+    .k-filter .k-toolbar.k-focus {
+        border-width: $kendo-filter-toolbar-focus-border-width;
     }
 }

package/scss/filter/_variables.scss

@@ -34,9 +34,12 @@ $kendo-filter-preview-operator-text: var( --kendo-filter-preview-operator-text,
 /// @group filter
 $kendo-filter-line-bg: var( --kendo-filter-line-bg, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
+/// The border width of the Filter.
+/// @group filter
+$kendo-filter-toolbar-focus-border-width: var( --kendo-filter-toolbar-focus-border-width, 2px ) !default;
 /// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: var( --kendo-filter-toolbar-focus-border, #{k-color(base-emphasis)} ) !default;
+$kendo-filter-toolbar-focus-border: var( --kendo-filter-toolbar-focus-border, #{k-color(border)} ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/filter/variables" with (
     $kendo-filter-padding-x: $kendo-filter-padding-x,

package/scss/floating-label/_layout.scss

@@ -5,10 +5,6 @@
     @include kendo-floating-label--layout-base();
 
     .k-floating-label-container {
-        > .k-floating-label {
-            font-weight: $kendo-floating-label-font-weight;
-        }
-
         &:disabled,
         &[disabled],
         &.k-disabled  {

package/scss/floating-label/_variables.scss

@@ -13,10 +13,6 @@ $kendo-floating-label-font-size: var(--kendo-floating-label-font-size, var( --ke
 /// @group floating-label
 $kendo-floating-label-max-width: var(--kendo-floating-label-max-width, 90%) !default;
 
-/// The font weight of the Floating Label.
-/// @group floating-label
-$kendo-floating-label-font-weight: var(--kendo-floating-label-font-weight, var( --kendo-font-weight-bold, inherit )) !default;
-
 /// The line height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-line-height: var(--kendo-floating-label-line-height, var( --kendo-line-height, normal )) !default;

package/scss/forms/_layout.scss

@@ -7,13 +7,6 @@
 @mixin kendo-form--layout() {
     @include kendo-form--layout-base();
 
-    .k-form,
-    .k-form-inline {
-        .k-form-field > .k-label {
-            font-weight: $kendo-form-label-font-weight;
-        }
-    }
-
     .k-form {
         .k-form-buttons {
             margin-block-start: calc( #{map.get($kendo-form-sizes, md, form-rows-spacing)} * 2 );

package/scss/forms/_variables.scss

@@ -58,10 +58,6 @@ $kendo-form-legend-text-transform: var(--kendo-form-legend-text-transform, upper
 /// @group form
 $kendo-form-label-margin-bottom: var(--kendo-form-label-margin-bottom, #{k-spacing(2)}) !default;
 
-/// The font weight of the form label
-/// @group form
-$kendo-form-label-font-weight: var(--kendo-form-label-font-weight, var( --kendo-font-weight-bold, inherit )) !default;
-
 /// The font size of the Form hint.
 /// @group form
 $kendo-form-hint-font-size: var(--kendo-form-hint-font-size, var( --kendo-font-size-sm, inherit )) !default;
@@ -72,7 +68,7 @@ $kendo-form-hint-font-style: var(--kendo-form-hint-font-style, normal) !default;
 
 /// The top margin of the Form hint.
 /// @group form
-$kendo-form-hint-margin-top: var(--kendo-form-hint-margin-top, #{k-spacing(1)}) !default;
+$kendo-form-hint-margin-top: var(--kendo-form-hint-margin-top, #{k-spacing(0.5)}) !default;
 
 /// The text color of the Form hint.
 /// @group form

package/scss/gantt/_variables.scss

@@ -17,13 +17,13 @@ $kendo-gantt-font-size: var(--kendo-gantt-font-size, var(--kendo-font-size, init
 $kendo-gantt-line-height: var(--kendo-gantt-line-height, var(--kendo-line-height, initial)) !default;
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: var(--kendo-gantt-bg, #{k-color(surface-alt)}) !default;
+$kendo-gantt-bg: var(--kendo-gantt-bg, k-color(surface-alt)) !default;
 /// The text color of the Gantt.
 /// @group gantt
-$kendo-gantt-text: var(--kendo-gantt-text, #{k-color(on-app-surface)}) !default;
+$kendo-gantt-text: var(--kendo-gantt-text, k-color(on-app-surface)) !default;
 /// The border color of the Gantt.
 /// @group gantt
-$kendo-gantt-border: var(--kendo-gantt-border, #{color-mix(in srgb, k-color(border) 16%, transparent)}) !default;
+$kendo-gantt-border: var(--kendo-gantt-border, color-mix(in srgb, k-color(border) 26%, transparent)) !default;
 
 /// The background color of the Gantt non-working days.
 /// @group gantt
@@ -79,16 +79,16 @@ $kendo-gantt-milestone-selected-border: var(--kendo-gantt-milestone-selected-bor
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: var(--kendo-gantt-summary-bg, #{k-color(subtle)}) !default;
+$kendo-gantt-summary-bg: var(--kendo-gantt-summary-bg, k-color(dark-emphasis)) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: var(--kendo-gantt-summary-progress-bg, #{k-color(on-app-surface)}) !default;
+$kendo-gantt-summary-progress-bg: var(--kendo-gantt-summary-progress-bg, k-color(dark)) !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: var(--kendo-gantt-summary-selected-bg, #{k-color(primary-subtle-active)}) !default;
+$kendo-gantt-summary-selected-bg: var(--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: var(--kendo-gantt-summary-progress-selected-bg, #{k-color(primary)}) !default;
+$kendo-gantt-summary-progress-selected-bg: var(--kendo-gantt-summary-progress-selected-bg, k-color(primary)) !default;
 
 /// The border width of the Gantt task.
 /// @group gantt
@@ -187,40 +187,40 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: var(--kendo-gantt-planned-o
 
 /// The text color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-text: var(--kendo-gantt-planned-text, #{k-color(app-surface)}) !default;
+$kendo-gantt-planned-text: var(--kendo-gantt-planned-text, k-color(on-primary)) !default;
 /// The background color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: var(--kendo-gantt-planned-bg, #{k-color(primary)}) !default;
+$kendo-gantt-planned-bg: var(--kendo-gantt-planned-bg, k-color(primary)) !default;
 /// The border color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-border: var(--kendo-gantt-planned-border, #{k-color(primary)}) !default;
+$kendo-gantt-planned-border: var(--kendo-gantt-planned-border, k-color(primary)) !default;
 
 /// The text color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-text: var(--kendo-gantt-delayed-text, #{k-color(app-surface)}) !default;
+$kendo-gantt-delayed-text: var(--kendo-gantt-delayed-text, k-color(on-error)) !default;
 /// The background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: var(--kendo-gantt-delayed-bg, #{k-color(error-emphasis)}) !default;
+$kendo-gantt-delayed-bg: var(--kendo-gantt-delayed-bg, k-color(error-emphasis)) !default;
 /// The complement background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg-lighter: var(--kendo-gantt-delayed-bg-lighter, #{k-color(error)}) !default;
+$kendo-gantt-delayed-bg-lighter: var(--kendo-gantt-delayed-bg-lighter, k-color(error)) !default;
 /// The background color of the hovered Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-hover-bg: var(--kendo-gantt-delayed-hover-bg, #{k-color(error-on-subtle)}) !default;
+$kendo-gantt-delayed-hover-bg: var(--kendo-gantt-delayed-hover-bg, k-color(error-hover)) !default;
 
 /// The background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: var(--kendo-gantt-advanced-bg, #{k-color(success-emphasis)}) !default;
+$kendo-gantt-advanced-bg: var(--kendo-gantt-advanced-bg, k-color(success)) !default;
 /// The complement background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg-lighter: var(--kendo-gantt-advanced-bg-lighter, #{k-color(success)}) !default;
+$kendo-gantt-advanced-bg-lighter: var(--kendo-gantt-advanced-bg-lighter, k-color(success-emphasis)) !default;
 /// The background color of the hovered Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-hover-bg: var(--kendo-gantt-advanced-hover-bg, #{k-color(success-on-subtle)}) !default;
+$kendo-gantt-advanced-hover-bg: var(--kendo-gantt-advanced-hover-bg, k-color(success-hover)) !default;
 
 /// The text color of the Gantt delayed task action.
 /// @group gantt
-$kendo-gantt-action-on-offset-text: var(--kendo-gantt-action-on-offset-text, #{k-color(on-app-surface)}) !default;
+$kendo-gantt-action-on-offset-text: var(--kendo-gantt-action-on-offset-text, k-color(on-app-surface)) !default;
 /// The top position of the Gantt delayed task resize handler.
 /// @group gantt
 $kendo-gantt-offset-resize-handler-top: var(--kendo-gantt-offset-resize-handler-top, 50%) !default;
@@ -233,13 +233,13 @@ $kendo-gantt-validation-tooltip-width: var(--kendo-gantt-validation-tooltip-widt
 $kendo-gantt-validation-tooltip-label-width: var(--kendo-gantt-validation-tooltip-label-width, 50px) !default;
 /// The border color of the Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-border: var(--kendo-gantt-validation-tooltip-border, #{color-mix(in srgb, k-color(border) 16%, transparent)}) !default;
+$kendo-gantt-validation-tooltip-border: var(--kendo-gantt-validation-tooltip-border, color-mix(in srgb, k-color(border) 26%, transparent)) !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: var(--kendo-gantt-validation-tooltip-valid-border, #{k-color(success)}) !default;
+$kendo-gantt-validation-tooltip-valid-border: var(--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: var(--kendo-gantt-validation-tooltip-invalid-border, #{k-color(error)}) !default;
+$kendo-gantt-validation-tooltip-invalid-border: var(--kendo-gantt-validation-tooltip-invalid-border, k-color(error)) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/gantt/_variables.scss" with (
     $kendo-gantt-border-width: $kendo-gantt-border-width,

package/scss/grid/_layout.scss

@@ -36,7 +36,7 @@
 
         .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
-            border-top-width: $kendo-grid-grouping-row-border-width-y;
+            border-block-start-width: $kendo-grid-grouping-row-border-width-y;
         }
 
         .k-grouping-row .k-group-cell,
@@ -70,7 +70,11 @@
             width: $kendo-grid-group-drop-hint-dot-size;
             height: $kendo-grid-group-drop-hint-dot-size;
             border-radius: 50%;
-            left: calc( #{$kendo-grid-group-drop-hint-dot-size} / 2 );
+            inset-inline-start: k-spacing(0.5);
+        }
+
+        &::after {
+            inset-inline-start:calc( #{$kendo-grid-group-drop-hint-size} - #{$kendo-grid-group-drop-hint-line-size} / 2 - k-spacing(0.5) );
         }
     }
 
@@ -89,10 +93,10 @@
     }
 
     .k-grid-header {
-        border-bottom-width: $kendo-grid-header-border-width-y;
+        border-block-end-width: $kendo-grid-header-border-width-y;
 
         .k-table  {
-            margin-bottom: calc( #{$kendo-grid-header-border-width-y} * -1 );
+            margin-block-end: calc( #{$kendo-grid-header-border-width-y} * -1 );
         }
 
         .k-table-th {
@@ -153,7 +157,7 @@
 
         td:first-child,
         .k-table-td:first-child {
-            border-left-width: 0;
+            border-inline-start-width: 0;
         }
     }
 
@@ -194,7 +198,8 @@
         }
 
         .k-grouping-row .k-group-cell,
-        .k-grouping-row + .k-table-row .k-group-cell {
+        .k-grouping-row + .k-table-row .k-group-cell,
+        .k-table-row .k-group-cell {
             border-inline-end-width: 0;
         }
 
@@ -260,7 +265,7 @@
     }
 
     .k-column-menu-group-header-text {
-        border-bottom-style: $kendo-grid-column-menu-group-header-border-style;
+        border-block-end-style: $kendo-grid-column-menu-group-header-border-style;
         font-weight: $kendo-grid-column-menu-group-header-font-weight;
     }
 

package/scss/grid/_theme.scss

@@ -175,7 +175,7 @@
 
     .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper,
     .k-column-menu-footer {
-        border-top-color: color-mix(in srgb, k-color(border) 16%, transparent);
+        border-block-start-color: color-mix(in srgb, k-color(border) 16%, transparent);
     }
 
     .k-columnmenu-indicators {

package/scss/grid/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
 @use "../table/_variables.scss" as *;
@@ -212,7 +213,7 @@ $kendo-grid-header-border-width-x: var( --kendo-grid-header-border-width-x, 0px
 $kendo-grid-header-font-size: var( --kendo-grid-header-font-size, inherit ) !default;
 /// The font weight of the Grid header.
 /// @group grid
-$kendo-grid-header-font-weight: var( --kendo-grid-header-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
+$kendo-grid-header-font-weight: var( --kendo-grid-header-font-weight, var(--kendo-font-weight-normal, normal) ) !default;
 /// The menu spacing of the Grid header.
 /// @group grid
 $kendo-grid-header-menu-spacing: var( --kendo-grid-header-menu-spacing, var(--kendo-icon-spacing, .5rem) ) !default;
@@ -313,13 +314,13 @@ $kendo-grid-sort-index-spacing-x: var( --kendo-grid-sort-index-spacing-x, #{k-sp
 $kendo-grid-sort-icon-spacing: var( --kendo-grid-sort-icon-spacing, var(--kendo-icon-lg-spacing, .5rem) ) !default;
 /// The text color of the Grid sort indicator.
 /// @group grid
-$kendo-grid-sort-indicator-text: var( --kendo-grid-sort-indicator-text, k-color(subtle) ) !default;
+$kendo-grid-sort-indicator-text: var( --kendo-grid-sort-indicator-text, k-color(on-app-surface) ) !default;
 /// The text color of the Grid sort order indicator.
 /// @group grid
 $kendo-grid-sort-indicator-order-text: var( --kendo-grid-sort-indicator-order-text, #{k-color(primary)} ) !default;
 /// The background color of the sorted Grid cells.
 /// @group grid
-$kendo-grid-sorted-bg: var( --kendo-grid-sorted-bg, #{k-color(surface)} ) !default;
+$kendo-grid-sorted-bg: var( --kendo-grid-sorted-bg, rgba(0, 0, 0, 0.04) ) !default;
 
 /// The vertical padding of the Grid command cells.
 /// @group grid

package/scss/imageeditor/_theme.scss

@@ -5,6 +5,10 @@
 @mixin kendo-image-editor--theme() {
     @include kendo-image-editor--theme-base();
 
+    .k-imageeditor-canvas-container {
+        background-color: k-color(base-subtle);
+    }
+
     .k-imageeditor-canvas {
         background: none;
         transform: none;