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

package/scss/dataviz/_variables.scss

@@ -5,51 +5,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: $blue !default;
-$kendo-series-a-dark: k-color-mix( black, $kendo-series-a, 25% ) !default;
-$kendo-series-a-darker: k-color-mix( black, $kendo-series-a, 50% ) !default;
-$kendo-series-a-light: k-color-mix( white, $kendo-series-a, 25% ) !default;
-$kendo-series-a-lighter: k-color-mix( white, $kendo-series-a, 50% ) !default;
+$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $blue) !default;
+$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix( black, $kendo-series-a, 25% )) !default;
+$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix( black, $kendo-series-a, 50% )) !default;
+$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix( white, $kendo-series-a, 25% )) !default;
+$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix( white, $kendo-series-a, 50% )) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: $purple !default;
-$kendo-series-b-dark: k-color-mix( black, $kendo-series-b, 25% ) !default;
-$kendo-series-b-darker: k-color-mix( black, $kendo-series-b, 50% ) !default;
-$kendo-series-b-light: k-color-mix( white, $kendo-series-b, 25% ) !default;
-$kendo-series-b-lighter: k-color-mix( white, $kendo-series-b, 50% ) !default;
+$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $purple) !default;
+$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix( black, $kendo-series-b, 25% )) !default;
+$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix( black, $kendo-series-b, 50% )) !default;
+$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix( white, $kendo-series-b, 25% )) !default;
+$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix( white, $kendo-series-b, 50% )) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: $teal !default;
-$kendo-series-c-dark: k-color-mix( black, $kendo-series-c, 25% ) !default;
-$kendo-series-c-darker: k-color-mix( black, $kendo-series-c, 50% ) !default;
-$kendo-series-c-light: k-color-mix( white, $kendo-series-c, 25% ) !default;
-$kendo-series-c-lighter: k-color-mix( white, $kendo-series-c, 50% ) !default;
+$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), $teal) !default;
+$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix( black, $kendo-series-c, 25% )) !default;
+$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix( black, $kendo-series-c, 50% )) !default;
+$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix( white, $kendo-series-c, 25% )) !default;
+$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix( white, $kendo-series-c, 50% )) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: $green !default;
-$kendo-series-d-dark: k-color-mix( black, $kendo-series-d, 25% ) !default;
-$kendo-series-d-darker: k-color-mix( black, $kendo-series-d, 50% ) !default;
-$kendo-series-d-light: k-color-mix( white, $kendo-series-d, 25% ) !default;
-$kendo-series-d-lighter: k-color-mix( white, $kendo-series-d, 50% ) !default;
+$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $green) !default;
+$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix( black, $kendo-series-d, 25% )) !default;
+$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix( black, $kendo-series-d, 50% )) !default;
+$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix( white, $kendo-series-d, 25% )) !default;
+$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix( white, $kendo-series-d, 50% )) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: $yellow !default;
-$kendo-series-e-dark: k-color-mix( black, $kendo-series-e, 25% ) !default;
-$kendo-series-e-darker: k-color-mix( black, $kendo-series-e, 50% ) !default;
-$kendo-series-e-light: k-color-mix( white, $kendo-series-e, 25% ) !default;
-$kendo-series-e-lighter: k-color-mix( white, $kendo-series-e, 50% ) !default;
+$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $yellow) !default;
+$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix( black, $kendo-series-e, 25% )) !default;
+$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix( black, $kendo-series-e, 50% )) !default;
+$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix( white, $kendo-series-e, 25% )) !default;
+$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix( white, $kendo-series-e, 50% )) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: $red !default;
-$kendo-series-f-dark: k-color-mix( black, $kendo-series-f, 25% ) !default;
-$kendo-series-f-darker: k-color-mix( black, $kendo-series-f, 50% ) !default;
-$kendo-series-f-light: k-color-mix( white, $kendo-series-f, 25% ) !default;
-$kendo-series-f-lighter: k-color-mix( white, $kendo-series-f, 50% ) !default;
+$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $red) !default;
+$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix( black, $kendo-series-f, 25% )) !default;
+$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix( black, $kendo-series-f, 50% )) !default;
+$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix( white, $kendo-series-f, 25% )) !default;
+$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix( white, $kendo-series-f, 50% )) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -100,13 +100,13 @@ $kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$kendo-chart-major-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+$kendo-chart-major-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$kendo-chart-minor-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default;
+$kendo-chart-minor-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default;
 
-$kendo-chart-inactive: rgba( $kendo-body-text, .5 ) !default;
+$kendo-chart-inactive: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-body-text), .5 ) !default;
 $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .3 !default;
@@ -117,20 +117,20 @@ $kendo-chart-bg: $kendo-component-bg !default;
 $kendo-chart-text: $kendo-component-text !default;
 $kendo-chart-border: $kendo-component-border !default;
 
