Add dark theme support to notifications

[chillkang]

Done

• add dark theme support to notifications with examples
• add dark theme to body elements
• update hightlight bars and icon colors with light, paper, and dark theme support

Fixes

• https://warthogs.atlassian.net/browse/WD-8572

QA

• open demo for dark theme variants
• open demo for light theme variants
• change body class from is-dark to is-light or is-paper, and check if background of the page and text color change accordingly
• compare demos with the design proposal below:
  

Screenshots

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.

[webteam-app]

Demo starting at https://vanilla-framework-4971.demos.haus

[bartaz]

@chillkang I talked with Lyubo about the status colours and we made a wrong assumption before (about using the tinted borders, as they are designed for different context).

So for notification colors we should use whatever notifications used before (semantic colors). Some of them have dark versions:

vanilla-framework/scss/_settings_colors.scss

Lines 24 to 25 in ab0b907

	$color-negative-dark: #a11223 !default;
	$color-positive-dark: #008013 !default;

So instead of exposing them as color-theme-border-positive etc, just expose them as color-theme-positive, etc.

Also, the "information" icon on dark theme needs to use proper color (whatever icons on dark are using, I think it's white, you can check icons component).

[bartaz]

Some small tweaks to code needed, but we are getting there! :)

[bartaz]

Some differences noticed in Percy:

The meta data in bottom part should use muted text color (not default one), and action links should use link colour, not text colour.

[bartaz]

Some small fixes needed for themed link color and standalone examples.

[bartaz]

Great, thanks a lot for that!