@progress/kendo-theme-material 7.1.0-dev.1 → 7.1.0-dev.11

package/scss/panelbar/_variables.scss

@@ -27,18 +27,18 @@ $kendo-panelbar-header-text: $kendo-link-text !default;
 $kendo-panelbar-header-border: null !default;
 $kendo-panelbar-header-gradient: null !default;
 
-$kendo-panelbar-header-hover-bg: k-try-shade( $kendo-panelbar-header-bg, .5 ) !default;
+$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
 $kendo-panelbar-header-hover-text: null !default;
 $kendo-panelbar-header-hover-border: null !default;
 $kendo-panelbar-header-hover-gradient: null !default;
 
-$kendo-panelbar-header-focus-bg: k-try-shade( $kendo-panelbar-header-bg, 1.5 ) !default;
+$kendo-panelbar-header-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 )) !default;
 $kendo-panelbar-header-focus-text: null !default;
 $kendo-panelbar-header-focus-border: null !default;
 $kendo-panelbar-header-focus-gradient: null !default;
 $kendo-panelbar-header-focus-shadow: null !default;
 
-$kendo-panelbar-header-hover-focus-bg: k-try-shade( $kendo-panelbar-header-bg, 2 ) !default;
+$kendo-panelbar-header-hover-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 )) !default;
 $kendo-panelbar-header-hover-focus-text: null !default;
 $kendo-panelbar-header-hover-focus-border: null !default;
 $kendo-panelbar-header-hover-focus-gradient: null !default;
@@ -48,34 +48,34 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-header-selected-border: null !default;
 $kendo-panelbar-header-selected-gradient: null !default;
 
-$kendo-panelbar-header-selected-hover-bg: k-try-tint($kendo-panelbar-header-selected-bg, .95) !default;
+$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-header-selected-bg, .95)) !default;
 $kendo-panelbar-header-selected-hover-text: null !default;
 $kendo-panelbar-header-selected-hover-border: null !default;
 $kendo-panelbar-header-selected-hover-gradient: null !default;
 
-$kendo-panelbar-header-selected-focus-bg: k-try-tint($kendo-panelbar-header-selected-bg, 3) !default;
+$kendo-panelbar-header-selected-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3)) !default;
 $kendo-panelbar-header-selected-focus-text: null !default;
 $kendo-panelbar-header-selected-focus-border: null !default;
 $kendo-panelbar-header-selected-focus-gradient: null !default;
 
-$kendo-panelbar-header-selected-hover-focus-bg: k-try-tint($kendo-panelbar-header-selected-bg, 3.95) !default;
+$kendo-panelbar-header-selected-hover-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3.95)) !default;
 $kendo-panelbar-header-selected-hover-focus-text: null !default;
 $kendo-panelbar-header-selected-hover-focus-border: null !default;
 $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 
-$kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, .5 ) !default;
+$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
 $kendo-panelbar-item-hover-text: null !default;
 $kendo-panelbar-item-hover-border: null !default;
 $kendo-panelbar-item-hover-gradient: null !default;
 
-$kendo-panelbar-item-focus-bg: k-try-shade( $kendo-panelbar-header-bg, 1.5 ) !default;
+$kendo-panelbar-item-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 )) !default;
 $kendo-panelbar-item-focus-text: null !default;
 $kendo-panelbar-item-focus-border: null !default;
 $kendo-panelbar-item-focus-gradient: null !default;
 $kendo-panelbar-item-focus-shadow: null !default;
 
-$kendo-panelbar-item-hover-focus-bg: k-try-shade( $kendo-panelbar-header-bg, 2 ) !default;
+$kendo-panelbar-item-hover-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 )) !default;
 $kendo-panelbar-item-hover-focus-text: null !default;
 $kendo-panelbar-item-hover-focus-border: null !default;
 $kendo-panelbar-item-hover-focus-gradient: null !default;
@@ -85,17 +85,17 @@ $kendo-panelbar-item-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-item-selected-border: null !default;
 $kendo-panelbar-item-selected-gradient: null !default;
 
