Компоненты используют смысловые токены вроде bg.accent. Поэтому при ребрендинге меняется примитив, на который ссылается смысловой токен, а имена в коде остаются прежними.
Примитивные и смысловые: пример
Так устроена система Primer от GitHub: базовые токены напрямую соответствуют сырым значениям, а функциональные, например bgColor-inset, несут смысл (Primer token names). В Primer есть и третий уровень: компонентные токены вроде button-primary-bgColor-hover, которые ссылаются на смысловые.
Почему это разделение работает
Имя по значению становится ложью после ребрендинга: если акцент стал зелёным, blue.500 в компоненте уже неверен. Имя по назначению остаётся верным. Палитра может поменяться, тёмный режим может подменить значения, а компоненты сохраняют те же имена.
Практическое правило: держите примитивные токены в небольшом слое палитры, а компонентам давайте только смысловые имена. Если компонент берёт примитив напрямую, обычно это значит, что начинается расхождение дизайн-системы.
Смотрите также
- Дизайн-токен
- Режим: у смыслового токена в каждом режиме может быть своё значение.
- Токены из Figma в код без ручного экспорта: как по шагам называть токены по назначению.