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

3 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
89bd011537 feat: add comprehensive export functionality for palettes 
Implement full palette export system with multiple formats:

**Export Utilities (lib/utils/export.ts):**
- exportAsCSS() - CSS custom properties (:root variables)
- exportAsSCSS() - SCSS variables ($color-name format)
- exportAsTailwind() - Tailwind config module export
- exportAsJSON() - Structured JSON with color objects
- exportAsJavaScript() - JavaScript array of colors
- downloadAsFile() - Browser download helper
- ExportColor interface for typed exports

**ExportMenu Component:**
- Format selector dropdown (5 formats)
- Live preview of export code
- Syntax-highlighted code display
- Copy to clipboard button
- Download as file button
- Success feedback (Check icon + toast)
- Responsive layout
- Conditional rendering (empty state)

**Export Formats:**

1. CSS Variables:
   ```css
   :root {
     --color-1: #ff0099;
     --color-2: #0099ff;
   }
   ```

2. SCSS Variables:
   ```scss
   $color-1: #ff0099;
   $color-2: #0099ff;
   ```

3. Tailwind Config:
   ```js
   module.exports = {
     theme: {
       extend: {
         colors: {
           'color-1': '#ff0099',
         },
       },
     },
   };
   ```

4. JSON:
   ```json
   {
     "colors": [
       { "name": "color-1", "hex": "#ff0099" }
     ]
   }
   ```

5. JavaScript Array:
   ```js
   const colors = ['#ff0099', '#0099ff'];
   ```

**Integration:**
- Added to Gradient Creator page
- Added to Distinct Colors page
- Conditional rendering (shows only when colors exist)
- Proper spacing and layout

**Features:**
- Real-time preview of generated code
- Copy with toast notification
- Download with proper file extensions
- Format-specific filenames
- Clean, readable output
- Proper indentation and formatting

**User Experience:**
- Select format from dropdown
- See live preview immediately
- One-click copy or download
- Success feedback
- Professional code formatting

Build successful! Export functionality working on all palette pages.

Next: Keyboard shortcuts and URL sharing.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-07 12:19:52 +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