Closed Bug 1673582 Opened 4 years ago Closed 8 months ago

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

Categories

(DevTools :: Shared Components, enhancement, P3)

enhancement

Tracking

(firefox119 fixed)

RESOLVED FIXED
119 Branch
Tracking Status
firefox119 --- fixed

People

(Reporter: jdescottes, Assigned: zacnomore)

References

Details

Attachments

(1 file, 1 obsolete file)

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.

Component: CSS and Themes → Shared Components
Assignee: nobody → cczac1
Status: NEW → ASSIGNED

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.

Attachment #9352493 - Attachment is obsolete: true
Attachment #9352413 - Attachment description: Bug 1673582 - Update devtools theme-highlight-blue to use photon color for a11y r=#devtools-reviewers → WIP: Bug 1673582 - Introduce theme-link-color for better contrast on devtools links
Attachment #9352413 - Attachment description: WIP: Bug 1673582 - Introduce theme-link-color for better contrast on devtools links → Bug 1673582 - Introduce theme-link-color for better contrast on devtools links r=#devtools-reviewers
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8c2fb33f6a5b
Introduce theme-link-color for better contrast on devtools links r=devtools-reviewers,nchevobbe
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → 119 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: