Corregge i contrasti della palette e toglie il tema scuro

I colori di stato non passavano WCAG AA con il testo bianco sopra: success
3.39:1, training 3.49:1, info ~3.7:1 (chip «Presente», «Allenamento», celle
del calendario). Le luminosità sono abbassate fino a superare 4.5:1.

I gradi dei badge erano il caso peggiore: `text-oro` su bianco sta a 1.9:1 e
`text-argento` a 2.5:1, cioè illeggibili. Nascono i token `--oro-testo`,
`--argento-testo` e `--bronzo-testo` per il testo, mentre le varianti chiare
restano dove servono davvero, su sfondi e bordi.

Il blocco `.dark` non veniva mai applicato — nessun interruttore, nessun
`prefers-color-scheme` — ed era anche incoerente: l'accento diventava
grigio-blu e mancavano success, warning, info, training, i metalli, i due
gradienti e le due ombre. Un tema mai attivato non si accorge di rompersi,
quindi via, con `color-scheme: light` dichiarato esplicitamente.

Nello stesso file:
- `:focus-visible` globale, prima non c'era nessuna regola di focus;
- tracking del display specifico per taglia (`font-display-sm/lg`): un solo
  valore per tutte le dimensioni è sbagliato da qualche parte;
- utility `materiale` e `bordo-sfumato` per la chrome traslucida, con
  `prefers-reduced-transparency` e `prefers-contrast`;
- movimento ridotto: dissolvenza breve invece dell'azzeramento di ogni
  transizione, così resta un feedback che spiega cosa è cambiato;
- rimossi i token di chart e sidebar (i componenti che li usavano non ci sono
  più) e l'import di tw-animate-css, che non era usato da nessuna classe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-05 12:41:25 +02:00
co-authored by Claude Opus 5
parent 7433391c30
commit 38e0185325
2 changed files with 153 additions and 83 deletions
+18 -3
View File
@@ -19,10 +19,25 @@ export type Grado = "bronzo" | "argento" | "oro";
export const gradiOrdine: Grado[] = ["bronzo", "argento", "oro"];
/**
* `text` usa i token `-testo` (varianti scurite): l'oro e l'argento chiari
* stanno sotto 2.5:1 su bianco e come colore di testo sono illeggibili.
* Le versioni chiare restano su sfondi e bordi, dove il contrasto non conta.
*/
export const gradoMeta: Record<Grado, { label: string; text: string; bg: string; ring: string }> = {
bronzo: { label: "Bronzo", text: "text-bronzo", bg: "bg-bronzo/15", ring: "ring-bronzo/40" },
argento: { label: "Argento", text: "text-argento", bg: "bg-argento/20", ring: "ring-argento/50" },
oro: { label: "Oro", text: "text-oro", bg: "bg-oro/20", ring: "ring-oro/50" },
bronzo: {
label: "Bronzo",
text: "text-bronzo-testo",
bg: "bg-bronzo/15",
ring: "ring-bronzo/40",
},
argento: {
label: "Argento",
text: "text-argento-testo",
bg: "bg-argento/20",
ring: "ring-argento/50",
},
oro: { label: "Oro", text: "text-oro-testo", bg: "bg-oro/20", ring: "ring-oro/50" },
};
export type BadgeDef = {