feat(ui): rebuild the design system with layered elevation#142
Open
adrienbrault wants to merge 11 commits into
Open
feat(ui): rebuild the design system with layered elevation#142adrienbrault wants to merge 11 commits into
adrienbrault wants to merge 11 commits into
Conversation
The old surface tokens sat within 0.04 lightness of each other and cards rendered darker than the page, so nothing read as raised. This establishes a real elevation scale (inset < page < raised < overlay), a warm-tinted shadow scale, and gradient-filled buttons with an inner highlight so primary actions and numpad keys feel physically tactile. Component classes (btn, card, modal, typography) are rebuilt on top of these tokens; the theme-color meta + manual override hexes are resynced to the new page background.
The old home screen was a stack of flat grey buttons with no visual hierarchy or identity. This adds a brand mark, turns each action into a tappable row with an icon chip, subtitle and chevron, promotes Start Solo to the gradient primary, and folds streak/progress into a richer Daily Challenge row. Saved games become cards with an inline progress bar. The result reads as a designed app menu rather than a form.
The four difficulty options were near-identical cards distinguished only by a tiny coloured dot. This gives each a tinted icon chip with signal-style bars that rise with difficulty, plus a chevron, so the relative challenge is legible at a glance. The assist toggle gets a labelled section to match the rest of the redesigned UI.
The header mixed a text "Back" link with an icon gear, and the timer was the same small mono size as the cell counter beside it. This makes Back and Settings symmetric icon buttons, enlarges the timer into a bold readout with the counter as a quiet caption beneath, and restyles the settings popover as a proper raised card.
The undo/erase/hint controls were borderless icon-over-label columns that read as plain text. This turns them into bordered, raised pill buttons with the icon and label inline, giving them clear affordance and matching the tactile button language of the rest of the UI.
Keys were flat fills that blended into the page. They now use the shared key classes — a bordered raised resting state and a gradient-filled active state with an inner highlight — so a pressed or selected digit clearly lifts. The press-state test helper is updated to the new active class name.
The win modal stacked the time and stats as loose centred text. This frames the finish time in a sunken panel, turns the played/best/average figures into discrete tiles, and shows the streak as a pill. The win modal screenshot mock in the e2e suite is resynced to the new markup.
The streak figures sat in another plain card lost among identical ones. This promotes them into a gradient hero card, gives every difficulty heading a coloured dot, and turns recent-match rows into win/loss badges so outcomes scan instantly.
The room code was buried in a small grey chip. This gives it a dedicated card with the code shown large and monospaced, a one-tap copy affordance, and the difficulty as a badge. Players gain coloured initial avatars and a clearer host badge.
The join screen was a bare input and button. This adds an icon badge, a supporting line, and a larger monospaced code field with an accent focus ring, so entering a room code feels deliberate and on-brand.
Brings the smaller controls in line with the new design language: segmented controls sit on a sunken track with a gradient active pill, progress bars use the inset track colour, icon toggles share the header button sizing, and the hint banner and toast pick up the softer radii.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The old surface tokens sat within 0.04 lightness of each other and
cards rendered darker than the page, so nothing read as raised. This
establishes a real elevation scale (inset < page < raised < overlay),
a warm-tinted shadow scale, and gradient-filled buttons with an inner
highlight so primary actions and numpad keys feel physically tactile.
Component classes (btn, card, modal, typography) are rebuilt on top of
these tokens; the theme-color meta + manual override hexes are resynced
to the new page background.