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

package/scss/gantt/_variables.scss

@@ -93,10 +93,10 @@ $kendo-gantt-milestone-selected-border: k-color(border) !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: k-color(on-base) !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;
@@ -115,10 +115,10 @@ $kendo-gantt-task-padding-x: k-spacing(2) !default;
 $kendo-gantt-task-padding-y: k-spacing(1) !default;
 /// The background color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: k-color(subtle) !default;
+$kendo-gantt-task-bg: k-color(inverse-subtle) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: k-color(base) !default;
+$kendo-gantt-task-text: k-color(on-inverse) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: null !default;
@@ -229,13 +229,13 @@ $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(inverse-emphasis) !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: k-color(success) !default;
+$kendo-gantt-validation-tooltip-valid-border: k-color(success-emphasis) !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: k-color(error)!default;
+$kendo-gantt-validation-tooltip-invalid-border: k-color(error-emphasis)!default;
 
 /// The horizontal padding of the Gantt task Tooltip.
 /// @group gantt

package/scss/imageeditor/_variables.scss

@@ -29,7 +29,7 @@ $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;
 

package/scss/input/_variables.scss

@@ -164,7 +164,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-input-text !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: color-mix(in srgb, k-color(on-base) 50%, transparent) !default;
+$kendo-input-outline-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -174,7 +174,7 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 /// The border color of the outline hovered Input components.
 /// @group input
-$kendo-input-outline-hover-border: color-mix(in srgb, k-color(on-base) 80%, transparent) !default;
+$kendo-input-outline-hover-border: color-mix(in srgb, k-color(on-app-surface) 80%, transparent) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -274,7 +274,7 @@ $kendo-input-suffix-bg: null !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: null !default;
@@ -348,10 +348,10 @@ $kendo-picker-disabled-shadow: null !default;
 $kendo-picker-outline-bg: null !default;
 /// The text color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-text: $kendo-button-text !default;
+$kendo-picker-outline-text: k-color(on-app-surface) !default;
 /// The border color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-border: color-mix(in srgb, k-color(on-base) 50%, transparent) !default;
+$kendo-picker-outline-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
@@ -391,14 +391,14 @@ $kendo-picker-outline-hover-focus-border: null !default;
 $kendo-picker-flat-bg: null !default;
 /// The text color of the flat Picker components.
 /// @group picker
-$kendo-picker-flat-text: $kendo-button-text !default;
+$kendo-picker-flat-text: k-color(on-app-surface) !default;
 /// The border color of the flat Picker components.
 /// @group picker
 $kendo-picker-flat-border: $kendo-button-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: color-mix(in srgb, k-color(on-base) 4%, transparent) !default;
+$kendo-picker-flat-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;

package/scss/list/_variables.scss

@@ -255,7 +255,7 @@ $kendo-list-item-text: null !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: k-color(base-hover) !default;
+$kendo-list-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent ) !default;
 /// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: k-color(on-app-surface) !default;
@@ -268,7 +268,7 @@ $kendo-list-item-focus-bg: null !default;
 $kendo-list-item-focus-text: null !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
+$kendo-list-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The background color of the selected List items.
 /// @group list

package/scss/listview/_variables.scss

