From 71bf875984a9ea9feed2ebee5d5f6348550cf2f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sun, 29 Dec 2024 21:28:34 +0100 Subject: [PATCH 1/4] chore: emphasize close button theme bug in documentation --- .../docs/5.3/components/close-button.md | 57 ++++++++++--------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index 533271b49874..3de901d70cf8 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -6,49 +6,52 @@ group: components toc: true --- -## Example - -Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`. +## Basic Close Button {{< example >}} {{< /example >}} -## Disabled state - -Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering. +## Dark Close Button {{< example >}} - +
+ +
{{< /example >}} -## Dark variant - -{{< deprecated-in "5.3.0" >}} - -{{< callout warning >}} -**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. -{{< /callout >}} +## Dark -Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. - -{{< example class="bg-dark" >}} -
+{{< example >}} +
-
{{< /example >}} -## CSS +## Light -### Variables - -{{< added-in "5.3.0" >}} +{{< example >}} +
+ +
+{{< /example >}} -As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. +## Light in dark -{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} +{{< example >}} +
+
+ +
+
+{{< /example >}} -### Sass variables +## Dark in light -{{< scss-docs name="close-variables" file="scss/_variables.scss" >}} +{{< example >}} +
+
+ +
+
+{{< /example >}} From 059bb59e663dad08fcd733942c1de73b7f0ea0c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sun, 29 Dec 2024 21:29:11 +0100 Subject: [PATCH 2/4] Fix display issues of close button in contextual light and dark modes --- scss/_close.scss | 15 +++++++++------ scss/_variables-dark.scss | 6 ++++++ scss/_variables.scss | 3 ++- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/scss/_close.scss b/scss/_close.scss index 4d6e73c13931..d53c96fbff66 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -12,7 +12,6 @@ --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; - --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; // scss-docs-end close-css-vars box-sizing: content-box; @@ -21,6 +20,7 @@ padding: $btn-close-padding-y $btn-close-padding-x; color: var(--#{$prefix}btn-close-color); background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements + filter: var(--#{$prefix}btn-close-filter); border: 0; // for button elements @include border-radius(); opacity: var(--#{$prefix}btn-close-opacity); @@ -47,17 +47,20 @@ } @mixin btn-close-white() { - filter: var(--#{$prefix}btn-close-white-filter); + --#{$prefix}btn-close-filter: #{$btn-close-filter-dark}; } .btn-close-white { @include btn-close-white(); } +:root, +[data-bs-theme="light"] { + --#{$prefix}btn-close-filter: #{$btn-close-filter}; +} + @if $enable-dark-mode { - @include color-mode(dark) { - .btn-close { - @include btn-close-white(); - } + @include color-mode(dark, true) { + @include btn-close-white(); } } diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index f9bb99d9682b..260f6dcc1d6e 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -94,3 +94,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,}} + +{{< /example >}} From 64c8bd163d738360ce6d27a624b09f18567b42a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 31 Dec 2024 09:04:58 +0100 Subject: [PATCH 4/4] Revert Markdown file change --- .../docs/5.3/components/close-button.md | 69 +++++++------------ 1 file changed, 24 insertions(+), 45 deletions(-) diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index fd2958ec0a9a..533271b49874 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -6,70 +6,49 @@ group: components toc: true --- -## Basic Close Button +## Example + +Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`. {{< example >}} {{< /example >}} -## Dark Variant +## Disabled state + +Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering. {{< example >}} -
- -
+ {{< /example >}} -## Dark +## Dark variant -{{< example >}} -
- -
-{{< /example >}} +{{< deprecated-in "5.3.0" >}} -## Light +{{< callout warning >}} +**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. +{{< /callout >}} -{{< example >}} -
+Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. + +{{< example class="bg-dark" >}} +
+
{{< /example >}} -## Light in dark +## CSS -{{< example >}} -
-
- -
-
-{{< /example >}} +### Variables -## Dark in light +{{< added-in "5.3.0" >}} -{{< example >}} -
-
- -
-
-{{< /example >}} +As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -## Toast and Close Button issue +{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} -Forcing `data-bs-theme="light"` didn't work in dark mode. Now, the cross button is always dark. +### Sass variables -{{< example >}} - -{{< /example >}} +{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}