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

package/scss/notification/_variables.scss

@@ -31,15 +31,21 @@ $kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the Notification.
 /// @group notification
 $kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
+/// The horizontal padding of the Notification actions.
+/// @group notification
+$kendo-notification-actions-padding-x: null !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: $kendo-component-bg !default;
+$kendo-notification-bg: k-color(surface-alt) !default;
 /// The text color of the Notification.
 /// @group notification
-$kendo-notification-text: $kendo-component-text !default;
+$kendo-notification-text: k-color(on-app-surface) !default;
 /// The border color of the Notification.
 /// @group notification
-$kendo-notification-border: $kendo-component-border !default;
+$kendo-notification-border: k-color(border) !default;
 /// The box shadow of the Notification.
 /// @group notification
 $kendo-notification-shadow: $kendo-popup-shadow !default;
@@ -50,7 +56,18 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: $kendo-theme-colors !default;
+$kendo-notification-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 /// The generated theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;
@@ -65,6 +82,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,13 +24,13 @@ $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: $kendo-component-bg !default;
+$kendo-orgchart-bg: k-color(surface-alt) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-text: $kendo-component-text !default;
+$kendo-orgchart-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-border: $kendo-component-border !default;
+$kendo-orgchart-border: k-color(border) !default;
 
 /// The spacing of the OrgChart node.
 /// @group orgchart
@@ -56,13 +56,13 @@ $kendo-orgchart-node-group-border-width: 1px !default;
 $kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
 /// The background color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-bg: $kendo-base-bg !default;
+$kendo-orgchart-node-group-bg: k-color(surface) !default;
 /// The text color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-text: $kendo-base-text !default;
+$kendo-orgchart-node-group-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border: $kendo-base-border !default;
+$kendo-orgchart-node-group-border: k-color(border) !default;
 
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
@@ -91,7 +91,7 @@ $kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit )
 
 /// The line height of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-text: $kendo-subtle-text !default;
+$kendo-orgchart-node-group-subtitle-text: k-color(subtle) !default;
 
 /// The width of the OrgChart Card.
 /// @group orgchart
@@ -145,7 +145,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
 $kendo-orgchart-line-size: 1px !default;
 /// The fill color of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-fill: $kendo-base-border !default;
+$kendo-orgchart-line-fill: k-color(border) !default;
 
 /// The height of the OrgChart connecting line.
 /// @group orgchart

package/scss/overlay/_variables.scss

@@ -1,6 +1,17 @@
 @use "../core/_index.scss" as *;
 
-$kendo-overlay-theme-colors: $kendo-theme-colors !default;
+$kendo-overlay-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
 
 $kendo-overlay-bg: $kendo-color-black !default;
 $kendo-overlay-opacity: .5 !default;

package/scss/pager/_variables.scss

@@ -63,13 +63,13 @@ $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: $kendo-component-header-bg !default;
+$kendo-pager-bg: k-color(surface) !default;
 /// The text color of the Pager.
 /// @group pager
-$kendo-pager-text: $kendo-component-header-text !default;
+$kendo-pager-text: k-color(on-app-surface) !default;
 /// The border color of the Pager.
 /// @group pager
-$kendo-pager-border: $kendo-component-border !default;
+$kendo-pager-border: k-color(border) !default;
 
 /// The background color of the focused Pager.
 /// @group pager

package/scss/panel/_variables.scss

@@ -28,13 +28,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, #{$kendo-component-text}) !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, #{$kendo-component-bg}) !default;
+$kendo-panel-bg: k-color(surface-alt) !default;
 /// The color of the border around the Panel.
 /// @group panel
-$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default;
+$kendo-panel-border: k-color(border) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with (

package/scss/panelbar/_variables.scss

@@ -52,36 +52,36 @@ $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-alt) !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-component-header-bg !default;
+$kendo-panelbar-header-bg: k-color(surface) !default;
 /// The text color of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-text: $kendo-component-header-text !default;
+$kendo-panelbar-header-text: k-color(on-app-surface) !default;
 /// The border color of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-border: $kendo-component-header-border !default;
+$kendo-panelbar-header-border: k-color(border) !default;
 /// The gradient of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-gradient: $kendo-component-header-gradient !default;
+$kendo-panelbar-header-gradient: null !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: $kendo-hover-bg !default;
+$kendo-panelbar-header-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-text: $kendo-hover-text !default;
+$kendo-panelbar-header-hover-text: k-color(on-app-surface) !default;
 /// The border color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-border: $kendo-hover-border !default;
+$kendo-panelbar-header-hover-border: k-color(border) !default;
 /// The gradient of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-gradient: null !default;
@@ -117,20 +117,20 @@ $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(primary) !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-primary) !default;
 /// The border color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-border: $kendo-selected-border !default;
