@progress/kendo-theme-material 7.1.0-dev.8 → 7.1.0

package/scss/fab/_theme.scss

@@ -8,7 +8,7 @@
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
             border-color: $color;
-            color: k-contrast-color( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color ));
             background-color: $color;
         }
     }
@@ -17,8 +17,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: k-true-mix( #ffffff, $color, 8%);
-            background-color: k-true-mix( #ffffff, $color, 8%);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-true-mix( #ffffff, $color, 8%));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-true-mix( #ffffff, $color, 8%));
         }
     }
 
@@ -26,8 +26,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-focus.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:focus {
-            border-color: k-true-mix( #ffffff, $color, 12%);
-            background-color: k-true-mix( #ffffff, $color, 12%);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 12%));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 12%));
         }
     }
 
@@ -36,8 +36,8 @@
         .k-active.k-fab-solid-#{$name},
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
-            border-color: k-true-mix( #ffffff, $color, 16%);
-            background-color: k-true-mix( #ffffff, $color, 16%);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 16%));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 16%));
             box-shadow: $kendo-fab-active-shadow;
         }
     }
@@ -47,9 +47,9 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            border-color: k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5);
-            background-color: k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5);
-            color: k-color-tint( $kendo-disabled-text, 4);
+            border-color: if($kendo-enable-color-system, transparent, k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
+            background-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
+            color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), k-color-tint( $kendo-disabled-text, 4));
             opacity: 1;
         }
     }
