Skip to content

Fix display issues of close button in contextual light and dark modes#41126

Merged
julien-deramond merged 4 commits intomainfrom
main-jd-close-button-dark-theme
Dec 31, 2024
Merged

Fix display issues of close button in contextual light and dark modes#41126
julien-deramond merged 4 commits intomainfrom
main-jd-close-button-dark-theme

Conversation

@julien-deramond
Copy link
Copy Markdown
Member

@julien-deramond julien-deramond commented Dec 29, 2024 •
edited
Loading

Caution

Before merging, close-button.md modifications must be reverted

Description

Following up the PR for the carousel display issues in contextual light and dark modes at #40695, this PR also fixes the same kind of filter issue.

This PR will close #39765.

The light in dark mode doesn't work in the main branch:

Screenshot 2024-12-29 at 21 31 26

The idea is to rely on custom properties so that there's never a specificity issue when nesting color modes (light mode in dark mode, and dark mode in light mode) (see more info in #40695)

/cc @louismaximepiton

Type of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • (N/A) My change introduces changes to the documentation
  • (N/A) I have updated the documentation accordingly
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Closes #39765

@julien-deramond julien-deramond marked this pull request as ready for review December 29, 2024 20:39
@julien-deramond julien-deramond requested a review from a team as a code owner December 29, 2024 20:39
@julien-deramond julien-deramond force-pushed the main-jd-close-button-dark-theme branch 2 times, most recently from 2a67d59 to 577dcb0 Compare December 29, 2024 20:49
@julien-deramond julien-deramond force-pushed the main-jd-close-button-dark-theme branch from 577dcb0 to 761d57e Compare December 29, 2024 20:59
louismaximepiton
louismaximepiton approved these changes Dec 31, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only regression I can see here is for people overriding directly --bs-btn-close-white-filter and not the Scss variable. I think that this patch is more asked than the workaround I underline here. I'm fine with the changes.

@julien-deramond
Copy link
Copy Markdown
Member Author

julien-deramond commented Dec 31, 2024

The only regression I can see here is for people overriding directly --bs-btn-close-white-filter and not the Scss variable. I think that this patch is more asked than the workaround I underline here. I'm fine with the changes.

I forgot to mention it in the description, you're right. I don't think that the override of --bs-btn-close-white-filter is used (or except maybe as a workaround for this bug), so it should be safe to land as is.
I'll update this PR to remove the modifications done on the Markdown file for testing, and then merge the PR. Thanks for the review LM 🙏

@julien-deramond julien-deramond merged commit a5d430d into main Dec 31, 2024
@julien-deramond julien-deramond deleted the main-jd-close-button-dark-theme branch December 31, 2024 08:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@louismaximepiton louismaximepiton louismaximepiton approved these changes

Assignees

No one assigned

Labels

color mode css v5

Projects

No open projects
v5.3.4
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

2 participants

@julien-deramond @louismaximepiton