@progress/kendo-theme-default 7.1.0-dev.8 → 7.1.0-dev.9

package/scss/progressbar/_variables.scss

@@ -24,7 +24,7 @@ $kendo-progressbar-line-height: 1 !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
 $kendo-progressbar-value-bg: $kendo-color-primary !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default;
 /// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !default;

package/scss/scheduler/_theme.scss

@@ -67,7 +67,7 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: rgba($kendo-selected-bg, .25);
+        background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
     }
 
     .k-scheduler-layout-flex {
@@ -110,7 +110,7 @@
         }
 
         &.k-event-inverse {
-            color: k-contrast-legacy( $kendo-scheduler-event-text );
+            color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text ));
         }
 
         &.k-event-ongoing {
@@ -184,7 +184,7 @@
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: rgba($kendo-selected-bg, .25);
+            background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {

package/scss/scheduler/_variables.scss

@@ -22,7 +22,7 @@ $kendo-scheduler-event-min-height: 25px !default;
 $kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
 
-$kendo-scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default;
+$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
 $kendo-scheduler-event-text: $kendo-selected-text !default;
 $kendo-scheduler-event-border: null !default;
 $kendo-scheduler-event-gradient: null !default;
@@ -34,7 +34,7 @@ $kendo-scheduler-event-hover-border: null !default;
 $kendo-scheduler-event-hover-gradient: null !default;
 $kendo-scheduler-event-hover-shadow: null !default;
 
-$kendo-scheduler-event-selected-bg: $kendo-selected-bg !default;
+$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) !default;
 $kendo-scheduler-event-selected-text: $kendo-selected-text !default;
 $kendo-scheduler-event-selected-border: null !default;
 $kendo-scheduler-event-selected-gradient: null !default;
@@ -48,13 +48,13 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
 $kendo-scheduler-datecolumn-width: 12em !default;
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-$kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
+$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
 $kendo-scheduler-nonwork-text: null !default;
 
 $kendo-scheduler-weekend-bg: null !default;
 $kendo-scheduler-weekend-text: null !default;
 
-$kendo-scheduler-othermonth-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
+$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
 $kendo-scheduler-othermonth-text: null !default;
 
 $kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;

package/scss/signature/_variables.scss

@@ -18,7 +18,7 @@ $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default;
 
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
-$kendo-signature-line-color: rgba( $kendo-color-info, .24 ) !default;
+$kendo-signature-line-color: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), rgba( $kendo-color-info, .24 )) !default;
 
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
 $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;

package/scss/skeleton/_variables.scss

@@ -15,9 +15,6 @@ $kendo-skeleton-rect-border-radius: 0 !default;
 /// @group skeleton
 $kendo-skeleton-circle-border-radius: 9999px !default;
 
-/// The background color of the Skeleton item.
-/// @group skeleton
-$kendo-skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default;
-/// The background color of the Skeleton wave animation.
-/// @group skeleton
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
+
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;

package/scss/slider/_variables.scss

@@ -23,27 +23,27 @@ $kendo-slider-draghandle-active-scale: 1 !default;
 $kendo-slider-draghandle-active-size: null !default;
 
 $kendo-slider-draghandle-bg: $kendo-color-primary !default;
-$kendo-slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default;
+$kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default;
 $kendo-slider-draghandle-border: $kendo-color-primary !default;
 $kendo-slider-draghandle-gradient: null !default;
 
-$kendo-slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary , .5 ) !default;
+$kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) !default;
 $kendo-slider-draghandle-hover-text: null !default;
 $kendo-slider-draghandle-hover-border: $kendo-color-primary !default;
 $kendo-slider-draghandle-hover-gradient: null !default;
 
-$kendo-slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary , 1.5 ) !default;
+$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default;
 $kendo-slider-draghandle-pressed-text: null !default;
-$kendo-slider-draghandle-pressed-border: k-try-shade( $kendo-color-primary , 1.5 ) !default;
+$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default;
 $kendo-slider-draghandle-pressed-gradient: null !default;
 
