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

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( black, .13 ) !default;
+$kendo-scrollview-pagebutton-shadow: 0 0 0 2px color-mix(in srgb, k-color(dark) 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;
@@ -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/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) 20%, 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 (
     $kendo-skeleton-text-transform: $kendo-skeleton-text-transform,

package/scss/splitter/_variables.scss

@@ -37,7 +37,7 @@ $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: calc( #{k-spacing(3.5)} / 2 ) !default;
+$kendo-splitter-drag-icon-margin: k-spacing(4) !default;
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: null !default;

package/scss/spreadsheet/_variables.scss

@@ -223,7 +223,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

@@ -26,7 +26,7 @@ $kendo-stepper-label-margin-x: k-spacing(3) !default;
 $kendo-stepper-label-padding-x: k-spacing(3) !default;
 /// The vertical padding the Stepper label.
 /// @group stepper
-$kendo-stepper-label-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;
+$kendo-stepper-label-padding-y: k-spacing(1.5) !default;
 /// The border radius of the Stepper label.
 /// @group stepper
 $kendo-stepper-label-border-radius: k-border-radius(xxl) !default;

package/scss/tabstrip/_variables.scss

@@ -127,7 +127,7 @@ $kendo-tabstrip-item-hover-gradient: null !default;
 $kendo-tabstrip-item-selected-bg: null !default;
 /// The text color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-text: k-color(primary) !default;
+$kendo-tabstrip-item-selected-text: k-color(primary-on-surface) !default;
 /// The border color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-border: unset !default;

package/scss/taskboard/_variables.scss

@@ -241,7 +241,7 @@ $kendo-taskboard-drag-placeholder-border-width: 1px !default;
 $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-radius !default;
 /// The background color of the TaskBoard Card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-bg: rgba( white, .2 ) !default;
+$kendo-taskboard-drag-placeholder-bg: color-mix(in srgb, k-color(light) 20%, transparent) !default;
 /// The border color of the TaskBoard Card placeholder.
 /// @group taskboard
 $kendo-taskboard-drag-placeholder-border: k-color(border) !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

@@ -72,7 +72,7 @@ $kendo-timeline-track-start-calc: calc(#{$kendo-timeline-track-arrow-width} - 2
 $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
 /// The background color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bg: k-color(base-subtle) !default;
+$kendo-timeline-track-bg: k-color(primary-subtle) !default;
 /// The border color of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;
@@ -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

@@ -67,7 +67,7 @@ $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-toolbar-bg: k-color(surface) !default;
 /// The text color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-text: k-color(base-on-subtle) !default;
+$kendo-toolbar-text: k-color(on-app-surface) !default;
 /// The color of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border: $kendo-toolbar-bg !default;
@@ -84,7 +84,7 @@ $kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, color-mix(in srgb, k-color(app
 
 /// The text color of the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-text: k-color(base-on-subtle) !default;
+$kendo-toolbar-outline-text: k-color(on-app-surface) !default;
 /// The color of the border around the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-border: color-mix(in srgb, k-color(on-app-surface) 44%, transparent) !default;
@@ -101,7 +101,7 @@ $kendo-toolbar-outline-scroll-overlay: k-color(app-surface), color-mix(in srgb,
 
 /// The text color of the flat Toolbar.
 /// @group toolbar
-$kendo-toolbar-flat-text: k-color(base-on-subtle) !default;
+$kendo-toolbar-flat-text: k-color(on-app-surface) !default;
 /// The color of the border around the flat Toolbar.
 /// @group toolbar
 $kendo-toolbar-flat-border: k-color(border) !default;

package/scss/tooltip/_variables.scss

@@ -41,7 +41,7 @@ $kendo-tooltip-callout-size: 6px !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: k-color(inverse-on-surface) !default;
+$kendo-tooltip-bg: k-color(inverse) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-text: k-color(on-inverse) !default;

package/scss/treeview/_variables.scss

@@ -137,7 +137,7 @@ $kendo-treeview-item-hover-gradient: null !default;
 $kendo-treeview-item-selected-bg: null !default;
 /// The text color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-text: k-color(primary) !default;
+$kendo-treeview-item-selected-text: k-color(primary-on-surface) !default;
 /// The border color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-border: null !default;

package/scss/upload/_variables.scss

@@ -89,21 +89,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( black, .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(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,