/* ========================================================================== DpiShop / EFTrading — tokens.css Design system a tre livelli. Va accodato PER PRIMO, come dipendenza di ogni altro foglio (tema dpi-style e plugin dpi-wp-marketing). Livello 1 primitive valori grezzi, condivisi fra vetrina e pannello Livello 2 semantici ruoli; mappe separate per vetrina e pannello Livello 3 componente solo dove il ruolo semantico non basta REGOLA: le regole CSS usano SOLO token di livello 2 e 3. Un colore, uno spazio o un raggio scritto a mano in una regola e' un bug, non una scelta. Provenienza dei valori: consolidamento dei 32 --eft-* misurati in CIELab. Ogni sostituzione di colore sta entro dE 2.29 dall'originale (soglia di percezione umana ~2.3), tranne le tre marcate CAMBIO VOLUTO. ========================================================================== */ /* ========================================================================== LIVELLO 1 — PRIMITIVE ========================================================================== */ :root { /* --- famiglia azzurro: superfici, bordi, testi tenui (croma bassa) ------ ATTENZIONE: -150 e -200 hanno la stessa chiarezza (L* 91.4 vs 91.0, dE 1.52). Sono lo stesso colore per l'occhio: non vanno mai adiacenti. -200 come bordo SOPRA -150 come fondo e' un bordo invisibile. */ --dpi-azzurro-025: #F5F8FC; /* L* 97.5 */ --dpi-azzurro-050: #ECF1F7; /* L* 94.9 */ --dpi-azzurro-100: #E2EBF9; /* L* 92.9 */ --dpi-azzurro-150: #DCE8F4; /* L* 91.4 */ --dpi-azzurro-200: #DDE6F0; /* L* 91.0 */ --dpi-azzurro-300: #C7D4E4; /* L* 84.4 */ --dpi-azzurro-400: #9FB2CA; /* L* 71.9 */ --dpi-azzurro-500: #7D8EA8; /* L* 58.5 NUOVO: unico valore >=3:1 su bianco */ --dpi-azzurro-600: #63708A; /* L* 47.1 */ /* --- famiglia blu: azioni e fondi profondi (croma alta) ---------------- */ --dpi-blu-300: #9DC6EE; /* L* 78.3 */ --dpi-blu-500: #2364A4; /* L* 41.5 */ --dpi-blu-550: #3A5A86; /* L* 37.7 */ --dpi-blu-700: #26456F; /* L* 28.9 */ --dpi-blu-750: #123B73; /* L* 25.2 */ --dpi-blu-800: #0D2C56; /* L* 18.2 */ --dpi-blu-900: #0B1F45; /* L* 12.5 */ --dpi-blu-950: #071230; /* L* 6.2 CAMBIO VOLUTO, vedi §piede */ /* --- stati ------------------------------------------------------------- */ --dpi-verde-600: #1F7A3D; /* 5.37:1 su bianco */ --dpi-ambra-600: #B06F14; /* 4.09:1 su bianco -> solo icone e testo grande */ --dpi-ambra-700: #985F10; /* 5.28:1 su bianco -> testo normale NUOVO */ --dpi-rosso-500: #EE3E4C; /* accento di marca, 3.87:1 con bianco */ --dpi-rosso-600: #D92F3D; /* 4.75:1 con bianco */ --dpi-rosso-650: #B23B3B; /* 5.86:1 su bianco */ --dpi-bianco: #FFFFFF; /* --- ombre ------------------------------------------------------------- */ --dpi-ombra-1: 0 8px 22px rgba(11, 31, 69, .05); --dpi-ombra-2: 0 14px 34px rgba(11, 31, 69, .09); /* --- scala di spazio --------------------------------------------------- Passo 4px fino a 40, poi 8px. 2 e 6 sono i passi fini. Copre 122 occorrenze reali: 75 identiche, 47 spostate di <=2px (tre eccezioni a 4px, tutte su un'unica occorrenza). */ --dpi-spazio-0: 0; --dpi-spazio-0-25: 2px; --dpi-spazio-0-5: 4px; --dpi-spazio-0-75: 6px; --dpi-spazio-1: 8px; --dpi-spazio-1-5: 12px; --dpi-spazio-2: 16px; --dpi-spazio-2-5: 20px; --dpi-spazio-3: 24px; --dpi-spazio-3-5: 28px; --dpi-spazio-4: 32px; --dpi-spazio-4-5: 36px; --dpi-spazio-5: 40px; --dpi-spazio-6: 48px; --dpi-spazio-7: 56px; --dpi-spazio-8: 64px; --dpi-spazio-10: 80px; --dpi-spazio-12: 96px; /* --- raggi: 4 passi + 2 forme (da 13 valori) --------------------------- */ --dpi-raggio-0: 0; --dpi-raggio-1: 8px; --dpi-raggio-2: 12px; --dpi-raggio-3: 18px; --dpi-raggio-pillola: 999px; --dpi-raggio-cerchio: 50%; /* --- tipografia: 8 dimensioni (da 21). Nessun mezzo pixel. ------------- */ --dpi-testo-xs: 11px; --dpi-testo-s: 13px; --dpi-testo-m: 16px; --dpi-testo-l: 18px; --dpi-testo-xl: 22px; --dpi-testo-2xl: 28px; --dpi-testo-3xl: 36px; --dpi-testo-4xl: 40px; --dpi-peso-normale: 500; --dpi-peso-medio: 600; --dpi-peso-forte: 700; --dpi-peso-massimo: 800; /* 1 resta letterale dove e' un espediente di layout, non tipografia */ --dpi-interlinea-stretta: 1.15; /* titoli */ --dpi-interlinea-normale: 1.45; /* interfaccia */ --dpi-interlinea-larga: 1.7; /* testo lungo */ --dpi-crenatura-maiuscoletto: 0.16em; --dpi-crenatura-leggera: 0.02em; --dpi-crenatura-nessuna: 0; --dpi-crenatura-stretta: -0.02em; } /* ========================================================================== LIVELLO 2 — SEMANTICI: VETRINA ========================================================================== */ :root { /* testo */ --dpi-testo: var(--dpi-blu-900); /* <- navy, fondo-4 */ --dpi-testo-secondario: var(--dpi-azzurro-600); /* <- muted */ --dpi-testo-su-scuro: var(--dpi-azzurro-100); /* <- tinta-1/2/3, velo-5, tinta-6 */ --dpi-testo-debole-su-scuro: var(--dpi-azzurro-400); /* <- mezzo-2/3, ph-fg */ /* superfici */ --dpi-superficie: var(--dpi-bianco); --dpi-superficie-tenue: var(--dpi-azzurro-025); /* <- soft, velo-1/2/3 */ --dpi-superficie-box: var(--dpi-azzurro-050); /* <- velo-4, ph-bg */ --dpi-superficie-chiara: var(--dpi-azzurro-150); /* <- tinta-4 (fondo hero chiaro) */ --dpi-superficie-scura: var(--dpi-blu-800); /* <- fondo-5 (hero) */ --dpi-superficie-piede: var(--dpi-blu-950); /* <- fondo-6 CAMBIO VOLUTO */ /* bordi */ --dpi-bordo: var(--dpi-azzurro-200); /* <- border, tinta-5 — filetto decorativo */ --dpi-bordo-forte: var(--dpi-azzurro-300); /* <- tinta-7/8 — bordo hover */ --dpi-bordo-controllo: var(--dpi-azzurro-500); /* NUOVO — bordo che E' il controllo */ /* azione */ --dpi-azione: var(--dpi-blu-500); /* <- blue */ --dpi-azione-premuta: var(--dpi-blu-750); /* <- fondo-3 */ --dpi-azione-su-scuro: var(--dpi-blu-300); /* <- mezzo-1 */ --dpi-accento: var(--dpi-rosso-500); /* <- accent */ --dpi-accento-premuto: var(--dpi-rosso-600); /* <- #D92F3D crudo */ /* dati: etichetta piu' tenue del valore */ --dpi-etichetta-dato: var(--dpi-blu-550); /* <- fondo-1 */ --dpi-valore-dato: var(--dpi-blu-700); /* <- fondo-2 */ /* stati */ --dpi-positivo: var(--dpi-verde-600); /* <- #1F7A3D + #1A7A3C crudi */ --dpi-attenzione: var(--dpi-ambra-600); /* <- #B06F14 crudo — icone / testo grande */ --dpi-attenzione-testo:var(--dpi-ambra-700); /* NUOVO — testo normale, AA */ --dpi-negativo: var(--dpi-rosso-650); /* <- #B23B3B crudo */ /* elevazione */ --dpi-ombra-riposo: var(--dpi-ombra-1); /* <- shadow-rest */ --dpi-ombra-sollevata: var(--dpi-ombra-2); /* <- shadow-raised */ } /* ========================================================================== LIVELLO 3 — COMPONENTE / DENSITA' (vetrina) Solo dove il ruolo semantico non basta a decidere. ========================================================================== */ :root { --dpi-gutter: 48px; /* per lato; 96px totali */ --dpi-card-padding: var(--dpi-spazio-2); --dpi-card-raggio: var(--dpi-raggio-3); --dpi-sezione-spazio: var(--dpi-spazio-7); --dpi-controllo-altezza: 44px; /* bersaglio touch minimo */ } /* I breakpoint NON possono essere token: var() non funziona nella condizione di una @media. Restano letterali. Se in futuro si passa a PostCSS, @custom-media li centralizza. I tre valori sono e restano: -- max-width: 921px -- max-width: 544px -- min-width: 922px */ @media (max-width: 921px) { :root { --dpi-gutter: 20px; --dpi-sezione-spazio: var(--dpi-spazio-5); } } @media (max-width: 544px) { :root { --dpi-gutter: 12px; /* 390px di schermo -> 366px utili (erano 294) */ --dpi-card-padding: var(--dpi-spazio-1-5); --dpi-sezione-spazio: var(--dpi-spazio-4); } } /* ========================================================================== LIVELLO 2/3 — SEMANTICI: PANNELLO GESTIONALE Stesse primitive, mappa diversa: piu' denso e piu' contrastato. Lo scope richiede la classe .dpi-pannello sul wrapper (o body.wp-admin). ========================================================================== */ body.wp-admin, .dpi-pannello { /* il gestionale non usa mezzi toni: il testo secondario e' piu' scuro */ --dpi-testo-secondario: var(--dpi-blu-700); --dpi-bordo: var(--dpi-azzurro-300); --dpi-bordo-forte: var(--dpi-azzurro-500); /* densita': un passo in meno su tutto */ --dpi-card-padding: var(--dpi-spazio-1-5); --dpi-card-raggio: var(--dpi-raggio-1); --dpi-sezione-spazio: var(--dpi-spazio-3); --dpi-gutter: var(--dpi-spazio-2); --dpi-controllo-altezza: 32px; /* la densita' la fanno spazi e raggi, non l'interlinea: le tre interlinee sono primitive di livello 1 e non vanno ridefinite per scope. */ /* le ombre sono rumore in una tabella */ --dpi-ombra-riposo: none; --dpi-ombra-sollevata: var(--dpi-ombra-1); } /* ========================================================================== ALIAS DI TRANSIZIONE I vecchi nomi restano validi e puntano ai nuovi: si migra un file alla volta senza che niente resti scoperto. Da rimuovere quando `grep -c 'eft-' ` su tema e plugin da' 0. Lo scope e' un elenco, non solo :root: una custom property che punta a un'altra viene risolta SULL'ELEMENTO IN CUI E' DICHIARATA. Dichiarata solo su :root, dentro l'admin --eft-muted risolverebbe al valore della vetrina invece che a quello del pannello. ========================================================================== */ :root, body.wp-admin, .dpi-pannello { --eft-navy: var(--dpi-testo); --eft-blue: var(--dpi-azione); --eft-muted: var(--dpi-testo-secondario); --eft-soft: var(--dpi-superficie-tenue); --eft-border: var(--dpi-bordo); --eft-accent: var(--dpi-accento); --eft-ph-bg: var(--dpi-superficie-box); --eft-ph-fg: var(--dpi-testo-debole-su-scuro); --eft-shadow-rest: var(--dpi-ombra-riposo); --eft-shadow-raised: var(--dpi-ombra-sollevata); --eft-velo-1: var(--dpi-superficie-tenue); --eft-velo-2: var(--dpi-superficie-tenue); --eft-velo-3: var(--dpi-superficie-tenue); --eft-velo-4: var(--dpi-superficie-box); --eft-velo-5: var(--dpi-testo-su-scuro); --eft-tinta-1: var(--dpi-testo-su-scuro); --eft-tinta-2: var(--dpi-testo-su-scuro); --eft-tinta-3: var(--dpi-testo-su-scuro); --eft-tinta-4: var(--dpi-superficie-chiara); --eft-tinta-5: var(--dpi-bordo); --eft-tinta-6: var(--dpi-testo-su-scuro); --eft-tinta-7: var(--dpi-bordo-forte); --eft-tinta-8: var(--dpi-bordo-forte); --eft-mezzo-1: var(--dpi-azione-su-scuro); --eft-mezzo-2: var(--dpi-testo-debole-su-scuro); --eft-mezzo-3: var(--dpi-testo-debole-su-scuro); --eft-fondo-1: var(--dpi-etichetta-dato); --eft-fondo-2: var(--dpi-valore-dato); --eft-fondo-3: var(--dpi-azione-premuta); --eft-fondo-4: var(--dpi-testo); --eft-fondo-5: var(--dpi-superficie-scura); --eft-fondo-6: var(--dpi-superficie-piede); }