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:
@@ -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():
|
||||
|
||||
Reference in New Issue
Block a user