a8979f74d5
## 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)
50 lines
2.4 KiB
Python
50 lines
2.4 KiB
Python
import pathlib
|
|
import re
|
|
|
|
|
|
STYLE_CSS = (pathlib.Path(__file__).parent.parent / "static" / "style.css").read_text(encoding="utf-8")
|
|
UI_JS = (pathlib.Path(__file__).parent.parent / "static" / "ui.js").read_text(encoding="utf-8")
|
|
COMPACT_CSS = re.sub(r"\s+", "", STYLE_CSS)
|
|
|
|
|
|
def test_tool_card_toggle_uses_transformable_layout_and_transition():
|
|
assert ".tool-card-toggle{" in COMPACT_CSS
|
|
assert "display:inline-flex" in COMPACT_CSS
|
|
assert "transition:transform.18sease" in COMPACT_CSS
|
|
|
|
|
|
def test_tool_card_detail_uses_transitionable_collapsed_state():
|
|
assert ".tool-card-detail{display:block;max-height:0;opacity:0;overflow:hidden;" in COMPACT_CSS
|
|
assert re.search(
|
|
r"\.tool-card\.open\s+\.tool-card-detail\s*\{[^}]*max-height:\s*520px;[^}]*opacity:\s*1;",
|
|
STYLE_CSS,
|
|
)
|
|
|
|
|
|
def test_thinking_card_toggle_and_body_use_animation_friendly_state():
|
|
assert ".thinking-card-toggle{margin-left:auto;font-size:10px;display:inline-flex;" in COMPACT_CSS
|
|
assert ".thinking-card-header{display:flex;align-items:center;gap:8px;" in COMPACT_CSS
|
|
# Body uses div default (display:block); canonical rule lives in the
|
|
# consolidated block. Open state caps at 260px (intentional "quieter" sizing).
|
|
assert ".thinking-card-body{max-height:0;opacity:0;overflow:hidden;" in COMPACT_CSS
|
|
assert re.search(
|
|
r"\.thinking-card\.open\s+\.thinking-card-body\s*\{[^}]*max-height:\s*260px;[^}]*opacity:\s*1;",
|
|
STYLE_CSS,
|
|
)
|
|
|
|
|
|
def test_tool_card_toggle_uses_same_chevron_icon_markup_as_thinking_card():
|
|
assert "<span class=\"thinking-card-toggle\">${li('chevron-right',12)}</span>" in UI_JS
|
|
assert "<span class=\"tool-card-toggle\">${li('chevron-right',12)}</span>" in UI_JS
|
|
assert "<div class=\"thinking-card open\"><div class=\"thinking-card-header\" onclick=\"this.parentElement.classList.toggle('open')\"><span class=\"thinking-card-icon\">" in UI_JS
|
|
|
|
|
|
def test_thinking_card_uses_panel_chrome_with_gold_palette():
|
|
# Canonical thinking-card rule lives in the consolidated block (border-radius
|
|
# tightened from 10px → 8px as part of the "quieter card" design pass).
|
|
assert re.search(
|
|
r"\.thinking-card\s*\{[^}]*background:\s*var\(--accent-bg\);[^}]*border:\s*1px\s+solid\s+var\(--accent-bg-strong\);[^}]*border-radius:\s*8px;",
|
|
STYLE_CSS,
|
|
)
|
|
assert "border-left: 2px solid rgba(201,168,76,.4);" not in STYLE_CSS
|