GitLab

Цвета элементов

• default (без bg)
• primary (синий bg, белый текст)
• secondary (светло-серый bg, темно-серый текст)

Виды элементов

• default (с bg без видимой рамки)
• outline (без bg, с рамкой)
• inline (всё что видимое до нажатия - без bg, без рамки)

Состояния у элементов

• default (по-умолчанию)
• hovered (наведенный)
• focused (таБом/таПом выделенный)
• active (разница с focused в состоянии ввода)
• disabled (выключенный)
• readonly (чтение, но без редактирования)
• filled (заполненный)

Работа с классам элементов и модификаторами их состояния

• Классы всегда наборные, один другой не заменяет: .amocrm-button --primary --outlined --disabled
• Состояние, вид, цвет и тд с алиасом default не указывается в классах (используется по-умолчанию)
• Всё что "присваивается" элементу динамически - добавляется с прфиксом --: --hovered, --filled, --focused

Название классов элемента

• Если элемент один - всегда в единственном числе: .amocrm-button, .amocrm-checkbox.
• Если элементы во что-то объединены: .amocrm-buttons-group, .amocrm-checkboxes-group
• Много элементов других эелемнтов: .amocrm-list-items, .amocrm-menu-elements