feat(ui): last-word letter highlight + dark bonus-square contrast #50

Merged

developer merged 3 commits from feature/board-recent-highlight-and-dark-bonus into development 2026-06-12 11:12:05 +00:00

Conversation 1 Commits 3 Files Changed 3

+35 -27

developer commented 2026-06-12 10:32:13 +00:00

Owner

Copy Link

Copy Source

Board styling, per the owner's request.

Changes

• Dark-theme bonus squares: the 2x/3x pairs were too close. Soften the 2x (sky blue #4a779b, rose #a8636b) and deepen the 3x (#2c527a, #9c3f34) so each pair reads as two steps. Light theme bonus squares unchanged.
• Last-word highlight (both themes): no more background tint — the tile keeps its normal fill, and the placed letters (not the point values) are drawn in the recent-move colour. The opponent-just-moved flash pulses the letter between its normal colour and the recent colour (no background animation, no white peak).
• Recent-move colour: a warm burgundy #8c4a3c, unified across all three theme blocks. A gold/brown recent shared the tile's warm hue and so could not separate from both the near-black glyph (dark) and the tan tile (light) at once; burgundy's red hue stays distinct from both, in light and dark.

Review on the test contour / phone

• Confirm the last-word highlight reads clearly in both themes.
• Owner noted that, by perception, light might ideally want a slightly lighter burgundy (#9c5849); that is a one-line follow-up if the phone check agrees.
• Flash (opponent's last move on your turn): the highlighted letters pulse normal<->recent twice — best judged live.

Verification

Local UI suite green: pnpm check, test:unit (160), build, test:e2e (106, Chromium + WebKit). Only ui/src/app.css, ui/src/game/Board.svelte, docs/UI_DESIGN.md touched; no Go files.

Board styling, per the owner's request. ## Changes - **Dark-theme bonus squares**: the 2x/3x pairs were too close. Soften the 2x (sky blue `#4a779b`, rose `#a8636b`) and deepen the 3x (`#2c527a`, `#9c3f34`) so each pair reads as two steps. Light theme bonus squares unchanged. - **Last-word highlight (both themes)**: no more background tint — the tile keeps its normal fill, and the placed letters (not the point values) are drawn in the recent-move colour. The opponent-just-moved flash pulses the letter between its normal colour and the recent colour (no background animation, no white peak). - **Recent-move colour**: a warm **burgundy `#8c4a3c`**, unified across all three theme blocks. A gold/brown recent shared the tile's warm hue and so could not separate from both the near-black glyph (dark) and the tan tile (light) at once; burgundy's red hue stays distinct from both, in light and dark. ## Review on the test contour / phone - Confirm the last-word highlight reads clearly in **both** themes. - Owner noted that, by perception, light might ideally want a slightly lighter burgundy (`#9c5849`); that is a one-line follow-up if the phone check agrees. - Flash (opponent's last move on your turn): the highlighted letters pulse normal<->recent twice — best judged live. ## Verification Local UI suite green: `pnpm check`, `test:unit` (160), `build`, `test:e2e` (106, Chromium + WebKit). Only `ui/src/app.css`, `ui/src/game/Board.svelte`, `docs/UI_DESIGN.md` touched; no Go files.

developer added 1 commit 2026-06-12 10:32:13 +00:00

feat(ui): tint last-word letters for the recent highlight; lift dark bonus contrast ... 359758a01a

Dark theme: the 2x/3x bonus-square pairs were too close to tell apart. Soften the 2x squares (sky blue #4a779b, rose #a8636b) and deepen the 3x squares (#2c527a, #9c3f34) so each pair reads as two distinct steps. Light theme is unchanged.

Last-word highlight (both themes): stop tinting the tile background — the tile keeps its normal fill, and instead the placed letters (not the point values) are drawn in the recent-move colour. The opponent-just-moved flash now pulses the letter between its normal colour and the recent colour, with no background animation and no white peak.

Reconcile the explicit [data-theme=dark] --tile-recent with the OS-dark value so the highlight reads the same however dark is selected, and darken --tile-recent a step in every theme. Update docs/UI_DESIGN.md.

developer added 1 commit 2026-06-12 10:59:40 +00:00

feat(ui): use a warm burgundy for the last-word highlight in both themes ... 107add13b6

The gold/brown recent colour shared the tile's warm hue, so it could not separate from both the near-black glyph (when dark) and the tan tile (when light) at once. Switch --tile-recent to a burgundy #8c4a3c whose red hue stays distinct from both, in light and dark, and unify the value across all three theme blocks.

developer added 1 commit 2026-06-12 11:07:49 +00:00

feat(ui): lighten the light-theme last-word highlight to a brighter burgundy ... cb75623677

At #8c4a3c the highlight blended into the lighter board in the light theme. Give the light theme a lighter burgundy #9c5849 while the dark theme keeps #8c4a3c — the two are tuned per theme because perceived contrast depends on the surrounding board tone.

owner approved these changes 2026-06-12 11:11:08 +00:00

developer merged commit 10dc1f0d48 into development 2026-06-12 11:12:05 +00:00

developer deleted branch feature/board-recent-highlight-and-dark-bonus 2026-06-12 11:12:05 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

owner

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

owner (Ilia) developer

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: developer/scrabble-game#50