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

package/dist/all.scss

@@ -3814,7 +3814,7 @@ $kendo-palettes: (
         color-on-subtle: k-color( #{$color}-on-subtle ),
         on-color: k-color( on-#{$color} ),
         color-on-surface: k-color( #{$color}-on-surface ),
-        on-color-disabled: rgba( k-color( on-#{$color}, true ), .46)
+        on-color-disabled: color-mix(in srgb, k-color( on-#{$color} ) 46%, transparent)
     );
 
     @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
@@ -4077,15 +4077,11 @@ $_default-colors: (
 $kendo-colors: $_default-colors !default;
 $kendo-colors: k-map-merge($_default-colors, $kendo-colors);
 
-@function k-color($key, $rgb: false) {
+@function k-color($key) {
     $_color: k-map-get($kendo-colors, $key);
 
     @if ($_color) {
-        @if ($rgb) {
-            @return var(--kendo-color-#{$key}-rgb, k-hex-to-rgb($_color));
-        } @else {
-            @return var(--kendo-color-#{$key}, $_color);
-        }
+        @return var(--kendo-color-#{$key}, $_color);
     } @else {
         @error "Color Variable \`#{$key}\` does not exists in the color collection.";
     }
@@ -4096,7 +4092,6 @@ $kendo-colors: k-map-merge($_default-colors, $kendo-colors);
         @each $key, $value in $kendo-colors {
             @if($value) {
                 --kendo-color-#{$key}: #{$value};
-                --kendo-color-#{$key}-rgb: #{k-hex-to-rgb($value)};
             }
         }
     }
@@ -16257,7 +16252,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
@@ -17911,7 +17906,7 @@ $kendo-table-group-row-border: $kendo-table-header-border !default;
 
 /// Background color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default;
+$kendo-table-alt-row-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default;
 /// Text color of alternating rows in table.
 /// @group table
 $kendo-table-alt-row-text: null !default;
@@ -17922,7 +17917,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 ), .11 ), k-color-darken($kendo-table-bg, 7%)) !default;
+$kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -17947,7 +17942,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 ), .25 ), rgba($kendo-selected-bg, .25)) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;
@@ -19210,7 +19205,7 @@ $kendo-button-focus-border: null !default;
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) !default;
+$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) !default;
 
 /// The base background of the disabled Button.
 /// @group button
@@ -19397,7 +19392,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -19434,7 +19429,7 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
@@ -19669,7 +19664,7 @@ $kendo-chip-list-sizes: (
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) );
                 }
 
                 &:hover,
@@ -19723,7 +19718,7 @@ $kendo-chip-list-sizes: (
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
@@ -19749,7 +19744,7 @@ $kendo-chip-list-sizes: (
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
@@ -20729,7 +20724,7 @@ $kendo-skeleton-rect-border-radius: 0 !default;
 /// @group skeleton
 $kendo-skeleton-circle-border-radius: 9999px !default;
 
-$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;
 
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 
@@ -21428,7 +21423,7 @@ $_kendo-module-meta: (
                 &:focus,
                 &.k-focus {
                     @if ( $kendo-solid-button-shadow ) {
-                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-solid-button-shadow-opacity ), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
                     }
                 }
 
@@ -21498,9 +21493,9 @@ $_kendo-module-meta: (
             &.k-focus {
                 @if $kendo-outline-button-shadow {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
                     }
                 }
             }
@@ -21583,9 +21578,9 @@ $_kendo-module-meta: (
             &.k-focus {
                 @if ( $kendo-link-button-shadow ) {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
                     }
                 }
             }
@@ -23183,7 +23178,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) !default;
+$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -23216,7 +23211,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-input-text !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
+$kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -23226,7 +23221,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: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
+$kendo-input-outline-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -23342,13 +23337,6 @@ $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;
@@ -23421,7 +23409,7 @@ $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: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) !default;
+$kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
@@ -23468,7 +23456,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: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
@@ -25307,23 +25295,6 @@ $_kendo-module-meta: (
             }
         }
 
-        // Valid
-        &.k-valid {
-            @include fill( $border: $kendo-input-valid-border );
-
-            .k-input-validation-icon {
-                color: $kendo-valid-text;
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-            &:focus-within {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-        }
-
         // Prefix & Suffix
         .k-input-prefix {
             color: $kendo-input-prefix-text;
@@ -25412,23 +25383,6 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
-
-        // Valid
-        &.k-valid {
-            @include fill( $border: $kendo-input-valid-border );
-
-            .k-input-validation-icon {
-                color: $kendo-valid-text;
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-            &:focus-within {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-        }
     }
 
 
@@ -25514,23 +25468,6 @@ $_kendo-module-meta: (
             }
         }
 
-        // Valid
-        &.k-valid {
-            @include fill( $border: $kendo-input-valid-border );
-
-            .k-input-validation-icon {
-                color: $kendo-valid-text;
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-            &:focus-within {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-        }
-
         // Prefix & Suffix
         .k-input-prefix {
             color: $kendo-input-prefix-text;
@@ -25625,23 +25562,6 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
-
-        // Valid
-        &.k-valid {
-            @include fill( $border: $kendo-input-valid-border );
-
-            .k-input-validation-icon {
-                color: $kendo-valid-text;
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-            &:focus-within {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-        }
     }
 
 
@@ -25714,23 +25634,6 @@ $_kendo-module-meta: (
             }
         }
 
-        // Valid
-        &.k-valid {
-            @include fill( $border: $kendo-input-valid-border );
-
-            .k-input-validation-icon {
-                color: $kendo-valid-text;
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-            &:focus-within {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-        }
-
         // Prefix & Suffix
         .k-input-prefix {
             color: $kendo-input-prefix-text;
@@ -25825,23 +25728,6 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
-
-        // Valid
-        &.k-valid {
-            @include fill( $border: $kendo-input-valid-border );
-
-            .k-input-validation-icon {
-                color: $kendo-valid-text;
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-            &:focus-within {
-                @include focus-indicator( $kendo-input-valid-shadow );
-            }
-        }
     }
 
 }
@@ -27142,7 +27028,7 @@ $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
 
     .k-progressbar-indeterminate {
         @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
-        @include striped-gradient( if($kendo-enable-color-system, rgba( k-color( base-emphasis, true ), .55 ), k-color-shade($kendo-progressbar-indeterminate-bg)) );
+        @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) );
         background-size: $kendo-progressbar-height $kendo-progressbar-height;
         animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
     }
@@ -27881,7 +27767,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 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 )) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 )) !default;
 
 /// The transition speed of the Slider.
 /// @group slider
@@ -29286,7 +29172,7 @@ $kendo-calendar-sizes: (
     .k-calendar { // stylelint-disable-line
 
         $kendo-calendar-range-gap: 1px !default;
-        $kendo-calendar-range-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-calendar-cell-selected-bg, .25 ));
+        $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
         $kendo-calendar-range-split-size: 5px !default;
 
         .k-range-start,
@@ -33573,7 +33459,7 @@ $kendo-switch-off-track-focus-border: null !default;
 $kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default;
+$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
@@ -33655,7 +33541,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) !default;
+$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 )) !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
@@ -33920,7 +33806,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
                     $kendo-switch-off-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