@@ -75,25 +75,25 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: k-true-mix( #000000, $kendo-fab-item-icon-border, 8%);
-        background-color: k-true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
-        color: k-true-mix( #000000, $kendo-fab-item-icon-text, 8%);
+        border-color: if($kendo-enable-color-system, k-color( base-hover ), k-true-mix( #000000, $kendo-fab-item-icon-border, 8%));
+        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-true-mix( #000000, $kendo-fab-item-icon-bg, 8%));
+        color: if($kendo-enable-color-system, k-color( on-base ), k-true-mix( #000000, $kendo-fab-item-icon-text, 8%));
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        border-color: k-true-mix( #000000, $kendo-fab-item-icon-border, 12%);
-        background-color: k-true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
-        color: k-true-mix( #000000, $kendo-fab-item-icon-text, 12%);
+        border-color: if($kendo-enable-color-system, k-color( base-active ), k-true-mix( #000000, $kendo-fab-item-icon-border, 12%));
+        background-color: if($kendo-enable-color-system, k-color( base-active ), k-true-mix( #000000, $kendo-fab-item-icon-bg, 12%));
+        color: if($kendo-enable-color-system, k-color( on-base ), k-true-mix( #000000, $kendo-fab-item-icon-text, 12%));
     }
 
     // Active state
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: k-true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
-        background-color: k-true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
+        border-color: if($kendo-enable-color-system, k-color( base ), k-true-mix( #ffffff, $kendo-fab-item-icon-border, 12%));
+        background-color: if($kendo-enable-color-system, k-color( base ), k-true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%));
     }
 
     // Disabled state
@@ -104,8 +104,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: k-try-tint( $kendo-fab-item-bg, 8 );
-            color: k-try-tint( $kendo-fab-item-text, 8 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 8 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 8 ));
         }
     }
 

package/scss/filemanager/_variables.scss

@@ -30,7 +30,7 @@ $kendo-file-manager-border: $kendo-component-border !default;
 $kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
 /// The background color of the FileManager Toolbar.
 /// @group filemanager
-$kendo-file-manager-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-file-manager-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
 /// The text color of the FileManager Toolbar.
 /// @group filemanager
 $kendo-file-manager-toolbar-text: null !default;
@@ -119,7 +119,7 @@ $kendo-file-manager-listview-item-border: null !default;
 $kendo-file-manager-listview-item-icon-bg: null !default;
 /// The text color of the FileManager ListView item icon.
 /// @group filemanager
-$kendo-file-manager-listview-item-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-border: null !default;
@@ -176,7 +176,7 @@ $kendo-file-manager-preview-border: null !default;
 $kendo-file-manager-preview-icon-bg: null !default;
 /// The text color of the FileManager preview icon.
 /// @group filemanager
-$kendo-file-manager-preview-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-border: null !default;

package/scss/gantt/_layout.scss

@@ -6,7 +6,7 @@
     @include kendo-gantt--layout-base();
 
     // Timeline
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
         .k-rtl & {
 
             .k-header {

package/scss/gantt/_theme.scss

@@ -6,7 +6,7 @@
     @include kendo-gantt--theme-base();
 
     // Timeline
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
 
         tbody > tr:not(:only-child) > .k-header {
             border-left-color: $kendo-grid-border;

package/scss/gantt/_variables.scss

@@ -12,12 +12,12 @@ $kendo-gantt-treelist-bg: null !default;
 $kendo-gantt-treelist-text: null !default;
 $kendo-gantt-treelist-border: null !default;
 
-$kendo-gantt-nonwork-bg: rgba( k-contrast-color( $kendo-gantt-bg ), .025 ) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
 $kendo-gantt-nonwork-text: null !default;
 $kendo-gantt-nonwork-border: null !default;
 
 $kendo-gantt-line-size: 2px !default;
-$kendo-gantt-line-fill: k-color-mix( $kendo-gantt-text, $kendo-gantt-bg ) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
 $kendo-gantt-line-selected-fill: $kendo-selected-bg !default;
 
 $kendo-gantt-dot-size: 8px !default;
@@ -32,19 +32,19 @@ $kendo-gantt-milestone-border: $kendo-color-primary !default;
 $kendo-gantt-milestone-selected-bg: $kendo-color-secondary !default;
 $kendo-gantt-milestone-selected-border: $kendo-color-secondary !default;
 
-$kendo-gantt-summary-bg: k-color-mix( $kendo-color-primary, $kendo-gantt-bg ) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
 $kendo-gantt-summary-progress-bg: $kendo-color-primary !default;
-$kendo-gantt-summary-selected-bg: k-color-mix( $kendo-color-secondary, $kendo-gantt-bg ) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( secondary-subtle-active ), k-color-mix( $kendo-color-secondary, $kendo-gantt-bg )) !default;
 $kendo-gantt-summary-progress-selected-bg: $kendo-color-secondary !default;
 
 $kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-gantt-task-border-width: 0px !default;
-$kendo-gantt-task-bg: k-color-mix( $kendo-color-primary, $kendo-gantt-bg ) !default;
+$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
 $kendo-gantt-task-text: $kendo-color-primary-contrast !default;
 $kendo-gantt-task-border: null !default;
 $kendo-gantt-task-progress-bg: $kendo-color-primary !default;
-$kendo-gantt-task-selected-bg: k-color-mix( $kendo-color-secondary, $kendo-gantt-bg ) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( secondary-subtle-active ), k-color-mix( $kendo-color-secondary, $kendo-gantt-bg )) !default;
 $kendo-gantt-task-selected-text: $kendo-color-secondary-contrast !default;
 $kendo-gantt-task-selected-border: null !default;
 $kendo-gantt-task-progress-selected-bg: $kendo-color-secondary !default;
@@ -78,10 +78,10 @@ $kendo-gantt-planned-bg: $kendo-color-primary !default;
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
 $kendo-gantt-delayed-bg: $kendo-color-error !default;
-$kendo-gantt-delayed-bg-lighter: k-color-tint($kendo-gantt-delayed-bg, 5) !default;
+$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
 
 $kendo-gantt-advanced-bg: $kendo-color-success !default;
-$kendo-gantt-advanced-bg-lighter: k-color-tint($kendo-gantt-advanced-bg, 5) !default;
+$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
 
 $kendo-gantt-action-on-offset-text: #000000 !default;
 $kendo-gantt-offset-resize-handler-top: 50% !default;

package/scss/grid/_theme.scss

@@ -9,71 +9,86 @@
 
     .k-grid {
 
-        // Selected state
-        .k-table-td.k-selected,
-        .k-table-row.k-selected {
-            color: $kendo-grid-selected-text;
-            background-color: $kendo-grid-selected-bg;
-        }
+        @if($kendo-enable-color-system) {
+            .k-table {
+                td:focus,
+                td.k-focus,
+                th:focus,
+                th.k-focus {
+                    &::after {
+                        background-color: $kendo-grid-hover-bg;
+                    }
+                }
+            }
+        } @else {
 
-        .k-table-row.k-selected > td,
-        .k-table-row.k-selected > .k-table-td {
-            color: inherit;
-            background-color: transparent;
-        }
+            // Selected state
+            .k-table-td.k-selected,
+            .k-table-row.k-selected {
+                color: $kendo-grid-selected-text;
+                background-color: $kendo-grid-selected-bg;
+            }
 
-        // Hover, Focused state
-        .k-table {
-            > .k-table-row:not(.k-detail-row):hover,
-            > .k-table-row:not(.k-detail-row).k-hover,
-            td:focus,
-            td.k-focus,
-            .k-table-td:focus,
-            .k-table-td.k-focus,
-            .k-table-th:focus,
-            .k-table-th.k-focus,
-            .k-master-row > td:focus,
-            .k-grouping-row > td:focus,
-            .k-detail-row > td:focus,
-            .k-group-footer > td:focus,
-            .k-master-row > .k-table-td:focus,
-            .k-grouping-row > .k-table-td:focus,
-            .k-detail-row > .k-table-td:focus,
-            .k-group-footer > .k-table-td:focus {
+            .k-table-row.k-selected > td,
+            .k-table-row.k-selected > .k-table-td {
                 color: inherit;
-                background-color: $kendo-grid-hover-bg;
+                background-color: transparent;
             }
 
-            .k-table-row:hover,
-            .k-table-row.k-hover {
-                .k-grid-header-sticky,
-                .k-grid-footer-sticky {
+            // Hover, Focused state
+            .k-table {
+                > .k-table-row:not(.k-detail-row):hover,
+                > .k-table-row:not(.k-detail-row).k-hover,
+                td:focus,
+                td.k-focus,
+                .k-table-td:focus,
+                .k-table-td.k-focus,
+                .k-table-th:focus,
+                .k-table-th.k-focus,
+                .k-master-row > td:focus,
+                .k-grouping-row > td:focus,
+                .k-detail-row > td:focus,
+                .k-group-footer > td:focus,
+                .k-master-row > .k-table-td:focus,
+                .k-grouping-row > .k-table-td:focus,
+                .k-detail-row > .k-table-td:focus,
+                .k-group-footer > .k-table-td:focus {
                     color: inherit;
-                    background-color: $kendo-grid-sticky-hover-bg;
+                    background-color: $kendo-grid-hover-bg;
                 }
-            }
 
-            .k-table-th,
-            td,
-            .k-table-td,
-            .k-master-row > td,
-            .k-grouping-row > td,
-            .k-detail-row > td,
-            .k-group-footer > td,
-            .k-master-row > .k-table-td,
-            .k-grouping-row > .k-table-td,
-            .k-detail-row > .k-table-td,
-            .k-group-footer > .k-table-td {
-                &:focus,
-                &.k-focus {
-                    &.k-grid-header-sticky,
-                    &.k-grid-content-sticky,
-                    &.k-grid-footer-sticky {
+                .k-table-row:hover,
+                .k-table-row.k-hover {
+                    .k-grid-header-sticky,
+                    .k-grid-footer-sticky {
                         color: inherit;
                         background-color: $kendo-grid-sticky-hover-bg;
                     }
                 }
+
+                .k-table-th,
+                td,
+                .k-table-td,
+                .k-master-row > td,
+                .k-grouping-row > td,
+                .k-detail-row > td,
+                .k-group-footer > td,
+                .k-master-row > .k-table-td,
+                .k-grouping-row > .k-table-td,
+                .k-detail-row > .k-table-td,
+                .k-group-footer > .k-table-td {
+                    &:focus,
+                    &.k-focus {
+                        &.k-grid-header-sticky,
+                        &.k-grid-content-sticky,
+                        &.k-grid-footer-sticky {
+                            color: inherit;
+                            background-color: $kendo-grid-sticky-hover-bg;
+                        }
+                    }
+                }
             }
+            
         }
 
         .k-grid-pager:focus,

package/scss/grid/_variables.scss

@@ -223,7 +223,7 @@ $kendo-grid-grouping-row-bg: transparent !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: 4px !default;
-$kendo-grid-sorted-bg: rgba( k-contrast-color( $kendo-grid-bg ), .04 ) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-grid-header-text !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -236,10 +236,12 @@ $kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default
 // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
 
+// Must be a solid color
 $kendo-grid-sticky-bg: $kendo-grid-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
-$kendo-grid-sticky-border: rgba( k-contrast-color( $kendo-grid-bg ), .5 ) !default;
+$kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
 
+// Must be a solid color
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-sticky-bg !default;
@@ -249,11 +251,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
-$kendo-grid-sticky-selected-bg: k-try-shade($kendo-grid-bg, 4%) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), k-try-shade($kendo-grid-bg, 4%)) !default;
 $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !default;
 
-$kendo-grid-sticky-hover-bg: k-try-shade($kendo-grid-bg, 7%) !default;
-$kendo-grid-sticky-selected-hover-bg: k-try-shade($kendo-grid-sticky-selected-bg, .87) !default;
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade($kendo-grid-bg, 7%)) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
 
 $kendo-grid-column-menu-width: 250px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -306,7 +309,7 @@ $kendo-grid-group-footer-second-cell-border: 0px !default;
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .24 ) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .24 )) !default;
 /// Active background color of the grid row resize indicator
 /// @group grid
 $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;

package/scss/input/_variables.scss

@@ -99,13 +99,13 @@ $kendo-input-sizes: (
 
 /// The background color of the Input components.
 /// @group input
-$kendo-input-bg: k-try-shade( $kendo-component-bg, .5 ) !default;
+$kendo-input-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) !default;
 /// The text color of the Input components.
 /// @group input
 $kendo-input-text: $kendo-component-text !default;
 /// The border color of the Input components.
 /// @group input
-$kendo-input-border: rgba( $kendo-component-border, .38 ) !default;
+$kendo-input-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 )) !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -142,16 +142,15 @@ $kendo-input-selected-bg: null !default;
 /// The text color of the selected Input components.
 /// @group input
 $kendo-input-selected-text: null !default;
-
 /// The background color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-bg: k-try-shade( $kendo-component-bg, .25 ) !default;
+$kendo-input-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 )) !default;
 /// The text color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-text: $kendo-disabled-text !default;
+$kendo-input-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text) !default;
 /// The border color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-border: rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ) !default;
+$kendo-input-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) !default;
 /// The gradient of the disabled Input components.
 /// @group input
 $kendo-input-disabled-gradient: null !default;

package/scss/list/_theme.scss

@@ -3,4 +3,12 @@
 
 @mixin kendo-list--theme() {
     @include kendo-list--theme-base();
+
+    // List item
+    .k-list-item {
+        &.k-selected:hover,
+        &.k-selected.k-hover {
+            background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-shade( $kendo-list-item-selected-bg ));
+        }
+    }
 }

package/scss/listview/_theme.scss

@@ -12,7 +12,7 @@
     // Listview content
     .k-listview-content {}
     .k-listview-content > .k-selected.k-focus {
-        background-color: rgba( k-contrast-color( $kendo-listview-bg ), .12 );
+        background-color: if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .12 ));
     }
 
 }

package/scss/listview/_variables.scss

@@ -41,7 +41,7 @@ $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-listview-item-selected-text: null !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: rgba( k-contrast-color( $kendo-listview-bg ), .04 ) !default;
+$kendo-listview-item-selected-bg: if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 )) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;
@@ -51,7 +51,7 @@ $kendo-listview-item-selected-border: null !default;
 $kendo-listview-item-focus-text: null !default;
 /// The background color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-bg: rgba( k-contrast-color( $kendo-listview-bg ), .08 ) !default;
+$kendo-listview-item-focus-bg: if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 )) !default;
 /// The border color of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-border: null !default;

