Improve styling

• All grey stripes between cards (or card and sidebar) should be 16px wide / high
• Padding right/left of sidebar content should be 12px
• The caret symbol when pointing downwards needs to be offset 2px from the top when compared to pointing right (in the sidebar)
• Add border: 3px solid #dadada; around boxes that have non-white backgrounds (e.g. color palette, images on card page, code playgrounds)
• Default text color: #555f61
• Headers / emphasis: #373d3f
• Box shadow for cards should be 0px 1px 2px #d3d1d1
• Card header bottom border should be #f2f2f2
• Use font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace for code playground
• Use 12px 12px 10px 12px as padding for card header
• Set code playground background to #282c35
• Use letter-spacing: normal
• Default “white” buttons: –> border-color: #e2e2e2 –> border-radius: 2px –> padding: 4px 12px –> Pressed button / toggled multibutton: box-shadow: inset 0 1px 1px rgba(0,0,0,0.15) –> Button font color: #373d3f –> Button :hover background-color: #f2f2f2, color: #222
• In a button group only first and last button should have border-radius (first -> on the left, last -> on the right)

[peterszerzo]

That makes sense, Michael - we’ll keep them out of composed.

That said, I still think button groups should be componentized in some form or fashion - as in they should be inside a wrapper component, which controls their spacings and border radii. Maybe we can make an exception to the rule of never importing a component inside another component and define a ButtonGroup one?

[micha-f]

@peterszerzo Copied the font-family definition for the code playground from here: https://github.com/atom/atom/blob/ac9cc728450f96096aeeb7d185420a06610b4df2/static/text-editor.less#L7 We don’t need to embed these fonts (and wouldn’t even be allowed to in the case of Menlo). These fonts should be available on Mac, Windows.

I think button groups are still very “primitive” components. I was thinking of composed components to be things like a complete “filter toolbar”. If that’s the case I believe that button groups - while composed of multiple buttons - are still closer to the button primitive (and could be described on the same showcase page) than a composed component like a filter toolbar.