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.

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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