color-mix(): оттенки бренда без десятка переменных
Смешивание в oklch/srgb и hover-состояния кнопок из одного токена.
Функция `color-mix(in oklch, var(--brand) 80%, white)` генерирует hover и disabled без ручной палитры на 12 оттенков.
Документируйте проценты mix в design tokens, чтобы дизайнер и вёрстка совпадали.
- color-mix() — MDN — Синтаксис и color spaces.
- color-mix — web.dev — Практика с tokens.
Контраст
Проверяйте итоговый mix на WCAG — светлый hover может стать нечитаемым.