diff --git a/.stylelintrc.json b/.stylelintrc.json
index c00133d6d4d..83f78e2e349 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -62,5 +62,13 @@
         "scss/dollar-variable-empty-line-before": null,
         "scss/double-slash-comment-empty-line-before": null,
         "scss/load-no-partial-leading-underscore": null
-    }
+    },
+    "overrides": [
+        {
+            "files": "**/*_variables.scss",
+            "rules": {
+                "scss/dollar-variable-default": [ true, { "ignore": "local" } ]
+            }
+        }
+    ]
 }
diff --git a/packages/classic/scss/pivotgrid/_variables.scss b/packages/classic/scss/pivotgrid/_variables.scss
index 8244bb49203..732884244a8 100644
--- a/packages/classic/scss/pivotgrid/_variables.scss
+++ b/packages/classic/scss/pivotgrid/_variables.scss
@@ -173,7 +173,7 @@ $kendo-pivotgrid-configurator-header-border: null !default;
 
 /// The shadow of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-shadow: k-elevation(3);
+$kendo-pivotgrid-configurator-shadow: k-elevation(3) !default;
 /// The end shadow of the PivotGrid configurator.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default;
diff --git a/packages/fluent/docs/customization-charts.md b/packages/fluent/docs/customization-charts.md
index 21c54eb39af..70b09a8d365 100644
--- a/packages/fluent/docs/customization-charts.md
+++ b/packages/fluent/docs/customization-charts.md
@@ -99,9 +99,9 @@ The following table lists the available variables for customization.
 </tr>
 <tr>
     <td>$kendo-chart-border-width</td>
-    <td>List</td>
-    <td><code>0px default</code></td>
-    <td><code>(0px default)</code></td>
+    <td>Number</td>
+    <td><code>0px</code></td>
+    <td><code>0px</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border width of the chart component.</div></div>
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md
index e416a68b4c1..c8f334358b2 100644
--- a/packages/fluent/docs/customization.md
+++ b/packages/fluent/docs/customization.md
@@ -5005,9 +5005,9 @@ The following table lists the available variables for customizing the Fluent the
 </tr>
 <tr>
     <td>$kendo-chart-border-width</td>
-    <td>List</td>
-    <td><code>0px default</code></td>
-    <td><code>(0px default)</code></td>
+    <td>Number</td>
+    <td><code>0px</code></td>
+    <td><code>0px</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border width of the chart component.</div></div>
diff --git a/packages/fluent/scss/dataviz/_variables.scss b/packages/fluent/scss/dataviz/_variables.scss
index 4611b75d798..4bdcb68524b 100644
--- a/packages/fluent/scss/dataviz/_variables.scss
+++ b/packages/fluent/scss/dataviz/_variables.scss
@@ -85,7 +85,7 @@ $kendo-series-30: $kendo-series-f-darker !default;
 
 /// The border width of the chart component.
 /// @group charts
-$kendo-chart-border-width: 0px default;
+$kendo-chart-border-width: 0px !default;
 /// The font-family of the chart component.
 /// @group charts
 $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
diff --git a/packages/fluent/scss/menu/_variables.scss b/packages/fluent/scss/menu/_variables.scss
index 4f7ca9eb7b3..57bcdb309b9 100644
--- a/packages/fluent/scss/menu/_variables.scss
+++ b/packages/fluent/scss/menu/_variables.scss
@@ -105,10 +105,10 @@ $kendo-menu-item-selected-bg: null !default;
 
 /// The inline margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-inline: k-spacing(1);
+$kendo-menu-separator-margin-inline: k-spacing(1) !default;
 /// The block margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-block: k-spacing(3);
+$kendo-menu-separator-margin-block: k-spacing(3) !default;
 /// The width of the Menu separator.
 /// @group menu
 $kendo-menu-separator-width: 1px !default;
diff --git a/packages/material/scss/menu/_variables.scss b/packages/material/scss/menu/_variables.scss
index 506d2705a75..18b22d51a77 100644
--- a/packages/material/scss/menu/_variables.scss
+++ b/packages/material/scss/menu/_variables.scss
@@ -141,10 +141,10 @@ $kendo-menu-scroll-button-hover-gradient: null !default;
 
 /// The inline margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-inline: k-spacing(1);
+$kendo-menu-separator-margin-inline: k-spacing(1) !default;
 /// The block margin of the horizontal Menu separator.
 /// @group menu
-$kendo-menu-separator-margin-block: k-spacing(1);
+$kendo-menu-separator-margin-block: k-spacing(1) !default;
 /// The border color of Menu separator.
 /// @group menu
 $kendo-menu-separator-border: if($kendo-enable-color-system, k-color(border), $kendo-component-border) !default;
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
index 2c5c7fba8fb..0e1c24652dd 100644
--- a/packages/utils/scss/_variables.scss
+++ b/packages/utils/scss/_variables.scss
@@ -80,10 +80,10 @@ $_default-kendo-fraction-classes: (
     '11-1': 11.1111%,
     '9-1': 9.0909%,
     '8-3': 8.3333%
-);
+) !default;
 
 $kendo-fraction-classes: $_default-kendo-fraction-classes !default;
-$kendo-fraction-classes: map.merge($_default-kendo-fraction-classes, $kendo-fraction-classes);
+$kendo-fraction-classes: map.merge($_default-kendo-fraction-classes, $kendo-fraction-classes); // stylelint-disable-line scss/dollar-variable-default
 
 $_default-kendo-breakpoints: (
     xs: 0,
@@ -95,7 +95,7 @@ $_default-kendo-breakpoints: (
 ) !default;
 
 $kendo-breakpoints: $_default-kendo-breakpoints !default;
-$kendo-breakpoints: map.merge($_default-kendo-breakpoints, $kendo-breakpoints);
+$kendo-breakpoints: map.merge($_default-kendo-breakpoints, $kendo-breakpoints); // stylelint-disable-line scss/dollar-variable-default
 
 $_default-kendo-container-max-widths: (
     sm: 540px,
@@ -106,7 +106,7 @@ $_default-kendo-container-max-widths: (
 ) !default;
 
 $kendo-container-max-widths: $_default-kendo-container-max-widths !default;
-$kendo-container-max-widths: map.merge($_default-kendo-container-max-widths, $kendo-container-max-widths);
+$kendo-container-max-widths: map.merge($_default-kendo-container-max-widths, $kendo-container-max-widths); // stylelint-disable-line scss/dollar-variable-default
 
 $kendo-utils: (
 
diff --git a/tests/_output/fluent/chart-wizard/chart-wizard.png b/tests/_output/fluent/chart-wizard/chart-wizard.png
index 695a99e66e7..cfb8389f403 100644
Binary files a/tests/_output/fluent/chart-wizard/chart-wizard.png and b/tests/_output/fluent/chart-wizard/chart-wizard.png differ
diff --git a/tests/_output/fluent/chart/chart-no-data-template.png b/tests/_output/fluent/chart/chart-no-data-template.png
index 2765087a67d..35a0d237f0c 100644
Binary files a/tests/_output/fluent/chart/chart-no-data-template.png and b/tests/_output/fluent/chart/chart-no-data-template.png differ
diff --git a/tests/_output/fluent/chart/chart.png b/tests/_output/fluent/chart/chart.png
index 150372b72be..92924204241 100644
Binary files a/tests/_output/fluent/chart/chart.png and b/tests/_output/fluent/chart/chart.png differ