@progress/kendo-theme-material 10.6.0-dev.6 → 11.0.0-dev.0

package/scss/taskboard/_variables.scss

@@ -82,7 +82,7 @@ $kendo-taskboard-column-border-width: 1px !default;
 $kendo-taskboard-column-border-radius: k-border-radius(md) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
+$kendo-taskboard-column-bg: k-color(surface) !default;
 /// The text color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-text: null !default;
@@ -98,7 +98,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: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default;
+$kendo-taskboard-column-focus-border: k-color(border-alt) !default;
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
@@ -117,7 +117,7 @@ $kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2
 $kendo-taskboard-column-header-font-weight: 500 !default;
 /// The text color of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-text: $kendo-component-header-text !default;
+$kendo-taskboard-column-header-text: k-color(on-app-surface) !default;
 
 /// The vertical padding of the TaskBoard column Card wrapper.
 /// @group taskboard
@@ -143,13 +143,13 @@ $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: $kendo-component-bg !default;
+$kendo-taskboard-pane-bg: k-color(surface-alt) !default;
 /// The text color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-text: $kendo-component-text !default;
+$kendo-taskboard-pane-text: k-color(on-app-surface) !default;
 /// The border color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-border: $kendo-component-border !default;
+$kendo-taskboard-pane-border: k-color(border) !default;
 
 /// The vertical padding of the TaskBoard pane header.
 /// @group taskboard
@@ -162,7 +162,7 @@ $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-spacer !default;
 $kendo-taskboard-pane-header-font-weight: 500 !default;
 /// The text color of the TaskBoard pane header.
 /// @group taskboard
-$kendo-taskboard-pane-header-text: $kendo-component-header-text !default;
+$kendo-taskboard-pane-header-text: k-color(on-app-surface) !default;
 
 /// The vertical padding of the TaskBoard pane content.
 /// @group taskboard
@@ -198,7 +198,7 @@ $kendo-taskboard-card-bg: $kendo-card-bg !default;
 $kendo-taskboard-card-text: $kendo-card-text !default;
 /// The border color of the TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-border: $kendo-base-border !default;
+$kendo-taskboard-card-border: k-color(border) !default;
 /// The shadow of the TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-shadow: none !default;
@@ -209,11 +209,11 @@ $kendo-taskboard-card-category-border-width: 4px !default;
 
 /// The border color of the hovered TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default;
+$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: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 9% )) !default;
+$kendo-taskboard-card-focus-border: k-color(border-alt) !default;
 /// The shadow of the focused TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-focus-shadow: none !default;
@@ -221,20 +221,20 @@ $kendo-taskboard-card-focus-shadow: none !default;
 
 /// The border of the selected TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-selected-border: $kendo-color-primary-lighter !default;
+$kendo-taskboard-card-selected-border: color-mix(in srgb, k-color(primary) 60%, transparent) !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: $kendo-color-primary !default;
+$kendo-taskboard-card-header-text: k-color(primary) !default;
 /// The text color of the hovered TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-focus-text: $kendo-color-primary-darker !default;
+$kendo-taskboard-card-header-focus-text: k-color(primary-active) !default;
 /// The text color of the focused TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-hover-text: $kendo-color-primary-darker !default;
+$kendo-taskboard-card-header-hover-text: k-color(primary-active) !default;
 
 /// The border width of the TaskBoard Card placeholder.
 /// @group taskboard
@@ -247,7 +247,7 @@ $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-ra
 $kendo-taskboard-drag-placeholder-bg: rgba( white, .2 ) !default;
 /// The border color of the TaskBoard Card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
+$kendo-taskboard-drag-placeholder-border: k-color(border) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/taskboard/_variables.scss" with (
     $kendo-taskboard-spacer: $kendo-taskboard-spacer,

package/scss/tilelayout/_variables.scss

@@ -8,7 +8,7 @@
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
 /// @group tile-layout
-$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
+$kendo-tile-layout-bg: k-color(surface) !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tile-layout
@@ -33,7 +33,7 @@ $kendo-tile-layout-hint-border-width: 1px !default;
 $kendo-tile-layout-hint-border-radius: k-border-radius(md) !default;
 /// The color of the border around the TileLayout hint.
 /// @group tile-layout
-$kendo-tile-layout-hint-border: $kendo-component-border !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;

package/scss/timeline/_variables.scss

@@ -41,13 +41,13 @@ $kendo-timeline-track-arrow-height: k-spacing(9) !default;
 
 /// The background color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-true-mix(#000000, $kendo-body-bg, 8%)) !default;
+$kendo-timeline-track-arrow-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !default;
 /// The text color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-text: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !default;
 /// The border color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, transparent, k-true-mix($kendo-button-border, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-border: transparent !default;
 
 /// The size of the Timeline track.
 /// @group timeline