-$kendo-slider-draghandle-focus-shadow: 0 0 0 2px rgba( $kendo-color-primary , .3 ) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 )) !default;
 
 $kendo-slider-transition-speed: .3s !default;
 $kendo-slider-transition-function: ease-out !default;
 $kendo-slider-draghandle-transition-speed: .4s !default;
 $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
 
-$kendo-slider-track-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default;
 $kendo-slider-selection-bg: $kendo-color-primary !default;
 $kendo-slider-disabled-opacity: null !default;

package/scss/splitter/_variables.scss

@@ -18,7 +18,7 @@ $kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !defaul
 $kendo-splitbar-bg: $kendo-base-bg !default;
 $kendo-splitbar-text: $kendo-base-text !default;
 
-$kendo-splitbar-hover-bg: k-try-shade( $kendo-splitbar-bg, .5 ) !default;
+$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default;
 $kendo-splitbar-hover-text: $kendo-splitbar-text !default;
 
 $kendo-splitbar-selected-bg: $kendo-selected-bg !default;

package/scss/spreadsheet/_variables.scss

@@ -37,7 +37,7 @@ $kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
 $kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
 $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
 
-$kendo-spreadsheet-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 $kendo-spreadsheet-selection-text: null !default;
 $kendo-spreadsheet-selection-border: $kendo-selected-bg !default;
 $kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -46,12 +46,12 @@ $kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default;
 $kendo-spreadsheet-single-selection-text: null !default;
 $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
 
-$kendo-spreadsheet-partial-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 
 $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default;
 $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
 
-$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 $kendo-spreadsheet-auto-fill-text: null !default;
 $kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default;
 $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -99,7 +99,7 @@ $kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
 $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 $kendo-spreadsheet-drawing-outline-style: solid !default;
 $kendo-spreadsheet-drawing-outline-width: 2px !default;
-$kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 
 $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 4 ) !default;
 

package/scss/stepper/_layout.scss

@@ -73,6 +73,17 @@
             transition-duration: .4s;
             transition-timing-function: ease-in-out;
 
+            &::before {
+                @include border-radius( $kendo-stepper-indicator-border-radius );
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: -1;
+            }
+
             &::after {
                 @include border-radius( 100% );
                 content: "";

package/scss/stepper/_theme.scss

@@ -41,11 +41,23 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-disabled-text,
-                        $kendo-stepper-indicator-disabled-bg,
-                        $kendo-stepper-indicator-disabled-border
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            $kendo-stepper-indicator-disabled-text,
+                            k-color( app-surface ),
+                            $kendo-stepper-indicator-disabled-border
+                        );
+                        
+                        &::before {
+                            background-color: $kendo-stepper-indicator-disabled-bg;
+                        }
+                    } @else {
+                        @include fill(
+                            $kendo-stepper-indicator-disabled-text,
+                            $kendo-stepper-indicator-disabled-bg,
+                            $kendo-stepper-indicator-disabled-border
+                        );
+                    }
                 }
 
                 .k-step-label {
@@ -103,11 +115,23 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-done-disabled-text,
-                        $kendo-stepper-indicator-done-disabled-bg,
-                        $kendo-stepper-indicator-done-disabled-border
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            $kendo-stepper-indicator-done-disabled-text,
+                            k-color( app-surface ),
+                            $kendo-stepper-indicator-done-disabled-border
+                        );
+                        
+                        &::before {
+                            background-color: $kendo-stepper-indicator-done-disabled-bg;
+                        }
+                    } @else {
+                        @include fill(
+                            $kendo-stepper-indicator-done-disabled-text,
+                            $kendo-stepper-indicator-done-disabled-bg,
+                            $kendo-stepper-indicator-done-disabled-border
+                        );
+                    }
                 }
             }
         }
