n8n:design-system

デザインシステム

フロントエンドでコンポーネントを構築、スタイリング、使用するための包括的なガイドです。

適用する場面

次の場合は、これらのガイドラインを参照してください。

• packages/frontend 内の .{vue|css|scss} ファイルを編集するとき
• packages/frontend/@n8n/design-system に新しいコンポーネントを追加するとき
• Vue コンポーネントのスタイルをリファクタリングするとき
• 新しい UI コンポーネントや機能を実装するとき
• UI の変更をレビューするとき

ルール

• packages/frontend/@n8n/design-system/src/styleguide/*.mdx のガイドラインに従ってください
• packages/frontend/@n8n/design-system/src/css/_tokens.scss または packages/frontend/@n8n/design-system/src/css/_primitives.scss のスタイルには、必ず CSS 変数を使用してください。適切なトークンがない場合に限り、ハードコードされた値を使用してください。
• packages/frontend/@n8n/design-system/src/components にある既存のコンポーネントを必ず優先して使用してください。@deprecated とマークされていないコンポーネントを優先してください。
• ライトモードとダークモードで色を切り替える場合は、light-dark() を使用してください
• 単色のコンポーネントにホバー時やアクティブ時のアルファ動作を追加する必要がある場合は、明示的なパーセンテージを指定して color-mix() を使用してください。
• アニメーションやトランジションを扱う場合は、必ず packages/frontend/@n8n/design-system/src/css/mixins/motion.scss のミックスインを優先して使用してください
• アニメーションをレビューするときは、rules/web-animation-guidelines.md のガイドに従ってください
• UI の変更をレビューするときや新しいコンポーネントを追加するときは、rules/web-interface-guidelines.md に従ってください

Storybook ストーリー

• 新しいストーリーは必ず packages/frontend/@n8n/design-system に追加してください。
• すべてのストーリーで、次のタイトルカテゴリのいずれかを使用してください。
  • Style Guide：スタイル、トークン、ユーティリティ
  • Core：アプリ全体で使用するコンポーネント
  • Areas/<Product area>：特定の製品領域向けのパターンやコンポーネント。例：Areas/Settings、Areas/Assistant
  • Experimental：注意が必要なベータ版コンポーネント
• title の最後のセグメントはコンポーネント名であり、必ず PascalCase にしてください（Core/empty-state ではなく Core/EmptyState）。カテゴリのプレフィックスに制限はありません。

例

• 「ワークフローの削除を確認するモーダルダイアログを追加する」→ N8nDialog を使用します
• 「ワークフローのステータスを選択するドロップダウンを追加する」→ N8nDropdown または N8nSelect を使用します
• 「新しい項目を追加するための + アイコン付きボタンを追加する」→ iconOnly プロパティを指定した N8nButton を N8nTooltip で囲み、さらに N8nTooltip で囲みます。N8nIcon と適切な aria-label を使用してください。
• 「破壊的な操作を行うボタンを追加する」→ variant="destructive" を指定した N8nButton を使用します
• 「背景色を白／黒にする」→ ライトモードでは白に var(--background--surface) を使用し、ダークモードでは「黒」を使用します
• 「タイトルを自然に表示する」→ motion.scss の fade-in-up ミックスインと var(--duration--base) を使用します