Fix dropdown colours (vibe-kanban) (#891)

* Done! The dropdown colors are now fixed for dark mode readability:

- **Selected items** now use `bg-accent text-accent-foreground` instead of hardcoded light-theme colors
- **File paths** in selected items use `text-accent-foreground/70` for better contrast
- **Added accessibility** attributes (`aria-selected` and `role="option"`)

The changes maintain your existing design token pattern and will automatically adapt to both light and dark themes.

* Cleanup script changes for task attempt 9dd6bd96-f216-408c-ab42-94eefb1437e1

* Perfect! Now the selected dropdown item uses:

1. **Background:** `bg-primary/10` (subtle primary tint)
2. **Text:** `text-primary` (primary color text)
3. **Left border:** `border-l-2 border-primary` (visual indicator)
4. **File path:** `text-primary/70` (muted primary for secondary info)

This provides much better visual distinction while maintaining theme compatibility and using your existing design token pattern.

* Cleanup script changes for task attempt 9dd6bd96-f216-408c-ab42-94eefb1437e1

* Now the selected item uses `bg-muted text-foreground` which provides proper contrast in both light and dark modes, with a primary-colored left border for visual distinction. The file path uses consistent `text-muted-foreground` in all states.

* Cleanup script changes for task attempt 9dd6bd96-f216-408c-ab42-94eefb1437e1

* Perfect! Now the selected dropdown item simply uses `bg-muted text-foreground` which provides clear contrast and visibility without the border.
This commit is contained in:
Louis Knight-Webb
2025-09-30 13:08:06 +01:00
committed by GitHub
parent 58badf2653
commit 71bfe9ac0b

View File

@@ -287,13 +287,21 @@ export function FileSearchTextarea({
key={file.path}
className={`px-3 py-2 cursor-pointer text-sm ${
index === selectedIndex
? 'bg-blue-50 text-blue-900'
? 'bg-muted text-foreground'
: 'hover:bg-muted'
}`}
onClick={() => selectFile(file)}
aria-selected={index === selectedIndex}
role="option"
>
<div className="font-medium truncate">{file.name}</div>
<div className="text-xs text-muted-foreground truncate">
<div
className={`text-xs truncate ${
index === selectedIndex
? 'text-muted-foreground'
: 'text-muted-foreground'
}`}
>
{file.path}
</div>
</div>