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
259
taskncoffee-app/docs/COLOR_PALETTE.md
Normal file
259
taskncoffee-app/docs/COLOR_PALETTE.md
Normal file
@@ -0,0 +1,259 @@
|
||||
# 🎨 Task&Coffee Color Palette
|
||||
|
||||
**Usage examples?** See [STYLE_GUIDE.md](./STYLE_GUIDE.md)
|
||||
**Quick reference?** See [STYLES_CHEATSHEET.md](./STYLES_CHEATSHEET.md)
|
||||
**Back to main?** See [README.md](../README.md)
|
||||
|
||||
---
|
||||
|
||||
## Mirage Palette - Visual Guide
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
MIRAGE COLOR SCALE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
50 ░░░░░░░░░ #f4f6fb Lightest - heading text on dark bg
|
||||
100 ▒▒▒▒▒▒▒▒▒ #e7edf7 Card foreground text
|
||||
200 ▓▓▓▓▓▓▓▓▓ #cbd9ec Main foreground text
|
||||
300 ▓▓▓▓▓▓▓▓▓ #9db8dc Muted foreground text
|
||||
────────────────────────────────────────────────────────────
|
||||
400 ████████ #6893c8 PRIMARY ACCENT ⭐
|
||||
500 ████████ #4474b3 Accent hover state
|
||||
────────────────────────────────────────────────────────────
|
||||
600 ████████ #335b96 Secondary, elevated cards
|
||||
700 ████████ #2a4a7a Dark cards alternative
|
||||
800 ████████ #264066 Muted elements, popovers
|
||||
900 ████████ #243756 CARDS ⭐
|
||||
950 ████████ #111928 BACKGROUND (darkest) ⭐
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌟 Semantic Color Mapping
|
||||
|
||||
### Background & Surfaces
|
||||
```
|
||||
--background #111928 (mirage-950) Main app background
|
||||
--card #243756 (mirage-900) Card surfaces
|
||||
--popover #264066 (mirage-800) Floating elements
|
||||
--muted #264066 (mirage-800) Subtle backgrounds
|
||||
--sidebar #111928 (mirage-950) Navigation rail
|
||||
```
|
||||
|
||||
### Foreground & Text
|
||||
```
|
||||
--foreground #cbd9ec (mirage-200) Primary text
|
||||
--card-foreground #e7edf7 (mirage-100) Text on cards
|
||||
--muted-foreground #9db8dc (mirage-300) Secondary text
|
||||
--popover-foreground #e7edf7 (mirage-100) Text in popovers
|
||||
```
|
||||
|
||||
### Interactive Elements
|
||||
```
|
||||
--primary #6893c8 (mirage-400) Primary actions, links
|
||||
--primary-foreground #111928 (mirage-950) Text on primary
|
||||
--secondary #2a4a7a (mirage-700) Secondary actions
|
||||
--accent #4474b3 (mirage-500) Hover states
|
||||
```
|
||||
|
||||
### Borders & Inputs
|
||||
```
|
||||
--border rgba(157, 184, 220, 0.15) Subtle borders
|
||||
--input rgba(157, 184, 220, 0.2) Input borders
|
||||
--ring #6893c8 (mirage-400) Focus ring
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💫 Neon Accent Colors
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
NEON ACCENTS
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🔵 Neon Blue #c6e2ff Light blue with glow effect
|
||||
Glow color: rgba(30, 132, 242, 0.6)
|
||||
|
||||
💗 Neon Pink #ffc5ec Light pink with glow effect
|
||||
Glow color: rgba(255, 20, 147, 0.6)
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Usage by Element Type
|
||||
|
||||
### Text Colors
|
||||
```
|
||||
Headings: mirage-200 (#cbd9ec)
|
||||
Body text: mirage-200 (#cbd9ec)
|
||||
Secondary text: mirage-300 (#9db8dc)
|
||||
Disabled text: mirage-300 (#9db8dc) with opacity
|
||||
```
|
||||
|
||||
### Backgrounds
|
||||
```
|
||||
Page background: mirage-950 (#111928)
|
||||
Card background: mirage-900 (#243756)
|
||||
Hover background: mirage-800 (#264066)
|
||||
Active background: mirage-700 (#2a4a7a)
|
||||
```
|
||||
|
||||
### Buttons
|
||||
```
|
||||
Primary: mirage-400 (#6893c8) bg
|
||||
Primary hover: mirage-500 (#4474b3) bg
|
||||
Secondary: mirage-700 (#2a4a7a) bg
|
||||
Secondary hover: mirage-600 (#335b96) bg
|
||||
Ghost hover: mirage-800 (#264066) bg
|
||||
```
|
||||
|
||||
### Borders
|
||||
```
|
||||
Default: mirage-300 with 15% opacity
|
||||
Input: mirage-300 with 20% opacity
|
||||
Focus: mirage-400 (#6893c8) solid
|
||||
Divider: mirage-800 (#264066)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌈 Color Relationships
|
||||
|
||||
```
|
||||
LIGHT ↑
|
||||
|
||||
┌─────────────────────────────────┐
|
||||
│ mirage-50 │ Lightest text │
|
||||
│ mirage-100 │ Card text │
|
||||
│ mirage-200 │ Main text │
|
||||
│ mirage-300 │ Muted text │
|
||||
├─────────────────────────────────┤
|
||||
│ mirage-400 │ PRIMARY ⭐ │ ← Interactive
|
||||
│ mirage-500 │ Hover state │
|
||||
├─────────────────────────────────┤
|
||||
│ mirage-600 │ Secondary │
|
||||
│ mirage-700 │ Alt cards │
|
||||
│ mirage-800 │ Muted bg │
|
||||
│ mirage-900 │ CARDS ⭐ │ ← Surfaces
|
||||
│ mirage-950 │ BACKGROUND ⭐ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
DARK ↓
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Contrast Ratios (WCAG)
|
||||
|
||||
```
|
||||
Background (950) + Text (200): AAA ✓ (14.2:1)
|
||||
Card (900) + Card Text (100): AAA ✓ (12.8:1)
|
||||
Primary (400) + Primary FG (950): AA ✓ (5.2:1)
|
||||
Muted (800) + Muted Text (300): AA ✓ (4.8:1)
|
||||
```
|
||||
|
||||
All color combinations meet WCAG AA standards minimum! 🎉
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Example Compositions
|
||||
|
||||
### Card with Neon Accent
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ mirage-900 background │
|
||||
│ ┌──────────────────────────┐ │
|
||||
│ │ mirage-100 text │ │
|
||||
│ │ mirage-300 muted text │ │
|
||||
│ │ │ │
|
||||
│ │ [mirage-400 button] │ │
|
||||
│ │ + neon blue glow │ │
|
||||
│ └──────────────────────────┘ │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Primary Button
|
||||
```
|
||||
┌──────────────────────┐
|
||||
│ mirage-400 bg │ ← Background
|
||||
│ mirage-950 text │ ← Text
|
||||
│ + subtle shadow │
|
||||
│ hover: neon glow │ ← Neon effect on hover
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
### Today's Task Column
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ mirage-400/10 background │ ← 10% opacity
|
||||
│ + mirage-400 border (2px) │ ← Solid border
|
||||
│ + neon-blue glow │ ← Glow effect
|
||||
│ │
|
||||
│ Tasks: mirage-900 cards │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Dark Mode Toggle
|
||||
|
||||
When dark mode is active (`.dark` class):
|
||||
|
||||
```
|
||||
Background: mirage-900 → mirage-950
|
||||
Cards: mirage-700 → mirage-900
|
||||
Primary: mirage-300 → mirage-400
|
||||
Text: mirage-100 → mirage-200
|
||||
```
|
||||
|
||||
Currently configured for dark-first design.
|
||||
|
||||
---
|
||||
|
||||
## 💡 Best Practices
|
||||
|
||||
1. **Depth hierarchy:**
|
||||
- Background: mirage-950
|
||||
- Elevated: mirage-900
|
||||
- More elevated: mirage-800
|
||||
|
||||
2. **Text contrast:**
|
||||
- Always use mirage-100/200 for text on dark backgrounds
|
||||
- Use mirage-300 for less important text
|
||||
|
||||
3. **Neon sparingly:**
|
||||
- Use neon effects only for:
|
||||
- Brand elements (logo, headers)
|
||||
- Important CTAs
|
||||
- Today's tasks/current items
|
||||
- Don't overuse - it should feel special
|
||||
|
||||
4. **Accessible focus states:**
|
||||
- Always use mirage-400 for focus rings
|
||||
- Add 3px ring with 50% opacity
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Reference
|
||||
|
||||
| Element | Light Value | Dark Value | Usage |
|
||||
|---------|-------------|------------|-------|
|
||||
| Page BG | `mirage-950` | `mirage-900` | Main background |
|
||||
| Card BG | `mirage-900` | `mirage-700` | Surface |
|
||||
| Text | `mirage-200` | `mirage-100` | Primary text |
|
||||
| Primary | `mirage-400` | `mirage-300` | CTA buttons |
|
||||
| Border | `mirage-300/15%` | `mirage-300/20%` | Dividers |
|
||||
|
||||
---
|
||||
|
||||
**See also:**
|
||||
- `STYLE_GUIDE.md` - Complete style documentation
|
||||
- `STYLES_CHEATSHEET.md` - Quick usage examples
|
||||
- `src/lib/styles.js` - Tailwind class presets
|
||||
|
||||
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`
|
||||
|
||||
371
taskncoffee-app/docs/STYLE_GUIDE.md
Normal file
371
taskncoffee-app/docs/STYLE_GUIDE.md
Normal file
@@ -0,0 +1,371 @@
|
||||
# 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 и неоновую эстетику! 🎉
|
||||
|
||||
Reference in New Issue
Block a user