@@ -144,11 +168,23 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-current-disabled-text,
-                        $kendo-stepper-indicator-current-disabled-bg,
-                        $kendo-stepper-indicator-current-disabled-border
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            $kendo-stepper-indicator-current-disabled-text,
+                            k-color( app-surface ),
+                            $kendo-stepper-indicator-current-disabled-border
+                        );
+                        
+                        &::before {
+                            background-color: $kendo-stepper-indicator-current-disabled-bg;
+                        }
+                    } @else {
+                        @include fill(
+                            $kendo-stepper-indicator-current-disabled-text,
+                            $kendo-stepper-indicator-current-disabled-bg,
+                            $kendo-stepper-indicator-current-disabled-border
+                        );
+                    }
                 }
             }
         }

package/scss/stepper/_variables.scss

@@ -33,24 +33,24 @@ $kendo-stepper-indicator-bg: $kendo-component-bg !default;
 $kendo-stepper-indicator-text: $kendo-component-text !default;
 $kendo-stepper-indicator-border: #cccccc !default;
 
-$kendo-stepper-indicator-hover-bg: k-try-shade( $kendo-stepper-indicator-bg ) !default;
+$kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default;
 $kendo-stepper-indicator-hover-text: null !default;
 $kendo-stepper-indicator-hover-border: null !default;
 
 $kendo-stepper-indicator-disabled-bg: null !default;
-$kendo-stepper-indicator-disabled-text: $kendo-disabled-text !default;
+$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
 $kendo-stepper-indicator-disabled-border: null !default;
 
 $kendo-stepper-indicator-done-bg: $kendo-color-primary !default;
-$kendo-stepper-indicator-done-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default;
+$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-border: $kendo-stepper-indicator-done-bg !default;
 
-$kendo-stepper-indicator-done-hover-bg: k-try-shade( $kendo-stepper-indicator-done-bg ) !default;
+$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-text: null !default;
 $kendo-stepper-indicator-done-hover-border: null !default;
 
-$kendo-stepper-indicator-done-disabled-bg: k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%) !default;
-$kendo-stepper-indicator-done-disabled-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default;
+$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
+$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-border: $kendo-stepper-indicator-done-disabled-bg !default;
 
 $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
@@ -68,8 +68,8 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-
 $kendo-stepper-label-text: null !default;
 $kendo-stepper-label-success-text: $kendo-color-success !default;
 $kendo-stepper-label-error-text: $kendo-color-error !default;
-$kendo-stepper-label-hover-text: k-try-shade( $kendo-stepper-text, 2 ) !default;
-$kendo-stepper-label-disabled-text: $kendo-disabled-text !default;
+$kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !default;
+$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
 
 $kendo-stepper-optional-label-text: $kendo-subtle-text !default;
 $kendo-stepper-optional-label-opacity: null !default;

package/scss/switch/_theme.scss

@@ -58,7 +58,7 @@
                     $kendo-switch-off-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                 } @else {
                     outline: $kendo-switch-off-track-focus-ring;
                 }
@@ -138,7 +138,7 @@
                     $kendo-switch-on-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                 } @else {
                     outline: $kendo-switch-on-track-focus-ring;
                 }

package/scss/switch/_variables.scss

@@ -36,7 +36,7 @@ $kendo-switch-off-track-bg: $kendo-component-bg !default;
 $kendo-switch-off-track-text: $kendo-component-text !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: k-try-shade( $kendo-switch-off-track-bg, 8% ) !default;
+$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) !default;
 /// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -68,7 +68,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: 2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ) !default;
+$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
@@ -115,7 +115,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 $kendo-switch-on-track-bg: $kendo-color-primary !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: k-contrast-legacy( $kendo-switch-on-track-bg ) !default;
+$kendo-switch-on-track-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
@@ -150,7 +150,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 2px solid rgba( $kendo-switch-on-track-border, .25 ) !default;
+$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch

package/scss/table/_variables.scss

@@ -108,10 +108,9 @@ $kendo-table-group-row-text: $kendo-table-header-text !default;
 /// @group table
 $kendo-table-group-row-border: $kendo-table-header-border !default;
 
-
 /// Background color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-bg: rgba( k-contrast-legacy( $kendo-table-bg ), .04 ) !default;
+$kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default;
 /// Text color of alternating rows in table.
 /// @group table
 $kendo-table-alt-row-text: null !default;
