Spacing
余白の尺度を定めます。
Jumpu UI には余白の系統が 2 つあります。 文字サイズに追従するものと、しないものです。
2 つの尺度
| 尺度 | 値 | 定義元 | 性質 |
|---|---|---|---|
--spacing-relative | 0.25em | Jumpu UI | em なので文字サイズに追従する |
--spacing(n) | 0.25rem × n | Tailwind CSS | rem なので文字サイズに追従しない |
--spacing-relative は係数を掛けて使います。 コンポーネントの CSS では 1.5 から 6 までの係数が使われています。
css
padding-block: calc(var(--spacing-relative) * 2.5);
padding-inline: calc(var(--spacing-relative) * 5);使い分け
文字に追従させたい余白には --spacing-relative を使います。 ボタン、タグ、入力欄のように、文字を小さくしたら全体も小さくなってほしいものが該当します。
固定の寸法には --spacing(n) を使います。 アイコンの大きさ、アバターの直径、パネルの余白のように、文字サイズと無関係に決まるものが該当します。