Sizes
アイコンやアバター、タッチターゲットなど「大きさ」のためのトークン
width / height / minHeight など、大きさを受け取るプロパティから参照するセマンティックトークン。 余白(padding / gap)には Spacing のトークンを使い、大きさにはこちらを使います。
コントロールの高さ
Button / Select の trigger / Table の見出し行が共有する高さ。横に並べたときに揃うことを保証します。
| Token | Reference | Description |
|---|---|---|
{sizes.9} | コンパクトなコントロール(36px) | |
{sizes.10} | 標準のコントロール(40px) | |
{sizes.11} | 大きめのコントロール(44px)。Button の既定サイズ |
アイコン
アイコンの大きさに使用するトークン。
| Token | Reference | Preview |
|---|---|---|
{sizes.3} | ||
{sizes.4} | ||
{sizes.5} | ||
{sizes.6} | ||
{sizes.8} |
アバター
アバターの大きさに使用するトークン。
| Token | Reference | Preview |
|---|---|---|
{sizes.6} | ||
{sizes.8} | ||
{sizes.10} | ||
{sizes.12} | ||
{sizes.16} |
タッチターゲット
押せる行やボタンの最低の高さ。
| Token | Reference | Description |
|---|---|---|
{sizes.11} | アクセシビリティ上の最小タッチ領域(44px) |