fix: ensure selected list items are readable with transparent background

[knanao]

Fixes: #4369

Summary

Fix unreadable text in selected list items when theme uses background: "none"

Details

When a theme sets "background": "none", the background color resolves to fully transparent. Previously, selected list items used theme.background as the foreground color, making the text invisible. This PR adds a helper that returns a contrasting color (black or white) based on the luminance of theme.

Before:

After:

[ariane-emory]

Minutes before you submitted this, I'd just submitted an alternate solution by adding an optional selectedListItemText theme element to allow users to explicitly choose a colour for selected list items: #4572

Maybe we should combine our approaches, allowing either my explicit colour selection via selectedListItemText or your automatic selection when an explicit selectedListItemText is nor present in the theme?

[knanao]

@ariane-emory
Oh, sorry, I didn’t notice that. I agree your solution, and making this configurable is good.

Maybe we should combine our approaches, allowing either my explicit colour selection via selectedListItemText or your automatic selection when an explicit selectedListItemText is not present in the theme?

👍
Then I’m going to close this PR, and I’m also happy to make some changes to your PR on my side, so please let me know if needed.

[ariane-emory]

No need to apologize! Tackling the problem from both ends and allowing either automatic colour selection or explicit selection is probably more robust than doing either in isolation. I'll try merging your branch into mine and see how it works.

[knanao]

@ariane-emory
Yeah, that's better. Thank you!

[knanao]

merge with #4572.

[knanao]

Due to the changes added in 23ea8ba, a black line is displayed when backgroundElement is transparent. OpenTUI might not recognize borderColor when it is set to transparent and instead displays it in the default black.

[knanao]

Close this, since #4572 has been merged,