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

package/scss/stepper/_variables.scss

@@ -54,7 +54,7 @@ $kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-stepper-bg: null !default;
 /// The text color of the Stepper.
 /// @group stepper
-$kendo-stepper-text: $kendo-component-text !default;
+$kendo-stepper-text: k-color(on-app-surface) !default;
 /// The border color of the Stepper.
 /// @group stepper
 $kendo-stepper-border: null !default;
@@ -87,17 +87,17 @@ $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-foc
 
 /// The background color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-bg: $kendo-component-bg !default;
+$kendo-stepper-indicator-bg: k-color(surface-alt) !default;
 /// The text color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-text: $kendo-component-text !default;
+$kendo-stepper-indicator-text: k-color(on-app-surface) !default;
 /// The border color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-border: $kendo-component-border !default;
+$kendo-stepper-indicator-border: k-color(border) !default;
 
 /// The background color of the hovered Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !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;
@@ -110,24 +110,24 @@ $kendo-stepper-indicator-hover-border: null !default;
 $kendo-stepper-indicator-disabled-bg: null !default;
 /// The text color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8d8d8d) !default;
+$kendo-stepper-indicator-disabled-text: color-mix(in srgb, k-color(on-app-surface) 60%, transparent) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-disabled-border: null !default;
 
 /// The background color of the Stepper's done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-bg: $kendo-color-primary !default;
+$kendo-stepper-indicator-done-bg: k-color(primary) !default;
 /// The text color of the Stepper's done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
+$kendo-stepper-indicator-done-text: k-color(on-primary) !default;
 /// The border color of the Stepper's done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
 
 /// The background color of the Stepper's hovered done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default;
+$kendo-stepper-indicator-done-hover-bg: k-color(primary-hover) !default;
 /// The text color of the Stepper's hovered done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-hover-text: null !default;
@@ -137,10 +137,10 @@ $kendo-stepper-indicator-done-hover-border: null !default;
 
 /// The background color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), color.mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% )) !default;
+$kendo-stepper-indicator-done-disabled-bg: color-mix(in srgb, k-color(primary) 60%, transparent) !default;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
+$kendo-stepper-indicator-done-disabled-text: k-color(on-primary) !default;
 /// The border color of the Stepper's disabled done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default;
@@ -180,20 +180,20 @@ $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: $kendo-color-success !default;
+$kendo-stepper-label-success-text: k-color(success) !default;
 /// The error text color of the Stepper label.
 /// @group stepper
-$kendo-stepper-label-error-text: $kendo-color-error !default;
+$kendo-stepper-label-error-text: k-color(error) !default;
 /// The text color of the hovered Stepper label.
 /// @group stepper
 $kendo-stepper-label-hover-text: unset !default;
 /// The text color of the disabled Stepper label.
 /// @group stepper
-$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8d8d8d) !default;
+$kendo-stepper-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 60%, transparent) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper
-$kendo-stepper-optional-label-text: $kendo-subtle-text !default;
+$kendo-stepper-optional-label-text: k-color(subtle) !default;
 /// The opacity of the optional Stepper label.
 /// @group stepper
 $kendo-stepper-optional-label-opacity: null !default;

package/scss/switch/_variables.scss

@@ -33,13 +33,13 @@ $kendo-switch-sizes: (
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: $kendo-component-bg !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: $kendo-component-text !default;
+$kendo-switch-off-track-text: k-color(on-app-surface) !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: $kendo-component-border !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;
@@ -71,7 +71,7 @@ $kendo-switch-off-track-focus-border: null !default;
 $kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-ring: 0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )) !default;
+$kendo-switch-off-track-focus-ring: 0 0 3px 1px color-mix(in srgb, k-color(on-app-surface) 25%, transparent) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
@@ -88,7 +88,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg )) !default;
+$kendo-switch-off-thumb-bg: k-color(base) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: unset !default;
@@ -97,11 +97,11 @@ $kendo-switch-off-thumb-text: unset !default;
 $kendo-switch-off-thumb-border: $kendo-switch-off-track-border !default;
 /// The background gradient of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-gradient: $kendo-base-gradient !default;
