Ignite UI Theming MCP Server

Ignite UI Theming - Infragistics 製

Ignite UI Theming リポジトリには、Infragistics が開発したさまざまな UI フレームワークのテーマ作成に使用する Sass ミックスイン、関数、変数がまとめられています。このテーマパッケージを使えば、プロジェクト用のパレット、エレベーション、タイポグラフィスタイルを簡単に作成できます。

リポジトリの構成

このリポジトリは、2 つのパッケージで構成される npm ワークスペースのモノレポです。

公開される成果物は igniteui-theming パッケージのみです。このパッケージには、Sass テーマライブラリと MCP サーバーのバイナリの両方が含まれています。

MCP サーバーは、MCP Registry にも io.github.IgniteUI/igniteui-theming として登録されています。リポジトリのルートにある server.json はレジストリのマニフェストで、リリース時に自動的に公開されます。

リポジトリのルートから実行する一般的なコマンド：

npm install    # install all workspace dependencies
npm run build  # build theming + MCP in dependency order
npm test       # run all tests across both packages
npm run lint   # lint all packages

パレット

material、bootstrap、fluent、indigo の 4 種類の定義済みパレットを用意しています。各パレットには必要な色とそのさまざまなバリエーションが含まれているため、用途に合った色を簡単に選べます。パレットは次のとおりです。

パレット内の色を使用するには、color 関数を使います。

background: color($light-material-palette, 'primary', 500);

パッケージに含まれる色関数やミックスインの詳細と使い方については、Colors Wiki Pageをご覧ください。

タイポグラフィ

テーマパッケージのもう 1 つの便利なモジュールがタイポグラフィです。プロジェクト全体で一貫性を保つのに役立ちます。標準で提供される 4 種類のテーマに対応した、4 つのタイポグラフィプリセットも用意しています。

typography ミックスインを使うと、任意の書体を設定できます。このミックスインは 2 つの引数（font-family と type-scale）を受け取ります。デフォルトでは、material の書体と type-scale が使用されます。

@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

パッケージのタイポグラフィモジュールの詳細については、Typography Wiki Pageをご覧ください。

エレベーション

テーマパッケージには、コンポーネントに立体感を加えるために使用できる、シャドウのプリセットが 1 つ用意されています。ボタン、カード、ナビゲーションバーなどに便利です。

elevation 関数を使うと、エレベーションのレベルを引数として指定し、0～24 のエレベーションを設定できます。

box-shadow: elevation(12);

エレベーションとその機能について詳しくは、Elevations Wiki Pageをご覧ください。

使用方法

アプリケーションで Ignite UI Theming を使用するには、igniteui-theming パッケージをインストールします。

npm install igniteui-theming

次に、使用するファイルで次のように use します。

@use '.../node_modules/igniteui-theming/' as *;

パッケージの一部だけを use することもできます。

@use '.../node_modules/igniteui-theming/sass/color' as *;

material、bootstrap、fluent、indigo の各テーマ用に、色（ライトおよびダークのパレット）、タイポグラフィ、エレベーションの一部をプリセットとして用意しています。次のように scss ファイルにインポートできます。

@use '.../node_modules/igniteui-theming/sass/typography/presets' as *;

パッケージの内容については、Wiki ページをご覧ください。

Lint とテスト

プロジェクトをスキャンして lint エラーを確認するには、次を実行します。

npm run lint

テストスイートを実行するには、次を実行します。

npm run test

テストとデバッグ

パレットのプレビュー

packages/theming から実行します。パレット（material、bootstrap、fluent、indigo）とバリアント（light または dark）を指定します。

npm run preview:palette -- --palette=material --variant=light

MCP サーバー（AI 支援によるテーマ設定）

Ignite UI Theming パッケージには、Ignite UI アプリケーション向けに本番環境で利用できるテーマ設定コードを AI アシスタントが生成できるようにする Model Context Protocol（MCP） サーバーが含まれています。この MCP サーバーは、Ignite UI 向けのより大規模な AI 支援開発ツールチェーンの一部です。