@@ -122,7 +121,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: k-color-darken($kendo-table-bg, 7%) !default;
+$kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%)) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -147,7 +146,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: rgba($kendo-selected-bg, .25) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;

package/scss/taskboard/_variables.scss

@@ -33,7 +33,7 @@ $kendo-taskboard-column-border: transparent !default;
 
 $kendo-taskboard-column-focus-bg: null !default;
 $kendo-taskboard-column-focus-text: null !default;
-$kendo-taskboard-column-focus-border: k-try-shade( $kendo-base-border, 2.5 ) !default;
+$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-header-padding-y: k-math-div( $kendo-taskboard-spacer, 2 ) !default;
 $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
@@ -76,17 +76,17 @@ $kendo-taskboard-card-border: $kendo-card-border !default;
 
 $kendo-taskboard-card-category-border-width: 4px !default;
 
-$kendo-taskboard-card-focus-border: k-try-shade( $kendo-taskboard-card-border, 18% ) !default;
-$kendo-taskboard-card-focus-shadow: none !default;
+$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-try-shade( $kendo-taskboard-card-border, 10% ) !default;
+$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-shadow: none !default;
 
-$kendo-taskboard-card-selected-border: k-color-tint( $kendo-color-primary-lighter, 5 ) !default;
+$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-shadow: none !default;
 
 $kendo-taskboard-card-header-text: $kendo-color-primary !default;
-$kendo-taskboard-card-header-focus-text: $kendo-color-primary-darker !default;
-$kendo-taskboard-card-header-hover-text: $kendo-color-primary-darker !default;
+$kendo-taskboard-card-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+$kendo-taskboard-card-header-focus-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
 
 $kendo-taskboard-drag-placeholder-border-width: 1px !default;
 $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-radius !default;

package/scss/timeline/_variables.scss

@@ -13,9 +13,9 @@ $kendo-timeline-mobile-spacing-y: 16px !default;
 $kendo-timeline-track-arrow-width: 30px !default;
 $kendo-timeline-track-arrow-height: 30px !default;
 
-$kendo-timeline-track-arrow-disabled-bg: k-true-mix($kendo-button-bg, $kendo-body-bg, 65%) !default;
-$kendo-timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $kendo-body-bg, 65%) !default;
-$kendo-timeline-track-arrow-disabled-border: k-true-mix(#000000, $kendo-body-bg, 4.8%) !default;
+$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .6 ), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) !default;
 
 $kendo-timeline-track-size: 6px !default;
 $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default;
@@ -39,7 +39,7 @@ $kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$
 $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default;
 $kendo-timeline-horizontal-flag-min-width: 60px !default;
 $kendo-timeline-flag-bg: $kendo-color-primary !default;
-$kendo-timeline-flag-text: k-contrast-legacy( $kendo-timeline-flag-bg ) !default;
+$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) !default;
 
 $kendo-timeline-flag-callout-width: 10px !default;
 $kendo-timeline-flag-callout-height: 10px !default;

package/scss/tooltip/_variables.scss

@@ -36,10 +36,10 @@ $kendo-tooltip-callout-size: 6px !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
+$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !default;
+$kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
@@ -53,7 +53,7 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
 
     @each $name, $color in $colors {
         $_theme: k-map-merge(( $name: (
-            color: k-contrast-legacy( $color ),
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
             background-color: $color,
             border: $color,
         )), $_theme );
@@ -67,4 +67,4 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
 $kendo-tooltip-theme-colors: $kendo-theme-colors !default;
 /// The generated theme colors map for the Tooltip.
 /// @group tooltip
-$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
+$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;

package/scss/window/_theme.scss

@@ -29,7 +29,7 @@
     // Window theme colors
     @each $name, $color in $kendo-window-theme-colors {
         .k-window-#{$name} .k-window-titlebar {
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }

package/scss/core/color-system/index.import.scss

@@ -1 +0,0 @@
-@import "@progress/kendo-theme-core/scss/color-system/index.import.scss";