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 <noreply@anthropic.com>
29 lines
1.1 KiB
Plaintext
29 lines
1.1 KiB
Plaintext
// Public site layout: top nav + footer. Pages opt in with `layout = "public"`.
|
|
// A layout is a `component` with a <slot> where the page body is injected.
|
|
component PublicLayout {
|
|
view {
|
|
<div data-component="container">
|
|
<header class="site-header">
|
|
<strong class="site-brand">WrNexus</strong>
|
|
<nav class="site-nav">
|
|
<a href="/">{t:nav.home}</a>
|
|
<a href="/ui">{t:nav.ui}</a>
|
|
<a href="/chat">{t:nav.chat}</a>
|
|
<a href="/dashboard">{t:nav.dashboard}</a>
|
|
<a href="/about">{t:nav.about}</a>
|
|
<a href="/navigation">{t:nav.navigation}</a>
|
|
<button type="button" data-wire-theme-toggle aria-label="Toggle color theme">Theme</button>
|
|
<button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="en">EN</button>
|
|
<button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="es">ES</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<slot></slot>
|
|
</main>
|
|
|
|
<footer class="site-footer">Built with WrNexus · Wire UI + theming</footer>
|
|
</div>
|
|
}
|
|
}
|