@import url('/_content/SocialWS.Theme.Sereno/fonts/fonts.css'); /* ============================================================ * Direzione «SERENO» — Design Tokens * Tema gemello di Aedis Brezza per il gestionale documentale dei Comuni * (nome di prodotto non ancora confermato: qui «C3» è un segnaposto). * ------------------------------------------------------------ * SOSTITUISCE tokens.css di Aedis.Theme.Brezza 2.8.2 uno a uno: * stessi NOMI semantici, valori diversi. components.css NON si tocca. * * Nasce da «Agorà» su richiesta del committente: **stessa morfologia** (grigi * veri, forme morbide, separazione a ombre, Mulish + Newsreader) con la porpora * sostituita dai **celesti del marchio Computer-Pro**. * * Tre aggettivi: LIMPIDA, ISTITUZIONALE, DI CASA. * * Le scelte, e il perché: * 1. Primario CELESTE campionato dal logo (#007ABD il blu portante). È l'unica * delle tre direzioni che porta il colore dell'azienda dentro il prodotto: * un cliente che ha già a che fare con Computer Pro riconosce la mano. * 2. --primary è #006BAF, un gradino più fondo del marchio. Non è un * tradimento del blu: è che --primary colora anche i link, e il blu del logo * su --bg (grigio #E7E7E7) si ferma a 3.76:1, sotto la soglia AA. Il valore * esatto del marchio vive nella rampa (--c-azure-450) e compare dove il * contrasto lo permette: prima serie dei grafici, hover dei bottoni info. * 3. Accento ALLORO, ereditato da «Agorà». Con un primario blu un accento blu * renderebbe il tema monocromo e anonimo: l'alloro tiene la seconda voce e * resta lontano da tutti gli stati. * 4. Neutri VERI (croma zero), come in «Agorà»: è il grigio che il committente * ha scelto. Nessun grigio-blu, così l'unico colore in pagina è quello che * significa qualcosa. * 5. Rail a TINTA PIENA col BLU DEL MARCHIO (--c-azure-700, #004A7C): non un * quasi-nero come in Brezza, ma un blu che si riconosce. La colonna di * navigazione è la parte più "Computer Pro" dell'interfaccia, ed è anche il * punto che allontana di più questa direzione dalla rail indigo notte. * In scuro scende a --c-azure-900, per non restare una lampada accesa. * 6. Forme morbide e ombre di «Agorà», invariate: --r-md 12px, card a 26px, * ombre tinte di blu notte al posto della porpora. * * ATTENZIONE CONSAPEVOLE: questa è la direzione **più vicina a Brezza** delle * tre, perché anche Brezza ha un primario blu. La distanza la fanno i neutri * (grigi veri contro blu-grigi), la tipografia (Mulish + Newsreader contro * Manrope + Fraunces), le forme (più morbide) e la tinta (celeste 201° contro * indigo 224°): a fianco non si confondono, ma non si allontanano quanto * «Albo» e «Agorà». È il prezzo dichiarato di usare il colore dell'azienda. * * REGOLA DEL FILE: tutti i colori nascono nel blocco *primitives*. Nel resto del * foglio solo var(). Unica eccezione, come in Brezza: gli hex dentro i data-URI SVG, * che non accettano var() — ognuno con il commento della primitiva corrispondente. * * Modo scuro opt-in con [data-mode="dark"] su , set di nomi identico. * ============================================================ */ /* ─── Color primitives ─── */ :root { /* Celeste (primario) — i blu del marchio Computer-Pro, hue ~201°. I valori 450 e 400 sono campionati dal logo: #007ABD è il blu portante, #2492CC e #54AAD9 stanno nella sfumatura. Il gradino 500 (#006BAF) è un filo più fondo del marchio perché --primary fa anche da colore dei link, e sul fondo grigio dell'app il blu del logo si ferma a 3.76:1. */ --c-azure-50: #EAF5FC; --c-azure-100: #D3EBF8; --c-azure-200: #A7D7EF; --c-azure-300: #74BEE5; /* sfumatura alta del logo; hover del primario in scuro */ --c-azure-350: #54AAD9; /* sfumatura del logo; primario in scuro */ --c-azure-400: #2492CC; /* sfumatura del logo; informativo */ --c-azure-450: #007ABD; /* MARCHIO Computer-Pro — blu portante del logo */ --c-azure-500: #006BAF; /* primario in chiaro */ --c-azure-600: #005E9B; --c-azure-700: #004A7C; /* rail in chiaro: il blu del marchio a piena tinta */ --c-azure-800: #003D68; --c-azure-850: #00365B; --c-azure-900: #002E4E; /* rail in scuro */ --c-azure-950: #00253E; /* Alloro (accento) — hue ~85°, verde-oliva profondo */ --c-cedar-50: #F1F6E1; --c-cedar-100: #DFEBBE; --c-cedar-200: #C6DA8E; --c-cedar-300: #A9CA5C; /* accento in scuro */ --c-cedar-500: #6F8F26; /* core — accento in chiaro */ --c-cedar-700: #48601A; --c-cedar-900: #28320F; /* Grigi veri (croma zero) — versante chiaro */ --c-slate-0: #FFFFFF; --c-slate-50: #F7F7F7; --c-slate-100: #F1F1F1; --c-slate-200: #EDEDED; --c-slate-300: #E7E7E7; /* fondo app */ --c-slate-400: #D2D2D2; /* filo decorativo */ --c-slate-500: #C4C4C4; --c-slate-600: #949494; /* confine dei controlli — 3.03:1 su bianco */ --c-slate-700: #757575; --c-slate-800: #666666; --c-slate-900: #444444; --c-slate-950: #1A1A1A; /* Cenere (grigi veri) — versante scuro. Rampa distinta: in scuro i piani vanno più ravvicinati, altrimenti la stratificazione diventa rumore. */ --c-ash-950: #0E0E0E; --c-ash-900: #131313; --c-ash-850: #191919; --c-ash-800: #1C1C1C; --c-ash-700: #242424; --c-ash-600: #2E2E2E; --c-ash-550: #333333; --c-ash-500: #3B3B3B; --c-ash-400: #6A6A6A; --c-ash-300: #808080; --c-ash-200: #999999; --c-ash-100: #BDBDBD; --c-ash-50: #F1F1F1; /* Famiglie di stato */ --c-success-50: #DEEFE8; --c-success-100: #C4E5D9; --c-success-200: #A5E5D0; --c-success-300: #4CC094; --c-success-500: #17795A; --c-success-700: #0F5740; --c-success-900: #0F2E24; --c-warning-50: #FBEBCF; --c-warning-100: #F6E0AC; --c-warning-300: #DFA83F; --c-warning-500: #B87700; --c-warning-700: #734900; --c-warning-900: #3A2905; --c-danger-50: #FBE3DC; --c-danger-100: #F9C6B6; --c-danger-300: #F0785C; --c-danger-500: #C13B22; --c-danger-700: #8C2513; --c-danger-900: #3B1810; --c-info-50: var(--c-azure-50); --c-info-500: var(--c-azure-400); --c-info-700: var(--c-azure-700); /* Canale delle ombre: tinto di blu notte, dichiarato qui una volta sola. */ --shadow-rgb: 0, 38, 64; /* ─── Compatibilità con components.css 2.8.2 ─────────────────────── * components.css e theme-colors.js leggono ANCHE alcune primitive di Brezza * per nome (--c-indigo-*, --c-coral-*, --c-neutral-*). Sono nomi di colore, * non nomi semantici: restano come ALIAS verso le rampe nuove, così la * libreria funziona senza modifiche. I punti da ripulire quando si potrà * toccare components.css sono in NOTE-DI-SCARTO.md. * ───────────────────────────────────────────────────────────────── */ --c-indigo-50: var(--c-azure-50); --c-indigo-100: var(--c-azure-100); --c-indigo-200: var(--c-azure-200); --c-indigo-300: var(--c-azure-300); --c-indigo-400: var(--c-azure-400); --c-indigo-500: var(--c-azure-500); --c-indigo-600: var(--c-azure-600); --c-indigo-700: var(--c-azure-700); --c-indigo-800: var(--c-azure-800); --c-indigo-900: var(--c-azure-900); --c-indigo-950: var(--c-azure-950); --c-coral-50: var(--c-cedar-50); --c-coral-100: var(--c-cedar-100); --c-coral-300: var(--c-cedar-300); --c-coral-500: var(--c-cedar-500); --c-coral-700: var(--c-cedar-700); --c-coral-900: var(--c-cedar-900); --c-neutral-0: var(--c-slate-0); --c-neutral-50: var(--c-slate-50); --c-neutral-100: var(--c-slate-200); --c-neutral-200: var(--c-slate-400); --c-neutral-300: var(--c-slate-600); --c-neutral-400: var(--c-slate-700); --c-neutral-500: var(--c-slate-800); --c-neutral-600: var(--c-slate-900); --c-neutral-700: var(--c-slate-900); --c-neutral-800: var(--c-slate-950); --c-neutral-900: var(--c-slate-950); --c-neutral-950: var(--c-slate-950); /* ─── Semantic tokens · CHIARO (default) ─── */ --bg: var(--c-slate-300); --bg-tint: var(--c-slate-100); --surface: var(--c-slate-0); --surface-2: var(--c-slate-50); --surface-3: var(--c-slate-200); --surface-inv: var(--c-slate-950); --control-track:var(--c-slate-500); /* Rail a tinta piena blu notte: il blu del marchio al fondo della rampa */ --rail-bg: var(--c-azure-700); --rail-ink: var(--c-slate-0); --rail-ink-2: var(--c-azure-100); --rail-ink-3: var(--c-azure-200); --rail-hover: color-mix(in oklab, var(--c-slate-0) 7%, transparent); --rail-active: color-mix(in oklab, var(--c-slate-0) 12%, transparent); --rail-active-border: color-mix(in oklab, var(--c-slate-0) 18%, transparent); --rail-accent: var(--c-cedar-300); --rail-badge-bg: color-mix(in oklab, var(--c-slate-0) 14%, transparent); --ink: var(--c-slate-950); --ink-2: var(--c-slate-900); --ink-3: var(--c-slate-800); --ink-on-accent:var(--c-slate-0); --ink-on-dark: var(--c-ash-50); /* --border è un filo, non un confine: qui separano le ombre. Il confine dei controlli è --border-2 (3.03:1) — vedi CONTRASTI.md nota 3. */ --border: var(--c-slate-400); --border-2: var(--c-slate-600); --border-strong:var(--c-slate-700); --primary: var(--c-azure-500); --primary-hover:var(--c-azure-600); --primary-bg: var(--c-azure-50); --primary-fg: var(--c-azure-700); --accent: var(--c-cedar-500); --accent-bg: var(--c-cedar-50); --accent-fg: var(--c-cedar-700); --success: var(--c-success-500); --success-bg: var(--c-success-50); --success-fg: var(--c-success-700); --warning: var(--c-warning-500); --warning-bg: var(--c-warning-50); --warning-fg: var(--c-warning-700); --danger: var(--c-danger-500); --danger-bg: var(--c-danger-50); --danger-fg: var(--c-danger-700); --info: var(--c-azure-400); --info-bg: var(--c-azure-50); --info-fg: var(--c-azure-700); --focus-ring: color-mix(in oklab, var(--primary) 55%, transparent); /* ─── Palette dei grafici (aggiunta rispetto a Brezza) ─── Serie categoriale di 8, ogni colore ≥ 3:1 su --surface. */ --chart-1: var(--c-azure-500); --chart-2: var(--c-cedar-500); --chart-3: var(--c-success-500); --chart-4: var(--c-danger-500); --chart-5: var(--c-warning-500); --chart-6: var(--c-slate-800); --chart-7: var(--c-azure-450); --chart-8: var(--c-success-700); /* ─── Tipografia ─── Mulish (OFL) per il testo: umanista arrotondata, x-height alta, ottima a 13-14px nelle tabelle dense. Newsreader (OFL) per i titoli: il tono della lettera che il Comune manda al cittadino. */ --font-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --base-font-size: 16px; /* Scala identica a Brezza: components.css la usa per nome e la densità è un vincolo (prodotto da scrivania, 8 ore al giorno, body >= 14px). */ --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; /* body */ --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-56: 3.5rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ─── Spaziatura (base 4, invariata: è parte del contratto) ─── */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* ─── Raggi — MORBIDI (Brezza: 4/6/10/14/18/24) ─── */ --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-2xl: 32px; --r-pill: 999px; /* ─── Elevazioni — è QUI che questa direzione separa i piani ─── */ --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.06); --shadow-sm: 0 8px 18px -8px rgba(var(--shadow-rgb), 0.14), 0 2px 4px -2px rgba(var(--shadow-rgb), 0.08); --shadow-md: 0 18px 36px -14px rgba(var(--shadow-rgb), 0.20), 0 4px 10px -4px rgba(var(--shadow-rgb), 0.10); --shadow-lg: 0 34px 64px -22px rgba(var(--shadow-rgb), 0.30), 0 6px 14px -6px rgba(var(--shadow-rgb), 0.14); --shadow-focus: 0 0 0 3px var(--focus-ring); /* ─── Movimento — un filo elastico, mai gommoso ─── */ --dur-1: 100ms; --dur-2: 170ms; --dur-3: 260ms; --dur-4: 400ms; --ease-out: cubic-bezier(0.22, 0.8, 0.28, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* ─── Z-index (invariati) ─── */ --z-sticky: 100; --z-modal: 1000; --z-toast: 2000; --z-tooltip: 3000; /* ─── Override Bootstrap 5.3 ─── */ --bs-primary: var(--primary); --bs-primary-rgb: 0, 107, 175; --bs-secondary: var(--accent); --bs-success: var(--success); --bs-info: var(--info); --bs-warning: var(--warning); --bs-danger: var(--danger); --bs-light: var(--bg-tint); --bs-dark: var(--ink); --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-font-sans-serif: var(--font-sans); --bs-font-monospace: var(--font-mono); --bs-body-font-family: var(--font-sans); --bs-body-font-size: var(--fs-14); --bs-body-line-height: var(--lh-base); --bs-border-color: var(--border); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-code-color: var(--accent-fg); --bs-gray-100: var(--c-slate-50); --bs-gray-200: var(--c-slate-200); --bs-gray-300: var(--c-slate-400); --bs-gray-400: var(--c-slate-600); --bs-gray-500: var(--c-slate-700); --bs-gray-600: var(--c-slate-800); --bs-gray-700: var(--c-slate-900); --bs-gray-800: var(--c-slate-900); --bs-gray-900: var(--c-slate-950); } /* ─── Override dei componenti Bootstrap 5.3 ─────────────────── * Bootstrap 5.3 fissa i colori dentro le custom property di componente * (--bs-btn-bg, --bs-alert-bg…): ridefinire --bs-primary NON basta. * * Differenza rispetto a Brezza: il testo dei bottoni pieni è * var(--ink-on-accent) e non `#fff`. In scuro --ink-on-accent diventa * inchiostro, quindi il bottone resta leggibile invece di scendere a 3.6:1 * (vedi CONTRASTI.md, nota 1). * ─────────────────────────────────────────────────────────── */ /* Bottoni */ .btn-primary { --bs-btn-color: var(--ink-on-accent); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-color: var(--ink-on-accent); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-color: var(--ink-on-accent); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-secondary { --bs-btn-color: var(--ink-on-accent); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--c-cedar-700); --bs-btn-hover-border-color: var(--c-cedar-700); --bs-btn-active-bg: var(--c-cedar-700); --bs-btn-active-border-color: var(--c-cedar-700); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-success { --bs-btn-color: var(--ink-on-accent); --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--c-success-700); --bs-btn-hover-border-color: var(--c-success-700); --bs-btn-active-bg: var(--c-success-700); --bs-btn-active-border-color: var(--c-success-700); --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success); } .btn-danger { --bs-btn-color: var(--ink-on-accent); --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--c-danger-700); --bs-btn-hover-border-color: var(--c-danger-700); --bs-btn-active-bg: var(--c-danger-700); --bs-btn-active-border-color: var(--c-danger-700); --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger); } .btn-warning { /* Testo SEMPRE scuro sull'ambra: primitiva statica, non --ink. */ --bs-btn-color: var(--c-slate-950); --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-hover-color: var(--c-slate-0); --bs-btn-hover-bg: var(--c-warning-700); --bs-btn-hover-border-color: var(--c-warning-700); --bs-btn-active-color: var(--c-slate-0); --bs-btn-active-bg: var(--c-warning-700); --bs-btn-active-border-color: var(--c-warning-700); --bs-btn-disabled-color: var(--c-slate-950); --bs-btn-disabled-bg: var(--warning); --bs-btn-disabled-border-color: var(--warning); } .btn-light { --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: var(--border-2); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-2); --bs-btn-disabled-color: var(--ink-3); --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-border-color: var(--border); } .btn-info { --bs-btn-color: var(--c-slate-950); --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info); --bs-btn-hover-color: var(--c-slate-950); --bs-btn-hover-bg: var(--c-azure-450); --bs-btn-hover-border-color: var(--c-azure-450); --bs-btn-active-bg: var(--c-azure-450); --bs-btn-active-border-color: var(--c-azure-450); --bs-btn-disabled-bg: var(--info); --bs-btn-disabled-border-color: var(--info); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-color: var(--ink-on-accent); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-outline-info { --bs-btn-color: var(--info-fg); --bs-btn-border-color: var(--info); --bs-btn-hover-color: var(--c-slate-950); --bs-btn-hover-bg: var(--info); --bs-btn-hover-border-color: var(--info); --bs-btn-active-color: var(--c-slate-950); --bs-btn-active-bg: var(--info); --bs-btn-active-border-color: var(--info); --bs-btn-disabled-color: var(--info-fg); --bs-btn-disabled-border-color: var(--info); } .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-color: var(--ink-on-accent); --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); --bs-btn-disabled-color: var(--danger); --bs-btn-disabled-border-color: var(--danger); } .btn-outline-warning { --bs-btn-color: var(--warning-fg); --bs-btn-border-color: var(--warning); --bs-btn-hover-color: var(--c-slate-950); --bs-btn-hover-bg: var(--warning); --bs-btn-hover-border-color: var(--warning); --bs-btn-active-color: var(--c-slate-950); --bs-btn-active-bg: var(--warning); --bs-btn-active-border-color: var(--warning); --bs-btn-disabled-color: var(--warning-fg); --bs-btn-disabled-border-color: var(--warning); } .btn-outline-success { --bs-btn-color: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-color: var(--ink-on-accent); --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success); --bs-btn-active-color: var(--ink-on-accent); --bs-btn-active-bg: var(--success); --bs-btn-active-border-color: var(--success); --bs-btn-disabled-color: var(--success); --bs-btn-disabled-border-color: var(--success); } .btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--border-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong); --bs-btn-disabled-color: var(--ink-3); --bs-btn-disabled-border-color: var(--border); } .btn-link { --bs-btn-color: var(--primary); --bs-btn-hover-color: var(--primary-hover); --bs-btn-active-color: var(--primary-hover); } /* Alert */ .alert-primary { --bs-alert-color: var(--primary-fg); --bs-alert-bg: var(--primary-bg); --bs-alert-border-color: var(--c-azure-200); --bs-alert-link-color: var(--primary-fg); } .alert-secondary { --bs-alert-color: var(--accent-fg); --bs-alert-bg: var(--accent-bg); --bs-alert-border-color: var(--c-cedar-200); } .alert-success { --bs-alert-color: var(--success-fg); --bs-alert-bg: var(--success-bg); --bs-alert-border-color: var(--success); --bs-alert-link-color: var(--success-fg); } .alert-warning { --bs-alert-color: var(--warning-fg); --bs-alert-bg: var(--warning-bg); --bs-alert-border-color: var(--warning); --bs-alert-link-color: var(--warning-fg); } .alert-danger { --bs-alert-color: var(--danger-fg); --bs-alert-bg: var(--danger-bg); --bs-alert-border-color: var(--danger); --bs-alert-link-color: var(--danger-fg); } .alert-info { --bs-alert-color: var(--info-fg); --bs-alert-bg: var(--info-bg); --bs-alert-border-color: var(--c-azure-200); } /* Badge */ .badge.bg-primary { background-color: var(--primary) !important; } .badge.bg-secondary { background-color: var(--accent) !important; } .badge.bg-success { background-color: var(--success) !important; } .badge.bg-warning { background-color: var(--warning) !important; color: var(--c-slate-950) !important; } .badge.bg-danger { background-color: var(--danger) !important; } .badge.bg-info { background-color: var(--info) !important; color: var(--c-slate-950) !important; } /* Card */ .card { --bs-card-bg: var(--surface); --bs-card-color: var(--ink); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--surface-2); --bs-card-cap-color: var(--ink); --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: calc(var(--r-lg) - 1px); box-shadow: var(--shadow-sm); } /* Campi. NB: il bordo è --border-2 e non --border — in questa direzione --border è un filo decorativo a 1.51:1 e non può portare l'affordance di un controllo (WCAG 1.4.11). Sui componenti .ax-* lo stesso ritocco va fatto in components.css: è elencato in NOTE-DI-SCARTO.md §2. */ .form-control, .form-select { --bs-body-bg: var(--surface); border-color: var(--border-2); border-radius: var(--r-md); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); } .form-label { font-weight: var(--fw-semibold); color: var(--ink-2); } /* Campo non valido secondo jquery.validate.unobtrusive: la classe che scrive è `input-validation-error`, non `.is-invalid`. Alias, come in Brezza 2.8.2. */ .form-control.input-validation-error, .form-select.input-validation-error, textarea.input-validation-error { border-color: var(--danger); } .form-control.input-validation-error:focus, .form-select.input-validation-error:focus, textarea.input-validation-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 30%, transparent); } /* Check / switch. I data-URI SVG non accettano var(): gli hex qui sotto SONO primitive di questo foglio — %23757575 = --c-slate-700 (pallino spento), %23FFFFFF = --c-slate-0 (pallino acceso). */ .form-check-input { background-color: var(--control-track); border: 1px solid var(--border-strong); } .form-check-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-switch .form-check-input, .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23757575'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); } /* Link */ a { color: var(--primary); } a:hover { color: var(--primary-hover); } /* ─── MODO SCURO — stesso set di nomi ─── */ [data-mode="dark"] { --bg: var(--c-ash-900); --bg-tint: var(--c-ash-850); --surface: var(--c-ash-800); --surface-2: var(--c-ash-700); --surface-3: var(--c-ash-600); --surface-inv: var(--c-ash-50); --control-track:var(--c-ash-500); --rail-bg: var(--c-azure-900); --rail-ink: var(--c-slate-0); --rail-ink-2: var(--c-azure-100); --rail-ink-3: var(--c-azure-200); --rail-hover: color-mix(in oklab, var(--c-slate-0) 6%, transparent); --rail-active: color-mix(in oklab, var(--c-slate-0) 10%, transparent); --rail-active-border: color-mix(in oklab, var(--c-slate-0) 15%, transparent); --rail-accent: var(--c-cedar-300); --rail-badge-bg: color-mix(in oklab, var(--c-slate-0) 13%, transparent); --ink: var(--c-ash-50); --ink-2: var(--c-ash-100); --ink-3: var(--c-ash-200); --ink-on-accent:var(--c-slate-950); --ink-on-dark: var(--c-ash-50); --border: var(--c-ash-550); --border-2: var(--c-ash-400); --border-strong:var(--c-ash-300); /* In scuro il primario è azure-350 (#54AAD9), non il blu del marchio: in scuro un blu profondo su --surface-2 non arriva ad AA. Qui vale 6.01:1. */ --primary: var(--c-azure-350); --primary-hover:var(--c-azure-300); --primary-bg: var(--c-azure-850); --primary-fg: var(--c-azure-200); --accent: var(--c-cedar-300); --accent-bg: var(--c-cedar-900); --accent-fg: var(--c-cedar-100); --success: var(--c-success-300); --success-bg: var(--c-success-900); --success-fg: var(--c-success-200); --warning: var(--c-warning-300); --warning-bg: var(--c-warning-900); --warning-fg: var(--c-warning-100); --danger: var(--c-danger-300); --danger-bg: var(--c-danger-900); --danger-fg: var(--c-danger-100); --info: var(--c-azure-300); --info-bg: var(--c-azure-850); --info-fg: var(--c-azure-200); --focus-ring: color-mix(in oklab, var(--primary) 70%, transparent); --chart-1: var(--c-azure-400); --chart-2: var(--c-cedar-300); --chart-3: var(--c-success-300); --chart-4: var(--c-danger-300); --chart-5: var(--c-warning-300); --chart-6: var(--c-ash-200); --chart-7: var(--c-azure-200); --chart-8: var(--c-success-200); --shadow-rgb: 0, 0, 0; --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.30); --shadow-sm: 0 8px 18px -8px rgba(var(--shadow-rgb), 0.50), 0 2px 4px -2px rgba(var(--shadow-rgb), 0.32); --shadow-md: 0 18px 36px -14px rgba(var(--shadow-rgb), 0.55), 0 4px 10px -4px rgba(var(--shadow-rgb), 0.34); --shadow-lg: 0 34px 64px -22px rgba(var(--shadow-rgb), 0.65), 0 6px 14px -6px rgba(var(--shadow-rgb), 0.40); --bs-primary: var(--primary); --bs-primary-rgb: 84, 170, 217; --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-color: var(--border); --bs-light: var(--surface-2); --bs-dark: var(--ink); --bs-info: var(--info); /* Bootstrap 5.3 fissa in :root i colori "secondary/tertiary/emphasis" e le varianti -rgb usate da .text-muted / .text-body / .bg-light: vanno ri-rotate. */ --bs-secondary-color: var(--ink-2); --bs-tertiary-color: var(--ink-3); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--ink); --bs-body-color-rgb: 241, 241, 241; --bs-emphasis-color-rgb: 241, 241, 241; --bs-dark-rgb: 241, 241, 241; --bs-light-rgb: 36, 36, 36; --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-3); color-scheme: dark; } /* In scuro il pallino spento schiarisce: %23999999 = --c-ash-200. */ [data-mode="dark"] .form-switch .form-check-input, [data-mode="dark"] .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23999999'/%3e%3c/svg%3e"); } /* Pallino acceso su celeste chiaro: inchiostro. %231A1A1A = --c-slate-950. */ [data-mode="dark"] .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231A1A1A'/%3e%3c/svg%3e"); } /* ApexCharts scrive `fill` come attributo SVG (grigio scuro di default): in scuro la regola CSS lo vince. */ [data-mode="dark"] .apexcharts-text { fill: var(--ink-2); } /* ─── Base ─── */ html { font-size: var(--base-font-size); } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans) !important; font-size: var(--fs-14); line-height: var(--lh-base); } /* Ogni componente che vuole un font DIVERSO dal sans deve comparire in questa lista di esclusioni, altrimenti l'!important qui sopra batte la sua dichiarazione (è la trappola che in Brezza 2.8.0 ha reso .ax-otp in Manrope). */ body :not(.t-display):not(.t-mono):not(.t-eyebrow):not(.ax-kpi-value):not(.ax-mark):not(.ax-otp):not(.font-monospace):not(code):not(pre):not(kbd):not(.kbd):not([class*="bi-"]):not(.fc-icon) { font-family: var(--font-sans) !important; } *:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); } /* ─── Aiuti tipografici ─── */ .t-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; } .t-display em { color: var(--primary); font-style: italic; } .t-mono { font-family: var(--font-mono); } .t-eyebrow { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; } .t-num-tabular { font-variant-numeric: tabular-nums; }