Commit Graph

4 Commits

Author SHA1 Message Date
valknarness
0ac49c0600 feat: implement missing features and improvements
Add comprehensive feature set and fixes:

**Theme Improvements:**
- Fix theme flickering by adding blocking script in layout
- Prevents FOUC (Flash of Unstyled Content)
- Smooth transitions between light and dark modes

**Tailwind CSS v4 Migration:**
- Convert globals.css to Tailwind CSS v4 format
- Use @import "tailwindcss" instead of @tailwind directives
- Implement @theme block with OkLCH color space
- Add @plugin directives for forms and typography
- Use :root and .dark class-based theming
- Add all custom animations in CSS
- Create postcss.config.mjs with @tailwindcss/postcss

**Dev Environment:**
- Add .env.local with API on port 3001
- Add dev:api and dev:all scripts to package.json
- Create .env for API with port 3001 configuration
- Enable running both UI and API simultaneously

**New Features Implemented:**

1. **Harmony Palettes** (app/palettes/harmony/page.tsx)
   - Generate color harmonies based on color theory
   - Support for 6 harmony types:
     - Monochromatic
     - Analogous (±30°)
     - Complementary (180°)
     - Split-complementary
     - Triadic (120° spacing)
     - Tetradic/Square (90° spacing)
   - Uses complement and rotate API endpoints
   - Export harmonies in multiple formats

2. **Color Blindness Simulator** (app/accessibility/colorblind/page.tsx)
   - Simulate 3 types of color blindness:
     - Protanopia (red-blind, ~1% males)
     - Deuteranopia (green-blind, ~1% males)
     - Tritanopia (blue-blind, rare)
   - Side-by-side comparison of original vs simulated
   - Support for multiple colors (up to 10)
   - Educational information about each type
   - Accessibility tips and best practices

3. **Batch Operations** (app/batch/page.tsx)
   - Process up to 100 colors at once
   - Text input (line-separated or comma-separated)
   - 5 operations supported:
     - Lighten/Darken
     - Saturate/Desaturate
     - Rotate hue
   - Adjustable amount slider
   - Export processed colors
   - Live validation and color count

**API Query Hooks:**
- Add useSimulateColorBlindness hook
- Add useTextColor hook
- Export ColorBlindnessRequest and TextColorRequest types

**Files Added:**
- postcss.config.mjs
- .env.local
- ../pastel-api/.env
- app/accessibility/colorblind/page.tsx
- app/palettes/harmony/page.tsx

**Files Modified:**
- app/globals.css (Tailwind v4 migration)
- app/layout.tsx (theme flicker fix)
- app/batch/page.tsx (functional implementation)
- lib/api/queries.ts (new hooks)
- package.json (dev scripts)
- tailwind.config.ts (simplified, CSS-first)

All features build successfully and are ready for testing.
Development server can now run with API via `pnpm dev:all`.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 13:47:16 +01:00
valknarness
74ba6cf47d fix: tailwind 2025-11-07 13:32:17 +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
bd05f109b4 feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4
Add complete project structure and foundation:

**Core Setup:**
- Next.js 15.5.6 with App Router and React 19
- TypeScript 5.7 with strict mode
- Tailwind CSS 4.1 with custom theme configuration
- ESLint and Prettier configuration

**Dependencies Installed:**
- @tanstack/react-query - Server state management
- zustand - Client state management
- framer-motion - Animations
- lucide-react - Icon library
- react-colorful - Color picker component
- cmdk - Command palette
- sonner - Toast notifications
- clsx + tailwind-merge - Class name utilities

**Project Structure:**
- app/ - Next.js App Router pages
- components/ - React components (ui, color, tools, layout, providers)
- lib/ - Utilities, API client, hooks, stores, constants
- tests/ - Unit and E2E test directories

**API Integration:**
- Type-safe Pastel API client with all 21 endpoints
- Complete TypeScript type definitions for requests/responses
- Error handling and response types

**UI Components:**
- Button component with variants (default, outline, ghost, destructive)
- Input component with focus states
- Providers wrapper (React Query, Toast)
- Root layout with Inter font and metadata

**Pages:**
- Home page with gradient hero and feature cards
- Links to playground and palette generation (pages pending)

**Configuration:**
- Tailwind with HSL color variables for theming
- Dark/light mode CSS variables
- Custom animations (fade-in, slide-up, slide-down)
- @tailwindcss/forms and @tailwindcss/typography plugins

Build successful: 102 kB First Load JS, static generation working.

Ready for color components and playground implementation.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00