Dark theme for forms

[bartaz]

Done

Adds dark theme to form inputs

Fixes WD-5201

QA

• Open demo
• Check new examples
• https://vanilla-framework-4857.demos.haus/docs/examples/patterns/forms/forms-dark
• Review updated documentation:
  • https://vanilla-framework-4857.demos.haus/docs/base/forms#dark-theme
  • https://vanilla-framework-4857.demos.haus/docs/examples/patterns/forms/form-validation-dark

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-4857.demos.haus

[lyubomir-popov]

Very close, a list of what I notice:

• dropdowns need to be themed too:

• I would use white for the validation text. The border tinting and icon is enough to satisfy accessibility requirements:

• is the placeholder text grey? It should be white at the inactive text opacity:

[lyubomir-popov]

this is still an issue for the first item

[lyubomir-popov]

needs to be applied to focus and icons too, you might need svgs for the icons

[lyubomir-popov]

Just 2 more things @bartaz 👍

• we need to make the symbols inside the circles dark - #262626
• the orange is not currently accessible compared to adjacent text - I used #C48831in figma, which is
  

[bartaz]

@lyubomir-popov Updated the warning colour and coloured the symbols in icons using default dark background colour.

[albertkol]

If design +1's it, merge it.

[lyubomir-popov]

@bartaz One last thing, we have an accessibility falure - this text needs to use the $colors--dark-theme--text-muted variable to be readable:

Giving +1 with changes, so it can be merged quickly opnce this is addressed.