@@ -59,7 +59,7 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (
     $kendo-listview-padding-x: $kendo-listview-padding-x,

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

package/scss/menu/_variables.scss

@@ -83,7 +83,7 @@ $kendo-menu-item-hover-gradient: null !default;
 $kendo-menu-item-active-bg: null !default;
 /// The text color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-text: k-color(primary) !default;
+$kendo-menu-item-active-text: k-color(primary-on-surface) !default;
 /// The border color of active Menu item.
 /// @group menu
 $kendo-menu-item-active-border: null !default;
@@ -100,7 +100,7 @@ $kendo-menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 $kendo-menu-item-selected-bg: null !default;
 /// The text color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-text: k-color(primary) !default;
+$kendo-menu-item-selected-text: k-color(primary-on-surface) !default;
 /// The border color of selected Menu item.
 /// @group menu
 $kendo-menu-item-selected-border: null !default;
@@ -241,7 +241,7 @@ $kendo-menu-popup-item-gradient: null !default;
 
 /// The background color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
+$kendo-menu-popup-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of hovered Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;

package/scss/orgchart/_variables.scss

@@ -127,7 +127,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,7 +70,7 @@ $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: $kendo-focus-shadow !default;
+$kendo-pager-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The border width of the Pager items.
 /// @group pager

package/scss/panelbar/_variables.scss

@@ -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-hover) !default;
+$kendo-panelbar-header-hover-bg: color-mix( in srgb, k-color(on-app-surface) 8%, transparent ) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-text: null !default;
@@ -163,7 +163,7 @@ $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: k-color(base-hover) !default;
+$kendo-panelbar-item-hover-bg: color-mix( in srgb, k-color(on-app-surface) 8%, transparent ) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-text: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -133,10 +133,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.5) !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 (
     $kendo-pdf-viewer-border-width: $kendo-pdf-viewer-border-width,

package/scss/scheduler/_variables.scss

@@ -111,7 +111,7 @@ $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 2px rgba(0, 0, 0, .13) !default;
+$kendo-scheduler-event-selected-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The shadow of the ongoing Scheduler event.
 /// @group scheduler

package/scss/scrollview/_variables.scss

@@ -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(0, 0, 0, .13) !default;
+$kendo-scrollview-pagebutton-shadow: 0 0 0 2px k-color(border-alt) !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(0, 0, 0, .3) 0 0 15px !default;
 /// The background color of the ScrollView navigation.
 /// @group scrollview
-$kendo-scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;
+$kendo-scrollview-navigation-bg: transparent !default;
 /// The opacity of the ScrollView navigation.
 /// @group scrollview
 $kendo-scrollview-navigation-default-opacity: .7 !default;
@@ -111,7 +108,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/stepper/_variables.scss

@@ -93,7 +93,7 @@ $kendo-stepper-indicator-bg: k-color(surface-alt) !default;
 $kendo-stepper-indicator-text: k-color(on-app-surface) !default;
 /// The border color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-border: #cccccc !default;
+$kendo-stepper-indicator-border: k-color(border) !default;
 
 /// The background color of the hovered Stepper indicator.
 /// @group stepper
@@ -180,10 +180,10 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-
 $kendo-stepper-label-text: null !default;
 /// The success text color of the Stepper label.
 /// @group stepper
-$kendo-stepper-label-success-text: k-color(success)!default;
+$kendo-stepper-label-success-text: k-color(success-on-surface)!default;
 /// The error text color of the Stepper label.
 /// @group stepper
-$kendo-stepper-label-error-text: k-color(error) !default;
+$kendo-stepper-label-error-text: k-color(error-on-surface) !default;
 /// The text color of the hovered Stepper label.
 /// @group stepper
 $kendo-stepper-label-hover-text: k-color(on-base) !default;

package/scss/tabstrip/_variables.scss

@@ -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(subtle) !default;
+$kendo-tabstrip-item-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: null !default;
@@ -112,7 +112,7 @@ $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(on-app-surface) !default;
+$kendo-tabstrip-item-hover-text: k-color(primary-on-surface) !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-border: null !default;

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 (
     $kendo-current-time-width: $kendo-current-time-width,

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/toolbar/_variables.scss

@@ -85,7 +85,7 @@ $kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, color-mix(in srgb, k-color(app
 $kendo-toolbar-outline-text: $kendo-button-text !default;
 /// The color of the border around the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-border: color-mix(in srgb, k-color(on-base) 50%, transparent) !default;
+$kendo-toolbar-outline-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 /// The box shadow of the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-shadow: null !default;

package/scss/tooltip/_variables.scss

@@ -41,10 +41,10 @@ $kendo-tooltip-callout-size: 6px !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/treeview/_variables.scss

@@ -120,7 +120,7 @@ $kendo-treeview-border: null !default;
 
 /// The background color of hovered TreeView items.
 /// @group treeview
-$kendo-treeview-item-hover-bg: k-color(base-hover) !default;
+$kendo-treeview-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-text: k-color(on-app-surface) !default;
@@ -146,7 +146,7 @@ $kendo-treeview-item-selected-gradient: null !default;
 
 /// The box shadow of focused TreeView items.
 /// @group treeview
-$kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default;
+$kendo-treeview-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The background color of the Load More button in the TreeView
 /// @group treeview

package/scss/upload/_variables.scss

@@ -46,7 +46,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-hover) !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
@@ -88,21 +88,21 @@ $kendo-upload-progress-bg: k-color(info) !default;
 
 /// The success text color of the Upload.
 /// @group upload
-$kendo-upload-success-text: k-color(success) !default;
+$kendo-upload-success-text: k-color(success-on-surface) !default;
 /// The success background color of the Upload progress bar.
 /// @group upload
 $kendo-upload-success-bg: k-color(success) !default;
 
 /// The error text color of the Upload.
 /// @group upload
-$kendo-upload-error-text: k-color(error) !default;
+$kendo-upload-error-text: k-color(error-on-surface) !default;
 /// The error background color of the Upload progress bar.
 /// @group upload
 $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 k-color(border-alt) !default;
 
 $kendo-upload-files-list-margin: calc( -1 * #{k-spacing(1)} ) !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(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with (
     $kendo-wizard-padding-x: $kendo-wizard-padding-x,