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

Ensure to increase contrasts on buttons & colored links hover/active states #30989

Merged
merged 8 commits into from
Aug 4, 2020

Conversation

ffoodd
Copy link
Member

@ffoodd ffoodd commented Jun 9, 2020

Alongside #30972 — and in #30548 roadmap — this ensures that hover and active states have higher contrasts than the default state:

  1. for colored links it makes obvious that we have to find a clean way to add darkish background behind some of them.
  2. the warning button's shadow feels a bit weird, not quite sure about what to do with it for now.

Preview: ButtonsColored links

Since this is only visual, should we consider to backport this to v4?

@ffoodd ffoodd force-pushed the master-fod-light-or-dark-hovers branch from f43e0db to f564fe4 Compare June 9, 2020 09:08
@mdo mdo changed the base branch from master to main June 16, 2020 19:32
@patrickhlauke
Copy link
Member

will this also apply to the toggle buttons https://v5.getbootstrap.com/docs/5.0/forms/checks/#toggle-buttons ? in particular, i find the outline styles ones confusing when hovering with the mouse, as at that point you can't tell at all whether the toggle is on or off https://v5.getbootstrap.com/docs/5.0/forms/checks/#outlined-styles - likely, we'd need a separate hover style for non-toggled buttons (probably one that is still outlined, rather than filled, so that the toggle state is visually clear on hover)

@ffoodd
Copy link
Member Author

ffoodd commented Jun 22, 2020

@patrickhlauke This PR bascially only choose between darken() and lighten() for background depending on the foreground color (if it's light, the background darkens; it lightens otherwise).

So it'll apply to toggle buttons, but won't improve what you're talking about, I guess.

@patrickhlauke
Copy link
Member

no worries, i'll file a separate issue then :)

@patrickhlauke
Copy link
Member

posted the separate issue here #31149

@XhmikosR XhmikosR added this to Inbox in v5.0.0-alpha2 via automation Jun 26, 2020
v5.0.0-alpha2 automation moved this from Inbox to Approved Aug 3, 2020
@XhmikosR
Copy link
Member

XhmikosR commented Aug 4, 2020

This was merged wrong it seems.

@XhmikosR XhmikosR merged commit 9181c84 into main Aug 4, 2020
v5.0.0-alpha2 automation moved this from Approved to Shipped Aug 4, 2020
@XhmikosR XhmikosR deleted the master-fod-light-or-dark-hovers branch August 4, 2020 18:42
olsza pushed a commit to olsza/bootstrap that referenced this pull request Oct 3, 2020
…states (twbs#30989)

* feat(buttons): ensure to increase contrasts on hover/active

* Update _buttons.scss

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v5.0.0-alpha2
  
Shipped
Development

Successfully merging this pull request may close these issues.

None yet

4 participants