Contrast is bad for FocusRings on blue MdTextButtons |
|||
Issue descriptionFocus rings are blue, MdTextButton::CreateSecondaryUiBlueButton() is blue. These don't mix too well. bettes@ given that these are normally on white, what color can we use for the focus ring around "Leave" in the below example? Normally I'd expect white on blue but that would visibly shrink the icon rather than make the focus ring be clearly visible.
,
Nov 1
Another option is to not use focus rings for the blue button but rather make it a lighter blue when it has focus. That might be more in line with Material elsewhere (I saw that Sheets make its yellow button whiter). Would that make sense?
,
Nov 1
What's most important: Have a single, universal focus ring style that is usable across all types of components AND recognizable across Windows and Mac UI conventions. That rules out any special exceptions for the BlueButton, and I would advocate this bug a WontFix, but here's some options as I see it. LMK if there's something I'm missing. Options for us to consider: 1. Keep as-is. It's the best cross-platform solution we have and keeps the contrast between buttonText and buttonColor intact. 2. Update our focus rings to colored fills. This will likely not work immediately for dropdowns and inputs, so if we want to stay true to the goal above, we'd need to do further investigation to see what that would look like. 3. We could fork focus rings, and do fills for textButtons, and rings for inputs but I think that's a bad idea (for the reasons above) 4. We could lighten or thicken the current ring...which may improve something but likely not everything. --- Attaching MacOS equivalent for reference
,
Nov 1
Google Material guidance attached for reference
,
Nov 2
Your MacOS equivalent looks like native Cocoa and not views. Using the focus ring as is doesn't work as our focus ring overlaps the bluebutton which gives blue on blue. My example the bluebutton is focused but it's really impossible to tell. Material guidance makes sense to me. We don't fade the bluebutton when it's focused. That's likely the bug. Does this mean that the focused bluebutton shouldn't show a focus ring on top either?
,
Dec 8
,
Dec 8
This is a sample of what the button looks like when we lighten it by one Google Material step (e.g. 500->400) when it is selected.
,
Dec 11
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/4fab1094a96e7684397a30217d0fdd843bb9f5e4 commit 4fab1094a96e7684397a30217d0fdd843bb9f5e4 Author: Dana Fried <dfried@chromium.org> Date: Tue Dec 11 00:16:54 2018 Prominent buttons receive a lighter background on focus. This corresponds with material design standards. It does not affect GTK themes on Linux, which are already using a hack to get an appropriate color for prominent buttons. Bug: 900774 Change-Id: I84efa8681fd69aba4e6f34df9adeb05a2a7532c5 Reviewed-on: https://chromium-review.googlesource.com/c/1369033 Reviewed-by: Michael Wasserman <msw@chromium.org> Reviewed-by: Peter Kasting <pkasting@chromium.org> Commit-Queue: Dana Fried <dfried@chromium.org> Cr-Commit-Position: refs/heads/master@{#615343} [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/chrome/browser/ui/libgtkui/native_theme_gtk.cc [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/gfx/color_palette.h [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/native_theme/common_theme.cc [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/native_theme/native_theme.h [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/native_theme/native_theme_dark_aura.cc [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/views/controls/button/md_text_button.cc [modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/views/controls/button/md_text_button.h
,
Dec 11
|
|||
►
Sign in to add a comment |
|||
Comment 1 by pbos@chromium.org
, Oct 317.3 KB
7.3 KB View Download