hotel-manage-stack/weather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bump contrast on today-block/next-day-card/day-card for tablet viewing

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-31 11:48:09 +00:00
parent bfcca4ea11
commit 997ea817cb
1 changed files with 11 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/index.css
View file

@ -25,6 +25,11 @@ body { background: var(--body-bg); color: var(--text-dark); font-family: var(--f
:root { :root {
--app-primary: #0ea5e9; --app-primary: #0ea5e9;
--app-primary-light: #38bdf8; --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; } *, *::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 group, not a continuation of the "Coming up" cards below it. Fills its grid
row exactly (see the .wx-display comment above). */ row exactly (see the .wx-display comment above). */
.wx-today-block { .wx-today-block {
background: var(--surface); background: var(--surface-strong);
border: 1px solid var(--surface-2); border: 1px solid var(--surface-strong-border);
border-radius: var(--radius); border-radius: var(--radius);
padding: clamp(8px, 1.4vh, 16px); padding: clamp(8px, 1.4vh, 16px);
display: flex; display: flex;
@ -178,7 +183,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
min-height: 0; min-height: 0;
} }
.wx-next-day-card { .wx-next-day-card {
background: var(--surface); background: var(--surface-strong);
border: 1px solid var(--surface-strong-border);
border-radius: var(--radius); border-radius: var(--radius);
padding: clamp(8px, 1.2vh, 14px); padding: clamp(8px, 1.2vh, 14px);
display: flex; display: flex;
@ -224,7 +230,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
gap: 6px; gap: 6px;
padding: clamp(8px, 1.2vh, 14px) 6px; padding: clamp(8px, 1.2vh, 14px) 6px;
border-radius: var(--radius); 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-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); } .wx-day-temps { display: flex; gap: 8px; font-size: clamp(0.75rem, 0.88vw, 0.95rem); }