余白
トークンファイルにある 4px 基準の余白を実寸で描いています。そのあとに、ページの組みに使う可変の段階を並べました。
| --space-1 | 4px | |
| --space-2 | 8px | |
| --space-3 | 12px | |
| --space-4 | 16px | |
| --space-5 | 24px | |
| --space-6 | 32px | |
| --space-7 | 48px | |
| --space-8 | 64px | |
| --space-9 | 96px |
使い方
使っているトークン
| --spacing-xs | … |
|---|---|
| --spacing-sm | … |
| --spacing-md | … |
| --spacing-lg | … |
| --spacing-xl | … |
| --spacing-xxl | … |
| --pad | … |
| --maxw | … |
| --rail | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。