CSS

Architettura a layer

Il CSS del Design System è distribuito in file indipendenti da caricare in sequenza. Ogni layer ha una responsabilità precisa e può essere aggiornato indipendentemente dagli altri.

custom-properties.css   ← token layer  (colori, spaziatura, tipografia)
       ↓
core.css                ← componenti siti informativi RT
       ↓
servizi.css             ← componenti widget / servizi digitali  [opzionale]

font.css                ← @font-face del font di default (Open Sans)  [indipendente, vedi sotto]

<!-- 1. Token (custom properties) -->
<link rel="stylesheet" href="/css/custom-properties.css">

<!-- 2. Core - siti informativi RT -->
<link rel="stylesheet" href="/css/core.css">

<!-- 3. Servizi - solo se si usano componenti 07-widgets / 08-servizi -->
<link rel="stylesheet" href="/css/servizi.css">

<!-- 4. Font - opzionale, font di default Open Sans -->
<link rel="stylesheet" href="/css/font.css">

Contenuto di ogni bundle

`custom-properties.css`

Definisce tutte le CSS Custom Properties del Design System: colori primitivi e semantici, scale di spaziatura, font, border-radius, shadow.

È l’unica fonte di verità per i token. Non va duplicato o ridefinito altrove.

:root {
  --color-primary: #AD1016;
  --color-neutral-50: #F9FAFB;
  --spacing-4: 1rem;
  /* … */
}

Sorgente: public/css/custom-properties.css - vedi risorsa

`core.css`

Contiene i componenti per i siti informativi Regione Toscana:

Layer	Contenuto
Tailwind base	Reset, box-sizing, utility classes (prefisso `rtds-`)
`01-design-system/`	Stili tipografici base, griglie
`02-atoms/`	Button, icon, input, select, chip, badge…
`03-molecules/`	Card, accordion, input-field, select-field…
`04-organisms/`	Header, footer, carousel, hero…
`09-others/banner-onboarding`	Banner cookie/onboarding

Prerequisito: custom-properties.css caricato prima.

Sorgente: public/css/core.css - vedi risorsa

Minificato: public/css/core.min.css - vedi risorsa

`servizi.css`

Contiene i componenti per i servizi digitali e widget embeddati:

Layer	Contenuto
`07-widgets/`	widget-box, widget-search, widget-components…
`08-servizi/`	card-smart, accordion-smart, struttura-gerarchica, trascinamento-oggetti, file, upload, page-header-base-smart…

CSS vanilla puro - gli @apply Tailwind sono già stati risolti a build time. Nessuna dipendenza da Tailwind a runtime.

Prerequisiti: custom-properties.css + core.css caricati prima.

Sorgente: public/css/servizi.css - vedi risorsa

Minificato: public/css/servizi.min.css - vedi risorsa

`font.css`

Contiene le regole @font-face del font di default del DS (Open Sans, più pesi/varianti). Non è importato dentro core.css/servizi.css - va sempre incluso come <link> a parte, indipendentemente dagli altri tre layer. Senza font.css il testo usa il fallback di sistema del browser invece di Open Sans; il resto della libreria non è interessato. Dettagli sui font in Font.

Sorgente: public/css/font.css - vedi risorsa

Bundle monolitico (legacy)

Bundle unico con tutti i componenti. Mantenuto per compatibilità con applicativi o interfacce sviluppati in precedenza sull’architettura monolitica, prima dello split in core.css/servizi.css. Per nuove integrazioni preferire l’architettura a layer descritta sopra.

public/css/main.css - vedi risorsa
public/css/main.min.css - vedi risorsa

Librerie esterne

I file CSS delle librerie di terze parti si trovano in public/css/libraries/{nome-libreria}.

Queste librerie non fanno parte del pacchetto di distribuzione RTDS: chi integra il DS le carica per conto proprio se usa i componenti che le richiedono.

Snippet di integrazione

Gli snippet seguenti mostrano i CSS serviti da CDN, che sarà la modalità principale di distribuzione ed è ancora in fase di definizione. Non sarà l’unica: si potrà continuare a includere il CSS già compilato distribuito con la libreria, oppure a compilare il proprio CSS nel proprio ambiente - le tre modalità sono descritte in Customizzazione del tema. Finché il canale CDN non è attivo, sostituire gli URL degli snippet con i percorsi locali dei file copiati dal pacchetto ZIP.

Sito informativo RT (solo core)

<head>
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/custom-properties.css">
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/core.css">
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/font.css"> <!-- opzionale: font di default Open Sans -->
</head>

<head>
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/custom-properties.css">
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/core.css">
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/servizi.css">
  <link rel="stylesheet" href="https://cdn.example.com/rtds/css/font.css"> <!-- opzionale: font di default Open Sans -->
</head>

Se il CMS ospitante ha già un suo CSS di base e si vogliono embeddare solo i widget servizi, è comunque necessario caricare core.css perché servizi.css dipende dalle sue classi utility e dagli stili degli atom/molecule (es. rtds-btn, rtds-chip) che i widget usano internamente.

<!-- Stili del CMS ospitante (già presenti) -->
<!-- Aggiungere solo: -->
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/custom-properties.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/core.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/servizi.css">

Il prefisso rtds- su tutte le classi Tailwind riduce al minimo i conflitti con il CSS del sito ospitante.

Personalizzare i colori e i token

Questa pagina descrive cosa contengono i bundle. Come sovrascriverli per adattare il DS al proprio brand - livelli di token, pattern di override sicuri e pattern triple fallback dei componenti servizi - è documentato in Customizzazione del tema, che ne è l’unica sede.

Compilare e servire i CSS in locale

Come si avviano i dev server delle due istanze e come si produce la build statica è documentato in Installazione e sviluppo.