fix(ui): dark-mode user bubbles use subtle tint + thinking card collapsible — v0.50.111 (#759)

## Summary

Rebased on behalf of @aronprins from fork branch `codex/dark-user-bubbles`. Two asset-only commits (PR screenshot add/remove) were dropped; the two code commits are applied cleanly on top of current master (v0.50.110).

### What changed

**Dark-mode user bubbles** (`static/style.css`):
- `:root.dark` now overrides `--user-bubble-bg`/`--user-bubble-border` to `var(--accent-bg-strong)` (a 15% opacity tint) — keeps the bubble visually subdued in dark skins instead of a glaring bright accent fill
- Removes 6 per-skin `--user-bubble-text` hacks (ares, mono, slate, poseidon, sisyphus, charizard); text falls back to `var(--text)` which is already correct in dark mode
- Adds `--user-bubble-placeholder` token; edit-area box-shadow now uses `--focus-ring` instead of hardcoded `rgba(255,255,255,.15)`

**Thinking card collapsibility** (`static/ui.js` + `static/style.css`):
- `_thinkingMarkup()` now includes `onclick` toggle and chevron affordance, matching the compression reference card pattern
- `.thinking-card-header` gets `display:flex; gap:8px` for proper icon/label/chevron alignment

**Tests**: 2 new in `test_bugbatch_apr2026.py` (dark bubble token contract + no-per-skin-hack assertion), 2 updated in `test_ui_card_animation.py` (flex header layout + onclick pattern).

1520 passed. QA 20/20. Browser verified: dark mode bubble uses subtle tint, thinking card toggles correctly.

(credit: @aronprins)
This commit is contained in:
nesquena-hermes
2026-04-20 01:12:45 -07:00
committed by GitHub
parent 711d8bb6c0
commit a8979f74d5
5 changed files with 40 additions and 12 deletions

View File

@@ -54,6 +54,28 @@ def test_594_file_rename_input_has_light_mode_override():
)
# ── dark-mode user bubble semantics ──────────────────────────────────────────
def test_dark_user_bubbles_use_dark_tinted_surface():
"""Dark mode should keep user bubbles dark, with skin only tinting the bubble."""
assert "--user-bubble-bg: var(--accent-bg-strong);" in STYLE_CSS, (
"Dark mode user bubbles should use the dark accent tint, not the full bright accent fill"
)
assert "--user-bubble-border: var(--accent-bg-strong);" in STYLE_CSS, (
"Dark mode user bubble borders should match the quieter thinking-card border intensity"
)
assert "--user-bubble-text: var(--text);" in STYLE_CSS, (
"Dark mode user bubble text should inherit the theme text color"
)
def test_dark_user_bubbles_do_not_need_per_skin_text_hacks():
"""Dark-mode user bubble contrast should not rely on per-skin text overrides."""
assert re.search(r':root\.dark\[data-skin="[^"]+"\]\s*\{\s*--user-bubble-text:', STYLE_CSS) is None, (
"Dark-mode user bubble contrast should come from shared theme tokens, not per-skin text hacks"
)
# ── #576: workspace panel snap fix ───────────────────────────────────────────
def test_576_panel_restore_gated_on_workspace():