スペーシングトークン

フィボナッチ数列に基づくスペーシングトークンと、対応する property class について解説します。

SPACE: 余白のスケーリング

スペーシングに対しては、フィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …) に基づいたスケーリングを採用しています。

デフォルトでは0.5rem　≒ 8px をスケーリングの単位としてトークン値10, 20, 30, … 80 を用意しています。
ただし、それだけだと少し間隔が広いので、例外として前半には微調整用の 5, 15 を用意しています。

:root {
  /* スペーシング単位 8 で フィボナッチ*/
  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
  --s5: calc(0.5 * var(--s-unit)); /* 例外 */
  --s10: var(--s-unit);
  --s15: calc(1.5 * var(--s-unit)); /* 例外 */
  --s20: calc(2 * var(--s-unit));
  --s30: calc(3 * var(--s-unit));
  --s40: calc(5 * var(--s-unit));
  --s50: calc(8 * var(--s-unit));
  --s60: calc(13 * var(--s-unit));
  --s70: calc(21 * var(--s-unit));
  --s80: calc(34 * var(--s-unit));
}

対応する Property Class

スペーシングトークンは、padding, margin, gap 系の property class で利用できます。 ただし、すべてのプロパティで使えるわけではありません。

フルサポート（トークン値 5〜80）

以下のプロパティには、スペーシングトークン 5, 10, 15, 20, 30, 40, 50, 60, 70, 80 に対応した property class が用意されています。

gap は inherit にも対応しています。

プリセットクラスなし

以下のプロパティには、スペーシングトークンのプリセット property class は用意されていません。ただし、CSS変数（--px-s 等）や JSX prop（px-s="20" 等）での値指定は可能です。

margin 系の auto 対応

margin 系のプロパティには、スペーシングトークンに加えて auto の property class も用意されています。