GNOME Bugzilla – Bug 787531
The tick button is not/barely visible on light colors with Dark theme
Last modified: 2017-09-16 16:03:57 UTC
Created attachment 359488 [details] color picker with dark theme (image) With Adwaita dark theme, the tick button always have white color, which makes it less visible when the color is light. Please see the attached screenshot (the top right color selected). Thanks
Good catch; this is because the CSS applies $text_color to colorswatch.light and $selected_fg_color to colorswatch.dark, but in Adwaita:dark those are both white.
I would say to simplify things here, and rather than depending on $named_colours, just use white for .dark and black for .light However, since there are backdrop selectors, we should probably do something more sophisticated...
(In reply to Daniel Boles from comment #2) > However, since there are backdrop selectors, we should probably do something > more sophisticated... fwiw, in this case, HighContrast just does &:backdrop { color: transparentize(white|black, 0.7); } so maybe the same would work for Adwaita. Alternatively, we could substitute $text_color with e.g. $borders_color in Adwaita:dark, but I don't know if using named colours here really gains anything.
Created attachment 359557 [details] [review] Adwaita: dark: Make colorswatch.light tick visible It used $text_color unconditionally, but in :dark, text is white, so we overlaid a white tick on any light colours, all the way to white itself. Instead, just use white/black over dark/light swatches respectively, as done by HC, so both variants get the right colour for every swatch. -- -- Does anyone know why, whenever I regenerate the CSS from the SASS, it does stuff like this? If I had to guess, it seems that my sassc disagrees with Jakub’s, especially about whether to include various selectors on both :selected:focus. --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1852,9 +1852,9 @@ headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.tit headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; } -.view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #215d9c; } +.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #215d9c; }
Review of attachment 359557 [details] [review]: ::: gtk/theme/Adwaita/_common.scss @@ +4122,3 @@ &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } + &:backdrop { color: transparentize(white, 0.7); } Alpha of 0.5 is better here, as that's basically the current effect (because backdrop FG colour is a 50% mix of FG colour), whereas 0.7 makes the backdropped tick too faint compared to what we currently do.
Created attachment 359897 [details] [review] Adwaita: dark: Make colorswatch.light tick visible It used $text_color unconditionally, but in :dark, text is white, so we overlaid a white tick on any light colours, all the way to white itself. Instead, just use white/black over dark/light swatches respectively, as done by HC, so both variants get the right colour for every swatch. For backdrop, use alpha 0.5, unlike 0.7 in HC, as that seemed excessive & different from the current effect. 0.5 is almost identical to how $backdrop_fg_colour is a 50% mix of $fg_color, & matches backdrop text.
Comment on attachment 359897 [details] [review] Adwaita: dark: Make colorswatch.light tick visible This seems like a no-brainer, so pushed (with a slightly better commit message)