@progress/kendo-theme-fluent 7.2.1-dev.6 → 7.2.1-dev.8

package/scss/grid/_theme.scss

@@ -239,7 +239,7 @@
             }
             &:focus,
             &.k-focus {
-                box-shadow: inset 0 0 0 2px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .1 );
+                box-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 10%, transparent), rgba( $kendo-color-black, .1 ));
             }
             &.k-active {
                 @include fill(

package/scss/grid/_variables.scss

@@ -401,7 +401,7 @@ $kendo-grid-sticky-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 /// Border color of the grid sticky cell.
 /// @group grid
-$kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 )) !default;
 /// Alt background color of the grid sticky cell.
 /// @group grid
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -574,7 +574,7 @@ $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
 /// Active background color of the grid row indicator
 /// @group grid
 $kendo-grid-row-resizer-active-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/imageeditor/_variables.scss

@@ -10,7 +10,7 @@ $kendo-image-editor-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-image-editor-text: var( --kendo-component-text, inherit ) !default;
 /// Border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-image-editor-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// Vertical margin of the imageeditor.
 /// @group imageeditor
 $kendo-image-editor-margin-y: 0 !default;
@@ -39,7 +39,7 @@ $kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// Imageeditor content background color.
 /// @group imageeditor
-$kendo-image-editor-content-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-image-editor-content-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
 /// Imageeditor content text color.
 /// @group imageeditor
 $kendo-image-editor-content-text: inherit !default;

package/scss/input/_layout.scss

@@ -144,11 +144,6 @@
         &:invalid {
             box-shadow: none;
         }
-
-        // Valid
-        &:valid {
-            box-shadow: none;
-        }
     }
     span.k-input-inner {
         white-space: nowrap;
@@ -450,7 +445,6 @@
 
         }
 
-        &.k-valid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {

package/scss/input/_theme.scss

@@ -91,30 +91,6 @@
             }
         }
 
-        // Valid
-        &.k-valid {
-            --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
-
-            &::after {
-                border-color: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
-            }
-
-            .k-input-validation-icon {
-                color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
-            }
-
-            &:focus:hover,
-            &.k-focus:hover,
-            &:focus.k-hover,
-            &.k-focus.k-hover {
-                --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
-
-                .k-input-validation-icon {
-                    color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
-                }
-            }
-        }
-
         // Prefix & Suffix
         .k-input-prefix {
             color: var( --kendo-input-prefix-text, #{$kendo-input-prefix-text} );
@@ -199,30 +175,6 @@
                 }
             }
         }
-
-        // Valid
-        &.k-valid {
-            --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
-
-            &::after {
-                border-color: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
-            }
-
-            .k-input-validation-icon {
-                color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
-            }
-
-            &:focus:hover,
-            &.k-focus:hover,
-            &:focus.k-hover,
-            &.k-focus.k-hover {
-                --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
-
-                .k-input-validation-icon {
-                    color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} );
-                }
-            }
-        }
     }
 
     @each $component, $fill-modes in $kendo-input-theme-colors {

package/scss/input/_variables.scss

@@ -323,7 +323,7 @@ $kendo-picker-solid-disabled-text: $kendo-disabled-text !default;
 
 /// The background color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-solid-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-picker-solid-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The border color of the disabled solid Picker components.
 /// @group input
@@ -659,13 +659,6 @@ $kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
 $kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
 $kendo-valid-shadow: null !default;
 
-/// The border color of the valid Input components.
-/// @group input
-$kendo-input-valid-border: var( --kendo-valid-border, #{$kendo-valid-border} ) !default;
-/// The text color of the valid Input components.
-/// @group input
-$kendo-input-valid-text: var( --kendo-valid-text, #{$kendo-valid-text} ) !default;
-
 /// The text color of the Input placeholder.
 /// @group input
 $kendo-input-placeholder-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;

package/scss/list/_variables.scss

@@ -258,7 +258,7 @@ $kendo-list-item-selected-hover-text: if($kendo-enable-color-system, k-color( on
 $kendo-list-item-disabled-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The text color of the disabled List items.
 /// @group list
-$kendo-list-item-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-list-item-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
 
 /// The background color of the List group items.
 /// @group list

package/scss/mediaplayer/_variables.scss

@@ -43,7 +43,7 @@ $kendo-media-player-titlebar-padding-x: map.get( $kendo-spacing, 2 ) !default;
 $kendo-media-player-titlebar-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Mediaplayer titlebar background color.
 /// @group mediaplayer
-$kendo-media-player-titlebar-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 ) !default;
+$kendo-media-player-titlebar-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 )) !default;
 /// Mediaplayer titlebar text color.
 /// @group mediaplayer
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;

package/scss/orgchart/_variables.scss

@@ -60,7 +60,7 @@ $kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface )
 $kendo-orgchart-node-group-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// The border color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-orgchart-node-group-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
@@ -146,7 +146,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
 $kendo-orgchart-line-size: 1px !default;
 /// The fill color of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-text: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-orgchart-line-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// The height of the OrgChart connecting line.
 /// @group orgchart
 $kendo-orgchart-line-v-height: 25px !default;

package/scss/progressbar/_variables.scss

@@ -67,10 +67,10 @@ $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size
 
 /// The background color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-progressbar-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
 /// The text color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-progressbar-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
 /// The border color of the disabled ProgressBar.
 /// @group progressbar
 $kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;

package/scss/radio/_variables.scss

@@ -94,10 +94,10 @@ $kendo-radio-focus-outline-offset: 2px !default;
 $kendo-radio-disabled-bg: $kendo-radio-bg !default;
 /// The color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-radio-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-radio-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The background color of the disabled and checked RadioButton.
 /// @group radio

package/scss/signature/_variables.scss

@@ -38,10 +38,10 @@ $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
 /// The color of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-color: rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 ) !default;
+$kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 )) !default;
 /// The color of the row line of the disabled signature component.
 /// @group signature
