Dark tabs

[lyubomir-popov]

Done

Add dark theme to tabs. Remove hover backgrounds, replace it by showing the tab highlight on hover. This simplfies theming and we should do it wherever possible.

Fixes WD-4680

QA

• Open demo
• [Add QA steps]
• Review updated documentation:
  • /docs/patterns/tabs - review the dark tab part

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[bartaz]

I'm not sure if having active and hover state as the same turns out good. It looks a bit weird and confusing especially when you hover on tabs next to the one currently active making it "connected" with active bottom border:

Also this makes tabs behave differently from top navigation, that still have hover/active states different:

[bartaz]

Demo URL: https://vanilla-framework-4817.demos.haus/docs/patterns/tabs

(please note, for now demos need to be started and restarted manually every time we want them updated)

[lyubomir-popov]

@bartaz that's a good point. I changed it to use the border default colour to make them different. I think this would be nice to also apply to side nav, main nav and in general everywhere we have a highlight bar as an indication of active state. Simpler and cleaner. But let's do one step at a time.

[bartaz]

@lyubomir-popov Now, because of transparency of lines it shows "double" lines on hover (with thin line being visible as well as highlight):

Is this the way we want to keep it?

[lyubomir-popov]

Is this the way we want to keep it?

I'll fix it

[bartaz]

@lyubomir-popov I had a quick look into moving the border by 1px. We can't move the bottom border down by 1px, because tabs have overflow hidden, so it would dissapear. We can try to move the thicker line 1px up - this would not affect baseline grid. But because active tab colour is different than bottom border colour the active tab then has a "double" border:

Although, I guess it's barely visible on standard zoom.

[lyubomir-popov]

I think that's ok.

[ClementChaumel]

Any update on this?

[lyubomir-popov]

@ClementChaumel I agree with @bartaz's suggestion above, please implement that.

[bartaz]

Great, thanks!