valknarness 173d81d9d4 feat: implement color playground with interactive picker and info display ...

Add complete color manipulation interface:

**Color Components:**
- ColorPicker - Interactive hex color picker with text input
  - Uses react-colorful for visual selection
  - Manual input support for any color format
  - Real-time updates

- ColorDisplay - Large color preview swatch
  - Configurable sizes (sm, md, lg, xl)
  - Optional border styling
  - Accessible with ARIA labels

- ColorInfo - Comprehensive color information display
  - Shows all formats: Hex, RGB, HSL, Lab, OkLab
  - Copy to clipboard functionality for each format
  - Displays brightness, luminance, light/dark type
  - Shows named color matches

**API Integration:**
- React Query hooks for all Pastel API endpoints
  - useColorInfo - Get color information
  - useConvertFormat - Format conversion
  - useLighten, useDarken, useSaturate, etc. - Manipulations
  - useGenerateRandom, useGenerateDistinct, useGenerateGradient
  - useNamedColors - Cached named colors list
  - Automatic error handling and loading states

**Playground Page (/playground):**
- Two-column layout: picker + info
- Live color preview with large swatch
- Real-time API integration with loading states
- Error handling with user-friendly messages
- Quick action buttons (ready for implementation)
- Responsive grid layout

**Features:**
- Toast notifications for clipboard copy
- Loading spinners during API calls
- Error display with helpful messages
- Accessible keyboard navigation
- Smooth transitions and animations

Build successful with playground page rendering! Ready for color manipulation actions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-07 11:05:23 +01:00

5.1 KiB

Raw Blame History

View Raw