From 25adf102271ee55862b24d746adcc9ee01ed94e7 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 Oct 2023 18:00:12 +0200 Subject: [PATCH 1/6] Add color mode on Progress --- scss/_variables.scss | 6 +- site/content/docs/5.3/dark-mode.md | 102 +++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 943d76164e..e3169b5554 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 `$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 index ed4916db7f..b4acc44004 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4366,3 +4366,105 @@ sitemap_exclude: true

Invalid feedback

Invalid feedback

+ +### Progress + +

No theme

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Dark theme on container

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Light theme on container

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Dark theme on component

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Light theme on component

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
From ec2138fb7d89bae3aea0376f14edbd97a97e66f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 31 Oct 2023 08:24:46 +0100 Subject: [PATCH 2/6] Add long label examples to dark mode page --- site/content/docs/5.3/dark-mode.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index b4acc44004..eac7816a84 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4375,6 +4375,9 @@ sitemap_exclude: true
30%
+
+
Long label text for the progress bar, set to a dark color
+
@@ -4395,6 +4398,9 @@ sitemap_exclude: true
30%
+
+
Long label text for the progress bar, set to a dark color
+
@@ -4415,6 +4421,9 @@ sitemap_exclude: true
30%
+
+
Long label text for the progress bar, set to a dark color
+
@@ -4435,6 +4444,9 @@ sitemap_exclude: true
30%
+
+
Long label text for the progress bar, set to a dark color
+
@@ -4455,6 +4467,9 @@ sitemap_exclude: true
30%
+
+
Long label text for the progress bar, set to a dark color
+
From 9d2692065857c7096da8ae45f7043b3b01ad7c95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 31 Oct 2023 08:30:35 +0100 Subject: [PATCH 3/6] Update scss/_variables.scss --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index e3169b5554..6871219adb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1984,7 +1984,7 @@ $progress-font-size: $font-size-base !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: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$black` +$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: var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `$primary` From 05e55275259d7fe9eaa2f37a0ab8d15614197da6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 31 Oct 2023 08:45:36 +0100 Subject: [PATCH 4/6] Add other examples in dark mode page --- site/content/docs/5.3/dark-mode.md | 215 +++++++++++++++++++++++++++-- 1 file changed, 205 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index eac7816a84..2b0b6ea013 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4372,12 +4372,51 @@ sitemap_exclude: true

No theme

-
+
30%
-
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
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
+
@@ -4395,12 +4434,51 @@ sitemap_exclude: true

Dark theme on container

-
+
30%
-
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
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
+
@@ -4418,12 +4496,51 @@ sitemap_exclude: true

Light theme on container

-
+
30%
-
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
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
+
@@ -4441,12 +4558,51 @@ sitemap_exclude: true

Dark theme on component

-
+
30%
-
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
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
+
@@ -4464,12 +4620,51 @@ sitemap_exclude: true

Light theme on component

-
+
30%
-
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
+
30%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+
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
+
From 407f56b97e49e266a84f991867571c1eeefa7ac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 31 Oct 2023 08:55:30 +0100 Subject: [PATCH 5/6] Improve examples in dark mode page --- site/content/docs/5.3/dark-mode.md | 50 +++++++++++++++--------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 2b0b6ea013..1d6f84f6a7 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4388,19 +4388,19 @@ sitemap_exclude: true
100%
-
30%
+
30% (.text-bg-primary)
-
25%
+
25% (.text-bg-success)
-
50%
+
50% (.text-bg-info)
-
75%
+
75% (.text-bg-warning)
-
100%
+
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
@@ -4450,19 +4450,19 @@ sitemap_exclude: true
100%
-
30%
+
30% (.text-bg-primary)
-
25%
+
25% (.text-bg-success)
-
50%
+
50% (.text-bg-info)
-
75%
+
75% (.text-bg-warning)
-
100%
+
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
@@ -4512,19 +4512,19 @@ sitemap_exclude: true
100%
-
30%
+
30% (.text-bg-primary)
-
25%
+
25% (.text-bg-success)
-
50%
+
50% (.text-bg-info)
-
75%
+
75% (.text-bg-warning)
-
100%
+
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
@@ -4574,19 +4574,19 @@ sitemap_exclude: true
100%
-
30%
+
30% (.text-bg-primary)
-
25%
+
25% (.text-bg-success)
-
50%
+
50% (.text-bg-info)
-
75%
+
75% (.text-bg-warning)
-
100%
+
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
@@ -4636,19 +4636,19 @@ sitemap_exclude: true
100%
-
30%
+
30% (.text-bg-primary)
-
25%
+
25% (.text-bg-success)
-
50%
+
50% (.text-bg-info)
-
75%
+
75% (.text-bg-warning)
-
100%
+
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
From a97215929eb3fb255de009515ed110a9fe8148d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 31 Oct 2023 09:19:50 +0100 Subject: [PATCH 6/6] . --- site/content/docs/5.3/components/progress.md | 4 +-- site/content/docs/5.3/dark-mode.md | 35 ++++++++++++++------ 2 files changed, 27 insertions(+), 12 deletions(-) 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 1d6f84f6a7..f116c13bcf 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4375,17 +4375,20 @@ sitemap_exclude: true
30%
+
+
30% (.bg-primary)
+
25%
-
50%
+
50%
75%
-
100%
+
100%
30% (.text-bg-primary)
@@ -4437,17 +4440,20 @@ sitemap_exclude: true
30%
+
+
30% (.bg-primary)
+
25%
-
50%
+
50%
75%
-
100%
+
100%
30% (.text-bg-primary)
@@ -4499,17 +4505,20 @@ sitemap_exclude: true
30%
+
+
30% (.bg-primary)
+
25%
-
50%
+
50%
75%
-
100%
+
100%
30% (.text-bg-primary)
@@ -4561,17 +4570,20 @@ sitemap_exclude: true
30%
+
+
30% (.bg-primary)
+
25%
-
50%
+
50%
75%
-
100%
+
100%
30% (.text-bg-primary)
@@ -4623,17 +4635,20 @@ sitemap_exclude: true
30%
+
+
30% (.bg-primary)
+
25%
-
50%
+
50%
75%
-
100%
+
100%
30% (.text-bg-primary)