Заводим файл токенов
Northstar
Один синий в макете завязан сразу на пять элементов. Если бренд поменяют, мы устанем перебивать значения руками. В Figma я заведу такие же переменные, чтобы дизайн и код говорили на одном языке.
Как мы поймём, что после переноса в отдельный файл ничего не развалилось?
Перенос не должен менять экран ни на пиксель. Если форма в превью выглядит как раньше, всё на месте. Значения пока переносим руками, автоматизацию настроим позже.
Начнём с отдельного файла, который станет единым источником правды для палитры.
Что делаем: добавляем файл src/tokens.css с комментарием и пустым правилом :root. Сами значения положим следующим шагом.
Почему: CSS-переменная не может существовать сама по себе — её объявляют внутри селектора.
- Псевдокласс
:rootвыбирает корневой элемент документа (html). - Переменные, объявленные в
:root, наследуются всеми элементами страницы и доступны в любом компоненте.