Создание дизайн-системы. Часть 6. Кнопки | В паутине

Создание дизайн-системы. Часть 6. Кнопки

Кнопки – важнейший интерактивный компонент наших сайтов. Именно с их помощью пользователи совершают большинство действий, значит, их дизайн очень важен.

Базовые стили

Начинаем с определения основных стилей для всех кнопок:

Эти свойства не будут изменяться для кнопок разных видов и размеров:

  • position: relative потребуется для позиционирования иконок внутри кнопок;
  • white-space: nowrap запрещает перенос текста подписи на другую строчку;
  • text-decoration: none убирает подчеркивание, так что класс .btn теперь можно устанавливать и для ссылок.

Абстрагирование размера шрифта и величины скругления углов особенно полезно на ранних этапах разработки дизайн-системы, когда изменения вносятся очень часто. Паддинги связаны с основной системой отступов, так что они изменяются автоматически.

Вариации стилей

Чаще всего для кнопок создаются следующие состояния:

  • .btn--primary – базовый стиль активных кнопок;
  • .btn--secondary – дополнительная версия кнопок, предназначенных для менее важных действий, хорошо сочетающаяся с основной (primary) или акцентной (accent);
  • .btn--accent – используется для выделения кнопок с действиями, требующими повышенного внимания пользователя (например, удаление);
  • .btn[disabled] – указывает пользователю, что кнопка неактивна.

Все цвета определяются в отдельном файле _colors.scss. Подробнее о работе с цветами и темами в дизайн-системе вы можете прочитать в третьей статье серии.
Добавим в этот файл цвета для кнопок:

Миксин fontSmooth предназначен для улучшения рендеринга шрифтов при использовании светлого текста на темном фоне. Этот стиль используется довольно часто для разных элементов, поэтому его стоит вынести в отдельный миксин.

Здесь нет мелких несущественных стилевых деталей вроде теней или состояния при фокусировке. Они уникальны для каждого проекта, поэтому нет смысла включать их в саму дизайн-систему – их следует настраивать поверх нее.

Размеры

Необходимо создать для кнопок несколько возможных размеров. Речь идет не об отзывчивых элементах, изменяющихся в разных брейкпоинтах, а об отдельных вспомогательных классах для кнопок разного размера независимо от вьюпорта.

Хороший подход: определить переменные размера с помощью calc().

Кнопки с иконками

В предыдущей статье серии мы разобрались с выравниванием иконок и текста. Тот же самый класс .icon-text-aligner можно использовать для выравнивания подписей и иконок внутри кнопок.

У нас могут быть кнопки без текста, только с иконкой, поэтому стоит привязать стили к классу .icon внутри .btn и убедиться, что иконка наследует стили подписи, даже если самой подписи нет.

Группы кнопок

В основной CSS-файл также стоит включить стили для кнопочных групп. К счастью, Flexbox-модель позволяет легко располагать элементы в одном измерении:

Отзывчивые кнопки

Вся наша дизайн-система, описанная в предыдущих статьях, основана на относительных единицах em и двух CSS-переменных: --text-base-size и --space-unit. Если обновить их в медиа-запросе, сработает каскадный эффект для всех элементов, включая кнопки. Поэтому нет необходимости создавать дополнительные запросы для в файле _buttons.scss.

_buttons.scss

В итоге у нас получился вот такой глобальный SCSS-файл для кнопок:

Заключение

Это последняя статья из серии, посвященной созданию дизайн-системы CodyHouse. Библиотеку компонентов целиком вы можете найти здесь.

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны