1682065 - Implement a cohesive and AAA readable default color scheme for the Folder Pane items

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[Alessandro Castellani [:aleca]]

Attachment: Color scheme.png

The Problem
The folder pane color scheme is currently dictated by many different variations and OS specific files.
In some scenarios, like for newly received messages, we rely on the default highlight/primary color defined by the OS.

This approach allows us to offer a more "native" look by respecting the OS color scheme, but it doesn't guarantee AAA readability if the defined color is not compatible with a specific theme.

Since we already use a lot of defined colors for important areas, like notifications, account icons, and dark mode color scheme, we should implement a well defined and cohesive color scheme for the Folder Pane.

This approach will guarantee a better an granular control, and will help us ship better defaults without requiring customization to improve readability.

Proposal
Attached, you can find an initial proposal for the color scheme.
No drastic change here, other than a couple of noticeable implementations:

• New message orange indicator: This addition is necessary for color blind users that can't rely purely on the color change. The indicator should be outside the boundaries of the parent icon by at least 1px to create a proper "shape inconsistency".
• Full black and Full white: Using full #000 and #FFF is never recommended in large interfaces because it's considered too harsh and it should only be used for "high contrast" themes. We should adopt these variations only for folders with "unread" messages in order to make them more noticeable without the necessity of introducing another color variation, avoid excessive "eye catching".
• Drop shadows: Implement a faint drop shadow for folder text with "new" and "unread" messages only on Dark Themes. This is necessary to improve the readability since our default background color is a dark grey, and we don't want to diverge too much from our brand blue.

The various interaction variations we implemented recently (focused, selected, etc.) will behave as usual.

Colors in Default or Light theme

• Font: #333333
• Folder: #4F526D
• Account folder: #0A84FF
• Twisty icon: #505050
• New message font + folder: #0A84FF
• Unread message font + folder: #000000

Colors in Dark theme

• Font: #D4D4D4
• Folder: #DCDCDC
• Account folder: #45B1FF
• Twisty icon: #D4D4D4
• New message font + folder: #45B1FF
• Unread message font + folder: #FFFFFF
• New/Unread message drop shadow (only the text, not the folder): text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

All the listed colors guarantee AAA readability for bold font weight, and AA readability for regular font weight.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: 1682065-new-folderPane-styling.patch

This should do all the proposals except the text shadow because this isn't supported in tree.

Comment 2

[Richard Marti (:Paenglab)]

Attachment: 1682065-new-folderPane-styling.patch

Sorry, previous patch missed one change.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: 1682065-new-folderPane-styling.patch

Make the unread folder full black or full white.

Comment 4

[Alessandro Castellani [:aleca]]

Comment on attachment 9193344 [details] [diff] [review]
1682065-new-folderPane-styling.patch

Review of attachment 9193344 [details] [diff] [review]:
-----------------------------------------------------------------

Awesome, thank you so much for taking care of this.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/2a31eac5d7e6
Use a new message indicator on the folder icons. r=aleca

Comment 6

[Alessandro Castellani [:aleca]]

Let's not uplift this and let it run its course in order to gather feedback in beta.

Comment 7

[cburroughs]

Hello, when I updated to Thunderbird 91 I noticed a little orange-ish dot appearing next to various mail folders, and searchfox.org/comm-central pointed me here.

I understand that at least part of the ticket is making the UI more consistent for color blind users. That sounds good! However, email is intrinsically distracting enough and I don't want Thunderbird to do anything that clamors for even more attention. I'm also unsure what use case is served by "hey pay attention! the backlog of email in your subfolder is 0.1% bigger". I don't doubt there is a niche workflow where this makes sense, but it strikes me as an odd default for anything other than maybe the Inbox. It feels a bit like a design pattern from a mobile app fighting in the attention economy instead of a people focused program.

I'm not arguing for the previous inconsistent UI, but question the feature in general. The previous comment asked for feedback, so I hope this somehow helps.

(For me personally I'll disable it with userChrome.css like I did the prior coloration.)