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

package/scss/list/_variables.scss

@@ -19,14 +19,14 @@ $kendo-list-lg-line-height: var( --kendo-list-lg-line-height, var(--kendo-line-h
 
 /// The horizontal padding of the List header.
 /// @group list
-$kendo-list-sm-header-padding-x: var( --kendo-list-sm-header-padding-x, #{k-spacing(2)} ) !default;
-$kendo-list-md-header-padding-x: var( --kendo-list-md-header-padding-x, #{k-spacing(2)} ) !default;
-$kendo-list-lg-header-padding-x: var( --kendo-list-lg-header-padding-x, #{k-spacing(2)} ) !default;
+$kendo-list-sm-header-padding-x: var( --kendo-list-sm-header-padding-x, #{k-spacing(1)} ) !default;
+$kendo-list-md-header-padding-x: var( --kendo-list-md-header-padding-x, #{k-spacing(1.5)} ) !default;
+$kendo-list-lg-header-padding-x: var( --kendo-list-lg-header-padding-x, #{k-spacing(2.5)} ) !default;
 
 /// The vertical padding of the List header.
 /// @group list
-$kendo-list-sm-header-padding-y: var( --kendo-list-sm-header-padding-y, #{k-spacing(1.5)} ) !default;
-$kendo-list-md-header-padding-y: var( --kendo-list-md-header-padding-y, #{k-spacing(2)} ) !default;
+$kendo-list-sm-header-padding-y: var( --kendo-list-sm-header-padding-y, #{k-spacing(1)} ) !default;
+$kendo-list-md-header-padding-y: var( --kendo-list-md-header-padding-y, #{k-spacing(1.5)} ) !default;
 $kendo-list-lg-header-padding-y: var( --kendo-list-lg-header-padding-y, #{k-spacing(2.5)} ) !default;
 
 /// The border width of the List header.
@@ -35,41 +35,41 @@ $kendo-list-header-border-width: var( --kendo-list-header-border-width, 0 ) !def
 
 /// The font size of the List header.
 /// @group list
-$kendo-list-sm-header-font-size: var( --kendo-list-sm-header-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-md-header-font-size: var( --kendo-list-md-header-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-lg-header-font-size: var( --kendo-list-lg-header-font-size, var(--kendo-font-size, inherit) ) !default;
+$kendo-list-sm-header-font-size: var( --kendo-list-sm-header-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-md-header-font-size: var( --kendo-list-md-header-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-lg-header-font-size: var( --kendo-list-lg-header-font-size, var(--kendo-font-size-sm, inherit) ) !default;
 
 /// The line height of the List header.
 /// @group list
-$kendo-list-sm-header-line-height: var( --kendo-list-sm-header-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-md-header-line-height: var( --kendo-list-md-header-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-lg-header-line-height: var( --kendo-list-lg-header-line-height, var(--kendo-line-height, normal) ) !default;
+$kendo-list-sm-header-line-height: var( --kendo-list-sm-header-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-md-header-line-height: var( --kendo-list-md-header-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-lg-header-line-height: var( --kendo-list-lg-header-line-height, var(--kendo-line-height-lg, normal) ) !default;
 
 /// The font weight of the List header.
 /// @group list
-$kendo-list-header-font-weight: var( --kendo-list-header-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
+$kendo-list-header-font-weight: var( --kendo-list-header-font-weight, var(--kendo-font-weight-semibold, 600) ) !default;
 /// The horizontal padding of the List filter, when no size is set.
 /// @group list
-$kendo-list-sm-filter-padding-x: var( --kendo-list-sm-filter-padding-x, #{k-spacing(2)} ) !default;
-$kendo-list-md-filter-padding-x: var( --kendo-list-md-filter-padding-x, #{k-spacing(2)} ) !default;
-$kendo-list-lg-filter-padding-x: var( --kendo-list-lg-filter-padding-x, #{k-spacing(2)} ) !default;
+$kendo-list-sm-filter-padding-x: var( --kendo-list-sm-filter-padding-x, #{k-spacing(1)} ) !default;
+$kendo-list-md-filter-padding-x: var( --kendo-list-md-filter-padding-x, #{k-spacing(1.5)} ) !default;
+$kendo-list-lg-filter-padding-x: var( --kendo-list-lg-filter-padding-x, #{k-spacing(2.5)} ) !default;
 
 /// The vertical padding of the List filter, when no size is set.
 /// @group list
-$kendo-list-sm-filter-padding-y: var( --kendo-list-sm-filter-padding-y, #{k-spacing(2)} ) !default;
-$kendo-list-md-filter-padding-y: var( --kendo-list-md-filter-padding-y, #{k-spacing(2)} ) !default;
-$kendo-list-lg-filter-padding-y: var( --kendo-list-lg-filter-padding-y, #{k-spacing(2)} ) !default;
+$kendo-list-sm-filter-padding-y: var( --kendo-list-sm-filter-padding-y, #{k-spacing(1)} ) !default;
+$kendo-list-md-filter-padding-y: var( --kendo-list-md-filter-padding-y, #{k-spacing(1.5)} ) !default;
+$kendo-list-lg-filter-padding-y: var( --kendo-list-lg-filter-padding-y, calc(#{k-spacing(2)} + 1px) ) !default;
 
 /// The horizontal padding of the List items.
 /// @group list
-$kendo-list-sm-item-padding-x: var( --kendo-list-sm-item-padding-x, #{k-spacing(2)} ) !default;
-$kendo-list-md-item-padding-x: var( --kendo-list-md-item-padding-x, #{k-spacing(2)} ) !default;
-$kendo-list-lg-item-padding-x: var( --kendo-list-lg-item-padding-x, #{k-spacing(2)} ) !default;
+$kendo-list-sm-item-padding-x: var( --kendo-list-sm-item-padding-x, #{k-spacing(1)} ) !default;
+$kendo-list-md-item-padding-x: var( --kendo-list-md-item-padding-x, #{k-spacing(1.5)} ) !default;
+$kendo-list-lg-item-padding-x: var( --kendo-list-lg-item-padding-x, #{k-spacing(2.5)} ) !default;
 
 /// The vertical padding of the List items.
 /// @group list
-$kendo-list-sm-item-padding-y: var( --kendo-list-sm-item-padding-y, #{k-spacing(1.5)} ) !default;
-$kendo-list-md-item-padding-y: var( --kendo-list-md-item-padding-y, #{k-spacing(2)} ) !default;
+$kendo-list-sm-item-padding-y: var( --kendo-list-sm-item-padding-y, #{k-spacing(1)} ) !default;
+$kendo-list-md-item-padding-y: var( --kendo-list-md-item-padding-y, #{k-spacing(1.5)} ) !default;
 $kendo-list-lg-item-padding-y: var( --kendo-list-lg-item-padding-y, #{k-spacing(2.5)} ) !default;
 
 /// The font size of the List items.
@@ -120,24 +120,36 @@ $kendo-list-group-item-border-width: var( --kendo-list-group-item-border-width,
 
 /// The font size of the List group items.
 /// @group list
-$kendo-list-sm-group-item-font-size: var( --kendo-list-sm-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-md-group-item-font-size: var( --kendo-list-md-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-lg-group-item-font-size: var( --kendo-list-lg-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
+$kendo-list-sm-group-item-font-size: var( --kendo-list-sm-group-item-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-md-group-item-font-size: var( --kendo-list-md-group-item-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-lg-group-item-font-size: var( --kendo-list-lg-group-item-font-size, var(--kendo-font-size-sm, inherit) ) !default;
 
 /// The line height of the List group items.
 /// @group list
-$kendo-list-sm-group-item-line-height: var( --kendo-list-sm-group-item-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-md-group-item-line-height: var( --kendo-list-md-group-item-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-lg-group-item-line-height: var( --kendo-list-lg-group-item-line-height, var(--kendo-line-height, normal) ) !default;
+$kendo-list-sm-group-item-line-height: var( --kendo-list-sm-group-item-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-md-group-item-line-height: var( --kendo-list-md-group-item-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-lg-group-item-line-height: var( --kendo-list-lg-group-item-line-height, var(--kendo-line-height-lg, normal) ) !default;
 
 /// The font weight of the List group item.
 /// @group list
-$kendo-list-group-item-font-weight: var( --kendo-list-group-item-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
+$kendo-list-group-item-font-weight: var( --kendo-list-group-item-font-weight, var(--kendo-font-weight-semibold, 600) ) !default;
+
+/// The padding of the List content.
+/// @group list
+ $kendo-list-content-padding: var( --kendo-list-content-padding, #{k-spacing(1)} ) !default;
 
 /// The text color of the List item icon
 /// @group list
 $kendo-list-item-icon-text: var( --kendo-list-item-icon-text, #{k-color(primary)} ) !default;
 
+/// The border radius of the List item.
+/// @group list
+$kendo-list-item-border-radius: var( --kendo-list-item-border-radius, #{k-border-radius(md)} ) !default;
+
+/// The spacing between the List items.
+/// @group list
+$kendo-list-item-spacing: var( --kendo-list-item-spacing, #{k-spacing(0.5)} ) !default;
+
 /// The map with the sizes of the List.
 /// @group list
 $kendo-list-sizes: (
@@ -220,69 +232,69 @@ $kendo-list-border: var( --kendo-list-border, #{color-mix(in srgb, k-color(borde
 
 /// The background color of the List header.
 /// @group list
-$kendo-list-header-bg: var( --kendo-list-header-bg, #{k-color(app-surface)} ) !default;
+$kendo-list-header-bg: var( --kendo-list-header-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the List header.
 /// @group list
-$kendo-list-header-text: var( --kendo-list-header-text, #{k-color(primary)} ) !default;
+$kendo-list-header-text: var( --kendo-list-header-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the List header.
 /// @group list
 $kendo-list-header-border: var( --kendo-list-header-border, inherit ) !default;
 /// The box shadow of the List header.
 /// @group list
-$kendo-list-header-shadow: var( --kendo-list-header-shadow, #{$kendo-box-shadow-depth-3} ) !default;
+$kendo-list-header-shadow: var( --kendo-list-header-shadow, null ) !default;
 
 
 /// The background color of the List items.
 /// @group list
-$kendo-list-item-bg: var( --kendo-list-item-bg, #{k-color(app-surface)} ) !default;
+$kendo-list-item-bg: var( --kendo-list-item-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the List items.
 /// @group list
 $kendo-list-item-text: var( --kendo-list-item-text, #{k-color(on-app-surface)} ) !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: var( --kendo-list-item-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-list-item-hover-bg: var( --kendo-list-item-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 5%, transparent)} ) !default;
 /// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: var( --kendo-list-item-hover-text, #{k-color(on-app-surface)} ) !default;
 
 /// The background color of the focused List items.
 /// @group list
-$kendo-list-item-focus-bg: var( --kendo-list-item-focus-bg, #{k-color(app-surface)} ) !default;
+$kendo-list-item-focus-bg: var( --kendo-list-item-focus-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the focused List items.
 /// @group list
 $kendo-list-item-focus-text: var( --kendo-list-item-focus-text, #{k-color(on-app-surface)} ) !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: var( --kendo-list-item-focus-shadow, inset 0 0 0 1px #{k-color(base-emphasis)} ) !default;
+$kendo-list-item-focus-shadow: var( --kendo-list-item-focus-shadow, inset 0 0 0 2px #{k-color(border-alt)} ) !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: var( --kendo-list-item-selected-bg, #{k-color(base-active)} ) !default;
+$kendo-list-item-selected-bg: var( --kendo-list-item-selected-bg, #{color-mix(in srgb, k-color(on-app-surface) 12%, transparent)} ) !default;
 /// The text color of the selected List items.
 /// @group list
 $kendo-list-item-selected-text: var( --kendo-list-item-selected-text, #{k-color(on-app-surface)} ) !default;
 
 /// The background color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-bg: var( --kendo-list-item-selected-hover-bg, #{k-color(base-active)} ) !default;
+$kendo-list-item-selected-hover-bg: var( --kendo-list-item-selected-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 17%, transparent)} ) !default;
 /// The text color of the selected hovered List items.
 /// @group list
 $kendo-list-item-selected-hover-text: var( --kendo-list-item-selected-hover-text, #{k-color(on-app-surface)} ) !default;
 
 /// The background color of the disabled List items.
 /// @group list
-$kendo-list-item-disabled-bg: var( --kendo-list-item-disabled-bg, #{k-color(app-surface)} ) !default;
+$kendo-list-item-disabled-bg: var( --kendo-list-item-disabled-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the disabled List items.
 /// @group list
 $kendo-list-item-disabled-text: var( --kendo-list-item-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
 
 /// The background color of the List group items.
 /// @group list
-$kendo-list-group-item-bg: var( --kendo-list-group-item-bg, #{k-color(app-surface)} ) !default;
+$kendo-list-group-item-bg: var( --kendo-list-group-item-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the List group items.
 /// @group list
-$kendo-list-group-item-text: var( --kendo-list-group-item-text, #{k-color(primary)} ) !default;
+$kendo-list-group-item-text: var( --kendo-list-group-item-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the List group items.
 /// @group list
 $kendo-list-group-item-border: var( --kendo-list-group-item-border, inherit ) !default;

package/scss/listbox/_theme.scss

@@ -9,7 +9,7 @@
     .k-listbox {
 
         .k-drop-hint {
-            border-top-color: $kendo-listbox-drop-hint-border-color;
+            border-block-start-color: $kendo-listbox-drop-hint-border-color;
         }
     }
 

package/scss/listview/_layout.scss

@@ -5,18 +5,4 @@
 @mixin kendo-listview--layout() {
     @include kendo-listview--layout-base();
 
-    .k-listview-content.k-d-grid {
-        grid-gap: var( --kendo-listview-grid-gap, #{$kendo-listview-grid-gap} );
-    }
-
-    .k-listview-header {
-        padding-inline: $kendo-listview-header-padding-x;
-        padding-block: $kendo-listview-header-padding-y;
-    }
-
-    .k-listview-footer {
-        padding-inline: $kendo-listview-footer-padding-x;
-        padding-block: $kendo-listview-footer-padding-y;
-    }
-
 }

package/scss/listview/_theme.scss

@@ -4,23 +4,4 @@
 
 @mixin kendo-listview--theme() {
     @include kendo-listview--theme-base();
-
-    // Fluent-specific styles
-
-    // Listview header
-    .k-listview-header {
-        @include fill(
-            $kendo-listview-header-text,
-            $kendo-listview-header-bg,
-            $kendo-listview-header-border
-        )
-    }
-
-    // Listview footer
-    .k-listview-footer {
-        @include fill(
-            $kendo-listview-footer-text,
-            $kendo-listview-footer-bg
-        )
-    }
 }

package/scss/listview/_variables.scss

@@ -12,20 +12,6 @@ $kendo-listview-padding-y: var( --kendo-listview-padding-y, k-spacing(1) ) !defa
 /// @group listview
 $kendo-listview-border-width: 1px !default;
 
-/// The horizontal padding of the ListView header.
-/// @group listview
-$kendo-listview-header-padding-x: var( --kendo-listview-header-padding-x, k-spacing(4) ) !default;
-/// The vertical padding of the ListView header.
-/// @group listview
-$kendo-listview-header-padding-y: var( --kendo-listview-header-padding-y, k-spacing(2) ) !default;
-
-/// The horizontal padding of the ListView footer.
-/// @group listview
-$kendo-listview-footer-padding-x: var( --kendo-listview-footer-padding-x, $kendo-listview-header-padding-x ) !default;
-/// The vertical padding of the ListView footer.
-/// @group listview
-$kendo-listview-footer-padding-y: var( --kendo-listview-footer-padding-y, $kendo-listview-header-padding-y ) !default;
-
 /// The horizontal padding of the ListView items.
 /// @group listview
 $kendo-listview-item-padding-x: var( --kendo-listview-item-padding-x, k-spacing(1) ) !default;
@@ -55,17 +41,17 @@ $kendo-listview-border: var( --kendo-listview-border, color-mix(in srgb, k-color
 
 /// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, initial ) !default;
+$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, k-color(on-app-surface) ) !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: var( --kendo-listview-item-selected-bg, k-color(base-active) ) !default;
+$kendo-listview-item-selected-bg: var( --kendo-listview-item-selected-bg, #{color-mix(in srgb, k-color(on-app-surface) 12%, transparent)} ) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: var( --kendo-listview-item-selected-border, initial ) !default;
 
 /// The text color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, initial ) !default;
+$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, k-color(on-app-surface) ) !default;
 /// The background color of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-bg: var( --kendo-listview-item-focus-bg, initial ) !default;
@@ -76,26 +62,6 @@ $kendo-listview-item-focus-border: var( --kendo-listview-item-focus-border, init
 /// @group listview
 $kendo-listview-item-focus-shadow: var( --kendo-listview-item-focus-shadow, var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) ) !default;
 
-/// The gap between items of ListView with grid layout.
-/// @group listview
-$kendo-listview-grid-gap: var( --kendo-listview-grid-gap, k-spacing(.0) ) !default;
-
-/// The text color of the ListView header.
-/// @group listview
-$kendo-listview-header-text: var( --kendo-listview-header-text, initial ) !default;
-/// The background color of the ListView header.
-/// @group listview
-$kendo-listview-header-bg: var( --kendo-listview-header-bg, initial ) !default;
-/// The border color of the ListView header.
-/// @group listview
-$kendo-listview-header-border: var( --kendo-listview-header-border, $kendo-listview-border ) !default;
-
-/// The text color of the ListView footer.
-/// @group listview
-$kendo-listview-footer-text: var( --kendo-listview-footer-text, initial ) !default;
-/// The background color of the ListView footer.
-/// @group listview
-$kendo-listview-footer-bg: var( --kendo-listview-footer-bg, initial ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (
     $kendo-listview-padding-x: $kendo-listview-padding-x,

package/scss/loader/_layout.scss

@@ -37,6 +37,10 @@
             padding-block: $kendo-loader-lg-container-padding-y;
         }
     }
+
+    .k-loader-container-label {
+        font-weight: var( --kendo-font-weight-semibold, 600 );
+    }
 }
 
 @mixin kendo-loading--layout() {

package/scss/loader/_variables.scss

@@ -88,13 +88,13 @@ $kendo-loader-container-panel-border-width: var( --kendo-loader-container-panel-
 $kendo-loader-container-panel-border-style: var( --kendo-loader-container-panel-border-style, solid ) !default;
 /// The border color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-color: var( --kendo-loader-container-panel-border-color, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-loader-container-panel-border-color: var( --kendo-loader-container-panel-border-color, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The border radius of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-radius: var( --kendo-loader-container-panel-border-radius, #{k-border-radius(md)} ) !default;
 /// The background color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-bg: var( --kendo-loader-container-panel-bg, #{k-color(app-surface)} ) !default;
+$kendo-loader-container-panel-bg: var( --kendo-loader-container-panel-bg, #{k-color(surface-alt)} ) !default;
 
 /// The horizontal padding of the small Loader container.
 /// @group loader
@@ -118,23 +118,23 @@ $kendo-loader-lg-container-padding-y: var( --kendo-loader-lg-container-padding-y
 
 /// The gap of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-gap: var( --kendo-loader-sm-container-gap, #{k-spacing(1)} ) !default;
+$kendo-loader-sm-container-gap: var( --kendo-loader-sm-container-gap, #{k-spacing(2)} ) !default;
 /// The gap of the medium Loader container.
 /// @group loader
 $kendo-loader-md-container-gap: var( --kendo-loader-md-container-gap, #{k-spacing(2)} ) !default;
 /// The gap of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-gap: var( --kendo-loader-lg-container-gap, #{k-spacing(3)} ) !default;
+$kendo-loader-lg-container-gap: var( --kendo-loader-lg-container-gap, #{k-spacing(2)} ) !default;
 
 /// The font size of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-font-size: var( --kendo-loader-sm-container-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-loader-sm-container-font-size: var( --kendo-loader-sm-container-font-size, var( --kendo-font-size-md, inherit ) ) !default;
 /// The font size of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-font-size: var( --kendo-loader-md-container-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-loader-md-container-font-size: var( --kendo-loader-md-container-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
 /// The font size of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-font-size: var( --kendo-loader-lg-container-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
+$kendo-loader-lg-container-font-size: var( --kendo-loader-lg-container-font-size, var( --kendo-font-size-xl, inherit ) ) !default;
 
 /// The theme colors map for the Loader variations.
 /// @group loader

package/scss/mediaplayer/_layout.scss

@@ -20,8 +20,8 @@
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         transform: translateY( -50% );
     }
 
@@ -29,4 +29,8 @@
         padding: 0;
     }
 
+    .k-mediaplayer-toolbar {
+        padding: k-spacing(2);
+    }
+
 }

package/scss/mediaplayer/_variables.scss

@@ -26,7 +26,7 @@ $kendo-media-player-border: var( --kendo-media-player-border, color-mix(in srgb,
 
 /// The background color of the MediaPlayer overlay.
 /// @group mediaplayer
-$kendo-media-player-overlay-bg: var( --kendo-media-player-overlay-bg, k-color(base-emphasis) ) !default;
+$kendo-media-player-overlay-bg: var( --kendo-media-player-overlay-bg, k-color(subtle) ) !default;
 
 /// The border color of the MediaPlayer button.
 /// @group mediaplayer

package/scss/menu/_layout.scss

@@ -21,16 +21,22 @@
             outline-offset: $kendo-menu-item-focus-outline-offset;
             outline-width: $kendo-menu-item-focus-outline-width;
             outline-style: $kendo-menu-item-focus-outline-style;
+            border-radius: k-border-radius(md);
         }
     }
 
     // Horizontal separator styling
     .k-menu-horizontal {
         > .k-separator {
-            border-left-width: $kendo-menu-separator-width;
+            border-inline-start-width: $kendo-menu-separator-width;
         }
     }
 
+    .k-menu-group {
+        padding: k-spacing(1);
+        gap: k-spacing(0.5);
+    }
+
     // Sub menu group focus styles
     .k-menu-group,
     .k-menu.k-context-menu {
@@ -42,6 +48,7 @@
                     outline-offset: $kendo-menu-item-focus-outline-offset;
                     outline-width: $kendo-menu-item-focus-outline-width;
                     outline-style: $kendo-menu-item-focus-outline-style;
+                    border-radius: k-border-radius(md);
                 }
             }
         }
@@ -50,7 +57,7 @@
     // Sub menu group separator styling
     .k-menu-group {
         .k-separator {
-            border-top-width: $kendo-menu-separator-width;
+            border-block-start-width: $kendo-menu-separator-width;
         }
     }
 

package/scss/menu/_variables.scss

@@ -81,9 +81,9 @@ $kendo-menu-item-focus-bg: var( --kendo-menu-item-focus-bg, #{$kendo-menu-item-b
 
 /// The outline of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-outline: var( --kendo-menu-item-focus-outline, #{k-color(base-emphasis)} ) !default;
+$kendo-menu-item-focus-outline: var( --kendo-menu-item-focus-outline, #{k-color(border-alt)} ) !default;
 $kendo-menu-item-focus-outline-offset: var( --kendo-menu-item-focus-outline-offset, calc( #{k-spacing(0.5)} * -1 ) ) !default;
-$kendo-menu-item-focus-outline-width: var( --kendo-menu-item-focus-outline-width, 1px ) !default;
+$kendo-menu-item-focus-outline-width: var( --kendo-menu-item-focus-outline-width, 2px ) !default;
 $kendo-menu-item-focus-outline-style: var( --kendo-menu-item-focus-outline-style, solid ) !default;
 
 /// The text color of disabled Menu item.
@@ -146,7 +146,7 @@ $kendo-menu-popup-bg: var( --kendo-menu-popup-bg, #{k-color(surface-alt)} ) !def
 $kendo-menu-popup-border: var( --kendo-menu-popup-border, initial ) !default;
 /// The shadow of the Menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, var( --kendo-box-shadow-depth-6, none ) ) !default;
+$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, k-elevation(5) ) !default;
 
 /// The horizontal padding of the Menu item in popup.
 /// @group menu
@@ -227,7 +227,7 @@ $kendo-menu-popup-item-hover-bg: var( --kendo-menu-popup-item-hover-bg, #{$kendo
 
 /// The outline of focused Menu items.
 /// @group menu
-$kendo-menu-popup-item-focus-outline: var( --kendo-menu-popup-item-focus-outline, #{k-color(base-emphasis)} ) !default;
+$kendo-menu-popup-item-focus-outline: var( --kendo-menu-popup-item-focus-outline, #{k-color(border-alt)} ) !default;
 
 /// The text color of active Menu item in popup.
 /// @group menu

package/scss/messagebox/_layout.scss

@@ -3,4 +3,8 @@
 
 @mixin kendo-messagebox--layout() {
     @include kendo-messagebox--layout-base();
+
+    .k-messagebox {
+        border-radius: $kendo-message-box-border-radius;
+    }
 }

package/scss/messagebox/_theme.scss

@@ -7,6 +7,9 @@
     @include kendo-messagebox--theme-base();
 
     .k-messagebox {
+        color: k-color(on-app-surface);
+        background: k-color(app-surface);
+        border-color: color-mix(in srgb, k-color(border) 26%, transparent);
 
         a {
             @include fill(

package/scss/messagebox/_variables.scss

@@ -9,13 +9,16 @@ $kendo-message-box-margin: var( --kendo-message-box-margin, 0 0 k-spacing(3) 0 )
 $kendo-message-box-padding-x: var( --kendo-message-box-padding-x, k-spacing(3) ) !default;
 /// Vertical padding of the message box.
 /// @group messagebox
-$kendo-message-box-padding-y: var( --kendo-message-box-padding-y, k-spacing(2) ) !default;
+$kendo-message-box-padding-y: var( --kendo-message-box-padding-y, k-spacing(2.5) ) !default;
 /// Border width of the message box.
 /// @group messagebox
-$kendo-message-box-border-width: var( --kendo-message-box-border-width, 0 ) !default;
+$kendo-message-box-border-width: var( --kendo-message-box-border-width, 1px ) !default;
 /// Border style of the message box.
 /// @group messagebox
 $kendo-message-box-border-style: var( --kendo-message-box-border-style, solid ) !default;
+/// The radius of the border around the message box.
+/// @group messagebox
+$kendo-message-box-border-radius: k-border-radius(md) !default;
 /// Font family of the message box.
 /// @group messagebox
 $kendo-message-box-font-family: var( --kendo-message-box-font-family, var(--kendo-font-family, inherit) ) !default;
@@ -24,7 +27,7 @@ $kendo-message-box-font-family: var( --kendo-message-box-font-family, var(--kend
 $kendo-message-box-font-size: var( --kendo-message-box-font-size, var(--kendo-font-size-sm, inherit) ) !default;
 /// Line height of the message box.
 /// @group messagebox
-$kendo-message-box-line-height: var( --kendo-message-box-line-height, var(--kendo-line-height-sm, normal) ) !default;
+$kendo-message-box-line-height: var( --kendo-message-box-line-height, var(--kendo-line-height-lg, normal) ) !default;
 
 /// Font style of the message box links.
 /// @group messagebox

package/scss/notification/_functions.scss

@@ -7,9 +7,9 @@
 
     @each $name, $color in $colors {
         $_theme: map.merge(( $name: (
-            color: k-color(on-#{$name}),
+            color: k-color(#{$name}-on-subtle),
             background-color: $color,
-            border: $color,
+            border: k-color(#{$name}-emphasis),
         )), $_theme );
     }
 

package/scss/notification/_theme.scss

@@ -6,8 +6,4 @@
 @mixin kendo-notification--theme() {
     @include kendo-notification--theme-base();
 
-    .k-notification:not(.k-notification-inverse, .k-notification-dark) {
-        color: inherit;
-    }
-
 }

package/scss/notification/_variables.scss

@@ -7,18 +7,18 @@
 $kendo-notification-group-gap: var( --kendo-notification-group-gap, #{k-spacing(2)} ) !default;
 
 $kendo-notification-padding-x: var( --kendo-notification-padding-x, #{k-spacing(3)} ) !default;
-$kendo-notification-padding-y: var( --kendo-notification-padding-y, #{k-spacing(2)} ) !default;
+$kendo-notification-padding-y: var( --kendo-notification-padding-y, calc(#{k-spacing(2)} + 1px) ) !default;
 $kendo-notification-border-width: var( --kendo-notification-border-width, 1px ) !default;
-$kendo-notification-border-radius: var( --kendo-notification-border-radius, #{k-spacing(0.5)} ) !default;
+$kendo-notification-border-radius: var( --kendo-notification-border-radius, #{k-border-radius(md)} ) !default;
 $kendo-notification-font-family: var( --kendo-notification-font-family, var( --kendo-font-family, inherit ) ) !default;
 $kendo-notification-font-size: var( --kendo-notification-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
-$kendo-notification-line-height: var( --kendo-notification-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-notification-line-height: var( --kendo-notification-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 $kendo-notification-actions-padding-x: var( --kendo-notification-actions-padding-x, null ) !default;
 $kendo-notification-actions-padding-y: var( --kendo-notification-actions-padding-y, #{$kendo-notification-actions-padding-x} ) !default;
 
-$kendo-notification-bg: var( --kendo-notification-bg, #{k-color(surface-alt)} ) !default;
+$kendo-notification-bg: var( --kendo-notification-bg, #{k-color(base-subtle)} ) !default;
 $kendo-notification-text: var( --kendo-notification-text, #{k-color(on-app-surface)} ) !default;
-$kendo-notification-border: var( --kendo-notification-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-notification-border: var( --kendo-notification-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 $kendo-notification-box-shadow: var( --kendo-notification-box-shadow, none ) !default;
 
 $kendo-notification-icon-spacing: var( --kendo-notification-icon-spacing, #{k-spacing(2)} ) !default;
@@ -33,9 +33,9 @@ $kendo-notification-theme-colors: (
     "success": k-color(success-subtle),
     "warning": k-color(warning-subtle),
     "error": k-color(error-subtle),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+    "dark": k-color(dark-subtle),
+    "light": k-color(light-subtle),
+    "inverse": if($kendo-is-dark-theme, k-color(light-subtle), k-color(dark-subtle))
 ) !default;
 
 /// The generated theme colors map for the Notification.

package/scss/pager/_layout.scss

@@ -20,6 +20,8 @@
 
     .k-pager-numbers {
         .k-button {
+            border-radius: $kendo-pager-item-border-radius;
+
             .k-button-text {
                 min-width: calc( var( --kendo-line-height ) * 1em );
             }

package/scss/pager/_variables.scss

@@ -60,7 +60,7 @@ $kendo-pager-focus-border: var( --kendo-pager-focus-border, #{k-color(border)} )
 
 /// The border radius of the Pager items.
 /// @group pager
-$kendo-pager-item-border-radius: var( --kendo-pager-item-border-radius, 0 ) !default;
+$kendo-pager-item-border-radius: var( --kendo-pager-item-border-radius, k-border-radius(md) ) !default;
 /// The spacing around the Pager items.
 /// @group pager
 $kendo-pager-item-spacing: var( --kendo-pager-item-spacing, null ) !default;