/** * ===================================================== * TOKEN DI DESIGN — superfici pubbliche (FILE GENERATO) * ===================================================== * * NON MODIFICARE A MANO. E' la copia dei livelli 0-2 (semi, primitivi, * semantici) di admin_dashboard/static/admin_dashboard/css/design-system/tokens.css, * scritta da `python manage.py build_public_tokens` (task-932). * `check_css_tokens` fallisce se i due file divergono. * * Chi lo legge: website/base.html, users/platform_base.html, portal/base.html, * templates/_base/site.html. Subito dopo si carica `aliases.css` (i nomi * legacy `--rr-*`, `--color-*`, `--site-*`, `--pass-*`, `--primary` come * var() di questi) e poi il blocco `{% brand_style_block %}` che riscrive i * semi `--admin-brand-*` per l'organizzazione della richiesta. */ :root { /* =================================================== BREAKPOINTS (task-697) =================================================== Una sola sorgente per CSS e JS. Prima erano due: `sidebar.js` chiamava tablet tutto sotto 1200, `core/layout.css` sotto 1024 — quindi fra 1025 e 1199 lo script piegava la barra e il foglio la teneva aperta, e la pagina si contraddiceva a meta' schermo. Le media query non possono leggere una var(), quindi il numero resta scritto anche li'; ma il JS non lo ripete piu': lo legge da qui con getComputedStyle. Cambiando questi due valori si cambia il JS, e le media query restano l'unico posto da tenere allineato a mano. */ --admin-bp-mobile: 768px; --admin-bp-tablet: 1025px; /* =================================================== LIVELLO 0 — SKIN SEEDS (task-515) =================================================== The ONLY values a tenant can move. `admin_dashboard/theming.py` re-declares this same block inline on per request; everything below derives from it with var()/calc(), so a club changes two colors and one density and the whole dashboard follows — instead of 220 literals drifting apart one page at a time. Defaults are the historical Colombo values, so an org that never opens Aspetto renders exactly as before. */ --admin-brand-primary: #1e3a5f; --admin-brand-primary-rgb: 30, 58, 95; --admin-brand-surface: #1e3a5f; --admin-brand-surface-ink: #ffffff; --admin-brand-surface-ink-rgb: 255, 255, 255; --admin-brand-primary-ink: #ffffff; --admin-brand-primary-ink-rgb: 255, 255, 255; --admin-brand-primary-soft: rgba(30, 58, 95, 0.08); --admin-brand-primary-dark: #13263e; --admin-brand-primary-deep: #182f4d; --admin-brand-primary-lift: #3d76c2; --admin-brand-accent: #d4a853; --admin-brand-accent-rgb: 212, 168, 83; --admin-brand-accent-surface: #d4a853; --admin-brand-accent-surface-ink: #1c2422; --admin-brand-accent-ink: #1c2422; --admin-brand-accent-ink-rgb: 28, 36, 34; --admin-brand-accent-soft: rgba(212, 168, 83, 0.15); --admin-brand-accent-deep: #ad8944; --admin-brand-accent-lift: #dcb974; /* Density multiplies padding and gaps; radius multiplies corners. Both are scales rather than lengths: a preset must not be able to hand calc() a value that makes table rows touch. */ --admin-density: 1; --admin-radius-scale: 1; --admin-border-width: 1px; --admin-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --admin-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* =================================================== LIVELLO 1 — PRIMITIVI (task-910) =================================================== Tinte nude, senza significato e senza tema: le stesse in chiaro e in scuro. Nessuna regola le legge direttamente — le leggono i livelli 2 e 3. E' l'unico blocco, con i semi qui sopra e i colori di STAMPA in fondo, in cui un esadecimale e' una definizione e non un debito (`check_css_tokens` lo fa rispettare). I nomi seguono la scala Tailwind da cui vengono i valori. Tre scale di grigio, perche' tre erano gia' in uso e unificarle sarebbe un cambio visivo, non una rinomina: `gray` (slate) e' quella del cruscotto, `neutral` e' la scala di `--color-gray-*` su cui task-516 ha mappato 632 letterali, `night` e' la pila di superfici del tema scuro. */ --admin-white: #ffffff; /* gray (slate): superfici, bordi, inchiostro */ --admin-gray-25: #fafbfc; --admin-gray-50: #f8fafc; --admin-gray-100: #f1f5f9; --admin-gray-150: #e8edf3; --admin-gray-200: #e2e8f0; --admin-gray-300: #cbd5e1; --admin-gray-400: #94a3b8; --admin-gray-500: #64748b; --admin-gray-600: #475569; --admin-gray-800: #1e293b; --admin-gray-900: #0f172a; /* neutral: la scala legacy `--color-gray-*` (chiaro) */ --admin-neutral-50: #f9fafb; --admin-neutral-100: #f3f4f6; --admin-neutral-200: #e5e7eb; --admin-neutral-300: #d1d5db; --admin-neutral-400: #9ca3af; --admin-neutral-500: #6b7280; --admin-neutral-600: #4b5563; --admin-neutral-700: #374151; --admin-neutral-800: #1f2937; --admin-neutral-900: #111827; /* night: le superfici del tema scuro, dalla piu' chiara alla piu' fonda */ --admin-night-50: #4a5568; --admin-night-100: #2d3044; --admin-night-200: #252836; --admin-night-300: #1e2130; --admin-night-400: #1a1d27; --admin-night-500: #141620; --admin-night-600: #0f1117; --admin-night-700: #0b0d12; --admin-night-800: #08090d; --admin-night-900: #050607; /* tinte di stato e di serie */ --admin-green-50: #ecfdf5; --admin-green-100: #d1fae5; --admin-green-200: #a7f3d0; --admin-green-400: #34d399; --admin-green-600: #059669; --admin-green-700: #047857; --admin-green-800: #065f46; --admin-amber-50: #fffbeb; --admin-amber-100: #fef3c7; --admin-amber-200: #fde68a; --admin-amber-400: #fbbf24; --admin-amber-600: #d97706; --admin-amber-800: #92400e; --admin-red-50: #fef2f2; --admin-red-100: #fee2e2; --admin-red-200: #fecaca; --admin-red-400: #f87171; --admin-red-500: #ef4444; --admin-red-600: #dc2626; --admin-red-700: #b91c1c; --admin-red-800: #991b1b; --admin-blue-50: #eff6ff; --admin-blue-100: #dbeafe; --admin-blue-200: #bfdbfe; --admin-blue-300: #93c5fd; --admin-blue-400: #60a5fa; --admin-blue-500: #3b82f6; --admin-blue-800: #1e40af; --admin-sky-400: #38bdf8; --admin-sky-600: #0284c7; --admin-violet-400: #a78bfa; --admin-violet-600: #7c3aed; --admin-orange-400: #fb923c; --admin-orange-600: #ea580c; --admin-cyan-400: #22d3ee; --admin-cyan-600: #0891b2; --admin-pink-600: #db2777; /* navy e gold: tinte del marchio Colombo che PRECEDONO la skin e non seguono il club (task-910 le misura, non le assolve). Chi le legge deve passare ai semi `--admin-brand-*`; quando l'ultimo lettore se ne va, la riga si cancella. */ --admin-navy-900: #0f2744; --admin-navy-400: #6ba3d6; --admin-navy-300: #8fbde4; --admin-gold-400: #e8c066; --admin-gold-600: #b8913f; --admin-gold-700: #b8922e; /* =================================================== LIVELLO 2 — SEMANTICI (task-910) =================================================== Il vocabolario del CSS nuovo. Ogni nome dice a cosa serve, non di che colore e'; tokens-dark.css ridefinisce solo questi (e il livello 3), mai i primitivi. */ /* Superfici, dal fondo pagina verso l'alto */ --admin-canvas: var(--admin-gray-100); --admin-surface: var(--admin-white); --admin-surface-raised: var(--admin-white); --admin-surface-sunken: var(--admin-gray-50); --admin-surface-overlay: rgba(255, 255, 255, 0.95); --admin-surface-field: var(--admin-white); /* Bordi */ --admin-border: var(--admin-gray-200); --admin-border-strong: var(--admin-gray-300); --admin-border-soft: var(--admin-gray-100); /* Inchiostro */ --admin-ink: var(--admin-gray-800); --admin-ink-2: var(--admin-gray-600); --admin-ink-muted: var(--admin-gray-500); --admin-ink-inverse: var(--admin-white); /* Marchio */ --admin-primary: var(--admin-brand-primary); --admin-primary-ink: var(--admin-brand-primary-ink); --admin-primary-soft: var(--admin-brand-primary-soft); --admin-primary-rgb: var(--admin-brand-primary-rgb); --admin-accent: var(--admin-brand-accent); --admin-accent-ink: var(--admin-brand-accent-ink); --admin-accent-soft: var(--admin-brand-accent-soft); /* Stati: tinta, lavaggio di fondo, inchiostro sopra il lavaggio, bordo */ --admin-success: var(--admin-green-600); --admin-success-bg: var(--admin-green-50); --admin-success-ink: var(--admin-green-800); --admin-success-border: var(--admin-green-200); --admin-warning: var(--admin-amber-600); --admin-warning-bg: var(--admin-amber-50); --admin-warning-ink: var(--admin-amber-800); --admin-warning-border: var(--admin-amber-200); --admin-danger: var(--admin-red-600); --admin-danger-bg: var(--admin-red-50); --admin-danger-ink: var(--admin-red-800); --admin-danger-border: var(--admin-red-200); --admin-info: var(--admin-sky-600); --admin-info-bg: var(--admin-blue-50); --admin-info-ink: var(--admin-blue-800); --admin-info-border: var(--admin-blue-200); /* Riempimento PIENO di stato, quello che porta inchiostro bianco sopra (pastiglia di fase, punto di flusso, barra di avanzamento): a tema unico, come `--bs-success`, perche' in scuro `--admin-success` e' la tinta chiara (#34d399) e il bianco sopra misura 1,92:1. task-932: era cio' che `--stat-{success,…}` faceva di nascosto; ora ha un nome. */ --admin-success-fill: var(--admin-green-600); --admin-warning-fill: var(--admin-amber-600); --admin-danger-fill: var(--admin-red-600); --admin-info-fill: var(--admin-sky-600); /* Due toni di serie senza significato di stato (task-932: erano `--stat-purple`/`--stat-pink`, definiti in stats-system.css). */ --admin-tone-violet: var(--admin-violet-600); --admin-tone-violet-bg: rgba(124, 58, 237, 0.1); --admin-tone-pink: var(--admin-pink-600); --admin-tone-pink-bg: rgba(219, 39, 119, 0.1); /* Spazio — la densita' della skin si applica qui. `--admin-space-1` resta fisso: sotto i 4px non e' piu' uno spazio, e' un errore di rendering. */ --admin-space-1: 0.25rem; --admin-space-2: calc(0.5rem * var(--admin-density)); --admin-space-3: calc(0.75rem * var(--admin-density)); --admin-space-4: calc(1rem * var(--admin-density)); --admin-space-5: calc(1.5rem * var(--admin-density)); --admin-space-6: calc(2rem * var(--admin-density)); --admin-space-7: calc(2.5rem * var(--admin-density)); --admin-space-8: calc(3rem * var(--admin-density)); /* Raggi — la scala della skin si applica qui */ --admin-radius-xs: calc(4px * var(--admin-radius-scale)); --admin-radius-sm: calc(6px * var(--admin-radius-scale)); --admin-radius-md: calc(8px * var(--admin-radius-scale)); --admin-radius-lg: calc(12px * var(--admin-radius-scale)); --admin-radius-xl: calc(16px * var(--admin-radius-scale)); --admin-radius-pill: 9999px; /* Ombre (elevazione) */ --admin-shadow-1: 0 1px 2px rgba(30, 58, 95, 0.04); --admin-shadow-2: 0 1px 3px rgba(30, 58, 95, 0.04), 0 2px 8px rgba(30, 58, 95, 0.06); --admin-shadow-3: 0 2px 6px rgba(30, 58, 95, 0.06), 0 6px 16px rgba(30, 58, 95, 0.08); --admin-shadow-4: 0 8px 24px rgba(30, 58, 95, 0.1), 0 24px 48px rgba(30, 58, 95, 0.12); /* Caratteri e corpi (leggermente piu' piccoli del sito: densita'). task-910: la scala si ferma a `lg` perche' nessuno legge oltre — i 1.212 `font-size` letterali dei fogli sono il prossimo cricchetto. */ --admin-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; --admin-text-xs: 0.75rem; --admin-text-sm: 0.8125rem; --admin-text-base: 0.875rem; --admin-text-md: 0.9375rem; --admin-text-lg: 1rem; /* Piani */ --admin-z-sticky: 1020; --admin-z-header: 1030; /* Movimento */ --admin-motion-fast: 150ms; --admin-motion-base: 200ms; --admin-motion-slow: 300ms; --admin-ease: cubic-bezier(0, 0, 0.2, 1); --admin-ease-out: cubic-bezier(0.16, 1, 0.3, 1); }