Цвета и цветовые хелперы

В Bulma есть небольшая палитра именованных цветов. Каждое имя означает роль, а не оттенок: danger — опасность или ошибка, success — успех. Эти имена используются в модификаторах всех элементов (is-danger) и в цветовых хелперах — классах, которые красят текст или фон любого тега.

Палитра

Кроме них есть нейтральные: white, black, light, dark и серые оттенки grey-darker, grey-dark, grey, grey-light, grey-lighter.

Цвет текста и фона

Хелпер has-text-ИМЯ красит текст, has-background-ИМЯ — фон:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<p class="has-text-success">Стол забронирован</p>
<p class="has-text-danger">Свободных мест нет</p>
<p class="has-background-warning p-2">Кухня закрывается через 30 минут</p>
<p class="has-text-grey">Цены указаны с учётом НДС</p>

Зелёная и красная строки, жёлтая плашка и серая подпись. Класс p-2 добавляет плашке внутренний отступ — о таких классах следующий урок.

Светлые и тёмные оттенки

К имени цвета можно добавить -light или -dark. Светлый фон с тёмным текстом того же цвета — спокойное выделение, которое легко читать:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<p class="has-background-danger-light has-text-danger-dark p-3">
  Заказ №1042 отменён гостем.
</p>
<p class="has-background-success-light has-text-success-dark p-3">
  Заказ №1043 оплачен.
</p>

Две плашки: розовая с тёмно-красным текстом и светло-зелёная с тёмно-зелёным. Так в админ-панели отмечают статусы.

Числовые оттенки

В Bulma 1.0 у каждого цвета есть 21 оттенок по светлоте: от 00 (почти чёрный) до 100 (белый) с шагом 5:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="has-background-primary-95 p-2">primary-95</div>
<div class="has-background-primary-80 p-2">primary-80</div>
<div class="has-background-primary-60 p-2">primary-60</div>
<div class="has-background-primary-30 has-text-white p-2">primary-30</div>

Четыре полосы от очень светлой бирюзовой до тёмной. Числовые оттенки пригодятся, когда -light и -dark не хватает.

Оттенки, которые учитывают тему

Суффиксы -soft и -bold подстраиваются под тему: has-background-primary-soft светлый в светлой теме и тёмный в тёмной, has-text-primary-bold — наоборот. Для сайтов с тёмной темой они удобнее, чем -light и -dark, которые не меняются.

Частая ошибка

Красить фон, не думая о тексте: has-background-dark без has-text-white даёт тёмный текст на тёмном фоне. Хелперы меняют одно свойство, контраст за вас они не подберут. Элементы с модификатором цвета — кнопки, hero, уведомления — подбирают цвет текста сами, поэтому для цветных блоков удобнее брать их.