feat(spinners): Orange branded 🎉

scss/_spinners.scss

@@ -24,6 +24,14 @@
   border-width: $spinner-border-width-sm;
 }
 
+// Boosted mod
+.spinner-border-lg {
+  width: $spinner-width-lg;
+  height: $spinner-height-lg;
+  border-width: $spinner-border-width-lg;
+}
+// End mod
+
 //
 // Growing circle
 //
@@ -55,3 +63,10 @@
   width: $spinner-width-sm;
   height: $spinner-height-sm;
 }
+
+// Boosted mod
+.spinner-grow-lg {
+  width: $spinner-width-lg;
+  height: $spinner-height-lg;
+}
+// End mod

scss/_variables.scss

@@ -1296,15 +1296,20 @@ $carousel-transition:                transform $carousel-transition-duration $tr
 
 // Spinners
 
-$spinner-width:           2rem !default;
+$spinner-width:           $spacer * 2 !default;
 $spinner-height:          $spinner-width !default;
-$spinner-border-width:    .25em !default;
+$spinner-border-width:    $border-width * 3 !default;
 $spinner-animation-speed: .75s !default;
 
-$spinner-width-sm:        1rem !default;
+$spinner-width-sm:        $spacer !default;
 $spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
+$spinner-border-width-sm: $border-width * 2 !default;
 
+// Boosted mod
+$spinner-width-lg:        $spacer * 4 !default;
+$spinner-height-lg:       $spinner-width-lg !default;
+$spinner-border-width-lg: $border-width * 4 !default;
+// End mod
 
 // Close
 

site/content/docs/5.0/components/spinners.md

@@ -34,9 +34,6 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 <div class="spinner-border text-secondary" role="status">
   <span class="sr-only">Loading...</span>
 </div>
-<div class="spinner-border text-light" role="status">
-  <span class="sr-only">Loading...</span>
-</div>
 {{< /example >}}
 <!-- End mod -->
 
@@ -64,9 +61,6 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 <div class="spinner-grow text-secondary" role="status">
   <span class="sr-only">Loading...</span>
 </div>
-<div class="spinner-grow text-light" role="status">
-  <span class="sr-only">Loading...</span>
-</div>
 {{< /example >}}
 <!-- End mod -->
 
@@ -129,6 +123,10 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 
 Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components.
 
+<!-- Boosted mod: -sm & -lg -->
+
+### Small
+
 {{< example >}}
 <div class="spinner-border spinner-border-sm" role="status">
   <span class="sr-only">Loading...</span>
@@ -138,17 +136,19 @@ Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that c
 </div>
 {{< /example >}}
 
-Or, use custom CSS or inline styles to change the dimensions as needed.
+### Large
 
 {{< example >}}
-<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
+<div class="spinner-border spinner-border-lg" role="status">
   <span class="sr-only">Loading...</span>
 </div>
-<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
+<div class="spinner-grow spinner-grow-lg" role="status">
   <span class="sr-only">Loading...</span>
 </div>
 {{< /example >}}
 
+<!-- End mod -->
+
 ## Buttons
 
 Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.