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

package/scss/fab/_theme.scss

@@ -7,7 +7,7 @@
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -16,8 +16,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: k-try-shade( $color, .5 );
-            background-color: k-try-shade( $color, .5 );
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
         }
     }
 
@@ -28,7 +28,7 @@
             @if $kendo-enable-focus-contrast {
                 @include box-shadow( inset 0 0 0 2px currentColor );
             } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 );
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 ));
             }
         }
     }
@@ -39,8 +39,8 @@
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
             @include box-shadow($kendo-fab-active-shadow);
-            border-color: k-try-shade( $color, 1.5);
-            background-color: k-try-shade( $color, 1.5);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
         }
     }
 
@@ -49,8 +49,8 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: k-try-tint( $color, 5 );
-            color: k-try-tint( k-contrast-legacy( $color ), 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -79,8 +79,8 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
-        background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
+        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
+        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
     }
 
     // Focus state
@@ -89,7 +89,7 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+            @include box-shadow( inset 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-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }
@@ -99,8 +99,8 @@
     .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-try-shade( $kendo-fab-item-icon-border, 1);
-        background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
+        border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
+        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
     }
 
     // Disabled state
@@ -111,8 +111,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, 5 );
-            color: k-try-tint( $kendo-fab-item-text, 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 ));
         }
     }
 

package/scss/filemanager/_layout.scss

@@ -22,6 +22,7 @@
         border-bottom-width: $kendo-file-manager-toolbar-border-width;
         border-color: inherit;
         flex-shrink: 0;
+        z-index: 1;
     }
 
 
@@ -36,6 +37,10 @@
         overflow: hidden;
     }
 
+    .k-filemanager-splitter {
+        border-width: 0;
+    }
+
 
     // Navigation
     .k-filemanager-navigation {

package/scss/filemanager/_variables.scss

@@ -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/floating-label/_layout.scss

@@ -24,8 +24,8 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             position: absolute;
-            top: $kendo-floating-label-offset-y;
-            left: $kendo-floating-label-offset-x;
+            top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
+            left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
             overflow: hidden;
             cursor: text;
             transform-origin: left center;
@@ -39,8 +39,8 @@
 
         &.k-empty {
             > .k-label {
-                top: $kendo-floating-label-offset-y;
-                left: $kendo-floating-label-offset-x;
+                top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
+                left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 transform: scale( $kendo-floating-label-scale );
                 pointer-events: none;
             }
@@ -48,13 +48,13 @@
 
         > .k-label,
         &.k-focus > .k-label {
-            top: $kendo-floating-label-focus-offset-y;
-            left: $kendo-floating-label-focus-offset-x;
+            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
+            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
         &:focus-within > .k-label {
-            top: $kendo-floating-label-focus-offset-y;
-            left: $kendo-floating-label-focus-offset-x;
+            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
+            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
 
@@ -74,18 +74,18 @@
             &.k-empty {
                 > .k-label {
                     left: auto;
-                    right: $kendo-floating-label-offset-x;
+                    right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 }
             }
 
             > .k-label,
             &.k-focus > .k-label {
                 left: auto;
-                right: $kendo-floating-label-focus-offset-x;
+                right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }
             &:focus-within > .k-label {
                 left: auto;
-                right: $kendo-floating-label-focus-offset-x;
+                right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }
         }
     }

package/scss/forms/_variables.scss

@@ -151,7 +151,7 @@ $kendo-fieldset-border: null !default;
 $kendo-fieldset-legend-bg: null !default;
 /// The text color of the Form legend.
 /// @group form
-$kendo-fieldset-legend-text: k-try-shade( $kendo-body-text, 2 ) !default;
+$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: null !default;

package/scss/gantt/_layout.scss

@@ -291,12 +291,20 @@
 
 
     // Timeline
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
 
-        .k-timeline {
+        .k-gantt-timeline {
             height: 100%;
             border-width: 0;
             display: flex;
+
+            *,
+            *::before,
+            *::after,
+            &::before,
+            &::after {
+                box-sizing: border-box;
+            }
         }
         .k-grid-header {}
         .k-grid-content {
@@ -772,7 +780,7 @@
         }
 
         .k-gantt,
-        .k-gantt-timeline,
+        .k-gantt-timeline-pane,
         .k-gantt-dependencies {
             width: auto !important; // stylelint-disable-line declaration-no-important
             height: auto !important; // stylelint-disable-line declaration-no-important
@@ -817,7 +825,7 @@
             margin-inline: -26px;
         }
 
-        .k-gantt-timeline {
+        .k-gantt-timeline-pane {
             .k-header {
                 border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
@@ -877,7 +885,7 @@
             margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
         }
 
-        .k-gantt-timeline .k-milestone-wrap .k-task-start {
+        .k-gantt-timeline-pane .k-milestone-wrap .k-task-start {
             right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
         }
 

package/scss/gantt/_variables.scss

@@ -16,12 +16,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-legacy( $kendo-gantt-bg ), .025 ) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-legacy( $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-contrast-legacy( $kendo-gantt-bg ) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default;
 $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
 
 $kendo-gantt-dot-size: 8px !default;
@@ -36,19 +36,19 @@ $kendo-gantt-milestone-border: $kendo-gantt-border !default;
 $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
 $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
-$kendo-gantt-summary-bg: k-try-tint( $kendo-gantt-text, 1 ) !default;
-$kendo-gantt-summary-progress-bg: k-try-shade( $kendo-gantt-text, 5 ) !default;
-$kendo-gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
+$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
 $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
 
 $kendo-gantt-task-border-width: 0px !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-bg: k-try-tint( $kendo-gantt-text, 2 ) !default;
-$kendo-gantt-task-text: k-contrast-legacy( $kendo-gantt-text ) !default;
+$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
+$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) !default;
 $kendo-gantt-task-border: null !default;
 $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
-$kendo-gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;
 $kendo-gantt-task-selected-border: null !default;
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
@@ -82,10 +82,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/_layout.scss

@@ -778,6 +778,16 @@
         }
     }
 
+    .k-master-row .k-grid-content-sticky::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+    }
+
     kendo-grid {
         .k-table-row.k-grid-row-sticky {
             border: 0;

package/scss/grid/_theme.scss

@@ -270,14 +270,30 @@
         &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
         &.k-table-row td.k-grid-content-sticky.k-selected,
         &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
         }
 
         &.k-selected.k-table-alt-row td.k-grid-content-sticky,
         &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
         }
 
 
@@ -299,7 +315,15 @@
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
-            background-color: $kendo-grid-sticky-selected-hover-bg;
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
         }
     }
 
