@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0

package/scss/messagebox/_layout.scss

@@ -1,6 +1,10 @@
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/messagebox/_layout.scss" as *;
 
-
 @mixin kendo-messagebox--layout() {
     @include kendo-messagebox--layout-base();
+
+    .k-messagebox {
+        @include border-radius( k-border-radius(md) );
+    }
 }

package/scss/messagebox/_variables.scss

@@ -3,7 +3,7 @@
 // Message box
 $kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
 $kendo-message-box-padding-x: k-spacing(4) !default;
-$kendo-message-box-padding-y: k-spacing(1) !default;
+$kendo-message-box-padding-y: k-spacing(2) !default;
 $kendo-message-box-border-width: 0 0 0 4px !default;
 
 $kendo-message-box-font-size: var( --kendo-font-size, inherit ) !default;

package/scss/notification/_layout.scss

@@ -1,6 +1,11 @@
 @use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *;
+@use "./variables.scss" as *;
 
 
 @mixin kendo-notification--layout() {
     @include kendo-notification--layout-base();
+
+    .k-notification-actions {
+        margin-block: calc( (#{$kendo-notification-actions-padding-y} / 2) * -1) ;
+    }
 }

package/scss/notification/_theme.scss

@@ -3,4 +3,5 @@
 
 @mixin kendo-notification--theme() {
     @include kendo-notification--theme-base();
+
 }

package/scss/notification/_variables.scss

@@ -18,10 +18,10 @@ $kendo-notification-padding-x: k-spacing(4) !default;
 $kendo-notification-padding-y: k-spacing(3.5) !default;
 /// The width of the border around the Notification.
 /// @group notification
-$kendo-notification-border-width: 0px !default;
+$kendo-notification-border-width: 1px !default;
 /// The border radius of the Notification.
 /// @group notification
-$kendo-notification-border-radius: k-spacing(1) !default;
+$kendo-notification-border-radius: k-border-radius(md) !default;
 /// The font family of the Notification.
 /// @group notification
 $kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
@@ -30,23 +30,31 @@ $kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-notification-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Notification.
 /// @group notification
-$kendo-notification-line-height: math.div( 20, 14 ) !default;
+$kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The horizontal padding of the Notification actions.
+/// @group notification
+$kendo-notification-actions-padding-x: k-spacing(1) !default;
+/// The vertical padding of the Notification actions.
+/// @group notification
+$kendo-notification-actions-padding-y: $kendo-notification-actions-padding-x !default;
+
 /// The background color of the Notification.
 /// @group notification
-$kendo-notification-bg: k-color(surface-alt) !default;
+$kendo-notification-bg: k-color(base) !default;
 /// The text color of the Notification.
 /// @group notification
-$kendo-notification-text: k-color(on-app-surface) !default;
+$kendo-notification-text: k-color(on-base) !default;
 /// The border color of the Notification.
 /// @group notification
-$kendo-notification-border: k-color(border) !default;
+$kendo-notification-border: k-color(base) !default;
 /// The box shadow of the Notification.
 /// @group notification
-$kendo-notification-shadow: $kendo-popup-shadow !default;
+$kendo-notification-shadow: k-elevation(3) !default;
 
 /// The horizontal spacing of the Notification icon.
 /// @group notification
-$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
+$kendo-notification-icon-spacing: k-spacing(2) !default;
 
 /// The theme colors map for the Notification.
 /// @group notification
@@ -75,6 +83,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
     $kendo-notification-font-family: $kendo-notification-font-family,
     $kendo-notification-font-size: $kendo-notification-font-size,
     $kendo-notification-line-height: $kendo-notification-line-height,
+    $kendo-notification-actions-padding-x: $kendo-notification-actions-padding-x,
+    $kendo-notification-actions-padding-y: $kendo-notification-actions-padding-y,
     $kendo-notification-bg: $kendo-notification-bg,
     $kendo-notification-text: $kendo-notification-text,
     $kendo-notification-border: $kendo-notification-border,

package/scss/orgchart/_variables.scss

@@ -24,7 +24,7 @@ $kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-bg: k-color(surface-alt) !default;
+$kendo-orgchart-bg: k-color(app-surface) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
 $kendo-orgchart-text: k-color(on-app-surface) !default;
@@ -102,10 +102,10 @@ $kendo-orgchart-card-padding-y: $kendo-card-padding-y !default;
 $kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-y !default;
 /// The border width of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-border-width: 1px !default;
+$kendo-orgchart-card-border-width: null !default;
 /// The shadow of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-shadow: none !default;
+$kendo-orgchart-card-shadow: null !default;
 /// The shadow of the focused OrgChart Card.
 /// @group orgchart
 $kendo-orgchart-card-focus-shadow: $kendo-orgchart-node-group-focus-shadow !default;

package/scss/pager/_variables.scss

@@ -64,7 +64,7 @@ $kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: k-color(surface-alt) !default;
+$kendo-pager-bg: k-color(surface) !default;
 /// The text color of the Pager.
 /// @group pager
 $kendo-pager-text: k-color(subtle) !default;
@@ -88,7 +88,7 @@ $kendo-pager-section-spacing: $kendo-pager-padding-x !default;
 $kendo-pager-item-border-width: 0px !default;
 /// The border radius of the Pager items.
 /// @group pager
-$kendo-pager-item-border-radius: 5em !default;
+$kendo-pager-item-border-radius: k-border-radius( md ) !default;
 /// The spacing around the Pager items.
 /// @group pager
 $kendo-pager-item-spacing: k-spacing(0) !default;
@@ -116,7 +116,7 @@ $kendo-pager-item-hover-border: null !default;
 $kendo-pager-item-selected-bg: k-color(primary) !default;
 /// The text color of the selected Pager items.
 /// @group pager
-$kendo-pager-item-selected-text: k-color(on-primary) !default;
+$kendo-pager-item-selected-text: k-color(primary-on-surface) !default;
 /// The border color of the selected Pager items.
 /// @group pager
 $kendo-pager-item-selected-border: null !default;
@@ -130,7 +130,7 @@ $kendo-pager-number-border-radius: $kendo-pager-item-border-radius !default;
 $kendo-pager-item-focus-opacity: .12 !default;
 /// The background color of the focused Pager items.
 /// @group pager
-$kendo-pager-item-focus-bg: rgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity) !default;
+$kendo-pager-item-focus-bg: transparent  !default;
 /// The box shadow of the focused Pager items.
 /// @group pager
 $kendo-pager-item-focus-shadow: unset !default;

package/scss/panel/_variables.scss

@@ -26,13 +26,13 @@ $kendo-panel-content-padding-block: k-spacing(1) !default;
 
 /// The text color of the Panel.
 /// @group panel
-$kendo-panel-text: var(--kendo-component-text, #{k-color(on-app-surface)}) !default;
+$kendo-panel-text: k-color(on-app-surface) !default;
 /// The background color of the Panel.
 /// @group panel
-$kendo-panel-bg: var(--kendo-component-bg, #{k-color(surface-alt)}) !default;
+$kendo-panel-bg: k-color(surface) !default;
 /// The color of the border around the Panel.
 /// @group panel
-$kendo-panel-border: var(--kendo-component-border, #{k-color(border)}) !default;
+$kendo-panel-border: k-color(border) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with (
     $kendo-panel-border-radius: $kendo-panel-border-radius,

package/scss/panelbar/_layout.scss

@@ -1,6 +1,34 @@
 @use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *;
-
+@use "./_variables.scss" as *;
 
 @mixin kendo-panelbar--layout() {
     @include kendo-panelbar--layout-base();
+
+    .k-panelbar {
+        .k-panelbar-group > .k-panelbar-item {
+            @for $i from 1 through $kendo-panelbar-item-level-count {
+                &.k-level-#{$i} {
+                    .k-link {
+                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
+                    }
+                }
+            }
+        }
+    }
+
+    .k-rtl .k-panelbar,
+    .k-panelbar.k-rtl,
+    .k-panelbar [dir = "rtl"] {
+        .k-panelbar-group > .k-panelbar-item {
+            // Hierarchy items
+            @for $i from 1 through $kendo-panelbar-item-level-count {
+                &.k-level-#{$i} {
+                    .k-link {
+                        padding-left: $kendo-panelbar-item-padding-x;
+                        padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
+                    }
+                }
+            }
+        }
+    }
 }

package/scss/panelbar/_theme.scss

@@ -1,6 +1,5 @@
 @use "@progress/kendo-theme-core/scss/components/panelbar/_theme.scss" as *;
 
-
 @mixin kendo-panelbar--theme() {
     @include kendo-panelbar--theme-base();
 }

package/scss/panelbar/_variables.scss

@@ -18,7 +18,7 @@ $kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-panelbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-line-height: math.div( 20, 14 ) !default;
+$kendo-panelbar-line-height: var( --kendo-line-height, inherit ) !default;
 /// The width of the border around the PanelBar.
 /// @group panelbar
 $kendo-panelbar-border-width: 1px !default;
@@ -27,24 +27,24 @@ $kendo-panelbar-border-width: 1px !default;
 $kendo-panelbar-border-style: solid !default;
 /// The width of the border around the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-border-width: 1px !default;
+$kendo-panelbar-item-border-width: 0 !default;
 /// The style of the border around the PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-border-style: solid !default;
 
 /// The horizontal padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x: k-spacing(6) !default;
+$kendo-panelbar-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-y: k-spacing(3) !default;
+$kendo-panelbar-header-padding-y: k-spacing(3.5) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x: k-spacing(6) !default;
+$kendo-panelbar-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-y: k-spacing(3) !default;
+$kendo-panelbar-item-padding-y: k-spacing(3.5) !default;
 
 /// The maximum nesting of the PanelBar items.
 /// @group panelbar
@@ -52,7 +52,7 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: k-color(surface-alt) !default;
+$kendo-panelbar-bg: k-color(surface) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-text: k-color(on-app-surface) !default;
@@ -62,10 +62,10 @@ $kendo-panelbar-border: k-color(border) !default;
 
 /// The background color of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-bg: $kendo-panelbar-bg !default;
+$kendo-panelbar-header-bg: null !default;
 /// The text color of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-text: k-color(secondary) !default;
+$kendo-panelbar-header-text: $kendo-panelbar-text !default;
 /// The border color of the PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-border: null !default;
@@ -75,7 +75,7 @@ $kendo-panelbar-header-gradient: null !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: k-color(base-hover) !default;
+$kendo-panelbar-header-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-text: null !default;
@@ -88,7 +88,7 @@ $kendo-panelbar-header-hover-gradient: null !default;
 
 /// The background color of the focused PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-focus-bg: k-color(base-active) !default;
+$kendo-panelbar-header-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of the focused PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-focus-text: null !default;
@@ -100,11 +100,11 @@ $kendo-panelbar-header-focus-border: null !default;
 $kendo-panelbar-header-focus-gradient: null !default;
 /// The shadow of the focused PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-focus-shadow: unset !default;
+$kendo-panelbar-header-focus-shadow: null !default;
 
 /// The background color of the focused and hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-focus-bg: k-color(base-active) !default;
+$kendo-panelbar-header-hover-focus-bg: color-mix(in srgb, currentColor 20%, transparent) !default;
 /// The text color of the focused and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-focus-text: null !default;
@@ -156,7 +156,7 @@ $kendo-panelbar-header-selected-focus-gradient: null !default;
 
 /// The background color of the selected, hovered and focused PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-hover-focus-bg: k-color(secondary-active) !default;
+$kendo-panelbar-header-selected-hover-focus-bg: color-mix(in srgb, k-color(secondary), k-color(secondary-emphasis)) !default;
 /// The text color of the selected, hovered and focused PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-hover-focus-text: null !default;
@@ -170,7 +170,7 @@ $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: k-color(base-hover) !default;
+$kendo-panelbar-item-hover-bg: $kendo-panelbar-header-hover-bg !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-text: null !default;
@@ -183,7 +183,7 @@ $kendo-panelbar-item-hover-gradient: null !default;
 
 /// The background color of the focused PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-focus-bg: k-color(base-active) !default;
+$kendo-panelbar-item-focus-bg: $kendo-panelbar-header-focus-bg !default;
 /// The text color of the focused PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-focus-text: null !default;
@@ -195,11 +195,11 @@ $kendo-panelbar-item-focus-border: null !default;
 $kendo-panelbar-item-focus-gradient: null !default;
 /// The box shadow of the focused PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-focus-shadow: unset !default;
+$kendo-panelbar-item-focus-shadow: null !default;
 
 /// The background color of the focused and hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-focus-bg: k-color(base-active) !default;
+$kendo-panelbar-item-hover-focus-bg: $kendo-panelbar-header-hover-focus-bg !default;
 /// The text color of the focused and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-focus-text: null !default;
@@ -212,10 +212,10 @@ $kendo-panelbar-item-hover-focus-gradient: null !default;
 
 /// The background color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-bg: k-color(secondary) !default;
+$kendo-panelbar-item-selected-bg: $kendo-panelbar-header-selected-bg !default;
 /// The text color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-text: k-color(on-secondary) !default;
+$kendo-panelbar-item-selected-text: null !default;
 /// The border color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-border: null !default;
@@ -225,7 +225,7 @@ $kendo-panelbar-item-selected-gradient: null !default;
 
 /// The background color of the selected and hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-hover-bg: k-color(secondary-hover) !default;
+$kendo-panelbar-item-selected-hover-bg: $kendo-panelbar-header-selected-hover-bg !default;
 /// The text color of the selected and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-hover-text: null !default;
@@ -238,7 +238,7 @@ $kendo-panelbar-item-selected-hover-gradient: null !default;
 
 /// The background color of the selected and focused PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-focus-bg: k-color(secondary-active) !default;
+$kendo-panelbar-item-selected-focus-bg: $kendo-panelbar-header-selected-focus-bg !default;
 /// The text color of the selected and focused PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-focus-text: null !default;
@@ -251,7 +251,7 @@ $kendo-panelbar-item-selected-focus-gradient: null !default;
 
 /// The background color of the selected, hovered and focused PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-hover-focus-bg: k-color(secondary-active) !default;
+$kendo-panelbar-item-selected-hover-focus-bg: $kendo-panelbar-header-selected-hover-focus-bg !default;
 /// The text color of the selected, hovered and focused PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-hover-focus-text: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -22,7 +22,7 @@ $kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-bg: k-color(surface-alt) !default;
+$kendo-pdf-viewer-bg: k-color(surface) !default;
 /// The text color of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-text: k-color(on-app-surface) !default;
@@ -87,7 +87,7 @@ $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 $kendo-pdf-viewer-search-panel-border-radius: k-spacing(1) !default;
 /// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-bg: k-color(surface-alt) !default;
+$kendo-pdf-viewer-search-panel-bg: k-color(surface) !default;
 /// The text color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-text: k-color(on-app-surface) !default;
@@ -103,7 +103,7 @@ $kendo-pdf-viewer-search-panel-matches-spacing: k-spacing(2) !default;
 
 /// The line height of the PDFViewer selection.
 /// @group pdf-viewer
-$kendo-pdf-viewer-selection-line-height: $kendo-line-height-sm !default;
+$kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// The background color of the PDFViewer highlight.
 /// @group pdf-viewer

package/scss/pivotgrid/_theme.scss

@@ -1,5 +1,3 @@
-@use "./_variables.scss" as *;
-@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/pivotgrid/_theme.scss" as *;
 
 
@@ -7,14 +5,4 @@
 
     @include kendo-pivotgrid--theme-base();
 
-    // Hover and Focus state have the same bg color
-    .k-pivotgrid-cell:focus,
-    .k-pivotgrid-cell.k-focus,
-    .k-master-row > .k-pivotgrid-cell:focus,
-    .k-grouping-row > .k-pivotgrid-cell:focus,
-    .k-detail-row > .k-pivotgrid-cell:focus,
-    .k-group-footer > .k-pivotgrid-cell:focus {
-        @include fill ( $bg: $kendo-pivotgrid-hover-bg );
-    }
-
 }

package/scss/pivotgrid/_variables.scss

@@ -67,7 +67,7 @@ $kendo-pivotgrid-alt-border: k-color(border-alt) !default;
 
 /// The background color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-bg: color-mix(in srgb, k-color(app-surface) 2%, transparent) !default;
+$kendo-pivotgrid-headers-bg: k-color(surface) !default;
 /// The text color of the PivotGrid header.
 /// @group pivotgrid
 $kendo-pivotgrid-headers-text: k-color(on-app-surface) !default;
@@ -77,7 +77,7 @@ $kendo-pivotgrid-headers-border: k-color(border) !default;
 
 /// The background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: k-color(base-subtle) !default;
+$kendo-pivotgrid-total-bg: k-color(app-surface) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
 $kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
@@ -87,7 +87,7 @@ $kendo-pivotgrid-total-border: k-color(border) !default;
 
 /// The hover background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-bg: k-color(base-hover) !default;
+$kendo-pivotgrid-hover-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent) !default;
 /// The hover text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-hover-text: null !default;
@@ -97,7 +97,7 @@ $kendo-pivotgrid-hover-border: null !default;
 
 /// The selected background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color(base-active) 25%, transparent) !default;
+$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color(on-app-surface) 25%, transparent) !default;
 /// The selected text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-selected-text: null !default;

