スペーシング
余白は8段階（Padding01〜Padding08）で、64px から 1px まで管理します。現行コードは降順の命名（Padding01 が最大の64px）になっていますが、これは トークン で説明した通り radius.s/m/l の昇順とは向きが逆で、今後の実装で昇順の命名（Tailwind に近い刻み）へ移行する予定です。ここでは現行コードの値をそのまま示します。
基本は4pxグリッドですが、Padding07(2px) と Padding08(1px) は境界線・フォーカスリングのオフセット用の例外で、4の倍数ではありません。
src/styles/Spacing.ts の Spacing オブジェクトから自動生成しています。
| token | px |
|---|---|
Spacing.Padding01 |
64px |
Spacing.Padding02 |
32px |
Spacing.Padding03 |
24px |
Spacing.Padding04 |
16px |
Spacing.Padding05 |
8px |
Spacing.Padding06 |
4px |
Spacing.Padding07 |
2px |
Spacing.Padding08 |
1px |
- Padding01(64px) 〜 Padding03(24px): ページ・セクション間の大きな余白。
- Padding04(16px): コンポーネント内側の基本パディング（Button・Card など）。
- Padding05(8px) 〜 Padding06(4px): アイコンとラベルの間隔など、近接要素の余白。
- Padding07(2px) 〜 Padding08(1px): フォーカスリングのオフセットや境界線の太さなど、視覚的な微調整。
やってはいけないこと
Section titled “やってはいけないこと”margin: 16pxのように px を直接書かない。px(theme.spacing.padding04)かテーマ経由の値を使います。- 定義済みの8段階に無い中間値（
padding04.5のような値）を場当たり的に作らない。必要な場合はトークン自体の追加を検討します。 - コンポーネントごとに独自の余白変数を作らない。同じ意味の余白は同じトークンを参照します。