@@ -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: if($kendo-enable-color-system, k-color( base-subtle ), #e0e0e0) !default;
+$kendo-timeline-track-bg: k-color(base-subtle) !default;
 /// The border color of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;
@@ -108,10 +108,10 @@ $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} +
 $kendo-timeline-horizontal-flag-min-width: 60px !default;
 /// The background color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-bg: $kendo-color-primary !default;
+$kendo-timeline-flag-bg: k-color(primary) !default;
 /// The text color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg )) !default;
+$kendo-timeline-flag-text: k-color(on-primary) !default;
 
 /// The width of the Timeline's flag callout.
 /// @group timeline
@@ -155,7 +155,7 @@ $kendo-timeline-circle-width: 16px !default;
 $kendo-timeline-circle-height: 16px !default;
 /// The background color of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-bg: $kendo-color-primary !default;
+$kendo-timeline-circle-bg: k-color(primary) !default;
 
 /// The horizontal padding of the Timeline collapse arrow.
 /// @group timeline

package/scss/timeselector/_variables.scss

@@ -10,9 +10,9 @@ $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: math.div( 20, 14 ) !default;
 
-$kendo-time-selector-bg: $kendo-component-bg !default;
-$kendo-time-selector-text: $kendo-component-text !default;
-$kendo-time-selector-border: $kendo-component-border !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;
 
 $kendo-time-selector-header-padding-x: $kendo-actions-padding-x !default;
 $kendo-time-selector-header-padding-y: $kendo-actions-padding-y !default;
@@ -26,16 +26,16 @@ $kendo-time-list-height: 240px !default;
 $kendo-time-list-title-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-time-list-title-line-height: var( --kendo-line-height-lg, normal ) !default;
 $kendo-time-list-title-height: calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
-$kendo-time-list-title-text: $kendo-subtle-text !default;
-$kendo-time-list-title-focus-text: $kendo-component-text !default;
+$kendo-time-list-title-text: k-color(subtle) !default;
+$kendo-time-list-title-focus-text: k-color(on-app-surface) !default;
 
 $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 $kendo-time-list-highlight-border-width: 1px 0px !default;
 $kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
-$kendo-time-list-highlight-bg: $kendo-component-bg !default;
-$kendo-time-list-highlight-border: $kendo-component-border !default;
+$kendo-time-list-highlight-bg: k-color(surface-alt) !default;
+$kendo-time-list-highlight-border: k-color(border) !default;
 
 $kendo-time-list-focus-bg: unset !default;
 
@@ -77,6 +77,9 @@ $kendo-time-selector-sizes: (
     )
 ) !default;
 
+$kendo-time-selector-now-button-text: k-color(secondary) !default;
+$kendo-time-selector-now-button-hover-text: k-color(secondary-hover) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
     $kendo-time-selector-border-width: $kendo-time-selector-border-width,
     $kendo-time-selector-font-family: $kendo-time-selector-font-family,
@@ -115,5 +118,7 @@ $kendo-time-selector-sizes: (
     $kendo-time-selector-lg-line-height: $kendo-time-selector-lg-line-height,
     $kendo-time-selector-lg-list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
     $kendo-time-selector-lg-list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y,
-    $kendo-time-selector-sizes: $kendo-time-selector-sizes
+    $kendo-time-selector-sizes: $kendo-time-selector-sizes,
+    $kendo-time-selector-now-button-text: $kendo-time-selector-now-button-text,
+    $kendo-time-selector-now-button-hover-text: $kendo-time-selector-now-button-hover-text
 );

package/scss/toolbar/_theme.scss