-$kendo-panelbar-item-selected-hover-bg: k-try-tint($kendo-panelbar-item-selected-bg, .95) !default;
+$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-item-selected-bg, .95)) !default;
 $kendo-panelbar-item-selected-hover-text: null !default;
 $kendo-panelbar-item-selected-hover-border: null !default;
 $kendo-panelbar-item-selected-hover-gradient: null !default;
 
-$kendo-panelbar-item-selected-focus-bg: k-try-tint($kendo-panelbar-item-selected-bg, 3) !default;
+$kendo-panelbar-item-selected-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3)) !default;
 $kendo-panelbar-item-selected-focus-text: null !default;
 $kendo-panelbar-item-selected-focus-border: null !default;
 $kendo-panelbar-item-selected-focus-gradient: null !default;
 
-$kendo-panelbar-item-selected-hover-focus-bg: k-try-tint($kendo-panelbar-item-selected-bg, 3.95) !default;
+$kendo-panelbar-item-selected-hover-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3.95)) !default;
 $kendo-panelbar-item-selected-hover-focus-text: null !default;
 $kendo-panelbar-item-selected-hover-focus-border: null !default;
 $kendo-panelbar-item-selected-hover-focus-gradient: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -25,7 +25,7 @@ $kendo-pdf-viewer-border: $kendo-component-border !default;
 
 /// The background color of the PDFViewer Toolbar.
 /// @group pdf-viewer
-$kendo-pdf-viewer-toolbar-bg: k-try-shade( $kendo-button-bg, .25 ) !default;
+$kendo-pdf-viewer-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 )) !default;
 /// The text color of the PDFViewer Toolbar.
 /// @group pdf-viewer
 $kendo-pdf-viewer-toolbar-text: null !default;

package/scss/pivotgrid/_variables.scss

@@ -23,21 +23,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default;
 $kendo-pivotgrid-text: $kendo-component-text !default;
 $kendo-pivotgrid-border: $kendo-component-border !default;
 
-$kendo-pivotgrid-alt-border: k-try-shade( $kendo-pivotgrid-border, 2 ) !default;
+$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
 
-$kendo-pivotgrid-headers-bg: rgba( $kendo-component-header-bg, .02 ) !default;
+$kendo-pivotgrid-headers-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .02 ), rgba( $kendo-component-header-bg, .02 )) !default;
 $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default;
+$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
 $kendo-pivotgrid-total-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-total-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-hover-bg: k-color-darken( $kendo-pivotgrid-bg, 7% ) !default;
+$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
 $kendo-pivotgrid-hover-text: null !default;
 $kendo-pivotgrid-hover-border: null !default;
 
-$kendo-pivotgrid-selected-bg: rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 ) !default;
+$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( base-active, true ), .25 ), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !default;
 $kendo-pivotgrid-selected-text: null !default;
 $kendo-pivotgrid-selected-border: null !default;
 
@@ -106,11 +106,11 @@ $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 $kendo-pivotgrid-container-bg: $kendo-grid-header-bg !default;
 $kendo-pivotgrid-row-headers-bg: null !default;
 
-$kendo-pivotgrid-button-bg: k-try-shade($kendo-button-bg, 1) !default;
+$kendo-pivotgrid-button-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade($kendo-button-bg, 1)) !default;
 $kendo-pivotgrid-button-text: $kendo-button-text !default;
-$kendo-pivotgrid-button-hover-bg: k-try-shade($kendo-button-bg, 2) !default;
+$kendo-pivotgrid-button-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade($kendo-button-bg, 2)) !default;
 $kendo-pivotgrid-button-hover-text: $kendo-button-text !default;
-$kendo-pivotgrid-button-active-bg: k-try-shade($kendo-button-bg, 2) !default;
+$kendo-pivotgrid-button-active-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-shade($kendo-button-bg, 2)) !default;
 $kendo-pivotgrid-button-active-text: $kendo-button-text !default;
 
 $kendo-pivotgrid-remove-bg: $kendo-pivotgrid-button-text !default;

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-tint( $kendo-color-primary, 8 ) !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;

package/scss/prompt/_index.scss

