@progress/kendo-theme-bootstrap 12.1.0-dev.2 → 12.1.0-dev.3

package/scss/dock-manager/_variables.scss

@@ -14,7 +14,7 @@ $kendo-dock-manager-border: k-color(border) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: k-spacing(2) !default;
+$kendo-dock-manager-pane-header-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the pane header in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-pane-header-padding-x: k-spacing(4) !default;
@@ -56,7 +56,7 @@ $kendo-dock-manager-pane-content-padding-y: k-spacing(2) !default;
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-y: k-spacing(3.5) !default;
+$kendo-dock-manager-tabbed-pane-padding-y: k-spacing(5) !default;
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-pane-content-padding-y !default;
@@ -66,7 +66,7 @@ $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-pane-content-padd
 $kendo-dock-manager-unpinned-container-width: 300px !default;
 /// The background-color of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-bg: k-color(app-surface) !default;
+$kendo-dock-manager-unpinned-container-bg: k-color(surface-alt) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
@@ -76,10 +76,10 @@ $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.0
 $kendo-dock-indicator-padding: k-spacing(1.5) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: k-color(app-surface) !default;
+$kendo-dock-indicator-bg: k-color(surface-alt) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: k-color(primary) !default;
+$kendo-dock-indicator-text: k-color(primary-on-surface) !default;
 /// The outline width of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-outline-width: 1px !default;
@@ -91,14 +91,14 @@ $kendo-dock-indicator-outline-style: solid !default;
 $kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
 /// The box shadow of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;
+$kendo-dock-indicator-shadow: k-elevation(5) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: k-color(primary) !default;
+$kendo-dock-indicator-hover-bg: k-color(primary-on-surface) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+$kendo-dock-indicator-hover-text: k-color(on-primary) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager
@@ -114,7 +114,7 @@ $kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
 $kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary) 16%, transparent) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: k-color(primary) !default;
+$kendo-dock-manager-dock-preview-border: k-color(primary-on-surface) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with (

package/scss/drawer/_variables.scss

@@ -6,7 +6,7 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: k-color(app-surface) !default;
+$kendo-drawer-bg: k-color(surface-alt) !default;
 /// The text color of the Drawer.
 /// @group drawer
 $kendo-drawer-text: k-color(on-app-surface) !default;
@@ -39,16 +39,16 @@ $kendo-drawer-content-padding-y: null !default;
 $kendo-drawer-scrollbar-width: 7px !default;
 /// The color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+$kendo-drawer-scrollbar-color: k-color(inverse-subtle) !default;
 /// The background color of the Drawer scrollbar thumb.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: #dedede !default;
+$kendo-drawer-scrollbar-bg: color-mix(in srgb, k-color(inverse-subtle), k-color(on-inverse)) !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
 /// The hover color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
+$kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-color !default;
 
 /// The horizontal padding of the Drawer items.
 /// @group drawer
@@ -61,7 +61,7 @@ $kendo-drawer-items-padding-y: 0 !default;
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: k-spacing(2) !default;
+$kendo-drawer-item-padding-y: k-spacing(3) !default;
 /// The spacing between the items in the Drawer item.
 /// @group drawer
 $kendo-drawer-item-spacing: $kendo-drawer-item-padding-x !default;
@@ -70,7 +70,7 @@ $kendo-drawer-item-spacing: $kendo-drawer-item-padding-x !default;
 $kendo-drawer-item-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-drawer-item-line-height: var( --kendo-line-height, normal ) !default;
 /// The font weight of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-weight: var( --kendo-font-weight, normal ) !default;
@@ -90,7 +90,7 @@ $kendo-drawer-item-border-radius: null !default;
 $kendo-drawer-icon-padding-x: k-spacing(0) !default;
 /// The vertical padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-y: k-spacing(2) !default;
+$kendo-drawer-icon-padding-y: k-spacing(1) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer
@@ -108,7 +108,7 @@ $kendo-drawer-hover-text: k-color(on-app-surface) !default;
 $kendo-drawer-focus-bg: k-color(base-subtle-hover) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-focus-shadow: inset 0 0 0 2px rgba( black, .15 ) !default;
+$kendo-drawer-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(inverse) 15%, transparent) !default;
 
 /// The background color of the selected Drawer item.
 /// @group drawer

