@progress/kendo-theme-material 7.2.1-dev.7 → 7.2.1

package/scss/scheduler/_theme.scss

@@ -7,13 +7,13 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba($kendo-selected-bg, .25));
+        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
     }
 
     // Agenda view
     .k-scheduler-agendaview {
         .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba($kendo-selected-bg, .25));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
         }
     }
 

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: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), rgba( $kendo-color-info, .24 )) !default;
+$kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 24%, transparent), 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: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), 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

@@ -93,7 +93,7 @@ $kendo-slider-draghandle-pressed-gradient: null !default;
 
 /// The shadow of the focused Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-focus-shadow: 0 0 0 11px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 11px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
 
 /// The transition speed of the Slider.
 /// @group slider

package/scss/spreadsheet/_variables.scss

@@ -94,7 +94,7 @@ $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
 
 /// The background color of the Spreadsheet selection.
 /// @group spreadsheet
-$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
 /// The text color of the Spreadsheet selection.
 /// @group spreadsheet
 $kendo-spreadsheet-selection-text: null !default;
@@ -128,7 +128,7 @@ $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-color-primary !def
 
 /// The background color of the Spreadsheet auto fill.
 /// @group spreadsheet
-$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
 /// The text color of the Spreadsheet auto fill.
 /// @group spreadsheet
 $kendo-spreadsheet-auto-fill-text: null !default;
@@ -140,7 +140,7 @@ $kendo-spreadsheet-auto-fill-border: $kendo-color-primary !default;
 $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-color-primary !default;
 /// The background color of the Spreadsheet auto fill punch.
 /// @group spreadsheet
-$kendo-spreadsheet-auto-fill-punch-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .5 ), rgba( $kendo-component-bg, .5 )) !default;
+$kendo-spreadsheet-auto-fill-punch-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 50%, transparent), rgba( $kendo-component-bg, .5 )) !default;
 
 /// The vertical padding of the Spreadsheet cell.
 /// @group spreadsheet
@@ -258,7 +258,7 @@ $kendo-spreadsheet-drawing-outline-width: 2px !default;
 
 /// The background color of the Spreadsheet drawing anchor.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
+$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
 
 /// The vertical spacing of the Spreadsheet DropZone.
 /// @group spreadsheet

package/scss/stepper/_variables.scss

@@ -103,7 +103,7 @@ $kendo-stepper-indicator-hover-border: null !default;
 $kendo-stepper-indicator-disabled-bg: null !default;
 /// The text color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), $kendo-disabled-text) !default;
+$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), $kendo-disabled-text) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-disabled-border: null !default;
@@ -130,7 +130,7 @@ $kendo-stepper-indicator-done-hover-border: null !default;
 
 /// The background color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
+$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) !default;
@@ -182,7 +182,7 @@ $kendo-stepper-label-error-text: $kendo-color-error !default;
 $kendo-stepper-label-hover-text: null !default;
 /// The text color of the disabled Stepper label.
 /// @group stepper
-$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), k-map-get( $theme, disabled-text )) !default;
+$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-map-get( $theme, disabled-text )) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper

package/scss/switch/_variables.scss

@@ -30,7 +30,7 @@ $kendo-switch-sizes: (
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 ) !default;
+$kendo-switch-off-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 38%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 )) !default;
 /// The text color of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-text: null !default;
@@ -112,7 +112,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 )) !default;
+$kendo-switch-on-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 54%, transparent), rgba( $kendo-color-primary, .54 )) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: null !default;

package/scss/table/_variables.scss

@@ -122,7 +122,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 )) !default;
+$kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .07 )) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -147,7 +147,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;

package/scss/treeview/_variables.scss

@@ -124,7 +124,7 @@ $kendo-treeview-border: null !default;
 
 /// The background color of hovered TreeView.
 /// @group treeview
-$kendo-treeview-item-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .07 ), rgba( $kendo-treeview-text, .07 )) !default;
+$kendo-treeview-item-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 7%, transparent), rgba( $kendo-treeview-text, .07 )) !default;
 /// The text color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-text: null !default;