Chore: style gutenberg button same as c-button

[derekshirk]

Overview

See #710

Creates a button mixin and applies our c-button styles to buttons output via Gutenberg button blocks. Selectors account for filled and outlined buttons as well as maintaining our desired colors and border radii.

I failed to arrive a solution for styling :focus states due to the lack of buttons and the following HTML output:

<div> // The (button) container
  <a> // the (button) link
</div>

Screenshots

I've added an outlined markup example to the vendor → WordPress → Gutenberg → core/button example:

Testing output in a local version of our site:

Example of the available options within the button block editor:

Testing

1. View deploy preview
2. Test :hover
3. Test :focus
4. Bonus testing:

• Set up a local version of cloudfour-dot-com@v-next
• Enable Gutenberg editor / uncheck setting in profile to disable visual editor
• Test output of buttons via block editor

Notes

• See: https://github.com/cloudfour/cloudfour.com-wp/issues/491

[spaceninja]

Overall this seems reasonable to me. I'll defer to @tylersticka, though.

[tylersticka]

I think your mixins look great.

I would suggest applying them to wp-block-button__link rather than wp-block-button to solve the focus issues you mentioned earlier.