@progress/kendo-theme-classic 7.1.0-dev.0 → 7.1.0-dev.10

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-contrast-color( $kendo-gantt-bg ) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-bg )) !default;
 $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
 
 $kendo-gantt-dot-size: 8px !default;
@@ -32,19 +32,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-color( $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-subtle ), k-contrast-color( $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;
@@ -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/_variables.scss

@@ -227,14 +227,14 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !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 ), .03 ), 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-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
 $kendo-grid-sorting-index-spacing-y: k-math-div( $kendo-icon-spacing, 2 ) !default;
 $kendo-grid-sorting-index-spacing-x: -$kendo-grid-sorting-index-spacing-y !default;
 
-$kendo-grid-grouping-row-bg: k-try-shade( $kendo-grid-bg, 1 ) !default;
+$kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-grid-bg, 1 )) !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;
@@ -243,11 +243,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: $kendo-grid-border !default;
 
-$kendo-grid-sticky-alt-bg: $kendo-grid-alt-bg !default;
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-grid-alt-bg) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -256,11 +258,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-try-shade( $kendo-grid-sticky-selected-bg, .5 ) !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 ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
 
-$kendo-grid-sticky-hover-bg: $kendo-grid-hover-bg !default;
-$kendo-grid-sticky-selected-hover-bg: k-try-shade( $kendo-grid-sticky-selected-bg, 1 ) !default;
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-grid-hover-bg) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -311,7 +314,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/index.scss

@@ -152,6 +152,7 @@
 @import "./pdf-viewer/_index.scss";
 @import "./scroller/_index.scss";
 @import "./scrollview/_index.scss";
+@import "./prompt/_index.scss";
 
 
 // Dataviz
@@ -321,6 +322,7 @@
     @include kendo-pdf-viewer--styles();
     @include kendo-scroller--styles();
     @include kendo-scrollview--styles();
+    @include kendo-prompt--styles();
 
 
     // Dataviz

package/scss/input/_variables.scss

@@ -168,7 +168,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: null !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-app-surface, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -178,7 +178,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-app-surface, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -271,11 +271,17 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: $kendo-input-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
 
 /// The border color of the invalid Input components.
 /// @group input
@@ -284,6 +290,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default;
 /// @group input
 $kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
 
+/// The border color of the valid Input components.
+/// @group input
+$kendo-input-valid-border: $kendo-valid-border !default;
+/// The shadow of the valid Input components.
+/// @group input
+$kendo-input-valid-shadow: $kendo-valid-shadow !default;
+
 /// The background color of the Picker components.
 /// @group picker
 $kendo-picker-bg: $kendo-button-bg !default;
@@ -356,14 +369,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;
@@ -403,13 +416,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-app-surface, 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, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 )) !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker

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/_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

@@ -32,7 +32,7 @@ $kendo-menu-item-expanded-text: $kendo-component-text !default;
 $kendo-menu-item-expanded-border: null !default;
 $kendo-menu-item-expanded-gradient: null !default;
 
-$kendo-menu-item-focus-shadow: inset 0 0 3px 1px rgba( $kendo-menu-text, .25 ) !default;
+$kendo-menu-item-focus-shadow: inset 0 0 3px 1px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-menu-text, .25 )) !default;
 
 $kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 

package/scss/notification/_variables.scss

@@ -1,5 +1,10 @@
 // Notification
 
+
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 8px !default;
@@ -43,7 +48,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 );

package/scss/panelbar/_variables.scss

@@ -47,7 +47,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-header-selected-border: $kendo-selected-border !default;
 $kendo-panelbar-header-selected-gradient: null !default;
 
-$kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default;
+$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !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;
@@ -62,8 +62,7 @@ $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-subtle-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;
@@ -84,7 +83,7 @@ $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-shade( $kendo-panelbar-item-selected-bg ) !default;
+$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !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;

package/scss/pivotgrid/_variables.scss

@@ -22,21 +22,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default;
 $kendo-pivotgrid-text: $kendo-component-text !default;
 $kendo-pivotgrid-border: $kendo-component-border !default;
 
-$kendo-pivotgrid-alt-border: k-try-shade( $kendo-pivotgrid-border, 2 ) !default;
+$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
 
 $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
 $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default;
+$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
 $kendo-pivotgrid-total-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-total-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-hover-bg: k-color-darken( $kendo-pivotgrid-bg, 7% ) !default;
+$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
 $kendo-pivotgrid-hover-text: null !default;
 $kendo-pivotgrid-hover-border: null !default;
 
-$kendo-pivotgrid-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 $kendo-pivotgrid-selected-text: null !default;
 $kendo-pivotgrid-selected-border: null !default;
 
@@ -105,7 +105,7 @@ $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
 $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 
 $kendo-pivotgrid-container-bg: $kendo-component-bg !default;
-$kendo-pivotgrid-row-headers-bg: k-try-shade( $kendo-component-bg, 2 ) !default;
+$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 2 )) !default;
 
 $kendo-pivotgrid-button-bg: null !default;
 $kendo-pivotgrid-button-text: null !default;

package/scss/progressbar/_variables.scss

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

package/scss/prompt/_index.scss

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

package/scss/prompt/_layout.scss

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

package/scss/prompt/_theme.scss

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

package/scss/prompt/_variables.scss

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

package/scss/scheduler/_variables.scss

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

package/scss/scrollview/_variables.scss

@@ -37,7 +37,7 @@ $kendo-scrollview-pagebutton-border: $kendo-button-border !default;
 $kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
 /// The primary border color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-border: k-try-shade( $kendo-color-primary, 2 ) !default;
+$kendo-scrollview-pagebutton-primary-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) !default;
 /// The box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;

package/scss/signature/_variables.scss

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

package/scss/skeleton/_variables.scss

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

package/scss/slider/_variables.scss

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

package/scss/splitter/_variables.scss

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

package/scss/spreadsheet/_variables.scss

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