Add color mode on Progress

Orange-OpenSource · Oct 25, 2023 · 1a70d01 · 1a70d01
1 parent 4a2f4c0
commit 1a70d01
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 3 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1972,13 +1972,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 `$black`
 $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/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -3155,3 +3155,105 @@ sitemap_exclude: true
     <input class="form-check-input" type="checkbox" role="switch" checked disabled>
   </div>
 </div>
+
+### Progress
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar" style="width: 30%">30%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-success" style="width: 40%"></div>
+  </div>
+  <div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar bg-info" style="width: 50%">50%</div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
+  </div>
+  <div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
+  </div>
+</div>