Фундаменты (токены)

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

Восемь групп токенов Astra DS плюс текстовые стили; рядом — сетка макета и переходы между страницами: токенов у них в файле нет, а описания нужны. В каждом .md — объём, архитектура, примеры значений и находки. Источник истины по значениям — DTCG-экспорты в tokens/; для стилей — tokens/styles.json.

Компонент к переменным типографики не привязан: он ссылается на текстовый стиль, а стиль — на переменную. Поэтому у типографики два документа: стили — то, что видит компонент, типографика — то, что стоит за стилем.

Так же устроены эффекты: тень и размытие живут у стиля эффекта, а не у слоя. Восемь стилей и переменные под ними — в effect.

Сам стиль компонент почти нигде не ставит напрямую: надпись вставлена обёрткой из семейства «Text / …», которая заодно держит цвет, число строк и способ обрезки хвоста. Это приём Figma, в код он не переносится — что от него остаётся в контракте, описывают обёртки текста.

Наверх — README.

Механизмы

Базовые механизмы поверх токенов (не отдельная группа токенов):

• Haptic (Виброотклик) — карта тактильных откликов: словарь триггеров, список откликов и правило, как отклик попадает в компонент. Токенов в выгрузке пока нет — значения живут в Figma.
• State Layer (Слой состояния) — системная визуализация состояний hover/focus/press/drag через полупрозрачный слой; переиспользуется в компонентах Astra DS и Astra Fintech вместо отдельных вариантов состояний. Разделение поведения React (core-ui) / Flutter.
• Костыли обрезки хвоста — полоска размытия ⚒︎ Text Overflow Blur и точки загрузки ⚒︎ Elilpses Loading: приём макета, контракта у них нет, в чужом дереве помечаются foundation: typography.
• Масштаб типографики — ось Type Scale со значениями Base и Scale: с множителя ×1,2 компонент переходит на вид под крупный шрифт. Где проходит порог между дельтой и отдельной формой и почему он тот же, что у forms.
• Платформа — локальная коллекция режимов показа: под каждый режим в макет подставляется размер устройства. В контракт числа устройства не идут, узел помечается foundation: platform.
• Версии компонента — две отмены: компонент с крестом в имени не описывается вовсе, а версия внутри оси Version описывается только живая. Зачем так сделано и что из этого следует контракту.
• Системные элементы экрана — строка статуса, домашний индикатор, кнопки Android. Рисует их операционная система, мы их не документируем; из макета берём только зарезервированное место переменной высоты. Разделение React (core-ui) / Flutter.

Как применять

• Цвет в макетах — уровни bg-surface → bg-layer-01 → bg-layer-02: color-token-usage.
• Анимация — процессы передачи между дизайном и кодом: раздел «Как анимация доезжает до кода» в motion; переходы между страницами: flow-motion.

Справочник id

tokens/variable-ids.json — словарь id переменной Figma → токен, все 1225 локальных переменных оригинала. Узел в макете хранит id, контракт — имя; справочник между ними. Он нужен там, где имя неоднозначно: за одним именем-листом может стоять несколько переменных, и без id не сказать, какая назначена.

У каждой записи — имя, путь, коллекция, тип, scope, значения по режимам; где известно — имя для кода, файл экспорта и число применений в макете. Для коллекций без экспорта (примитивы, size, z-index, old-typography, платформа, аватар, версия) справочник — единственная запись значений.

Id не меняются при дублировании файла — контрольные суммы по всем 21 коллекции сошлись с рабочей копией, 1225 из 1225. Значит, справочник годится и для оригинала, и для копии.

Служебное

• Токены с приставкой ds- (ds-space-*, ds-radius-*, color/ds-*) — движок оформления документации, не продуктовые токены. См. glossary.