@progress/kendo-theme-material 10.6.0 → 11.0.0-dev.1

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,20 +52,20 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: $kendo-component-bg !default;
+$kendo-panelbar-bg: k-color(surface) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-text: $kendo-component-text !default;
+$kendo-panelbar-text: k-color(on-app-surface) !default;
 /// The border color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-border: $kendo-component-border !default;
+$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: $kendo-link-text !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: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !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: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 )) !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: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 )) !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;
@@ -117,10 +117,10 @@ $kendo-panelbar-header-hover-focus-gradient: null !default;
 
 /// The background color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-bg: $kendo-selected-bg !default;
+$kendo-panelbar-header-selected-bg: k-color(secondary) !default;
 /// The text color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-text: $kendo-selected-text !default;
+$kendo-panelbar-header-selected-text: k-color(on-secondary) !default;
 /// The border color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-border: null !default;
@@ -130,7 +130,7 @@ $kendo-panelbar-header-selected-gradient: null !default;
 
 /// The background color of the selected and hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-header-selected-bg, .95)) !default;
+$kendo-panelbar-header-selected-hover-bg: k-color(secondary-hover) !default;
 /// The text color of the selected and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-hover-text: null !default;
@@ -143,7 +143,7 @@ $kendo-panelbar-header-selected-hover-gradient: null !default;
 
 /// The background color of the selected and focused PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3)) !default;
+$kendo-panelbar-header-selected-focus-bg: k-color(secondary-active) !default;
 /// The text color of the selected and focused PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-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: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3.95)) !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: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !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: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 )) !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: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 )) !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: $kendo-selected-bg !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: $kendo-selected-text !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: if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-item-selected-bg, .95)) !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: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3)) !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: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3.95)) !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,17 +22,17 @@ $kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-bg: $kendo-component-bg !default;
+$kendo-pdf-viewer-bg: k-color(surface) !default;
 /// The text color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-text: $kendo-component-text !default;
+$kendo-pdf-viewer-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-border: $kendo-component-border !default;
+$kendo-pdf-viewer-border: k-color(border) !default;
 
 /// The background color of the PDFViewer Toolbar.
 /// @group pdf-viewer
-$kendo-pdf-viewer-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 )) !default;
+$kendo-pdf-viewer-toolbar-bg: k-color(surface) !default;
 /// The text color of the PDFViewer Toolbar.
 /// @group pdf-viewer
 $kendo-pdf-viewer-toolbar-text: null !default;
@@ -45,7 +45,7 @@ $kendo-pdf-viewer-toolbar-gradient: null !default;
 
 /// The background color of the PDFViewer canvas.
 /// @group pdf-viewer
-$kendo-pdf-viewer-canvas-bg: $kendo-app-bg !default;
+$kendo-pdf-viewer-canvas-bg: k-color(app-surface) !default;
 /// The text color of the PDFViewer canvas.
 /// @group pdf-viewer
 $kendo-pdf-viewer-canvas-text: null !default;
@@ -62,10 +62,10 @@ $kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;
 $kendo-pdf-viewer-page-bg: white !default;
 /// The text color of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-text: $kendo-component-text !default;
+$kendo-pdf-viewer-page-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-border: $kendo-component-border !default;
+$kendo-pdf-viewer-page-border: k-color(border) !default;
 /// The shadow of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-shadow: k-elevation(3) !default;
@@ -87,13 +87,13 @@ $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: $kendo-component-bg !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: $kendo-component-text !default;
+$kendo-pdf-viewer-search-panel-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border: $kendo-component-border !default;
+$kendo-pdf-viewer-search-panel-border: k-color(border) !default;
 /// The shadow of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-shadow: $kendo-window-shadow !default;
@@ -103,11 +103,11 @@ $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
-$kendo-pdf-viewer-search-highlight-bg: $kendo-body-text !default;
+$kendo-pdf-viewer-search-highlight-bg: k-color(on-app-surface) !default;
 /// The background color of the PDFViewer highlight mark.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
@@ -125,13 +125,13 @@ $kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
 
 /// The border color of the PDFViewer selected highlight annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+$kendo-pdf-viewer-highlight-annotation-border: k-color(primary) !default;
 /// The background color of the PDFViewer hover highlight annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+$kendo-pdf-viewer-highlight-annotation-hover-border: k-color(primary-hover) !default;
 /// The border color of the PDFViewer selected free text annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+$kendo-pdf-viewer-free-text-annotation-border: k-color(primary) !default;
 /// The placeholder text color of the PDFViewer free text annotation.
 /// @group pdf-viewer
 $kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;

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

@@ -53,41 +53,41 @@ $kendo-pivotgrid-cell-border-width: 1px !default;
 
 /// The background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-bg: $kendo-component-bg !default;
