Space

Источник: ds-docs/component-contracts/foundations/space.md

Источник: коллекция space файла Astra DS · режим value · тип FLOAT (px). id сверены с tokens/variable-ids.json. Только факты. Находки — в конце.

Отступы: поля, интервалы между элементами и размеры. Scope у всех шестнадцати одинаковый — WIDTH_HEIGHT и GAP, то есть переменная предлагается и на размер, и на промежуток.

Шестнадцать переменных, база использует 14: не встречаются только два крупнейших, space-6xl и space-7xl.

Основной ряд — 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80: до 16 шаг растёт, дальше идёт ровно по 8, и только последняя ступень прыгает на 16. Между ними вставлены три промежуточные — space-1xs (6), space-xs-plus (10), space-ml (20).

Как применять — по разделу Figma

Раздел «Space Token» (40014705:2777) закрепляет за токенами сценарии. Проверено по базе:

Правило компенсации — единственное место раздела, которое меняет разметку, а не только выбор числа. У компонентов семейства List свои внутренние отступы 16; если поставить снизу контентного блока ещё 16, отступ смотрится вдвое больше. Раздел велит уменьшать нижний отступ блока до 8, а боковые убирать совсем, чтобы содержимое встало по заголовку. Для вида Secondary поправка не нужна. То же и у продуктового Exchange Rate Table, который включает в себя List: сверху и снизу 16 → 8.

Ещё раздел предупреждает: отступ должен быть одинаков со всех сторон — 32 по горизонтали против 16 по вертикали растягивает содержимое и ломает ритм.

Что показывает база

Отступы, в отличие от углов, в макете к переменным привязаны — и почти везде.

Числа вместо токена — там, где отступ подогнан под картинку: промежуток 178 и 220 (slider, navigation-bar, scanner-family), поля 120 и 104 у шторок и полноэкранных диалогов, 14 у шапок, 60 у барабана выбора. Отдельно стоят отрицательные промежутки — −8, −56, −1, −2: слои наезжают друг на друга (basic-list-item-swipe, slider, шапки). И два дробных: 0.78 и 0.5 в app-tag.

Находки

• Число 10 живёт двумя жизнями. space-xs-plus (10) применён токеном 80 раз, почти всё — в button. И ещё 99 раз ровно то же число стоит промежутком без токена: 10 — умолчание Figma, его получает всякий новый авто-слой, и в этих местах отступ никто не выбирал. Отличить выбор от умолчания можно только по привязке, а её в контракте видно как имя токена против числа.

• space-1xs хранит значение от удалённого режима. В коллекции один режим value (3001:1), где у переменной 6. Но в ней же лежит второе значение — 4 для режима 16022:1, которого в коллекции нет. В макете применяется 6; лишняя запись ни на что не влияет, но переживёт любое переименование.

• Ни у одной переменной нет codeSyntax. Имя для кода не задано — в отличие от цвета, радиусов и типографики, где var(--token) прописан. Перенос имён в код держится на соглашении, а не на файле.

• Ни у одной нет описания. Чем space-ml отличается от space-m по смыслу, файл не говорит.

• Три промежуточные ступени ломают схему имён. 1xs меньше 2xs, хотя по образцу «чем больше цифра, тем дальше от базы» должно быть наоборот; xs-plus и ml — единственные имена с суффиксом.

См. также: radius, border, README.