Les classes lssd-

Bouton

Bouton en pilule pour toute action : lssd-btn plus une variante, sur un <button> ou un <a>.

Variantes

• lssd-btn--primary : l’action principale de la zone (« Enregistrer », « Ajouter un événement »). Une seule par carte, formulaire ou barre.
• lssd-btn--secondary : actions alternatives (« Exporter », « Filtrer »).
• lssd-btn--ghost : actions discrètes dans une barre d’outils, « Annuler » dans une boîte de dialogue.
• lssd-btn--danger : suppression définitive, toujours après une confirmation.
• Modificateurs : lssd-btn--sm (32px, tableaux et barres denses), lssd-btn--icon (icône seule, avec aria-label obligatoire).

Ce que l’outil fournit

• Un libellé verbe + objet, en majuscule au premier mot.
• Une icône Lucide de 16px facultative, placée avant le libellé.
• disabled (ou aria-disabled="true" sur un lien) plutôt qu’une couleur grisée maison.

À ne pas faire

• Arrondir autrement : les boutons LSSD sont toujours en radius-pill.
• Mettre deux boutons principaux côte à côte.
• Colorer un bouton avec info, warn ou une couleur de catégorie.

Champ

Champ de formulaire complet : un conteneur lssd-field qui empile libellé, contrôle et texte d’aide ou d’erreur.

Structure

• lssd-field : le conteneur.
• lssd-label : le <label> relié au contrôle par for/id.
• lssd-input : s’applique à <input>, <select> et <textarea>.
• lssd-help : une aide courte sous le champ, en muted.
• lssd-error : le message d’erreur en danger, commençant par « Erreur : ». Mettez aria-invalid="true" sur le contrôle et reliez le message avec aria-describedby.

Ce que l’outil fournit

• Le libellé, toujours visible : pas de placeholder à la place du libellé.
• La validation et le texte d’erreur. Dans Django, rendez les champs avec ces classes (attrs du widget) plutôt qu’avec form.as_div brut.
• Un écart vertical de space-4 entre deux champs.

À ne pas faire

• Descendre sous 16px dans le champ : iOS zoome sur la page.
• Signaler une erreur par la seule bordure rouge.

Case à cocher et bouton radio

Le contrôle natif redessiné : lssd-check autour d’un <input class="lssd-check__input">, pour une option qu’on active ou un choix parmi quelques-uns.

Structure

• lssd-check : un <label> qui contient la case et son libellé ; tout le libellé est cliquable.
• lssd-check__input : le <input type="checkbox"> ou type="radio". 20px, coins radius-sm (pilule pour le radio), bordure line-strong ; cochée, fond accent et coche on-accent.
• lssd-check__label : le libellé, au style label.
• lssd-check__help : une aide sous l’option (avec lssd-help), alignée sur le libellé ; reliez-la au contrôle par aria-describedby.
• Erreur : aria-invalid="true" sur le contrôle et un lssd-error qui commence par « Erreur : », comme pour le champ.

Ce que l’outil fournit

• Un libellé qui dit ce qui se passe quand la case est cochée (« Rester connecté », pas « Option »).
• Le groupe de radios dans un <fieldset> avec une <legend>.

À ne pas faire

• Cacher le contrôle natif ou le remplacer par un <div> : le clavier, les lecteurs d’écran et les formulaires sans JavaScript en dépendent.
• Utiliser une case pour déclencher une action immédiate : c’est un bouton.
• Signaler l’état coché par la couleur seule : la coche est toujours dessinée.

Carte

Conteneur de contenu en surface, bordure line, coins radius-lg et padding space-6.

Parties

• lssd-card__overline : catégorie en majuscules, en accent-ink (facultatif).
• lssd-card__title : titre au style title-2.
• lssd-card__body : texte en muted.
• lssd-card__actions : rangée de boutons, au plus un bouton principal.
• lssd-card--raised : ajoute shadow-soft pour la carte vedette d’un écran, les menus et boîtes de dialogue.

Ce que l’outil fournit

• Le contenu ; la carte ne fixe ni hauteur ni largeur. Placez les cartes dans une grille avec un écart space-6 (gap-6).

À ne pas faire

• Un liseré coloré sur un côté ou un fond coloré : une couleur de catégorie va dans une pastille ou un badge.
• Une carte dans une carte : utilisez surface-2 pour une zone en retrait.

Badge

Étiquette de statut en pilule, en majuscules : lssd-badge plus une variante d’état facultative.

Variantes

• Sans variante : neutre (brouillon, archivé), muted sur surface-2.
• lssd-badge--success : terminé, acquis, payé.
• lssd-badge--info : en cours, planifié.
• lssd-badge--warn : à vérifier, bientôt dû.
• lssd-badge--danger : en retard, échec.

Ce que l’outil fournit

• Un mot ou deux qui disent l’état : la couleur seule ne suffit jamais.

À ne pas faire

• En faire un bouton : un badge n’est pas cliquable.
• Inventer d’autres couleurs de badge pour des catégories métier.

Barre du haut

La barre identique dans tous les outils : logo LSSD, nom LSSD, nom de l’outil, navigation, puis les actions à droite. C’est le premier repère qui dit à l’utilisateur qu’il est toujours chez LSSD.

LSSD Budget

Ajouter

Structure

• lssd-header : la barre, 56px, en surface avec une bordure basse line.
• lssd-header__brand : lien vers l’accueil de l’outil, qui contient le logo (lssd-header__mark, sur sa pastille blanche), « LSSD » (lssd-header__name) et le nom de l’outil (lssd-header__product, en accent-ink).
• lssd-header__nav et lssd-header__link : les sections de l’outil. La page courante porte aria-current="page". La navigation est masquée sous 640px : l’outil fournit alors un menu.
• lssd-header__end : actions et compte, au plus un bouton principal compact.

Ce que l’outil fournit

• Le nom de l’outil et ses liens de navigation (5 au maximum).
• Le menu mobile et, s’il en propose un, le sélecteur de thème.

À ne pas faire

• Changer la hauteur, le fond ou l’ordre des éléments d’un outil à l’autre.
• Remplacer le nom « LSSD » par le seul nom de l’outil.

Styles de texte

Les utilitaires de texte complètent les composants. Ils ne fixent pas la couleur : associez-les à text-ink ou text-muted.