1854703 - Change `--icon-color-warning`'s shade in regular/light mode so that it is closer to yellow, and farther from orange/red

Status: NEW

(Toolkit :: Themes, enhancement)

Description

[Jules Simplicio [:jules]]

Our new icon token color, --icon-color-warning, for the 'warning' feedback meaning in regular/light mode is a little bit too close to red hues.

Although the work was done intentionally since many yellow shades become inaccessible against a white background, we've had a couple teammates bring up that the new shade used for 'warning' feels a bit closer to red (aka 'critical/error') as opposed to yellow ('warning' sign), which can indicate alarm/error to the user experience.

We should re-evaluate and touch up our new work-in-progress yellow shades that are slowly being introduced via the tokens work, with a focus on improving the --yellow-50 shade that is used for --icon-color-warning, and any yellows that are feeling too close to red.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of how --color-yellow-50 / #cd411e looks on a cautioun sign

Just to make this concrete, here's a screenshot (excerpted from a larger screenshot on https://phabricator.services.mozilla.com/D189010 ) of how this yellow shade looks when we apply it to the icon on about:config warning page (which we aren't currently doing but might at some point).

This nominally-yellow color (--color-yellow-50, which is currently #cd411e) does indeed look much more red than yellow, making this icon look more like "alarm bells" than we intend, I think.

Comment 2

[:gerard-majax]

Attachment: Capture d’écran du 2024-07-12 10-09-03.png

i got hit badly because of that on bug 1899516, we should definitively fix that, since it's the default behavior with the default "System auto theme"

Comment 3

[:gerard-majax]

Attachment: image.png

now the same under a dark theme

Comment 4

[Jules Simplicio [:jules]]

Hey :gerard-majax, I let my teammate that helped you with your work know about this bug as I'm actively working on this; some updates to color shades should come in H2.