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

package/dist/all.scss

@@ -4764,7 +4764,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 );
@@ -5027,15 +5027,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.";
     }
@@ -5046,7 +5042,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)};
             }
         }
     }
@@ -17177,7 +17172,7 @@ $kendo-checkbox-bg: null !default;
 $kendo-checkbox-text: null !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 ) !default;
+$kendo-checkbox-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 54%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -19005,7 +19000,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;
@@ -19030,7 +19025,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;
@@ -20889,7 +20884,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,
@@ -20943,7 +20938,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,
@@ -20969,7 +20964,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,
@@ -22073,7 +22068,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;
@@ -22879,7 +22874,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 );
                     }
                 }
 
@@ -22949,9 +22944,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 );
                     }
                 }
             }
@@ -23034,9 +23029,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 );
                     }
                 }
             }
@@ -24952,7 +24947,7 @@ $kendo-input-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade(
 $kendo-input-text: $kendo-component-text !default;
 /// The border color of the Input components.
 /// @group input
-$kendo-input-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 )) !default;
+$kendo-input-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( $kendo-component-border, .38 )) !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -24991,13 +24986,13 @@ $kendo-input-selected-bg: null !default;
 $kendo-input-selected-text: null !default;
 /// The background color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 )) !default;
+$kendo-input-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), k-try-shade( $kendo-component-bg, .25 )) !default;
 /// The text color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text) !default;
+$kendo-input-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 27%, transparent), $kendo-disabled-text) !default;
 /// The border color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) !default;
+$kendo-input-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) !default;
 /// The gradient of the disabled Input components.
 /// @group input
 $kendo-input-disabled-gradient: null !default;
@@ -29251,7 +29246,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;
     }
@@ -30087,7 +30082,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
@@ -31625,7 +31620,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,
@@ -35244,7 +35239,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;
@@ -36329,7 +36324,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;
@@ -36411,7 +36406,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;
@@ -36762,7 +36757,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;
                 }
@@ -36842,7 +36837,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;
                 }
@@ -38363,7 +38358,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !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 ));
             }
         }
     }
@@ -38384,8 +38379,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !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;
         }
     }
@@ -38424,7 +38419,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !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;
         }
@@ -38446,8 +38441,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !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 ));
         }
     }
 
@@ -38569,8 +38564,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !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, 8 ));
-            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 8 ));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
         }
     }
 
@@ -41891,13 +41886,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 {
@@ -41921,7 +41916,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 {
@@ -43153,7 +43148,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;
@@ -43180,7 +43175,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;
@@ -43232,7 +43227,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
@@ -46382,7 +46377,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;
@@ -47738,7 +47733,7 @@ $kendo-grid-grouping-row-bg: transparent !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: 4px !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-grid-header-text !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -47754,7 +47749,7 @@ $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$ke
 // 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: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
+$kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
 
 // Must be a solid color
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -47766,12 +47761,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
-$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), k-try-shade($kendo-grid-bg, 4%)) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-bg, 4%)) !default;
 $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !default;
 
 // Must be a solid color
 $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade($kendo-grid-bg, 7%)) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
 
 $kendo-grid-column-menu-width: 250px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -47824,7 +47819,7 @@ $kendo-grid-group-footer-second-cell-border: 0px !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 ), .24 )) !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 ), .24 )) !default;
 /// Active background color of the grid row resize indicator
 /// @group grid
 $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
@@ -50680,7 +50675,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;
@@ -50714,7 +50709,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;
@@ -50726,7 +50721,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
@@ -50844,7 +50839,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
@@ -52157,7 +52152,7 @@ $kendo-pivotgrid-border: $kendo-component-border !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: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .02 ), rgba( $kendo-component-header-bg, .02 )) !default;
+$kendo-pivotgrid-headers-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 )) !default;
 $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
 
@@ -52169,7 +52164,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( base-active, true ), .25 ), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !default;
+$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !default;
 $kendo-pivotgrid-selected-text: null !default;
 $kendo-pivotgrid-selected-border: null !default;
 
@@ -56410,7 +56405,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-color( $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-color( $kendo-gantt-bg ), .025 )) !default;
 $kendo-gantt-nonwork-text: null !default;
 $kendo-gantt-nonwork-border: null !default;
 
@@ -59174,7 +59169,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 {
@@ -59291,7 +59286,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 {
@@ -59352,13 +59347,13 @@ $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( 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));
         }
     }
 
@@ -60306,7 +60301,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
@@ -60444,7 +60439,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 ));
     }
 
 }
@@ -62705,13 +62700,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-component-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;
@@ -62722,20 +62717,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-subtle ), k-try-shade( $kendo-chart-bg, 1 )) !default;
-$kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-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
@@ -63497,7 +63492,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;
 
@@ -63843,7 +63838,7 @@ $kendo-orgchart-node-group-border: $kendo-base-border !default;
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
 /// The shadow of the focused OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .2 ), 0 4px 5px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .14 ), 0 1px 10px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .12 ) !default;
+$kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 )) !default;
 
 /// The font size of the OrgChart node group title.
 /// @group orgchart
@@ -64187,7 +64182,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;