372 lines
8.4 KiB
Markdown
372 lines
8.4 KiB
Markdown
# 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 и неоновую эстетику! 🎉
|
||
|