Модификаторы ролей текстаlink

Новый раздел для документации: http://sf5.simai.pro/ru/ui/utility/typography/roles.php

Модификаторы ролей текста применяются для одновременной настройки размера и высоты строки. Они могут быть применены как к тегам (например, h1), так и к классам (например, .sf-h-1), при этом один и тот же результат можно получить через разные варианты селекторов.

Важно: данные роли не зависят от условий показа (нет адаптивных или интерактивных вариаций).

Таблица соответствия модификаторов ролей текстаlink

Пример использованияlink

h1, .sf-h-1 {
  font-size: var(--sf-text-size-6);
  line-height: var(--sf-title-height-6);
}

.text-medium {
  font-size: var(--sf-text-medium--size);
  line-height: var(--sf-text-medium--height);
}
  
.label-large {
  font-size: var(--sf-label-large--size);
  line-height: var(--sf-label-large--height);
}

Используя данные модификаторы, вы можете легко и быстро применять готовые роли текста для оформления заголовков, текстовых блоков, меток и прочих элементов типографики.

Playgroundlink