@@ -0,0 +1,37 @@
+@import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "prompt",
+    dependencies: ()
+);
+
+
+// Dependencies
+@import "../common/_index.scss";
+
+
+// Component
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-prompt--styles() {
+    @include module-render( "prompt" ) {
+        @include kendo-prompt--layout();
+        @include kendo-prompt--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-prompt--styles();
+}

package/scss/prompt/_layout.scss

@@ -0,0 +1,6 @@
+@import "@progress/kendo-theme-default/scss/prompt/_layout.scss";
+
+
+@mixin kendo-prompt--layout() {
+    @include kendo-prompt--layout-base();
+}

package/scss/prompt/_theme.scss

@@ -0,0 +1,6 @@
+@import "@progress/kendo-theme-default/scss/prompt/_theme.scss";
+
+
+@mixin kendo-prompt--theme() {
+    @include kendo-prompt--theme-base();
+}

package/scss/prompt/_variables.scss

@@ -0,0 +1,66 @@
+// Prompt
+
+/// The text color of the Prompt.
+/// @group prompt
+$kendo-prompt-text: $kendo-component-text !default;
+/// The background color of the Prompt.
+/// @group prompt
+$kendo-prompt-bg: $kendo-component-bg !default;
+/// The border color of the Prompt.
+/// @group prompt
+$kendo-prompt-border: $kendo-component-border !default;
+
+/// The text color of the Prompt header.
+/// @group prompt
+$kendo-prompt-header-text: $kendo-component-header-text !default;
+/// The background color of the Prompt header.
+/// @group prompt
+$kendo-prompt-header-bg: $kendo-component-bg !default;
+/// The border color of the Prompt header.
+/// @group prompt
+$kendo-prompt-header-border: $kendo-component-header-border !default;
+
+/// The vertical padding of the Prompt content.
+/// @group prompt
+$kendo-prompt-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the Prompt content.
+/// @group prompt
+$kendo-prompt-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The spacing between the items of the Prompt content.
+/// @group prompt
+$kendo-prompt-content-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+/// The text color of the Prompt content.
+/// @group prompt
+$kendo-prompt-content-text: $kendo-component-header-text !default;
+/// The background color of the Prompt content.
+/// @group prompt
+$kendo-prompt-content-bg: $kendo-component-header-bg !default;
+/// The text border of the Prompt content.
+/// @group prompt
+$kendo-prompt-content-border: $kendo-component-header-border !default;
+
+/// The spacing between the items of the Prompt content expander.
+/// @group prompt
+$kendo-prompt-expander-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+
+/// The vertical padding of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The border radius of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-border-radius: $kendo-border-radius-md !default;
+/// The text color of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-text: $kendo-component-text !default;
+/// The background color of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-bg: $kendo-body-bg !default;
+/// The border color of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-border: $kendo-component-border !default;
+/// The elevation of the Prompt suggestion container.
+/// @group prompt
+$kendo-prompt-suggestion-shadow: k-elevation(1) !default;

package/scss/radio/_theme.scss

@@ -10,7 +10,7 @@
 
         // Disabled state
         .k-radio:disabled + & {
-            color: if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text );
+            color: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ));
             opacity: 1;
             filter: none;
         }

package/scss/scheduler/_theme.scss

@@ -5,6 +5,18 @@
 
     @include kendo-scheduler--theme-base();
 
+    .k-scheduler-layout td.k-selected,
+    .k-scheduler-layout .k-scheduler-cell.k-selected {
+        background-color: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba($kendo-selected-bg, .25));
+    }
+
+    // Agenda view
+    .k-scheduler-agendaview {
+        .k-scheduler-content tr.k-selected {
+            background-color: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba($kendo-selected-bg, .25));
+        }
+    }
+
     // Events
     .k-event {
 

package/scss/scheduler/_variables.scss

@@ -8,12 +8,12 @@ $kendo-scheduler-bg: $kendo-component-bg !default;
 $kendo-scheduler-text: $kendo-component-text !default;
 $kendo-scheduler-border: $kendo-component-border !default;
 
-$kendo-scheduler-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-scheduler-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
 $kendo-scheduler-toolbar-text: null !default;
 $kendo-scheduler-toolbar-border: null !default;
 $kendo-scheduler-toolbar-gradient: null !default;
 
-$kendo-scheduler-footer-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-scheduler-footer-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
 $kendo-scheduler-footer-text: null !default;
 $kendo-scheduler-footer-border: null !default;
 $kendo-scheduler-footer-gradient: null !default;
@@ -23,7 +23,7 @@ $kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
 
 $kendo-scheduler-event-bg: $kendo-color-primary !default;
-$kendo-scheduler-event-text: k-contrast-color( $kendo-scheduler-event-bg ) !default;
+$kendo-scheduler-event-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-scheduler-event-bg )) !default;
 $kendo-scheduler-event-border: null !default;
 $kendo-scheduler-event-gradient: null !default;
 $kendo-scheduler-event-shadow: null !default;
