Button improvements

[matthew-ia]

Some ideas to make <Button> better:

Apply variants via prop flags instead of strings values.

This updated code adds more props and class: directives to the markup, for each variant property.

<script>
  // Variant Shorthands
  export let fill = false;
  export let text = false;
  export let unstyled = false;
  export let small = false;
  export let large = false;
  export let block = false;
  export let span = false;
</script>
<!-- ... -->
<button
  ...
  class:fill
  class:text
  class:unstyled
  class:small
  class:large
  class:block
  class:span
  ...
>

Let's you do this:

<Button ghost small />

Instead of:

<Button kind="ghost" size="small" />

Include a way to control the hover state from a parent.

E.g., say I have a Card, and within it a Button, and on hover of the entire Card, I want the Button to turn purple.

[matthew-ia]

In terms of styling, even this kind of sucks to extend. It works fine for the basic styles, and then if you need to add style-related props that act as modifiers it works pretty well, but defining a new "kind" kinda sucks bc of how much you have to repeat and port from the main button styles.

I wonder if there's a better way to extend the styles via style props instead, so you can more easily define either unique button instances, or just more easily define new reusable "kinds".