From c089d9e8babec5f377125895d0412c524f6a1784 Mon Sep 17 00:00:00 2001 From: Davide Grilli Date: Sat, 5 Sep 2026 20:02:13 +0200 Subject: [PATCH] =?UTF-8?q?D=C3=A0=20profondit=C3=A0=20alle=20superfici=20?= =?UTF-8?q?e=20trasforma=20la=20barra=20in=20vetro?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fondo pagina, carte e `secondary` stavano dentro tre punti di luminosità: carta e fondo avevano un rapporto di contrasto di 1.04, cioè erano lo stesso bianco. Le carte non si leggevano come carte, e l'unica cosa che le staccava era `shadow-card` — 6% di nero, che su un telefono al sole non esiste. Da qui l'impressione che fondo, barra ed elementi fossero «tre bianchi». La rampa dei neutri è ridistanziata: fondo 0.93, carta 1.0, `secondary` 0.90. Carta e fondo passano a 1.23, un elemento dentro una carta sta a 1.35 dalla carta ed è più scuro di essa, come nelle liste raggruppate di iOS. 0.93 è il fondo più scuro possibile senza toccare altro: il limite lo impone `text-accent` appoggiato sul fondo, che a 0.92 scenderebbe sotto 4.5. Due colori vanno corretti di conseguenza, altrimenti la modifica peggiora la leggibilità: l'accento scende a 0.54 (a 0.58 come testo faceva 4.07 sul nuovo fondo; ora fa 4.62, e migliora anche il bianco che ci sta sopra, da 4.65 a 5.51) e `muted-foreground` a 0.48. Verificati convertendo le oklch in sRGB e calcolando i rapporti, non a occhio. `--destructive` e `--ring` erano *lo stesso identico colore* dell'accento: «elimina», «selezionato» e «ho il focus qui» davano il medesimo segnale. Il distruttivo resta rosso ma più scuro e cupo, il focus viene dal neutro. Le ombre passano da una a tre quote: `shadow-card` per il contenuto, `shadow-chrome` per barra, drawer e toast (più profonda, più il filo chiaro sul bordo alto), `shadow-alza` neutra per l'hover — `premi` metteva un alone rosso sotto ogni riga di classifica. La barra ora usa `vetro`: fondo al 62% invece dell'85%, così ci si vede attraverso, più tre ombre interne che sono il bordo illuminato. L'85% di `materiale` esiste per tenere allineati WebKit e Blink (608f2ed) su una fascia larga quanto lo schermo; su una pillola di 60 px lo scarto non si legge. Dietro `@supports`, un `feDisplacementMap` distorce davvero il fondale: solo Blink accetta un filtro SVG in `backdrop-filter`, e WebKit ignorando l'url scarterebbe anche il blur. Miglioria progressiva, non l'effetto principale. Co-Authored-By: Claude Opus 5 --- public/manifest.webmanifest | 4 +- src/components/crapp/BottomNav.tsx | 68 ++++++++++++--- src/components/ui/drawer.tsx | 2 +- src/components/ui/sonner.tsx | 2 +- src/routes/__root.tsx | 2 +- src/styles.css | 134 ++++++++++++++++++++++++++--- 6 files changed, 185 insertions(+), 27 deletions(-) diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest index c1658b8..493f190 100644 --- a/public/manifest.webmanifest +++ b/public/manifest.webmanifest @@ -5,8 +5,8 @@ "lang": "it", "start_url": "/", "display": "standalone", - "background_color": "#fafafb", - "theme_color": "#fafafb", + "background_color": "#e4e8ed", + "theme_color": "#e4e8ed", "orientation": "portrait", "icons": [ { diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx index bb52fd3..37b0331 100644 --- a/src/components/crapp/BottomNav.tsx +++ b/src/components/crapp/BottomNav.tsx @@ -1,5 +1,7 @@ import { Link } from "@tanstack/react-router"; import { CalendarDays, Home, Trophy, Users } from "lucide-react"; +import { motion, useReducedMotion } from "motion/react"; +import { molla } from "@/lib/molla"; // Quattro voci e non cinque: il profilo sta in alto a destra // nell'intestazione di ogni pagina, dove lo cerca chi arriva da iOS. @@ -11,6 +13,8 @@ const items = [ ] as const; export function BottomNav() { + const ridotto = useReducedMotion(); + return (