taskncoffee/taskncoffee-app/docs/STYLES_CHEATSHEET.md

Task&Coffee Styles Cheatsheet 🎨

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

Full guide? See STYLE_GUIDE.md
Color reference? See COLOR_PALETTE.md
Back to main? See README.md

---

Импорт

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

---

📦 Карточки

<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>

---

🔘 Кнопки

<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

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

---

🏷️ Badges

<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)

<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

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

---

📐 Layout

<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

<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

// 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

background: var(--color-background);
color: var(--color-foreground);
background: var(--color-card);
color: var(--color-primary);
border: 1px solid var(--color-border);

В Tailwind

<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">

---

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

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

---

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

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