Composants d'adalan.css
Catalogue des classes de assets/adalan.css. Chaque composant suit les règles de la charte : diagonale, deux voix, filets en ombre interne.
Typographie
| Classe |
Rôle |
.hero |
Titre d'accueil, un seul par page. 820, chasse 114 % |
.display |
Grande réplique qui ouvre ou ferme une section. 780, chasse 112 %, 18 caractères de large au plus |
.h2 |
Titre de section. 750, chasse 110 % |
.title |
Titre de carte ou de bloc. 720, chasse 108 % |
.lead |
Chapeau sous un titre, en text-2 |
.body |
Texte courant limité à 62 caractères |
.label |
Libellé 600 |
.kicker |
Sur-titre Monaspace en capitales avec son carré en diagonale |
.mono, .meta |
Voix machine : codes, dates, compteurs, métadonnées |
<em> dans un titre |
Mot accentué en pêche (peach-600 sur clair, pêche sur encre) |
<mark> |
Surlignage en bande pêche sous le mot |
Boutons et liens
| Classe |
Usage |
.btn |
Action principale, encre |
.btn.btn--peach |
Action chaleureuse : prendre rendez-vous, rejoindre, confier un projet |
.btn.btn--ghost |
Action secondaire, filet interne |
.btn.btn--light |
Action sur fond encre ou photo |
.link-arrow |
Lien de suite, la flèche glisse au survol |
Deux boutons au plus côte à côte : un plein, un fantôme. Survol : montée de 1 px et ombre ; appui : scale(0.98) ; désactivé : opacité 0,5.
Pastilles et étiquettes
| Classe |
Usage |
.chip |
Choix ou suggestion ; .is-chosen ou aria-pressed="true" la passe en pêche, soulevée |
.tag |
Étiquette technique en Monaspace (type, statut, version) |
.tag.tag--peach |
Étiquette mise en avant |
Surfaces
| Classe |
Usage |
.card |
Carte papier, le ton par défaut |
.card.card--ink |
Carte stratégique sur encre, avec courbes de niveau ; une par écran |
.card.card--peach |
Carte humaine : recrutement, communauté, rejoindre |
.card.card--inner |
Carte dans une carte, ink-50 |
.icon-badge |
Pastille d'icône en diagonale (peach-100 / peach-700 ; s'adapte au ton) |
.note |
Encadré encre pour la phrase à retenir ; .note--peach en pêche claire |
.band |
Section avec l'air vertical de la charte ; .band--paper blanche, .band--ink encre avec courbes de niveau |
.photo |
Section ou bloc photo plein cadre, voile encre à gauche ; .photo--full voile uniforme ; .credit en bas à droite |
.topo |
Ajoute les courbes de niveau lavande à n'importe quel bloc encre ; .topo.topo--clair pour un fond clair |
.on-ink |
Applique les couleurs de texte sur encre à un bloc personnalisé |
Les tons redéfinissent localement --text, --text-2, --text-3, --line, --line-2 et --kicker. Le contenu d'une surface n'emploie que ces variables : il s'adapte ainsi seul au fond.
| Classe |
Usage |
.field |
Libellé + champ ; .is-error passe le champ en erreur |
.input |
Champ texte, courriel, zone de texte |
.field__error |
Message d'erreur peach-700 |
Mise en page
| Classe |
Usage |
.container |
Colonne large (66 rem) centrée avec gouttière |
.container--text |
Colonne de lecture (46 rem) |
.stack |
Espace régulier entre les enfants (--stack, 1,1 rem par défaut) |
Icônes
Icônes Lucide, en SVG inline, trait de 1,75, currentColor, 20 px par défaut (1,1 em dans un bouton). Pas d'icône remplie, pas d'emoji, pas d'autre famille d'icônes. Dans un bouton ou une pastille, l'icône est en peach-700 sur fond clair et en encre sur fond pêche.
Ombres et filets
--shadow-1 (pose) : cartes, bulles, survol des boutons et pastilles.--shadow-2 (flotte) : compositeur, plaques encre, feuilles.--shadow-peach (chaleur) : éléments pêche et états choisis.- Les bordures s'écrivent
box-shadow: inset 0 0 0 1px var(--line), jamais border sur un composant.
