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

Description

Default and hover-state colors for audio-playing icons are reversed in dark mode; found while testing https://github.com/brave/brave-browser/issues/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

[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.