ClintchizandClaude Opus 5
7bd4574b08
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>
184 lines
3.8 KiB
CSS
184 lines
3.8 KiB
CSS
/*
|
|
* Global stylesheet. Tailwind v4 is compiled by the `styles.process` hook in
|
|
* wrnexus.config.ts (@tailwindcss/cli) and served at /__wrnexus/styles.css, linked
|
|
* into every page. It styles SSR markup and hydrated components alike.
|
|
*
|
|
* `@source` tells Tailwind which files to scan for class names — our pages and
|
|
* components are `.wrn`/`.tsx` files under app/. Paths are relative to this file.
|
|
*/
|
|
@import "tailwindcss";
|
|
@plugin "@iconify/tailwind4";
|
|
@source "../**/*.wrn";
|
|
@source "../**/*.tsx";
|
|
|
|
/* --- 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: 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;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font:
|
|
16px/1.6 system-ui,
|
|
-apple-system,
|
|
Segoe UI,
|
|
Roboto,
|
|
sans-serif;
|
|
color: var(--text);
|
|
/* 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);
|
|
}
|
|
|
|
#app {
|
|
box-sizing: border-box;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.9rem;
|
|
letter-spacing: -0.02em;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
p {
|
|
color: var(--muted);
|
|
}
|
|
|
|
a {
|
|
color: var(--brand);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
color: white;
|
|
background: var(--brand);
|
|
border: 0;
|
|
padding: 0.5rem 1rem;
|
|
margin: 0.25rem 0.25rem 0.25rem 0;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
transition:
|
|
transform 0.05s ease,
|
|
filter 0.15s ease;
|
|
}
|
|
button:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Page-layout chrome (app/layout.wrn). */
|
|
.site-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.site-brand {
|
|
font-size: 1.15rem;
|
|
color: var(--wire-color-text);
|
|
}
|
|
.site-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
.site-footer {
|
|
margin-top: 2rem;
|
|
padding: 1.25rem 0;
|
|
border-top: 1px solid var(--wire-color-border);
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Dashboard layout (app/layouts/dashboard.wrn). */
|
|
.dash {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
gap: 1.5rem;
|
|
min-height: 60vh;
|
|
}
|
|
.dash-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem 0;
|
|
border-right: 1px solid var(--wire-color-border);
|
|
}
|
|
.dash-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
.dash-main {
|
|
padding: 1rem 0;
|
|
}
|
|
.dash-topbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 1rem;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.dash {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Auth layout (app/layouts/auth.wrn). */
|
|
.auth-wrap {
|
|
min-height: 70vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.auth-card {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
}
|
|
|
|
/* A small utility, to show CSS nesting works through the bundler. */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid #ffffff14;
|
|
border-radius: var(--radius);
|
|
padding: 1.25rem 1.5rem;
|
|
|
|
& strong {
|
|
color: var(--text);
|
|
}
|
|
}
|