valknar/pastel-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
30 Commits 1 Branch 0 Tags
main
Commit Graph

4 Commits

Author SHA1 Message Date
valknarness
fd2cea8f47 fix: resolve hydration errors in playground 
- Fix nested button error in color history by using div with role=button
- Add keyboard accessibility (Enter/Space) to color history swatches
- Add type guard for ColorInfo.name to handle object values
- Add aria-label to remove button for better accessibility

Fixes React hydration errors and improves accessibility.
 2025-11-07 13:53:23 +01:00
valknarness
41d463873e feat: add comprehensive visual improvements and polished UI 
Major visual enhancements for professional look and feel:

**New Components:**
- Skeleton component for loading states
  - Pulse animation
  - Reusable for any content type
  - Consistent styling

**Enhanced Animations:**
- Added 8 new custom animations:
  - fade-in (smoother 0.3s)
  - slide-up/down (enhanced 0.4s)
  - slide-in-right/left (directional)
  - scale-in (zoom effect)
  - bounce-gentle (subtle bounce)
  - shimmer (loading effect)

**Global Visual Improvements:**
- Smooth theme transitions (200ms cubic-bezier)
- Custom scrollbar styling with hover states
- Smooth scroll behavior enabled
- Theme transitioning class to prevent flash
- Better transition timing functions

**Component Enhancements:**

1. Home Page:
   - Staggered fade-in animations (0s, 0.1s, 0.2s-0.4s delays)
   - Scale animations on feature cards
   - Hover effects with shadow and border color change
   - Responsive padding adjustments
   - Enhanced button hover (scale + shadow)

2. ColorSwatch:
   - Improved hover scale (105% → 110%)
   - Added shadow on hover
   - Backdrop blur on overlay
   - Active state scale down (95%)
   - Smoother transitions (200ms)
   - Scale-in animation for copy icon

3. Button Component:
   - Active state scale down effect
   - Shadow on hover for primary/destructive
   - Border color change on outline hover
   - Smoother transitions (200ms)
   - Focus ring offset for better visibility

**Micro-interactions:**
- All buttons have active:scale-95
- Cards lift on hover with shadows
- Smooth color transitions on theme switch
- Icons animate on appearance
- Links scale up on hover

**Visual Consistency:**
- Consistent timing (200ms for interactions)
- Unified hover patterns across components
- Standardized shadow depths
- Better focus indicators
- Smooth scroll throughout

**Performance:**
- No janky transitions
- Optimized animations (transform + opacity)
- Hardware-accelerated properties
- Minimal repaints

The UI now feels polished, professional, and delightful to use!

Build successful - all visual enhancements working.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-07 12:04:46 +01:00
valknarness
c3745bd6b7 feat: implement palette generation features 
Add complete palette generation system with multiple methods:

**New Components:**
- ColorSwatch component - Individual color display
  - Click to copy to clipboard
  - Hover effects with copy icon
  - Configurable sizes (sm, md, lg)
  - Optional color label display
  - Check icon on successful copy

- PaletteGrid component - Grid display for color palettes
  - Responsive grid layout (3-6 columns)
  - Click handler for color selection
  - Empty state message
  - Flexible and reusable

- Select component - Dropdown selector
  - Consistent styling with other inputs
  - Optional label support
  - Keyboard accessible
  - Focus ring styling

**Palette Pages:**

1. Gradient Creator (/palettes/gradient)
   - Multiple color stop editor (add/remove)
   - Configurable step count (2-1000)
   - Color space selection (RGB, HSL, Lab, LCH, OkLab, OkLCH)
   - Live gradient preview bar
   - Full palette grid display
   - Interactive color pickers for each stop
   - Real-time generation

2. Distinct Colors (/palettes/distinct)
   - Count selector (2-100 colors)
   - Distance metric selection (CIE76, CIEDE2000)
   - Simulated annealing algorithm
   - Statistics display:
     - Minimum distance
     - Average distance
     - Generation time
   - Loading state with progress message
   - Quality metrics for generated palette

3. Palettes Dashboard (/palettes)
   - Overview of all palette generators
   - Feature cards with icons
   - "Coming Soon" badge for harmony palettes
   - Quick navigation to each generator
   - Feature highlights for each method

**Features:**
- All palette generators integrated with Pastel API
- Toast notifications for success/error
- Loading states during generation
- Copy colors to clipboard
- Responsive layouts
- Empty states
- Error handling

**API Integration:**
- useGenerateGradient mutation
- useGenerateDistinct mutation
- Proper error handling and loading states
- Result caching with React Query

Build successful! 3 new palette pages rendering.

Next: Harmony palettes, accessibility tools, and named colors.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-07 11:38:20 +01:00
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