fix(frontend): occlude Swap direction seam hairline (#659) #1155

Merged

PlasticDigits merged 1 commit from fix/659-swap-direction-seam into main

2026-08-26 07:59:37 +00:00

PlasticDigits commented

2026-08-26 06:48:11 +00:00

(Migrated from gitlab.com)

Summary

Opaque --swap-direction-surface plate (both themes) plus a static .swap-direction-seam::before occluder so the Pay/Receive --chrome-border hairline no longer paints through the flip control or its arrows (#659).
Dropped hover translateY so the seam cannot flash through vacated pixels; added :focus-visible with --focus-ring. Flip JS, IO card-glass nest, and the hairline left/right of the plate are unchanged.
Invariants S659-1–S659-8 in docs/frontend.md; skill AGENTS_FRONTEND_SWAP_DIRECTION_SEAM.md. After crops: docs/qa/issue-659/.

Closes #659

Test plan

make verify-issue-659 (Vitest + token/nesting guards + Playwright PLAYWRIGHT_SKIP_CHAIN=1, 5 workers)
Dark + light computed background-color is opaque; hover does not translate; :focus-visible ring; hairline remains on .swap-io-card-pay
Reviewer: make dev → / dark + light at ~375px and ~1280px; hairline stops at the plate in idle, hover, and Tab focus
Click flip still swaps pay/receive identities; token pickers / Settings still open above the stack
python3 scripts/check_design_tokens.py and python3 scripts/check_chrome_nesting.py stay green

## Summary - Opaque `--swap-direction-surface` plate (both themes) plus a static `.swap-direction-seam::before` occluder so the Pay/Receive `--chrome-border` hairline no longer paints through the flip control or its arrows ([#659](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/659)). - Dropped hover `translateY` so the seam cannot flash through vacated pixels; added `:focus-visible` with `--focus-ring`. Flip JS, IO `card-glass` nest, and the hairline left/right of the plate are unchanged. - Invariants **S659-1–S659-8** in `docs/frontend.md`; skill [`AGENTS_FRONTEND_SWAP_DIRECTION_SEAM.md`](skills/AGENTS_FRONTEND_SWAP_DIRECTION_SEAM.md). After crops: [`docs/qa/issue-659/`](docs/qa/issue-659/). Closes #659 ## Test plan - [x] `make verify-issue-659` (Vitest + token/nesting guards + Playwright `PLAYWRIGHT_SKIP_CHAIN=1`, 5 workers) - [x] Dark + light computed `background-color` is opaque; hover does not translate; `:focus-visible` ring; hairline remains on `.swap-io-card-pay` - [ ] Reviewer: `make dev` → `/` dark + light at ~375px and ~1280px; hairline stops at the plate in idle, hover, and Tab focus - [ ] Click flip still swaps pay/receive identities; token pickers / Settings still open above the stack - [ ] `python3 scripts/check_design_tokens.py` and `python3 scripts/check_chrome_nesting.py` stay green

Rows
Columns