The previous implementation had misaligned padding structure:
- Navbar/Footer: padding INSIDE max-width container (max-w-7xl mx-auto px-8)
- Page content: padding OUTSIDE max-width container (px-8 on outer, max-w-7xl inside)
This caused content to have double horizontal spacing and misalign with
the navbar and footer borders.
**Fix:**
Move px-8 from outer container to inner max-w-7xl container on all pages,
matching the navbar and footer pattern.
**Structure (all components now consistent):**
```
<div className="py-12"> <!-- vertical padding only -->
<div className="max-w-7xl mx-auto px-8"> <!-- max-width + horizontal padding -->
<!-- content -->
</div>
</div>
```
Now navbar, main content, and footer all align perfectly at the same
left and right edges.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Ensure consistent spacing and alignment between header, main content, and footer:
- Update Navbar to use max-w-7xl and px-8 (matching Footer)
- Standardize all page containers to use px-8 py-12 padding
- Change home page from max-w-5xl to max-w-7xl for consistency
- Update all 12 pages to use consistent padding (px-8 py-12 instead of p-8)
This creates a unified visual alignment across the entire application,
with all content sections (navbar, main, footer) using the same
max-width (7xl) and horizontal padding (px-8).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive footer component with:
- Four-column responsive layout (About, Resources, Documentation, Community)
- Links to all major features and GitHub repositories
- Copyright notice with dynamic year
- Attribution to Pastel CLI and David Peter
- MIT License link
- Built with acknowledgments
Fix TypeScript compilation errors:
- Remove all references to `comingSoon` property in accessibility/page.tsx
- Remove all references to `comingSoon` property in palettes/page.tsx
- Clean up conditional rendering logic
All features now properly linked and accessible.
Build now completes successfully for Docker deployment.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix API response format mismatches and implement all remaining features:
**API Integration Fixes:**
- Fix ManipulationPanel to use `colors` instead of `results` from API responses
- Fix gradient endpoint to use `gradient` array from API response
- Fix color blindness simulator to use correct field names (`input`/`output` vs `original`/`simulated`)
- Fix text color optimizer request field (`backgrounds` vs `background_colors`)
- Fix method name casing: `simulateColorBlindness` (capital B)
- Add palette generation endpoint integration
**Type Definition Updates:**
- Update GradientData to match API structure with `gradient` array
- Update ColorBlindnessData to use `colors` with `input`/`output`/`difference_percentage`
- Update TextColorData to use `colors` with `textcolor`/`wcag_aa`/`wcag_aaa` fields
- Add PaletteGenerateRequest and PaletteGenerateData types
**Completed Features:**
- Harmony Palettes: Now uses dedicated `/palettes/generate` API endpoint
- Simplified from 80 lines of manual color theory to single API call
- Supports 6 harmony types: monochromatic, analogous, complementary, split-complementary, triadic, tetradic
- Text Color Optimizer: Full implementation with WCAG compliance checking
- Automatic black/white text color selection
- Live preview with contrast ratios
- AA/AAA compliance indicators
- Color Blindness Simulator: Fixed and working
- Shows difference percentage for each simulation
- Side-by-side comparison view
- Gradient Creator: Fixed to use correct API response structure
- Batch Operations: Fixed to extract output colors correctly
**UI Improvements:**
- Enable all accessibility tool cards (remove "Coming Soon" badges)
- Enable harmony palettes card
- Add safety check for gradient state to prevent undefined errors
All features now fully functional and properly integrated with Pastel API.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive accessibility features and color naming:
**Color Utilities (lib/utils/color.ts):**
- getRelativeLuminance() - WCAG 2.1 luminance calculation
- getContrastRatio() - Contrast ratio between two colors
- hexToRgb() - Convert hex to RGB
- checkWCAGCompliance() - AA/AAA compliance checker
- Full WCAG 2.1 specification implementation
**New UI Component:**
- Badge component - Status indicators
- Variants: default, success, warning, destructive, outline
- Used for pass/fail indicators
- Accessible focus states
**Accessibility Pages:**
1. Contrast Checker (/accessibility/contrast)
- Dual color pickers (foreground/background)
- Real-time contrast ratio calculation
- Live text preview with both colors
- WCAG 2.1 compliance display:
- Level AA: Normal text (4.5:1), Large text (3:1), UI (3:1)
- Level AAA: Normal text (7:1), Large text (4.5:1)
- Pass/Fail badges for each criterion
- Swap colors button
- Visual feedback with color-coded results
2. Accessibility Dashboard (/accessibility)
- Overview of all accessibility tools
- Feature cards with icons
- Educational content about WCAG 2.1
- Standards explanation (AA vs AAA)
- Links to each tool
**Named Colors Page (/names):**
- Display all 148 CSS/X11 named colors
- Search by name or hex value
- Sort options (name, hue)
- Responsive grid layout (2-6 columns)
- Click to copy color
- Color name and hex display
- Loading and error states
- Empty state for no results
- Real-time filtering
**Batch Operations Page (/batch):**
- Placeholder "Coming Soon" page
- Feature preview list
- Planned capabilities description
- Professional coming soon message
**Features Implemented:**
- Real WCAG calculations (not approximations)
- Live contrast ratio updates
- Interactive color swapping
- Comprehensive compliance checking
- Educational content
- Named colors from API
- Search and filtering
- Responsive layouts
**Build Status:**
✅ 11 pages successfully rendering
✅ All TypeScript checks passing
✅ No build errors
All major sections now have functional or placeholder pages!
Next: Polish, testing, and additional enhancements.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
