Заводим блоки тем
Northstar
К пятничному показу инвесторы хотят увидеть тёмную тему: часть клиентов работает по ночам. А ключевой партнёр просит форму в своём фирменном бирюзовом. Успеем без копирования стилей?
Успеем, только не красьте тёмную тему механической инверсией: чисто чёрный фон убьёт иерархию, а белый текст будет слепить. В макетах у каждой роли свои значения для каждой темы.
Компоненты уже читают роли, а не hex. Значит, хватит переопределить значения ролей для каждой темы, а вёрстка не сдвинется ни на пиксель.
Сейчас все семантические роли зашиты в :root — то есть у интерфейса только один режим оформления. Подготовим контексты для светлой и тёмной тем.
Что делаем: в src/tokens.css после :root объявляем два селектора по атрибуту — и — пока без содержимого.
Почему: блок темы в CSS — это селектор по атрибуту данных, а не отдельный раздутый файл стилей.
Пока блок пуст, стили продолжают наследоваться из :root. Сначала резервируем контекст, затем наполняем его значениями.