feat: new buttons

[frabbit]

No description provided.

[frabbit]

Please note that this PR is not against master, it's against a design system 2 branch.

[jkettmann]

I checked the styleguide and all seems to look good. I know we talked about this already, but I'm still not happy with the focus outline.

I had another look and found this resource (honestly it was the first result on google). They say that you shouldn't remove outline because keyboard users won't have visual feedback about which element is currently focused.

An alternative they mention is styling the element itself. So if you give a button a different border or shadow, you should be fine.

I had a look at Airbnb. Their important buttons are styled this way:

.button:focus {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgb(113, 113, 113) 0px 0px 0px 5px, rgba(255, 255, 255, 0.5) 0px 0px 0px 6px !important;
  outline: none !important;
  transition: box-shadow 0.2s ease 0s !important;
}

Here are screenshots of our and their buttons

What do you think? We can, of course, move the discussion somewhere else :-) Apart from this issue I'm happy with the PR

[frabbit]

@jkettmann i didn't removed the outline in this pr (should be the default). The airbnb solution works but depends on the exact color of the background. Not sure if we want it that way...

[jkettmann]

Ok, you're right. We discussed that anyways already.

[drinchev]

Awesome btw let's also fix the theme part ( maybe in another commit :) )