Improve contrast among tabs

[Tectract]

Description

There is almost no alpha gradient between selected tab and non-selected tab.

There should be STRONG CONTRAST applied to the tab that is selected, so I can tell which one I am on, always.

Designs

Increase contrast between active and inactive tabs with these updates:

• Don’t show ‘X’ button on inactive tabs until hover or focus
• Inactive tab title has 70% opacity; on hover or focus show title at 100% opacity
• Decrease contrast of tab separator: light theme #BEBEBF, dark theme #393838, no color changes at this time for private window / with tor tab separator
• Make active tab font Semibold

Assets

Figma link: https://www.figma.com/file/sS3l8tqUFxt54MEiBTalUI/Desktop-toolbar-and-menu?node-id=59%3A2868

[Brave-Matt]

While I apologize for the inconvenience, this isn't something we hear that often -- although we did have an open issue a while back regarding private window tabs (specifically) being hard to tell which was in focus.

The contrast seems pretty strong to me, especially since there's absolutely no border of any kind surrounding the tabs that are not selected.
cc @petemill

[Tectract]

A border around the tab that IS selected would be super-nice, the option for a border. It's sort of, mostly clear. An alpha inversion of the tab color would make it really clear :)

[rebron]

This might be a dupe as I know @bradleyrichter was looking into this.

[bsclifton]

cc: @bradleyrichter @karenkliu

[karenkliu]

I feel like if we did this other issue #788 it would partly address this one.

The other update that @bradleyrichter wanted to make was to decrease the opacity of inactive tab titles+favicons so there would be more contrast. Brad - could you attach the design? Not sure where you've left it.

[bradleyrichter]

This is only a problem in dark-theme. It is partially caused by our background color being too light. We can darken it slightly to get past the threshold of recognizable contrast, and also fade the non-selected titles just enough to achieve the threshold. I would also like to hide the close buttons on non-selected tabs. They would appear only on tab-hover. (the entire tab for hover detection)

One problem is that lower quality displays have less contrast in dark areas. This can make the dark theme tabs all have the same effective color. Additionally a user could have set their display to high-contrast mode, or dimmed the display which also effects dark color contrast.

preview:

[karenkliu]

@rebron @bsclifton Designs added!

[rebron]

@brave/legacy_qa pull in @karenkliu for QA on this one if any questions.

[GeetaSarvadnya]

Verification passed on

Brave | 1.18.68 Chromium: 87.0.4280.67 (Official Build) dev (64-bit)
-- | --
Revision | 0e5d92df40086cf0050c00f87b11da1b14580930-refs/branch-heads/4280@{#1441}
OS | Windows 10 OS Version 2004 (Build 19041.630)

• Verified the description and design mentioned in Improve contrast among tabs #8576 (comment)

• Verified that the X icon is not present on the inactive tabs

• Verified that the X icon is present only in the active tab

• Verified that mouse hover or focus show title at 100% opacity for the active tab

• Verified that inactive tab title shows 70% opacity

• Verified that active tab font is Semibold

Light Theme:

Normal Tab:

PT:

TOR:

Dark Theme

Normal Tab:

PT

TOR