1673582 - Change light theme css variable "--theme-highlight-blue" from --blue-55 to --blue-60

Status: RESOLVED FIXED

(DevTools :: Shared Components, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Initially discussed in the scope of https://phabricator.services.mozilla.com/D94747

DevTools onboarding messages use a pale blue background. On such backgrounds, the --theme-highlight-blue variable is not contrasted enough when used for links (contrast ratio is 4.22 instead of 4.5).

This variable is used for links throughout devtools, as well as for other UI elements: https://searchfox.org/mozilla-central/search?path=&q=--theme-highlight-blue

In the light theme, --theme-highlight-blue is mapped to --blue-55, which is #0074e8 and which is not a photon color. Photon actually recommends using --blue-60 for links (https://design.firefox.com/photon/components/links.html).

The proposal here is to either update --theme-highlight-blue to use --blue-60, or introduce a new theme variable for the link color, mapped to --blue-60 in the light theme. This will both ensure consistency with Photon colors and will fix accessibility issues for our onboarding messages.

Comment 1

[Zac Svoboda :zacnomore]

Attachment: Bug 1673582 - Introduce theme-link-color for better contrast on devtools links r=#devtools-reviewers

Comment 2

[Zac Svoboda :zacnomore]

I've gone through quite a few of these use cases - https://searchfox.org/mozilla-central/search?q=--theme-highlight-blue&path=devtools%2Fclient%2F&case=false&regexp=false

To my eyes it is such a subtle change that I couldn't say it is causing harm (or help frankly) to any substantial degree. If it would help, I can try to screenshot all the places where it's used. It does seem to be predominantly links although there are exceptions.

Comment 3

[Zac Svoboda :zacnomore]

Attachment: Bug 1673582 - Revert theme-highlight-blue, introduce theme-link-color r=#devtools-reviewers

Depends on D187863

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8c2fb33f6a5b
Introduce theme-link-color for better contrast on devtools links r=devtools-reviewers,nchevobbe

Comment 5

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/8c2fb33f6a5b