Tabs: Coloring issues

[bpasero]

Summary of collected issues for coloring in tabs

• editor find widget blends too easy into tab background in dark theme (Find widget does not blend well when tabs enabled #7649, Tab title background should not be current line highlight #8294)
• we use a lot of opacity to get the different shading to work with the different themes
• people find it hard to distinguish the active tab from the inactive
• in HC theme it is hard to distinguish tabs that are in an inactive group (Tabs in high contrast are difficult to differentiate when the editor is not active #8550)
• in HC theme the active tab shifts down (Tab high contrast border shifts tab text when active #8551)

Proposed solution from @bgashler1 in #8587

[bpasero]

@bgashler1 I pushed a variant of your commit (681e42f) to master for June with the following changes:

• I also use mix-blend-mode for the ::before element so that the border blends nicely in other themes (not sure why you did not set it)?
• I avoid the trick/hack you do with changing the tab size between 34-36px by using z-index for the ::before element. in your solution I noticed the active tab jumping a bit when getting active

There is one thing which I don't like is the dropfeedback color over tabs and tabs container in light theme. It used to be the same blue you get when dragging over the tree or editor area but now with the mixed blend mode, I cannot get this colour to work. It seems this CSS property is inherited like opacity and you cannot disable it? If you have ideas how to solve that, we can still push for it.

Maybe you could verify this across OS and themes.

[sandy081]

Leaving this verification to @bgashler1 based on above comment

[bgashler1]

Nice work @bpasero. Unfortunately, I can't think of a simple way around the inheritance problem. But it really didn't bother me because I can't drag a tab to the "Open Editors" anyway, which is where that blue color was used for list items that have active focus.

Some of the more complex solutions I suggested earlier, such as CSS custom properties, and the CSS 4 pollyfill library would certainly enable us to avoid using the mix-blend mode though and avoid the inheritance problem.

[bpasero]

@bgashler1 well you can drag it over to any opened editor and there you would get the large area filled in blue. I will see if I can tweak the color at least a little bit in light theme.