/* ============================================================================ Mastro Vona — Design Tokens Fonte di verità del design system. Vedi DESIGN.md (root del progetto). COME RI-BRANDIZZARE UN PROGETTO DERIVATO ---------------------------------------- 1. Cambia --app-hue per spostare l'intera identità (neutri tinti + accento). 2. Oppure cambia --app-accent (e il triplet --app-accent-rgb) per un accento con tinta diversa dai neutri. 3. Se servono, ritocca i colori semantici. Tutto il resto segue da solo: tema (--ins-*), codice custom (--bs-*), componenti e grafici. Caricato dal layout PRIMA di custom.css. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TOKEN PRIMITIVI (--app-*) — la palette del sistema, in OKLCH. Niente #000 / #fff: i neutri sono tinti verso la tinta brand (--app-hue). ---------------------------------------------------------------------------- */ :root { /* Tinta fredda condivisa da neutri e primario near-black (hue 266, stile zinc/shadcn) */ --app-hue: 266; /* Inchiostro / neutri (near-black → near-white) */ --app-ink: oklch(0.21 0.020 var(--app-hue)); /* testo, titoli, numeri ≈ #1c1f2b */ --app-ink-secondary: oklch(0.50 0.016 var(--app-hue)); /* testo di supporto ≈ #5b6075 */ --app-ink-muted: oklch(0.60 0.014 var(--app-hue)); /* etichette, metadati ≈ #767b8f */ --app-ink-faint: oklch(0.70 0.012 var(--app-hue)); /* placeholder, disabled ≈ #9398a8 */ --app-surface: oklch(0.995 0.001 var(--app-hue)); /* card / pannelli ≈ #fdfdfe */ --app-surface-page: oklch(0.975 0.004 var(--app-hue)); /* fondo corpo ≈ #f5f6f9 */ --app-surface-sunken: oklch(0.960 0.004 var(--app-hue)); /* thead, fondi rientranti≈ #f1f2f6 */ --app-border: oklch(0.92 0.006 var(--app-hue)); /* bordo/divisore default ≈ #e4e6ec */ --app-border-strong: oklch(0.85 0.008 var(--app-hue)); /* bordi marcati, input ≈ #cdd0d9 */ /* Accento mono near-black (stile shadcn) — l'UNICO elemento interattivo (azione primaria, link, focus). Il colore "vero" vive solo negli stati semantici del dato: l'UI è quasi monocromatica. */ --app-accent: oklch(0.22 0.012 var(--app-hue)); /* primario near-black ≈ #2a2c32 */ --app-accent-hover: oklch(0.30 0.013 var(--app-hue)); /* hover (primary/90) ≈ #3e4048 */ --app-accent-active: oklch(0.16 0.010 var(--app-hue)); /* premuto ≈ #1d1f24 */ --app-accent-subtle: oklch(0.955 0.004 var(--app-hue)); /* selezionato/hover (zinc-100) ≈ #f1f1f4 */ --app-accent-text: oklch(0.22 0.012 var(--app-hue)); /* link near-black (underline su hover) */ --app-on-accent: oklch(0.99 0.003 var(--app-hue)); /* testo su accento ≈ #fcfcfd */ --app-accent-rgb: 42, 44, 50; /* per trasparenze: aggiorna se cambi --app-accent */ /* Stati semantici — SOLO sul significato del dato. base / subtle / text */ --app-success: oklch(0.60 0.13 155); /* ≈ #2f9e6b */ --app-success-subtle: oklch(0.95 0.04 155); /* ≈ #e3f5ec */ --app-success-text: oklch(0.46 0.11 155); /* ≈ #1f7a52 */ --app-success-rgb: 47, 158, 107; --app-warning: oklch(0.76 0.14 80); /* ≈ #d99a2b */ --app-warning-subtle: oklch(0.96 0.05 85); /* ≈ #fbf0d9 */ --app-warning-text: oklch(0.52 0.10 70); /* ≈ #936a1e */ --app-warning-rgb: 217, 154, 43; --app-danger: oklch(0.58 0.20 25); /* ≈ #d6453a */ --app-danger-subtle: oklch(0.95 0.04 25); /* ≈ #fbe7e4 */ --app-danger-text: oklch(0.50 0.18 25); /* ≈ #b5362e */ --app-danger-rgb: 214, 69, 58; --app-info: oklch(0.62 0.12 235); /* ≈ #3d8fc4 */ --app-info-subtle: oklch(0.95 0.04 235); /* ≈ #e2eff8 */ --app-info-text: oklch(0.47 0.11 235); /* ≈ #2a6f9e */ --app-info-rgb: 61, 143, 196; /* Raggi */ --app-radius-sm: 0.375rem; /* input, badge */ --app-radius: 0.5rem; /* bottoni, default */ --app-radius-lg: 0.75rem; /* card, pannelli */ --app-radius-pill: 9999px; /* Spaziatura (base 4px) */ --app-space-1: 0.25rem; --app-space-2: 0.5rem; --app-space-3: 0.75rem; --app-space-4: 1rem; --app-space-5: 1.5rem; --app-space-6: 2rem; --app-space-7: 3rem; /* Elevazione — piatto a riposo, ombra solo come risposta a stato/overlay */ --app-shadow-float: 0 1px 2px oklch(0.21 0.02 var(--app-hue) / 0.06); --app-shadow-overlay: 0 4px 12px oklch(0.21 0.02 var(--app-hue) / 0.08); --app-shadow-panel: 0 14px 36px oklch(0.21 0.02 var(--app-hue) / 0.12); --app-shadow-hover: 0 6px 18px oklch(0.21 0.02 var(--app-hue) / 0.14); /* Focus + motion */ --app-focus-ring: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--app-accent); --app-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart, niente bounce */ --app-duration: 0.15s; } /* ---------------------------------------------------------------------------- 2. BRIDGE — collega il tema (--ins-*) e il codice custom (--bs-*) ai --app-*. Senza questo blocco il theming non segue il brand: il tema INSPINIA espone le sue variabili come --ins-*, mentre custom.css e gc-helpers.js leggono --bs-* (che il tema non definisce). Qui le definiamo entrambe. ---------------------------------------------------------------------------- */ :root { /* --- Brand → tema INSPINIA (ri-skinna btn/badge/alert/progress) --- */ --ins-primary: var(--app-accent); --ins-primary-rgb: var(--app-accent-rgb); --ins-link-color: var(--app-accent); --ins-link-hover-color: var(--app-accent-hover); --ins-success: var(--app-success); --ins-success-rgb: var(--app-success-rgb); --ins-warning: var(--app-warning); --ins-warning-rgb: var(--app-warning-rgb); --ins-danger: var(--app-danger); --ins-danger-rgb: var(--app-danger-rgb); --ins-info: var(--app-info); --ins-info-rgb: var(--app-info-rgb); /* --- Alias --bs-* letti da custom.css e gc-helpers.js --- */ --bs-primary: var(--app-accent); --bs-primary-rgb: var(--app-accent-rgb); --bs-primary-bg-subtle: var(--app-accent-subtle); --bs-success: var(--app-success); --bs-success-rgb: var(--app-success-rgb); --bs-warning: var(--app-warning); --bs-warning-rgb: var(--app-warning-rgb); --bs-danger: var(--app-danger); --bs-danger-rgb: var(--app-danger-rgb); --bs-info: var(--app-info); --bs-info-rgb: var(--app-info-rgb); --bs-secondary: var(--app-ink-secondary); --bs-secondary-color: var(--app-ink-muted); --bs-dark: var(--app-ink); --bs-body-color: var(--app-ink); --bs-body-bg: var(--app-surface); --bs-border-color: var(--app-border); --bs-secondary-bg: var(--app-surface-sunken); --bs-tertiary-bg: var(--app-surface-sunken); --bs-light: var(--app-surface-sunken); --bs-card-bg: var(--app-surface); /* stati: fondi -subtle e testo -text-emphasis (usati inline nelle view) */ --bs-success-bg-subtle: var(--app-success-subtle); --bs-warning-bg-subtle: var(--app-warning-subtle); --bs-danger-bg-subtle: var(--app-danger-subtle); --bs-info-bg-subtle: var(--app-info-subtle); --bs-success-text-emphasis: var(--app-success-text); --bs-warning-text-emphasis: var(--app-warning-text); --bs-danger-text-emphasis: var(--app-danger-text); --bs-info-text-emphasis: var(--app-info-text); /* Palette categorica per i grafici (gc-helpers.js GC.chartColors) */ --bs-orange: oklch(0.70 0.16 50); --bs-pink: oklch(0.68 0.18 350); --bs-purple: oklch(0.55 0.18 300); --bs-teal: oklch(0.65 0.12 185); --bs-indigo: oklch(0.50 0.20 275); } /* ---------------------------------------------------------------------------- 3. DARK MODE — rimappa i SOLI neutri (i semantici/accento valgono in entrambi i temi). Tiene in piedi i componenti del design system se il tema scuro è attivo (data-bs-theme="dark"); il resto resta gestito da INSPINIA. ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --app-ink: oklch(0.96 0.006 var(--app-hue)); --app-ink-secondary: oklch(0.80 0.010 var(--app-hue)); --app-ink-muted: oklch(0.68 0.012 var(--app-hue)); --app-ink-faint: oklch(0.55 0.012 var(--app-hue)); --app-surface: oklch(0.245 0.012 var(--app-hue)); --app-surface-page: oklch(0.205 0.012 var(--app-hue)); --app-surface-sunken: oklch(0.285 0.012 var(--app-hue)); --app-border: oklch(0.34 0.012 var(--app-hue)); --app-border-strong: oklch(0.42 0.014 var(--app-hue)); /* Dark: il primario si inverte in near-white (testo scuro), come shadcn dark */ --app-accent: oklch(0.92 0.006 var(--app-hue)); --app-accent-hover: oklch(0.85 0.008 var(--app-hue)); --app-accent-active: oklch(0.98 0.004 var(--app-hue)); --app-accent-subtle: oklch(0.28 0.010 var(--app-hue)); --app-accent-text: oklch(0.90 0.008 var(--app-hue)); --app-on-accent: oklch(0.20 0.012 var(--app-hue)); /* alias neutri seguono i token sopra */ --bs-body-color: var(--app-ink); --bs-body-bg: var(--app-surface); --bs-border-color: var(--app-border); --bs-secondary-bg: var(--app-surface-sunken); --bs-tertiary-bg: var(--app-surface-sunken); } /* INSPINIA fissa --ins-btn-color:#fff su .btn-primary: in dark il fondo è near-white, quindi il testo va portato su --app-on-accent (ink scuro), altrimenti l'etichetta sparisce sul bottone. */ [data-bs-theme="dark"] .btn-primary { --ins-btn-color: var(--app-on-accent); --ins-btn-hover-color: var(--app-on-accent); --ins-btn-active-color: var(--app-on-accent); --ins-btn-disabled-color: var(--app-on-accent); }