-
Notifications
You must be signed in to change notification settings - Fork 474
Description
Problem
~60 SVG icons in Icon.tsx use hardcoded fill colours that break dark mode and prevent CSS classes from controlling icon colour. The main offenders:
- 41x
fill={fill || '#1A2634'}— dark navy, invisible on dark backgrounds - 4x
fill={fill || '#9DA4AE'}— grey, poor contrast in dark mode - 2x
fill={fill || '#656D7B'}— grey, poor contrast in dark mode - 7x
fill={fill}— no fallback, renders nothing when no fill prop passed - 2x
fill={fill ?? '#000000'}— black, invisible in dark mode - 1x
fill={fill || 'white'}(plus icon) — invisible in light mode, callers always override
Inline fill attributes always win over CSS, so utility classes like fill-body, fill-primary, and hover-color-primary can't control icon colour.
Files
web/components/Icon.tsx— all changes in one file
Fix
Replace all hardcoded fills with fill={fill || 'currentColor'}. This inherits the text colour from the parent element, working in both light and dark mode automatically.
Icons with intentional semantic colours are left unchanged:
nav-logo— white (sits on dark navbar)info— cyan (#0AADDF)warning— orange (#FF9F43)close-circle— red (#EF4D56)checkmark-square— purple (#6837FC)required— blue (#4285F4)google,pr-merged,pr-closed,pr-linked,issue-closed,issue-linked— brand colours baked into SVG paths
Additional findings
10 unused icons (zero references in application code): dash, diff, edit-outlined, email, layout, nav-logo, paste, required, settings-2, star. Candidates for removal in a follow-up.
Impact
- Fixes ~57 broken icons in dark mode in one go
- Highest ROI fix in the entire design system audit
- Unblocks QW-9 (SidebarLink hover) and QW-2 (hardcoded colours in components)
- After this change, CSS utility classes control icon colour without inline overrides
Acceptance Criteria
- No instances of
#1A2634or#1a2634remain inIcon.tsx - All generic icons use
currentColoras the default fill/stroke - Icons render correctly in light mode (inherit dark text colour)
- Icons render correctly in dark mode (inherit light text colour)
-
npm run typecheckpasses -
npx eslint --fixpasses
Context
Part of the design system audit (#6606). See frontend/DESIGN_SYSTEM_ISSUES.md on chore/design-system-audit-6606 branch (QW-1). This is the top-priority fix — highest ROI in the entire audit.