Aero uses the real wallpaper + liquid glass buttons
The wallpaper is the one from the mockup: "The S Aesthetic That You Definitely Recognize Frutiger Aero" via WallpaperSafari (https://wallpapersafari.com/w/IlWuz7) — the URL in the request pointed at a different (teal abstract) wallpaper, this is the grass/sky/water one that matches the screenshot. Re-encoded to a 237 kB WebP in public/aero/, used as the scene in aero only (light/dark never download it), and credited in Settings next to the theme picker. The drawn CSS scene (rays, reeds, skyline, caustics) is off over the photo; the ten rising bubbles stay, and the orbs became extra bubbles. Buttons and segments are liquid glass now — translucent, glossed top half, bright rim, backdrop blur — instead of the solid aqua fill. Helper lines that sit straight on the wallpaper (the keyboard tip, the AI note) get a small glass chip: dark text on grass measured 2.5:1. Also carries: the underwater scene + bubbles work, the floating cookie notice, the Czech title (Tvůj mrazák) and the review-suite fix that made the last deploy fail its gate. Contrast: 0 below-minimum findings, 0 axe violations across all three themes. Version 0.2.2, SW -> freezmo-v56.
This commit is contained in:
parent
67e2cefcfe
commit
f1c4a89adc
10 changed files with 83 additions and 78 deletions
22
README.md
22
README.md
|
|
@ -1399,17 +1399,17 @@ Things I chose while building, with the reasoning:
|
|||
monthly-limit body, a two-device sync round-trip, and the generation guards below).
|
||||
|
||||
63. **Frutiger Aero is the third theme.** Settings → Theme offers Light, Dark and Frutiger Aero.
|
||||
Aero is not a dark/light variant — it replaces the palette (a sky gradient with a strip of
|
||||
grass, glossy glass with the classic horizon gloss, aqua buttons) and the scene (the glacier
|
||||
blobs become clouds, the orbs soap bubbles) — so the light/dark toggles (header, rail, chat
|
||||
header) hide while it is on and the picker says so. The pre-paint script applies the class
|
||||
before the first paint and the PWA status bar follows it (#2fa7e6). The scene is an underwater
|
||||
one: sun shafts, caustic patches, reeds on the left, a city silhouette on the right and ten
|
||||
rising bubbles (`.ice-bubble` — `display: none` outside aero, so they cost nothing in the other
|
||||
themes, and they sit still under reduced motion). Its glass is a pale blue at 0.8 opacity:
|
||||
transparent enough to read as glass, opaque enough that the dark navy text clears 4.5:1 over the
|
||||
water — and the phone tab bar mixes the sheet glass rather than the page, which in aero *is* the
|
||||
water. Covered by the axe and pixel-contrast scans in all three themes.
|
||||
Aero is not a dark/light variant — it replaces the palette and the scene: the wallpaper is
|
||||
*“The S Aesthetic That You Definitely Recognize Frutiger Aero”* via WallpaperSafari
|
||||
(<https://wallpapersafari.com/w/IlWuz7>, re-encoded to a 237 kB WebP in `public/aero/` and
|
||||
credited in Settings), with ten drawn bubbles rising over it (`.ice-bubble` — `display: none`
|
||||
outside aero so they cost nothing elsewhere, still under reduced motion). Buttons and segments
|
||||
are **liquid glass** (translucent, glossed top half, bright rim, backdrop blur), the cards are
|
||||
pale blue glass, and the helper lines that sit straight on the wallpaper (the keyboard tip, the
|
||||
AI note) get their own small glass chip — dark text on grass measured 2.5:1. The light/dark
|
||||
toggles (header, rail, chat header) hide while it is on and the picker says why; the PWA status
|
||||
bar follows the wallpaper's sky (#2fa7e6). Covered by the axe and pixel-contrast scans in all
|
||||
three themes.
|
||||
|
||||
62. **Accessibility: axe is clean everywhere, and contrast is measured on real pixels.** axe cannot
|
||||
judge text on blurred glass — it reports those nodes as "incomplete" — so `tests/contrast.mjs`
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue