Стилизация и темы
Tailwind v4, CSS-переменные и 8 цветовых тем
Основной инструмент — Tailwind CSS v4. CSS Modules допускаются только для сложных анимаций.
Критично: 8 цветовых тем
В проекте 8 тем (ThemeName): warm_gold, cold_tech, premium_mint, lime_growth, rose_mint, sand_mint, violet_ice, olive_pearl. Все определены в src/app/globals.css, выбор пользователя хранится в ThemePreference.
Поэтому все цвета — только через CSS-переменные:
/* ❌ ЗАПРЕЩЕНО */
color: #ff7a1a;
background: rgba(255, 122, 26, 0.15);
/* ✅ ПРАВИЛЬНО */
color: var(--orange);
background: color-mix(in srgb, var(--orange) 15%, transparent);Основные переменные
| Переменная | Роль |
|---|---|
--bg | Фон страницы |
--panel, --card | Панели и карточки |
--line | Границы |
--text, --muted | Текст основной / приглушённый |
--orange, --orange2 | Акцент (в каждой теме свой: от #ff7a1a до мятного/фиолетового) |
--green, --danger | Успех / опасность |
--glow | Свечение |
Полный список и примеры — context/ui-context.md в репо.
Правила
- Проверяй новые стили минимум на темах
warm_gold,cold_tech,premium_mint,violet_ice. - Прозрачность акцентов — через
color-mix(), не rgba с хардкодом. - Кнопки — только UI Kit, никаких собственных стилей кнопок.
- Перед созданием нового компонента проверь, нет ли готового в
src/components/.