diff --git a/packages/bootstrap/docs/customization-chart-wizard.md b/packages/bootstrap/docs/customization-chart-wizard.md
index ad953acc476..669f4752674 100644
--- a/packages/bootstrap/docs/customization-chart-wizard.md
+++ b/packages/bootstrap/docs/customization-chart-wizard.md
@@ -40,7 +40,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #cfe2ff)</code></td>
 </tr>
 <tr>
@@ -70,7 +70,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))</code></td>
 </tr>
 <tr>
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
index 7321e2a55c9..df43b661871 100644
--- a/packages/bootstrap/docs/customization.md
+++ b/packages/bootstrap/docs/customization.md
@@ -4228,7 +4228,7 @@ The following table lists the available variables for customizing the Bootstrap
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #cfe2ff)</code></td>
 </tr>
 <tr>
@@ -4258,7 +4258,7 @@ The following table lists the available variables for customizing the Bootstrap
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))</code></td>
 </tr>
 <tr>
diff --git a/packages/classic/docs/customization-chart-wizard.md b/packages/classic/docs/customization-chart-wizard.md
index 758877eac21..5f9892caa4f 100644
--- a/packages/classic/docs/customization-chart-wizard.md
+++ b/packages/classic/docs/customization-chart-wizard.md
@@ -40,7 +40,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #fff2eb)</code></td>
 </tr>
 <tr>
@@ -70,7 +70,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff8b47)</code></td>
 </tr>
 <tr>
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
index e8c30ea7335..20e62575aba 100644
--- a/packages/classic/docs/customization.md
+++ b/packages/classic/docs/customization.md
@@ -4259,7 +4259,7 @@ The following table lists the available variables for customizing the Classic th
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #fff2eb)</code></td>
 </tr>
 <tr>
@@ -4289,7 +4289,7 @@ The following table lists the available variables for customizing the Classic th
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff8b47)</code></td>
 </tr>
 <tr>
diff --git a/packages/default/docs/customization-chart-wizard.md b/packages/default/docs/customization-chart-wizard.md
index 8d66c0810ed..ebd87353d03 100644
--- a/packages/default/docs/customization-chart-wizard.md
+++ b/packages/default/docs/customization-chart-wizard.md
@@ -40,7 +40,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #ffeceb)</code></td>
 </tr>
 <tr>
@@ -70,7 +70,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)</code></td>
 </tr>
 <tr>
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md
index 61645f55e7f..7d9eb387707 100644
--- a/packages/default/docs/customization.md
+++ b/packages/default/docs/customization.md
@@ -4478,7 +4478,7 @@ The following table lists the available variables for customizing the Default th
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #ffeceb)</code></td>
 </tr>
 <tr>
@@ -4508,7 +4508,7 @@ The following table lists the available variables for customizing the Default th
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)</code></td>
 </tr>
 <tr>
diff --git a/packages/material/docs/customization-chart-wizard.md b/packages/material/docs/customization-chart-wizard.md
index ec17531dbdf..a4de1f1ecd8 100644
--- a/packages/material/docs/customization-chart-wizard.md
+++ b/packages/material/docs/customization-chart-wizard.md
@@ -40,7 +40,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #d1d5ee)</code></td>
 </tr>
 <tr>
@@ -70,7 +70,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, #97a0d7)</code></td>
 </tr>
 <tr>
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
index f79f9635e47..981f76507d8 100644
--- a/packages/material/docs/customization.md
+++ b/packages/material/docs/customization.md
@@ -4248,7 +4248,7 @@ The following table lists the available variables for customizing the Material t
 <tr>
     <td>$kendo-chart-wizard-icon-area-bg</td>
     <td>String</td>
-    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)</code></td>
+    <td><code>if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))</code></td>
     <td><code>var(--kendo-color-primary-subtle, #d1d5ee)</code></td>
 </tr>
 <tr>
@@ -4278,7 +4278,7 @@ The following table lists the available variables for customizing the Material t
 <tr>
     <td>$kendo-chart-wizard-icon-area-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)</code></td>
+    <td><code>inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))</code></td>
     <td><code>inset 0 0 0 1px var(--kendo-color-primary-emphasis, #97a0d7)</code></td>
 </tr>
 <tr>