Follow up - Tab separator has too much contrast on both light and dark mode

[aguscruiz]

Description

Follow up to #40608

Got feedback that there's still too much contrast between between the separator and the tabbar. Let's do the following:

• Reduce opacity of separator to 50%
• Change height of separator from 24px to 16px and center it vertically

That should make it look like the attached screenshot.

Figma reference:
https://www.figma.com/design/H11ZOl6JMYbCTW4ZJXqR5V/%F0%9F%A6%81-Browser?node-id=7913-31400&t=YkcfLB3xQ93kkxjV-1

Steps to reproduce

Actual result

Expected result

Reproduces how often

Easily reproduced

Brave version (brave://version info)

1.69.155

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

No response

[aguscruiz]

@rebron let me know if the expected result screenshot is looking good for you. I think it's subtle enough

[fallaciousreasoning]

Note: Talked to @aguscruiz and we increased the opacity to 75%

[aguscruiz]

Latest looks great on this version
https://github.com/brave/brave-browser/releases/tag/v1.71.42

[fallaciousreasoning]

@LaurenWags should this be marked release-notes/exclude instead?

[LaurenWags]

@fallaciousreasoning since this issue changes both color and size for tab separator, I marked it as release-notes/include because this change would supersede the changes made with #40608 (which is also release-notes/include for now). definitely open to changing that if others feel differently - was basically just following what we did for 40608.

cc @kjozwiak @rebron for additional input 👍🏻

[kjozwiak]

The above requires 1.69.159 or higher for 1.69.x verification 👍

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.69.159 Chromium: 128.0.6613.114 (Official Build) (64-bit)
-- | --
Revision | b60455471a6aad96b2f031c679838da121f22b03
OS | Windows 10 Version 22H2 (Build 19045.4780)

• Verified the description from the issue on 1.69.159 and ensured the followings:
  • Opacity of the separator reduced to 50%
  • Changed the height of separator from 24px to 16px and center it vertically

1.69.159 - Light theme Vs Dark theme

1.69.155 - Light theme Vs Dark theme

1.69.153 - Light theme Vs Dark theme

[LaurenWags]

Verified with

Brave | 1.69.159 Chromium: 128.0.6613.114 (Official Build) (x86_64)
-- | --
Revision | b60455471a6aad96b2f031c679838da121f22b03
OS | macOS Version 13.6.9 (Build 22G830)

Compared tab separator colors on 1.69.153 (current release) to 1.69.155 (previous RC with change from #40608) to 1.69.159 for light and dark themes:

1.69.153	1.69.155	1.69.159

[GeetaSarvadnya]

Verified PASSED on

Brave | 1.69.159 Chromium: 128.0.6613.114 (Official Build) (arm64)
-- | --
Revision | b60455471a6aad96b2f031c679838da121f22b03
OS | macOS Version 12.5 (Build 21G72)

Compared tab separator colors on 1.69.153 (current release) to 1.69.155 (previous RC with change from #40608) to 1.69.159 for light and dark themes:

1.69.153	1.69.155	1.69.159

[aguscruiz]

Looks great on v1.69.159
https://github.com/brave/brave-browser/releases/tag/v1.69.159

[btlechowski]

Verified with

Brave	1.69.159 Chromium: 128.0.6613.114 (Official Build) (64-bit)
Revision	b60455471a6aad96b2f031c679838da121f22b03
OS	Linux