Tab color refinements

[bgashler1]

Fixes #7649
You'll notice that this variation of the tabs has a horizontal bar under the entire title and that only the active tab is shown boxed. It also is a darker color, matching the viewlet color. This line and the darker color combined help differentiate the find/replace widget.

Also, consequently this is a simplification of what we have already.
Before (3 colors and boxy-looking)

After (2 colors and more flat)

Also introduces mix-blend-mode to make tabs very responsive to themes #8151.

[mention-bot]

By analyzing the blame information on this pull request, we identified @bpasero and @isidorn to be potential reviewers

[bpasero]

@bgashler1 some feedback after trying it out:

• can you check if your PR is based on top of master version of tabstitlecontrol.css, I think I did some changes meanwhile
• noticed you changed the scroll color, can you say where this applies to?
• I am not 100% convinced I like the missing borders between tabs, it almost looks like a bug to me
• while I like the background color change, the tab now easily blends into the viewlet to the left, so maybe we need some border there as separation?

• a similar issue exists on the other hand with the group actions

• the active tab to the left shows a border which looks a bit weird, almost hanging over nowhere

Otherwise seems to work nicely 👍

[bpasero]

Also is it intentional that these styles show up when tabs are disabled?

[bgashler1]

@bpasero yeah, that's not intentional. Hopefully you can add a class that scopes this down to just tabs-enabled.

[bgashler1]

@bpasero are these the scroll styles I changed that you mentioned in the PR? I changed these so that they would match the editor background color so that it creates a fake gradual mask over text when you've scrolled. That way the active tab, which has the same background color of the editor, will not appear to abruptly chop off text in the editor while also not creating a shadow (as it used to) which would make the tab appear on a different plane than the text.

Unfortunately, I had to hard-code these values, so in other themes than the just the default Dark and Light, it looks weird. We could just hide these display: none, until we can get CSS custom property to give us the theme's editor base color. I'll leave that up to you.

[bpasero]

@bgashler1 sorry, more findings after playing around with it

• I do NOT like the fact that you change the scroll decoration, I think the shadow has a purpose because it makes it visible that there is more to scroll to. with your change the decoration is so subtle that I do not see it anymore
• I do NOT like gradient background for the title area, only now I realized how weird this looks compared to other places. we do not use gradient anywhere and it feels so out of place there
• I do NOT like the fact that inactive tabs and group actions now have the same background color because as soon as you overflow to the right it looks almost broken (have enough tabs to scroll one out of view to the right to notice that). this might be better once we have the overflow decoration from Improve tab overflow UX #7987 (comment) but I do not see that landing

Given this, I wonder how to proceed. I tried to capture all the issues we currently have into #8564

Maybe we can make minimal tweaks to address those as much as possible and keep a larger overhaul for July?

[isidorn]

+1 for do not rush this and do it in July