package/scss/editor/_variables.scss

@@ -34,7 +34,7 @@ $kendo-editor-selected-bg: k-color(primary) !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: k-color(primary-subtle) !default;
+$kendo-editor-highlighted-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor

package/scss/expansion-panel/_variables.scss

@@ -24,7 +24,7 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-expander-text: k-color(on-app-surface) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: k-color(app-surface) !default;
+$kendo-expander-bg: k-color(surface-alt) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
 $kendo-expander-border: k-color(border) !default;
@@ -52,7 +52,7 @@ $kendo-expander-header-border: null !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: rgba( black, .04 ) !default;
+$kendo-expander-header-hover-bg: $kendo-list-item-hover-bg !default;
 /// The background color of the focused ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-focus-bg: null !default;

package/scss/fab/_variables.scss

@@ -20,27 +20,27 @@ $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: calc( #{k-spacing(4)} / 2 ) !default;
+$kendo-fab-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: calc( #{k-spacing(4)} * 1.5 ) !default;
+$kendo-fab-lg-padding-x: k-spacing(6) !default;
 
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: calc( #{k-spacing(4)} / 2 ) !default;
+$kendo-fab-sm-padding-y: k-spacing(2) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-y: k-spacing(4) !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: calc( #{k-spacing(4)} * 1.5 ) !default;
+$kendo-fab-lg-padding-y: k-spacing(6) !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: k-spacing(1) !default;
+$kendo-fab-icon-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
@@ -60,19 +60,19 @@ $kendo-fab-items-padding-y: k-spacing(4) !default;
 $kendo-fab-item-text-padding-x: k-spacing(1) !default;
 /// The vertical padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+$kendo-fab-item-text-padding-y: k-spacing(1) !default;
 /// The width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: 1px !default;
 /// The border radius of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-border-radius: 4px !default;
+$kendo-fab-item-text-border-radius: k-border-radius(md) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The line height of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-line-height: 14px !default;
+$kendo-fab-item-text-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
@@ -124,7 +124,7 @@ $kendo-fab-sizes: (
 $kendo-fab-shadow: k-elevation(5) !default;
 /// The shadow of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: k-elevation(5) !default;
+$kendo-fab-disabled-shadow: null !default;
 /// The shadow of the active FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;
@@ -140,7 +140,7 @@ $kendo-fab-outline-width: 3px !default;
 $kendo-fab-item-text: k-color(on-app-surface) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: k-color(app-surface) !default;
+$kendo-fab-item-bg: k-color(surface-alt) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-border: k-color(border) !default;

package/scss/filemanager/_variables.scss

@@ -23,7 +23,7 @@ $kendo-file-manager-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-bg: k-color(app-surface) !default;
+$kendo-file-manager-bg: k-color(surface-alt) !default;
 /// The text color of the FileManager.
 /// @group file-manager
 $kendo-file-manager-text: k-color(on-app-surface) !default;

package/scss/filter/_variables.scss

@@ -25,7 +25,7 @@ $kendo-filter-operator-dropdown-width: 15em !default;
 $kendo-filter-preview-field-text: k-color(primary) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: k-color(subtle)  !default;
+$kendo-filter-preview-operator-text: k-color(on-app-surface)  !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter

package/scss/forms/_variables.scss

@@ -46,7 +46,7 @@ $kendo-form-legend-width: 100% !default;
 $kendo-form-legend-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The text capitalization of the Form legend.
 /// @group form
-$kendo-form-legend-text-transform: uppercase !default;
+$kendo-form-legend-text-transform: none !default;
 
 /// The bottom margin of the Form label.
 /// @group form

package/scss/gantt/_variables.scss

@@ -21,7 +21,7 @@ $kendo-gantt-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: k-color(app-surface) !default;
+$kendo-gantt-bg: k-color(surface-alt) !default;
 /// The text color of the Gantt.
 /// @group gantt
 $kendo-gantt-text: k-color(on-app-surface) !default;
@@ -93,10 +93,10 @@ $kendo-gantt-milestone-selected-border: k-color(primary) !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: k-color(subtle) !default;
+$kendo-gantt-summary-bg: k-color(inverse-subtle) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: $kendo-gantt-text !default;
+$kendo-gantt-summary-progress-bg: k-color(inverse) !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
 $kendo-gantt-summary-selected-bg: k-color(primary-subtle-active) !default;
@@ -228,7 +228,7 @@ $kendo-gantt-validation-tooltip-width: 200px !default;
 $kendo-gantt-validation-tooltip-label-width: 50px !default;
 /// The border color of the Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-border: #656565 !default;
+$kendo-gantt-validation-tooltip-border: k-color(base) !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
 $kendo-gantt-validation-tooltip-valid-border: k-color(success) !default;

package/scss/imageeditor/_variables.scss

@@ -25,15 +25,15 @@ $kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 $kendo-image-editor-resize-handle-size: 15px !default;
 
-$kendo-image-editor-bg: k-color(app-surface) !default;
+$kendo-image-editor-bg: k-color(surface-alt) !default;
 $kendo-image-editor-text: k-color(on-app-surface) !default;
 $kendo-image-editor-border: k-color(border) !default;
 
-$kendo-image-editor-content-bg: #c6c6c6 !default;
+$kendo-image-editor-content-bg: k-color(surface) !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 
-$kendo-image-editor-action-pane-bg: k-color(app-surface) !default;
+$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
 $kendo-image-editor-action-pane-text: null !default;
 $kendo-image-editor-action-pane-border: null !default;
 
@@ -41,7 +41,7 @@ $kendo-image-editor-crop-bg: null !default;
 $kendo-image-editor-crop-text: null !default;
 $kendo-image-editor-crop-border: white !default;
 
-$kendo-image-editor-crop-overlay-bg: rgba( black, .3 ) !default;
+$kendo-image-editor-crop-overlay-bg: color-mix(in srgb, k-color(inverse) 30%, transparent) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with (

package/scss/input/_variables.scss

@@ -105,7 +105,7 @@ $kendo-input-sizes: (
 
 /// The background color of the Input components.
 /// @group input
-$kendo-input-bg: k-color(app-surface) !default;
+$kendo-input-bg: k-color(surface-alt) !default;
 /// The text color of the Input components.
 /// @group input
 $kendo-input-text: k-color(on-app-surface) !default;
@@ -124,7 +124,7 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: $kendo-input-border !default;
+$kendo-input-hover-border: k-color(border-alt) !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
@@ -275,7 +275,7 @@ $kendo-input-suffix-bg: k-color(surface) !default;
 
 /// The border color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-border: k-color(error) !default;
+$kendo-input-invalid-border: k-color(error-on-surface) !default;
 /// The shadow of the invalid Input components.
 /// @group input
 $kendo-input-invalid-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(error) 25%, transparent) !default;

package/scss/list/_variables.scss

@@ -130,9 +130,9 @@ $kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !def
 
 /// The font size of the List item group label.
 /// @group list
-$kendo-list-item-group-label-sm-font-size: .75em !default;
-$kendo-list-item-group-label-md-font-size: .75em !default;
-$kendo-list-item-group-label-lg-font-size: .75em !default;
+$kendo-list-item-group-label-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-list-item-group-label-md-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-list-item-group-label-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
 /// The line-height of the List item group label.
 /// @group list
@@ -226,7 +226,7 @@ $kendo-list-sizes: (
 
 /// The background color of the List component.
 /// @group list
-$kendo-list-bg: k-color(app-surface) !default;
+$kendo-list-bg: k-color(surface-alt) !default;
 /// The text color of the List component.
 /// @group list
 $kendo-list-text: k-color(on-app-surface) !default;
@@ -258,7 +258,7 @@ $kendo-list-item-text: null !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: k-color(surface) !default;
+$kendo-list-item-hover-bg: k-color(base-subtle-hover) !default;
 /// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: k-color(on-app-surface) !default;

package/scss/listgroup/_variables.scss

@@ -7,7 +7,7 @@ $kendo-listgroup-border-radius: k-spacing(1) !default;
 $kendo-listgroup-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-listgroup-bg: k-color(app-surface) !default;
+$kendo-listgroup-bg: k-color(surface-alt) !default;
 $kendo-listgroup-text: k-color(on-app-surface) !default;
 $kendo-listgroup-border: k-color(border) !default;
 

package/scss/listview/_variables.scss

@@ -26,7 +26,7 @@ $kendo-listview-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-listview-text: k-color(on-app-surface) !default;
 /// The background color of the ListView.
 /// @group listview
-$kendo-listview-bg: k-color(app-surface) !default;
+$kendo-listview-bg: k-color(surface-alt) !default;
 /// The border color of the ListView.
 /// @group listview
 $kendo-listview-border: k-color(border) !default;

package/scss/loader/_variables.scss

@@ -80,7 +80,7 @@ $kendo-loader-container-panel-border-color: k-color(border) !default;
 $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: $kendo-color-white !default;
+$kendo-loader-container-panel-bg: k-color(surface-alt) !default;
 
 /// The padding of the small Loader container.
 /// @group loader
@@ -115,7 +115,7 @@ $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !defa
 // Loading indicator
 /// The background color of the Loading indicator.
 /// @group loading
-$kendo-loading-bg: k-color(app-surface) !default;
+$kendo-loading-bg: k-color(surface-alt) !default;
 /// The text color of the Loading indicator.
 /// @group loading
 $kendo-loading-text: currentColor !default;

package/scss/map/_variables.scss

@@ -19,7 +19,7 @@ $kendo-map-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The background color of the Map.
 /// @group map
-$kendo-map-bg: k-color(app-surface) !default;
+$kendo-map-bg: k-color(surface-alt) !default;
 /// The text color of the Map.
 /// @group map
 $kendo-map-text: k-color(on-app-surface) !default;

package/scss/mediaplayer/_variables.scss

@@ -17,7 +17,7 @@ $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-bg: k-color(app-surface) !default;
+$kendo-media-player-bg: k-color(surface-alt) !default;
 /// The text color of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-text: k-color(on-app-surface) !default;

package/scss/notification/_variables.scss

@@ -20,7 +20,7 @@ $kendo-notification-padding-y: k-spacing(4) !default;
 $kendo-notification-border-width: 1px !default;
 /// The border radius of the Notification.
 /// @group notification
-$kendo-notification-border-radius: k-spacing(1.5) !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;
@@ -38,7 +38,7 @@ $kendo-notification-actions-padding-x: null !default;
 $kendo-notification-actions-padding-y: $kendo-notification-actions-padding-x !default;
 /// The background color of the Notification.
 /// @group notification
-$kendo-notification-bg: k-color(app-surface) !default;
+$kendo-notification-bg: k-color(surface-alt) !default;
 /// The text color of the Notification.
 /// @group notification
 $kendo-notification-text: k-color(on-app-surface) !default;

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(app-surface) !default;
+$kendo-orgchart-bg: k-color(surface-alt) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
 $kendo-orgchart-text: k-color(on-app-surface) !default;
@@ -129,7 +129,7 @@ $kendo-orgchart-card-body-border-color: transparent !default;
 $kendo-orgchart-card-body-vbox-margin-right: list.slash( $kendo-orgchart-spacer, 2 ) !default;
 /// The min height of the OrgChart Card body title wrap.
 /// @group orgchart
-$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
+$kendo-orgchart-card-body-vbox-min-height: k-spacing(11) !default;
 
 /// The size of the OrgChart connecting line.
 /// @group orgchart

package/scss/overlay/_variables.scss

@@ -13,7 +13,7 @@ $kendo-overlay-theme-colors: (
     "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
 ) !default;
 
-$kendo-overlay-bg: $kendo-color-black !default;
+$kendo-overlay-bg: k-color(inverse) !default;
 $kendo-overlay-opacity: .5 !default;
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (

package/scss/pager/_variables.scss

@@ -70,14 +70,14 @@ $kendo-pager-border: k-color(border) !default;
 $kendo-pager-focus-bg: null !default;
 /// The box shadow of the focused Pager.
 /// @group pager
-$kendo-pager-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08) !default;
+$kendo-pager-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(inverse) 8%, transparent) !default;
 
 /// The border width of the Pager items.
 /// @group pager
 $kendo-pager-item-border-width: 1px !default;
 /// The border radius of the Pager items.
 /// @group pager
-$kendo-pager-item-border-radius: k-spacing(1) !default;
+$kendo-pager-item-border-radius: k-border-radius(md) !default;
 /// The spacing around the Pager items.
 /// @group pager
 $kendo-pager-item-spacing: (-1 * $kendo-pager-item-border-width) !default;

package/scss/panelbar/_variables.scss

@@ -46,7 +46,7 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: k-color(app-surface) !default;
+$kendo-panelbar-bg: k-color(surface-alt) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-text: k-color(on-app-surface) !default;
@@ -56,10 +56,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: transparent !default;
 /// The text color of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-text: k-color(primary) !default;
+$kendo-panelbar-header-text: k-color(primary-on-surface) !default;
 /// The border color of the PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-border: null !default;
@@ -69,7 +69,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-subtle-hover) !default;
+$kendo-panelbar-header-hover-bg: color-mix(in srgb, $kendo-panelbar-header-text 8%, transparent)  !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-text: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -20,7 +20,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(app-surface) !default;
+$kendo-pdf-viewer-bg: k-color(surface-alt) !default;
 /// The text color of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-text: k-color(on-app-surface) !default;
@@ -82,10 +82,10 @@ $kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 /// The border radius of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border-radius: k-spacing(1) !default;
+$kendo-pdf-viewer-search-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-bg: k-color(app-surface) !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: k-color(on-app-surface) !default;
@@ -108,7 +108,7 @@ $kendo-pdf-viewer-selection-line-height: 1.2 !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;
+$kendo-pdf-viewer-search-highlight-mark-bg: color-mix(in srgb, k-color(warning) 25%, transparent) !default;
 
 /// The text color of the PDFViewer icon.
 /// @group pdf-viewer
@@ -132,10 +132,10 @@ $kendo-pdf-viewer-highlight-annotation-hover-border: k-color(primary-hover) !def
 $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;
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: k-color(primary-on-subtle) !default;
 /// The text color of the PDFViewer free text annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
+$kendo-pdf-viewer-free-text-annotation-text: k-color(primary-on-subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/pdf-viewer/_variables.scss" with (

package/scss/pivotgrid/_variables.scss

@@ -50,7 +50,7 @@ $kendo-pivotgrid-cell-border-width: 1px !default;
 
 /// The background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-bg: k-color(app-surface) !default;
+$kendo-pivotgrid-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-text: k-color(on-app-surface) !default;
@@ -74,7 +74,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(surface) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
 $kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
@@ -153,7 +153,7 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
 
 /// The background color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-bg: k-color(app-surface) !default;
+$kendo-pivotgrid-configurator-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid configurator.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-text: k-color(on-app-surface) !default;
@@ -219,7 +219,7 @@ $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 /// The background color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-bg: k-color(app-surface) !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: k-color(on-app-surface) !default;