Rely on border-width for <hr> size (#35491)

* fix(reboot): revert hr styles to v4 implementation

* docs(cheatsheet): add a hr example

* fix(reboot): currentColor is the initial border-color value

* Document hr element in Reboot docs

* Update migration guide

* Update scss/_variables.scss

Co-authored-by: Mark Otto <markd.otto@gmail.com>

site/content/docs/5.1/examples/cheatsheet-rtl/index.html

@@ -116,6 +116,10 @@ direction: rtl
         <p><em>هذا السطر يحوي نص مائل.</em></p>
         {{< /example >}}
 
+        {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
         {{< example show_markup="false" >}}
         <blockquote class="blockquote">
           <p>إقتباس مبهر، موضوع في عنصر blockquote</p>

site/content/docs/5.1/examples/cheatsheet/index.html

@@ -115,6 +115,10 @@ body_class: "bg-light"
         <p><em>This line rendered as italicized text.</em></p>
         {{< /example >}}
 
+        {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
         {{< example show_markup="false" >}}
         <blockquote class="blockquote">
           <p>A well-known quote, contained in a blockquote element.</p>