From 2d7e3c591e0ffed67c8b9e585beb6199e2dcc983 Mon Sep 17 00:00:00 2001 From: MarcoE Date: Thu, 17 Sep 2026 12:46:28 +0200 Subject: [PATCH] Dai una gerarchia ai pesi tipografici MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- SteUp.Shared/wwwroot/css/base.css | 6 +-- SteUp.Shared/wwwroot/css/components.css | 38 +++++++++---------- SteUp.Shared/wwwroot/css/forms.css | 20 +++++----- .../wwwroot/css/mudblazor-overrides.css | 8 ++-- SteUp.Shared/wwwroot/css/tokens.css | 11 ++++++ 5 files changed, 47 insertions(+), 36 deletions(-) diff --git a/SteUp.Shared/wwwroot/css/base.css b/SteUp.Shared/wwwroot/css/base.css index 1d25549..6211265 100644 --- a/SteUp.Shared/wwwroot/css/base.css +++ b/SteUp.Shared/wwwroot/css/base.css @@ -116,13 +116,13 @@ img { .t-label-lg { font-size: var(--label-lg-size); line-height: 1.25; - font-weight: 600; + font-weight: 500; } .t-label-md { font-size: var(--label-md-size); line-height: 1.25; - font-weight: 600; + font-weight: 500; } /* Identificativo tecnico sopra il titolo di una card (STILE_UI §4) */ @@ -142,7 +142,7 @@ img { .t-meta { font-size: var(--body-md-size); line-height: var(--body-md-height); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } diff --git a/SteUp.Shared/wwwroot/css/components.css b/SteUp.Shared/wwwroot/css/components.css index 9bed134..387aab3 100644 --- a/SteUp.Shared/wwwroot/css/components.css +++ b/SteUp.Shared/wwwroot/css/components.css @@ -46,7 +46,7 @@ .appbar__subtitle { font-size: var(--label-md-size); line-height: 1.3; - font-weight: 600; + font-weight: 500; color: var(--ink-muted); margin-top: var(--space-2); } @@ -151,7 +151,7 @@ border-radius: var(--radius-pill); font-size: var(--label-sm-size); line-height: 1.2; - font-weight: 700; + font-weight: 600; white-space: nowrap; } @@ -197,7 +197,7 @@ .list-card__title { font-size: var(--title-lg-size); line-height: 1.15; - font-weight: 800; + font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-top: var(--space-2); @@ -207,7 +207,7 @@ margin-top: var(--space-6); font-size: var(--body-md-size); line-height: var(--body-md-height); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } @@ -219,7 +219,7 @@ gap: var(--space-6); margin-top: var(--space-sm); font-size: var(--body-md-size); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } @@ -267,7 +267,7 @@ .summary__subtitle { margin-top: var(--space-2); font-size: var(--body-md-size); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } @@ -299,7 +299,7 @@ .summary__metric-label { font-size: var(--label-sm-size); line-height: 1.3; - font-weight: 600; + font-weight: 500; color: var(--ink-muted); white-space: nowrap; overflow: hidden; @@ -316,7 +316,7 @@ .summary__progress-count { font-size: var(--body-md-size); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } @@ -377,7 +377,7 @@ background-color: var(--surface-muted); color: var(--ink-muted); font-size: var(--label-lg-size); - font-weight: 600; + font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), @@ -436,7 +436,7 @@ border-radius: var(--radius-compact); font-size: var(--body-lg-size); line-height: 1.4; - font-weight: 600; + font-weight: 500; } .feedback__icon { font-size: 20px; line-height: 1.2; flex: 0 0 auto; } @@ -687,7 +687,7 @@ .sheet__subtitle { margin-top: var(--space-2); font-size: var(--body-md-size); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } @@ -740,7 +740,7 @@ border: none; font-family: inherit; font-size: var(--body-lg-size); - font-weight: 600; + font-weight: 400; color: var(--ink); text-align: left; } @@ -767,7 +767,7 @@ background-color: var(--info-surface); color: var(--primary-dark); font-size: 22px; - font-weight: 800; + font-weight: 700; flex: 0 0 auto; } @@ -792,7 +792,7 @@ .field-tap__label { font-size: var(--label-md-size); line-height: 1.25; - font-weight: 600; + font-weight: 500; color: var(--ink-muted); } @@ -802,7 +802,7 @@ gap: 7px; margin-top: 5px; font-size: var(--body-lg-size); - font-weight: 600; + font-weight: 500; color: var(--ink); overflow: hidden; } @@ -832,7 +832,7 @@ padding: var(--space-6) var(--space-md); padding-top: calc(var(--space-6) + env(safe-area-inset-top, 0px)); font-size: var(--label-md-size); - font-weight: 700; + font-weight: 600; color: #ffffff; transform: translateY(-100%); transition: transform var(--duration-slow) var(--ease-out); @@ -969,7 +969,7 @@ color: #ffffff; font-family: inherit; font-size: var(--body-lg-size); - font-weight: 700; + font-weight: 600; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } @@ -999,7 +999,7 @@ gap: var(--space-xs); margin-top: var(--space-20); font-size: var(--label-md-size); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); } @@ -1063,7 +1063,7 @@ text-align: center; font-size: var(--body-lg-size); line-height: 1.4; - font-weight: 600; + font-weight: 500; color: var(--ink); } diff --git a/SteUp.Shared/wwwroot/css/forms.css b/SteUp.Shared/wwwroot/css/forms.css index e21c8d3..92dbc78 100644 --- a/SteUp.Shared/wwwroot/css/forms.css +++ b/SteUp.Shared/wwwroot/css/forms.css @@ -27,14 +27,14 @@ gap: var(--space-xs); font-size: var(--label-md-size); line-height: 1.25; - font-weight: 600; + font-weight: 500; color: var(--ink-muted); margin-bottom: var(--space-6); } .form-group__count { font-size: var(--label-md-size); - font-weight: 700; + font-weight: 500; color: var(--ink-muted); } @@ -45,7 +45,7 @@ .form-group input, .form-group .mud-select-input { font-size: var(--body-lg-size); - font-weight: 600; + font-weight: 500; color: var(--ink); min-height: var(--touch-min); } @@ -53,7 +53,7 @@ .form-group--required .form-group__label::after { content: "obbligatorio"; font-size: var(--label-sm-size); - font-weight: 700; + font-weight: 500; color: var(--ink-muted); } @@ -65,7 +65,7 @@ gap: var(--space-6); margin-top: var(--space-xs); font-size: var(--body-md-size); - font-weight: 600; + font-weight: 500; color: var(--danger-ink); } @@ -90,7 +90,7 @@ color: var(--ink-muted); font-family: inherit; font-size: var(--label-lg-size); - font-weight: 600; + font-weight: 500; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), @@ -135,7 +135,7 @@ outline: none; font-family: inherit; font-size: var(--body-lg-size); - font-weight: 600; + font-weight: 500; color: var(--ink); /* Il codice si legge cifra per cifra: cifre a larghezza fissa. */ font-variant-numeric: tabular-nums; @@ -197,14 +197,14 @@ .art-item__name { font-size: var(--body-lg-size); line-height: 1.25; - font-weight: 700; + font-weight: 600; color: var(--ink); } .art-item__code { margin-top: var(--space-2); font-size: var(--label-md-size); - font-weight: 600; + font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; } @@ -301,7 +301,7 @@ background-color: var(--surface); font-family: inherit; font-size: var(--body-lg-size); - font-weight: 600; + font-weight: 500; color: var(--ink); text-align: left; transition: transform var(--duration-fast) var(--ease-out), diff --git a/SteUp.Shared/wwwroot/css/mudblazor-overrides.css b/SteUp.Shared/wwwroot/css/mudblazor-overrides.css index e007786..122263f 100644 --- a/SteUp.Shared/wwwroot/css/mudblazor-overrides.css +++ b/SteUp.Shared/wwwroot/css/mudblazor-overrides.css @@ -60,7 +60,7 @@ --mud-typography-subtitle2-family: var(--mud-typography-default-family); --mud-typography-subtitle2-size: var(--body-md-size); - --mud-typography-subtitle2-weight: 600; + --mud-typography-subtitle2-weight: 500; --mud-typography-body1-family: var(--mud-typography-default-family); --mud-typography-body1-size: var(--body-lg-size); @@ -78,7 +78,7 @@ --mud-typography-caption-family: var(--mud-typography-default-family); --mud-typography-caption-size: var(--label-md-size); - --mud-typography-caption-weight: 600; + --mud-typography-caption-weight: 500; } /* ----------------------------------------------------------------------------- @@ -236,7 +236,7 @@ .mud-input-helper-text.mud-input-error, .mud-input-error .mud-input-helper-text { color: var(--danger-ink); - font-weight: 600; + font-weight: 500; } /* Il testo segnaposto deve restare leggibile al sole: stesso contrasto del @@ -276,7 +276,7 @@ border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--label-sm-size); - font-weight: 700; + font-weight: 600; letter-spacing: normal; text-transform: none; } diff --git a/SteUp.Shared/wwwroot/css/tokens.css b/SteUp.Shared/wwwroot/css/tokens.css index 2aac3c0..93bc517 100644 --- a/SteUp.Shared/wwwroot/css/tokens.css +++ b/SteUp.Shared/wwwroot/css/tokens.css @@ -122,6 +122,17 @@ --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 ---------------------------------------------------------------------- */