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

3 Commits

Author SHA1 Message Date
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
764ac90e60 feat: implement accessibility tools and named colors explorer 
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>
 2025-11-07 11:42:55 +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