+                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                 } @else {
                     outline: $kendo-switch-off-track-focus-ring;
                 }
@@ -34000,7 +33886,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
                     $kendo-switch-on-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
+                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                 } @else {
                     outline: $kendo-switch-on-track-focus-ring;
                 }
@@ -35438,7 +35324,7 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
             @if $kendo-enable-focus-contrast {
                 @include box-shadow( inset 0 0 0 2px currentColor );
             } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 ));
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
             }
         }
     }
@@ -35459,8 +35345,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 ));
-            color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 ));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -35499,7 +35385,7 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
+            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
         } @else {
             outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }
@@ -35521,8 +35407,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 ));
-            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 ));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
         }
     }
 
@@ -38664,13 +38550,13 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid-#{$name} {
             @include fill(
-                $color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
+                $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
                 $bg: $color
             );
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .125 ), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
+                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
             }
 
             .k-bottom-nav-item.k-selected {
@@ -38694,7 +38580,7 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05), rgba($kendo-bottom-nav-flat-text, .05)) );
+                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
             }
 
             .k-bottom-nav-item.k-selected {
@@ -39851,7 +39737,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 ), .6 ), $kendo-disabled-text) !default;
+$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-disabled-border: null !default;
@@ -39878,7 +39764,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-legacy( $kendo-stepper-indicator-done-bg )) !default;
@@ -39930,7 +39816,7 @@ $kendo-stepper-label-error-text: $kendo-color-error !default;
 $kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !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 ), .6 ), $kendo-disabled-text) !default;
