From 7bd4574b0801264a564ec0fc47ddddfd3a2422d0 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Sat, 8 Aug 2026 10:19:12 +0530 Subject: [PATCH] fix(example): theme the basic-app palette and surface the navigation tour global.css defined its own fixed palette -- bg 0b1020, text e7ecff -- while Wire UI surfaces follow the theme tokens. Switching to light turned the cards light and left this text light with them, so the sign-in form rendered at a contrast of about 1.1 and could not be read. The palette now derives from the wire tokens, and the body wash is tinted from the primary token rather than a fixed blue. Measured on the login form: light goes from 1.1 to 17.7, dark stays at 18.2. Anything an application hardcodes has to be themed as well, or it only ever looks right in one mode. The navigation tour is also reachable now: a Navigation entry in the site nav, translated in both locales, and the page adopts the public layout so there is a way back out of it. Co-Authored-By: Claude Opus 5 --- .claude/launch.json | 4 ++-- examples/basic-app/app/layouts/public.wrn | 1 + examples/basic-app/app/locales/en.json | 3 ++- examples/basic-app/app/locales/es.json | 3 ++- examples/basic-app/app/pages/navigation.wrn | 2 ++ examples/basic-app/app/styles/global.css | 26 ++++++++++++++++----- 6 files changed, 29 insertions(+), 10 deletions(-) diff --git a/.claude/launch.json b/.claude/launch.json index c92f22f0..544754b0 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -9,9 +9,9 @@ "packages/cli/src/index.ts", "dev", "examples/basic-app", - "--port=3410" + "--port=3520" ], - "port": 3410 + "port": 3520 }, { "name": "component-showcase", diff --git a/examples/basic-app/app/layouts/public.wrn b/examples/basic-app/app/layouts/public.wrn index 45f7b755..55a1f9c3 100644 --- a/examples/basic-app/app/layouts/public.wrn +++ b/examples/basic-app/app/layouts/public.wrn @@ -11,6 +11,7 @@ component PublicLayout { {t:nav.chat} {t:nav.dashboard} {t:nav.about} + {t:nav.navigation} diff --git a/examples/basic-app/app/locales/en.json b/examples/basic-app/app/locales/en.json index c1fe6edc..2886371e 100644 --- a/examples/basic-app/app/locales/en.json +++ b/examples/basic-app/app/locales/en.json @@ -4,7 +4,8 @@ "ui": "UI", "chat": "Chat", "dashboard": "Dashboard", - "about": "About" + "about": "About", + "navigation": "Navigation" }, "home": { "title": "Hello from WrNexus", diff --git a/examples/basic-app/app/locales/es.json b/examples/basic-app/app/locales/es.json index a319b016..64d20a5d 100644 --- a/examples/basic-app/app/locales/es.json +++ b/examples/basic-app/app/locales/es.json @@ -4,7 +4,8 @@ "ui": "UI", "chat": "Chat", "dashboard": "Panel", - "about": "Acerca de" + "about": "Acerca de", + "navigation": "Navegación" }, "home": { "title": "Hola desde WrNexus", diff --git a/examples/basic-app/app/pages/navigation.wrn b/examples/basic-app/app/pages/navigation.wrn index 368ae996..aafe1057 100644 --- a/examples/basic-app/app/pages/navigation.wrn +++ b/examples/basic-app/app/pages/navigation.wrn @@ -17,6 +17,8 @@ // attribute would put a brace at the start of the value, which the compiler // reads as an interpolation. page NavigationTour { + layout = "public" + seo { title = "Navigation tour" description = "Every navigation component working together in one shell." diff --git a/examples/basic-app/app/styles/global.css b/examples/basic-app/app/styles/global.css index 21912387..28eff61f 100644 --- a/examples/basic-app/app/styles/global.css +++ b/examples/basic-app/app/styles/global.css @@ -13,12 +13,21 @@ /* --- App theme layered on top of Tailwind's utilities & preflight --- */ +/* + * The app palette is derived from the theme tokens rather than fixed. + * + * These used to be hardcoded dark values. Wire UI surfaces follow the theme, + * so switching to light turned the cards light while this text stayed light + * too -- the sign-in form rendered at a contrast of about 1.1 and was + * unreadable. Anything an app hardcodes here has to be themed as well, or it + * only ever looks right in one mode. + */ :root { - --bg: #0b1020; - --surface: #141a30; - --text: #e7ecff; - --muted: #9aa6d0; - --brand: #6c8cff; + --bg: var(--wire-color-bg); + --surface: var(--wire-color-surface); + --text: var(--wire-color-text); + --muted: var(--wire-color-text-muted); + --brand: var(--wire-color-primary); --radius: 10px; --maxw: 720px; } @@ -36,7 +45,12 @@ body { Roboto, sans-serif; color: var(--text); - background: radial-gradient(1200px 600px at 50% -10%, #1b2750 0%, var(--bg) 60%); + /* Tinted from the primary token so the wash follows the theme too. */ + background: radial-gradient( + 1200px 600px at 50% -10%, + color-mix(in srgb, var(--wire-color-primary) 18%, var(--bg)) 0%, + var(--bg) 60% + ); background-color: var(--bg); }