@@ -12,34 +12,34 @@
     .k-toolbar-popup {
 
         .k-button-solid-base {
-            background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
-            border-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
+            background-color: k-color(base-subtle);
+            border-color: k-color(base-subtle);
 
             // Hover state
             &:hover,
             &.k-hover {
-                background-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
-                border-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+                background-color: k-color(base-subtle-hover);
+                border-color: k-color(base-subtle-hover);
             }
 
             // Focus state
             &:focus,
             &.k-focus {
-                background-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
-                border-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+                background-color: k-color(base-subtle-hover);
+                border-color: k-color(base-subtle-hover);
             }
 
             // Active state
             &:active,
             &.k-active {
-                background-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
-                border-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+                background-color: k-color(base-subtle-active);
+                border-color: k-color(base-subtle-active);
             }
 
             // Selected state
             &.k-selected {
-                background-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
-                border-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+                background-color: k-color(base-subtle-active);
+                border-color: k-color(base-subtle-active);
             }
 
             &.k-input-button,

package/scss/toolbar/_variables.scss

@@ -76,13 +76,13 @@ $kendo-toolbar-line-height: math.div( 20, 14 ) !default;
 
 /// The background color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-bg: $kendo-component-bg !default;
+$kendo-toolbar-bg: k-color(surface-alt) !default;
 /// The text color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-text: $kendo-component-text !default;
+$kendo-toolbar-text: k-color(on-app-surface) !default;
 /// The color of the border around the Toolbar.
 /// @group toolbar
-$kendo-toolbar-border: $kendo-component-border !default;
+$kendo-toolbar-border: k-color(border) !default;
 /// The gradient of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-gradient: null !default;
@@ -91,7 +91,7 @@ $kendo-toolbar-gradient: null !default;
 $kendo-toolbar-shadow: k-elevation(4) !default;
 /// The left and right scroll overlay of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 
 /// The text color of the outline Toolbar.
@@ -111,7 +111,7 @@ $kendo-toolbar-outline-shadow: null !default;
 $kendo-toolbar-outline-border-width: 1px !default;
 /// The left and right scroll overlay of the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-toolbar-outline-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 
 /// The text color of the flat Toolbar.
@@ -125,13 +125,13 @@ $kendo-toolbar-flat-border: $kendo-toolbar-border !default;
 $kendo-toolbar-flat-gradient: null !default;
 /// The box shadow of the flat Toolbar.
 /// @group toolbar
-$kendo-toolbar-flat-shadow: 0 2px 0 -1px $kendo-component-border !default;
+$kendo-toolbar-flat-shadow: 0 2px 0 -1px k-color(border) !default;
 /// Border width of the flat Toolbar.
 /// @group toolbar
 $kendo-toolbar-flat-border-width: 1px !default;
 /// The left and right scroll overlay of the flat Toolbar.
 /// @group toolbar
-$kendo-toolbar-flat-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-toolbar-flat-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 
 /// The color of the separator border of the Toolbar.

package/scss/tooltip/_functions.scss

@@ -7,7 +7,7 @@
 
     @each $name, $color in $colors {
         $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )),
+            color: k-color(on-#{$name}),
             background-color: $color,
             border: $color,
         )), $_theme );

package/scss/tooltip/_variables.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "./_functions.scss" as *;
 @use "../core/_index.scss" as *;
-@use "../core/color-system/_functions.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // Tooltip
 
@@ -41,10 +41,10 @@ $kendo-tooltip-callout-size: 6px !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: material-color( gray, 700, .9 ) !default;
+$kendo-tooltip-bg: color-mix(in srgb, k-color(on-app-surface) 70%, transparent 30%) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: get-base-contrast( gray, 700 ) !default;
+$kendo-tooltip-text: k-color(app-surface) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
@@ -55,7 +55,18 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
 
 /// The theme colors map for the Tooltip.
 /// @group tooltip
-$kendo-tooltip-theme-colors: $kendo-theme-colors !default;
+$kendo-tooltip-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 Tooltip.
 /// @group tooltip
 $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;

package/scss/treeview/_variables.scss

@@ -120,14 +120,14 @@ $kendo-treeview-sizes: (
 $kendo-treeview-bg: null !default;
 /// The text color of the TreeView.
 /// @group treeview
-$kendo-treeview-text: $kendo-component-text !default;
+$kendo-treeview-text: k-color(on-app-surface) !default;
 /// The border color of the TreeView.
 /// @group treeview
 $kendo-treeview-border: null !default;
 
 /// The background color of hovered TreeView.
 /// @group treeview
-$kendo-treeview-item-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 7%, transparent), rgba( $kendo-treeview-text, .07 )) !default;
+$kendo-treeview-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 7%, transparent) !default;
 /// The text color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-text: unset !default;
@@ -143,7 +143,7 @@ $kendo-treeview-item-hover-gradient: null !default;
 $kendo-treeview-item-selected-bg: unset !default;
 /// The text color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-text: $kendo-selected-bg !default;
+$kendo-treeview-item-selected-text: k-color(secondary) !default;
 /// The border color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-border: null !default;
@@ -153,10 +153,10 @@ $kendo-treeview-item-selected-gradient: null !default;
 
 /// The background color of selected and focused TreeView items.
 /// /// @group treeview
-$kendo-treeview-item-selected-focus-text: $kendo-selected-bg !default;
+$kendo-treeview-item-selected-focus-text: k-color(secondary) !default;
 /// The text color of selected and focused TreeView items.
 /// /// @group treeview
-$kendo-treeview-item-selected-focus-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 7%, transparent), rgba( $kendo-treeview-text, .07 )) !default;
+$kendo-treeview-item-selected-focus-bg: color-mix(in srgb, k-color(on-app-surface) 7%, transparent) !default;
 /// The border color of selected and focused TreeView items.
 /// /// @group treeview
 $kendo-treeview-item-selected-focus-border: null !default;

package/scss/typography/_variables.scss

