After an evaluation, GNOME has moved from Bugzilla to GitLab. Learn more about GitLab.
No new issues can be reported in GNOME Bugzilla anymore.
To report an issue in a GNOME project, go to GNOME GitLab.
Do not go to GNOME Gitlab for: Bluefish, Doxygen, GnuCash, GStreamer, java-gnome, LDTP, NetworkManager, Tomboy.
Bug 786956 - EmojiChooser: Fix theming on Adwaita:dark, HighContrast, etc.
EmojiChooser: Fix theming on Adwaita:dark, HighContrast, etc.
Status: RESOLVED FIXED
Product: gtk+
Classification: Platform
Component: Themes
3.22.x
Other All
: Normal normal
: ---
Assigned To: gtk-bugs
gtk-bugs
Depends on:
Blocks:
 
 
Reported: 2017-08-29 07:54 UTC by Mohammed Sadiq
Modified: 2017-09-04 15:23 UTC
See Also:
GNOME target: ---
GNOME version: ---


Attachments
emoji selector (image) (25.35 KB, image/png)
2017-08-29 07:54 UTC, Mohammed Sadiq
  Details
Adwaita: Make use of SASS syntax for emoji stuff (5.73 KB, patch)
2017-09-02 13:18 UTC, Daniel Boles
none Details | Review
Adwaita: Actually mix colours for emoji button (2.15 KB, patch)
2017-09-02 13:18 UTC, Daniel Boles
committed Details | Review
Adwaita: proper colours for inactive emoji buttons (4.56 KB, patch)
2017-09-02 13:18 UTC, Daniel Boles
none Details | Review
Adwaita: Apply opacity to emoji button label only (4.32 KB, patch)
2017-09-02 13:18 UTC, Daniel Boles
none Details | Review
HighContrast: basic port of emoji CSS from Adwaita (5.44 KB, patch)
2017-09-02 13:48 UTC, Daniel Boles
none Details | Review

Description Mohammed Sadiq 2017-08-29 07:54:20 UTC
Created attachment 358653 [details]
emoji selector (image)

The Emoji list have dark text on Black theme. Please see the attached screenshot.

Thanks
Comment 1 Matthias Clasen 2017-08-30 11:44:02 UTC
pretty sure thats a theme issue
Comment 2 Daniel Boles 2017-09-02 12:20:55 UTC
I think it'd be more correct to have the unselected buttons use a dim fg colour, like .dim-label, not the borders colour; they are not borders after all, and the borders colour is already a bit too dim for its intended purpose if you ask me.
Comment 3 Daniel Boles 2017-09-02 12:45:38 UTC
The current styling would've happened to work on Adwaita light, where bgcolor < borders < fgcolor, but it doesn't on :dark, where borders < bgcolor < fgcolor.
Comment 4 Daniel Boles 2017-09-02 13:18:16 UTC
Created attachment 358982 [details] [review]
Adwaita: Make use of SASS syntax for emoji stuff

This makes the theme easier to maintain.
Comment 5 Daniel Boles 2017-09-02 13:18:29 UTC
Created attachment 358983 [details] [review]
Adwaita: Actually mix colours for emoji button

Apparently a decimal does not work, so sassc seemed to treat it as a %,
so it ended up way too low. Using % fixes that, as used elsewhere anyway
Comment 6 Daniel Boles 2017-09-02 13:18:42 UTC
Created attachment 358984 [details] [review]
Adwaita: proper colours for inactive emoji buttons

Use opacity to differentiate unselected/hovered/selected buttons. It had
assumed bg < border < fg colours, which may be false, as in Adwaita:dark

This also means we do not need to special-case for the backdrop state.
Comment 7 Daniel Boles 2017-09-02 13:18:54 UTC
Created attachment 358985 [details] [review]
Adwaita: Apply opacity to emoji button label only

This avoids diluting the colour of the bottom border shown on hover.
Comment 8 Daniel Boles 2017-09-02 13:47:32 UTC
I'm also looking at porting the Adwaita styles to HighContrast, though it seems that when backdropped, the emoji buttons magically regain their inherited borders, so the size-request of the chooser changes.

Simply applying all selectors to blah, blah:backdrop {} of course resolves this, but that feels a bit too blunt-force.
Comment 9 Daniel Boles 2017-09-02 13:48:53 UTC
Created attachment 358986 [details] [review]
HighContrast: basic port of emoji CSS from Adwaita
Comment 10 Daniel Boles 2017-09-02 13:50:29 UTC
In case it's easier, I've pushed these as a WIP branch: https://git.gnome.org/browse/gtk+/log/?h=wip/dboles/emoji-css