ボタンの角丸を相対的なサイズ変更に対応

[qrac]

現在は2pxで統一しているが、2px～4px～で相対的に設定することを検討。

↓絶対値：border-radius: 2px;

↓相対値：border-radius: 0.125em;

[qrac]

• 絶対値だと大小のボタンの角丸を統一できる
• 相対値だとボタンに対しての角丸の大きさを自然にできる ※xxsだと1.25pxになってしまうが

[qrac]

他のフレームワークは、サイズごとに設定していることが多い。

• Buttons · Bootstrap
  • サイズごとにrem border-radius: .25rem;
• Button | Semantic UI
  • rem border-radius: .28571429rem;
• Button | Foundation for Sites 6 Docs
  • 角丸がない
• Bulma: a modern CSS framework based on Flexbox
  • サイズごとに絶対値 border-radius: 3px;
• Material Design Lite
  • 絶対値？ border-radius: 2px;
• Component
  • 角丸がない

[qrac]

プロジェクトごとに.btnをオーバーライドするほうが好ましいか。

[qrac]

border-radius: 0.1875em;だとxxsでも1.875pxとなり、大きいボタンもボタンらしくなるのでいいかもしれない。

[qrac]

大きさの違うボタンが並んで角丸の不統一が気になるケースが多くなければ、上記を採用する予定。

[qrac]

GitHubのボタンは0.25em

[qrac]

.btn.is-barにも同じように設定。