@@ -34,8 +34,8 @@ $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: k-try-tint( $kendo-color-primary, 1 ) !default;
-$kendo-scheduler-event-selected-text: k-contrast-color( $kendo-scheduler-event-selected-bg ) !default;
+$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-tint( $kendo-color-primary, 1 )) !default;
+$kendo-scheduler-event-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-scheduler-event-selected-bg )) !default;
 $kendo-scheduler-event-selected-border: null !default;
 $kendo-scheduler-event-selected-gradient: null !default;
 $kendo-scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
@@ -48,13 +48,13 @@ $kendo-scheduler-cell-height: $kendo-line-height-md * 1rem !default;
 $kendo-scheduler-datecolumn-width: 12rem !default;
 $kendo-scheduler-timecolumn-width: 11rem !default;
 
-$kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
+$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( surface ), 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( surface ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
 $kendo-scheduler-othermonth-text: null !default;
 
 $kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 5 ) !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

@@ -17,7 +17,7 @@ $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;
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;

package/scss/slider/_variables.scss

@@ -37,13 +37,13 @@ $kendo-slider-draghandle-pressed-text: null !default;
 $kendo-slider-draghandle-pressed-border: null !default;
 $kendo-slider-draghandle-pressed-gradient: null !default;
 
-$kendo-slider-draghandle-focus-shadow: 0 0 0 11px rgba( $kendo-color-primary, .25 ) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 11px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !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-tint( $kendo-color-primary, 8 ) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) !default;
 $kendo-slider-selection-bg: $kendo-color-primary !default;
 $kendo-slider-disabled-opacity: .65 !default;

package/scss/splitter/_variables.scss

@@ -15,10 +15,10 @@ $kendo-splitter-drag-icon-margin: 7px !default;
 $kendo-splitter-collapse-icon-padding-x: null !default;
 $kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
 
-$kendo-splitbar-bg: k-try-shade( $kendo-splitter-bg, 1 ) !default;
+$kendo-splitbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-splitter-bg, 1 )) !default;
 $kendo-splitbar-text: $kendo-subtle-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-color-primary !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-color-primary, .25 ) !default;
+$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
 $kendo-spreadsheet-selection-text: null !default;
 $kendo-spreadsheet-selection-border: $kendo-color-primary !default;
 $kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-color-primary !default;
@@ -51,11 +51,11 @@ $kendo-spreadsheet-partial-selection-bg: rgba( black, .04 ) !default;
 $kendo-spreadsheet-active-cell-bg: $kendo-component-bg !default;
 $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-color-primary !default;
 
-$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-color-primary, .25 ) !default;
+$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
 $kendo-spreadsheet-auto-fill-text: null !default;
 $kendo-spreadsheet-auto-fill-border: $kendo-color-primary !default;
 $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-color-primary !default;
-$kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-component-bg, .5 ) !default;
+$kendo-spreadsheet-auto-fill-punch-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .5 ), rgba( $kendo-component-bg, .5 )) !default;
 
 $kendo-spreadsheet-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;
@@ -101,6 +101,6 @@ $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !defaul
 $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( secondary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 
 $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;

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: $kendo-component-border !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 ), .32 ), $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-color( $kendo-stepper-indicator-done-bg ) !default;
+$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $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-color( $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-color( $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;
@@ -69,7 +69,7 @@ $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: null !default;
-$kendo-stepper-label-disabled-text: k-map-get( $theme, disabled-text ) !default;
+$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), k-map-get( $theme, disabled-text )) !default;
 
 $kendo-stepper-optional-label-text: $kendo-subtle-text !default;
 $kendo-stepper-optional-label-opacity: null !default;

