diff --git a/scss/_variables.scss b/scss/_variables.scss index 31203ca8f3..bf9506da2c 100644 --- 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 index c32e3e75bc..f63d554397 100644 --- 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
25%
-
50%
+
50%
75%
-
100%
+
100%
{{< /example >}} diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index ed4916db7f..f116c13bcf 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4366,3 +4366,330 @@ sitemap_exclude: true

Invalid feedback

Invalid feedback

+ +### Progress + +

No theme

+ +
+
+
30%
+
+
+
30% (.bg-primary)
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30% (.text-bg-primary)
+
+
+
25% (.text-bg-success)
+
+
+
50% (.text-bg-info)
+
+
+
75% (.text-bg-warning)
+
+
+
100% (.text-bg-danger)
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Dark theme on container

+ +
+
+
30%
+
+
+
30% (.bg-primary)
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30% (.text-bg-primary)
+
+
+
25% (.text-bg-success)
+
+
+
50% (.text-bg-info)
+
+
+
75% (.text-bg-warning)
+
+
+
100% (.text-bg-danger)
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Light theme on container

+ +
+
+
30%
+
+
+
30% (.bg-primary)
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30% (.text-bg-primary)
+
+
+
25% (.text-bg-success)
+
+
+
50% (.text-bg-info)
+
+
+
75% (.text-bg-warning)
+
+
+
100% (.text-bg-danger)
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Dark theme on component

+ +
+
+
30%
+
+
+
30% (.bg-primary)
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30% (.text-bg-primary)
+
+
+
25% (.text-bg-success)
+
+
+
50% (.text-bg-info)
+
+
+
75% (.text-bg-warning)
+
+
+
100% (.text-bg-danger)
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Light theme on component

+ +
+
+
30%
+
+
+
30% (.bg-primary)
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30% (.text-bg-primary)
+
+
+
25% (.text-bg-success)
+
+
+
50% (.text-bg-info)
+
+
+
75% (.text-bg-warning)
+
+
+
100% (.text-bg-danger)
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
Long label text for the progress bar, set to a dark color
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+