Default and hover-state colors for audio-playing icons are reversed in dark mode

[stephendonner]

Description

Default and hover-state colors for audio-playing icons are reversed in dark mode; found while testing #16860.

Steps to Reproduce

1. new profile
2. launch Brave
3. open brave://settings/appearance and from Brave colors choose Dark
4. open a tab with audio (like https://www.youtube.com/watch?v=rA56B4JyTgI)
5. open a blank new tab
6. without selecting it, hover over the audio icon in the YouTube tab
7. note the default and hovered colors

Actual result:

The default color for the audio-playing icon is dark grey; on hover, it turns to a lighter shade of grey.

default	hovered

Expected result:

The audio-playing icon should be the lighter grey color by default, and become the darker shade of grey on hover.

Reproduces how often:

100%

Brave version (brave://version info)

Brave	1.29.16 Chromium: 92.0.4515.101 (Official Build) nightly (x86_64)
Revision	edb73f4fb624e2ea0cb6f5cc39c9e317ecd3535b-refs/branch-heads/4515@{#1536}
OS	macOS Version 11.4 (Build 20F71)

/cc @karenkliu

[ygoe]

Not just these colours. The entire symbol is hardly readable here. The foreground colours seem to be inversed between active and inactive tabs/windows. Maybe it's my theme that resembles a default Windows 10 title bar. But the theme doesn't give me more options, so theming might break this icon altogether.

I'm also not happy with its new placement. Before today's update, the icon was at the right end of the tab header, next to its close button. So when switching to the tab, I had to avoid clicking in the right end or I'd mute or close the tab that I wanted to activate. Now, the button has moved left, next to the favicon. So now there are two separate areas I have to avoid, making the safe clickable area to activate a smaller tab very small! Somebody hasn't thought about usability here.

Here's a screen recording (couldn't add the mouse pointer (I need my defaults otherwise) but you can guess where it is).

brave-tab-audio-icon.mp4

[bsclifton]

I thought this was intentional?
cc: @rebron @nullhook

[ygoe]

When I think about it, it might also be the background colour that's wrong, not the foreground. Then there would just be a speaker icon in the default text colour with no circle background. Like it used to be here and is in Firefox. Either way, this is unreadable.

[karenkliu]

The expected result that @stephendonner posted is what's intended! We intentionally left the mute contrast higher contrast for great visibility when not clicked, and a subtle decrease in contrast when hovered.

[ygoe]

There is indeed a very high contrast of the icon and its circle background – against the tab background. There is almost no contrast between the icon and its circle background. How is this supposed to be recognisable? It's only good if the browser window is inactive altogether.

I've attached my theme so you can see for yourself, not sure if you can use that file.
BraveThemeWindowsDesktop.zip

Update: I've also noticed that the inverse circle background disappears immediately when the playback has stopped, while the foreground icon is slowly fading out before it also disappears and releases its width. The colours during this fadeout look okay. So I think the background circle should simply be removed altogether. It only makes things worse.