MarcoE
2d7e3c591e
Quasi tutto il testo dell'app stava fra 600 e 800: etichette, valori, indirizzi, conteggi, voci di elenco. Un grassetto ovunque non segnala niente, e la pagina Profilo era il caso peggiore — ogni riga gridava come un titolo. La scala ora ha quattro gradini, documentati nei token: 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 Sopra il 700 non si sale: l'800 dei titoli di card e dell'avatar e' sceso a 700. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
217 lines
8.2 KiB
CSS
217 lines
8.2 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, pannelli di riepilogo, selezione */
|
|
--info-ink: #002339;
|
|
--info-surface: #dff2ff;
|
|
--info-solid: #1877d8;
|
|
|
|
/* 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;
|
|
}
|
|
}
|