Отступы
Одна шкала на все зазоры, отступы и смещения системы. Шаг намеренно нелинейный: у нуля глаз различает два пикселя, у сорока — уже нет, и линейная шкала потратила бы половину значений там, где их никто не отличит.
- Компонент не выдумывает зазор. Не хватает значения — это вопрос к шкале, а не повод для магического числа.
Раскладка: шкала отступов
| Токен | Значение | Роль |
|---|---|---|
--gr-space-0--gr-space-0 | 0px | Шаг spacing scale 0 для отступов, gap и внутренних paddings. |
--gr-space-1--gr-space-1 | 4px | Шаг spacing scale 1 для отступов, gap и внутренних paddings. |
--gr-space-2--gr-space-2 | 8px | Шаг spacing scale 2 для отступов, gap и внутренних paddings. |
--gr-space-3--gr-space-3 | 12px | Шаг spacing scale 3 для отступов, gap и внутренних paddings. |
--gr-space-4--gr-space-4 | 16px | Шаг spacing scale 4 для отступов, gap и внутренних paddings. |
--gr-space-5--gr-space-5 | 20px | Шаг spacing scale 5 для отступов, gap и внутренних paddings. |
--gr-space-6--gr-space-6 | 24px | Шаг spacing scale 6 для отступов, gap и внутренних paddings. |
--gr-space-8--gr-space-8 | 32px | Шаг spacing scale 8 для отступов, gap и внутренних paddings. |
--gr-space-10--gr-space-10 | 40px | Шаг spacing scale 10 для отступов, gap и внутренних paddings. |
--gr-space-12--gr-space-12 | 48px | Шаг spacing scale 12 для отступов, gap и внутренних paddings. |
--gr-space-16--gr-space-16 | 64px | Шаг spacing scale 16 для отступов, gap и внутренних paddings. |
--gr-space-20--gr-space-20 | 80px | Шаг spacing scale 20 для отступов, gap и внутренних paddings. |
--gr-space-24--gr-space-24 | 96px | Шаг spacing scale 24 для отступов, gap и внутренних paddings. |
--gr-space-32--gr-space-32 | 128px | Шаг spacing scale 32 для отступов, gap и внутренних paddings. |
--gr-space-40--gr-space-40 | 160px | Шаг spacing scale 40 для отступов, gap и внутренних paddings. |
--gr-space-48--gr-space-48 | 192px | Шаг spacing scale 48 для отступов, gap и внутренних paddings. |
--gr-space-64--gr-space-64 | 256px | Шаг spacing scale 64 для отступов, gap и внутренних paddings. |
Источник: @feugene/granularity 0.41.0, tokens/*.json