Radii
一貫した角丸のためのセマンティック角丸トークン
セマンティックな角丸トークン。用途に応じた一貫した角丸を提供します。
スケール
{radii.xl}
{radii.lg}
{radii.xl}
{radii.2xl}
{radii.lg}
{radii.xl}
{radii.xl}
{radii.2xl}
役割別の角丸
l1 < l2 < l3 の 3 段に役割名を付けたトークン。preset の radius オプションに連動して一括で変わります。
| Token | Reference | Description |
|---|---|---|
{radii.xl} | preset の radius オプションそのもの | |
{radii.lg} | 3 段のうち最も小さい角丸 | |
{radii.xl} | 3 段のうち中間の角丸 | |
{radii.2xl} | 3 段のうち最も大きい角丸 | |
{radii.lg} | Menu / Select の項目、小さなアイコンボタン、Editable、Tooltip など面の内側の小さな要素（l1） | |
{radii.xl} | Button / Pagination / Select の trigger など単体で押せるコントロール（l2） | |
{radii.xl} | Menu / Select の content など浮かせて表示するポップオーバー（l2） | |
{radii.2xl} | List / Accordion / Table / Toast など白いパネル面のカード（l3） |