余白トークン

:root,
.set--var\: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--var\:s {
  --s-unit: 0.5em;
}

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

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