/* Il design system V-Choux, come CSS puro per un portale senza React. I componenti del design system sono componenti React estratti dall'Hub, e qui non c'e' React: quindi si adottano i token (che sono CSS e basta) e si riscrivono i componenti come classi, guidate dalle macro di `templates/_ds.html`. I nomi delle classi ricalcano i nomi dei componenti (`ds-button`, `ds-badge`, `ds-card`) e le varianti ricalcano quelle dichiarate nei `.d.ts`, cosi' chi passa da un prodotto all'altro ritrova lo stesso vocabolario. La regola che tiene in piedi questo file: nessun valore letterale di colore, spaziatura, raggio o ombra. Tutto passa da un token. Se serve un valore che non c'e', si aggiunge un token, non un numero. Il prefisso `ds-` e' nato per convivere con `app.css`, i 25 KB recuperati dalla vecchia istanza. Adesso nessuna pagina viva carica piu' quel foglio, ma il prefisso resta: dice a colpo d'occhio quali classi vengono dal design system e quali sono del portale (`pt-`, in `portale.css`). */ @import url('ds/tokens/colors.css'); @import url('ds/tokens/spacing.css'); @import url('ds/tokens/effects.css'); @import url('ds/tokens/typography.css'); @import url('ds/tokens/fonts.css'); /* ============================================================ L'unico token che il portale ribalta Il fondo del tema scuro non e' nero pieno ma #06090f, cioe' hsl(220 43% 4%): un nero appena blu, chiesto dal titolare. Sta qui e non in `ds/tokens/colors.css`, che e' una copia fedele del design system e va lasciata tale (vedi `ds/PROVENIENZA.md`): un valore cambiato dentro la copia si perderebbe alla prossima riconciliazione, senza che nessuno se ne accorga. Resta nel formato a tre valori del layer shadcn, perche' `--color-bg` lo avvolge in `hsl()`. Il tema chiaro non e' toccato. ============================================================ */ :root{ /* Il fondo. */ --background:220 43% 4%; /* @kind other */ --n-0:hsl(220 43% 4%); /* Le superfici. Il fondo da solo non si vedeva: quasi tutto lo schermo e' coperto da card e pannelli, che restavano sul grigio 240 del design system e continuavano a leggersi come neri. Qui prendono la tinta del fondo, con la saturazione che scende mentre la chiarezza sale: 43 per cento sul fondo resta elegante, lo stesso 43 su una card al 16 per cento diventa un blu acceso. La card e' l'eccezione: sta a `220 43% 11%`, che e' esattamente **#101828**, cioe' `--brand-ink`, il blu scuro V-Choux del design system. Scritta come tripletta e non come `var(--brand-ink)` perche' `--color-card` la avvolge in `hsl()`, e una tripletta e' l'unica cosa che quella funzione accetta. Gli altri passi di chiarezza restano quelli del design system, quindi la scala dei contrasti non cambia. */ --card:220 43% 11%; /* @kind other */ --card-hover:220 43% 14%; /* @kind other */ --popover:220 30% 12%; /* @kind other */ --secondary:220 24% 16%; /* @kind other */ --secondary-hover:220 20% 20%; /* @kind other */ --muted:220 24% 16%; /* @kind other */ --input:220 24% 16%; /* @kind other */ --border:220 20% 20%; /* @kind other */ --sidebar:220 30% 12%; /* @kind other */ --sidebar-accent:220 26% 15%; /* @kind other */ --sidebar-border:220 20% 20%; /* @kind other */ --n-8:hsl(220 43% 11%); } /* ============================================================ Base Il tema predefinito e' scuro, come nel design system. Il chiaro si accende aggiungendo class="light" sull'elemento , e non serve toccare altro: `colors.css` ribalta i neutri da solo. ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{background:var(--color-bg);color-scheme:dark} html.light{color-scheme:light} body{ margin:var(--space-0); background:var(--color-bg); color:var(--color-fg); font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--lh-base); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{margin:var(--space-0);font-weight:var(--fw-semibold);line-height:var(--lh-base)} p{margin:var(--space-0)} ul,ol,dl,dd{margin:var(--space-0);padding-left:var(--space-0)} a{color:inherit;text-decoration:none} a:hover{text-decoration:underline} /* Il focus da tastiera si vede sempre, ovunque. Una regola sola invece di una per componente: dimenticarne una vuol dire un pezzo di pagina non percorribile. I pochi numeri in px che restano in questo file sono tutti geometria di un componente, non spaziatura: lo spessore di un contorno, il 34x20 dell' interruttore, il diametro predefinito del bottone rotondo. Sono numeri che i `.d.ts` del design system scrivono letterali, e trasformarli in token inventerebbe una scala che il design system non ha. Colori, spaziature, raggi e ombre invece passano tutti da un token, senza eccezioni. */ :focus-visible{ outline:2px solid var(--color-ring); outline-offset:2px; border-radius:var(--radius-sm); } .ds-sr-only{ position:absolute;width:1px;height:1px; padding:var(--space-0);margin:calc(var(--space-1) * -1); overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ============================================================ core / Icon Lo sprite si consuma con , e l'icona eredita il colore del testo. ============================================================ */ .ds-icon{width:1em;height:1em;flex:none;vertical-align:-0.125em;fill:none;stroke:currentColor} .ds-icon-sm{width:0.875em;height:0.875em} .ds-icon-lg{width:1.25em;height:1.25em} /* ============================================================ core / Button Varianti del `.d.ts`: default (gradiente accento), solid, destructive, success, warning, outline, secondary, ghost, link, discord, youtube. Le varianti piene si alzano di 2px al passaggio del mouse e prendono il bagliore, come nell'Hub. ============================================================ */ .ds-button{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); padding:var(--space-2) var(--space-4); border:var(--border-width) solid transparent; border-radius:var(--radius-md); font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm); font-weight:var(--fw-semibold); cursor:pointer; transition:var(--transition-all); text-decoration:none; white-space:nowrap; } .ds-button:hover{text-decoration:none} .ds-button[disabled],.ds-button[aria-disabled="true"]{opacity:0.5;cursor:not-allowed} .ds-button-default{background:var(--gradient-primary);color:var(--color-primary-fg)} .ds-button-default:hover:not([disabled]){transform:translateY(var(--lift-hover));box-shadow:var(--shadow-glow)} .ds-button-solid{background:var(--color-primary);color:var(--color-primary-fg)} .ds-button-solid:hover:not([disabled]){background:var(--color-primary-hover);transform:translateY(var(--lift-hover))} .ds-button-destructive{background:var(--gradient-destructive);color:var(--color-fg)} .ds-button-destructive:hover:not([disabled]){transform:translateY(var(--lift-hover))} .ds-button-success{background:var(--gradient-success);color:var(--color-fg)} .ds-button-success:hover:not([disabled]){transform:translateY(var(--lift-hover))} .ds-button-warning{background:var(--gradient-warning);color:var(--color-primary-fg)} .ds-button-warning:hover:not([disabled]){transform:translateY(var(--lift-hover))} .ds-button-outline{background:transparent;border-color:var(--color-border);color:var(--color-fg)} .ds-button-outline:hover:not([disabled]){background:var(--color-surface-hover)} .ds-button-secondary{background:var(--color-secondary);color:var(--color-fg)} .ds-button-secondary:hover:not([disabled]){background:var(--color-secondary-hover)} .ds-button-ghost{background:transparent;color:var(--color-muted-fg)} .ds-button-ghost:hover:not([disabled]){background:var(--color-secondary);color:var(--color-fg)} .ds-button-link{background:transparent;color:var(--color-fg);padding:var(--space-0);text-decoration:underline} .ds-button-discord{background:var(--color-discord);color:var(--color-fg)} .ds-button-youtube{background:var(--color-youtube);color:var(--color-fg)} .ds-button-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);line-height:var(--lh-xs)} .ds-button-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base);line-height:var(--lh-base)} .ds-button-icon{padding:var(--space-2);aspect-ratio:1} .ds-button-pill{border-radius:var(--radius-pill)} /* ============================================================ core / IconButton Controllo circolare, solo icona. La misura arriva come variabile inline dalla macro, perche' nel `.d.ts` e' un numero in px. ============================================================ */ .ds-icon-button{ --ds-icon-button-size:36px; display:inline-flex;align-items:center;justify-content:center; width:var(--ds-icon-button-size);height:var(--ds-icon-button-size); padding:var(--space-0); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface);color:var(--color-fg); cursor:pointer;position:relative; transition:var(--transition-colors); } .ds-icon-button:hover{background:var(--color-surface-hover)} .ds-icon-button.is-active{background:var(--color-secondary);border-color:var(--color-ring)} .ds-icon-button .ds-icon{width:50%;height:50%} .ds-icon-button.has-badge::after{ content:"";position:absolute;top:var(--space-0);right:var(--space-0); width:var(--space-2);height:var(--space-2); border-radius:var(--radius-pill);background:var(--color-destructive); } /* ============================================================ core / Badge Varianti del `.d.ts`: default, secondary, destructive, outline. `status` aggiunge il pallino da 8px. ============================================================ */ .ds-badge{ display:inline-flex;align-items:center;gap:var(--space-2); padding:var(--space-1) var(--space-3); border:var(--border-width) solid transparent; border-radius:var(--radius-pill); font-size:var(--text-xs);line-height:var(--lh-xs); font-weight:var(--fw-medium); white-space:nowrap; } .ds-badge-default{background:var(--color-primary);color:var(--color-primary-fg)} .ds-badge-secondary{background:var(--color-secondary);color:var(--color-fg)} .ds-badge-destructive{background:var(--color-destructive);color:var(--color-fg)} .ds-badge-outline{background:transparent;border-color:var(--color-border);color:var(--color-fg)} .ds-badge-dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);flex:none} .ds-badge-online .ds-badge-dot{background:var(--color-success);animation:ds-pulse var(--duration-slower) ease-in-out infinite alternate} .ds-badge-offline .ds-badge-dot{background:var(--color-destructive)} @keyframes ds-pulse{from{opacity:1}to{opacity:0.4}} /* ============================================================ core / Card Quattro forme del `.d.ts`: dashboard (35px piu' ombra), panel (22px), tile (16px), flat (16px senza ombra). Sempre bordo da 1px, mai una striscia colorata a sinistra: in questo marchio non esiste. ============================================================ */ .ds-card{ border:var(--border-width) solid var(--color-border); background:var(--color-surface); color:var(--color-fg); transition:var(--transition-colors); } .ds-card-dashboard{border-radius:var(--radius-card);box-shadow:var(--shadow-lg)} .ds-card-panel{border-radius:var(--radius-panel);box-shadow:var(--shadow-panel)} .ds-card-tile{border-radius:var(--radius-tile)} .ds-card-flat{border-radius:var(--radius-tile);box-shadow:none} .ds-card-pad{padding:var(--card-pad)} .ds-card-hoverable:hover{background:var(--color-surface-hover)} .ds-card-hoverable:focus-within{border-color:var(--color-ring)} @media (min-width:640px){ .ds-card-pad{padding:var(--card-pad-lg)} } /* ============================================================ core / Separator ============================================================ */ .ds-separator{border:none;background:var(--color-border)} .ds-separator-horizontal{height:var(--border-width);width:100%} .ds-separator-vertical{width:var(--border-width);align-self:stretch} .ds-separator-labelled{ display:flex;align-items:center;gap:var(--space-3); background:none;height:auto; color:var(--color-muted-fg); font-size:var(--text-xs);line-height:var(--lh-xs); text-transform:var(--type-eyebrow-transform); letter-spacing:var(--type-display-tracking); } .ds-separator-labelled::before,.ds-separator-labelled::after{ content:"";flex:1;height:var(--border-width);background:var(--color-border); } /* ============================================================ core / Skeleton ============================================================ */ .ds-skeleton{ background:var(--color-muted); border-radius:var(--radius-sm); animation:ds-skeleton var(--duration-slower) ease-in-out infinite alternate; } @keyframes ds-skeleton{from{opacity:1}to{opacity:0.5}} /* ============================================================ forms / Label, Input, Select, Checkbox, Switch ============================================================ */ .ds-label{ display:block; color:var(--color-muted-fg); font-size:var(--text-sm);line-height:var(--lh-sm); font-weight:var(--fw-medium); } .ds-input{ width:100%; padding:var(--space-2) var(--space-3); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); background:var(--color-muted); color:var(--color-fg); font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm); } .ds-input::placeholder{color:var(--color-muted-fg)} .ds-input-invalid{border-color:var(--color-destructive)} .ds-select-guscio{position:relative;display:inline-flex;align-items:center;width:100%} .ds-select-freccia{ position:absolute;right:var(--space-3); pointer-events:none; color:var(--color-muted-fg); } .ds-select{ appearance:none;-webkit-appearance:none; width:100%; padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); background:var(--color-muted); color:var(--color-fg); font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm); cursor:pointer; } .ds-checkbox{ display:flex;align-items:flex-start;gap:var(--space-2); padding:var(--space-1) var(--space-0); cursor:pointer; font-size:var(--text-sm);line-height:var(--lh-sm); } /* La casella e' disegnata, non nativa: `accent-color` colora la spunta ma non il fondo di una casella vuota, e la richiesta era che a riposo fosse la stessa tinta della traccia del toggle. Quindi `appearance:none` e tre stati a mano: vuota, spuntata, a meta'. Le misure del segno di spunta sono in px come il 34x20 del toggle: e' geometria di un disegno, non spaziatura di layout. */ .ds-checkbox input{ appearance:none;-webkit-appearance:none; width:var(--space-4);height:var(--space-4); margin:var(--space-0);flex:none; position:relative; border:var(--border-width) solid var(--color-border); /* Quattro pixel e non `--radius-sm`, che vale 12px: su un quadrato di 16px quel raggio fa un cerchio, e una casella tonda e' indistinguibile da un radio. La forma e' l'unica cosa che dice «qui puoi spuntarne piu' di una». */ border-radius:calc(var(--radius) * 0.25); background:var(--color-secondary); cursor:pointer; transition:var(--transition-colors); } .ds-checkbox input:checked, .ds-checkbox input:indeterminate{ background:var(--char-hiroshi); border-color:var(--char-hiroshi); } .ds-checkbox input:checked::after{ content:"";position:absolute;left:4px;top:1px; width:5px;height:9px; border:solid var(--n-8);border-width:0 2px 2px 0; transform:rotate(45deg); } /* Lo stato a meta' e' quello del gruppo «Italia» con solo alcune regioni. */ .ds-checkbox input:indeterminate::after{ content:"";position:absolute;left:3px;top:6px; width:8px;height:2px; background:var(--n-8); } .ds-checkbox input:disabled{cursor:not-allowed} .ds-checkbox:has(input:disabled){cursor:not-allowed} .ds-checkbox-text{flex:1;min-width:0} /* 34x20, come nel `.d.ts`. Un input nascosto piu' una traccia disegnata: cosi' la tastiera e i lettori di schermo vedono ancora una casella vera. */ .ds-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer} .ds-switch input{position:absolute;opacity:0;width:1px;height:1px} .ds-switch-track{ width:34px;height:20px;flex:none; border-radius:var(--radius-pill); background:var(--color-secondary); transition:var(--transition-colors); position:relative; } .ds-switch-thumb{ position:absolute;top:2px;left:2px; width:16px;height:16px; border-radius:var(--radius-pill); background:var(--color-fg); transition:var(--transition-all); } .ds-switch input:checked + .ds-switch-track{background:var(--color-primary)} .ds-switch input:checked + .ds-switch-track .ds-switch-thumb{transform:translateX(14px);background:var(--color-primary-fg)} .ds-switch input:focus-visible + .ds-switch-track{outline:2px solid var(--color-ring);outline-offset:2px} /* ============================================================ navigation / Tabs, SegmentedControl, SidebarNav ============================================================ */ .ds-tabs{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap} .ds-tab{ padding:var(--space-2) var(--space-4); border:none;border-radius:var(--radius-pill); background:transparent;color:var(--color-muted-fg); font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm); font-weight:var(--fw-medium); cursor:pointer;transition:var(--transition-colors); } .ds-tab:hover{color:var(--color-fg);text-decoration:none} .ds-tab.is-active{background:var(--gradient-primary);color:var(--color-primary-fg)} .ds-tabs-sm .ds-tab{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);line-height:var(--lh-xs)} .ds-tabs-trailing{margin-left:auto;color:var(--color-muted-fg);font-size:var(--text-xs);line-height:var(--lh-xs)} .ds-segmented{ display:inline-flex;gap:var(--space-1); padding:var(--space-1); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-muted); } .ds-segmented-option{ padding:var(--space-1) var(--space-3); border:none;border-radius:var(--radius-pill); background:transparent;color:var(--color-muted-fg); font-family:inherit;font-size:var(--text-xs);line-height:var(--lh-xs); font-weight:var(--fw-medium);cursor:pointer; transition:var(--transition-colors); } .ds-segmented-option:hover{color:var(--color-fg);text-decoration:none} .ds-segmented-option.is-active{background:var(--color-primary);color:var(--color-primary-fg)} .ds-sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1)} .ds-sidebar-group-title{ padding:var(--space-2) var(--space-3); color:var(--color-muted-fg); font-size:var(--text-xs);line-height:var(--lh-xs); font-weight:var(--fw-semibold); text-transform:var(--type-eyebrow-transform); letter-spacing:var(--type-display-tracking); } .ds-sidebar-item{ display:flex;align-items:center;gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--color-muted-fg); font-size:var(--text-sm);line-height:var(--lh-sm); transition:var(--transition-colors); } .ds-sidebar-item:hover{background:var(--color-secondary);color:var(--color-fg);text-decoration:none} .ds-sidebar-item.is-active{background:var(--color-secondary);color:var(--color-fg);font-weight:var(--fw-semibold)} .ds-sidebar-item-count{margin-left:auto;font-size:var(--text-xs);font-family:var(--font-mono);opacity:0.75} /* ============================================================ feedback / Accordion, Dialog, Tooltip, Progress ============================================================ */ .ds-accordion{display:flex;flex-direction:column} .ds-accordion-item{border-bottom:var(--border-width) solid var(--color-border)} .ds-accordion-trigger{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-2); width:100%; padding:var(--space-3) var(--space-0); border:none;background:transparent; color:var(--color-fg); font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm); font-weight:var(--fw-semibold); cursor:pointer;text-align:left; } .ds-accordion-trigger .ds-icon{transition:var(--transition-all)} .ds-accordion-trigger[aria-expanded="false"] .ds-icon{transform:rotate(-90deg)} .ds-accordion-panel{padding-bottom:var(--space-3)} .ds-accordion-panel[hidden]{display:none} .ds-dialog-backdrop{position:fixed;inset:0;z-index:40;background:var(--color-bg);opacity:0.7} .ds-dialog-backdrop[hidden],.ds-dialog[hidden]{display:none} .ds-dialog{ position:fixed;z-index:50; top:50%;left:50%;transform:translate(-50%,-50%); width:min(calc(100% - var(--space-8)), var(--ds-dialog-width, var(--sidebar-w-mobile))); max-height:calc(100% - var(--space-8)); overflow-y:auto; padding:var(--card-pad-lg); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-panel); background:var(--color-surface-raised); box-shadow:var(--shadow-menu); } .ds-dialog-title{font-size:var(--text-lg);line-height:var(--lh-lg)} .ds-dialog-description{margin-top:var(--space-2);color:var(--color-muted-fg);font-size:var(--text-sm);line-height:var(--lh-sm)} .ds-dialog-body{margin-top:var(--space-4)} .ds-dialog-footer{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6)} .ds-dialog-close{position:absolute;top:var(--space-4);right:var(--space-4)} .ds-tooltip{position:relative;display:inline-flex} .ds-tooltip-label{ position:absolute;bottom:100%;left:50%;transform:translateX(-50%); margin-bottom:var(--space-2); padding:var(--space-2) var(--space-3); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-raised); color:var(--color-fg); box-shadow:var(--shadow-menu); font-size:var(--text-xs);line-height:var(--lh-xs); font-weight:var(--fw-regular); width:max-content;max-width:var(--sidebar-w); opacity:0;visibility:hidden; /* Solo l'opacita', e veloce. Con `--transition-all` la transizione prendeva anche `visibility`, che e' una proprieta' a scatto: diventava visibile a meta' dei 300ms, quindi passando il mouse senza fermarsi il tooltip non compariva mai e sembrava rotto. */ transition:opacity var(--duration-fast) ease-out; z-index:30; text-align:left;white-space:normal; } .ds-tooltip:hover .ds-tooltip-label, .ds-tooltip:focus-within .ds-tooltip-label{opacity:1;visibility:visible} .ds-tooltip-bubble .ds-tooltip-label{ position:static;transform:none;opacity:1;visibility:visible; margin:var(--space-0);border-radius:var(--radius-tile); box-shadow:var(--shadow-bubble); } .ds-progress{ width:100%; height:var(--ds-progress-height, var(--space-2)); border-radius:var(--radius-pill); background:var(--color-muted); overflow:hidden; } .ds-progress-fill{ height:100%; border-radius:var(--radius-pill); background:var(--gradient-primary); transition:var(--transition-all); } /* Chi ha chiesto meno movimento non lo riceve. Le transizioni di colore restano: non sono movimento. */ @media (prefers-reduced-motion:reduce){ .ds-badge-online .ds-badge-dot,.ds-skeleton{animation:none} .ds-button:hover{transform:none} }