taskncoffee/taskncoffee-app/docs/STYLE_GUIDE.md

Task&Coffee Style Guide

Complete guide with examples and best practices

Quick reference? See STYLES_CHEATSHEET.md
Color details? See COLOR_PALETTE.md
Back to main? See README.md

---

📦 Using Styles

Import

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

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

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

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

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

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

// Стандартный 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

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

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

// Неоновое свечение при 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" />

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

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

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

---

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

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

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

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

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

.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);
}

После (с использованием стилей):

<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

import { utilityStyles } from '@/lib/styles';

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

Glassmorphism

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

Focus Ring

<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 для интерактивных элементов

---

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

// 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 и неоновую эстетику! 🎉