ChlorophyllChlorophyll

Sizes

アイコンやアバター、タッチターゲットなど「大きさ」のためのトークン

width / height / minHeight など、大きさを受け取るプロパティから参照するセマンティックトークン。 余白(padding / gap)には Spacing のトークンを使い、大きさにはこちらを使います。

コントロールの高さ

Button / Select の trigger / Table の見出し行が共有する高さ。横に並べたときに揃うことを保証します。

TokenReferenceDescription
{sizes.9}コンパクトなコントロール(36px)
{sizes.10}標準のコントロール(40px)
{sizes.11}大きめのコントロール(44px)。Button の既定サイズ

アイコン

アイコンの大きさに使用するトークン。

TokenReferencePreview
{sizes.3}
{sizes.4}
{sizes.5}
{sizes.6}
{sizes.8}

アバター

アバターの大きさに使用するトークン。

TokenReferencePreview
{sizes.6}
{sizes.8}
{sizes.10}
{sizes.12}
{sizes.16}

タッチターゲット

押せる行やボタンの最低の高さ。

TokenReferenceDescription
{sizes.11}アクセシビリティ上の最小タッチ領域(44px)