/* ============================================================ SEMANTIC, ruoli, non valori È l'UNICO livello che i componenti hanno il permesso di usare. Un componente non deve MAI nominare --n-* , --a-* o un colore. Dipende da: themes/*.css, che forniscono --n-1 … --n-12 scala neutra --a-1 … --a-12 scala accento --on-accent foreground sopra --a-9 (tecnica: Material 3) ============================================================ */ :root { /* ---------- SUPERFICI (step 1-5) ---------- */ --bg: var(--n-1); /* fondo pagina */ --bg-subtle: var(--n-2); /* fondo tenue, sidebar, code block */ --surface: var(--n-3); /* fondo componente */ --surface-hover: var(--n-4); --surface-active: var(--n-5); /* ---------- BORDI (step 6-8) ---------- */ --border-subtle: var(--n-6); /* separatori, elementi NON interattivi */ --border: var(--n-7); /* bordo interattivo */ --border-strong: var(--n-8); /* hover del bordo, focus ring */ /* ---------- TESTO (step 11-12) ---------- */ --fg-subtle: var(--n-11); /* testo secondario, garantito Lc 60 */ --fg: var(--n-12); /* testo principale, garantito Lc 90 */ /* ---------- ACCENTO ---------- */ --accent-surface: var(--a-3); --accent-surface-hover: var(--a-4); --accent-border: var(--a-7); --accent-border-strong: var(--a-8); /* Lo step 9 è il colore del tema. MA se lo step 9 non raggiunge 4.5:1 con il suo --on-accent, il tema ridefinisce --accent-solid con uno step che ci arriva (vedi jade.css e tomato.css). Lo step 9 resta il colore "display" del brand, --accent-solid è quello che porta testo. */ --accent-solid: var(--a-9); /* hover derivato, non dichiarato: funziona in entrambe le modalità perché mescola verso il foreground corrente */ --accent-solid-hover: color-mix(in oklab, var(--accent-solid) 88%, var(--fg)); --accent-fg: var(--a-11); /* testo colorato leggibile */ --accent-fg-strong: var(--a-12); /* --on-accent viene dal tema: NON assumere che sia bianco */ /* ---------- ACCENTO SECONDARIO ---------- Solo i temi "duotone" dichiarano --a2-*. Se non c'è, tutto ricade sull'accento primario: il CSS non si rompe mai. ⚠ NON è un secondo colore per le azioni. Vedi PRINCIPLES 1-bis: serve per dati, illustrazioni e accostamenti deliberati. I bottoni usano SEMPRE --accent-solid. */ --accent-2-surface: var(--a2-3, var(--a-3)); --accent-2-border: var(--a2-7, var(--a-7)); /* fallback su --accent-solid, non su --a-9: così un tema non duotone eredita un valore già verificato per il contrasto */ --accent-2-solid: var(--a2-9, var(--accent-solid)); --accent-2-fg: var(--a2-11, var(--a-11)); --on-accent-2: var(--on-accent); /* i temi duotone lo ridefiniscono */ /* ---------- LAYER (tecnica: Carbon) ---------- Il componente scrive background: var(--layer) e non sa a che profondità si trova. Il contenitore incrementa il contesto. */ --layer: var(--bg); --layer-hover: var(--surface-hover); --layer-border: var(--border-subtle); } [data-layer="1"] { --layer: var(--n-2); --layer-hover: var(--n-3); } [data-layer="2"] { --layer: var(--n-3); --layer-hover: var(--n-4); } [data-layer="3"] { --layer: var(--n-4); --layer-hover: var(--n-5); } /* ============================================================ STATI, colori di sistema, IDENTICI in tutti i temi. Il rosso di errore non deve cambiare perché cambia il tema. Scale derivate da Radix Colors (MIT). ============================================================ */ :root, [data-mode="light"] { /* I "solid" NON sono lo step 9 delle scale Radix: lo step 9 con testo bianco si ferma a 3.1-3.9:1, sotto la soglia di 4.5 per il testo normale. Sono gli step 11, verificati ≥4.5:1 con il bianco. Lo step 9 resta disponibile come --*-border per i bordi. */ --success-surface: #e6f7ed; --success-border: #29a383; --success-solid: #208368; --success-fg: #1a6b52; --on-success: #ffffff; /* 4.66:1 */ --warning-surface: #fff7c2; --warning-border: #e9c162; --warning-solid: #ffc53d; --warning-fg: #8a5000; --on-warning: #2b1d06; /* ⚠ SCURO: l'ambra non regge il bianco, 10.39:1 */ --danger-surface: #feebec; --danger-border: #e5484d; --danger-solid: #ce2c31; --danger-fg: #ce2c31; --on-danger: #ffffff; /* 5.21:1 */ --info-surface: #e6f4fe; --info-border: #0090ff; --info-solid: #0d74ce; --info-fg: #0b63b0; --on-info: #ffffff; /* 4.77:1 */ --shadow-color: 220 40% 12%; } [data-mode="dark"] { /* Le SUPERFICI e i testi si invertono per la modalità scura. I "solid" restano identici: il contrasto con il bianco è assoluto, non dipende dallo sfondo della pagina. */ --success-surface: #0f2e22; --success-border: #246854; --success-solid: #208368; --success-fg: #1fd8a4; --on-success: #ffffff; --warning-surface: #302008; --warning-border: #714f19; --warning-solid: #ffc53d; --warning-fg: #ffca16; --on-warning: #2b1d06; --danger-surface: #3b1219; --danger-border: #8c333a; --danger-solid: #ce2c31; --danger-fg: #ff9592; --on-danger: #ffffff; --info-surface: #0d2847; --info-border: #205d9e; --info-solid: #0d74ce; --info-fg: #70b8ff; --on-info: #ffffff; --shadow-color: 220 60% 2%; } /* ============================================================ ELEVAZIONE, bordo e ombra componibili in un solo token (tecnica: Geist. L'anello non occupa spazio nel box model.) ============================================================ */ :root { --ring: 0 0 0 1px var(--border-subtle); --ring-strong: 0 0 0 1px var(--border); --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.08), 0 1px 1px hsl(var(--shadow-color) / 0.06); --shadow-2: 0 8px 24px -6px hsl(var(--shadow-color) / 0.16), 0 2px 6px -2px hsl(var(--shadow-color) / 0.10); /* Un elemento a filo con la superficie */ --elevation-flat: var(--ring); /* Un elemento leggermente sollevato */ --elevation-raised: var(--ring), var(--shadow-1); /* Overlay, dropdown, modal, gli UNICI che meritano ombra piena */ --elevation-overlay: var(--ring-strong), var(--shadow-2); } [data-mode="dark"] { --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.60); --shadow-2: 0 8px 24px -6px hsl(var(--shadow-color) / 0.70), 0 2px 6px -2px hsl(var(--shadow-color) / 0.50); } /* ============================================================ SUPERFICI DI SISTEMA color-scheme dice al browser di che colore sono le cose che disegna LUI e che il CSS non raggiunge: barre di scorrimento native, caret di testo, menu dei select, sfondo tra la fine della pagina e il bordo della finestra. Senza questa riga, in modalità scura restano bianchi. È una delle differenze più visibili tra un tema scuro fatto bene e uno fatto a metà. ============================================================ */ :root, [data-mode="light"] { color-scheme: light; } [data-mode="dark"] { color-scheme: dark; } /* ============================================================ BARRA DI SCORRIMENTO Due sintassi perché il supporto è diviso: · scrollbar-width / scrollbar-color standard, Firefox e Chrome 121+. Poche opzioni ma nessun compromesso. · ::-webkit-scrollbar Safari e Chrome vecchi. Più controllo: pista, pollice, raggi, transizioni. Si dichiarano entrambe: dove valgono le due, vince la standard. ============================================================ */ :root { --scroll-w: 10px; --scroll-thumb: color-mix(in oklab, var(--fg) 22%, transparent); --scroll-thumb-hover: color-mix(in oklab, var(--fg) 38%, transparent); } * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: var(--scroll-w); height: var(--scroll-w); } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-corner { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-full); /* il bordo trasparente ritaglia il pollice verso l'interno: è così che si ottiene un pollice sottile con una pista larga e comoda da agganciare col mouse */ border: 3px solid transparent; background-clip: padding-box; transition: background-color var(--dur-normal) var(--ease-out); } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; } *::-webkit-scrollbar-thumb:active { background: var(--accent-solid); background-clip: padding-box; } /* Aree scorrevoli dove la barra deve sparire del tutto (caroselli, liste di filtri): la si nasconde, ma il contenuto resta raggiungibile da tastiera e con lo swipe. */ .scroll-hidden { scrollbar-width: none; } .scroll-hidden::-webkit-scrollbar { display: none; } /* Evita il salto di layout quando compare la barra */ .scroll-stable { scrollbar-gutter: stable; } /* ============================================================ FOCUS: un solo anello per tutto ciò che è interattivo. Non comprimere mai in modalità compatta. ============================================================ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--static-focus-ring) solid var(--accent-solid); outline-offset: var(--static-focus-offset); border-radius: var(--r-sm); }