+$kendo-switch-off-thumb-gradient: null !default;
 
 /// The background of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg )) !default;
+$kendo-switch-off-thumb-hover-bg: k-color(base-hover) !default;
 /// The text color of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-text: null !default;
@@ -115,13 +115,13 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: $kendo-component-bg !default;
+$kendo-switch-on-track-bg: k-color(surface-alt) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: $kendo-color-primary !default;
+$kendo-switch-on-track-text: k-color(primary) !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-border: $kendo-component-border !default;
+$kendo-switch-on-track-border: k-color(border) !default;
 /// The background gradient of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-gradient: null !default;
@@ -153,7 +153,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track wen the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )) !default;
+$kendo-switch-on-track-focus-ring: 0 0 3px 1px color-mix(in srgb, k-color(on-app-surface) 25%, transparent) !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
@@ -170,26 +170,26 @@ $kendo-switch-on-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-bg: $kendo-color-primary !default;
+$kendo-switch-on-thumb-bg: k-color(primary) !default;
 /// The text color of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-text: unset !default;
 /// The border color of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg )) !default;
+$kendo-switch-on-thumb-border: k-color(primary) !default;
 /// The background gradient of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-gradient: $kendo-base-gradient !default;
+$kendo-switch-on-thumb-gradient: null !default;
 
 /// The background of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg )) !default;
+$kendo-switch-on-thumb-hover-bg: k-color(primary-hover) !default;
 /// The text color of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg )) !default;
+$kendo-switch-on-thumb-hover-border: k-color(primary-hover) !default;
 /// The background gradient of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-gradient: null !default;

package/scss/table/_variables.scss

@@ -66,27 +66,27 @@ $kendo-table-sizes: (
 
 /// Background color of tables.
 /// @group table
-$kendo-table-bg: $kendo-component-bg !default;
+$kendo-table-bg: k-color(surface-alt) !default;
 /// Text color of tables.
 /// @group table
-$kendo-table-text: $kendo-component-text !default;
+$kendo-table-text: k-color(on-app-surface) !default;
 /// Border color of tables.
 /// @group table
-$kendo-table-border: $kendo-component-border !default;
+$kendo-table-border: k-color(border) !default;
 
 
 /// Background color of table headers.
 /// @group table
-$kendo-table-header-bg: $kendo-component-header-bg !default;
+$kendo-table-header-bg: k-color(surface) !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: $kendo-component-header-text !default;
+$kendo-table-header-text: k-color(on-app-surface) !default;
 /// Border color of table headers.
 /// @group table
-$kendo-table-header-border: $kendo-component-header-border !default;
+$kendo-table-header-border: k-color(border) !default;
 /// Gradient of table headers.
 /// @group table
-$kendo-table-header-gradient: $kendo-component-header-gradient !default;
+$kendo-table-header-gradient: null !default;
 
 
 /// Background color of table footers.
@@ -113,7 +113,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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), k-try-shade( $kendo-table-bg, .5 )) !default;
+$kendo-table-alt-row-bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent) !default;
 /// Text color of alternating rows in table.
 /// @group table
 $kendo-table-alt-row-text: null !default;
@@ -124,7 +124,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-try-shade( $kendo-table-bg, 1 )) !default;
+$kendo-table-hover-bg: color-mix(in srgb, k-color(on-app-surface) 11%, transparent) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -149,7 +149,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
+$kendo-table-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;

package/scss/tabstrip/_variables.scss

@@ -61,10 +61,10 @@ $kendo-tabstrip-wrapper-border: null !default;
 $kendo-tabstrip-bg: null !default;
 /// The text color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-text: $kendo-component-text !default;
+$kendo-tabstrip-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-border: $kendo-component-border !default;
+$kendo-tabstrip-border: k-color(border) !default;
 
 /// The horizontal padding of the TabStrip items.
 /// @group tabstrip