package/scss/switch/_theme.scss

@@ -17,7 +17,7 @@
             background-color: inherit;
         }
         &.k-switch-off .k-switch-thumb::before {
-            background-color: if( $kendo-is-dark-theme == true, $kendo-color-white, $kendo-color-black );
+            background-color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ));
         }
     }
 

package/scss/switch/_variables.scss

@@ -30,7 +30,7 @@ $kendo-switch-sizes: (
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 ) !default;
+$kendo-switch-off-track-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 ) !default;
 /// The text color of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-text: null !default;
@@ -85,7 +85,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-is-dark-theme, $kendo-color-black, $kendo-color-white ) !default;
+$kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;
@@ -112,7 +112,7 @@ $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: rgba( $kendo-color-primary, .54 ) !default;
+$kendo-switch-on-track-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 )) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: null !default;

package/scss/table/_layout.scss

@@ -3,4 +3,29 @@
 
 @mixin kendo-table--layout() {
     @include kendo-table--layout-base();
+
+    @if($kendo-enable-color-system) {
+        .k-table {
+            td:focus,
+            td.k-focus,
+            th:focus,
+            th.k-focus {
+                position: relative;
+
+                &::after {
+                    content: "";
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                }
+            }
+
+            td.k-grid-content-sticky,
+            td.k-grid-header-sticky {
+                position: sticky;
+            }
+        }
+    }
 }

package/scss/table/_theme.scss

@@ -5,26 +5,41 @@
 
     @include kendo-table--theme-base();
 
-    // Selected state
-    .k-table-tbody .k-table-row.k-selected,
-    .k-table-tbody .k-table-cell.k-selected {
-        color: $kendo-table-selected-text;
-        background-color: $kendo-table-selected-bg;
-    }
+    @if($kendo-enable-color-system) {
+        .k-table .k-table-tbody {
+            td:focus,
+            td.k-focus,
+            th:focus,
+            th.k-focus {
+                &::after {
+                    background-color: $kendo-table-hover-bg;
+                }
+            }
+        }
+    } @else {
 
-    .k-table-tbody .k-table-row.k-selected > td {
-        color: inherit;
-        background-color: transparent;
-    }
+        // Selected state
+        .k-table-tbody .k-table-row.k-selected,
+        .k-table-tbody .k-table-cell.k-selected {
+            color: $kendo-table-selected-text;
+            background-color: $kendo-table-selected-bg;
+        }
 
-    .k-table .k-table-tbody {
-        td:focus,
-        td.k-focus,
-        th:focus,
-        th.k-focus {
+        .k-table-tbody .k-table-row.k-selected > td {
             color: inherit;
-            background-color: $kendo-table-hover-bg;
+            background-color: transparent;
         }
+
+        .k-table .k-table-tbody {
+            td:focus,
+            td.k-focus,
+            th:focus,
+            th.k-focus {
+                color: inherit;
+                background-color: $kendo-table-hover-bg;
+            }
+        }
+
     }
 
 }

package/scss/table/_variables.scss

@@ -78,7 +78,7 @@ $kendo-table-border: $kendo-component-border !default;
 $kendo-table-header-bg: $kendo-table-bg !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) !default;
+$kendo-table-header-text: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) !default;
 /// Border color of table headers.
 /// @group table
 $kendo-table-header-border: $kendo-table-border !default;
@@ -122,7 +122,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: rgba( k-contrast-color( $kendo-table-bg ), .07 ) !default;
+$kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 )) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -147,7 +147,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( k-contrast-color( $kendo-table-bg ), .04 ) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;

package/scss/tabstrip/_variables.scss

@@ -82,7 +82,7 @@ $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 $kendo-tabstrip-item-dragging-shadow: $box-shadow-depth-3 !default;
 
 $kendo-tabstrip-item-disabled-bg: null !default;
-$kendo-tabstrip-item-disabled-text: k-map-get( $theme, disabled-text ) !default;
+$kendo-tabstrip-item-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), k-map-get( $theme, disabled-text )) !default;
 $kendo-tabstrip-item-disabled-border: null !default;
 $kendo-tabstrip-item-disabled-gradient: null !default;
 $kendo-tabstrip-item-disabled-opacity: 1 !default;