Техническая документация

Компонент не использует сырых значений — только токены. Значения ниже собраны из src/styles/tokens/*.css; таблица-источник — docs/design/TOKENS.md.

Цвет — сырые шкалы

Семантика

Компоненты работают только с ней. Тёмная тема — атрибут секции (<section data-theme="dark">), а не переключатель пользователя: атом внутри тёмной секции перекрашивается сам.

Типографика

Пространство, радиусы, тени, слои

Движение

Поверхности и стекло

Стекло видно только там, где под ним есть что размывать. На светлом фоне backdrop-filter не ловит ничего, и карточка растворяется в секции. Поэтому стекло — только поверх изображения или тёмного фона (шапка над героем, подписи поверх кадра, панель над схемой регионов), а на светлых секциях — плотная поверхность --surface-1 с ледяной гранью --edge-highlight. Наглядно — в разделе «Материалы» витрины дизайн-системы.

Ритм секций и ледяной излом

Границы между секциями — не черта и не полоса, а полигональный излом: два слоя треугольных граней с разными углами, плоская заливка без градиентов внутри грани и обязательная пара «блик / глубина». Слой заезжает под контент соседних секций, поэтому граница блоков исчезает и страница читается единым массивом. Геометрия генерируется из seed (src/data/facets.ts), руками правятся только seed и палитра: полигоны, забитые в разметку, никто потом не осмелится трогать.

Тона секций и приёмы лежат в src/data/transitions.ts, а правила (излом только между светлым и тёмным, изломов не больше трёх плюс одно поле поперёк секции, не больше двух тёмных секций подряд, фактура только на светлой) проверяет scripts/test/transitions.test.mjs — нарушение роняет тест, а не всплывает на приёмке.

С 20.08 граней на главной нет ни одной: владелец забраковал приём как слишком грубый. Стык рисует мягкое растворение — градиент из фона верхней секции в фон нижней, тона берутся из того же реестра. Пять кандидатов на замену стоят рядом в лаборатории /lab/transitions/; колонка «приём» в реестре осталась описанием и ждёт выбора владельца.

Сайт реагирует на события, а не на человека: время суток, праздник, идущий старт. Профилирования и трекеров нет — контекст одинаков для всех, кто зашёл в эту минуту.

Активно не более одного настроения одновременно — с наибольшим приоритетом среди подходящих. Суточный слой (data-daypart) действует всегда и меняет только освещение. Траур — не «ещё одна тема», а стоп-кран: он гасит декор и анимации всех остальных.

Уважение к посетителю: переключатель «Спокойный вид» в подвале отключает декор и переживает перезагрузку; при prefers-reduced-motion декор статичен; в рабочих разделах и рядом с материалами с флагом sensitive декора нет вовсе.

Дата всемирного дня конькобежного спорта хранится по годам (dateByYear), а не считается формулой: ISU объявляет её каждый год отдельно — в 2025 это было 14 декабря, хотя на сайте события упоминается «первое воскресенье декабря». Год без даты — тема молчит, без ошибок и без угадывания.

Примерить любую тему можно на витрине дизайн-системы.

Права — флаг на пару «блок × регион». Включается в панели управления отдельно для каждого региона. Выключенный блок на сайте региона всё равно есть — его наполняет федерация. Сотрудники федерации могут отредактировать содержимое любого сайта.

Ничего не выбрасываем. Единственное осознанное слияние — две новостные ленты. Контент не мигрируем, старый сайт остаётся на old.fsrussia.ru.

301-редиректы

Без них поисковая выдача уходит в никуда. Глубокие ссылки на конкретные материалы уходят на old.fsrussia.ru тем же путём.

Порядок блоков главной

Правило: страница не ходит в чужой API напрямую. Путь один — страница → src/api/ → фикстура или внешний сервис. Когда сервис коллег появится, меняется реализация функции, а вёрстка не трогается.

Что менялось в системе, а не в контенте. Полная история правок — в docs/CHANGELOG.md репозитория.