@@ -230,13 +230,13 @@ $kendo-code-border-width: 1px !default;
 
 /// The background color of the code tag.
 /// @group typography
-$kendo-code-bg: $kendo-base-bg !default;
+$kendo-code-bg: k-color(app-surface) !default;
 /// The text color of the code tag.
 /// @group typography
-$kendo-code-text: $kendo-component-text !default;
+$kendo-code-text: k-color(on-app-surface) !default;
 /// The border color of the code tag.
 /// @group typography
-$kendo-code-border: $kendo-component-border !default;
+$kendo-code-border: k-color(border) !default;
 
 // Display
 

package/scss/upload/_theme.scss

@@ -12,7 +12,7 @@
     .k-upload {
         .k-upload-button {
             @include box-shadow( none );
-            background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg ));
+            background-color: k-color(base-subtle);
         }
     }
 

package/scss/upload/_variables.scss

@@ -22,13 +22,13 @@ $kendo-upload-max-height: 300px !default;
 
 /// The text color of the Upload.
 /// @group upload
-$kendo-upload-text: $kendo-component-text !default;
+$kendo-upload-text: k-color(on-app-surface) !default;
 /// The background color of the Upload.
 /// @group upload
-$kendo-upload-bg: $kendo-component-bg !default;
+$kendo-upload-bg: k-color(surface-alt) !default;
 /// The border color of the Upload.
 /// @group upload
-$kendo-upload-border: $kendo-component-border !default;
+$kendo-upload-border: k-color(border) !default;
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
@@ -38,20 +38,20 @@ $kendo-upload-dropzone-padding-x: k-spacing(2) !default;
 $kendo-upload-dropzone-padding-y: k-spacing(2) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-text: $kendo-component-header-text !default;
+$kendo-upload-dropzone-text: k-color(on-app-surface) !default;
 /// The background color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+$kendo-upload-dropzone-bg: k-color(app-surface) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-border: $kendo-upload-border !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
+$kendo-upload-dropzone-hover-bg: k-color(base-hover) !default;
 
 /// The text color of the Upload status message.
 /// @group upload
-$kendo-upload-status-text: $kendo-subtle-text !default;
+$kendo-upload-status-text: k-color(subtle) !default;
 /// The opacity of the Upload status message.
 /// @group upload
 $kendo-upload-status-text-opacity: null !default;
@@ -78,28 +78,28 @@ $kendo-upload-validation-line-height: var( --kendo-line-height-xs, normal ) !def
 $kendo-upload-icon-spacing: $kendo-icon-spacing !default;
 /// The color of the uploaded items icon.
 /// @group upload
-$kendo-upload-icon-color: $kendo-subtle-text !default;
+$kendo-upload-icon-color: k-color(subtle) !default;
 
 /// The thickness of the Upload progress bar.
 /// @group upload
 $kendo-upload-progress-thickness: 2px !default;
 /// The background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-progress-bg: $kendo-color-info !default;
+$kendo-upload-progress-bg: k-color(info) !default;
 
 /// The success text color of the Upload.
 /// @group upload
-$kendo-upload-success-text: $kendo-color-success !default;
+$kendo-upload-success-text: k-color(success) !default;
 /// The success background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-success-bg: $kendo-color-success !default;
+$kendo-upload-success-bg: k-color(success) !default;
 
 /// The error text color of the Upload.
 /// @group upload
-$kendo-upload-error-text: $kendo-color-error !default;
+$kendo-upload-error-text: k-color(error) !default;
 /// The error background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-error-bg: $kendo-color-error !default;
+$kendo-upload-error-bg: k-color(error) !default;
 
 /// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload

package/scss/window/_variables.scss

@@ -70,13 +70,13 @@ $kendo-window-buttongroup-border-width: 0px !default;
 
 /// The background color of the Window.
 /// @group window
-$kendo-window-bg: $kendo-component-bg !default;
+$kendo-window-bg: k-color(surface-alt) !default;
 /// The text color of the Window.
 /// @group window
-$kendo-window-text: $kendo-component-text !default;
+$kendo-window-text: k-color(on-app-surface) !default;
 /// The border color of the Window.
 /// @group window
-$kendo-window-border: $kendo-component-border !default;
+$kendo-window-border: k-color(border) !default;
 /// The box shadow of the Window.
 /// @group window
 $kendo-window-shadow: k-elevation(8) !default;
@@ -108,9 +108,9 @@ $kendo-window-sizes: (
 /// The theme colors map for the Window.
 /// @group window
 $kendo-window-theme-colors: (
-    "primary": map.get($kendo-theme-colors, "primary"),
-    "light": map.get($kendo-theme-colors, "light"),
-    "dark": map.get($kendo-theme-colors, "dark")
+    "primary": k-color(primary),
+    "light": k-color(light),
+    "dark": k-color(dark)
 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with (