Dark mode: Progress bars (#2326)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Nov 7, 2023 · 19b8155 · 19b8155
1 parent f8f1a9e
commit 19b8155
Show file tree

Hide file tree

Showing 3 changed files with 332 additions and 5 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1981,13 +1981,13 @@ $alert-dismissible-padding-r:       $alert-padding-y * 3 !default; // 3x covers
 // scss-docs-start progress-variables
 $progress-height:                   $spacer !default;
 $progress-font-size:                $font-size-base !default;
-$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
+$progress-bg:                       var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
-$progress-bar-color:                $black !default;
+$progress-bar-color:                var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$white`
 $progress-bar-font-weight:          $font-weight-bold !default; // Boosted mod
 $progress-bar-text-indent:          map-get($spacers, 2) !default; // Boosted mod
-$progress-bar-bg:                   $primary !default;
+$progress-bar-bg:                   var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `$primary`
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 

diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
@@ -142,13 +142,13 @@ If you're adding labels to progress bars with a custom background color, make su
   <div class="progress-bar bg-success" style="width: 25%">25%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
+  <div class="progress-bar bg-info" style="width: 50%">50%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar text-white bg-danger" style="width: 100%">100%</div>
+  <div class="progress-bar bg-danger text-white" style="width: 100%">100%</div>
 </div>
 {{< /example >}}