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
|
||||
|
||||
Reference in New Issue
Block a user