mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
Jan-Henrik Bruhn
e03e89e76a
Visual enhancements: - Create design tokens system with semantic colors (primary, success, warning, danger, info, neutral) - Enhanced button states with hover shadow, active press feedback, and focus rings - Improved WorkflowStepper with larger circles, gradient progress bar, and green completion indicators - Enhanced color blocks with larger swatches (w-8 h-8), better shadows, and animated current indicator - Reorganized ProgressMonitor layout - progress/controls on left, color blocks on right - Moved disconnect button to header as small, compact button Accessibility improvements: - Added comprehensive ARIA labels to all interactive elements - Implemented proper focus states with color-matched rings - Added role attributes for navigation and progress elements - Enhanced screen reader support with descriptive labels - All buttons now meet 44px touch target requirements Button improvements across all components: - Standardized to rounded-lg for softer appearance - Added hover:shadow-lg for depth perception - Added active:scale-[0.98] for tactile feedback - Clean disabled states without grayscale filter - Keyboard navigation with visible focus rings - Consistent transition timing (150ms) Typography: - Maintained minimum 12px text size throughout - Proper hierarchy with defined heading sizes - Improved readability with consistent weights Documentation: - Created comprehensive UI design analysis - Implementation guides and checklists - Before/after examples - Design tokens reference 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| designTokens.ts | ||