Système de Design

Guide complet pour construire, styler et utiliser les composants dans le frontend.

Quand Appliquer

Consultez ces directives quand :

• Vous travaillez sur des fichiers .{vue|css|scss} dans packages/frontend
• Vous ajoutez de nouveaux composants à packages/frontend/@n8n/design-system
• Vous refactorisez les styles des composants Vue
• Vous implémentez de nouveaux composants ou fonctionnalités UI
• Vous vérifiez les changements d'interface utilisateur

Règles

• Suivez les directives dans packages/frontend/@n8n/design-system/src/styleguide/*.mdx
• UTILISEZ TOUJOURS les variables CSS pour les styles de packages/frontend/@n8n/design-system/src/css/_tokens.scss ou packages/frontend/@n8n/design-system/src/css/_primtivies.scss. N'utilisez des valeurs codées en dur que s'il n'existe aucun token adapté.
• PRÉFÉREZ TOUJOURS les composants existants de packages/frontend/@n8n/design-system/src/components. Préférez les composants non marqués @deprecated.
• Quand vous vérifiez des changements d'interface ou ajoutez de nouveaux composants, suivez rules/web-interface-guidelines.md
• Utilisez light-dark() quand vous alternez les couleurs entre le mode clair et sombre

Exemples

• « Ajouter une boîte de dialogue modale pour confirmer la suppression d'un workflow » → Utilisez N8nDialog
• « Ajouter une liste déroulante pour sélectionner le statut d'un workflow » → Utilisez N8nDropdown ou N8nSelect
• « Ajouter un bouton avec l'icône + pour ajouter un nouvel élément » → Enveloppez N8nButton avec la prop iconOnly dans N8nTooltip. Utilisez N8nIcon et un aria-label approprié.
• « Ajouter un bouton d'action destructif » → utilisez N8nButton avec variant="destructive"
• Rendre la couleur de fond blanche/noire → Utilisez var(--background--surface) pour le blanc en mode clair et « black » en mode sombre