dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Frutiger Aero theme, pixel-measured contrast fixes, sheet surfaces

Browse source 
Frutiger Aero (Settings -> Theme): a third theme, not a dark/light variant.
A sky gradient with a strip of grass, the glacier blobs become clouds, the
orbs soap bubbles, glass gets the classic horizon gloss and the buttons a
glossy aqua. The light/dark toggles (header, rail, chat header) hide while it
is on and the picker says why; the pre-paint script applies the class before
first paint and the PWA status bar follows (#3fa3e0). Its muted/frost text is
darker than Light's because those labels sit directly on the sky.

Contrast, measured on real pixels (tests/contrast.mjs, now covering aero):
- The light settings sheet was translucent over a dark scrim, so its muted
  text measured ~2.8:1. Sheets and dialogs now use --glass-sheet-bg (a more
  opaque surface), and Light's --text-muted is a touch darker.
- Result: 0 below-minimum findings and 0 axe violations across every screen,
  all three themes, phone and desktop.

Also: the suites now seed the cookie notice as already dismissed (they run as
a returning user); the regression suite opts out to test the notice itself —
the previous deploy failed its gate because the notice blocked a chat chip
click. The notice also hides during immersive sessions (overlay-open), so it
can never cover a study feed.

Version 0.1.8, SW -> freezmo-v54.
This commit is contained in:
Martin Dvořák 2026-10-12 22:10:16 +00:00
commit e56653dae1
21 changed files with 329 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

139
app/globals.css
View file

@ -94,7 +94,7 @@
--hairline-soft: rgb(12 32 62 / 0.08);
--glass-tint: rgb(255 255 255 / 0.55);
--text: #0b1830; /* 16.6:1 on #eef5fd */
--text-muted: #46586f; /* 6.6:1 on light glass */
--text-muted: #40536b; /* 7.2:1 on light glass, 5.9:1 on sheet glass */
--text-subtle: #566a84; /* 5.6:1 on light glass */
--hover: rgb(12 32 62 / 0.05);
--focus: #0ea5e9;
@ -107,6 +107,9 @@
--glass-highlight: rgb(255 255 255 / 0.85);
--glass-shadow: 0 20px 50px -20px rgb(30 64 175 / 0.35);
--glass-solid-bg: rgb(255 255 255 / 0.8); /* question card: more opaque */
/* Sheet panels float over a dark scrim, so they need a more opaque surface
than the cards: at 0.55 the muted text under it measured ~2.8:1. */
--glass-sheet-bg: rgb(255 255 255 / 0.93);
--glass-fallback: rgb(247 251 255 / 0.97); /* no backdrop-filter */
--nav-active-bg: rgb(255 255 255 / 0.75);
--nav-active-border: rgb(56 189 248 / 0.5);
@ -153,6 +156,7 @@
--glass-highlight: rgb(255 255 255 / 0.25);
--glass-shadow: 0 20px 50px -20px rgb(30 64 175 / 0.35);
--glass-solid-bg: rgb(255 255 255 / 0.1);
--glass-sheet-bg: rgb(17 27 46 / 0.94);
--glass-fallback: rgb(16 26 45 / 0.97);
--nav-active-bg: rgb(56 189 248 / 0.14);
--nav-active-border: rgb(56 189 248 / 0.4);
@ -192,6 +196,122 @@
--ice-grain-opacity: 0.045;
}
/* Frutiger Aero — the third theme (Settings → Theme). A bright sky with
clouds and a strip of grass, glossy glass with the classic horizon gloss,
aqua accents. Token-driven like light/dark; the light/dark toggles hide
while it is on (components/ThemeToggle.tsx). */
.aero {
color-scheme: light;
--page: #bfe4fb;
--sidebar: #e3f4ff;
--surface: #ffffff;
--surface-raised: #ffffff;
--surface-strong: rgb(255 255 255 / 0.72);
--card-hover-bg: rgb(255 255 255 / 0.9);
--surface-sunken: rgb(255 255 255 / 0.55);
--hairline: rgb(255 255 255 / 0.8);
--card-border: var(--glass-border);
--sidebar-divider: rgb(255 255 255 / 0.7);
--hairline-soft: rgb(255 255 255 / 0.6);
--glass-tint: rgb(255 255 255 / 0.6);
--text: #05203a; /* 12.6:1 on the aero glass */
--text-muted: #1b3a54; /* 8.4:1 */
--text-subtle: #16324a; /* 7.6:1 on glass, 5.4:1 on the sky */
/* A few components use the frost scale directly (hero descriptions, the
wizard's step help): darker here, because they sit on the sky. */
--color-frost-600: #1d3a55;
--color-frost-700: #16324a;
--hover: rgb(255 255 255 / 0.5);
--focus: #0284c7;
--glass-bg: rgb(255 255 255 / 0.62);
--glass-border: rgb(255 255 255 / 0.9);
--glass-highlight: rgb(255 255 255 / 0.98);
--glass-shadow: 0 18px 44px -20px rgb(2 90 150 / 0.5);
--glass-solid-bg: rgb(255 255 255 / 0.82);
--glass-sheet-bg: rgb(255 255 255 / 0.9);
--glass-fallback: rgb(238 248 255 / 0.97);
--nav-active-bg: rgb(255 255 255 / 0.85);
--nav-active-border: rgb(14 165 233 / 0.65);
--gate-card: rgb(255 255 255 / 0.66);
--gate-callout-bg: rgb(255 255 255 / 0.6);
--gate-callout-border: rgb(56 189 248 / 0.4);
--field: rgb(255 255 255 / 0.75);
--field-border: rgb(255 255 255 / 0.95);
--shadow-gate: 0 30px 70px -34px rgb(2 62 110 / 0.45), 0 1px 2px rgb(2 62 110 / 0.08);
--install-sheet: rgb(255 255 255 / 0.65);
--install-card: rgb(255 255 255 / 0.75);
--install-chip: rgb(255 255 255 / 0.6);
--install-border: rgb(255 255 255 / 0.85);
--shadow-card: 0 2px 4px rgb(2 62 110 / 0.1), 0 12px 28px -14px rgb(2 62 110 / 0.35);
--card-shadow: var(--shadow-card);
--shadow-card-hover: 0 26px 60px -26px rgb(2 90 150 / 0.55), 0 3px 8px rgb(2 90 150 / 0.2);
/* The scene: sky, clouds, bubbles, grass. */
--ice-base-top: #3fa3e0;
--ice-base-bottom: #d9f1ff;
--ice-blob-opacity: 0.55;
--ice-orb-opacity: 0.55;
--ice-grain-opacity: 0.02;
}
/* The blobs are clouds here, not glacier gradients. */
.aero .ice-blob-a,
.aero .ice-blob-b,
.aero .ice-blob-c,
.aero .ice-blob-d {
background: radial-gradient(circle, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.6) 42%, transparent 72%);
}
/* The orbs are soap bubbles: a glassy rim with a bright specular. */
.aero .ice-orb {
background: radial-gradient(
circle at 30% 25%,
rgb(255 255 255 / 0.95) 0%,
rgb(224 247 255 / 0.45) 20%,
rgb(125 211 252 / 0.2) 52%,
rgb(56 189 248 / 0.35) 100%
);
box-shadow: 0 16px 34px -18px rgb(2 90 150 / 0.4), inset 0 -8px 18px -10px rgb(2 90 150 / 0.35);
}
/* A strip of grass along the bottom, like the wallpapers it comes from. */
.aero .ice-scene::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 18vh;
background: linear-gradient(180deg, rgb(134 239 172 / 0) 0%, rgb(74 222 128 / 0.5) 55%, rgb(22 163 74 / 0.6) 100%);
pointer-events: none;
}
/* The Aero gloss: the classic white top half with a horizon line. */
.aero .card,
.aero .glass-panel,
.aero .sidebar-surface,
.aero .study-chrome,
.aero .tabbar,
.aero .glass,
.aero .gate-card {
background-image: linear-gradient(
180deg,
rgb(255 255 255 / 0.7) 0%,
rgb(255 255 255 / 0.28) 46%,
rgb(255 255 255 / 0.04) 47%,
rgb(255 255 255 / 0.22) 100%
);
}
/* Glossy aqua primary buttons and segments. */
.aero .grad-ice,
.aero .btn-primary,
.aero .segmented > button[aria-pressed="true"],
.aero .segmented > a[aria-current="page"] {
background-image: linear-gradient(180deg, #a5e4ff 0%, #38bdf8 52%, #0ea5e9 53%, #0284c7 100%);
color: #052437;
}
html,
body {
height: 100%;
@ -224,7 +344,7 @@ body {
transparent on purpose so the fixed ice scene stays visible — which also
means the app chrome of the page behind it would ghost through the glass.
While one is open, that chrome is hidden instead. */
body:has(.overlay-open) :is(.app-header, .segmented, .tabbar) {
body:has(.overlay-open) :is(.app-header, .segmented, .tabbar, .cookie-notice) {
visibility: hidden;
}
@ -428,7 +548,7 @@ body:has(.overlay-open) :is(.app-header, .segmented, .tabbar) {
.tabbar,
.glass,
.gate-card {
background: var(--glass-bg);
background-color: var(--glass-bg);
box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
@ -451,9 +571,16 @@ body:has(.overlay-open) :is(.app-header, .segmented, .tabbar) {
border: 1px solid var(--glass-border);
}
/* More opaque glass for the study question card, where text must stay crisp. */
/* More opaque glass for the study question card, where text must stay crisp.
background-color (not the shorthand) so the Aero gloss can layer on top. */
.glass-solid {
background: var(--glass-solid-bg);
background-color: var(--glass-solid-bg);
}
/* Sheets and dialogs sit over a scrim (and, on phones, over the page), so
their text needs a more opaque surface than the cards have. */
.glass-sheet {
background-color: var(--glass-sheet-bg);
}
.glass-chip:hover {
background: var(--hover);
@ -496,7 +623,7 @@ body:has(.overlay-open) :is(.app-header, .segmented, .tabbar) {
.study-chrome,
.tabbar,
.glass {
background: var(--glass-fallback);
background-color: var(--glass-fallback);
}
}

2
app/layout.tsx
View file

@ -82,7 +82,7 @@ export const viewport: Viewport = {
* `theme-color` meta in step with the *app* theme (the SSR metas follow the
* OS preference, which is wrong once the user has picked a theme here).
*/
const themeScript = `(function(){try{var DEV=${devInstanceJs};var s=localStorage.getItem('freezmo.theme');var d=s?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');var l=localStorage.getItem('freezmo.locale.v1');if(l==='cs'||l==='en')document.documentElement.lang=l;var m=document.querySelector('meta[name="theme-color"][data-app]');if(!m){m=document.createElement('meta');m.setAttribute('name','theme-color');m.setAttribute('data-app','1');document.head.insertBefore(m,document.head.firstChild);}m.setAttribute('content',DEV?'#b45309':(d?'#0e1424':'#f4f7fd'));}catch(e){}})();`;
const themeScript = `(function(){try{var DEV=${devInstanceJs};var s=localStorage.getItem('freezmo.theme');var a=s==='aero';var d=s&&!a?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');if(a)document.documentElement.classList.add('aero');var l=localStorage.getItem('freezmo.locale.v1');if(l==='cs'||l==='en')document.documentElement.lang=l;var m=document.querySelector('meta[name="theme-color"][data-app]');if(!m){m=document.createElement('meta');m.setAttribute('name','theme-color');m.setAttribute('data-app','1');document.head.insertBefore(m,document.head.firstChild);}m.setAttribute('content',DEV?'#b45309':(a?'#3fa3e0':(d?'#0e1424':'#f4f7fd')));}catch(e){}})();`;
/**
* Captures Chrome's `beforeinstallprompt` (it can fire before React hydrates)