Atomic Design · Niveau 1

Atomes

Les briques élémentaires du système. Chaque atome est présenté avec ses variantes et ses états — le bouton « Copier le code » place le code HTML tokenisé dans le presse-papier.

Liens 'Button style'

Variantes primary, secondary, outline et ghost. Hauteur minimale 44px pour le confort tactile. Variants avec icône (leading = avant le label / trailing = après).

Types / Usages

Primary Secondary Outline Ghost

États

Hover Focus Disabled Loading

Lien + trailing icon

Poursuivre

Lien + leading icon

A propos

Lien + icon only

Lien + blob rotating

A propos

Le code HTML et CSS de chaque variant de bouton peut être copié dans le presse-papier en cliquant sur les boutons associés. Le bouton JSON télécharge le fichier pouvant être importé comme Reusable Templates dans GreenShift/GreenLight.

Chargement des aperçus…

Intégrer les boutons dans GreenShift/GreenLight :

Les étapes ci-dessous décrivent le process d'intégration du code HTML et CSS dans l'éditeur.

Choisir le bloc Style Manager

Dans l'éditeur GreenShift/GreenLight, ajoutez le bloc Style Manager soit en le choisissant dans la bibliothèque de blocs ou en insérant un bloc natif Gutenberg paragraphe puis en tapant /Style... et en cliquant sur le bloc qui apparait en tooltip

Icône du block Style Manager dans GreenShift/GreenLight

Coller le code HTML

Une fois le code HTML copié, collez-le dans le champ prévu à cet effet. Cliquer sur le bouton Convert HTML to Blocks insèrera automatiquement les blocs correspondants aux balises HTML et les classes CSS associées.

Champ « HTML to Blocks » de Style Manager, avec le bouton Convert HTML to Blocks

Coller le code CSS

Processus identique à l'étape 2 : Copié > Collé + cliquer sur Add CSS to Local Classes. Le code CSS est intégré automatiquement dans chacun des réglages du bloc (Typography, Colors, Spacing, etc.).

Champ « CSS to Local Classes » de Style Manager, avec le bouton Add CSS to Local Classes

Attention : en collant le code HTML dans le champ HTML to Blocks, il arrive que la classe .btn-svg (Classic Class) ne s'applique pas automatiquement. Pensez à vérifier après chaque collage. Si le problème apparaît, supprimez la classe root générée par défaut, puis appliquez une Classic Class nommée btn-svg.

Liens

Inline, standalone avec flèche, muted.

Texte avec un lien inline intégré. En savoir plus Lien discret

Pilules & statuts

Tokens dédiés --color-text-pill / --color-text-pill-bg, et paires de statut availability / warning / error.

Pill par défaut Disponible Attention Erreur window-btn

Champs de saisie

Champ texte : default, focus, error, success, disabled.

Nom complet Default · cliquez pour l'état focus

Email Adresse email invalide

Identifiant Identifiant disponible

Société Disabled

Contrôles de sélection

Commandes de choix interactives.

checkbox Recevoir la newsletter Option désactivée

radio

switch Mode avancé {{ swState }}

Badges & tags

Marqueurs sémantiques, tags neutres, chips interactives, indicateurs d'état.

Success Warning Error Info Neutral Primary

wordpress gutenberg

En ligne Absent Occupé Hors ligne Live

Avatar

Tailles xs → md (tokens --size-avatar-*), initiales, statut, groupe.

MD JL AB SR MD AB JL +4

Icônes

La classe .icon fixe la hauteur à --size-icon-reg (largeur auto), le remplissage à --color-icon-default, et empêche la compression flex.

{{ codeIcon }}

Dans le cas d'icônes 'line', le trait (stroke) est de 1.5px (0.094rem).

stroke 1.5 · currentColor

Bibliothèques d'icônes :

Phosphor Icons : https://phosphoricons.com/
Tabler Icons : https://tablericons.com/
Lucide : https://lucide.dev/
Flowbite : https://flowbite.com/icons/
MingCute : https://www.mingcute.com/

Séparateur

Séparateurs horizontaux et labellisés.

Indicateurs d'état

États de chargement et de progression.

spinner

progress

Téléversement68%

skeleton