@@ -102,39 +102,39 @@ $kendo-tabstrip-lg-item-padding-y: k-spacing(1.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-bg: $kendo-base-bg !default;
+$kendo-tabstrip-item-bg: k-color(surface) !default;
 /// The text color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-text: $kendo-base-text !default;
+$kendo-tabstrip-item-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-border: $kendo-base-border !default;
+$kendo-tabstrip-item-border: k-color(border) !default;
 /// The gradient of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-gradient: $kendo-base-gradient !default;
+$kendo-tabstrip-item-gradient: null !default;
 
 /// The background color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-bg: $kendo-hover-bg !default;
+$kendo-tabstrip-item-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-text: $kendo-hover-text !default;
+$kendo-tabstrip-item-hover-text: k-color(on-app-surface) !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: $kendo-hover-border !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: $kendo-component-bg !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: $kendo-link-text !default;
+$kendo-tabstrip-item-selected-text: k-color(primary) !default;
 /// The border color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-border: $kendo-component-border !default;
+$kendo-tabstrip-item-selected-border: k-color(border) !default;
 /// The gradient of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-gradient: false !default;
@@ -188,20 +188,20 @@ $kendo-tabstrip-content-border-width: 1px !default;
 
 /// The background color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-bg: $kendo-component-bg !default;
+$kendo-tabstrip-content-bg: k-color(surface-alt) !default;
 /// The text color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-text: $kendo-component-text !default;
+$kendo-tabstrip-content-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-border: $kendo-component-border !default;
+$kendo-tabstrip-content-border: k-color(border) !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-focus-border: $kendo-component-text !default;
+$kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
 
 /// The left and right scroll overlay of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-tabstrip-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 /// The size map of the TabStrip.
 /// @group tabstrip

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: $kendo-base-bg !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
@@ -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, 18% )) !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: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) !default;
+$kendo-taskboard-card-selected-border: k-color(primary-emphasis) !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: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+$kendo-taskboard-card-header-focus-text: k-color(primary-hover) !default;
 /// The text color of the focused TaskBoard Card header text.
 /// @group taskboard
-$kendo-taskboard-card-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+$kendo-taskboard-card-header-hover-text: k-color(primary-hover) !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 (

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: $kendo-base-bg !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(lg) !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(7.5) !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( base ) 60%, transparent), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% )) !default;
+$kendo-timeline-track-arrow-disabled-bg: color-mix(in srgb, k-color(base) 60%, 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-base ) 60%, 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-base) 60%, transparent) !default;
 /// The border color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 15%, transparent), k-true-mix( #000000, $kendo-body-bg, 4.8% )) !default;
+$kendo-timeline-track-arrow-disabled-border: color-mix(in srgb, k-color(border) 15%, transparent) !default;
 
 /// The size of the Timeline track.
 /// @group timeline
@@ -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-legacy( $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

@@ -9,9 +9,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: var( --kendo-line-height, normal ) !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;
@@ -23,16 +23,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: rgba( black, .04 ) !default;
 
@@ -74,6 +74,8 @@ $kendo-time-selector-sizes: (
     )
 ) !default;
 
+$kendo-time-selector-now-button-text: k-color(primary) !default;
+$kendo-time-selector-now-button-hover-text: k-color(primary-hover) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
     $kendo-time-selector-border-width: $kendo-time-selector-border-width,
@@ -112,5 +114,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/_variables.scss

@@ -75,7 +75,7 @@ $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), $kendo-button-bg) !default;
+$kendo-toolbar-bg: k-color(surface) !default;
 /// The text color of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-text: $kendo-button-text !default;
@@ -90,7 +90,7 @@ $kendo-toolbar-gradient: null !default;
 $kendo-toolbar-shadow: null !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.
@@ -98,7 +98,7 @@ $kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system,
 $kendo-toolbar-outline-text: $kendo-button-text !default;
 /// The color of the border around the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5)) !default;
+$kendo-toolbar-outline-border: color-mix(in srgb, k-color(on-base) 50%, transparent) !default;
 /// The gradient of the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-gradient: null !default;
@@ -110,7 +110,7 @@ $kendo-toolbar-outline-shadow: null !default;
 $kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !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.
@@ -130,7 +130,7 @@ $kendo-toolbar-flat-shadow: null !default;
 $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-legacy( $color )),
+            color: k-color(on-#{$name}),
             background-color: $color,
             border: $color,
         )), $_theme );