/* Ember Kit — Design tokens ========================= Questo file unisce due design system esistenti che finora vivevano separati: - "Smart Design Style" (light, sorgente: https://github.com/travelermarco/smart-design-style) — il blocco :root qui sotto è vendored 1:1 da lì, invariato. - Il vero override dark "Yoshi / Marco Design System" (sorgente: https://github.com/travelermarco/marco-style) — il blocco [data-theme="dark"] qui sotto NON è il dark generico indaco del repo Smart Design Style, è la palette viola verificata byte-per-byte identica in uso su Dashboard CX (new release), Dashboard Reperibilità e Ruota della Sfortuna. Uso: importare questo file per primo, poi components.css, poi (opzionale) flourishes.css. Riferisci sempre le variabili per ruolo (--color-accent, --text-primary, ...), mai un hex diretto nel CSS di progetto — è quello che rende un domani un rebrand/retheme una modifica di un file solo, invece di un find-and-replace su ogni progetto. Dark mode: SOLO opt-in esplicito via [data-theme="dark"] sull', mai auto-switch su prefers-color-scheme (decisione di design ereditata da Smart Design Style: la UI è la stessa per tutti, non varia con le impostazioni del sistema operativo di chi guarda). Vedi generalfireadme.md → "Toggle chiaro/scuro" per la ricetta completa (script anti-flash + toggle.js), inclusa la variante per i progetti "dark di default" (es. YoshiAdmin, Yoshi Extension) dove la logica va invertita. */ :root { color-scheme: light; /* --- Superfici --- */ --surface-page: #f7f7f9; /* sfondo pagina, dietro le card */ --surface-card: #ffffff; /* sfondo card/tabelle/pannelli */ --surface-sidebar: #ffffff; --surface-topbar: #ffffff; --surface-hover: #f1f0fb; /* hover su righe tabella / voci menu */ --surface-accent-wash: #efecfe; /* sfondo tenue per stato attivo / gruppi header */ /* --- Testo --- */ --text-primary: #14151a; /* titoli, valori numerici principali */ --text-secondary: #5a5b68; /* sottotitoli, etichette, testo descrittivo */ --text-muted: #8b8c98; /* placeholder, metadati, timestamp */ --text-on-dark: #ffffff; /* testo su bottoni/badge scuri */ --text-on-accent: #ffffff; /* testo su sfondo colore accento pieno */ /* --- Bordi / linee --- */ --border-default: #e4e3ec; --border-strong: #cfced9; --gridline: #ececf2; /* --- Colore accento primario (brand) --- */ --color-accent: #6C5CE7; /* viola/indaco: stato attivo, link, linee grafico */ --color-accent-strong: #5A4BD1; /* hover/pressed dell'accento */ --color-accent-wash: #EFECFE; --color-accent-text: #4B3DBF; /* testo su sfondo --color-accent-wash */ /* --- Ink scuro (bottoni primari, badge scuri, lockup logo) --- */ --color-ink: #14151A; --color-ink-hover: #23242C; --text-on-ink: #ffffff; /* --- Colore riservato: SOLO CTA commerciali --- */ --color-cta-reserved: #D4FF3D; --text-on-cta-reserved: #14151A; /* --- Stato (fisso, non tematizzato) --- */ --status-good: #0ca30c; --status-good-wash:#e6f7e6; --status-warning: #fab219; --status-warning-wash:#fff6e0; --status-critical: #d03b3b; --status-critical-wash:#fbe9e9; --status-info: #2563eb; --status-info-wash:#e8f0fe; /* Testo per badge su sfondo -wash: dichiarati ESPLICITAMENTE per tema invece di riusare --status-* nudo, perché lo stesso colore letto in light e in dark non garantisce 4.5:1 su ENTRAMBI i wash. */ --status-good-text: #0a6b0a; --status-warning-text: #8a5a00; --status-critical-text: #a92a2a; --status-info-text: #1d4ed8; /* --- Radius --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* --- Ombre (uso minimo: modali, dropdown, elementi sopraelevati) --- */ --shadow-sm: 0 1px 2px rgba(20,21,26,0.06); --shadow-md: 0 4px 16px rgba(20,21,26,0.10); --shadow-lg: 0 12px 32px rgba(20,21,26,0.16); /* --- Tipografia --- */ --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 28px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-base: 1.5; --label-letter-spacing: 0.06em; /* --- Spaziatura (scala 4px) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; } /* ---- Dark mode "Yoshi / Marco" — quello realmente usato dai 3 progetti, non il dark generico del repo Smart Design Style. Palette viola su blu-notte, verificata identica su Dashboard CX / Reperibilità / Ruota. */ :root[data-theme="dark"] { color-scheme: dark; --surface-page: #0f1117; --surface-card: #1a1d23; --surface-hover: #23272f; --surface-sidebar: #1a1d23; --surface-topbar: #0f1117; --surface-accent-wash: rgba(167,139,250,.06); --border-default: #2e3340; --border-strong: #3a3f4d; --gridline: #2e3340; --text-primary: #e2e6ef; --text-secondary: #6b7280; --text-muted: #6b7280; --text-on-dark: #ffffff; --text-on-accent: #ffffff; --color-accent: #a78bfa; --color-accent-strong: #7c3aed; --color-accent-wash: rgba(167,139,250,.12); --color-accent-text: #a78bfa; --color-ink: #7c3aed; --color-ink-hover: #6d28d9; --text-on-ink: #ffffff; --status-good: #34d399; --status-good-wash: rgba(52,211,153,.12); --status-good-text: #34d399; --status-warning: #f59e0b; --status-warning-wash: rgba(245,158,11,.12); --status-warning-text: #f59e0b; --status-critical: #ef4444; --status-critical-wash: rgba(239,68,68,.12); --status-critical-text: #ef4444; --status-info-text: #60a5fa; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.4); }