MarcoE
1392b0e6d1
Il marchio e' corallo (#ec4c41), rosso profondo e bianco sporco: azzurro non ce n'e'. Nell'app invece era il colore piu' diffuso — lo stato "in corso", la voce attiva della barra, l'avatar, le righe scelte, il pannello di riepilogo — e non stava per niente: era solo il tono che si usa quando un colore serve e non si sa quale. Il ruolo "info" passa alla famiglia dell'ancora navy, cioe' allo stesso colore del testo forte: lo stato informativo smette di portarsi un colore proprio e i colori restano ai toni che significano qualcosa (verde inviato, ambra da completare, rosso da inviare) e all'accento. Il pannello di riepilogo dell'ispezione era l'unico blocco tinto dell'app e diventa bianco come ogni altro pannello: dentro, l'unico colore e' adesso la barra di avanzamento. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
222 lines
8.5 KiB
CSS
222 lines
8.5 KiB
CSS
/* =============================================================================
|
|
SteUP — Token di design
|
|
Implementa STILE_UI.md §2 (ruoli colore) e §3 (scale) sulla palette SteUP.
|
|
Regola: nelle pagine si usano SOLO questi token. Un colore o un raggio
|
|
scritto a mano in una schermata e' un difetto, non una scorciatoia.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* -------------------------------------------------------------------------
|
|
COLORE — ruoli semantici (STILE_UI §2)
|
|
La palette storica di SteUP resta intatta: corallo azione, navy ancora,
|
|
azzurro tenue informativo. Sono stati aggiunti solo i ruoli che
|
|
mancavano: workspace, surfaceMuted, divider, inkMuted e le coppie
|
|
(foreground forte / superficie tenue) dei toni semantici.
|
|
---------------------------------------------------------------------- */
|
|
|
|
/* Accento unico di azione. La sua rarita' e' cio' che lo rende un segnale. */
|
|
--primary: #ec4c41;
|
|
--primary-pressed: #d23a30;
|
|
--on-primary: #ffffff;
|
|
|
|
/* Ancora della struttura: testo forte, icone metrica, foreground su info. */
|
|
--primary-dark: #002339;
|
|
|
|
/* Superfici: lo sfondo pagina e' piu' freddo delle superfici di lavoro.
|
|
Tre gradini netti, cosi' i pannelli staccano senza bisogno di ombre. */
|
|
--workspace: #e9edf2;
|
|
--surface: #ffffff;
|
|
--surface-muted: #f4f6f9;
|
|
--divider: #d9e0e8;
|
|
|
|
/* Testo. Inchiostro pieno per la lettura in pieno sole (Regola del
|
|
Contrasto da Sole): niente grigio chiaro sul corpo del testo. */
|
|
--ink: #000000;
|
|
--ink-muted: #465563; /* 8.3:1 su surface, 7.4:1 su workspace */
|
|
|
|
/* --- Toni semantici -----------------------------------------------------
|
|
Ogni tono e' una tripletta:
|
|
-ink foreground forte: testo e icone sopra la superficie tenue
|
|
-surface riempimento tenue: badge, pannelli, cerchi-icona dei dialog
|
|
-solid riempimento pieno: toast (testo bianco sopra)
|
|
Gli -ink sono scelti per superare 4.5:1 sulla propria superficie tenue:
|
|
i colori "puri" della palette restano per icone e riempimenti pieni,
|
|
dove il contrasto di testo non e' in gioco.
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* Danger — errori, azioni distruttive, priorita' massima */
|
|
--danger-ink: #b3120c;
|
|
--danger-surface: #fdeceb;
|
|
--danger-solid: #e50000;
|
|
|
|
/* Warning — attenzione, dati incompleti, bozze da completare */
|
|
--warning-ink: #8a4f00;
|
|
--warning-surface: #fdf0db;
|
|
--warning-solid: #b26a00;
|
|
|
|
/* Success — conferme, completamenti, sincronizzato */
|
|
--success-ink: #10702f;
|
|
--success-surface: #e4f5e9;
|
|
--success-solid: #26b050;
|
|
|
|
/* Info — stato informativo, selezione.
|
|
Il tono non e' piu' l'azzurro cielo: era il colore piu' diffuso
|
|
dell'interfaccia (stato "in corso", voce attiva della barra, righe
|
|
scelte, avatar) e non compare ne' nel marchio ne' altrove nel sistema.
|
|
Adesso e' l'ancora navy diluita: stessa famiglia del testo forte, quindi
|
|
lo stato informativo non introduce un colore proprio. */
|
|
--info-ink: #002339;
|
|
--info-surface: #dde5ee;
|
|
--info-solid: #002339;
|
|
|
|
/* Neutral — stati senza carica semantica */
|
|
--neutral-ink: #465563;
|
|
--neutral-surface: #f4f6f9;
|
|
--neutral-solid: #465563;
|
|
|
|
/* Focus da tastiera */
|
|
--focus-ring: #258cfb;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
SPAZIATURA (STILE_UI §3)
|
|
---------------------------------------------------------------------- */
|
|
--space-xs: 8px;
|
|
--space-sm: 12px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
|
|
/* Micro-distanze derivate, d'uso frequente */
|
|
--space-2: 2px;
|
|
--space-4: 4px;
|
|
--space-6: 6px;
|
|
--space-10: 10px; /* tra le card di una lista */
|
|
--space-14: 14px;
|
|
--space-18: 18px; /* padding dei pannelli di testata */
|
|
--space-20: 20px;
|
|
--space-22: 22px;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
RAGGI (STILE_UI §3)
|
|
Superfici piu' arrotondate dei controlli; stati completamente stondati.
|
|
---------------------------------------------------------------------- */
|
|
--radius-compact: 8px;
|
|
--radius-control: 16px;
|
|
--radius-surface: 20px;
|
|
--radius-pill: 999px;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
TIPOGRAFIA (STILE_UI §4)
|
|
Scala fissa: si legge a colpo d'occhio, non fa effetto editoriale.
|
|
---------------------------------------------------------------------- */
|
|
--font-sans: "Inter", "SF Pro Display", "Roboto", system-ui, sans-serif;
|
|
|
|
--headline-md-size: 34px;
|
|
--headline-md-height: 1.2;
|
|
--headline-sm-size: 28px;
|
|
--headline-sm-height: 1.25;
|
|
--title-lg-size: 22px;
|
|
--title-lg-height: 1.3;
|
|
--title-md-size: 18px;
|
|
--title-md-height: 1.35;
|
|
--body-lg-size: 16px;
|
|
--body-lg-height: 1.5;
|
|
--body-md-size: 15px;
|
|
--body-md-height: 1.45;
|
|
--label-lg-size: 14px;
|
|
--label-md-size: 13px;
|
|
--label-sm-size: 12px;
|
|
|
|
/* PESI — il grassetto e' un segnale, e un segnale ovunque non segnala
|
|
niente. Quattro gradini, e non si sale sopra il 700:
|
|
400 corpo, metadati, valori descrittivi
|
|
500 etichette di campo, voci di lista, testo dei controlli
|
|
600 stati brevi (badge, voce attiva), nomi in una riga di elenco
|
|
700 titoli: uno solo per blocco */
|
|
--weight-body: 400;
|
|
--weight-label: 500;
|
|
--weight-strong: 600;
|
|
--weight-title: 700;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
MISURE STRUTTURALI
|
|
---------------------------------------------------------------------- */
|
|
--appbar-height: 80px;
|
|
--navbar-height: 68px;
|
|
--touch-min: 44px;
|
|
--button-height: 48px;
|
|
--content-max: 920px;
|
|
|
|
/* Spazio che le pagine lasciano in fondo per non finire sotto la barra
|
|
flottante di navigazione (STILE_UI §6.15). */
|
|
--nav-clearance: 116px;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
MOVIMENTO
|
|
Curve esponenziali in uscita: il movimento serve allo stato, mai alla
|
|
scena. Durate da prodotto, l'utente e' dentro un compito.
|
|
---------------------------------------------------------------------- */
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--duration-fast: 120ms;
|
|
--duration-base: 200ms;
|
|
--duration-slow: 280ms;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
PROFONDITA' — scala semantica, mai valori arbitrari
|
|
Le superfici sono piatte (STILE_UI §1): questi livelli ordinano solo
|
|
cio' che galleggia davvero.
|
|
---------------------------------------------------------------------- */
|
|
--z-base: 0;
|
|
--z-sticky: 10;
|
|
--z-navbar: 20;
|
|
--z-connection: 30;
|
|
--z-overlay: 40;
|
|
--z-modal: 50;
|
|
--z-toast: 60;
|
|
|
|
/* L'unica ombra del sistema: il toast (STILE_UI §6.9). */
|
|
--shadow-toast: 0 6px 20px rgba(0, 0, 0, 0.24);
|
|
|
|
/* Breakpoint (STILE_UI §3) — documentati qui, usati nelle media query:
|
|
rail 720px · twoColumn 900px · contentMax 1180px */
|
|
}
|
|
|
|
/* =============================================================================
|
|
Gradino compatto — schermi stretti (≤380px)
|
|
|
|
Il terminale da campo (Honeywell EDA52) ha 360 punti logici di larghezza,
|
|
molto meno dei telefoni per cui la scala di STILE_UI è tarata: a misura
|
|
piena i titoli si troncano, il testo va a capo e in una schermata entra
|
|
pochissimo lavoro. Qui la scala scende di un gradino — le proporzioni e i
|
|
rapporti restano quelli del documento, cambia solo la taglia.
|
|
|
|
È l'"Adattamento locale" del §8: i componenti si riorganizzano sotto le
|
|
soglie invece di pretendere lo spazio che non c'è.
|
|
========================================================================== */
|
|
|
|
@media (max-width: 380px) {
|
|
:root {
|
|
--headline-md-size: 28px;
|
|
--headline-sm-size: 22px;
|
|
--title-lg-size: 18px;
|
|
--title-md-size: 16px;
|
|
--body-lg-size: 15px;
|
|
--body-md-size: 14px;
|
|
--label-lg-size: 13px;
|
|
--label-md-size: 12px;
|
|
--label-sm-size: 11px;
|
|
|
|
--space-lg: 20px;
|
|
--space-xl: 24px;
|
|
--space-18: 14px;
|
|
--space-20: 16px;
|
|
--space-22: 18px;
|
|
|
|
--appbar-height: 64px;
|
|
--button-height: 44px;
|
|
--navbar-height: 62px;
|
|
--nav-clearance: 104px;
|
|
}
|
|
}
|