余白トークン

フィボナッチ数列ベースの調和スケールと、前半部分の中間値を組み合わせた余白トークン、および対応する property class について解説します。

SPACE: 余白のスケーリング

--s40 以降の主軸はフィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, …) に基づくスケールです。--s-unit（デフォルト calc(var(--fz--base) * 0.5) ＝ ≒ 8px）を基準単位として算出しています。

それだけだと前半部分が粗いため、--s5 (4px) / --s15 (12px) / --s25 (20px) / --s35 (32px) を、主軸トークン間を補う中間値として追加しています。

:root,
.set--s {
  /* 余白単位 ≒ 8px */
  --s-unit: calc(var(--fz--base) * 0.5);

  --s10: var(--s-unit);            /* ≒ 8px */
  --s20: calc(var(--s-unit) * 2);  /* ≒ 16px */
  --s30: calc(var(--s-unit) * 3);  /* ≒ 24px */
  --s40: calc(var(--s-unit) * 5);  /* ≒ 40px */
  --s50: calc(var(--s-unit) * 8);  /* ≒ 64px */
  --s60: calc(var(--s-unit) * 13); /* ≒ 104px */
  --s70: calc(var(--s-unit) * 21); /* ≒ 168px */
  --s80: calc(var(--s-unit) * 34); /* ≒ 272px */

  /* ~40 までの前半部分は間を埋める */
  --s5:  calc(var(--s-unit) * 0.5); /* ≒ 4px */
  --s15: calc(var(--s-unit) * 1.5); /* ≒ 12px */
  --s25: calc(var(--s-unit) * 2.5); /* ≒ 20px */
  --s35: calc(var(--s-unit) * 4);   /* ≒ 32px */
}

.set--s {
  --s-unit: 0.5em;
}

set--s クラスを使うと、そのスコープでは --s-unit が 0.5em に切り替わり、--s10〜--s80 がフォントサイズ基準で再計算されます。Button や Badge など、内部余白をフォントサイズに追従させたい部品で活用できます。

<!-- ボタンの padding が button 自身の font-size に追従する -->
<button class="set--s -fz:s -py:10 -px:20">...</button>

<!-- --s-unit を任意の値で上書きすることも可能 -->
<button class="set--s -p:10" style="--s-unit: .4375em">...</button>

対応する Property Class

余白トークンは、padding, margin, gap 系のすべての property class で利用できます。

対応プロパティ（トークン値 5〜80）

以下のプロパティには、余白トークン 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80 に対応した property class が用意されています。すべてブレイクポイント指定にも対応しています。

| プロパティ | CSS | クラス例 | |---|---|---| | p | padding | -p:5, -p:20, … | | px | padding-inline | -px:10, -px:30, … | | py | padding-block | -py:15, -py:40, … | | ps | padding-inline-start | -ps:10, -ps:20, … | | pe | padding-inline-end | -pe:10, -pe:20, … | | pbs | padding-block-start | -pbs:10, -pbs:20, … | | pbe | padding-block-end | -pbe:10, -pbe:20, … | | pl, pr, pt, pb | 物理方向の padding | -pl:10, -pt:20, … | | m | margin | -m:10, -m:20, … | | mx | margin-inline | -mx:10, -mx:20, … | | my | margin-block | -my:10, -my:20, … | | ms | margin-inline-start | -ms:10, -ms:20, … | | me | margin-inline-end | -me:10, -me:20, … | | mbs | margin-block-start | -mbs:10, -mbs:20, … | | mbe | margin-block-end | -mbe:10, -mbe:20, … | | ml, mr, mt, mb | 物理方向の margin | -ml:10, -mt:20, … | | g | gap | -g:10, -g:20, … | | cg | column-gap | -cg:10, -cg:20, … | | rg | row-gap | -rg:10, -rg:20, … |

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

margin 系の auto 対応

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

| プロパティ | CSS | クラス | |---|---|---| | m | margin | -m:auto | | mx | margin-inline | -mx:auto | | my | margin-block | -my:auto | | ms | margin-inline-start | -ms:auto | | me | margin-inline-end | -me:auto | | mbs | margin-block-start | -mbs:auto | | mbe | margin-block-end | -mbe:auto |

各 property class の詳細は Property Class の一覧表を参照してください。