sync

adaptive-layout-requirements.full.md

@@ -18,6 +18,7 @@
 - **Auto Layout** — основной механизм адаптивности в Figma для контейнеров и компонентов.
 - **Hug / Fill / Fixed** — режимы ресайза (по контенту / заполнять контейнер / фиксированно).
 - **Constraints** — привязки объектов внутри Frame (Left/Right/Top/Bottom/Center/Scale).
+- **«Обоснованно» (в контексте этого стандарта)** — по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`, `Stretch/Center`) должно быть понятно: **что именно выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. Если выбор может трактоваться по-разному — добавьте аннотацию/комментарий на странице `Responsive / Breakpoints`.
 
 ---
 
@@ -119,7 +120,7 @@
 Минимальные требования к Auto Layout:
 - паддинги задаются через Auto Layout (а не «ручными» прямоугольниками);
 - расстояния между элементами задаются через `Spacing`;
-- направление (Horizontal/Vertical) и `Wrap` выбираются осознанно;
+- направление (Horizontal/Vertical) и `Wrap` выбираются обоснованно;
 - в ключевых местах задаются **min/max** (если без этого появляются «переломы» компоновки).
 
 #### 2.5.2. Resizing: Hug / Fill / Fixed
@@ -186,9 +187,9 @@ Constraints применяются там, где Auto Layout не покрыв
 - проверьте состояния и длину текста.
 
 ### 3.4. Типовые требования по компонентам (примерно, без привязки к бренду)
-- **Button**: фиксированная высота (например, 40/44/48 по дизайн-системе), ширина `Hug` или `Fill` по контексту, текст не должен вылезать (правила: перенос/обрезка задаются осознанно).
+- **Button**: фиксированная высота (например, 40/44/48 по дизайн-системе), ширина `Hug` или `Fill` по контексту, текст не должен вылезать (правила: перенос/обрезка задаются обоснованно).
 - **Input**: высота фиксирована, поле `Fill`, лейбл и хелпер-текст — `Hug` с переносом.
-- **Card**: контейнер `Fill`, текстовые блоки — `Hug` по высоте, изображение — осознанный `Fill/Fit` с safe-area.
+- **Card**: контейнер `Fill`, текстовые блоки — `Hug` по высоте, изображение — обоснованный `Fill/Fit` с safe-area.
 
 ---
 
@@ -229,8 +230,10 @@ Constraints применяются там, где Auto Layout не покрыв
 
 ## 5. Типографика
 
-### 5.1. Только через Text Styles
-Все тексты обязаны использовать **Text Styles**.
+### 5.1. Text Styles + Variables (обязательное правило)
+Все текстовые слои в макете обязаны использовать **Text Styles**.
+
+Text Styles должны быть **семантическими** (а не «по экрану») и опираться на **типографические токены в Variables**.
 
 Минимальный набор (пример семантики):
 - `H1`, `H2`, `H3`
@@ -240,29 +243,39 @@ Constraints применяются там, где Auto Layout не покрыв
 
 Требования:
 - одинаковая семантика должна выглядеть согласованно во всех экранах;
-- локальные «ручные» размеры шрифта недопустимы, если это не исключение, закреплённое в системе.
+- локальные «ручные» правки размеров/интервалов поверх стиля недопустимы (кроме редких исключений, зафиксированных правилом);
+- разрешены только бесплатные шрифты; предпочтительно использовать **Google Fonts**;
+- значения типографики (минимум `font-size` и `line-height`, при необходимости `letter-spacing`) — источник правды в **Variables**;
+- адаптация типографики между брейкпоинтами делается через **Modes** в Variables, а не через дублирование текстовых стилей «под каждый брейкпоинт».
 
-### 5.2. Адаптация типографики между брейкпоинтами
-Допускается изменение:
-- размера шрифта;
-- межстрочного интервала;
-- межбуквенного интервала (редко и осознанно);
-- ограничения количества строк.
+### 5.2. Адаптация типографики между брейкпоинтами через Modes
+Если типографика меняется между брейкпоинтами, это изменение фиксируется **через Modes** в коллекции Variables.
 
-Правило:
-- изменения типографики между брейкпоинтами должны быть предсказуемыми и фиксироваться как правило (например: `H1` на Mobile меньше на 2–4px).
+Обязательная структура:
+- есть коллекция Variables для типографики (например: `Typography`);
+- в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте);
+- для каждого семантического стиля (`H1/H2/Body/...`) определены переменные минимум для:
+  - `font-size`;
+  - `line-height`;
+  - опционально: `letter-spacing` (редко и только обоснованно).
+
+Обязательное правило применения:
+- Text Styles используют эти переменные как значения типографики;
+- у каждого фрейма экрана выставлен корректный Mode (Mobile/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту;
+- любые отличия от токенов (если они вообще допускаются) должны быть подписаны: **что изменено**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте.
 
 ### 5.3. Многострочный текст: переносы и ограничения
 Для ключевых текстовых блоков обязаны быть определены правила:
 - переносится ли текст (wrap) или обрезается (truncate);
-- сколько максимум строк допустимо в карточке/ячейке;
-- что происходит при переполнении (например, `…` + tooltip в продуктовых требованиях — если применимо).
+- сколько максимум строк допустимо в конкретном контексте (карточка/ячейка/таблица/заголовок/кнопка);
+- что происходит при переполнении (например, `…`, перенос на следующую строку, увеличение высоты блока — что именно ожидается в UI).
 
 Минимальная проверка контента:
 - короткий текст;
 - нормальный (ожидаемый);
 - длинный;
-- «экстремальный» (очень длинный) — для выявления поломок.
+- «экстремальный» (очень длинный) — для выявления поломок;
+- одна очень длинная строка без пробелов (проверка на разъезд/переполнение в узких контейнерах).
 
 ---
 
@@ -323,7 +336,7 @@ Constraints применяются там, где Auto Layout не покрыв
 
 ## 8. Изображения и медиа
 
-### 8.1. Осознанный выбор Fill / Fit
+### 8.1. Обоснованный выбор Fill / Fit
 - `Fill` (cover) используется, когда допустима обрезка.
 - `Fit` (contain) используется, когда обрезка недопустима.