[Button] Add magic variant

[snamoah]

WHY are these changes introduced?

There is currently no magic variant button which is required for some parts of Shop Campaigns UI. See screenshot below:

Figma link

WHAT is this pull request doing?

1. Adds .variantMagic class definition in Button.module.scss.
2. Extends variant prop type on Button to include magic
3. Adds Storybook entries for magic variant

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[sam-b-rose]

Hi @snamoah! Thanks for the contribution 🚀

We've used magic for the tone prop on other components such as Badge. This might be a good pattern to apply to Button as well. Magic is similar to other tone color treatment like "success" and "critical". It would be good to built it so that other Button variants benefit from this as well (e.i., variant="primary" tone="magic").

[snamoah]

It would be good to built it so that other Button variants benefit from this as well (e.i., variant="primary" tone="magic").

I see, yeah.. thanks for the context there. I'll update the tone prop instead of variant 👍🏾

[snamoah]

I'm closing this pr for now. It seems not supporting magic tone for button is an intended design decision. See slack thread for more context