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

Dark mode: Buttons #2293

Merged
merged 1 commit into from
Oct 10, 2023
Merged

Conversation

louismaximepiton
Copy link
Member

@louismaximepiton louismaximepiton commented Oct 9, 2023

Description

  • .btn-secondary becomes transparent by default -> No need of .btn-outline-secondary, keeping it for retro-compatibility. This could be easily changed if there's too much impacts.
  • Dropdown toggle don't have a transparent background -> Need a question about it to the design
  • Some buttons have transparent backgrounds that might be issues when used on images for example.
  • Success and danger buttons don't change its default color whether on dark or light mode.
  • Changing the mixin and the default number of parameters of this mixin. The minimum number of parameters could be changed but would be useless imo.
  • Not using Sass Variables since Bootstrap doesn't.

Links

@louismaximepiton louismaximepiton added the color mode Temporary label to highlight color mode issues label Oct 9, 2023
@netlify
Copy link

netlify bot commented Oct 9, 2023

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 420f01e
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/6524fb329405ec00087fb05a
😎 Deploy Preview https://deploy-preview-2293--boosted.netlify.app/docs/5.3/dark-mode
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@julien-deramond julien-deramond marked this pull request as ready for review October 10, 2023 06:13
Copy link
Contributor

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

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

Neat! Let's merge this first version so that it unblocks other comments.

I'll the following comments within the description of the main PR:

  • .btn-primary is now transparent when active; can be an issue against images
  • .btn-info is now transparent when hovered; can be an issue against images
  • Mention the impact of the new button-variant mixin in the migration guide
  • Not a big fan of using $red instead $danger because the color doesn't change. Do we need to introduce new Sass variables for fixed functional colors?
  • Do we need to drop btn-outline-secondary?
  • Double check later the &:not(.dropdown-toggle-split) { use case in _dropdown.scss

@julien-deramond julien-deramond merged commit 3272f53 into main-jd-dark-mode Oct 10, 2023
13 checks passed
@julien-deramond julien-deramond deleted the main-lmp-buttons-dark branch October 10, 2023 07:24
This was referenced Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
color mode Temporary label to highlight color mode issues
Projects
Development

Successfully merging this pull request may close these issues.

2 participants