# Task&Coffee Style Guide

> Complete guide with examples and best practices

**Quick reference?** See [STYLES_CHEATSHEET.md](./STYLES_CHEATSHEET.md)  
**Color details?** See [COLOR_PALETTE.md](./COLOR_PALETTE.md)  
**Back to main?** See [README.md](../README.md)

---

## 📦 Using Styles

### Import
```javascript
import styles from '@/lib/styles';
import { cn } from '@/lib/utils';
```

### Примеры использования

#### 1. Карточки (Cards)

```jsx
// Filled card - основной вариант
<div className={cardStyles.filled}>
  <h3>Card Title</h3>
  <p>Card content...</p>
</div>

// Elevated card с тенью
<div className={cardStyles.elevated}>
  <h3>Important Card</h3>
</div>

// Task card с неоновым эффектом
<div className={cardStyles.taskNeon}>
  <p>Task description</p>
</div>

// Или используя cn helper
import { cn } from '@/lib/utils';

<div className={cn(cardStyles.filled, "additional-class")}>
  Content
</div>
```

#### 2. Кнопки (Buttons)

```jsx
// Primary button
<button className={buttonStyles.primary}>
  Submit
</button>

// Primary с неоновым эффектом
<button className={buttonStyles.primaryNeon}>
  Create Task
</button>

// Secondary button
<button className={buttonStyles.secondary}>
  Cancel
</button>

// Ghost button
<button className={buttonStyles.ghost}>
  Learn More
</button>

// Icon button с неоновым эффектом
<button className={buttonStyles.iconNeon}>
  <Icon />
</button>
```

#### 3. Layouts

```jsx
// Dashboard layout
<div className={layoutStyles.container}>
  <aside className={layoutStyles.sidebar}>
    {/* Sidebar content */}
  </aside>
  <main className={layoutStyles.main}>
    <div className={layoutStyles.content}>
      {/* Main content */}
    </div>
  </main>
</div>

// Grid для карточек
<div className={layoutStyles.gridCards}>
  <Card />
  <Card />
  <Card />
</div>
```

#### 4. Inputs

```jsx
// Стандартный input
<input 
  type="text" 
  className={inputStyles.default}
  placeholder="Enter text..."
/>

// Input с неоновым фокусом
<input 
  type="text" 
  className={inputStyles.neon}
  placeholder="Task name..."
/>

// Search input
<div className="relative">
  <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2" />
  <input 
    type="search" 
    className={inputStyles.search}
    placeholder="Search tasks..."
  />
</div>
```

#### 5. Typography

```jsx
// Headings
<h1 className={textStyles.h1}>Main Title</h1>
<h2 className={textStyles.h2}>Section Title</h2>

// Body text
<p className={textStyles.body}>Regular text</p>
<p className={textStyles.bodyMuted}>Muted text</p>

// Неоновый текст (используется с neon.css)
<span className={cn(textStyles.neonBlue, "sign-inline")}>
  Task&
</span>
<span className={cn(textStyles.neonPink, "sign-pink-inline")}>
  Coffee
</span>
```

#### 6. Badges

```jsx
// Priority badges
<span className={badgeStyles.low}>Low</span>
<span className={badgeStyles.medium}>Medium</span>
<span className={badgeStyles.high}>High</span>
<span className={badgeStyles.critical}>Critical</span>

// Status badges
<span className={badgeStyles.success}>Completed</span>
<span className={badgeStyles.warning}>In Progress</span>
<span className={badgeStyles.error}>Failed</span>
```

---

## ✨ Неоновые эффекты

### CSS классы из neon.css

```jsx
// Неоновое свечение при hover - голубое
<div className="neon-glow-blue bg-card p-4 rounded-lg">
  Card with blue glow on hover
</div>

// Неоновое свечение - розовое
<div className="neon-glow-pink bg-card p-4 rounded-lg">
  Card with pink glow on hover
</div>

// Мягкое свечение
<button className="neon-glow-soft bg-primary px-4 py-2 rounded-lg">
  Subtle glow
</button>

// Неоновая граница
<div className="neon-border-blue p-4 rounded-lg">
  Border with neon effect
</div>

// Неоновый текст (без анимации)
<span className="neon-text-blue">
  Static neon text
</span>

// Иконка с неоновым эффектом
<Icon className="neon-icon" />
```

