角丸

考え方

角丸は3段階（s / m / l）です。トークン で計画している full（ピル形状、9999px 相当）は現行コードにまだ無く、Switch のノブなど一部コンポーネントは角丸を独自に計算しています。角丸が小さいほど「四角形に近く、機能的」、大きいほど「柔らかく、装飾的」な印象になります。

一覧

src/styles/Spacing.ts の BorderRadius オブジェクトから自動生成しています。

token	px
BorderRadius.S	8px
BorderRadius.M	24px
BorderRadius.L	40px

使い分け

• s(8px): 入力欄（TextInput / TextArea / Dropdown 等）、Tag、Badge など、機能を主張する部品。
• m(24px): 現行コンポーネントでは既定利用がありません。面としてまとまりを持たせる新規部品で採用する計画値です。
• l(40px): 現行Buttonでは使用しません。Buttonは SemiRound=s、FullRounded=9999px、Square=0 を使います。
• 未定義（full）: Switch のノブ、Avatar のような完全な円/ピル形状。現状は各コンポーネントが個別に border-radius: 999px 等を実装しています。共通化は今後の課題です。

やってはいけないこと

• border-radius: 12px のように px を直接書かない。px(theme.borderRadius.s) を使います。
• 同じ部品カテゴリ内で角丸のサイズをばらつかせない（例: Card は常に m）。
• 「少し丸くしたい」という理由だけで3段階の間に新しい値を追加しない。