1821203 - (fifty-shades-of-gray) Gray tones used in Firefox need consolidation

Status: NEW

(Toolkit :: Themes, task, P2)

Description

[Jules Simplicio [:jules]]

There are a few different contrast issues with the usage of grays on different UI layers (e.g. text color, button background, page background, card background, modal background), and the relationship between these layers' gray tones.

A note that Proton colors were inherited from the branding team's redesign, and that gray collection introduced 20 tones of gray. While we don't use all 20 on browser UI, we have introduced a good amount of different grays that have created some issues. Here are a few:

• A few very similar gray tones are being used in contexts that are not providing enough differences (e.g. see button in dark mode: the hover (#52525E) and active (#5B5B66) states background colors are nearly the same value).
• Cards in dark mode are nearly the same color as buttons in dark mode. (see https://bugzilla.mozilla.org/show_bug.cgi?id=1711624)
• New Tab has an unique page background color + card background color relationship compared to the rest of our about pages, in both default and dark mode.
• In dark mode, Firefox View has the same page background color as New Tab (#2B2A33), diverging from the rest of all other about pages (#1C1B22).

The design systems team needs to audit our usage of grays within Firefox UI layers, and propose a standard collection--similarly to how it was handled in Photon. The goal is to generate a consolidated list by analyzing our current usage of gray tones, checking contrast between gray backgrounds/gray text color combinations in light and dark mode, and addressing gray tones that are too close to one another. We also can benefit from color mixing with transparency and currentColor in certain instances where we can't guarantee different contexts will provide enough contrast.

Comment 1

[Stuart Colville [:muffinresearch]]

NI'ing Jules to add a comment covering current status of this in context of the current redesign.

Comment 2

[Jules Simplicio [:jules]]

Maxx's bug from above, 2057617, should take care of the biggest discrepancy at the moment which is the New Tab code using a slightly different dark/light system. As of today their background color still relies on specific shades of gray from Proton, even with Nova active.

Thanks Maxx for working with us on this. Maxx's work is under WIP here (we had a bug to look into but feel confident it's fine now with a rebase). Maxx will put it up for review once I get an OK (visual check) from our design systems UX manager who is out of office this week, so expected more movement on this next week.