Ensure all component variables are declared with !default flag

.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" } ]
+            }
+        }
+    ]
 }

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;

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>

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>

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;

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;

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;

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: (