1695061 - Consider using currentColor for focus-outline-color when an external lwtheme is applied

Status: NEW

(Firefox :: Theme, task, P3)

Description

[Harry Twyford]

Attachment: image.png

--focus-outline-color is set based on whether the theme is brighttext or not. This may lead to unexpected results when a theme applied brighttext to :root, but it isn't a dark theme in all places. One example is this theme https://addons.mozilla.org/en-US/firefox/addon/gradientus/, which uses white text in most of the UI, but the Urlbar is darktext. We apply the dark theme focus outline to a light Urlbar.

We could use currentColor for --focus-outline-color when a lwtheme is applied. If that provides enough contrast for text, then it would be adequate for borders too. We would still use #00DDFF for our built-in dark theme.

Themes could still set the address bar border color by defining toolbar_field_border_focus.

I'm marking this as proton-address-bar since the address bar is the most visible example of this issue, but it's an issue in other parts of the theme as well.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

I think this is ultimately work that falls under Firefox :: Themes, so putting in that component.

Comment 2

[Marco Bonardo [:mak]]

How critical is this, considered themes can already set toolbar_field_border_focus, replacing the poor border we may pick in those cases?
I'm mostly wondering whether currentColor wouldn't look more like a normal border than a focus outline.