+$kendo-panelbar-header-selected-border: k-color(primary) !default;
 /// The gradient of the selected PanelBar header.
 /// @group panelbar
 $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( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
+$kendo-panelbar-header-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-hover-text: null !default;
@@ -169,7 +169,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-subtle-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
+$kendo-panelbar-item-hover-bg: k-color(base-subtle-hover) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-text: null !default;
@@ -211,10 +211,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: k-color(primary) !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: k-color(on-primary) !default;
 /// The border color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-border: null !default;
@@ -224,7 +224,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( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
+$kendo-panelbar-item-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-hover-text: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -20,13 +20,13 @@ $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-alt) !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
@@ -43,7 +43,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;
@@ -60,10 +60,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;
@@ -85,13 +85,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-alt) !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;
@@ -105,7 +105,7 @@ $kendo-pdf-viewer-selection-line-height: $kendo-line-height-sm !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;
@@ -123,13 +123,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/_variables.scss

@@ -50,41 +50,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: $kendo-component-header-bg !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 ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
+$kendo-pivotgrid-total-bg: k-color(base) !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-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
+$kendo-pivotgrid-hover-bg: k-color(base-subtle-hover) !default;
 /// The hover text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-hover-text: null !default;
@@ -94,7 +94,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( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
+$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 /// The selected text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-selected-text: null !default;
@@ -153,20 +153,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;
@@ -250,8 +250,8 @@ $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;
 $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
 $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 
-$kendo-pivotgrid-container-bg: $kendo-component-bg !default;
-$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 2 )) !default;
+$kendo-pivotgrid-container-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-row-headers-bg: k-color(base) !default;
 
 $kendo-pivotgrid-button-bg: null !default;
 $kendo-pivotgrid-button-text: null !default;

package/scss/popover/_variables.scss

@@ -25,13 +25,13 @@ $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-alt) !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-popup-shadow !default;

package/scss/popup/_variables.scss

@@ -29,13 +29,13 @@ $kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup
-$kendo-popup-bg: $kendo-component-bg !default;
+$kendo-popup-bg: k-color(surface-alt) !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;

package/scss/progressbar/_variables.scss

@@ -27,26 +27,26 @@ $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( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
+$kendo-progressbar-bg: k-color(base) !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: $kendo-component-border !default;
+$kendo-progressbar-border: k-color(border) !default;
 /// The background gradient of the ProgressBar.
 /// @group progressbar
 $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: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default;
+$kendo-progressbar-value-text: k-color(on-primary) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default;
+$kendo-progressbar-value-border: k-color(primary-active) !default;
 /// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !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-body-bg !default;
+$kendo-progressbar-chunk-border: k-color(app-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/_variables.scss

@@ -4,23 +4,23 @@
 
 /// The text color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-text: $kendo-component-text !default;
+$kendo-prompt-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: $kendo-component-bg !default;
+$kendo-prompt-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-border: $kendo-component-border !default;
+$kendo-prompt-border: k-color(border) !default;
 
 /// The text color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-text: $kendo-component-header-text !default;
+$kendo-prompt-header-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: $kendo-component-bg !default;
+$kendo-prompt-header-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-border: $kendo-component-header-border !default;
+$kendo-prompt-header-border: k-color(border) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
@@ -33,13 +33,13 @@ $kendo-prompt-content-padding-x: k-spacing(4) !default;
 $kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-text: $kendo-component-header-text !default;
+$kendo-prompt-content-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-bg: $kendo-component-header-bg !default;
+$kendo-prompt-content-bg: k-color(surface) !default;
 /// The text border of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-border: $kendo-component-header-border !default;
+$kendo-prompt-content-border: k-color(border) !default;
 
 /// The spacing between the items of the AIPrompt content expander.
 /// @group prompt
@@ -56,13 +56,13 @@ $kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-text: $kendo-component-text !default;
+$kendo-prompt-suggestion-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: $kendo-body-bg !default;
+$kendo-prompt-suggestion-bg: k-color(app-surface) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border: $kendo-component-border !default;
+$kendo-prompt-suggestion-border: k-color(border) !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-shadow: k-elevation(1) !default;

package/scss/rating/_variables.scss

@@ -37,16 +37,16 @@ $kendo-rating-label-line-height: $kendo-line-height-lg !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: $kendo-component-text !default;
+$kendo-rating-icon-text: k-color(on-app-surface) !default;
 /// The text color of the selected Rating icon.
 /// @group rating
-$kendo-rating-icon-selected-text: $kendo-selected-bg !default;
+$kendo-rating-icon-selected-text: k-color(primary) !default;
 /// The text color of the hovered Rating icon.
 /// @group rating
-$kendo-rating-icon-hover-text: $kendo-selected-bg !default;
+$kendo-rating-icon-hover-text: k-color(primary) !default;
 /// The text color of the focused Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-text: $kendo-selected-bg !default;
+$kendo-rating-icon-focus-text: k-color(primary) !default;
 
 /// The shadow of the focused Rating icon.
 /// @group rating