package/scss/map/_variables.scss

@@ -25,6 +25,6 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
 $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
 $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
 $kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
-$kendo-map-attribution-bg: rgba( $kendo-map-bg, .8 ) !default;
+$kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default;
 
 $kendo-map-marker-fill: $kendo-color-primary !default;

package/scss/mediaplayer/_variables.scss

@@ -13,4 +13,4 @@ $kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-media-player-titlebar-bg: null !default;
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
 $kendo-media-player-titlebar-border: null !default;
-$kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !default;
+$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-color( on-app-surface, true ), .7 ), rgba( k-color( on-app-surface, true ), 0 ) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;

package/scss/menu/_variables.scss

@@ -21,12 +21,12 @@ $kendo-menu-item-text: null !default;
 $kendo-menu-item-border: null !default;
 $kendo-menu-item-gradient: null !default;
 
-$kendo-menu-item-hover-bg: rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * k-color-alpha( $kendo-menu-text ) ) !default;
+$kendo-menu-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * k-color-alpha( $kendo-menu-text ) )) !default;
 $kendo-menu-item-hover-text: null !default;
 $kendo-menu-item-hover-border: null !default;
 $kendo-menu-item-hover-gradient: null !default;
 
-$kendo-menu-item-expanded-bg: rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * k-color-alpha( $kendo-menu-text ) ) !default;
+$kendo-menu-item-expanded-bg: if($kendo-enable-color-system, k-color( base-active ), rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * k-color-alpha( $kendo-menu-text ) )) !default;
 $kendo-menu-item-expanded-text: null !default;
 $kendo-menu-item-expanded-border: null !default;
 $kendo-menu-item-expanded-gradient: null !default;

