Одни токены для макета и для кода

Из Figma в код

1. Figma VariablesPrimitives · 43
   Theme · 27 × 2 режима
   Size · 18
   Текстовые стили · 12
2. figma-export.jsonВыгрузка через Plugin API: имена, режимы, алиасы
3. tokens/build.mjsРазворачивает алиасы, собирает темы
4. tokens.css + design-tokens.jsonCSS-переменные и формат W3C DTCG для разработки

/* Theme → Light */            /* Theme → Dark */
--bg-surface: var(--neutral-0);   --bg-surface: var(--neutral-900);
--accent-default: var(--blue-600); --accent-default: var(--blue-500);

Семантические токены ссылаются на примитивы, а не на HEX. Поменяли оттенок синего в Figma — обновился и макет, и виджет, без поиска по стилям.

Цвет

Семантические токены темы. Левая половина плашки — светлый режим, правая — тёмный.

Примитивы

Типографика

Onest, 12 стилей. В коде — шорткат font: var(--type-body-m), трекинг отдельной переменной.

Отступы и скругления

Кнопка коэффициента

Главный элемент виджета. Высота 44 px — удобная цель для пальца, значение всегда с двумя знаками после запятой, чтобы цифры не прыгали.

Движение линии

Стрелка показывает изменение относительно того, что пользователь уже видел в этой сессии, и держится 15 секунд. Сравнение с линией открытия из API отброшено: она бывает многодневной давности, и стрелки стояли почти на каждой кнопке.

Цвет стрелки

status/success — рост, status/danger — снижение. В выбранной кнопке стрелка берёт text/on-accent, чтобы не спорить с фоном.

Заблокировано

Пунктирная рамка без фона: кнопка не выглядит нажимаемой, но место в сетке сохраняется — строки не «прыгают», когда приём ставок возобновится.

Строка события

Статус слева

Время начала, минута матча или «Перерыв». Live всегда status/danger и плашка LIVE — дублируем цвет формой, чтобы статус читался и без цвета.

Длинные названия

Обрезаются многоточием, полное имя — в подсказке. Счёт и коэффициенты не сдвигаются.

Логотипы в тёмной теме

Тёмные эмблемы (Washington Capitals, Tampa Bay Lightning) пропадали на тёмном фоне. Для тёмной темы подгружается отдельная версия логотипа из того же источника, светлая остаётся запасной.

Нет логотипа

Кружок с аббревиатурой, тонированный цветом клуба из API. Если картинка не загрузилась — подменяется тем же кружком.

Завершён

Победитель — полужирным, проигравший — text/tertiary. Коэффициенты гаснут.

Мобильная версия

Строка складывается в карточку: статус сверху, команды, затем три кнопки на всю ширину.

Обратная связь

Ошибка частичная и полная

Если упала одна лига, остальные показываем и говорим, какой нет. Если не ответил весь источник — экран ошибки с повтором и сохранёнными данными.

Не удалось обновить

Данные уже на экране не стираем: меняем индикатор источника на жёлтый и пишем время последнего успешного обновления.

Коэффициент в купоне изменился

Кнопка «Сделать ставку» превращается в «Принять изменения». Ставка по старому коэффициенту без согласия пользователя невозможна.

Правила

Только токены

В CSS виджета нет HEX-значений и «магических» отступов — всё через переменные из tokens.css. Исключение — тени и затемнение фона под нижней панелью.

Лайм — только бренд

highlight/default используется для знака Арены. Для статусов и действий у него нет смысла, иначе пользователь начнёт искать в нём значение.

Синий — действие и выбор

accent/default — основные кнопки и выбранный коэффициент. Выбранная строка подсвечивается bg/row-selected.

Цифры не прыгают

Табличные цифры (tnum) во всём интерфейсе, фиксированная ширина колонок коэффициентов.

Время — местное

API отдаёт дни по времени Нью-Йорка. Виджет запрашивает два соседних дня и сам раскладывает события по дням в часовом поясе пользователя.