Dark theme for side navigation dark

[bartaz]

Done

Adds dark theme for side navigation component.
Updates themes' color variable names to be more consistent.
Updates dark theme colors to use opacity.
Consistently use text color for side navigation active item border (rather than brand color).

Fixes #2863

QA

• Run ./run or demo
• Review dark side navigation example
• Review light side navigation example - because active element border color changed
• Review other dark patterns (colors were updated):
  • main navigation
  • contextual menu
  • hr

[webteam-app]

Starting demo at: https://vanilla-framework-canonical-web-and-design-pr-2950.run.demo.haus/docs/examples/patterns/side-navigation/dark

[bartaz]

@lyubomir-popov Just had a look at percy, and it seems we are not really ready to replace dark theme colors with opacity based ones:
https://percy.io/vanilla-framework/vanilla-framework/builds/4652940

For example, main navigation uses $colors--dark-theme--background-highlighted as background, rather than $colors--dark-theme--background.
So we can't change $colors--dark-theme--background-highlighted to opacity based color, as it needs to be solid dark.

To achieve what we want we would need to be much more consistent in using theme colors across components. And possibly we would need more theme color variables - for solid backgrounds, for transparent backgrounds, for borders with different steps of intensity, etc.

I'm reverting it now, so the opacity based colors will only be used in dark side navigation. But this means dark side navigation will not directly use dark theme colors, but their transparent variants. Which leads to yet another inconsistency in how we deal with themes between components.

[bartaz]

@lyubomir-popov

HR dark theme now with opacity based border color feels VERY subtle (barely visible) compared to light theme equivalent:

[lyubomir-popov]

LGTM