WoodyLab

Documentazione · Stili

Un design system parlante

Gli aspetti ricorrenti si definiscono UNA volta come stili nominati nel tema, e si richiamano per nome. Edit-once, propaga ovunque.

La style guide del tema

Fonte unica

La style guide del tema

Ombra, raggio, superficie, bordo, tipografia non si scrivono nel className di ogni viewMode: si definiscono nel global Theme (tab Stili) e si richiamano dal campo Styles. Modifichi lo stile in un punto e la modifica raggiunge TUTTI i viewMode che lo includono.

Raggruppamento

Categorie

Sapere che TIPI di aspetto esistono è un valore, non un vincolo.

Tipografia

Scala e trattamento del testo: display, heading, lead, body, muted.

Elevazione

Ombre e profondità: da shadow-none a shadow-xl.

Contorno

Raggi e bordi: rounded, border, spessori.

Superfici

Sfondi semantici: surface, surfaceAlt, brandGradient.

Generico

Compositi e casi speciali che non ricadono nelle altre categorie.

Meccanica

Due modi di definirli

CSS grezzo: genera .uims-style-nome, safelist-free, usa var(--color-*) per seguire la palette — ideale per ombre, superfici e gradienti. Oppure classi Tailwind (shadow-sm, rounded-md): finiscono in safelist in produzione, così restano renderizzate anche nel bundle minimale.

Due modi di definirli

In pratica

Perché ti conviene

Coerenza

Un’ombra, un raggio, una superficie identici in tutto il sito.

Zero doppioni

I colori restano nella palette, i font nei settings: qui vivono solo gli aspetti.

Cambio a caldo

Ridefinisci uno stile nel tema e tutto il sito lo riflette al salvataggio.

Sotto agli stili c’è Tailwind

Safelist a due modi, className come configurazione, temi dal global.

Vai a Tailwind