V5 btn-light/btn-black hover and normal colours too close #34123
Comments
|
Probably, but that's still good to improve :) |
|
FWIW it's because we check if background color should be light or dark (to contrast with foreground color) and apply either |
Sigh, this seems like a downgrade in many cases. Problems: - change from column groups (CSS-based) to masonry (JS-based) is dynamic and leads to page reflow on reload, or changing to next image, so for now keep it enable for homepage but disable it for image info page. - the text light/dark are not readable enough on hover, filled this as twbs/bootstrap#34123 and will change later. - the change from `.close` to `.btn-close` also means changing from text (`×`) to SVG icon, which is (for me) urgh. - buttons in form labels give priority to button theming, not form label theming; changed search top-bar button to `.btn-secondary` due to this. So, doing this for the times, not for "oh it's so much nicer". Anyway… Changes: - fixed `.card > .table` double-borders; v4 had border on top (which was merged almost perfectly with `.card-header`), v5 has it on the bottom, where it's so obvious, so fixed that; - tweaked `navbar`s and `alert`s as needed; - changed from left/right to start/end for a number of classes; - tweaked a number of grid sizing for better flow; these would apply to v4 too, likely. Closes #6.
|
See #36168 for a potential solution. |
|
Noticed this was resolved in 5.2.0 but when applying the update to take advantage of this I noticed that the rounded corners changed so they don't appear so nicely when inside a card (the rounded corner is different to the rounded corner of the card)
Sorry it's a tiny thing... but thought worthy of mention nevertheless. Easily missed and possibly even by design for someone in the know. |
|
@fitcwill This was mentioned in our blog posts. Was an intentional design update :). |
I'm not familiar with Bootstrap's color schemes/utilities to debug this, but from what I see,
btn-lightandbtn-blackhave too "close" normal and hover colours:btn-light: v4#f8f9fawith hover#e2e6ea, v5#f8f9fawith hover#f9fafbbtn-dark: v4#343a40with hover#23272b, v5#212529with hover#1c1f23Using an online calculator, btn-light in v4 has a delta-E of ~7, wheras v5 has a delta-E of only 0.34, which means it's practically invisible.
In practice this can be seen by hovering in the v4 docs vs. v5 docs, or thanks to helpful github rendering inline here (although the circles are too small to be clearly visible, but it is).
Is this intentional?
The text was updated successfully, but these errors were encountered: