Skip to content
New issue

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

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

Already on GitHub? # to your account

CSS: new $navbar-* aliases for $navbar-light-* Sass vars #39441

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Nov 27, 2023

Description

When we developed the color modes, we chose to keep $navbar-light-* Sass variables to avoid breaking changes even if it was obvious that the naming wasn't correct; $navbar-light-* setting the values for both light and dark modes.

This PR is an attempt to find a non-breaking solution to close #39070 before having to wait for a v6 to introduce corresponding $navbar-* Sass variables (without the -light- keyword).

The idea here is to introduce exactly the same Sass variables without the -light- keyword.
Each of these new variables would have the corresponding $navbar-light-* Sass variables as default values.
However, some $navbar-light-* Sass variables depended on each other, so it makes it a little bit more difficult.

If we consider existing projects, overriding one or more $navbar-light-* Sass variables should give exactly the same result. But overriding the new $navbar-* should also work.
So far, I haven't found another solution than the one suggested in this PR.

If it's completely non-breaking, I'd suggest introducing it directly in a v5.3.x because it was something missing in the v5.3 color modes feature.

@twbs/css-review thoughts?

Motivation & Context

Provide as soon as possible the right naming for Navbar Sass variables for consistency of usage.

Type of changes

  • Refactoring (non-breaking change)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • 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 #39070

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navbar color in dark mode uses the $navbar-light-color Sass variable
1 participant