Enhance documentation and styling system with Mirage Palette, Material Design 3, and Neon accents. Add comprehensive style guide, color palette, and cheatsheet for improved developer experience.
This commit is contained in:
IluaAir
244
taskncoffee-app/docs/STYLES_CHEATSHEET.md
Normal file
244
taskncoffee-app/docs/STYLES_CHEATSHEET.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# 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`
|
||||
|
||||
Reference in New Issue
Block a user