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

package/scss/rating/_variables.scss

@@ -35,23 +35,23 @@ $kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: k-color(subtle) !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: k-color(primary) !default;
 /// The text color of the hovered Rating icon.
 /// @group rating
-$kendo-rating-icon-hover-text: k-color(primary) !default;
+$kendo-rating-icon-hover-text: k-color(primary-hover) !default;
 /// The text color of the focused Rating icon.
 /// @group rating
 $kendo-rating-icon-focus-text: k-color(primary) !default;
 
 /// The shadow of the focused Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-shadow: 0 2px 4px rgba( black, .1 ) !default;
+$kendo-rating-icon-focus-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(border) 50%, transparent) !default;
 /// The shadow of the focused and selected Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
+$kendo-rating-icon-focus-selected-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(border) 50%, transparent) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with (

package/scss/scheduler/_variables.scss

@@ -22,7 +22,7 @@ $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Scheduler.
 /// @group scheduler
-$kendo-scheduler-bg: k-color(app-surface) !default;
+$kendo-scheduler-bg: k-color(surface-alt) !default;
 /// The text color of the Scheduler.
 /// @group scheduler
 $kendo-scheduler-text: k-color(on-app-surface) !default;
@@ -112,11 +112,11 @@ $kendo-scheduler-event-selected-border: null !default;
 $kendo-scheduler-event-selected-gradient: null !default;
 /// The shadow of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-shadow: inset 0 0 0 3px rgba( white, .5 ) !default;
+$kendo-scheduler-event-selected-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-primary) 50%, transparent) !default;
 
 /// The shadow of the ongoing Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+$kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px k-color(error-on-surface) !default;
 
 /// The horizontal padding of the Scheduler cell.
 /// @group scheduler

package/scss/scrollview/_theme.scss

