/** * MyBoxOffice admin design tokens — v2 «D chiara» (coerenza.md §1). * * QUESTO FILE CONTIENE SOLO VARIABILI. Niente selettori, niente regole: * il banco tests/verify-admin-tokens.php lo fa rispettare. * * Prefisso --mybo-admin-* riservato al pannello; --mybo-* nudo appartiene * al frontend generato da Personalizza. Mai mescolarli. * * Caricato solo sulle pagine admin del plugin (mybo_admin_shell_enqueue()), * mai sul sito pubblico. * * @author Fabio Vangelista */ :root { /* Accento — rosso sipario (deciso 2026-09-02, ticket 03). CAMBIARE IL COLORE DEL PANNELLO = cambiare QUESTE DUE RIGHE: accent e accent-hover (la versione piu' scura, per testo e passaggio del mouse; tests/verify-contrasto-token.php controlla che resti leggibile). Fondini, aloni e velature (-soft, -glow, -wash) si calcolano da soli con color-mix(): non vanno toccati. */ --mybo-admin-accent: #cf3a5f; --mybo-admin-accent-hover: #b52d50; --mybo-admin-accent-soft: color-mix(in srgb, var(--mybo-admin-accent) 10%, transparent); --mybo-admin-accent-glow: color-mix(in srgb, var(--mybo-admin-accent) 35%, transparent); --mybo-admin-on-accent: #ffffff; /* Il marchio MyBoxOffice: i tre colori della sfumatura del logo (images/myboxoffice-logo.webp). Li usa la pagina di accesso al pannello. */ --mybo-admin-brand-blue: #1663f5; --mybo-admin-brand-violet: #7a3be6; --mybo-admin-brand-pink: #ec4899; --mybo-admin-brand-gradient: linear-gradient(135deg, var(--mybo-admin-brand-blue) 0%, var(--mybo-admin-brand-violet) 55%, var(--mybo-admin-brand-pink) 100%); /* Superfici */ /* ⚠️ DICHIARATA E NON USATA, e resta apposta. Nessun foglio la cita: e' il fondo piu' esterno di un disegno che poi non l'ha adoperato. Fa pero' parte del contratto della tavolozza — tests/verify-admin-tokens.php la pretende — e una tavolozza si legge anche per quello che dichiara. Per la stessa ragione tests/verify-contrasto-token.php NON la conta fra i fondi: nessuno ci scrive sopra (verificato cercandola in tutto il repository), e confrontarci del testo darebbe rossi su coppie che sullo schermo non capitano mai. */ --mybo-admin-bg: #ececef; --mybo-admin-bg-surface: #fbfbfd; --mybo-admin-bg-panel: #f4f4f6; --mybo-admin-bg-toolbar: #ffffff; --mybo-admin-bg-subtle: #f7f7f9; --mybo-admin-card: #ffffff; --mybo-admin-hairline: rgba(0, 0, 0, 0.07); --mybo-admin-hairline-strong: rgba(0, 0, 0, 0.12); /* Testo */ --mybo-admin-text: #1d1d1f; --mybo-admin-text-2: #6e6e73; --mybo-admin-text-3: #87878c; /* Stati (i -soft sono i fondini tenui: barre di riempimento, avvisi) */ --mybo-admin-ok: #34c759; --mybo-admin-ok-text: #1c7b3d; --mybo-admin-ok-soft: color-mix(in srgb, var(--mybo-admin-ok) 22%, transparent); --mybo-admin-warn: #ff9500; --mybo-admin-warn-text: #ae4e00; --mybo-admin-warn-soft: color-mix(in srgb, var(--mybo-admin-warn) 16%, transparent); --mybo-admin-err: #d63638; /* ⚠️ IL ROSSO DA TESTO, che mancava — ed era l'unico dei tre stati senza. `--mybo-admin-err` regge come testo sul bianco delle schede (4,73:1) ma NON sul grigio dei pannelli: 4,30:1, sotto la soglia di leggibilita' di 4,5. Misurato quando la colonna dei comandi ha smesso di usare il suo magenta (Passo 7.13b) e ci sarebbe finita sopra. #b32d2e non e' inventato: e' il rosso che l'amministrazione di WordPress usa per i collegamenti che cancellano. Da' 5,74:1 sui pannelli e 6,30:1 sulle schede. REGOLA: `err` per contorni e riempimenti, `err-text` per il testo. */ --mybo-admin-err-text: #b32d2e; /* Il viola delle OCCASIONI, che non sono arretrati: le proposte dell'AI da guardare. Il rosso dice «si e' rotto qualcosa», e usarlo anche qui faceva sembrare un guasto una cosa che invece conviene aprire. */ --mybo-admin-info: #7c3aed; /* Il viola DA TESTO. Come per gli altri stati: il colore pieno serve a contorni e riempimenti, la variante -text alle frasi. */ --mybo-admin-info-text: #6d28d9; --mybo-admin-info-soft: color-mix(in srgb, var(--mybo-admin-info) 14%, transparent); --mybo-admin-err-soft: color-mix(in srgb, var(--mybo-admin-err) 16%, transparent); /* LE VELATURE — i fondi di una RIGA INTERA che porta uno stato. I -soft (14-22%) sono pensati per una pastiglia larga due parole: stesi su una riga di tabella diventano una fascia colorata che copre il testo e compete con tutto il resto. Le velature stanno sotto il 10%: la riga si riconosce a colpo d'occhio, le parole restano nere su quasi bianco. Chi porta il significato vero e' la barretta piena a sinistra della riga, che usa il colore pieno (--mybo-admin-ok, -warn, …). */ --mybo-admin-ok-wash: color-mix(in srgb, var(--mybo-admin-ok) 9%, transparent); --mybo-admin-warn-wash: color-mix(in srgb, var(--mybo-admin-warn) 10%, transparent); --mybo-admin-err-wash: color-mix(in srgb, var(--mybo-admin-err) 7%, transparent); --mybo-admin-info-wash: color-mix(in srgb, var(--mybo-admin-info) 7%, transparent); --mybo-admin-accent-wash: color-mix(in srgb, var(--mybo-admin-accent) 6%, transparent); /* Raggi */ --mybo-admin-r-lg: 14px; --mybo-admin-r-md: 10px; --mybo-admin-r-sm: 8px; --mybo-admin-r-full: 999px; /* Ombre */ --mybo-admin-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04); --mybo-admin-shadow-overlay: 14px 0 34px rgba(0, 0, 0, 0.10); --mybo-admin-shadow-accent: 0 4px 16px var(--mybo-admin-accent-glow); /* Scala spazi */ --mybo-admin-s1: 4px; --mybo-admin-s2: 8px; --mybo-admin-s3: 12px; --mybo-admin-s4: 16px; --mybo-admin-s5: 22px; --mybo-admin-s6: 30px; /* Movimento */ --mybo-admin-t-fast: 0.15s; --mybo-admin-t-base: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); /* Colonna laterale a scomparsa */ --mybo-admin-rail: 56px; --mybo-admin-rail-open: 252px; --mybo-admin-rail-delay: 1.5s; }