Текстовые стили

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

Источник: 51 текстовый стиль файла Astra DS · привязки — tokens/styles.json. Значения сверены с оригиналом (eGpqY0OqVR8l8zhmlHdfb9): расхождений нет. Только факты. Находки — в конце.

Стиль — единственное, что компонент говорит о типографике. Контракт пишет text.style: Headline/H5, и больше ничего: размер, интерлиньяж и начертание живут у стиля и меняются вместе с ним. Компонент, записавший их у себя, при перенастройке стиля соврал бы. Правило записи — в формате контракта.

Цепочка

узел компонента  →  текстовый стиль  →  переменная typography  →  переменная библиотеки
  text.style          51 штука            смысловой слой           число живёт там

Стиль задаёт пять свойств: семейство, начертание, размер, интерлиньяж, трекинг. Шестое, абзацный отступ, задают не все. Цвет, выравнивание, число строк и обрезка стилю не принадлежат — это свойства узла, и их контракт пишет сам.

Все 276 привязок ведут в переменные: 272 в смысловой слой typography, 4 в примитивы typography-tokens. Библиотечных привязок и стилей без привязок нет. Что за этими слоями — в типографике.

Семейства

Три первых семейства — общий ряд заголовков и текста, разделённый по весу: Title тяжелее Headline, Headline тяжелее Body. Articles — отдельный ряд для статей, Special — одиночные случаи, Mask — ряд для маски суммы и каретки, где начертание задано осью компонента.

Title

Абзацный отступ задают только H1–H4, у H5 и H6 он paragraph-spacing-none.

Headline

Body

Articles

Ни один стиль семейства не задаёт абзацный отступ, хотя семейство для статей.

Special

Mask

Ряд построен парами «Bold — Regular» на семь размеров. Внутри пары различается только вес, размер и интерлиньяж у обеих половин одинаковы.

Чем пользуется база

Из 51 стиля контракты ссылаются на 22. Остальные 29 в описанных компонентах не встречаются: всё семейство Articles/*, половина Title/*, Headline/* и Body/*, и четыре одиночных Special/*. Это не значит, что стили лишние, — описано пока 27 компонентов.

Стиль попадает в контракт двумя способами: именем прямо на узле или через привязку, когда его выбирает ось. Второй способ — у маски суммы, каретки и ярлыка: там ось Size выбирает стиль из таблицы, а text.style: $bold ссылается на неё.

Находки

• Articles/Titile/* — опечатка в имени группы, шесть стилей. В наследной коллекции те же стили названы правильно (articles/title/*) — значит, ошибка только в имени стиля.
• Mask/Mask Bold/* — «Bold» на три разных веса: XXSmall и XSmall — Medium 500, Small–XLarge — SemiBold 600, Max — Bold 700. Имя обещает одно начертание, ряд даёт три.
• Mask/Mask Regular/* с ростом размера перестаёт быть Regular: Large и XLarge — Medium 500, Max — SemiBold 600. Крупная «обычная» маска тяжелее мелкой «жирной».
• Articles/Paragraph/P1 — единственный интерлиньяж 25 (line-height-4xls). Весь остальной ряд чётный с шагом 2; имя выбивается из схемы так же, как значение.
• Special/section-heading/* привязаны к примитивам typography-tokens, а не к смысловому слою, как остальные 49. Четыре привязки из 276.
• 30 стилей из 51 не задают абзацный отступ. Задают его 21, и из них 15 ставят ноль. Осмысленное значение — только у Title/H1–H4, Body/H3 и section-heading-large-description.
• Компоненты дублируют стиль прямыми привязками. У Button это 278 надписей, у Caret Animate 56, у Skeleton Text одна: поверх стиля стоят те же переменные, и при перенастройке стиля надпись за ним не пойдёт. Записано в gaps этих контрактов.
• Системная строка стилей не использует вовсе: часы в system-status-bar набраны шрифтом платформы (SF Pro Semibold 17, Roboto Medium 14) без стиля и без переменных. В контракте это style: none.

См. также: типографика, README.