0ac49c0600
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>
63 lines
1.9 KiB
JSON
63 lines
1.9 KiB
JSON
{
|
|
"name": "pastel-ui",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"description": "Modern web UI for color manipulation, palette generation, and accessibility analysis",
|
|
"author": "valknarness",
|
|
"license": "MIT",
|
|
"packageManager": "pnpm@10.20.0",
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"dev:turbo": "next dev --turbopack",
|
|
"dev:api": "cd ../pastel-api && cargo run",
|
|
"dev:all": "pnpm run dev:api & pnpm run dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"lint:fix": "next lint --fix",
|
|
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
"type-check": "tsc --noEmit",
|
|
"test": "vitest",
|
|
"test:ui": "vitest --ui",
|
|
"test:e2e": "playwright test",
|
|
"test:e2e:ui": "playwright test --ui",
|
|
"analyze": "ANALYZE=true next build"
|
|
},
|
|
"dependencies": {
|
|
"@tanstack/react-query": "^5.62.11",
|
|
"clsx": "^2.1.1",
|
|
"cmdk": "^1.0.4",
|
|
"framer-motion": "^11.15.0",
|
|
"lucide-react": "^0.468.0",
|
|
"next": "^16.0.1",
|
|
"react": "^19.2.0",
|
|
"react-colorful": "^5.6.1",
|
|
"react-dom": "^19.2.0",
|
|
"sonner": "^1.7.1",
|
|
"tailwind-merge": "^2.5.5",
|
|
"zustand": "^5.0.2"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "^1.49.1",
|
|
"@tailwindcss/forms": "^0.5.9",
|
|
"@tailwindcss/postcss": "^4.1.17",
|
|
"@tailwindcss/typography": "^0.5.15",
|
|
"@testing-library/react": "^16.1.0",
|
|
"@testing-library/user-event": "^14.5.2",
|
|
"@types/node": "^22.10.2",
|
|
"@types/react": "^19.0.1",
|
|
"@types/react-dom": "^19.0.2",
|
|
"@typescript-eslint/eslint-plugin": "^8.46.3",
|
|
"@typescript-eslint/parser": "^8.46.3",
|
|
"@vitest/ui": "^2.1.8",
|
|
"eslint": "^9.17.0",
|
|
"eslint-config-next": "^15.1.3",
|
|
"postcss": "^8.4.49",
|
|
"prettier": "^3.4.2",
|
|
"tailwindcss": "^4.0.0",
|
|
"typescript": "^5.7.2",
|
|
"vitest": "^2.1.8",
|
|
"webpack-bundle-analyzer": "^4.10.2"
|
|
}
|
|
}
|