Styleguide
La styleguide è inserita all'interno di un .giunti-custom-container che mette il padding orizzontale.
Per quanto riguarda il padding verticale, c'è da capire se si riesce a dare all'intera pagina (Main), o in caso darlo alle varie sections.
Per gli sliders, invece, usare la classe .giunti-slider-container, che mette il padding solo a sinistra.
1. COLORI
Black #161615
Tailwind class: giunti-black
Grigio #7F8EA3
Tailwind class: giunti-gray
Grigio medio #E5E8EC
Tailwind class: giunti-gray_10
Grigio chiaro #F4F6F8
Tailwind class: giunti-gray_20
Rosso #EF1757
Tailwind class: giunti-red
Rosa #F46D86
Tailwind class: giunti-pink
Rosa chiaro #FCF0F2
Tailwind class: giunti-pink_10
Giallo #EFBB42
Tailwind class: giunti-yellow
2. TIPOGRAFIA
Sono state create classi per ogni elemento (h1, h2, p, ecc). Alcune classi utilizzano una funzionalità Sass % ed estendendo una classe base originaria (che ha sempre come suffisso -base). Nelle classi sono solo specificati font-size, line-height e letter-spacing per i vari breakpoints (al momento sono solo o lg o 4xl). Il colore è sempre da aggiungere (di default è nero, dato dal body) Errara corrige: non è vero. di default il colore è un grigio scuro La classe text-giunti-black va data ad ogni sezione / elemento, esattamente come le altre classi.
H1 - 150PX
H1 libri / Banner - 56px
H2 - 80PX
scuola (text)
scuola (link)H3 - 28px
H4 - 22px
H5 - 15px
H6 - 12PX
H6 - 12px (usato nei badge grigi)
Paragraph - 19px
CTA - 20px Menu 1° livello - 22px
NB: ho cambiato la classe. %first-level-menu-base non ha più la line-height,
che ho spostato in .first-level-menu (classe utilizzabile inline o con @apply).
3. LINK e PULSANTI
Tutte le classi che sono state create per i link e i pulsanti si trovano nel file buttons.scss.
Ai link con freccetta e al pulsante con sfondo rosso vanno date sia la classe .button-link che .button__text o .button__pill.
4. INPUTS
4.1 Inputs generici
Da utilizzare ad esempio per registrazione, login, recupero password, dashboard indirizzi, ecc.
Alla form di registrazione login andranno dati dimensioni, padding, border-radius.
Le classi .giunti-input e .giunti-checkbox hanno lo stile per font, colori, padding e width. NON hanno margine top e bottom.
Le icone negli input le ho pensate come absolute e centrarte verticalmente.
Per gli input generici con icone (es: password) non ho previsto una classe apposita da usare come wrapper a cui dare position: relative.
Valutare se crearne una all'occorrenza.
4.2 Input per la ricerca
Per la ricerca, invece, c'è una classe .giunti-search-input__wrapper che ha position: relative. All'icona ho passato le classi tailwind tramite il prop classes, valutare se creare una classe unica che le racchiuda tutte.