### Анимированный неоновый текст

```jsx
// Для заголовков и брендинга
<div className="sign-inline">Coffee</div>
<div className="sign-pink-inline">Task&</div>

// Для больших заголовков (fullscreen)
<div className="sign">
  <span>Task&Coffee</span>
</div>
```

---

## 🎭 Комбинирование стилей

### Пример: Карточка задачи с неоновым эффектом

```jsx
import { cn } from '@/lib/utils';
import { cardStyles, badgeStyles, textStyles } from '@/lib/styles';

function TaskCard({ task }) {
  return (
    <div className={cn(
      cardStyles.task,
      "neon-glow-soft",
      task.isToday && "neon-border-blue"
    )}>
      <div className="flex items-center gap-2 mb-2">
        <span className={badgeStyles[task.priority]}>
          {task.priority}
        </span>
        <h3 className={textStyles.small}>
          {task.title}
        </h3>
      </div>
      <p className={textStyles.smallMuted}>
        {task.description}
      </p>
    </div>
  );
}
```

### Пример: Кнопка с неоновым эффектом и иконкой

```jsx
import { PlusIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { buttonStyles } from '@/lib/styles';

function CreateButton() {
  return (
    <button className={cn(
      buttonStyles.primaryNeon,
      "gap-2"
    )}>
      <PlusIcon className="w-4 h-4" />
      Create Task
    </button>
  );
}
```

---

## 🎨 Миграция с dashboard.css на Tailwind

### До (dashboard.css):
```css
.dashboard-task-card {
    background: var(--color-card);
    padding: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
```

### После (с использованием стилей):
```jsx
<div className={cardStyles.task}>
  {/* content */}
</div>

// Или чистый Tailwind:
<div className="bg-card p-3 rounded-lg shadow-sm">
  {/* content */}
</div>
```

---

## 📐 Радиусы округления

Теперь все радиусы синхронизированы:
- `rounded-sm` = `0.25rem` (4px)
- `rounded-md` = `0.375rem` (6px)  
- `rounded-lg` = `0.5rem` (8px) ✅ **Используем для карточек и кнопок**
- `rounded-xl` = `0.75rem` (12px)
- `rounded-2xl` = `1rem` (16px)

Базовый радиус установлен в `--radius: 0.5rem` для консистентности с Material Design 3.

---

## 🔧 Утилиты

### Neon Glow Utilities
```javascript
import { utilityStyles } from '@/lib/styles';

<div className={cn(cardStyles.filled, utilityStyles.glowBlue)}>
  Card with blue glow
</div>
```

### Glassmorphism
```jsx
<div className={cn(utilityStyles.glass, "p-6 rounded-lg")}>
  Glass effect card
</div>
```

### Focus Ring
```jsx
<button className={cn(
  buttonStyles.primary,
  utilityStyles.focusRing
)}>
  Accessible button
</button>
```

---

## 💡 Best Practices

1. **Используйте готовые стили** из `styles.js` для консистентности
2. **Комбинируйте с cn()** для добавления кастомных классов
3. **Неоновые эффекты** используйте умеренно - только для акцентов
4. **Радиусы** - используйте `rounded-lg` для основных элементов
5. **Цвета** - всегда используйте CSS переменные, не хардкодьте цвета
6. **Accessibility** - не забывайте про `focusRing` для интерактивных элементов

---

## 🚀 Быстрый старт

```jsx
// 1. Импортируйте стили
import styles from '@/lib/styles';
import { cn } from '@/lib/utils';

// 2. Используйте в компонентах
function MyComponent() {
  return (
    <div className={styles.layout.container}>
      <div className={styles.card.filled}>
        <h2 className={styles.text.h2}>Title</h2>
        <p className={styles.text.bodyMuted}>Description</p>
        <button className={styles.button.primaryNeon}>
          Action
        </button>
      </div>
    </div>
  );
}
```

Теперь у вас есть полная система стилей, объединяющая Mirage palette, Material Design 3 и неоновую эстетику! 🎉