feat(progress): use supporting colours for progress bar, as seen in O…

…range's guidelines data display chpater — and make it bolder and taller

scss/_progress.scss

@@ -14,12 +14,33 @@
   background-color: $progress-bg;
   @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
+
+  // Boosted mod: using supporting colours for data display
+  // stylelint-disable declaration-no-important
+  .bg-success {
+    background-color: $teal !important;
+  }
+
+  .bg-info {
+    background-color: $cyan !important;
+  }
+
+  .bg-warning {
+    background-color: $yellow-2 !important;
+  }
+
+  .bg-danger {
+    background-color: $purple !important;
+  }
+  // stylelint-enable declaration-no-important
+  // end mod
 }
 
 .progress-bar {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  font-weight: $font-weight-bold; // Boosted mod
   color: $progress-bar-color;
   text-align: center;
   white-space: nowrap;

scss/_variables.scss

@@ -1087,13 +1087,13 @@ $alert-border-level:                0 !default;
 
 // Progress bars
 
-$progress-height:                   $spacer !default;
+$progress-height:                   map-get($spacers, 4) !default; // Boosted mod
 $progress-font-size:                $font-size-base !default;
-$progress-bg:                       $gray-500 !default;
+$progress-bg:                       $gray-300 !default;
 $progress-border-radius:            $border-radius !default;
 $progress-box-shadow:               null !default;
 $progress-bar-color:                $black !default;
-$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-bg:                   $orange-2 !default; // Boosted mod
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;