package/scss/popover/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The width of the border around the Popover.
 /// @group popover
-$kendo-popover-border-width: 1px !default;
+$kendo-popover-border-width: 0 !default;
 /// The style of the border around the Popover.
 /// @group popover
 $kendo-popover-border-style: solid !default;
@@ -27,13 +27,13 @@ $kendo-popover-line-height: $kendo-card-line-height !default;
 $kendo-popover-text: k-color(on-app-surface) !default;
 /// The background color of the Popover.
 /// @group popover
-$kendo-popover-bg: k-color(surface-alt) !default;
+$kendo-popover-bg: k-color(surface) !default;
 /// The border color of the Popover.
 /// @group popover
 $kendo-popover-border: k-color(border) !default;
 /// The box shadow of the Popover.
 /// @group popover
-$kendo-popover-shadow: $kendo-card-shadow !default;
+$kendo-popover-shadow: k-elevation(2) !default;
 
 /// The horizontal padding of the Popover header.
 /// @group popover

package/scss/popup/_variables.scss

@@ -11,7 +11,7 @@ $kendo-popup-padding-y: null !default;
 $kendo-popup-border-width: 0px !default;
 /// Border radius of the popup.
 /// @group popup
-$kendo-popup-border-radius: null !default;
+$kendo-popup-border-radius: k-border-radius(md) !default;
 
 /// Font size of the popup.
 /// @group popup
