Questa documentazione descrive il sistema di stili e temi utilizzato nel progetto, pensato per supportare template completamente diversi tra loro, mantenendo però una base tecnica comune.

Il cuore del sistema è basato su:

• Tailwind CSS per la parte utility-first
• Variabili CSS (HSL) per gestire i colori in modo dinamico
• ShadCN/UI per componenti riutilizzabili e facilmente tematizzabili

Permettere a ogni template (evento, estetista, associazione, ecc.) di mostrarsi con un proprio look-and-feel distintivo — colore, font, layout — senza duplicazioni di codice e mantenendo pulitezza architetturale.

La scelta di usare variabili HSL + Tailwind permette una personalizzazione avanzata dei colori senza dover ridefinire manualmente ogni classe. Inoltre, grazie al wrapping tramite classi come .template-evento, possiamo applicare stili specifici solo laddove necessario, evitando conflitti globali.

Questo sistema tematico si basa su una combinazione mirata di strumenti moderni e flessibili:

Supportiamo la nuova App Router di Next.js, dove i template sono organizzati in sotto-directory e caricati dinamicamente tramite [slug].

Usiamo Tailwind come framework principale per gli stili. I colori e le utility vengono estesi per supportare i temi definiti con CSS variables.

🔧 Configurazione speciale:
Tailwind è configurato per riconoscere i colori tramite hsl(var(--nome)), grazie all’estensione nel file tailwind.config.js. Questo approccio è ispirato alla struttura di ShadCN/UI.

I componenti dell’app seguono lo stile di ShadCN/UI, che a sua volta si basa su Radix UI e Tailwind.
ShadCN fornisce componenti stilizzabili che reagiscono automaticamente ai cambiamenti delle variabili CSS.

Esempio: Cambiando --primary in un tema, tutti i componenti che usano bg-primary cambieranno colore.

Oltre alle utility class, alcuni stili complessi (come gradienti o animazioni) vengono definiti direttamente in file CSS dedicati, usando sempre le stesse variabili.

#. 🎨 Architettura del sistema

Un "tema" rappresenta l’insieme degli stili che vengono applicati a un singolo template (evento, estetista, ecc.).
Ogni tema ha:

• Un proprio file CSS (global.css)
• Una classe wrapper nel file style.css (template-evento, template-estetista)
• Una palette di colori definita con variabili HSL

Ogni volta che un template viene caricato nel suo file layout è presente ad esempio

import '@evento/styles/globals.css';

Il che permette di importare la classe css con i temi/colori del template evento, che quindi potrà essere assegnata all'interno del codice Esempio:

<div className="template-evento">
  <Button>Cliccami</Button>
</div>

In questo caso, il button userà il colore --primary definito nel file di stile dell'evento.

app/
 └── globals.css         ← importa tutti i temi
/template
   └── evento/
         └── app/
              └── layout.tsx    ← usa className="template-evento"
         └── styles/
              └── global.css    ← definisce --background, --primary, ecc.

Ogni template del progetto (evento, estetista, associazione, ecc.) è associato a un proprio tema CSS, definito come un set di variabili all’interno di file .css dedicati.

Queste variabili permettono a Tailwind (e quindi anche a ShadCN) di generare gli stili in base al template corrente.

Un “tema” è semplicemente un blocco di codice CSS che ridefinisce alcune variabili:

.template-evento: {
  --background: 210 30% 94%;
  --foreground: 145 30% 10%;
  --primary: 145 70% 45%;
  --primary-foreground: 0 0% 98%;
  --secondary: 140 25% 85%;
  --secondary-foreground: 145 30% 10%;
....
}

Così facendo, ogni componente che usa Tailwind (bg-primary, text-secondary, ecc.) si adatta automaticamente al tema.

• Usa sempre .template-nome: per legarlosolo al template corrispondente.
• Mantieni coerenza tra i colori usati (es. primari/secondari/muted).
• Abbiamo deciso di utilizzare il formato esadecimale dei colori, perché più leggibile e comodo.

Per applicare un tema dinamicamente, basta aggiungere una classe al layout del template che stai caricando — questa classe attiverà il tema definito nel relativo file CSS.

export default function EventoLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="template-evento">
      {children}
    </div>
  )
}

export default function EstetistaLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="template-estetista">
      {children}
    </div>
  )
}

Tailwind e ShadCN reagiranno al contesto in cui sono inclusi:
Se sei sotto <div class="template-evento">, i colori saranno quelli dell’evento;
se sei in <div class="template-estetista">, seguiranno lo stile estetista.

Tailwind genera classi stile bg-primary, text-secondary, ecc., solo se hai definito quelle variabili nel tailwind.config.js. Fuori da quel sistema, non puoi usarle direttamente come bg-[var(--primary)].

Tuttavia, puoi tranquillamente usare variabili definite a parte in JSX inline style, specie per casi avanzati come gradienti, shadow o animazioni complesse.

Immagina di voler creare un componente con uno sfondo a gradiente tra viola chiaro e viola scuro.

.template-evento: {
  --viola-chiaro: 240 100% 80%;     /* Viola chiaro */
  --viola-scuro: 240 100% 20%;     /* Viola scuro */
}

export default function GradientBox() {
  return (
    <div style={{
      backgroundImage: 'linear-gradient(to bottom, hsl(var(--viola-chiaro)), hsl(var(--viola-scuro)))',
      padding: '2rem',
      color: 'white',
      borderRadius: '0.5rem'
    }}>
      Questo è un box con gradiente viola personalizzato.
    </div>
  )
}

Così, il gradiente funziona indipendentemente da Tailwind, e rispetta i valori definiti nel tema.

❌ Non puoi fare: bg-[var(--nome)] → Tailwind non lo riconosce ✅ Puoi però usare: style={{ backgroundColor: 'hsl(var(--nome))' }} 🎯 Le utility Tailwind vanno sempre definite in tailwind.config.js per funzionare.