Spacing
一貫したレイアウトのためのマージンとパディング値
コンポーネントとレイアウトのためのセマンティックなスペーシングトークン。 一貫した間隔を維持しながら、用途に応じた適切なスペースを提供します。
コンポーネントパディング
コンポーネント内部のパディングに使用するトークン。
| Token | Reference | Preview |
|---|---|---|
{spacing.1} | ||
{spacing.2} | ||
{spacing.3} | ||
{spacing.4} | ||
{spacing.5} | ||
{spacing.6} |
コンポーネントギャップ
コンポーネント間のギャップに使用するトークン。
| Token | Reference | Preview |
|---|---|---|
{spacing.1} | ||
{spacing.2} | ||
{spacing.3} | ||
{spacing.4} | ||
{spacing.5} | ||
{spacing.6} |
フォーカスリング
フォーカスリング（outline）と要素の間に空ける余白。太さは Borders の borderWidths.focus.ring と組み合わせます。
| Token | Reference | Description |
|---|---|---|
{spacing.0.5} | フォーカスリングと要素の間の余白（2px）。角丸を切り取る親の中では負の値で内側に描く |
レイアウト
レイアウト用のスペーシングトークン。
| Token | Reference | Description |
|---|---|---|
{spacing.4} | コンテンツ間の標準的な余白 | |
{spacing.16} | セクション間の大きな余白 |