taskncoffee/taskncoffee-app/docs/STYLES_CHEATSHEET.md

# Task&Coffee Styles Cheatsheet 🎨

Быстрая справка по использованию стилей в проекте.

**Full guide?** See [STYLE_GUIDE.md](./STYLE_GUIDE.md)  
**Color reference?** See [COLOR_PALETTE.md](./COLOR_PALETTE.md)  
**Back to main?** See [README.md](../README.md)

---

## Импорт

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

---

## 📦 Карточки

```jsx
<div className={styles.card.filled}>Basic card</div>
<div className={styles.card.elevated}>Elevated card</div>
<div className={styles.card.task}>Task card</div>
<div className={styles.card.taskNeon}>Task card with glow</div>
```

---

## 🔘 Кнопки

```jsx
<button className={styles.button.primary}>Primary</button>
<button className={styles.button.primaryNeon}>Primary Neon</button>
<button className={styles.button.secondary}>Secondary</button>
<button className={styles.button.outline}>Outline</button>
<button className={styles.button.ghost}>Ghost</button>
<button className={styles.button.destructive}>Delete</button>
<button className={styles.button.icon}>🔍</button>
<button className={styles.button.iconNeon}>✨</button>
```

---

## 📝 Inputs

```jsx
<input className={styles.input.default} />
<input className={styles.input.neon} />
<input className={styles.input.search} />
```

---

## 🏷️ Badges

```jsx
<span className={styles.badge.low}>Low</span>
<span className={styles.badge.medium}>Medium</span>
<span className={styles.badge.high}>High</span>
<span className={styles.badge.critical}>Critical</span>
<span className={styles.badge.success}>Success</span>
<span className={styles.badge.warning}>Warning</span>
<span className={styles.badge.error}>Error</span>
```

---

## ✨ Neon Effects (CSS Classes)

```jsx
<div className="neon-glow-blue">Blue glow on hover</div>
<div className="neon-glow-pink">Pink glow on hover</div>
<div className="neon-glow-soft">Soft glow</div>
<div className="neon-border-blue">Blue neon border</div>
<div className="neon-border-pink">Pink neon border</div>
<span className="neon-text-blue">Blue neon text</span>
<span className="neon-text-pink">Pink neon text</span>
<Icon className="neon-icon" />
```

---

## 🎭 Neon Animated Text

```jsx
<span className="sign-inline">Task&Coffee</span>
<span className="sign-pink-inline">Task&Coffee</span>
```

---

## 📐 Layout

```jsx
<div className={styles.layout.container}>
  <aside className={styles.layout.sidebar}>Sidebar</aside>
  <main className={styles.layout.main}>
    <div className={styles.layout.content}>Content</div>
  </main>
</div>

<div className={styles.layout.gridCards}>Cards grid</div>
```

---

## 🔤 Typography

```jsx
<h1 className={styles.text.h1}>Heading 1</h1>
<h2 className={styles.text.h2}>Heading 2</h2>
<p className={styles.text.body}>Body text</p>
<p className={styles.text.bodyMuted}>Muted text</p>
<small className={styles.text.small}>Small text</small>
```

---

## 🛠️ Utilities

```jsx
// Glow effects
<div className={styles.utility.glowBlue}>Blue glow</div>
<div className={styles.utility.glowPink}>Pink glow</div>
<div className={styles.utility.glowSoft}>Soft glow</div>

// Glass effect
<div className={styles.utility.glass}>Glassmorphism</div>

// Transitions
<div className={styles.utility.transition}>Smooth</div>
<div className={styles.utility.transitionSlow}>Slow</div>

// Focus ring
<button className={styles.utility.focusRing}>Accessible</button>
```

---

## 🎨 Цветовые переменные

### В CSS
```css
background: var(--color-background);
color: var(--color-foreground);
background: var(--color-card);
color: var(--color-primary);
border: 1px solid var(--color-border);
```

### В Tailwind
```jsx
<div className="bg-background text-foreground">
<div className="bg-card text-card-foreground">
<div className="bg-primary text-primary-foreground">
<div className="border border-border">
```

---

## 🔄 Комбинирование

```jsx
import { cn } from '@/lib/utils';

<div className={cn(
  styles.card.task,
  "neon-glow-soft",
  isActive && "neon-border-blue"
)}>
  Combined styles
</div>
```

---

## 📏 Радиусы

- `rounded-lg` = **0.5rem** ← используем для кнопок и карточек
- `rounded-xl` = 0.75rem
- `rounded-2xl` = 1rem

---

## 🎯 Полный пример компонента

```jsx
import styles from '@/lib/styles';
import { cn } from '@/lib/utils';

function TaskCard({ task, isToday }) {
  return (
    <div className={cn(
      styles.card.task,
      "neon-glow-soft",
      isToday && "neon-border-blue"
    )}>
      <div className="flex items-center gap-2">
        <span className={styles.badge[task.priority]}>
          {task.priority}
        </span>
        <h3 className={styles.text.small}>{task.title}</h3>
      </div>
      <p className={styles.text.smallMuted}>{task.description}</p>
      <button className={styles.button.primaryNeon}>
        Complete
      </button>
    </div>
  );
}
```

---

## 🌈 Mirage Colors

| Name | Hex | Usage |
|------|-----|-------|
| mirage-950 | `#111928` | Background (darkest) |
| mirage-900 | `#243756` | Cards |
| mirage-800 | `#264066` | Muted elements |
| mirage-700 | `#2a4a7a` | Secondary |
| mirage-600 | `#335b96` | Elevated cards |
| mirage-500 | `#4474b3` | Accent hover |
| mirage-400 | `#6893c8` | Primary accent |
| mirage-300 | `#9db8dc` | Muted text |
| mirage-200 | `#cbd9ec` | Main text |
| mirage-100 | `#e7edf7` | Card text |
| mirage-50 | `#f4f6fb` | Lightest text |

---

## 💡 Tips

1. Используйте готовые стили из `styles.js`
2. Комбинируйте с `cn()` для кастомизации
3. Неон - только для акцентов!
4. Всегда используйте CSS переменные
5. `rounded-lg` для консистентности

**Полная документация:** См. `STYLE_GUIDE.md`