-$kendo-chart-crosshair-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-crosshair-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
-$kendo-chart-crosshair-shared-tooltip-background: k-try-shade( $kendo-chart-bg, 1 ) !default;
-$kendo-chart-crosshair-shared-tooltip-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default;
+$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-chart-bg, 1 )) !default;
+$kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))), .08) !default;
 
-$kendo-chart-notes-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$kendo-chart-notes-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$kendo-chart-notes-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-notes-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-notes-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-notes-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
 
-$kendo-chart-error-bars-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-error-bars-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
 
 $kendo-chart-selection-handle-size: 22px !default;
-$kendo-chart-selection-border-color: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default;
+$kendo-chart-selection-border-color: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .15) !default;
 
 
 // TreeMap

package/scss/dock-manager/_variables.scss

@@ -107,7 +107,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: rgba( $kendo-color-primary, .16 ) !default;
+$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;

package/scss/drawer/_variables.scss

@@ -36,5 +36,5 @@ $kendo-drawer-focus-shadow: inset 0 0 0 2px rgba( black, .15 ) !default;
 
 $kendo-drawer-selected-bg: $kendo-selected-bg !default;
 $kendo-drawer-selected-text: $kendo-selected-text !default;
-$kendo-drawer-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
+$kendo-drawer-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) !default;
 $kendo-drawer-selected-hover-text: $kendo-selected-text !default;

package/scss/dropzone/_variables.scss

@@ -25,7 +25,7 @@ $kendo-dropzone-line-height: $kendo-line-height-md !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ) !default;
+$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )) !default;
 /// The text color of the DropZone.
 /// @group dropzone
 $kendo-dropzone-text: $kendo-component-text !default;
@@ -38,7 +38,7 @@ $kendo-dropzone-border: $kendo-component-border !default;
 $kendo-dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: k-try-tint( $kendo-dropzone-text, 8 ) !default;
+$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 )) !default;
 /// The text color of the hovered DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-hover-text: $kendo-color-primary !default;

package/scss/editor/_variables.scss

@@ -29,7 +29,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: k-color-mix( $kendo-color-primary, #ffffff, 20% ) !default;
+$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor

package/scss/fab/_theme.scss

@@ -10,7 +10,7 @@
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             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;
         }
     }
@@ -19,9 +19,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:hover,
         .k-fab-solid-#{$name}.k-hover {
-            border-color: k-color-darken( $color, 10% );
-            color: k-contrast-color( k-color-darken( $color, 7.5% ) );
-            background-color: k-color-darken( $color, 7.5% );
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 10% ));
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( k-color-darken( $color, 7.5% ) ));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 7.5% ));
         }
     }
 
@@ -29,7 +29,7 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:focus,
         .k-fab-solid-#{$name}.k-focus {
-            outline: $kendo-fab-outline-width $kendo-fab-outline-style rgba( $color, .5 );
+            outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, rgba( k-color( $name, true ), .5 ), rgba( $color, .5 ));
         }
     }
 
@@ -39,9 +39,9 @@
         .k-fab-solid-#{$name}.k-active,
         .k-fab-solid-#{$name}.k-selected {
             @include box-shadow( $kendo-fab-active-shadow );
-            border-color: k-color-darken( $color, 12.5% );
-            color: k-contrast-color( k-color-darken( $color, 10% ) );
-            background-color: k-color-darken( $color, 10% );
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 12.5% ));
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( k-color-darken( $color, 10% ) ));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 10% ));
         }
     }
 
@@ -50,8 +50,8 @@
         .k-fab-solid-#{$name}:disabled,
         .k-fab-solid-#{$name}.k-disabled {
             @include box-shadow( $kendo-fab-disabled-shadow );
-            background-color: k-try-tint( $color, 4.5 );
-            color: k-try-tint( k-contrast-color( $color ), 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .65 ), k-try-tint( $color, 4.5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-try-tint( k-contrast-color( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -80,11 +80,11 @@
     .k-fab-item:hover .k-fab-item-icon,
     .k-fab-item.k-hover .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-shadow );
-        outline: $kendo-fab-border-width $kendo-fab-item-outline-style k-try-darken( $kendo-fab-item-icon-border, 10% );
+        outline: $kendo-fab-border-width $kendo-fab-item-outline-style if($kendo-enable-color-system, k-color( base-hover ), k-try-darken( $kendo-fab-item-icon-border, 10% ));
         outline-offset: -$kendo-fab-border-width;
-        border-color: k-color-darken( $kendo-fab-item-icon-border, 10% );
-        color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) );
-        background-color: k-color-darken( $kendo-fab-item-icon-bg, 7.5% );
+        border-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-border, 10% ));
+        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) ));
+        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-bg, 7.5% ));
     }
 
     // Focus state