MCP とは？

Model Context Protocol を使用すると、AI アシスタント（Claude、GitHub Copilot など）が外部のツールやデータソースに接続できます。Ignite UI Theming MCP サーバーは、テーマ設定のエキスパートアシスタントとして、次のことができます。

• 🎨 カラー パレットを生成し、色合いのバリエーションを自動作成します
• 📝 デザイン標準に沿ったタイポグラフィシステムを作成します
• 🌓 ライトモードとダークモード用の完全なテーマを構築します
• 🎯 デザイントークンを使用してコンポーネントをカスタマイズします
• ✅ アクセシビリティ要件への適合性をカラー検証します

クイックスタート

ほとんどのユーザーは、何もクローンする必要はありません。サーバーは公開済みの igniteui-theming パッケージに含まれており、MCP Registry には io.github.IgniteUI/igniteui-theming として登録されています。レジストリからのインストールに対応しているクライアントでは、この名前を指定して追加できます。それ以外の場合は、以下に示す npx の設定を使用します。

代わりにソースから実行するには、次の手順に従います。

1. クローンとビルド

リポジトリをクローンしてビルドします。

npm install
npm run build

2. AI クライアントを設定する

MCP サーバーは、MCP 互換のクライアントであればどれでも使用できます。人気のクライアントの設定手順を以下に示します。

{
  "servers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

何ができる？

🎨 完全なテーマを作成する

AI アシスタントにテーマの内容を説明するだけです。

「Gruvbox の配色を参考にした、Angular アプリ向けの Material Design ダークテーマを作成してください。」

AI は、本番環境で利用できる Sass コードを次の内容とともに生成します。

• すべての色合いのバリエーションを含むカラー パレット
• 適切な書体スケールを設定したタイポグラフィ
• エレベーションシャドウ
• プラットフォーム固有のインポートと設定

🌈 カラー パレットを生成する

「プライマリカラーにティール、セカンダリカラーにパープルを使ったライトテーマのパレットを生成してください」

デザインシステムの標準に沿って、正確に計算された色合いを取得できます。

📝 タイポグラフィを設定する

「Web Components 向けに、Inter フォントと Material Design の書体スケールを使ったタイポグラフィを設定してください」

フォントファミリーとレスポンシブな書体スケールを含む、適切なタイポグラフィ設定を取得できます。

🎯 コンポーネントのカスタマイズ

「ボタンコンポーネントで利用できるデザイントークンは何ですか？」

「紫の背景と白いテキストを使ったフラットボタンのテーマを作成してください」

デザイントークンを使って、個々のコンポーネントのスタイルを確認し、カスタマイズします。

利用可能な機能

MCP サーバーは 8 個のツール と 16 個のリソース を提供します。

ツール（アクション）

リソース（参照データ）

• プラットフォーム情報：Angular、Web Components、React、Blazor の設定
• プリセットライブラリ：事前構築済みのパレット、タイポグラフィ、エレベーションのセット
• カラーガイド：色の選択と使用に関するベストプラクティス
• デザインシステムのスキーマ：Material、Bootstrap、Fluent、Indigo の設定

対応プラットフォーム

• Angular - igniteui-angular
• Web Components - igniteui-webcomponents
• React - igniteui-react
• Blazor - igniteui-blazor

やり取りの例

詳細ドキュメント

以下を含む詳細なドキュメントについては：

• ツールの全パラメーターリファレンス
• すべてのプロンプト例
• プラットフォーム固有の違い
• トラブルシューティングガイド
• 開発手順

MCP Server README を参照してください。

開発スクリプト

# Build for production (theming + MCP)
npm run build

# Run tests
npm run test

# Debug with MCP Inspector (from packages/mcp)
npm run inspect

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。