Применение дизайн-системы Twilight

Контекст

Применена дизайн-система Twilight к проекту PhotoPlaces. Заменены текущие стили на новые токены из photoplaces_twilight-design-system.md.

Что изменено

Tailwind Config

Добавлены кастомные цвета: primary, secondary, accent, neutral
Добавлены функциональные цвета: success, warning, error, info
Добавлены кастомные шрифты: heading, body, mono
Добавлены размеры шрифтов от xs до 5xl
Добавлены кастомные отступы, border-radius, shadows
Добавлены анимации: fade-in, slide-up, slide-down, scale-in

CSS-переменные

Добавлены переменные для light/dark тем
Добавлены цвета, типографика, отступы, переходы
Добавлены utility-классы: bg-glass, bg-glass-strong, text-gradient

Компоненты

Компонент	Изменения
Header	Sticky навигация, новые цвета, навигационные ссылки
LoginModal	Анимации, лейблы, новые цвета
RegisterModal	Лейблы, структура, новые цвета
AddLocationModal	Анимации, новые цвета
PlaceForm	Лейблы, новые цвета, переходы
MapView	Новые цвета, анимации
MapPicker	Новые цвета, шрифт для координат

Ключевые решения

Убран плагин tailwindcss-animate — не установлен в системе
Системный шрифт — Inter не подгружается, используется -apple-system
Анимации — CSS keyframes вместо плагина
Цвета — кастомные палитры вместо стандартных Tailwind

Проблемы

npm/yarn/pnpm не установлены в системе
Невозможно запустить typecheck или dev-сервер
Интерфейс не проверен визуально

Связанные заметки

[[photoplaces_twilight-design-system]]
[[design-system-generator-skill]]

Источник

Задача: применить дизайн-систему Twilight к проекту.

#design-system #twilight #tailwind #css #implementation