What problem(s) was I solving?

Text selection colors in the WUI were using generic accent colors (selection:bg-accent and selection:text-background) that didn't match the design language of each theme. This resulted in low contrast and poor readability when selecting text, especially across the 16 different themes we support. The selection colors were not cohesive with the rest of the theme's color palette.

Related to ENG-2222: Selection colors in app are off/low contrast.

What user-facing changes did I ship?

• Text selection now uses theme-specific colors that complement each theme's design language
• Improved contrast and readability when selecting text across all 16 themes
• Consistent selection behavior across all UI components (inputs, textareas, code blocks, etc.)
• Each theme now has a carefully chosen selection color, some with alpha transparency for better blending with underlying content

How I implemented it

1. Added --terminal-selection CSS variable to all 16 themes (humanlayer-wui/src/App.css):

   • Solarized Dark: #2aa19899 (teal with transparency)
   • Solarized Light: #eee8d5 (base2 from Solarized palette)
   • Coffee: #f4a2614d (warm orange with transparency)
   • Catppuccin: #9399b240 (lavender with transparency)
   • High Contrast: #ffffff (pure white for maximum contrast)
   • Figma: #fd579933 (coral with transparency)
   • Minimalist: #0066cc26 (blue with subtle transparency)
   • Gruvbox Dark: #504945 (neutral gray from Gruvbox palette)
   • Gruvbox Light: #d5c4a1 (light gray from Gruvbox palette)
   • Monokai: #49483e (dark gray from Monokai palette)
   • Hacker News: #ff66001a (orange with transparency)
   • Rosé Pine: #6e6a8633 (iris with transparency)
   • Rosé Pine Dawn: #6e6a8614 (iris with lighter transparency)
   • Rosé Pine Moon: #817c9c26 (iris with transparency)
   • Tokyo Night: #515c7e4d (dark blue-gray with transparency)
   • Tokyo Night Storm: #6f7bb640 (blue-gray with transparency)
   • And more...

2. Created global ::selection rule that applies the theme-specific selection color:

   ::selection {
     background-color: var(--terminal-selection);
     color: var(--terminal-fg);
   }

3. Updated input component (humanlayer-wui/src/components/ui/input.tsx):

   • Changed from hardcoded selection:bg-accent selection:text-background
   • To CSS variable-based selection:bg-[var(--terminal-selection)] selection:text-foreground
   • This ensures inputs respect the global selection styling

How to verify it

Automated Checks

• Linting passes: bun run lint (only pre-existing warnings, no new issues)
• Type checking passes: bun run typecheck

Manual Testing

Test selection colors across themes:

1. Launch the WUI in development mode
2. Navigate to Settings and switch between different themes (all 16 available)
3. For each theme:
   • Select text in various components (session titles, approval content, input fields, code blocks)
   • Verify that the selection color has good contrast with the text
   • Verify that the selection color complements the theme's overall aesthetic
   • Check that selected text is still readable
4. Pay special attention to these themes which had the most noticeable issues:
   • Solarized Light/Dark (were using accent colors that didn't fit the palette)
   • High Contrast (needs maximum contrast selection)
   • Gruvbox variants (selection should match Gruvbox's earthy tones)
   • Tokyo Night variants (selection should match the dark blue aesthetic)

Specific test cases:

• Select text in the session list
• Select text in approval requests
• Select text in input fields and text areas
• Select code blocks in the terminal output
• Select text across line breaks
• Test with both light and dark themes

Description for the changelog

Fixed text selection colors across all themes. Selection now uses theme-specific colors with proper contrast instead of generic accent colors, improving readability and visual consistency throughout the UI.