Make focus style easier to change

[jfrankl]

Right now the :focus style of a box-shadow is difficult to override or change:

https://github.com/raster-foundry/blasterjs/blob/develop/packages/core/components/button/index.js#L193

I want to remove the box-shadow. I can't figure out a way to do that without also removing box-shadows on buttons that I want to be there, that are part of the default, non-focus style.

Consider using outline instead of box-shadow, because outline is less commonly used for styling outside of focus.

[lederer]

Noticed an errant comma in that file as well at line 64:

  transition: 0.1s ease-in-out, box-shadow, 0.1s ease-in-out background-color;

[jfrankl]

I just noticed that @lederer is working on #219. That is huge. Having these focus box-shadows not appear on click will make it a lot less urgent to be able to modify the focus style.

[lederer]

Great. #219 should land first, but I think we should still address this issue afterwards. Stay tuned!

[designmatty]

@jfrankl with the latest release there is a way to target a specific element's focus.

Within the theme object styles: css of the component you want to target, in this case, Button, you can target the focus by defining:

.js-focus-visible &.focus-visible {
        //you focus treatment styling here
}

So the final theme object might look like:

button: {
    styles: css`
      .js-focus-visible &.focus-visible {
        box-shadow: none;
        outline: 1px solid pink;
        color: pink;
      }
    `
  }