+$kendo-pivotgrid-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-text: $kendo-component-text !default;
+$kendo-pivotgrid-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-border: $kendo-component-border !default;
+$kendo-pivotgrid-border: k-color(border) !default;
 
 /// The alt border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
+$kendo-pivotgrid-alt-border: k-color(border-alt) !default;
 
 /// The background color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 )) !default;
+$kendo-pivotgrid-headers-bg: k-color(surface) !default;
 /// The text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-headers-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
+$kendo-pivotgrid-headers-border: k-color(border) !default;
 
 /// The background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
+$kendo-pivotgrid-total-bg: k-color(app-surface) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-border: $kendo-component-header-border !default;
+$kendo-pivotgrid-total-border: k-color(border) !default;
 
 /// The hover background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), color.adjust( $kendo-pivotgrid-bg, $lightness: - 7% )) !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: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !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;
@@ -156,20 +156,20 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
 
 /// The background color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-bg: $kendo-component-bg !default;
+$kendo-pivotgrid-configurator-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-text: $kendo-component-text !default;
+$kendo-pivotgrid-configurator-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-border: $kendo-component-border !default;
+$kendo-pivotgrid-configurator-border: k-color(border) !default;
 
 /// The background color of the PivotGrid configurator header.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-header-bg: null !default;
 /// The text color of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-configurator-header-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid configurator header.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-header-border: null !default;
@@ -219,20 +219,20 @@ $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 /// The background color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;
+$kendo-pivotgrid-calculated-field-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-text: $kendo-component-text !default;
+$kendo-pivotgrid-calculated-field-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border: $kendo-component-border !default;
+$kendo-pivotgrid-calculated-field-border: k-color(border) !default;
 
 /// The background color of the PivotGrid calculated field header.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-header-bg: null !default;
 /// The text color of the PivotGrid calculated field header.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default;
+$kendo-pivotgrid-calculated-field-header-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid calculated field header.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-header-border: null !default;
@@ -252,11 +252,11 @@ $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 $kendo-pivotgrid-container-bg: $kendo-grid-header-bg !default;
 $kendo-pivotgrid-row-headers-bg: unset !default;
 
-$kendo-pivotgrid-button-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade($kendo-button-bg, 1)) !default;
+$kendo-pivotgrid-button-bg: k-color(base-subtle) !default;
 $kendo-pivotgrid-button-text: $kendo-button-text !default;
-$kendo-pivotgrid-button-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade($kendo-button-bg, 2)) !default;
+$kendo-pivotgrid-button-hover-bg: k-color(base-subtle-hover) !default;
 $kendo-pivotgrid-button-hover-text: $kendo-button-text !default;
-$kendo-pivotgrid-button-active-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-shade($kendo-button-bg, 2)) !default;
+$kendo-pivotgrid-button-active-bg: k-color(base-subtle-active) !default;
 $kendo-pivotgrid-button-active-text: $kendo-button-text !default;
 
 $kendo-pivotgrid-remove-bg: $kendo-pivotgrid-button-text !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;
@@ -24,16 +24,16 @@ $kendo-popover-line-height: $kendo-card-line-height !default;
 
 /// The text color of the Popover.
 /// @group popover
-$kendo-popover-text: $kendo-component-text !default;
+$kendo-popover-text: k-color(on-app-surface) !default;
 /// The background color of the Popover.
 /// @group popover
-$kendo-popover-bg: $kendo-component-bg !default;
+$kendo-popover-bg: k-color(surface) !default;
 /// The border color of the Popover.
 /// @group popover
-$kendo-popover-border: $kendo-component-border !default;
+$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,23 +22,23 @@ $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: $kendo-component-bg !default;
+$kendo-popup-bg: k-color(surface) !default;
 /// Text color of the popup.
 /// @group popup
-$kendo-popup-text: $kendo-component-text !default;
+$kendo-popup-text: k-color(on-app-surface) !default;
 /// Border color of the popup.
 /// @group popup
-$kendo-popup-border: $kendo-component-border !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

@@ -27,10 +27,10 @@ $kendo-progressbar-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) !default;
+$kendo-progressbar-bg: k-color(primary-subtle) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: $kendo-component-text !default;
+$kendo-progressbar-text: k-color(on-app-surface) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: unset !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
 
 /// The progress background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-bg: $kendo-color-primary !default;
+$kendo-progressbar-value-bg: k-color(primary) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: $kendo-color-primary-contrast !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,12 +66,12 @@ $kendo-progressbar-indeterminate-gradient: null !default;
 
 /// The border color of the chunk ProgressBar.
 /// @group progressbar
-$kendo-progressbar-chunk-border: $kendo-component-bg !default;
+$kendo-progressbar-chunk-border: k-color(surface) !default;
 
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
+$kendo-circular-progressbar-arc-stroke: k-color(primary) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/prompt/_layout.scss

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