Даём цветам роли
Northstar
После ребрендинга кнопка станет фиолетовой. А ссылки? Маркетинг ещё не решил. Сможем поменять одно, не трогая другое?
В Figma я как раз развожу цвета по смысловым переменным. Имя вроде blue/500 говорит лишь об оттенке, а нам нужна роль: фон действия, текст ссылки. Ссылку я сделала темнее, чтобы она не спорила с кнопкой.
Добавим имена по назначению.
Что делаем: в src/tokens.css добавляем роли и , каждая ссылается на цвет палитры.
Почему: связь строится в два слоя:
--blue-500: #1a73e8;оттенок палитры--action-bg: var(--blue-500);назначениессылка на оттенок
--blue-500описывает оттенок.- описывает назначение: фон основного действия.
Сама роль пока ничего не перекрашивает: кнопка и ссылка начнут читать её в следующих уроках. Зато решение уже можно менять в одном месте, не трогая палитру.