Палитра
Дизайн-токены темы: RGB-триплеты в CSS-переменных, поэтому работают alpha-утилиты. Переключайте режим и акцент — страница реагирует вживую.
Живые токены: режим и акцент применяются мгновенно
Семантические цвета
6Пара «цвет + fg» для контрастного текста поверх: --ui-primary-fg. Рамка карточки переливается её собственной парой по наведению.
Поверхности
6Альфа-утилиты
Триплеты позволяют модификаторы прозрачности на любой утилите: bg-primary/25, text-primary/60.
text-primary/60
Акценты
7data-accent — атрибут на <html>--ui-primary — перекрывает в обеих темах. Рамка каждой карточки — её собственный цвет; выбранный акцент отмечен кольцом. Выбор — в ThemeSettings выше.
Градиентные фичи
Переливы красятся переменными пары цветов — дефолт primary↔secondary, потребитель перекрывает их без правки компонентов. Все демо ниже реагируют на тему и акцент.
flow-border
Рамка переливается всегда; заливка лица не трогается
flow-border-hover
Рамка + свечение тени по hover
Своя пара
Потребитель перекрывает пару: розовый ↔ голубой
Своя картинка
Полная замена градиента: 4 стопа, как dev-карточки главной
Соседние витрины
QA: тема system (system) · акцент · триплеты читаются из computed-стилей html