Update core icons to support new theming system

[bartaz]

Done

Updates the icons to use new CSS variables for theming.
Involved a bit of refactoring, so that both previous way of including icon mixins works and the new themed icons.

So currently icons have 2 mixins each:

@vf-icon-NAME($color) - that is deprecated and backwards compatible way of including an icon with an option to change its colour.

@vf-icon-NAME-themed - that is a new recommended way to include icon, that will use the icon colour defined by current theme (via CSS variables).

This PR also updates icon colours, to use default text colour in each theme, so black in light themes, and white in dark theme.

We also introduce --vf-is-light-theme and --vf-is-dark-theme CSS variables that are used by icon mixins to conditionally switch to correct version. This is based on a "var space hack" solution explained in this blog post: https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

NOTE New theming is only applied to standard set of Vanilla icons that are directly included in Vanilla. It doesn't cover all individual icons in the "additional" set.

Fixes WD-8624

QA

• Open demo
• Check if icons display correctly in dark variant
• Change the body class name to is-light or is-paper, check if icons adjust accordingly
• Review icons in context of other components to make sure they render correctly:
  • Notifications (icons and dismiss button): Variants light Variants dar
  • Chips (dismiss button): Variants
  • Side navigation (accordion chevron): Dark Light
  • Buttons with icons
  • Forms validation: light dark
• Review updated documentation:
  • https://vanilla-framework-4993.demos.haus/docs/patterns/icons
  • Mostly focus on "Dark theme" and "Customisation" sections, but make sure the rest doesn't contain any outdated information as well

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

[webteam-app]

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

[chillkang]

LGTM👍 This is incredible Bartek!

[britneywwc]

Cool stuff! The flagging with whitespace usage is very interesting