Идея понятна — кнопка outline, и при ховере хочется намёк на фон, который не «заполняет» её полностью.
Варианты:
1. Фон с низкой opacity
hover:bg-foreground/8 — очень тонкий слой основного цвета. Кнопка остаётся outline, но появляется едва заметная подложка. Нейтрально и аккуратно.
2. Фон из muted
hover:bg-muted — использует уже существующий токен поверхности. Чуть теплее и чуть светлее фона страницы. Мягко, в рамках системы.
3. Текущий opacity + тонкий фон
hover:opacity-70 hover:bg-foreground/8 — комбо: кнопка тускнеет и одновременно появляется лёгкий фон. Самый тактильный эффект из трёх.
Моя рекомендация — вариант 1. Причины:
bg-foreground/8 именно намекает, а не заполняетhover:bg-background/10Что скажешь?
Заменил hover:opacity-70 на hover:bg-foreground/8 во всех трёх местах. В CTA (тёмный фон) использую hover:bg-background/8 — логически зеркальный вариант. Кнопка остаётся outline, но появляется едва заметная подложка, которая даёт тактильный отклик без трансформации в primary.