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

package/scss/tooltip/_variables.scss

@@ -7,10 +7,10 @@
 $kendo-tooltip-border-radius: var( --kendo-tooltip-border-radius, #{k-border-radius(md)} ) !default;
 /// The horizontal padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-x: var( --kendo-tooltip-padding-x, #{k-spacing(2)} ) !default;
+$kendo-tooltip-padding-x: var( --kendo-tooltip-padding-x, #{k-spacing(3)} ) !default;
 /// The vertical padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-y: var( --kendo-tooltip-padding-y, #{k-spacing(2)} ) !default;
+$kendo-tooltip-padding-y: var( --kendo-tooltip-padding-y, #{k-spacing(1.5)} ) !default;
 /// The width of the border around the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border-width: var( --kendo-tooltip-border-width, 0px ) !default;
@@ -22,14 +22,14 @@ $kendo-tooltip-font-family: var( --kendo-tooltip-font-family, var( --kendo-font-
 $kendo-tooltip-font-size: var( --kendo-tooltip-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-line-height: var( --kendo-tooltip-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-tooltip-line-height: var( --kendo-tooltip-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 
 /// The font size of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-font-size: var( --kendo-tooltip-title-font-size, calc( var( --kendo-font-size-sm, .75rem ) * 1.25 ) ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-line-height: var( --kendo-tooltip-title-line-height, var( --kendo-line-heigh-xs, normal ) ) !default;
+$kendo-tooltip-title-line-height: var( --kendo-tooltip-title-line-height, var( --kendo-line-heigh-lg, normal ) ) !default;
 /// The margin of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-margin: var( --kendo-tooltip-title-margin, #{k-spacing(1)} ) !default;
@@ -49,7 +49,7 @@ $kendo-tooltip-text: var( --kendo-tooltip-text, #{k-color(on-app-surface)} ) !de
 $kendo-tooltip-border: var( --kendo-tooltip-border, transparent ) !default;
 /// The box-shadow of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-shadow: var( --kendo-tooltip-shadow, var( --kendo-box-shadow-depth-2, none ) ) !default;
+$kendo-tooltip-shadow: var( --kendo-tooltip-shadow, k-elevation(4) ) !default;
 
 /// The text color of the Tooltip button.
 /// @group tooltip

package/scss/treelist/_layout.scss

@@ -11,7 +11,7 @@
         .k-status {
             // TODO: see what this does and use a better name
             .k-loading {
-                margin-right: k-spacing(1);
+                margin-inline-end: k-spacing(1);
             }
         }
 

package/scss/treeview/_layout.scss

@@ -19,11 +19,6 @@
         margin-inline-end: var( --kendo-icon-spacing, k-spacing(2) );
     }
 
-    .k-treeview .k-checkbox-wrap,
-    .k-treeview .k-checkbox-wrapper {
-        padding: $kendo-treeview-checkbox-wrap-padding;
-    }
-
     .k-treeview-leaf {
         .k-icon,
         .k-image,

package/scss/treeview/_theme.scss

@@ -5,34 +5,10 @@
 @mixin kendo-treeview--theme() {
     @include kendo-treeview--theme-base();
 
-    .k-treeview-leaf {
-        // Hover state
+    .k-treeview-leaf.k-selected {
         &:hover,
         &.k-hover {
-            @include fill(
-                $kendo-treeview-item-hover-text,
-                $kendo-treeview-item-hover-bg,
-                $kendo-treeview-item-hover-border,
-            );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-focus {
-           @include fill(
-                $kendo-treeview-item-focus-text,
-                $kendo-treeview-item-focus-bg,
-                $kendo-treeview-item-focus-border,
-            );
-        }
-
-        // Selected state
-        &.k-selected {
-            @include fill(
-                $kendo-treeview-item-selected-text,
-                $kendo-treeview-item-selected-bg,
-                $kendo-treeview-item-selected-border,
-            );
+            background-color: color-mix(in srgb, k-color(on-app-surface) 17%, transparent)
         }
     }
 

package/scss/treeview/_variables.scss

@@ -6,22 +6,22 @@
 $kendo-treeview-font-family: var( --kendo-treeview-font-family, var( --kendo-font-family, normal ) ) !default;
 /// The font size of the small TreeView.
 /// @group treeview
-$kendo-treeview-sm-font-size: var( --kendo-treeview-sm-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-treeview-sm-font-size: var( --kendo-treeview-sm-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The font size of the medium TreeView.
 /// @group treeview
 $kendo-treeview-md-font-size: var( --kendo-treeview-md-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The font size of the large TreeView.
 /// @group treeview
-$kendo-treeview-lg-font-size: var( --kendo-treeview-lg-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-treeview-lg-font-size: var( --kendo-treeview-lg-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
 /// The line height of the small TreeView.
 /// @group treeview
-$kendo-treeview-sm-line-height: var( --kendo-treeview-sm-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-treeview-sm-line-height: var( --kendo-treeview-sm-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 /// The line height of the medium TreeView.
 /// @group treeview
 $kendo-treeview-md-line-height: var( --kendo-treeview-md-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The line height of the large TreeView.
 /// @group treeview
-$kendo-treeview-lg-line-height: var( --kendo-treeview-lg-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-treeview-lg-line-height: var( --kendo-treeview-lg-line-height, var( --kendo-line-height-sm, normal ) ) !default;
 /// The indentation of child groups in the TreeView.
 /// @group treeview
 $kendo-treeview-indent: var( --kendo-treeview-indent, k-spacing(6) ) !default;
@@ -34,16 +34,16 @@ $kendo-treeview-sm-item-padding-x: var( --kendo-treeview-sm-item-padding-x, k-sp
 $kendo-treeview-md-item-padding-x: var( --kendo-treeview-md-item-padding-x, k-spacing(2) ) !default;
 /// The horizontal padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-x: var( --kendo-treeview-lg-item-padding-x, k-spacing(2) ) !default;
+$kendo-treeview-lg-item-padding-x: var( --kendo-treeview-lg-item-padding-x, k-spacing(3.5) ) !default;
 /// The vertical padding of the small TreeView items.
 /// @group treeview
 $kendo-treeview-sm-item-padding-y: var( --kendo-treeview-sm-item-padding-y, k-spacing(1.5) ) !default;
 /// The vertical padding of the medium TreeView items.
 /// @group treeview
-$kendo-treeview-md-item-padding-y: var( --kendo-treeview-md-item-padding-y, k-spacing(2) ) !default;
+$kendo-treeview-md-item-padding-y: var( --kendo-treeview-md-item-padding-y, k-spacing(1.5) ) !default;
 /// The vertical padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-y: var( --kendo-treeview-lg-item-padding-y, k-spacing(2.5) ) !default;
+$kendo-treeview-lg-item-padding-y: var( --kendo-treeview-lg-item-padding-y, k-spacing(2) ) !default;
 /// The border width of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-border-width: var( --kendo-treeview-item-border-width, 0 ) !default;
@@ -51,6 +51,25 @@ $kendo-treeview-item-border-width: var( --kendo-treeview-item-border-width, 0 )
 /// @group treeview
 $kendo-treeview-item-border-radius: var( --kendo-treeview-item-border-radius, k-border-radius(md) ) !default;
 
+/// The horizontal padding of the checkbox in the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-checkbox-padding-x: k-spacing(1) !default;
+/// The horizontal padding of the checkbox in the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-checkbox-padding-x: k-spacing(1.5) !default;
+/// The horizontal padding of the checkbox in the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-checkbox-padding-x: k-spacing(2) !default;
+/// The vertical padding of the checkbox in the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-checkbox-padding-y: k-spacing(1) !default;
+/// The vertical padding of the checkbox in the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-checkbox-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the checkbox in the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-checkbox-padding-y: k-spacing(2) !default;
+
 /// The horizontal padding of the TreeViews' filter element.
 /// @group treeview
 $kendo-treeview-filter-padding-x: var( --kendo-treeview-filter-padding-x, k-spacing(2) ) !default;
@@ -66,19 +85,26 @@ $kendo-treeview-sizes: (
         font-size: $kendo-treeview-sm-font-size,
         line-height: $kendo-treeview-sm-line-height,
         item-padding-x: $kendo-treeview-sm-item-padding-x,
-        item-padding-y: $kendo-treeview-sm-item-padding-y
+        item-padding-y: $kendo-treeview-sm-item-padding-y,
+        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
+        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y
     ),
     md: (
         font-size: $kendo-treeview-md-font-size,
         line-height: $kendo-treeview-md-line-height,
         item-padding-x: $kendo-treeview-md-item-padding-x,
-        item-padding-y: $kendo-treeview-md-item-padding-y
+        item-padding-y: $kendo-treeview-md-item-padding-y,
+        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
+        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y
+
     ),
     lg: (
         font-size: $kendo-treeview-lg-font-size,
         line-height: $kendo-treeview-lg-line-height,
         item-padding-x: $kendo-treeview-lg-item-padding-x,
-        item-padding-y: $kendo-treeview-lg-item-padding-y
+        item-padding-y: $kendo-treeview-lg-item-padding-y,
+        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
+        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y
     )
 ) !default;
 
@@ -105,33 +131,24 @@ $kendo-treeview-item-border: var( --kendo-treeview-item-border, inherit ) !defau
 
 /// The background color of hovered TreeView items.
 /// @group treeview
-$kendo-treeview-item-hover-bg: var( --kendo-treeview-item-hover-bg, k-color(base-hover) ) !default;
+$kendo-treeview-item-hover-bg: var( --kendo-treeview-item-hover-bg, color-mix(in srgb, k-color(on-app-surface) 5%, transparent) ) !default;
 /// The text color of hovered TreeView items.
 /// @group treeview
-$kendo-treeview-item-hover-text: var( --kendo-treeview-item-hover-text, k-color(on-base) ) !default;
+$kendo-treeview-item-hover-text: var( --kendo-treeview-item-hover-text, k-color(on-app-surface) ) !default;
 /// The border color of hovered TreeView items
 /// @group treeview
 $kendo-treeview-item-hover-border: var( --kendo-treeview-item-hover-border, inherit ) !default;
 
-/// The background color of focused TreeView items.
-/// @group treeview
-$kendo-treeview-item-focus-bg: var( --kendo-treeview-item-focus-bg, $kendo-treeview-item-bg ) !default;
-/// The text color of focused TreeView items.
-/// @group treeview
-$kendo-treeview-item-focus-text: var( --kendo-treeview-item-focus-text, $kendo-treeview-item-text ) !default;
-/// The border color of focused TreeView items.
-/// @group treeview
-$kendo-treeview-item-focus-border: var( --kendo-treeview-item-focus-border, $kendo-treeview-item-border ) !default;
 /// The box shadow of focused TreeView items.
 /// @group treeview
-$kendo-treeview-item-focus-shadow: var( --kendo-treeview-item-focus-shadow, inset 0 0 0 1px k-color(base-emphasis) ) !default;
+$kendo-treeview-item-focus-shadow: var( --kendo-treeview-item-focus-shadow, inset 0 0 0 2px k-color(on-app-surface) ) !default;
 
 /// The background color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-bg: var( --kendo-treeview-item-selected-bg, k-color(base-active) ) !default;
+$kendo-treeview-item-selected-bg: var( --kendo-treeview-item-selected-bg, color-mix(in srgb, k-color(on-app-surface) 12%, transparent) ) !default;
 /// The text color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-text: var( --kendo-treeview-item-selected-text, k-color(on-base) ) !default;
+$kendo-treeview-item-selected-text: var( --kendo-treeview-item-selected-text, k-color(on-app-surface) ) !default;
 /// The border color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-border: var( --kendo-treeview-item-selected-border, inherit ) !default;
@@ -141,7 +158,7 @@ $kendo-treeview-item-selected-border: var( --kendo-treeview-item-selected-border
 $kendo-treeview-item-disabled-bg: var( --kendo-treeview-item-disabled-bg, transparent ) !default;
 /// The text color of disabled TreeView items.
 /// @group treeview
-$kendo-treeview-item-disabled-text: var( --kendo-treeview-item-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-treeview-item-disabled-text: var( --kendo-treeview-item-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The border color of disabled TreeView items.
 /// @group treeview
 $kendo-treeview-item-disabled-border: var( --kendo-treeview-item-disabled-border, inherit ) !default;
@@ -151,7 +168,7 @@ $kendo-treeview-item-disabled-border: var( --kendo-treeview-item-disabled-border
 $kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-bg, transparent ) !default;
 /// The text color of the Load More button in the TreeView
 /// @group treeview
-$kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-text, k-color(primary) ) !default;
+$kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-text, k-color(primary-on-surface) ) !default;
 /// The border color of the Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-border, inherit ) !default;
@@ -179,9 +196,6 @@ $kendo-treeview-loadmore-focus-border: var( --kendo-treeview-loadmore-focus-bord
 /// @group treeview
 $kendo-treeview-loadmore-focus-shadow: var( --kendo-treeview-loadmore-focus-shadow, $kendo-treeview-item-focus-shadow ) !default;
 
-/// The padding of the checkbox wrapper in the TreeView.
-/// @group treeview
-$kendo-treeview-checkbox-wrap-padding: var( --kendo-treeview-checkbox-wrap-padding, k-spacing(.5) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with (
     $kendo-treeview-font-family: $kendo-treeview-font-family,
@@ -200,6 +214,12 @@ $kendo-treeview-checkbox-wrap-padding: var( --kendo-treeview-checkbox-wrap-paddi
     $kendo-treeview-lg-item-padding-y: $kendo-treeview-lg-item-padding-y,
     $kendo-treeview-item-border-width: $kendo-treeview-item-border-width,
     $kendo-treeview-item-border-radius: $kendo-treeview-item-border-radius,
+    $kendo-treeview-sm-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
+    $kendo-treeview-md-checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
+    $kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
+    $kendo-treeview-sm-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y,
+    $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y,
+    $kendo-treeview-lg-checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y,
     $kendo-treeview-sizes: $kendo-treeview-sizes,
     $kendo-treeview-bg: $kendo-treeview-bg,
     $kendo-treeview-text: $kendo-treeview-text,

package/scss/typography/_variables.scss

@@ -7,22 +7,22 @@
 
 /// The font size of the highest level heading.
 /// @group typography-component
-$kendo-h1-font-size: 32px !default;
+$kendo-h1-font-size: 80px !default;
 /// The font size of the second highest level heading.
 /// @group typography-component
-$kendo-h2-font-size: 28px !default;
+$kendo-h2-font-size: 68px !default;
 /// The font size of the third highest level heading.
 /// @group typography-component
-$kendo-h3-font-size: 24px !default;
+$kendo-h3-font-size: 40px !default;
 /// The font size of the fourth highest level heading.
 /// @group typography-component
-$kendo-h4-font-size: 20px !default;
+$kendo-h4-font-size: 32px !default;
 /// The font size of the fifth highest level heading.
 /// @group typography-component
-$kendo-h5-font-size: 18px !default;
+$kendo-h5-font-size: 28px !default;
 /// The font size of the sixth highest level heading.
 /// @group typography-component
-$kendo-h6-font-size: 16px !default;
+$kendo-h6-font-size: 24px !default;
 
 /// The font family of the highest level heading.
 /// @group typography-component
@@ -45,21 +45,21 @@ $kendo-h6-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The line height of the highest level heading.
 /// @group typography-component
-$kendo-h1-line-height: 40px !default;
+$kendo-h1-line-height: 100px !default;
 /// The line height of the second highest level heading.
 /// @group typography-component
-$kendo-h2-line-height: 36px !default;
+$kendo-h2-line-height: 92px !default;
 /// The line height of the third highest level heading.
 /// @group typography-component
-$kendo-h3-line-height: 32px !default;
+$kendo-h3-line-height: 52px !default;
 /// The line height of the fourth highest level heading.
 /// @group typography-component
-$kendo-h4-line-height: 28px !default;
+$kendo-h4-line-height: 40px !default;
 /// The line height of the fifth highest level heading.
 /// @group typography-component
-$kendo-h5-line-height: 24px !default;
+$kendo-h5-line-height: 36px !default;
 /// The line height of the sixth highest level heading.
-$kendo-h6-line-height: 22px !default;
+$kendo-h6-line-height: 32px !default;
 
 /// The font weight of the highest level heading.
 /// @group typography-component
@@ -248,7 +248,7 @@ $kendo-display1-font-size: calc( var( --kendo-font-size, .875rem ) * 9 ) !defaul
 $kendo-display2-font-size: calc( var( --kendo-font-size, .875rem ) * 6 )  !default;
 /// The font size of the third largest display text.
 /// @group typography-component
-$kendo-display3-font-size: 68px !default;
+$kendo-display3-font-size: 112px !default;
 /// The font size of the fourth largest display text.
 /// @group typography-component
 $kendo-display4-font-size: calc( var( --kendo-font-size, .875rem ) * 3 )  !default;
@@ -268,29 +268,29 @@ $kendo-display4-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The line height of the largest display text.
 /// @group typography-component
-$kendo-display1-line-height: 118px !default;
+$kendo-display1-line-height: 180px !default;
 /// The line height of the second largest display text.
 /// @group typography-component
-$kendo-display2-line-height: 94px !default;
+$kendo-display2-line-height: 160px !default;
 /// The line height of the third largest display text.
 /// @group typography-component
-$kendo-display3-line-height: 76px !default;
+$kendo-display3-line-height: 140px !default;
 /// The line height of the fourth largest display text.
 /// @group typography-component
-$kendo-display4-line-height: 52px !default;
+$kendo-display4-line-height: 120px !default;
 
 /// The font weight of the largest display text.
 /// @group typography-component
-$kendo-display1-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display1-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 /// The font weight of the second largest display text.
 /// @group typography-component
-$kendo-display2-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display2-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 /// The font weight of the third largest display text.
 /// @group typography-component
-$kendo-display3-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display3-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 /// The font weight of the fourth largest display text.
 /// @group typography-component
-$kendo-display4-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
+$kendo-display4-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The letter spacing of the largest display text.
 /// @group typography-component

package/scss/upload/_layout.scss

@@ -16,16 +16,29 @@
             margin-inline-end: 0;
         }
 
+        .k-upload-files .k-file {
+            padding-block: $kendo-upload-item-padding-y;
+        }
+
+        .k-file-size,
+        .k-file-validation-message {
+            line-height: var( --kendo-line-height-xs, normal );
+        }
+
         .k-multiple-files-wrapper,
         .k-file-single > .k-file-info {
             margin-inline-start: k-spacing(2);
             margin-inline-end: 0;
         }
 
+        .k-upload-files .k-file-info {
+            min-height: auto;
+        }
+
         .k-progressbar {
-            left: $kendo-upload-item-padding-x;
-            right: $kendo-upload-item-padding-x;
-            bottom: calc( $kendo-upload-item-padding-y / 2 );
+            inset-inline-start: $kendo-upload-item-padding-x;
+            inset-inline-end: $kendo-upload-item-padding-x;
+            inset-block-end: $kendo-upload-item-padding-y;
         }
     }
 

package/scss/upload/_theme.scss

@@ -1,5 +1,6 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../button/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/upload/_theme.scss" as *;
 
 @mixin kendo-upload--theme() {
@@ -17,5 +18,28 @@
         &.ng-invalid.ng-dirty {
             border-color: k-color(error-emphasis);
         }
+
+        &:disabled,
+        &.k-disabled {
+            .k-upload-dropzone {
+                @include fill(
+                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
+                    color-mix(in srgb, k-color(on-app-surface) 7%, transparent),
+                    color-mix(in srgb, k-color(on-app-surface) 14%, transparent)
+                );
+
+                .k-button {
+                    @include fill(
+                        $kendo-button-disabled-text,
+                        $kendo-button-disabled-bg,
+                        $kendo-button-disabled-border
+                    );
+                }
+
+                .k-dropzone-hint {
+                    color: $kendo-button-disabled-text;
+                }
+            }
+        }
     }
 }

package/scss/upload/_variables.scss

@@ -22,29 +22,29 @@ $kendo-upload-max-height: var( --kendo-upload-max-height, 300px ) !default;
 $kendo-upload-text: var( --kendo-upload-text, k-color(on-app-surface) ) !default;
 /// The background color of the Upload.
 /// @group upload
-$kendo-upload-bg: var( --kendo-upload-bg, k-color(surface-alt) ) !default;
+$kendo-upload-bg: var( --kendo-upload-bg, k-color(app-surface) ) !default;
 /// The border color of the Upload.
 /// @group upload
-$kendo-upload-border: var( --kendo-upload-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-upload-border: var( --kendo-upload-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-x: var( --kendo-upload-dropzone-padding-x, k-spacing(2) ) !default;
+$kendo-upload-dropzone-padding-x: calc( var( --kendo-upload-dropzone-padding-x, #{k-spacing(3)} ) + 1px ) !default;
 /// The vertical padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-y: var( --kendo-upload-dropzone-padding-y, k-spacing(2) ) !default;
+$kendo-upload-dropzone-padding-y: calc( var( --kendo-upload-dropzone-padding-y, #{k-spacing(0.5)} ) + 1px ) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-text: var( --kendo-upload-dropzone-text, k-color(subtle) ) !default;
 /// The background color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-bg: var( --kendo-upload-dropzone-bg, k-color(surface) ) !default;
+$kendo-upload-dropzone-bg: var( --kendo-upload-dropzone-bg, k-color(app-surface) ) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-border: var( --kendo-upload-dropzone-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-upload-dropzone-border: var( --kendo-upload-dropzone-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-hover-bg: var( --kendo-upload-dropzone-hover-bg, k-color(base-hover) ) !default;
+$kendo-upload-dropzone-hover-bg: var( --kendo-upload-dropzone-hover-bg, $kendo-upload-dropzone-bg ) !default;
 
 /// The text color of the Upload status message.
 /// @group upload
@@ -55,14 +55,14 @@ $kendo-upload-status-text-opacity: var( --kendo-upload-status-text-opacity, null
 
 /// The horizontal padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-x: var( --kendo-upload-item-padding-x, k-spacing(2) ) !default;
+$kendo-upload-item-padding-x: calc( var( --kendo-upload-item-padding-x, #{k-spacing(3)} ) + 1px ) !default;
 /// The vertical padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-y: var( --kendo-upload-item-padding-y, k-spacing(2) ) !default;
+$kendo-upload-item-padding-y: calc( var( --kendo-upload-item-padding-y, #{k-spacing(0.5)} ) + 1px ) !default;
 
 /// The vertical spacing between uploaded batch items.
 /// @group upload
-$kendo-upload-multiple-items-spacing: var( --kendo-upload-multiple-items-spacing, k-spacing(4) ) !default;
+$kendo-upload-multiple-items-spacing: var( --kendo-upload-multiple-items-spacing, k-spacing(1.5) ) !default;
 
 /// The font size of the Upload validation message.
 /// @group upload

package/scss/window/_layout.scss

@@ -5,6 +5,14 @@
 @mixin kendo-window--layout() {
     @include kendo-window--layout-base();
 
+    .k-window{
+        &:focus,
+        &.k-focus{
+            outline-width: 2px;
+            outline-style: solid;
+        }
+    }
+
     .k-window-content:first-child,
     .k-window-content:last-child {
         padding-block: $kendo-window-inner-padding-y;
@@ -14,11 +22,12 @@
     // Title bar title text
     .k-window-title {
         font-weight: $kendo-window-title-font-weight;
+        padding-block: calc( #{$kendo-window-titlebar-padding-x} / 4 );
+        margin-block: 0;
     }
 
     // Buttons Layout
     .k-window-actions {
-        padding-block-start: 0;
         gap: $kendo-window-buttongroup-spacing;
     }
 }

package/scss/window/_theme.scss

@@ -6,6 +6,13 @@
 @mixin kendo-window--theme() {
     @include kendo-window--theme-base();
 
+    .k-window{
+        &:focus,
+        &.k-focus{
+            outline-color: k-color(on-base);
+        }
+    }
+
     // Titlebar
     .k-window-titlebar {
         color: inherit;

package/scss/window/_variables.scss

@@ -3,7 +3,7 @@
 
 /// The width of the border around the Window.
 /// @group window
-$kendo-window-border-width: var(--kendo-window-border-width, k-spacing(1) 0 0) !default;
+$kendo-window-border-width: var(--kendo-window-border-width, 0) !default;
 /// The border radius of the Window.
 /// @group window
 $kendo-window-border-radius: var(--kendo-window-border-radius, k-border-radius(md)) !default;
@@ -22,7 +22,7 @@ $kendo-window-line-height: var( --kendo-window-line-height, var( --kendo-line-he
 $kendo-window-titlebar-padding-x: var( --kendo-window-titlebar-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-y: var( --kendo-window-titlebar-padding-y, k-spacing(5) ) !default;
+$kendo-window-titlebar-padding-y: var( --kendo-window-titlebar-padding-y, k-spacing(6) k-spacing(4) ) !default;
 /// The width of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-width: var( --kendo-window-titlebar-border-width, 0 ) !default;
@@ -35,10 +35,10 @@ $kendo-window-titlebar-border-style: solid !default;
 $kendo-window-title-font-size: var( --kendo-window-title-font-size, var( --kendo-font-size-xl, inherit ) ) !default;
 /// The line height of the title of the Window.
 /// @group window
-$kendo-window-title-line-height: var( --kendo-window-title-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-window-title-line-height: var( --kendo-window-title-line-height, var( --kendo-line-height-xs, normal ) ) !default;
 /// The font weight of the title of the Window.
 /// @group window
-$kendo-window-title-font-weight: var( --kendo-window-title-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
+$kendo-window-title-font-weight: var( --kendo-window-title-font-weight, var( --kendo-font-weight-semibold, semibold ) ) !default;
 
 /// The spacing between the buttons in the Window titlebar.
 /// @group window
@@ -78,20 +78,20 @@ $kendo-window-bg: var( --kendo-window-bg, k-color(surface-alt) ) !default;
 $kendo-window-text: var( --kendo-window-text, k-color(on-app-surface) ) !default;
 /// The border color of the Window.
 /// @group window
-$kendo-window-border: var( --kendo-window-border, k-color(primary) ) !default;
+$kendo-window-border: var( --kendo-window-border, k-color(surface-alt) ) !default;
 /// The box shadow of the Window.
 /// @group window
-$kendo-window-shadow: var( --kendo-window-shadow, var( --kendo-elevation-8, none ) ) !default;
+$kendo-window-shadow: var( --kendo-window-shadow, var( --kendo-elevation-5, none ) ) !default;
 /// The box shadow of the focused Window.
 /// @group window
-$kendo-window-focus-shadow: var( --kendo-window-focus-shadow, var( --kendo-elevation-9, none ) ) !default;
+$kendo-window-focus-shadow: $kendo-window-shadow !default;
 
 /// The background color of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-bg: var( --kendo-window-titlebar-bg, k-color(surface-alt) ) !default; // $kendo-component-header-bg
 /// The text color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-text: var( --kendo-window-titlebar-text, k-color(primary) ) !default; // $kendo-component-header-text
+$kendo-window-titlebar-text: var( --kendo-window-titlebar-text, k-color(on-app-surface) ) !default; // $kendo-component-header-text
 /// The border color of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border: var( --kendo-window-titlebar-border, k-color(primary) ) !default;

package/scss/wizard/_layout.scss

@@ -12,7 +12,10 @@
 
             &:focus,
             &.k-focus {
+                // TODO: use scss variable for outline width
+                outline-width: 2px;
                 outline-style: solid;
+                outline-offset: -2px;
             }
         }
 

package/scss/wizard/_variables.scss

@@ -27,10 +27,10 @@ $kendo-wizard-steps-padding-x: var( --kendo-wizard-steps-padding-x, k-spacing(3)
 
 /// The horizontal padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-x: var( --kendo-wizard-content-padding-x, k-spacing(0) ) !default;
+$kendo-wizard-content-padding-x: var( --kendo-wizard-content-padding-x, k-spacing(3) ) !default;
 /// The vertical padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-y: var( --kendo-wizard-content-padding-y, k-spacing(0) ) !default;
+$kendo-wizard-content-padding-y: var( --kendo-wizard-content-padding-y, k-spacing(3) ) !default;
 /// The text color of the Wizard content.
 /// @group wizard
 $kendo-wizard-content-text: var( --kendo-wizard-content-text, k-color(on-app-surface) ) !default;
@@ -47,7 +47,7 @@ $kendo-wizard-buttons-margin-y: var( --kendo-wizard-buttons-margin-y, k-spacing(
 
 /// The outline of the focused Wizard step.
 /// @group wizard
-$kendo-wizard-step-focus-border: var( --kendo-wizard-step-focus-border, k-color(base-emphasis) ) !default;
+$kendo-wizard-step-focus-border: var( --kendo-wizard-step-focus-border, k-color(border-alt) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with (
     $kendo-wizard-padding-x: $kendo-wizard-padding-x,