From 997ea817cbef3dc492033351f64a1442e5371b18 Mon Sep 17 00:00:00 2001 From: jtricerolph Date: Mon, 31 Aug 2026 11:48:09 +0000 Subject: [PATCH] Bump contrast on today-block/next-day-card/day-card for tablet viewing The shared --surface/--surface-2 tokens (7-8% white) read as barely there against the navy background on the 10" kiosk tab. Added a --surface-strong/--surface-strong-border pair (13%/22%) scoped to these 3 cards specifically, rather than touching the shared design tokens which stay verbatim across apps. Also gives next-day-card and day-card a border they didn't have before, for definition beyond just the background tint. Co-Authored-By: Claude Sonnet 5 --- frontend/src/index.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index f1f3ab4..83784b8 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -25,6 +25,11 @@ body { background: var(--body-bg); color: var(--text-dark); font-family: var(--f :root { --app-primary: #0ea5e9; --app-primary-light: #38bdf8; + /* A stronger surface than the shared --surface/--surface-2 tokens, for the + display's 3 main content cards (today block, next-day cards, daily cards) — + the shared tokens read as barely-there on a tablet under lobby lighting. */ + --surface-strong: rgba(255, 255, 255, 0.13); + --surface-strong-border: rgba(255, 255, 255, 0.22); } *, *::before, *::after { box-sizing: border-box; } @@ -127,8 +132,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; } group, not a continuation of the "Coming up" cards below it. Fills its grid row exactly (see the .wx-display comment above). */ .wx-today-block { - background: var(--surface); - border: 1px solid var(--surface-2); + background: var(--surface-strong); + border: 1px solid var(--surface-strong-border); border-radius: var(--radius); padding: clamp(8px, 1.4vh, 16px); display: flex; @@ -178,7 +183,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; } min-height: 0; } .wx-next-day-card { - background: var(--surface); + background: var(--surface-strong); + border: 1px solid var(--surface-strong-border); border-radius: var(--radius); padding: clamp(8px, 1.2vh, 14px); display: flex; @@ -224,7 +230,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; } gap: 6px; padding: clamp(8px, 1.2vh, 14px) 6px; border-radius: var(--radius); - background: var(--surface); + background: var(--surface-strong); + border: 1px solid var(--surface-strong-border); } .wx-day-name { font-weight: 700; font-size: clamp(0.78rem, 0.92vw, 0.98rem); } .wx-day-temps { display: flex; gap: 8px; font-size: clamp(0.75rem, 0.88vw, 0.95rem); }