Текст и цвет

Размер, насыщенность и семантический цвет

05 · Текст и цвет

Текстовые утилиты опираются на токены темы

Они меняют отдельное свойство, не создавая новый типографический стиль. Для повторяемой роли текста используйте компонентный класс.

Font size

Fs использует первые шаги spacing-шкалы

fs-0 … fs-5 соответствуют 0, 4, 8, 12, 16 и 20 px. Классы поддерживают breakpoint: fs-3 fs-md-4.

Ограничение: нулевой и слишком малые размеры технически доступны как utility API, но не подходят читаемому пользовательскому тексту.

Font weight

Fw называет насыщенность по смыслу

fw-regular 400, fw-medium 500, fw-semibold 600, fw-bold 700. Responsive-форма: fw-lg-semibold.

Semantic color

Цвет текста выражает роль и следует теме

  • Иерархия.text-primary, .text-secondary, .text-tertiary, .text-disabled.
  • Состояние.text-success, .text-warning, .text-error, .text-info.

Цветовые утилиты не имеют breakpoint-вариантов. Не передавайте смысл только цветом: состояние должно оставаться понятным из текста, иконки или подписи.

Личный кабинет

Вход в OKAUX

или по email

Нет аккаунта?