1868412 - Introduce red tokens for error states (descriptive error text and focus outline)

Status: RESOLVED FIXED

(Toolkit :: Themes, enhancement)

Description

[Jules Simplicio]

Upon providing support for bug 1866291 and discussing between theme engineers, we decided we need some red color values that will look good on the chrome for the error state of an input, for both the descriptive error text below it and the focus outline.

Note that while I guaranteed these shades have enough contrast in our default themes and several lightweight themes, that we are aware users may have red themes installed, and the red shades we are using will have contrast against certain red shades, but will most likely not have good contrast against all. This is our best solution for now.

We already have a red shade that will work well for light mode, but we need a new red token for dark mode, and then to finally add tokens for descriptive text and focus outline error colors in light and dark. Here are the colors I generated that will work for this and are part of a red scale I have been working on as part of this work.

I'm thinking:

Light

--focus-outline-color-error: var(--color-red-50)
--text-color-error: var(--color-red-50)

Dark

--color-red-20: #FAA0A0;
--focus-outline-color-error: var(--color-red-20)
--text-color-error: var(--color-red-20)

Comment 1

[Jules Simplicio]

Attachment: Bug 1868412 - Introduce red tokens for form input error state (descriptive error text and focus outline) r?#reusable-components-reviewers,#desktop-theme-reviewers,morgan

Added

• --color-red-20
• --focus-outline-color-error
• --text-color-error

Comment 2

[Jules Simplicio]

A note I've learned we have an existing dark mode red shade that's really close to the shade I'm proposing and is accessible for text usage, so I will be using it instead.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/aa3e301b7be3
Introduce red tokens for form input error state (descriptive error text and focus outline) r=reusable-components-reviewers,desktop-theme-reviewers,accessibility-frontend-reviewers,morgan,hjones,dao

Comment 4

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9367111 [details]
Bug 1868412 - Introduce red tokens for form input error state (descriptive error text and focus outline) r?#reusable-components-reviewers,#desktop-theme-reviewers,morgan

CSS-only change needed for bug 1866291, approved for 121.0b9.

Comment 5

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/c92615f1c81a

Comment 6

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/aa3e301b7be3

Comment 7

[Jules Simplicio]

Updating title since we’re starting to use the error text color beyond just forms 👍