feat(design-system): revamp app theme to the GMX design language - #512
Merged
IbrahimIjai merged 1 commit intoAug 23, 2026
Merged
Conversation
Introduces the GF3-001 GMX-derived dark theme and applies it to the landing route, per docs/gf_3/001_theme_update.md. - Re-adds the `.dark` token block in globals.css (removed at some point, so dark mode silently fell back to light values). Surfaces, text roles, border/input, primary/ring, and accent resolve to the `--color-gmx-*` reference palette per §8.2's mapping table; trading state colors keep their existing hues (not a GMX concept) with only their subtle/border fill pairs re-lightened so they read against the new slate-800/900 surfaces instead of blending into them. Light theme is untouched. - The landing route (apps/web/src/routes/index.tsx) forces the `.dark` scope on its own root element, independent of the user's theme setting, since GMX's landing has no light variant — this never touches <html>, so /trade, /pools, /earn, /referrals, and /faucet keep honoring the user's actual preference. - Landing headings/copy switch from ad-hoc clamp()-sized styles to the text-heading-1…4 / text-subheadline / text-description utilities (Archivo, GMX's exact sizes/line-heights/tracking), and the primary CTAs pick up btn-landing. Retires the now-unused `.font-trading` override from landing.css (font-mono-num is kept — it's the approved Geist Mono stand-in for TTHovesMono, not a landing-local override). - Documents the dark theme's return and its GMX derivation in DESIGN.md, and adds the landing typography + btn-landing swatch to /gallery (force-scoped to `.dark` there too, since the utilities are dark-only by design). - Regenerates the design-system-visual baselines for `landing` and `gallery` (light+dark, desktop+mobile, plus gallery's RTL variants). Verified: bun lint, bun typecheck, bun run check:tokens, bun run test, bun run test:coverage, and bun run build all pass. `bun run test:e2e -- design-system-visual` passes for `landing` and `gallery`; the pre-existing flakiness on /trade, /pools, /earn, /referrals, and /faucet (SSR `sessionStorage is not defined` crash in NetworkMismatchBanner/OrderExecutionFrozenBanner) was confirmed to reproduce identically on unmodified main and is unrelated to this change, so no new baselines were added for those routes. Closes SO4-Markets#509
|
Someone is attempting to deploy a commit to the Ijai's projects Team on Vercel. A member of the Team first needs to authorize it. |
5 tasks
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.
Summary
Implements GF3-001: (re)introduces SO4's
.darktheme, this time derived from GMX's dark, violet-navy visual identity, and makes the landing route dark-only regardless of the user's theme setting. Full rationale, palette, and the GMX→SO4 token mapping table:docs/gf_3/001_theme_update.md..darktoken block (packages/ui/src/styles/globals.css) — re-added (it had been removed, so dark mode silently fell back to light values). Surfaces (--surface-canvas/-raised/-sunken/-overlay/-interactive), text roles (--text-primary/-secondary/-tertiary,--text-inverse,--text-link),--border/--input,--primary/--ring, and--accentall resolve to the--color-gmx-*reference palette per §8.2 of the spec. Trading-state colors (long/short/liquidation,success/warning/danger,neutral) are not a GMX concept, so their foreground values are untouched — only theirsubtle/borderfill pairs are re-lightened, since the:rootpairs were tuned for a white page and read as almost-black against the new slate-800/900 surfaces.--infois the one status color that does move to--color-gmx-blue-400("informational blue" being the same concept as GMX's brand blue). Light theme is unchanged.apps/web/src/routes/index.tsx) — the route's root element gets thedarkclass directly (not<html>), so GMX's dark-only landing renders correctly regardless of the app theme setting, without leaking into/trade,/pools,/earn,/referrals, or/faucet, which continue to honor the user's actual preference.hero,features,infrastructure,how-it-works,markets, andfinal-ctaswitch from ad-hocclamp()-sized inline styles to thetext-heading-1…4/text-subheadline/text-descriptionutilities (Archivo, GMX's exact sizes, 98%/108% line-heights, and negative tracking from spec §4). Primary CTAs pick upbtn-landing. Retires the now-dead.font-tradingoverride fromlanding.css(.font-mono-numis kept — it's the approved Geist Mono stand-in for TTHovesMono, not a landing-local override, and stays in active use for order-book/ticker figures).DESIGN.md— documents the dark theme's return and its GMX derivation (house rule: token changes and doc updates land together)./gallery— adds a "Landing Typography (GMX)" swatch (force-scoped to.dark, since these utilities are dark-only by design) showing all four heading levels,text-subheadline,text-description, andbtn-landing.landingandgallery(light + dark, desktop + mobile, plus gallery's RTL variants) viabun run test:e2e -- design-system-visual --update-snapshots, reviewed in this diff.Out of scope (per the issue)
Landing section structure/copy (GF3-002/GF3-003), a GMX-aligned light theme, and replacing Geist inside app routes.
Test plan
bun lint— 0 errors (pre-existing warnings only, unrelated files)bun typecheck— passesbun run check:tokens— 0 violationsbun run test— all passbun run test:coverage— all pass, thresholds metbun run build— succeedsbun run test:e2e -- design-system-visual—landingandgallerypass against the regenerated baselines (light theme visually unchanged in content — landing now renders identically dark regardless of the light/dark localStorage flag, which is the intended behavior)/tradecorrectly switches between light and the new dark theme; thedarkclass never appears on<html>from the landing routeNote on
/trade,/pools,/earn,/referrals,/faucetbaselines: this sandbox's Playwright run surfaces a pre-existing SSR crash (sessionStorage is not definedinNetworkMismatchBanner/OrderExecutionFrozenBanner) that intermittently truncates those routes' screenshots. Confirmed by reproducing it against an unmodifiedmaincheckout — it is unrelated to this change, so no new baselines were generated for those routes here.Closes #509