alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6f41fa7cbe54a847d6cbfe9ee0cf8efcf580ce83
headquarter/openspec/changes/universal-icon-system/specs/spec.md
T
Fusion 6f41fa7cbe feat: implement universal icon system with Phosphor Icons 
- Install @phosphor-icons/react package
- Create centralized Icon component with size/weight/color variants
- Create icon registry with 34 icons across 5 categories
- Replace all raw Unicode symbols with proper icon components
- Add icons to navigation, buttons, status indicators, git operations
- Add icon CSS with consistent sizing and spacing
- Fix type definitions for Phosphor icon compatibility

Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)
2026-05-19 19:33:06 +02:00

2.9 KiB
Raw Blame History

Universal Icon System Specification

Requirements

Functional Requirements

  1. Icon Component: Centralized Icon component that wraps Phosphor icons
  2. Icon Registry: Mapping of logical names to Phosphor icon components
  3. Size Variants: Support for sm (16px), md (20px), lg (24px), xl (32px)
  4. Color Inheritance: Default to currentColor, support explicit colors
  5. Accessibility: Proper ARIA labels and roles
  6. Tree Shaking: Only include icons that are actually used

Non-Functional Requirements

  1. Bundle Size: Minimal impact (~2KB per icon weight variant)
  2. Performance: No layout shift, instant rendering
  3. Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge)
  4. Consistency: Identical rendering across all platforms

Icon Registry

Navigation Icons

  • dashboard → House
  • projects → Folder
  • repositories → GitBranch
  • settings → Gear
  • profile → User
  • logout → SignOut

Action Icons

  • add → Plus
  • edit → PencilSimple
  • delete → Trash
  • save → FloppyDisk
  • cancel → X
  • refresh → ArrowsClockwise
  • copy → Copy
  • search → MagnifyingGlass
  • menu → List
  • close → X

Status Icons

  • success → Check
  • error → X
  • warning → Warning
  • info → Info
  • loading → Spinner

Git Icons

  • branch → GitBranch
  • commit → GitCommit
  • merge → GitMerge
  • history → ClockCounterClockwise
  • pull → ArrowDown
  • push → ArrowUp
  • fetch → ArrowsClockwise

File Icons

  • file → File
  • folder → Folder
  • code → Code
  • document → FileText
  • image → Image
  • binary → FileBinary

Migration Checklist

Components to Update

  • app-shell.tsx - Navigation icons
  • git-toolbar.tsx - Git operation icons
  • git-repositories.tsx - Status/validation icons
  • repo-workspace.tsx - File tree icons
  • file-editor.tsx - File type icons
  • dashboard.tsx - Dashboard icons
  • projects.tsx - Project action icons
  • settings.tsx - Settings icons
  • tool-types.tsx - Tool type icons
  • ssh-keys.tsx - Key management icons
  • profile.tsx - Profile icons
  • commit-dialog.tsx - Dialog icons
  • syntax-highlighter.tsx - Copy icon
  • code-editor.tsx - Edit icons
  • All button components with icons

CSS Requirements

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

Accessibility Requirements

  1. All functional icons must have aria-label
  2. Decorative icons must have aria-hidden="true"
  3. Interactive icons must be focusable
  4. Color contrast ratio ≥ 4.5:1

Dependencies

  • @phosphor-icons/react - React component library
Reference in New Issue View Git Blame Copy Permalink