@@ -345,14 +369,30 @@
         .k-selected.k-grid-row-sticky .k-table-td,
         .k-grid-row-sticky .k-table-td.k-selected,
         .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
         }
 
         .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
         .k-selected.k-table-alt-row.k-grid-row-sticky td,
         .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
         .k-table-alt-row .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
         }
 
         // Hover state
@@ -390,7 +430,15 @@
         .k-grid-row-sticky.k-hover .k-table-td.k-selected,
         .k-table-row:hover .k-grid-content-sticky.k-selected,
         .k-table-row.k-hover .k-grid-content-sticky.k-selected {
-            background-color: $kendo-grid-sticky-selected-hover-bg;
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
         }
     }
 

package/scss/grid/_variables.scss

@@ -222,7 +222,7 @@ $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
-$kendo-grid-sorted-bg: rgba( k-contrast-legacy( $kendo-grid-bg ), .02 ) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -236,11 +236,13 @@ $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-component-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: rgba( black, .3 ) !default;
 
-$kendo-grid-sticky-alt-bg: k-color-shade($kendo-grid-bg, 3.5%) !default;
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -249,11 +251,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$kendo-grid-sticky-selected-bg: k-color-mix($kendo-selected-bg, #ffffff, 25%) !default;
-$kendo-grid-sticky-selected-alt-bg: k-color-shade($kendo-grid-sticky-selected-bg, .4) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
+$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
 
-$kendo-grid-sticky-hover-bg: k-color-darken($kendo-grid-bg, 8%) !default;
-$kendo-grid-sticky-selected-hover-bg: k-color-shade($kendo-grid-sticky-selected-bg, .7) !default;
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -304,7 +307,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !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 ), .12 )) !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/_layout.scss

@@ -213,16 +213,21 @@
         margin: 0;
         border-style: solid;
         border-color: inherit;
-        height: auto;
-        align-self: stretch;
+        border-width: 0 0 0 1px;
+        height: $kendo-icon-size;
+        align-self: center;
 
         &-horizontal {
+            height: auto;
             margin-inline: $kendo-input-md-padding-y;
+            align-self: stretch;
             border-width: 1px 0 0;
         }
 
         &-vertical {
+            height: auto;
             margin-block: $kendo-input-md-padding-y;
+            align-self: stretch;
             border-width: 0 0 0 1px;
         }
     }

package/scss/input/_variables.scss

@@ -118,7 +118,7 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
@@ -134,7 +134,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
+$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -167,7 +167,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-input-text !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
+$kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -177,7 +177,7 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 /// The border color of the outline hovered Input components.
 /// @group input
-$kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
+$kendo-input-outline-hover-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -372,14 +372,14 @@ $kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
 /// The border color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
+$kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
 /// The text color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) !default;
 /// The border color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
@@ -419,13 +419,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
 /// The border color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
+$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker

package/scss/list/_theme.scss

@@ -58,7 +58,7 @@
         &.k-selected:hover,
         &.k-selected.k-hover {
             color: $kendo-list-item-selected-text;
-            background-color: k-color-shade( $kendo-list-item-selected-bg );
+            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
         }
     }
 

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( $kendo-selected-bg, .25 ) !default;
+$kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-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/_theme.scss

@@ -14,7 +14,7 @@
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
         background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px rgba( $kendo-media-player-text, .5 );
+        text-shadow: 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-media-player-text, .5 ));
     }
 
 }

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/messagebox/_theme.scss

@@ -2,11 +2,19 @@
 
     @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
-            @include fill(
-                k-color-level( $color, $kendo-message-box-text-level ),
-                k-color-level( $color, $kendo-message-box-bg-level ),
-                k-color-level( $color, $kendo-message-box-border-level )
-            );
+            @if $color-name == "inverse" {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            } @else {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            }
         }
     }
 

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-legacy( $color ),
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
             background-color: $color,
             border: $color,
         )), $_theme );