Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Potential for contrast issues with '.btn-close' class #39765

Closed
3 tasks done
abraxas86 opened this issue Mar 8, 2024 · 2 comments · Fixed by #41126
Closed
3 tasks done

Potential for contrast issues with '.btn-close' class #39765

abraxas86 opened this issue Mar 8, 2024 · 2 comments · Fixed by #41126
Labels
color mode confirmed css has-pr v5

Comments

@abraxas86
Copy link

abraxas86 commented Mar 8, 2024 •
edited
Loading

Prerequisites

Describe the issue

As of Bootstrap 5.3, we have lost the ".btn-close-white" class. In theory, this seems fine since the flip is now handled by the new "dark mode" implementation, however it can present and issue if the button is placed over an element of similar lightness.

Take for example, the following:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-warning">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Warning!</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is a warning message.
  </div>
</div>

Under the light theme everything looks okay, however as soon as you flip to the dark theme the X switches to the lighter colour and becomes difficult to see:

LightDark

I realize I could manually set the data-bs-theme on the button to force it to stay with the light theme, but that's more of a workaround. This is not necessarily true depending on how and when you call in your theme, I think? It worked in my code pen, but not on the site that I'm working on.

Disclaimer:
I am incredibly new to SASS, so:

  1. I have no idea if this can be extended like many of the other classes can be.
  2. It is entirely possible that the problem is between the chair and the keyboard here 😅

Reduced test cases

Codepen Demo

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.2
@github-project-automation github-project-automation bot moved this to To do in v5.3.4 Mar 9, 2024
@julien-deramond julien-deramond moved this from To do to To analyze in v5.3.4 Mar 9, 2024
@julien-deramond
Copy link
Member

As you said, using <div class="toast-header bg-warning"> is the equivalent of what we had before as dark variants and was to be used with the .btn-close-white class.
Now, the equivalent would be <div class="toast-header bg-warning" data-bs-theme="light"> (if the rendering stays the same in light and dark mode with a solid "dark" bg color).
In these cases, some components have issues right now. I need to find time to finish it but #39295 should tackle a part of this problem.

As a temporary solution, you'll probably need to override the rendering yourself with some CSS custom code. Something like this https://codepen.io/julien-deramond/pen/LYvGqLX could help, even if there are probably more elegant solutions:

<div class="container py-5 gap-3 d-flex flex-column w-100 h-100 bg-body" data-bs-theme="dark">
  <div class="toast fade show text-body" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header text-dark bg-warning" data-bs-theme="light">
      <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
        <rect width="100%" height="100%" fill="#007aff"></rect>
      </svg>
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>
[data-bs-theme="light"].toast-header .btn-close {
  filter: invert(0) grayscale(100%) brightness(200%);
}

@julien-deramond julien-deramond mentioned this issue Mar 9, 2024
Draft
8 tasks
@abraxas86
Copy link
Author

abraxas86 commented Mar 10, 2024 •
edited
Loading

Thanks! I was able to work around it - it's a bit hacky, but I made a class that only applies to my dark theme:

// dark theme close button work-around (for light-coloured elements in dark mode)
// Refer to: https://github.com/twbs/bootstrap/issues/39765
.btn-close-dark {
    @extend .btn-close;
    --bs-btn-close-white-filter: invert(0) !important;
}

Then on my elements where I need it, I just set class="btn-close btn-close-dark"

Is there a better way to do it? Probably... but it works so that's good enough for me lol

@jeffschwartz jeffschwartz mentioned this issue Jun 14, 2024
Open
@julien-deramond julien-deramond moved this from To analyze to To do in v5.3.4 Jul 24, 2024
@julien-deramond julien-deramond moved this from To do to Needs review in v5.3.4 Dec 29, 2024
@julien-deramond julien-deramond mentioned this issue Dec 29, 2024
Merged
4 tasks
@github-project-automation github-project-automation bot moved this from Needs review to Done in v5.3.4 Dec 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color mode confirmed css has-pr v5
Projects
v5.3.4
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix display issues of close button in contextual light and dark modes twbs/bootstrap
2 participants
@abraxas86 @julien-deramond