audit: analyze color system — consolidate scales, eliminate hardcoded values

[kitikonti]

Background

During Code Review (Batch 4) it was identified that OwnChart currently uses 5 different gray families:

1. neutral — Pure grays (Ribbon, Toolbar, UI chrome)
2. brand — Outlook Blue scale (Buttons, Links, Accents)
3. coolGray — Bootstrap/Tailwind cool-grays (GRID, TIMELINE_HEADER)
4. slate — Tailwind Slate (CONNECTION_HANDLE, TOAST, Dependencies)
5. Fluent UI grays — (TABLE_HEADER, ROW_NUMBER)

Additionally, 10+ component files contain hardcoded rgb()/hex color values that are semantically design-token values (e.g. rgb(15, 108, 189) = brand[600]).

Tasks

• Full analysis: Where in the app are colors assigned?
• Inventory of all hardcoded color values in components (ideal: only centralized in design-tokens.ts)
• Assessment: Do we really need 5 gray families, or can we consolidate?
• Refactoring plan: Replace hardcoded colors in components with design-token imports
• Decision: Should a single unified gray system be used long-term?

Affected Component Files with Hardcoded Colors (from review)

• src/components/TaskList/CellEditors/ColorPickerPopover.tsx (30+ values)
• src/components/Ribbon/ColorDropdown.tsx (20+ values)
• src/components/Toolbar/DropdownItem.tsx
• src/components/Toolbar/ToolbarPrimitives.tsx
• src/components/Toolbar/DropdownTrigger.tsx
• src/components/StatusBar/StatusBar.tsx
• src/components/Ribbon/Ribbon.tsx
• src/components/Ribbon/ZoomDropdown.tsx

[kitikonti]

Dependency: Work on this issue should start after completing the Code Review (Issue #44). The color audit findings originate from the review process, and additional hardcoded color instances may be discovered as more files are reviewed.