@@ -44,7 +44,6 @@
     .k-scrollview-prev {
         color: $kendo-scrollview-navigation-color;
         background-color: $kendo-scrollview-navigation-bg;
-        text-shadow: $kendo-scrollview-navigation-icon-shadow;
         opacity: $kendo-scrollview-navigation-default-opacity;
         outline-width: 0;
         -webkit-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color;

package/scss/scrollview/_variables.scss

@@ -21,7 +21,7 @@ $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-scrollview-text: k-color(on-app-surface) !default;
 /// The background color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-bg: k-color(app-surface) !default;
+$kendo-scrollview-bg: k-color(surface-alt) !default;
 /// The border color of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-border: k-color(border) !default;
@@ -43,7 +43,7 @@ $kendo-scrollview-pagebutton-primary-bg: k-color(primary) !default;
 $kendo-scrollview-pagebutton-primary-border: k-color(primary) !default;
 /// The box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
+$kendo-scrollview-pagebutton-shadow: 0 0 0 2px color-mix(in srgb, k-color(inverse) 13%, transparent) !default;
 
 /// The offset of the ScrollView pager.
 /// @group scrollview
@@ -64,12 +64,9 @@ $kendo-scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !defa
 /// The color of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-color: white !default;
-/// The box shadow of the ScrollView navigation arrows.
-/// @group scrollview
-$kendo-scrollview-navigation-icon-shadow: rgba( black, .3 ) 0 0 15px !default;
 /// The background color of the ScrollView navigation.
 /// @group scrollview
-$kendo-scrollview-navigation-bg: rgba( black, 0 ) !default;
+$kendo-scrollview-navigation-bg: transparent !default;
 /// The opacity of the ScrollView navigation.
 /// @group scrollview
 $kendo-scrollview-navigation-default-opacity: .7 !default;
@@ -115,7 +112,6 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
     $kendo-scrollview-pager-height: $kendo-scrollview-pager-height,
     $kendo-scrollview-arrow-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color,
     $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color,
-    $kendo-scrollview-navigation-icon-shadow: $kendo-scrollview-navigation-icon-shadow,
     $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg,
     $kendo-scrollview-navigation-default-opacity: $kendo-scrollview-navigation-default-opacity,
     $kendo-scrollview-navigation-hover-opacity: $kendo-scrollview-navigation-hover-opacity,

package/scss/skeleton/_variables.scss

@@ -22,7 +22,7 @@ $kendo-skeleton-circle-border-radius: 9999px !default;
 $kendo-skeleton-item-bg: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
-$kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
+$kendo-skeleton-wave-bg: color-mix(in srgb, k-color(dark) 4%, transparent) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/skeleton/_variables.scss" with (

package/scss/slider/_variables.scss

@@ -61,7 +61,7 @@ $kendo-slider-draghandle-hover-bg: k-color(primary-hover) !default;
 $kendo-slider-draghandle-hover-text: k-color(on-primary) !default;
 /// The border color of the hovered Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-hover-border: k-color(primary-hover) !default;
+$kendo-slider-draghandle-hover-border: k-color(primary-emphasis) !default;
 /// The gradient of the hovered Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-hover-gradient: null !default;
@@ -77,7 +77,7 @@ $kendo-slider-draghandle-pressed-bg: k-color(primary-active) !default;
 $kendo-slider-draghandle-pressed-text: k-color(on-primary) !default;
 /// The border color of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-pressed-border: k-color(primary-active) !default;
+$kendo-slider-draghandle-pressed-border: k-color(primary-emphasis) !default;
 /// The gradient of the active Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-pressed-gradient: null !default;

package/scss/splitter/_variables.scss

@@ -18,7 +18,7 @@ $kendo-splitter-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Splitter.
 /// @group splitter
-$kendo-splitter-bg: k-color(app-surface) !default;
+$kendo-splitter-bg: k-color(surface-alt) !default;
 /// The text color of the Splitter.
 /// @group splitter
 $kendo-splitter-text: k-color(on-app-surface) !default;
@@ -47,10 +47,10 @@ $kendo-splitter-collapse-icon-padding-y: k-spacing(0.5) !default;
 
 /// The background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-bg: k-color(surface) !default;
+$kendo-splitbar-bg: k-color(base-subtle) !default;
 /// The text color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-text: k-color(on-app-surface) !default;
+$kendo-splitbar-text: k-color(base-on-subtle) !default;
 
 /// The hover background color of the Splitter split bar.
 /// @group splitter

package/scss/spreadsheet/_variables.scss

@@ -19,7 +19,7 @@ $kendo-spreadsheet-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-bg: k-color(app-surface) !default;
+$kendo-spreadsheet-bg: k-color(surface-alt) !default;
 /// The text color of the Spreadsheet.
 /// @group spreadsheet
 $kendo-spreadsheet-text: k-color(on-app-surface) !default;
@@ -221,7 +221,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-border: k-color(border) !default;
 $kendo-spreadsheet-insert-image-dialog-preview-border-radius: k-border-radius(md) !default;
 /// The shadow of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba( black, .5 ) !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px color-mix(in srgb, k-color(inverse) 50%, transparent) !default;
 /// The border radius of the Spreadsheet image Dialog preview overlay.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default;

package/scss/stepper/_variables.scss

@@ -87,7 +87,7 @@ $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-foc
 
 /// The background color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-bg: k-color(app-surface) !default;
+$kendo-stepper-indicator-bg: k-color(surface-alt) !default;
 /// The text color of the Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-text: k-color(on-app-surface) !default;
@@ -97,7 +97,7 @@ $kendo-stepper-indicator-border: k-color(border) !default;
 
 /// The background color of the hovered Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-hover-bg: k-color(base-hover) !default;
+$kendo-stepper-indicator-hover-bg: k-color(base-subtle-hover) !default;
 /// The text color of the hovered Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-hover-text: null !default;

package/scss/switch/_variables.scss

@@ -34,13 +34,13 @@ $kendo-switch-sizes: (
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: k-color(app-surface) !default;
+$kendo-switch-off-track-bg: k-color(surface-alt) !default;
 /// The text color of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-text: unset !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: k-color(base-emphasis) !default;
+$kendo-switch-off-track-border: k-color(border) !default;
 /// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -76,13 +76,13 @@ $kendo-switch-off-track-focus-ring: .25rem solid color-mix(in srgb, k-color(prim
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-bg: k-color(base-subtle) !default;
+$kendo-switch-off-track-disabled-bg: null !default;
 /// The text color of the track when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-disabled-text: null !default;
 /// The border color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-border: null !default;
+$kendo-switch-off-track-disabled-border: color-mix(in srgb, k-color(border) 65%, transparent) !default;
 /// The background gradient of the track when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-disabled-gradient: null !default;
@@ -115,7 +115,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-bg: null !default;
+$kendo-switch-off-thumb-disabled-bg: color-mix(in srgb, k-color(base-emphasis) 34%, transparent) !default;
 /// The text color of the thumb when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-disabled-text: null !default;
@@ -177,7 +177,7 @@ $kendo-switch-on-track-disabled-bg: color-mix(in srgb, k-color(primary) 50%, tra
 $kendo-switch-on-track-disabled-text: null !default;
 /// The border color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-border: null !default;
+$kendo-switch-on-track-disabled-border: transparent !default;
 /// The background gradient of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-gradient: null !default;

package/scss/table/_variables.scss

@@ -56,7 +56,7 @@ $kendo-table-sizes: (
 
 /// Background color of tables.
 /// @group table
-$kendo-table-bg: k-color(app-surface) !default;
+$kendo-table-bg: k-color(surface-alt) !default;
 /// Text color of tables.
 /// @group table
 $kendo-table-text: k-color(on-app-surface) !default;
@@ -103,7 +103,7 @@ $kendo-table-group-row-border: $kendo-table-header-border !default;
 
 /// Background color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent) !default;
+$kendo-table-alt-row-bg: color-mix(in srgb, k-color(on-app-surface) 4%, transparent) !default;
 /// Text color of alternating rows in table.
 /// @group table
 $kendo-table-alt-row-text: null !default;
@@ -114,7 +114,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !default;
+$kendo-table-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -134,7 +134,7 @@ $kendo-table-focus-text: null !default;
 $kendo-table-focus-border: null !default;
 /// Box shadow of focused rows in table.
 /// @group table
-$kendo-table-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08) !default;
+$kendo-table-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(inverse) 8%, transparent) !default;
 
 
 /// Background color of selected rows in table.

package/scss/tabstrip/_variables.scss

@@ -71,7 +71,7 @@ $kendo-tabstrip-border: k-color(border) !default;
 $kendo-tabstrip-item-border-width: 1px !default;
 /// The border radius of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: k-spacing(1) !default;
+$kendo-tabstrip-item-border-radius: k-border-radius(sm) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
@@ -99,7 +99,7 @@ $kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
 $kendo-tabstrip-item-bg: null !default;
 /// The text color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-text: k-color(primary) !default;
+$kendo-tabstrip-item-text: k-color(primary-on-surface) !default;
 /// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: null !default;
@@ -112,17 +112,17 @@ $kendo-tabstrip-item-gradient: null !default;
 $kendo-tabstrip-item-hover-bg: null !default;
 /// The text color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-text: k-color(primary-hover) !default;
+$kendo-tabstrip-item-hover-text: color-mix(in srgb, k-color(primary-on-surface) 90%, transparent 10%) !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: k-color(base-subtle) !default;
+$kendo-tabstrip-item-hover-border: k-color(border) !default;
 /// The gradient of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-gradient: null !default;
 
 /// The background color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-bg: k-color(app-surface) !default;
+$kendo-tabstrip-item-selected-bg: k-color(surface-alt) !default;
 /// The text color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-text: k-color(on-app-surface) !default;
@@ -182,7 +182,7 @@ $kendo-tabstrip-content-border-width: $kendo-tabstrip-border-width !default;
 
 /// The background color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-bg: k-color(app-surface) !default;
+$kendo-tabstrip-content-bg: k-color(surface-alt) !default;
 /// The text color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-text: k-color(on-app-surface) !default;
@@ -191,7 +191,7 @@ $kendo-tabstrip-content-text: k-color(on-app-surface) !default;
 $kendo-tabstrip-content-border: k-color(border) !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
+$kendo-tabstrip-content-focus-border: k-color(primary-emphasis) !default;
 
 /// The left and right scroll overlay of the TabStrip.
 /// @group tabstrip

package/scss/taskboard/_variables.scss

@@ -95,7 +95,7 @@ $kendo-taskboard-column-focus-bg: null !default;
 $kendo-taskboard-column-focus-text: null !default;
 /// The border color of the focused TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-focus-border: k-color(border-alt) !default;
+$kendo-taskboard-column-focus-border: k-color(primary-emphasis) !default;
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
@@ -140,7 +140,7 @@ $kendo-taskboard-pane-padding-x: null !default;
 $kendo-taskboard-pane-border-width: 1px !default;
 /// The background color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-bg: k-color(app-surface) !default;
+$kendo-taskboard-pane-bg: k-color(surface-alt) !default;
 /// The text color of the TaskBoard pane.
 /// @group taskboard
 $kendo-taskboard-pane-text: k-color(on-app-surface) !default;
@@ -210,27 +210,27 @@ $kendo-taskboard-card-hover-border: k-color(border-alt) !default;
 
 /// The border color of the focused TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-focus-border: k-color(border-alt) !default;
+$kendo-taskboard-card-focus-border: k-color(primary-emphasis) !default;
 /// The shadow of the focused TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-focus-shadow: $kendo-card-focus-shadow !default;
 
 /// The border of the selected TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-selected-border: k-color(primary-emphasis) !default;
+$kendo-taskboard-card-selected-border: k-color(primary-on-surface) !default;
 /// The shadow of the selected TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-selected-shadow: none !default;
 
 /// The text color of the TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-text: k-color(primary) !default;
+$kendo-taskboard-card-header-text: k-color(primary-on-surface) !default;
 /// The text color of the hovered TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-focus-text: k-color(primary-active) !default;
+$kendo-taskboard-card-header-focus-text: color-mix(in srgb, k-color(primary-on-surface) 90%, transparent 10%) !default;
 /// The text color of the focused TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-hover-text: k-color(primary-active) !default;
+$kendo-taskboard-card-header-hover-text: color-mix(in srgb, k-color(primary-on-surface) 90%, transparent 10%) !default;
 
 /// The border width of the TaskBoard Card placeholder.
 /// @group taskboard

package/scss/tilelayout/_variables.scss

@@ -36,7 +36,7 @@ $kendo-tile-layout-hint-border-radius: $kendo-card-border-radius !default;
 $kendo-tile-layout-hint-border: k-color(border) !default;
 /// The background color of the TileLayout hint.
 /// @group tile-layout
-$kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
+$kendo-tile-layout-hint-bg: color-mix(in srgb, k-color(surface-alt) 20%, transparent) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/tilelayout/_variables.scss" with (

package/scss/time-marker/_variables.scss

@@ -1,9 +1,11 @@
+@use "../core/_index.scss" as *;
+
 /// The border width of the current time indicator.
 /// @group time-marker
 $kendo-current-time-width: 1px !default;
 /// The color of the current time indicator.
 /// @group time-marker
-$kendo-current-time-color: #ff0000 !default;
+$kendo-current-time-color: k-color(error-on-surface) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/time-marker/_variables.scss" with (

package/scss/timeline/_variables.scss

@@ -149,10 +149,10 @@ $kendo-timeline-mobile-vertical-padding-with-dates-calc: calc(#{$kendo-timeline-
 
 /// The width of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-width: 16px !default;
+$kendo-timeline-circle-width: k-spacing(4) !default;
 /// The height of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-height: 16px !default;
+$kendo-timeline-circle-height: $kendo-timeline-circle-width !default;
 /// The background color of the Timeline circle.
 /// @group timeline
 $kendo-timeline-circle-bg: k-color(primary) !default;

package/scss/timeselector/_variables.scss

@@ -9,7 +9,7 @@ $kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-time-selector-bg: k-color(app-surface) !default;
+$kendo-time-selector-bg: k-color(surface-alt) !default;
 $kendo-time-selector-text: k-color(on-app-surface) !default;
 $kendo-time-selector-border: k-color(border) !default;
 
@@ -37,7 +37,7 @@ $kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size}
 $kendo-time-list-highlight-bg: k-color(app-surface) !default;
 $kendo-time-list-highlight-border: k-color(border) !default;
 
-$kendo-time-list-focus-bg: rgba( black, .02 ) !default;
+$kendo-time-list-focus-bg: color-mix(in srgb, k-color(inverse) 2%, transparent) !default;
 
 
 // Time selector sizes

package/scss/tooltip/_variables.scss

@@ -16,7 +16,7 @@ $kendo-tooltip-padding-x: k-spacing(2) !default;
 $kendo-tooltip-border-width: 0px !default;
 /// The border radius of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border-radius: k-spacing(1.5) !default;
+$kendo-tooltip-border-radius: k-border-radius(md) !default;
 
 /// The font family of the Tooltip.
 /// @group tooltip
@@ -41,10 +41,10 @@ $kendo-tooltip-callout-size: k-spacing(1.5) !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: k-color(on-app-surface) !default;
+$kendo-tooltip-bg: k-color(inverse) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: k-color(app-surface) !default;
+$kendo-tooltip-text: k-color(on-inverse) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;

package/scss/upload/_variables.scss

@@ -25,7 +25,7 @@ $kendo-upload-max-height: 300px !default;
 $kendo-upload-text: k-color(on-app-surface) !default;
 /// The background color of the Upload.
 /// @group upload
-$kendo-upload-bg: k-color(app-surface) !default;
+$kendo-upload-bg: k-color(surface-alt) !default;
 /// The border color of the Upload.
 /// @group upload
 $kendo-upload-border: k-color(border) !default;
@@ -47,7 +47,7 @@ $kendo-upload-dropzone-bg: k-color(surface) !default;
 $kendo-upload-dropzone-border: $kendo-upload-border !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-hover-bg: k-color(base-subtle) !default;
+$kendo-upload-dropzone-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The text color of the Upload status message.
 /// @group upload
@@ -103,7 +103,7 @@ $kendo-upload-error-bg: k-color(error) !default;
 
 /// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload
-$kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-upload-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(inverse) 13%, transparent) !default;
 
 $kendo-upload-files-list-margin: calc( -1 * #{k-spacing(2)} ) !default;
 

package/scss/window/_variables.scss

@@ -69,7 +69,7 @@ $kendo-window-buttongroup-border-width: 1px !default;
 
 /// The background color of the Window.
 /// @group window
-$kendo-window-bg: k-color(app-surface) !default;
+$kendo-window-bg: k-color(surface-alt) !default;
 /// The text color of the Window.
 /// @group window
 $kendo-window-text: k-color(on-app-surface) !default;

package/scss/wizard/_variables.scss

@@ -33,7 +33,7 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The outline of the focused Wizard step.
 /// @group wizard
-$kendo-wizard-step-focus-border: #656565 !default;
+$kendo-wizard-step-focus-border: k-color(primary-emphasis) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with (