Обход не обязательно ошибка: цвет на экране может в точности совпадать с утверждённым. Проблема в том, что он больше не следует системе. Когда токен изменится, обход останется прежним.
Типичные обходы
- Hex-цвет, например
#2563eb, там, где естьbg.accent. - Значение в пикселях, например
padding: 12px, там, где есть токен отступа. - Кнопка, собранная из
divи пары стилей вместо системногоButton. - Примитивный токен там, где нужен смысловой, и тёмная тема его не затрагивает.
Как их найти
Ищите в коде литералы, которые должны быть токенами: hex, rgb(), hsl() и значения в пикселях в стилях. Правило линтера ловит новые обходы ещё на ревью. У Atlassian есть правила ESLint, например ensure-design-token-usage, которые помечают значения, где должен стоять токен (Atlassian Design System).
Прежде чем считать, исключите сгенерированный код. Когда мы впервые измерили демо-репозиторий с помощью FISYCO (мы делаем этот продукт), иконки, которые выгрузила его же синхронизация, дали около 590 зашитых цветов. С кодом всё было в порядке, ошибся подсчёт.
Зачем их считать
Обходы показывают, пользуются ли системой на деле. Отслеживайте их как долю от всех отслеживаемых использований, а не как абсолютное число: в растущей кодовой базе абсолютное число растёт и так. Падающая доля значит, что команды сначала берут токены и компоненты. Растущая обычно значит, что в системе нет того, что нужно людям, или ею слишком сложно пользоваться.