Fusion
2b5331a1a0
- Add CSS custom properties for spacing scale (4px base), breakpoints, and fluid typography - Create layout utilities: Container, Stack, Row, Grid - Update AppShell with responsive mobile navigation - Update card grid with responsive columns - Update dialogs with viewport-aware sizing and mobile fullscreen - Update workspace layout for mobile stacking - Ensure minimum 44px touch targets for buttons - Add table-responsive and text truncation utilities - Update page headers for mobile stacking Quality gates: typecheck ✓, lint ✓, build ✓
59 lines
2.2 KiB
Markdown
59 lines
2.2 KiB
Markdown
# Universal Icon System
|
|
|
|
## Problem
|
|
|
|
The current project uses inconsistent icon implementations across the frontend:
|
|
- Raw Unicode symbols (✓, ✗, ⚠, etc.) which render differently across browsers and operating systems
|
|
- No standardized icon component or library
|
|
- Inconsistent visual language throughout the UI
|
|
- Some icons may not render at all on certain systems
|
|
|
|
This creates a fragmented user experience and potential accessibility issues.
|
|
|
|
## Solution
|
|
|
|
Implement a universal icon system using **Phosphor Icons** - a comprehensive, lightweight icon library designed for modern web applications:
|
|
|
|
1. **Consistent rendering** across all browsers and platforms
|
|
2. **Comprehensive icon set** with 7000+ icons covering all use cases
|
|
3. **Multiple weights** (thin, light, regular, bold, fill, duotone) for flexibility
|
|
4. **Tree-shakeable** - only includes icons that are actually used
|
|
5. **React integration** with phosphor-react library
|
|
6. **Accessible** with proper ARIA labels and focus management
|
|
|
|
## Key Features
|
|
|
|
### Icon Component
|
|
- Centralized `<Icon>` component wrapping Phosphor icons
|
|
- Consistent sizing (sm, md, lg, xl)
|
|
- Color inheritance from parent or explicit color prop
|
|
- Accessibility support (aria-label, role)
|
|
|
|
### Icon Categories
|
|
- Navigation (home, settings, user, etc.)
|
|
- Actions (edit, delete, save, add, etc.)
|
|
- Status (success, error, warning, info)
|
|
- Files and folders
|
|
- Git operations (branch, commit, merge, etc.)
|
|
- Development tools (terminal, code, database, etc.)
|
|
|
|
### Migration Strategy
|
|
- Replace all raw Unicode symbols with proper icon components
|
|
- Update existing components to use the new icon system
|
|
- Maintain visual consistency during migration
|
|
|
|
## Benefits
|
|
|
|
- **Cross-browser consistency** - Icons render identically everywhere
|
|
- **Better accessibility** - Screen reader friendly with proper labels
|
|
- **Improved maintainability** - Single source of truth for icons
|
|
- **Enhanced UX** - Professional, polished appearance
|
|
- **Future-proof** - Easy to add new icons as needed
|
|
|
|
## Success Criteria
|
|
|
|
- [ ] All raw Unicode symbols replaced with icon components
|
|
- [ ] Consistent icon sizing and styling across all pages
|
|
- [ ] No visual regressions in existing UI
|
|
- [ ] Icons render correctly in all supported browsers
|