+$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper
@@ -42947,7 +42833,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: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default;
+$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), 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;
@@ -44272,7 +44158,7 @@ $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -44301,12 +44187,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: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
-$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
+$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
 
 // Must be a solid color
 $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -44357,7 +44243,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: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), 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;
@@ -46393,7 +46279,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: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
+$kendo-listview-item-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;
@@ -46814,7 +46700,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-selected-bg, .25)) !default;
+$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 /// The text color of the Spreadsheet selection.
 /// @group spreadsheet
 $kendo-spreadsheet-selection-text: null !default;
@@ -46837,7 +46723,7 @@ $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
 
 /// The background color of the Spreadsheet partial selection.
 /// @group spreadsheet
-$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
+$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 
 /// The background color of the Spreadsheet active cell.
 /// @group spreadsheet
@@ -46848,7 +46734,7 @@ $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !defau
 
 /// 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-selected-bg, .25)) !default;
+$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 /// The text color of the Spreadsheet auto fill.
 /// @group spreadsheet
 $kendo-spreadsheet-auto-fill-text: null !default;
@@ -46976,7 +46862,7 @@ $kendo-spreadsheet-drawing-outline-style: solid !default;
 $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( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
+$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 
 /// The vertical spacing of the Spreadsheet DropZone.
 /// @group spreadsheet
@@ -48213,7 +48099,7 @@ $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ),
 $kendo-pivotgrid-hover-text: null !default;
 $kendo-pivotgrid-hover-border: null !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-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default;
 $kendo-pivotgrid-selected-text: null !default;
 $kendo-pivotgrid-selected-border: null !default;
 
@@ -52263,7 +52149,7 @@ $kendo-gantt-treelist-bg: null !default;
 $kendo-gantt-treelist-text: null !default;
 $kendo-gantt-treelist-border: null !default;
 
-$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
 $kendo-gantt-nonwork-text: null !default;
 $kendo-gantt-nonwork-border: null !default;
 
@@ -54820,7 +54706,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
+        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
     }
 
     .k-scheduler-layout-flex {
@@ -54937,7 +54823,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
@@ -55893,7 +55779,7 @@ $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: 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;
+$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/mediaplayer/_layout.scss
@@ -56022,7 +55908,7 @@ $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
         background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-media-player-text, .5 ));
+        text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 ));
     }
 
 }
@@ -56130,10 +56016,10 @@ $kendo-timeline-track-arrow-height: 30px !default;
 
 /// The background color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .6 ), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) !default;
 /// The text color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
 /// The border color of the disabled Timeline track arrow.
 /// @group timeline
 $kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) !default;
@@ -58177,13 +58063,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-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
+$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( 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-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default;
+$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default;
 
-$kendo-chart-inactive: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-body-text, .5 )) !default;
+$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $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;
@@ -58194,20 +58080,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-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-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( 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: if($kendo-enable-color-system, k-color( base ), 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-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08) !default;
+$kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !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-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), 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-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( 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-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;
+$kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;
 
 
 // TreeMap
@@ -58953,7 +58839,7 @@ $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: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default;
+$kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default;
 
 $kendo-map-marker-fill: $kendo-color-primary !default;
 
@@ -59611,7 +59497,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;