|
|
dab40c0653
|
fix(design): implement DESIGN.md color system compliance across all UI/UX
Resolved critical design system inconsistencies by:
1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors)
- Primary: #ffb781 (from #F58618)
- Secondary: #c8c6c5 (from #888888)
- Tertiary: #00e639 (newly added)
- All surface variants, on-color pairs, error colors
- Added spacing tokens (unit, gutter, margin, stack-sm/md)
2. **globals.css**: Implemented full CSS variable system
- 50+ CSS variables for complete design palette
- Updated typography layer with proper letter-spacing per spec
- Semantic color classes (headline-lg, body-md, label-md, mono-data)
- Fixed scrollbar colors to use design tokens
- Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.)
3. **All component files**: Eliminated hardcoded Tailwind colors
- Replaced bg-slate-* with design system equivalents
- Replaced bg-gray-* with semantic colors
- Replaced focus:ring-blue-500 with focus:ring-primary
- Replaced text-gray-* with text-secondary/text-muted
- Replaced all inline hex colors with Tailwind classes
Files updated: 32 components + core config files
Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
2026-04-25 13:33:47 +03:00 |
|
|
|
b2e2daf40d
|
feat(phase2): implement ManualCropUI with drag handles
- useCropHandles.ts: Hook managing crop bounds state, drag operations, and constraints
- 8 draggable handles (4 corners + 4 edges)
- Real-time crop bounds calculation during drag
- Constrained within image bounds (no dragging outside)
- Minimum crop size enforcement (100x100px)
- Support for mobile (touch) and desktop (mouse) events
- Bounds validation on initialization
- ManualCropUI.tsx: Interactive crop preview component
- Responsive image display with calculated scaling
- Semi-transparent overlay outside crop box with visible bounding box
- 8 draggable handles with visual feedback (highlight/scale on hover)
- 'Use Full Photo' button to clear crop and show full image
- Real-time onCropChange callbacks to parent
- Error handling for failed image loads
- Touch and mouse event support (desktop + mobile)
- TypeScript strict mode compliant
- Tests: 26 comprehensive test cases
- Hook tests (26 passing): initialization, setCrop, resetCrop, drag operations (corners, edges), constraints, endDrag, edge cases
- Component tests (26 passing): rendering, handles, overlay, callbacks, button, error handling, dimensions, touch/mouse support, responsive behavior, size enforcement, bounds display
All 364 tests passing (13 test files, zero regressions)
Minimum crop size: 100x100px
Handle visual feedback on hover/drag
TypeScript strict mode: ✓
|
2026-04-21 13:05:37 +03:00 |
|