-$kendo-signature-line-disabled-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-signature-line-disabled-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-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 ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) !default;

package/scss/slider/_variables.scss

@@ -33,19 +33,19 @@ $kendo-slider-track-size: map.get( $kendo-spacing, 1 ) !default;
 $kendo-slider-track-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the Slider track.
 /// @group slider
 $kendo-slider-track-border: inherit !default;
 /// The background color of the hovered Slider track.
 /// @group slider
-$kendo-slider-track-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the hovered Slider track.
 /// @group slider
 $kendo-slider-track-hover-border: inherit !default;
 /// The background color of the focused Slider track.
 /// @group slider
-$kendo-slider-track-focus-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-focus-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the focused Slider track.
 /// @group slider
 $kendo-slider-track-focus-border: inherit !default;
@@ -124,16 +124,16 @@ $kendo-slider-thumb-focus-gradient: transparent !default;
 
 /// The text color of the disabled Slider.
 /// @group slider
-$kendo-slider-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-slider-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 )) !default;
 /// The background color of the disabled Slider track.
 /// @group slider
-$kendo-slider-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-slider-track-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
 /// The background color of the disabled Slider's track selection.
 /// @group slider
-$kendo-slider-selection-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-slider-selection-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
 /// The background color of the disabled Slider thumb.
 /// @group slider
-$kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 
 
 /// The transition speed of the Slider.

package/scss/split-button/_variables.scss

@@ -29,7 +29,7 @@ $kendo-split-button-arrow-delimiter-size: calc( #{$kendo-button-inner-calc-size}
 $kendo-split-button-arrow-delimiter-line-size: 1px !default;
 /// The background color of the SplitButton arrow delimiter.
 /// @group split-button
-$kendo-split-button-arrow-delimiter-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-split-button-arrow-delimiter-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The sizes map for the SplitButton.
 /// @group split-button

package/scss/stepper/_variables.scss

@@ -119,7 +119,7 @@ $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-
 
 /// 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 ), .22 ), k-get-theme-color-var( primary-30 )) !default;
+$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 )) !default;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-disabled-text: var( --kendo-disabled-text, initial ) !default;

package/scss/switch/_variables.scss

@@ -70,7 +70,7 @@ $kendo-switch-off-track-disabled-bg: var( --kendo-component-bg, transparent ) !d
 $kendo-switch-off-track-disabled-text: var( --kendo-component-text, inherit ) !default;
 /// The border color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-switch-off-track-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
@@ -94,13 +94,13 @@ $kendo-switch-off-thumb-hover-border: if($kendo-enable-color-system, k-color( bo
 
 /// The background of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-switch-off-thumb-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The text color of the thumb when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-disabled-text: inherit !default;
 /// The border color of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-switch-off-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 
 
 /// The background of the track when the Switch is checked.
@@ -135,7 +135,7 @@ $kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-bg !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
@@ -171,4 +171,4 @@ $kendo-switch-on-thumb-disabled-bg: if($kendo-enable-color-system, k-color( surf
 $kendo-switch-on-thumb-disabled-text: inherit !default;
 /// The border color of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-switch-on-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;

package/scss/table/_variables.scss

@@ -168,7 +168,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 ), .13 ), k-get-theme-color-var( primary-20 )) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 )) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: $kendo-table-text !default;
@@ -178,7 +178,7 @@ $kendo-table-selected-border: $kendo-table-border !default;
 
 /// Hover background color of selected rows in table.
 /// @group table
-$kendo-table-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 )) !default;
+$kendo-table-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 )) !default;
 /// Hover text color of selected rows in table.
 /// @group table
 $kendo-table-selected-hover-text: $kendo-table-selected-text !default;

package/scss/taskboard/_variables.scss

@@ -202,7 +202,7 @@ $kendo-taskboard-drag-placeholder-border-width: 1px !default;
 $kendo-taskboard-drag-placeholder-border-radius: $kendo-card-border-radius !default;
 /// The background color of the TaskBoard Card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
 /// The border color of the TaskBoard Card placeholder.
 /// @group taskboard
 $kendo-taskboard-drag-placeholder-border: var( --kendo-component-border, inherit ) !default;

package/scss/timeline/_variables.scss

@@ -65,7 +65,7 @@ $kendo-timeline-track-end-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2
 $kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-border-color: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-timeline-track-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The block end inset of the Timeline arrow.
 /// @group timeline
@@ -138,7 +138,7 @@ $kendo-timeline-card-header-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-timeline-card-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The border of the Timeline's Card body scroll.
 /// @group timeline
-$kendo-timeline-card-body-scroll-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-timeline-card-body-scroll-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// The background color of the Timeline's Card body scroll.
 /// @group timeline
 $kendo-timeline-card-body-scroll-bg: var( --kendo-component-bg, initial ) !default;

package/scss/toolbar/_variables.scss

@@ -57,7 +57,7 @@ $kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
 
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-separator-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-toolbar-separator-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The width of the input in the Toolbar.
 /// @group toolbar

package/scss/upload/_variables.scss

@@ -41,7 +41,7 @@ $kendo-upload-dropzone-text: if($kendo-enable-color-system, k-color( subtle ), k
 $kendo-upload-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-upload-dropzone-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-hover-bg: var( --kendo-hover-bg, inherit ) !default;