Шестой выпуск Bootstrap переписал цветовую модель: что это меняет для сайтов, которые живут годами

Когда в 2021 году вышла пятая версия, цвета в ней жили в двух мирах: шестнадцатеричные значения в Sass и их копии в CSS-переменных. Чтобы получить оттенок посветлее, препроцессор смешивал цвет с белым ещё до того, как файл попадал в браузер. Шестая версия отдаёт эту работу самому браузеру: базовый цвет записан в пространстве oklch, а ступени от 025 до 975 рассчитывает функция color-mix().

Почему oklch, а не hex

Слово oklch складывается из трёх координат: l — светлота, c — насыщенность, h — тон в градусах. Приставка «ok» досталась от названия пространства Oklab, которое Бьёрн Оттоссон опубликовал в 2020 году как исправленную версию Lab. Главное свойство: одинаковый шаг светлоты воспринимается глазом одинаково для любого тона. Синий и жёлтый с одной светлотой выглядят одинаково «тяжёлыми», чего в hex и hsl добиться нельзя.

Если раньше дизайнер подбирал двенадцать оттенков руками, теперь он задаёт один — остальные выводятся по правилу, и правило одинаково для всех шестнадцати цветов палитры.

Композиция вместо вариантов

Во второй половине статьи — самое заметное для верстальщика изменение. Кнопка больше не бывает «синей кнопкой» .btn-primary. Она собирается из двух классов: формы и темы.

Тот же приём работает для значков, оповещений, аккордеонов, таблиц, степперов и аватаров. Девять тем ядра — primary, accent, success, danger, warning, info, inverse, secondary — и свою можно добавить одной записью в карту $theme-colors.

• оттенок меняется в одном месте — у токена --bs-primary-base;
• компоненты не знают, какой цвет им достанется: они читают --bs-theme-*;
• вложенный блок возвращается к значениям по умолчанию классом theme-reset.

Что придётся переучивать

Пороговые версии браузеров выросли сразу на семьдесят выпусков Chrome. Утилиты поменяли место ответственного за ширину экрана: было d-md-none, стало md:d-none. Шкала отступов выросла с шести ступеней до тринадцати, и цифра в классе больше не значит того же, что в пятой версии. Об этих и других порогах — в докладе, который сопровождает этот сайт.