Add dark theme to the buttons

[bartaz]

Done

WIP

Demo: https://vanilla-framework-3807.demos.haus/docs/examples/patterns/buttons/dark

Fixes #3779

QA

• Open demo
• Check if dark buttons render as expected
• Review updated documentation:
  • https://vanilla-framework-3807.demos.haus/docs/patterns/buttons#theming
  • https://vanilla-framework-3807.demos.haus/docs/component-status

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 component status page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[webteam-app]

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

[bartaz]

@lyubomir-popov Can you review and update colors where needed?

[lyubomir-popov]

@spencerbygraves @bartaz what do you think of these?

The darker ones are more traditional, similar to what github and apple do. The lighter ones stick out more, and borrow from the material design theory that colors on dark should be desaturated and lightend to become more readable.

Full benchmaring doc here

[bartaz]

@lyubomir-popov Personally for me the top (option A) feels more like a dark variant of our buttons. With desaturated bottom ones I wasn't sure if they are disabled.

[spencerbygraves]

@lyubomir-popov I also prefer the top ones but I think they could be lighter.

[lyubomir-popov]

@bartaz just spoke to @spencerbygraves, can we use #008013 and #A11223 for positive/negative colours in the default state? Then apply the hover/active state percentages to those.

[sowasred2012]

Looks great!

[lyubomir-popov]

Design +1 and percy approved @bartaz