developer/scrabble-game
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui): tint last-word letters for the recent highlight; lift dark bonus contrast
CI / changes (pull_request) Successful in 2s
Details
CI / unit (pull_request) Has been skipped
Details
CI / integration (pull_request) Has been skipped
Details
CI / ui (pull_request) Successful in 44s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 1m1s
Details

Browse Source 
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.
This commit is contained in:
Ilia Denisov
2026-06-12 12:31:39 +02:00
parent f67a357e62
commit 359758a01a
3 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app.css
+13 -11
View File
@@ -29,7 +29,7 @@
--tile-edge: #d8c190;
--tile-text: #2a2113;
--tile-pending: #f2cf73;
--tile-recent: #c8a85c;
--tile-recent: #a8884a;
--prem-tw: #e06a5b; /* triple word */
--prem-dw: #efa6a0; /* double word + centre */
--prem-tl: #4f8fd6; /* triple letter */
@@ -75,11 +75,11 @@
--tile-edge: #b6a473;
--tile-text: #20190d;
--tile-pending: #d8b75e;
--tile-recent: #7a6638;
--prem-tw: #b1493d;
--prem-dw: #8c5450;
--prem-tl: #34608f;
--prem-dl: #3b5a72;
--tile-recent: #6c5a30;
--prem-tw: #9c3f34; /* 3x word: a touch darker red */
--prem-dw: #a8636b; /* 2x word: softer, pinker */
--prem-tl: #2c527a; /* 3x letter: a touch darker blue */
--prem-dl: #4a779b; /* 2x letter: softer, sky blue */
--prem-text: #e7eaf0;
}
}
@@ -106,11 +106,13 @@
--tile-edge: #b6a473;
--tile-text: #20190d;
--tile-pending: #f0d98f;
--tile-recent: #4a4636;
--prem-tw: #b1493d;
--prem-dw: #8c5450;
--prem-tl: #34608f;
--prem-dl: #3b5a72;
/* Last-word highlight letter colour; matches the OS-dark value so the highlight reads the
same whether dark is chosen in Settings or via prefers-color-scheme. */
--tile-recent: #6c5a30;
--prem-tw: #9c3f34; /* 3x word: a touch darker red */
--prem-dw: #a8636b; /* 2x word: softer, pinker */
--prem-tl: #2c527a; /* 3x letter: a touch darker blue */
--prem-dl: #4a779b; /* 2x letter: softer, sky blue */
--prem-text: #e7eaf0;
}