@@ -22,14 +22,14 @@ $kendo-popup-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Horizontal padding of the popup content.
 /// @group popup
-$kendo-popup-content-padding-x: k-spacing(2) !default;
+$kendo-popup-content-padding-x: k-spacing(4) !default;
 /// Vertical padding of the popup content.
 /// @group popup
-$kendo-popup-content-padding-y: k-spacing(2) !default;
+$kendo-popup-content-padding-y: k-spacing(4) !default;
 
 /// Background color of the popup.
 /// @group popup
-$kendo-popup-bg: k-color(surface-alt) !default;
+$kendo-popup-bg: k-color(surface) !default;
 /// Text color of the popup.
 /// @group popup
 $kendo-popup-text: k-color(on-app-surface) !default;
@@ -38,7 +38,7 @@ $kendo-popup-text: k-color(on-app-surface) !default;
 $kendo-popup-border: k-color(border) !default;
 /// Box shadow of the popup.
 /// @group popup
-$kendo-popup-shadow: k-elevation(4) !default;
+$kendo-popup-shadow: k-elevation(2) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with (
     $kendo-popup-padding-x: $kendo-popup-padding-x,

package/scss/progressbar/_layout.scss

@@ -6,15 +6,22 @@
 
     @include kendo-progressbar--layout-base();
 
-    $kendo-progressbar-status-font-size: 11px !default;
     $kendo-progressbar-indeterminate-animation-timing: 2s infinite !default;
 
     .k-progressbar {
-        @include border-radius( 0 );
+        @include border-radius( k-border-radius(full) );
         overflow: visible;
 
-        .k-progress-status-wrap {
-            font-size: $kendo-progressbar-status-font-size;
+        .k-progressbar-value {
+            border-radius: inherit;
+        }
+
+        > .k-progressbar-chunks {
+            gap: k-spacing( 1.5 );
+        }
+
+        .k-progressbar-chunk {
+            @include border-radius( k-border-radius(full) );
         }
     }
 

package/scss/progressbar/_variables.scss

@@ -43,7 +43,7 @@ $kendo-progressbar-gradient: null !default;
 $kendo-progressbar-value-bg: k-color(primary) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: k-color(on-primary) !default;
+$kendo-progressbar-value-text: k-color(on-app-surface) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-border: unset !default;
@@ -66,7 +66,7 @@ $kendo-progressbar-indeterminate-gradient: null !default;
 
 /// The border color of the chunk ProgressBar.
 /// @group progressbar
-$kendo-progressbar-chunk-border: k-color(surface-alt) !default;
+$kendo-progressbar-chunk-border: k-color(surface) !default;
 
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.

package/scss/prompt/_layout.scss

@@ -3,4 +3,8 @@
 
 @mixin kendo-prompt--layout() {
     @include kendo-prompt--layout-base();
+
+    .k-prompt-suggestion {
+        border: 0;
+    }
 }

package/scss/prompt/_variables.scss

@@ -7,7 +7,7 @@
 $kendo-prompt-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: k-color(surface-alt) !default;
+$kendo-prompt-bg: k-color(surface) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
 $kendo-prompt-border: k-color(border) !default;
@@ -17,20 +17,20 @@ $kendo-prompt-border: k-color(border) !default;
 $kendo-prompt-header-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: k-color(surface-alt) !default;
+$kendo-prompt-header-bg: k-color(surface) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
 $kendo-prompt-header-border: k-color(border) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: k-spacing(4) !default;
+$kendo-prompt-content-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: k-spacing(4) !default;
+$kendo-prompt-content-padding-x: k-spacing(6) !default;
 /// The spacing between the items of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: k-spacing(4) !default;
+$kendo-prompt-content-spacing: k-spacing(2) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
 $kendo-prompt-content-text: k-color(on-app-surface) !default;
@@ -50,16 +50,16 @@ $kendo-prompt-expander-spacing: k-spacing(2) !default;
 $kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
+$kendo-prompt-suggestion-padding-x: k-spacing(3) !default;
 /// The border radius of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
+$kendo-prompt-suggestion-border-radius: k-border-radius(xl) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: k-color(app-surface) !default;
+$kendo-prompt-suggestion-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-border: k-color(border) !default;