@@ -92,18 +92,18 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style rgba( $kendo-fab-item-icon-border, .5 );
+        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, rgba( k-color( base, true ), .5 ), rgba( $kendo-fab-item-icon-border, .5 ));
     }
 
     // Active state
     .k-fab-item:active .k-fab-item-icon,
     .k-fab-item.k-active .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-active-shadow );
-        outline: $kendo-fab-border-width solid k-color-darken( $kendo-fab-item-icon-border, 12.5% );
+        outline: $kendo-fab-border-width solid if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
         outline-offset: -$kendo-fab-border-width;
-        border-color: k-color-darken( $kendo-fab-item-icon-border, 12.5% );
-        color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 10% ) );
-        background-color: k-color-darken( $kendo-fab-item-icon-bg, 10% );
+        border-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
+        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 10% ) ));
+        background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-bg, 10% ));
     }
 
     // Disabled state
@@ -114,8 +114,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 ), .65 ), k-try-tint( $kendo-fab-item-bg, 8 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-try-tint( $kendo-fab-item-text, 8 ));
         }
     }
 

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/filter/_variables.scss

@@ -27,4 +27,4 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;

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( on-base ), 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;
@@ -27,24 +27,24 @@ $kendo-gantt-dot-border: null !default;
 $kendo-gantt-dot-hover-bg: $kendo-gantt-bg !default;
 $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
 
-$kendo-gantt-milestone-bg: if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 ) !default;
-$kendo-gantt-milestone-border: k-try-shade( $kendo-gantt-milestone-bg, 2 ) !default;
+$kendo-gantt-milestone-bg: if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 )) !default;
+$kendo-gantt-milestone-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-gantt-milestone-bg, 2 )) !default;
 $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
 $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
-$kendo-gantt-summary-bg: k-color-mix( $kendo-gantt-text, $kendo-gantt-bg ) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
 $kendo-gantt-summary-progress-bg: $kendo-gantt-text !default;
-$kendo-gantt-summary-selected-bg: k-color-mix( $kendo-selected-bg, $kendo-gantt-bg ) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
 $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !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: 1px !default;
-$kendo-gantt-task-bg: if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 ) !default;
-$kendo-gantt-task-text: k-contrast-color( $kendo-gantt-task-bg ) !default;
-$kendo-gantt-task-border: if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 ) !default;
-$kendo-gantt-task-progress-bg: if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 ) !default;
-$kendo-gantt-task-selected-bg: k-color-mix( $kendo-selected-bg, $kendo-gantt-bg ) !default;
+$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 )) !default;
+$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-task-bg )) !default;
+$kendo-gantt-task-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 )) !default;
+$kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 )) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;
 $kendo-gantt-task-selected-border: $kendo-selected-bg !default;
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !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: 45% !default;

package/scss/grid/_theme.scss

@@ -205,14 +205,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 );
+            }
         }
 
 
@@ -234,7 +250,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;
+            }
         }
     }
 
@@ -278,14 +302,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
@@ -323,7 +363,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

@@ -219,10 +219,10 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 /// @group grid
 $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
 
-$kendo-grid-grouping-row-bg: k-try-shade( $kendo-grid-bg ) !default;
+$kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-grid-bg )) !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
-$kendo-grid-sorted-bg: rgba( k-contrast-color( $kendo-grid-bg ), .02 ) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .02 ), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: ($kendo-icon-size * .75) !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -237,11 +237,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-grid-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
-$kendo-grid-sticky-border: rgba($kendo-grid-text, .5) !default;
+$kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba($kendo-grid-text, .5)) !default;
 
-$kendo-grid-sticky-alt-bg: k-try-shade( $kendo-grid-bg, .5 ) !default;
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-grid-bg, .5 )) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -250,11 +252,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-sticky-footer-bg !default;
 
-$kendo-grid-sticky-selected-bg: k-color-mix( $kendo-selected-bg, $kendo-grid-bg, 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, $kendo-grid-bg, 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-try-shade( $kendo-grid-bg ) !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-subtle-hover ), k-try-shade( $kendo-grid-bg )) !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: 250px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -305,7 +308,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/_variables.scss

@@ -167,7 +167,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-base-text !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: rgba( $kendo-base-text, .5 ) !default;
+$kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 )) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -365,14 +365,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-app-surface, 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-color( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $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;
@@ -412,7 +412,7 @@ $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, .08 ) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 )) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;

package/scss/list/_variables.scss

@@ -220,7 +220,7 @@ $kendo-list-item-focus-bg: null !default;
 $kendo-list-item-focus-text: null !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-list-text, .15 ) !default;
+$kendo-list-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 )) !default;
 
 /// The background color of the selected List items.
 /// @group list

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;
@@ -57,4 +57,4 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-listview-text, .15 ) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) !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;