Lift dark surfaces on Send, Delegate and Vote - #283
Merged
Conversation
These pages stacked translucent black on a near-black page, so nested cards and inputs sank into their parent instead of rising above it and every panel faded into the background toward its bottom edge. Elevation now goes lighter, not darker: - insetBg/cardBg become white overlays so status cards read as raised. - Panels carry a hairline edge (inset ring, so no 1px reflow) and a nearly flat fill instead of a gradient that faded out at 0.015 alpha. Measured on the Send page: panel edge luminance 19 -> 69, and panel interior holds 27 -> 25 top to bottom where it used to drop 18 -> 13. - panelBorder is a hairline in both modes rather than transparent. - Fields keep a modest fill and lean on a visible rim, so an input reads as an input whether it sits on a panel or inside a nested card. - Secondary text and placeholders move off the dim floor. Disabled CTAs were the worst offender: whiteAlpha.200 fill under whiteAlpha.500 text measured 3.26:1, so "Review transaction" was effectively invisible. Shared disabledBg/disabledFg tokens take it to 6.96:1 on the same screenshot. Governance also shipped a solid cyan primary while Send and Delegate used brand yellow, so the same commit action looked like a different control per page; it now matches. Cyan stays on badges and outline buttons as the section accent.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
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.
Round 1 of the "everything is so dark on dark" cleanup, awaiting visual review before merge.
What was wrong
These pages stacked translucent black on a near-black (
#080808) page, so elevation ran backwards: a card sitting on a panel was darker than the panel, and each panel's gradient faded to0.015alpha at the bottom, dissolving into the page. Nothing had an edge, so the whole screen read as one dark smear.Changes (shared tokens, so all three pages move together)
insetBg)rgba(0,0,0,0.35)— darker than parent0.07 → 0.015alpha, faded out0.09 → 0.07panelBordertransparentin both modeswhiteAlpha.600/.500whiteAlpha.700/.600whiteAlpha.200underwhiteAlpha.500disabledBg/disabledFgThe ring is drawn as
inset 0 0 0 1pxrather than a real border so panels that declareborder: nonedon't reflow by 1px, and the nested cards already reserved a 1px transparent border, so they gained edges at zero layout cost.Unification: Governance shipped a solid cyan primary while Send and Delegate used brand yellow, so the same commit action looked like a different control per page. It now matches. Cyan stays on badges and outline buttons as the section accent.
Measured on the Send page screenshot
Sampled from the Jenkins
mainscreenshot vs this branch, same coordinates:Verification
NODE_ENV=test npx jest— 920 passednpm run lint— 0 errorsNew
src/test/unit/ui/dark-surface-contrast.test.jslocks the contract: no black overlays for elevated surfaces, hairline panel edges, a readable disabled pairing, and one shared primary button.governance-page.test.jspreviously pinnedpanelBordertotransparent; updated in the same commit since that was the contract being fixed.Note:
e2e/screenshots.spec.jsspec 08 fails on this host, but it fails identically on cleanmainlocally and passes in CI, so it is localnode_modulesdrift rather than a regression from this change.