Comments 9
Тема то крутая, но не хватает больше примеров и каких-то частых затыков. Ну и если есть разные степени прозрачности.
Как вы решаете кейс, когда цвет кнопки для hover из примитивов не подходит? Например кнопка gray-100, на hover gray-200 кнопка получается слишком темной. Подбираете gray-200 более светлым? Или делаете другой тип ховера, например через оверлей чёрного с 0.05 opacity?
Ммм, какой классный вопрос. Вообще на фронте, например, в Material используют 5% черного или белого поверх — это экономит токены. Но как поступить дизайнеру дизайн-системы, чтобы продуктовым дизам было удобно? Можно сделать в ховер состоянии кнопки поверх основного фона фрейм, в котором будет 5% черного — но если вариантов много, фигма будет тормозить.
В идеале нужно сделать больше шагов в палитре изначально, чтобы не возникало таких ситуаций в принципе — можно посмотреть на Radix UI — у них 12 шагов контрастности, чего хватит с головой для любых сценариев. Если не подходит прозрачная палитра в каком-то кейсе, то пробуем использовать solid-цвета, и создаем компонентный токен под конкретную ситуацию.
Также, насколько мне известно, в Tokens studio есть модификаторы, которые прям в плагине могут сделать цвет кнопки на 5% темнее, а затем экспортировать полученный цвет в Figma variables как сплошной цвет или прозрачный.
Если бы возникла ситуация, когда не хватает шагов контрастности, то я бы переделывал палитру и токены в рабочее и внерабочее время — сам виноват, что сделал недостаточно))
Я обычно решаю через оверлей. Можно добавить fill прямо поверх основного цвета и тоже токеном.
А в палитре и так 11 цветов, но в них 50 и 950 никак не влияют на основную палитру. Возможно, стоит это пересмотреть) Спасибо за ответ.
Хм, а некоторые цвета же грязнить начинают с черным поверх, например, желтый. Там надо играться с тоном и яркостью, а не просто черный поверх накладывать. Но главный косяк такого подхода — сложно Accessibility/a11y проверять, так как плагины тупят на двойных заливках полупрозрачных. Хотя, надо проверять, вдруг поумнели)) Может, вы тестили?
По идее, чтобы желтый выглядел хорошо, нужно просто создать токен именно для желтого цвета, например, не black 5%, а dark-orange 5% — сейчас проверил, реально работает) Если просто черный накладывать, то уходит в оливковый
Да, черный это условно, даже под нейтральные интерфейсы с синим brand color лучше подобрать что-то из темно синего спектра. Желтый тоже проверил, ярко-красный так же хорошо работает)) Разве что opacity можно немного выше, чем для темного цвета. И под нейтральные кнопки или инпуты надо создавать второй токен оверлея с более нейтральным цветом.
На счет a11y не скажу, не тестил.
Пришел к тому, что в первом слое я не использую группировки по типу: blue, green, neutral, gray и т.п. В первый слой включаются такие же цветовые растяжки, часть их них привязаны к бренду: brand-primary, brand-secondary, brand-accent-01... и часть для success, error и т.п.
Для меня цвета бренда это тоже семантика, в цвета бренда включаются и нейтральные цвета (обычно это brand-secondary), если интерфейс с белым или серым фоном по типу хабра. Но проекты бывают разные, у кого-то вообще может не быть серых кнопок и белого фона, где вместо ч\б secondary растяжки будет растяжка насыщенного оранжевого цвета, соответственно оранжевый фон сай и какие-нибудь зеленые акцентные кнопки на нем.
Дизайн-токены: полный гайд по архитектуре и неймингу c примерами и задачками