Design Tokens

Общие сведения

Проект использует Nuxt UI v3 поверх Tailwind CSS 4. Кастомных дизайн-токенов минимум --- основная палитра и типографика определяются конфигурацией Nuxt UI и переопределениями в CSS.

Цветовая палитра

Настроена в app/app.config.ts:

ui: {
  colors: {
    primary: 'blue',   // Tailwind blue palette
    neutral: 'slate',  // Tailwind slate palette
  }
}

• primary (blue) --- основной акцентный цвет: кнопки, ссылки, активные элементы, бейджи.
• neutral (slate) --- фоны, бордеры, текст приглушённых элементов.
• Семантические цвета (из Nuxt UI): success, warning, error, info --- используются в UBadge, UAlert, UButton.

Дополнительно в коде активно используются CSS-переменные Nuxt UI:

Переменная	Назначение
--ui-primary	Акцентный цвет
--ui-text	Основной текст
--ui-text-muted	Приглушённый текст
--ui-text-dimmed	Максимально приглушённый текст
--ui-text-highlighted	Выделенный текст (цены)
--ui-bg	Основной фон
--ui-bg-elevated	Приподнятый фон (hover, карточки)
--ui-border	Бордер

Типографика

Кастомных шрифтов не подключено --- используется системный стек Tailwind CSS.

Базовый размер шрифта --- стандартные 16px (без переопределений).

SCSS Design Tokens

Типографические токены определены в app/assets/styles/abstracts/_typography.scss и доступны глобально через Vite additionalData:

Размеры шрифтов:

Токен	Значение	Применение
$font-size-xs	0.75rem (12px)	Метки, подсказки, мета-информация
$font-size-sm	0.875rem (14px)	Основной текст интерфейса
$font-size-base	1rem (16px)	Базовый размер
$font-size-md	1.125rem (18px)	Подзаголовки
$font-size-lg	1.25rem (20px)	Цены в карточках
$font-size-xl	1.5rem (24px)	Заголовки секций
$font-size-2xl	1.875rem (30px)	Крупные заголовки
$font-size-3xl	2.25rem (36px)	Hero-заголовки

Fluid-заголовки (responsive, clamp):

Элемент	Mobile	Desktop	Wireframes
h1	2rem (32px)	2.25rem (36px)	32–36px
h2	1.5rem (24px)	1.75rem (28px)	24–28px
h3	1.125rem (18px)	1.25rem (20px)	18–20px

Fluid-размеры задаются через SCSS-функцию fluid-type(), которая генерирует CSS clamp() с автоматическим пересчётом между viewport 320px и 1280px.

Правило: во всех стилях используются только rem единицы и SCSS-функции (px-to-rem(), fluid-type()), никогда px.

SCSS-функции (abstracts)

Функция	Назначение
px-to-rem($px)	Конвертация px в rem (base 16px)
fluid-type($min, $max)	CSS clamp() для responsive типографики
strip-unit($value)	Убирает единицу измерения

Функции доступны глобально --- Vite инжектирует @use "~/assets/styles/abstracts" as *; в каждый SCSS-контекст.

Tailwind-утилиты (по-прежнему используются в templates)

Класс	Где применяется
text-3xl font-bold	Заголовки страниц (h1)
text-2xl font-bold	Заголовки секций (h2)
text-xl font-bold	Цены в карточках
text-sm	Основной текст в интерфейсе, сообщения чата
text-xs	Метки, подсказки, мета-информация, footer-ссылки

Отступы и spacing

SCSS-токены

Определены в app/assets/styles/abstracts/_spacing.scss на основе 8px-сетки:

Токен	Значение
$spacer-1	0.25rem (4px)
$spacer-2	0.5rem (8px)
$spacer-3	0.75rem (12px)
$spacer-4	1rem (16px)
$spacer-6	1.5rem (24px)
$spacer-8	2rem (32px)
$spacer-12	3rem (48px)

Tailwind-утилиты

Стандартная система Tailwind CSS (кратные 0.25rem). Типичные значения:

Значение	Применение
gap-1 (0.25rem)	Между мелкими элементами (иконка + текст)
gap-2 (0.5rem)	Между элементами формы в ряду
gap-3 (0.75rem)	Между группами полей
gap-6 (1.5rem)	Между секциями формы, sidebar + контент
p-3 / p-4	Внутренние отступы карточек
py-3	Вертикальные отступы хедера
mb-6	Отступ под заголовком страницы

Скругления

Класс	Применение
rounded-lg	Карточки, дропдауны, модалки
rounded-2xl	Пузыри сообщений в чате
rounded-full	Аватарки, бейджи непрочитанных
rounded-md	Миниатюры в списке диалогов

Брейкпоинты

Стандартные Tailwind CSS:

Префикс	Ширина	Использование
sm	640px	Горизонтальный layout форм YMM-селектора
md	768px	Переключение mobile/desktop навигации, показ sidebar
lg	1024px	Увеличение padding контейнера

Тёмная тема

Поддерживается через colorMode в nuxt.config.ts:

colorMode: {
  preference: 'system',
  fallback: 'light',
}

Переключение реализовано компонентом UColorModeButton в хедере. Dark-вариации задаются через Tailwind-префикс dark:.

Иконки

Используются два набора через UIcon, установлены локально (@iconify-json/*):

• Lucide (i-lucide-*) --- основной набор (search, heart, settings, user, и т.д.)
• Heroicons (i-heroicons-*) --- дополнительный (photo, users, book-open)

Локализация UI

Nuxt UI использует русскую локаль:

<UApp :locale="ru">

Импортируется из @nuxt/ui/locale.