Updates to Marketing Buttons

[gladwearefriends]

This updates the marketing buttons module based on the new github site design changes.
Similarly to the new type styles #583, all marketing buttons are also suffixed with -mktg

This PR removes all old button styles for the following new ones:

• btn-mktg: a solid blue button
• btn-primary-mktg: a solid green button (used sparingly and for extra emphasis, hence "primary")
• btn-outline-mktg: an outlined blue button
• btn-large-mktg: extends the button to a larger size

It also:

• adds 2 new color variables to primer-marketing-support that the new buttons need, blue-450 and green-450

let me know if i missed anything, and if the docs could be better worded :)

@sophshep
/cc @primer/ds-core @trosage @skullface

[gladwearefriends]

i updated stories.js! @shawnbot i think i misunderstood what you were saying originally in your comment 😅

i tried running Stories locally but got an error that $blue-450 is undefined. I want primer-marketing-buttons to get that from primer-marketing-support (added those vars in this PR too). is there something im missing? let me know if hopping on a slack/zoom chat would be easier to debug. i appreciate you reviewing these PRs immensely!

[shawnbot]

@gladwearefriends you should be able to run storybook now. You can see what it looks like on the site at this branch deployment:

https://primer-css-marketing-buttons-2018.now.sh/css/components/marketing-buttons

[shawnbot]

This looks good to me! Since this is a breaking change, I'd like to queue it up for #498 unless @sophshep (or anyone else) has any objections.

[shawnbot]

For posterity, here's the output of script/selector-diff-report | egrep ' .btn-[-a-z]+ ?$' | sort, which tells us which button classes were removed and added:

< .btn-orange
< .btn-outline-green
< .btn-outline-orange
< .btn-outline-purple
< .btn-transparent
> .btn-large-mktg
> .btn-mktg
> .btn-outline-mktg
> .btn-primary-mktg