package/scss/notification/_variables.scss

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

package/scss/orgchart/_variables.scss

@@ -17,12 +17,12 @@ $kendo-orgchart-node-group-padding-y: $kendo-orgchart-spacer !default;
 $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !default;
 $kendo-orgchart-node-group-border-width: 1px !default;
 $kendo-orgchart-node-group-border-radius: $kendo-border-radius-md !default;
-$kendo-orgchart-node-group-bg: if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) !default;
+$kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
 $kendo-orgchart-node-group-text: $kendo-base-text !default;
 $kendo-orgchart-node-group-border: $kendo-base-border !default;
 
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
-$kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevation, .14 ), 0 1px 10px 0 rgba( $elevation, .12 ) !default;
+$kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .2 ), 0 4px 5px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .14 ), 0 1px 10px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .12 ) !default;
 
 $kendo-orgchart-node-group-title-font-size: $kendo-font-size-xl !default;
 $kendo-orgchart-node-group-title-margin-bottom: k-math-div( $kendo-orgchart-spacer, 4 ) !default;

package/scss/pager/_variables.scss

@@ -65,14 +65,14 @@ $kendo-pager-line-height: $kendo-line-height-md !default;
 $kendo-pager-bg: $kendo-component-bg !default;
 /// The text color of the Pager.
 /// @group pager
-$kendo-pager-text: if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) !default;
+$kendo-pager-text: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) !default;
 /// The border color of the Pager.
 /// @group pager
 $kendo-pager-border: $kendo-component-border !default;
 
 /// The background color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-bg: k-try-shade( $kendo-pager-bg, .5 ) !default;
+$kendo-pager-focus-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 )) !default;
 /// The box shadow of the focused Pager.
 /// @group pager
 $kendo-pager-focus-shadow: null !default;

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;