Bug 438185 - In GTK3 apps, checked toggle buttons in inactive windows have black text on blue backgrounds
Summary: In GTK3 apps, checked toggle buttons in inactive windows have black text on b...
Status: RESOLVED FIXED
Alias: None
Product: Breeze
Classification: Plasma
Component: gtk theme (show other bugs)
Version: 5.21.90
Platform: Other Linux
: NOR normal
Target Milestone: ---
Assignee: Janet Blackquill
URL:
Keywords: usability
Depends on:
Blocks:
 
Reported: 2021-06-06 20:54 UTC by nyanpasu64
Modified: 2021-11-22 23:46 UTC (History)
2 users (show)

See Also:
Latest Commit:
Version Fixed In:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description nyanpasu64 2021-06-06 20:54:05 UTC
SUMMARY
In GTK3 apps, if you enable a toggle button (so it turns blue), then focus a different window, the button remains blue (whereas a tab-focused button would turn white), but the text turns black (which only looks right if the background turns white).

STEPS TO REPRODUCE
1. With the GTK3 theme set to Breeze, run gtk3-widget-factory.
2. Press Super to open the start menu and unfocus the new window.

OBSERVED RESULT
The third "togglebutton" visible has black text on a blue background.

EXPECTED RESULT
It's... complicated.

Checked toggle buttons in backdrop windows use @theme_button_foreground_active_backdrop_breeze for text, and @theme_button_decoration_focus_backdrop_breeze for background. In practice, this results in black text on a blue background.

Strangely, @theme_button_foreground_active_backdrop_breeze is actually white (#fcfcfc) in the /usr/share/themes/Breeze/gtk-3.0/gtk.css generated when building breeze-gtk from /usr/share/color-schemes/Breeze.colors, but black (#232627) in the ~/.config/gtk-3.0/colors.css generated by kde-gtk-config when you switch KDE color schemes to Breeze.colors (results may deviate slightly if you're using Breeze Light). This is an inconsistency that probably should be resolved.

I don't know how to best resolve this inconsistency, since neither @theme_button_foreground_active_backdrop_breeze nor @theme_button_decoration_focus_backdrop_breeze are never used for their "intended" purposes of styling focused widgets in a background window. This is because a focused button in a backdrop (unfocused) window actually lacks the :active pseudo-class which indicates a focused button in a foreground window! (Coincidentally, this is a good thing because it causes breeze-gtk to match breeze-qt, since neither highlights focused widgets in unfocused windows.)

Additionally, merely fixing the colors of these 2 variables won't fix GTK toggle buttons to resemble Qt's styling of checkable buttons, because Breeze Qt checkable buttons don't use the blue "focused" color when checked, but "gray" instead!

SOFTWARE/OS VERSIONS
Operating System: Arch Linux
KDE Plasma Version: 5.22.80
KDE Frameworks Version: 5.82.0
Qt Version: 5.15.2
Kernel Version: 5.12.9-arch1-1 (64-bit)
Graphics Platform: X11
Processors: 12 × AMD Ryzen 5 5600X 6-Core Processor
Memory: 15.6 GiB of RAM
Graphics Processor: NVIDIA GeForce GT 730/PCIe/SSE2

ADDITIONAL INFORMATION

Unfortunately, Breeze Qt's styling of checkable buttons is flawed as well: If you focus a checkable button (eg. the mute/etc. icon buttons in pavucontrol-qt) by pressing Tab (clicking doesn't work), then the checked/unchecked toggle states of the button are indistinguishable in Breeze except for a shift by 1 pixel down/right when checked. Perhaps the checked+focused state should be changed to have a dark blue focus border, plus a gray background to indicate "checked". (I don't know if the Plasma 5.23 Breeze redesign will obsolete this corner case, or if this needs to be taken into account when redesigning Breeze to prevent this issue from recurring.)

Breeze GTK3 is worse: unlike Breeze Qt, clicking on a checkable button focuses it (resulting in a blue background, turning light blue when clicked). Worse yet, the checked and unchecked states are entirely indistinguishable (since the button doesn't move when checked and unchecked).
Comment 1 Janet Blackquill 2021-11-22 20:59:14 UTC
Git commit 19e285b42646c60bd5652c541723e95a3c24547d by Jan Blackquill.
Committed on 22/11/2021 at 20:50.
Pushed by cblack into branch 'master'.

gtk3, gtk4: refactor buttons heavily, make look near-identical to breeze qstyle
Related: bug 426557, bug 443919

M  +2    -33   src/gtk3/widgets/_app_notifications.scss
M  +105  -295  src/gtk3/widgets/_button.scss
M  +2    -8    src/gtk3/widgets/_color_chooser.scss
M  +1    -69   src/gtk3/widgets/_headerbar.scss
M  +0    -2    src/gtk3/widgets/_menus.scss
M  +0    -4    src/gtk3/widgets/_notebook.scss
M  +1    -1    src/gtk3/widgets/_pathbar.scss
M  +2    -33   src/gtk4/widgets/_app_notifications.scss
M  +105  -292  src/gtk4/widgets/_button.scss
M  +2    -8    src/gtk4/widgets/_color_chooser.scss
M  +1    -72   src/gtk4/widgets/_headerbar.scss
M  +0    -11   src/gtk4/widgets/_menus.scss
M  +0    -4    src/gtk4/widgets/_notebook.scss
M  +1    -1    src/gtk4/widgets/_pathbar.scss
M  +1    -1    src/gtk4/widgets/_spinbutton.scss

https://invent.kde.org/plasma/breeze-gtk/commit/19e285b42646c60bd5652c541723e95a3c24547d
Comment 2 Nate Graham 2021-11-22 23:46:57 UTC
Git commit ed314cf17880f71a897bd4a67cce2ffc9468610e by Nate Graham, on behalf of Jan Blackquill.
Committed on 22/11/2021 at 23:46.
Pushed by ngraham into branch 'Plasma/5.23'.

gtk3, gtk4: refactor buttons heavily, make look near-identical to breeze qstyle
Related: bug 426557, bug 443919
(cherry picked from commit 19e285b42646c60bd5652c541723e95a3c24547d)

M  +2    -33   src/gtk3/widgets/_app_notifications.scss
M  +105  -295  src/gtk3/widgets/_button.scss
M  +2    -8    src/gtk3/widgets/_color_chooser.scss
M  +1    -69   src/gtk3/widgets/_headerbar.scss
M  +0    -2    src/gtk3/widgets/_menus.scss
M  +0    -4    src/gtk3/widgets/_notebook.scss
M  +1    -1    src/gtk3/widgets/_pathbar.scss
M  +2    -33   src/gtk4/widgets/_app_notifications.scss
M  +105  -292  src/gtk4/widgets/_button.scss
M  +2    -8    src/gtk4/widgets/_color_chooser.scss
M  +1    -72   src/gtk4/widgets/_headerbar.scss
M  +0    -11   src/gtk4/widgets/_menus.scss
M  +0    -4    src/gtk4/widgets/_notebook.scss
M  +1    -1    src/gtk4/widgets/_pathbar.scss
M  +1    -1    src/gtk4/widgets/_spinbutton.scss

https://invent.kde.org/plasma/breeze-gtk/commit/ed314cf17880f71a897bd4a67cce2ffc9468610e