Bugzilla

There a few too many similar gray tones used in our UI that were inherited from the Proton redesign. Proton colors were inherited from the branding team, and the gray collection comes with 20 tones, with some of them being very similar to one another and therefore not super helpful for UI design.

The design systems team needs to audit our usage of grays within Firefox, and propose a standard collection--similarly to how it was handled in [Photon](https://firefoxux.github.io/photon/visuals/color.html).

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.

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.

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](https://firefoxux.github.io/photon/visuals/color.html). 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.

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](https://firefoxux.github.io/photon/visuals/color.html). 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.