New Sass variable to change vertical rule width

Author: julien-deramond

scss/_variables.scss

@@ -705,6 +705,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;

scss/helpers/_vr.scss

@@ -1,7 +1,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
   min-height: 1em;
   background-color: currentcolor;
   opacity: $hr-opacity;

site/content/docs/5.3/helpers/vertical-rule.md

@@ -43,3 +43,11 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
   <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
+
+## CSS
+
+### Sass variables
+
+Customize the vertical rule Sass variable to change its width.
+
+{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}