Код-ревью Senior Дизайн-системы и компоненты обновлено
Ревью набора токенов
Вопрос
Перед вами фрагмент токенов дизайн-системы. Найдите проблемы.
1. color.blue.500 = #2563EB
2. color.button.primary = #2563EB
3. color.text.secondary = color.gray.400 (около 2.5:1 на белом)
4. color.error = color.red.500
5. spacing.small = 7px
6. color.header.blue = color.blue.500
7. font.size.body = 16px, font.lineHeight.body = 1
Коротко
Хорошие токены: примитивы содержат значения, семантические и компонентные ссылаются на них, имена говорят о назначении, а не о цвете, и сами токены гарантируют доступность. Строки 1 и 4 нормальны: примитив и семантический алиас.
Что должен найти ревьюер
- Стильстрока 2Компонентный токен ссылается на голый hex, а не на примитив: при смене палитры его забудут обновить. Нужно color.button.primary = color.action.primary = color.blue.500.
- Ошибкастрока 3Вторичный текст с контрастом около 2.5:1 не проходит AA 4.5:1. Семантический токен текста должен гарантировать контраст.
- Стильстрока 5Отступ 7 px выпадает из шкалы 4/8, токены отступов должны быть системными.
- Стильстрока 6Имя токена содержит значение («blue»): при ребрендинге шапка станет зелёной, а токен останется «blue». Семантика: color.header.background.
- Ошибкастрока 7Интерлиньяж 1 для основного текста слишком плотный, строки слипаются; для текста обычно 1.4-1.6.
Разбор
Хорошие токены: примитивы содержат значения, семантические и компонентные ссылаются на них, имена говорят о назначении, а не о цвете, и сами токены гарантируют доступность. Строки 1 и 4 нормальны: примитив и семантический алиас.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.