Стилизация

Приложение использует NativeWind v4 — Tailwind CSS для React Native.

Настройка

global.css

Подключает Tailwind директивы и определяет CSS-переменные цветов:

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

Расширяет стандартные цвета через CSS-переменные:

module.exports = {
  content: ['./app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        background: 'rgb(var(--color-background) / <alpha-value>)',
        // ...
      },
    },
  },
};

Цветовая система

Единый источник правды: src/core/theme/colors.ts.

Основные цвета

Токен	Значение	Использование
Primary	#0077F0	CTA, акценты, основные действия
Primary Hover	#0060C2	Нажатие на primary
Success	#6AB53A	Завершено, AI включен
Warning	#D86D3F	Ожидание, AI выключен
Error	#E53E3E	Ошибки, деструктивные действия

Цвета мессенджеров

Мессенджер	Цвет
Telegram	#0088CC
Instagram	#E4405F
WhatsApp	#25D366

Шрифт

Inter (400, 500, 600, 700) — загружается через @expo-google-fonts/inter.

Темы (Light / Dark)

ThemeProvider из src/core/theme/provider.tsx управляет переключением тем. Настройка персистится в AsyncStorage через Zustand store.

Использование

// Light/dark варианты через NativeWind
<View className="bg-white dark:bg-gray-900">
  <Text className="text-gray-900 dark:text-white">
    Контент
  </Text>
</View>

CVA (Class Variance Authority)

Для компонентов с вариантами используется class-variance-authority:

import { cva } from 'class-variance-authority';

const buttonVariants = cva('rounded-lg items-center justify-center', {
  variants: {
    variant: {
      primary: 'bg-primary',
      secondary: 'bg-gray-200 dark:bg-gray-700',
      destructive: 'bg-error',
    },
    size: {
      sm: 'h-8 px-3',
      md: 'h-10 px-4',
      lg: 'h-12 px-6',
    },
  },
  defaultVariants: {
    variant: 'primary',
    size: 'md',
  },
});

Утилиты стилей

• clsx — условное объединение классов
• tailwind-merge — умное объединение Tailwind-классов (разрешение конфликтов)

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}

Тени

Вариант	Elevation	Opacity
Card	2px	6%
Elevated	4px	12%
Floating	8px	15%

Градиенты

Предопределённые градиенты используются через expo-linear-gradient:

Название	Использование
blue	Основные кнопки
blueHorizontal	Горизонтальный акцент
authDiagonal	Фон авторизации
green	Успешные действия
hero	Hero-секции

Glassmorphism

Таб-бар использует glassmorphism эффект через expo-blur:

<BlurView intensity={80} tint="light" className="absolute inset-0" />

Haptic-паттерны

Действие	Тип
Отправка сообщения	Light impact
Получение сообщения	Light impact
Добавление реакции	Success notification
Long press	Medium impact
Swipe to reply	Selection tick
Удаление сообщения	Warning notification