diff --git a/doc/en/components/ai/theming-mcp.md b/doc/en/components/ai/theming-mcp.md index 7fa0b1852..1e327bfca 100644 --- a/doc/en/components/ai/theming-mcp.md +++ b/doc/en/components/ai/theming-mcp.md @@ -57,6 +57,16 @@ npx -y igniteui-theming igniteui-theming-mcp > [!NOTE] > The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### How version resolution works + +Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly — no network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. + +If you run the command outside a project (or before running `npm install`), `npx -y` downloads the **latest** version from npm into a temporary cache instead. The server will still start, but `detect_platform` will return `generic` since there is no `package.json` to inspect. + +Choose your AI client below for the specific configuration steps. + + ### VS Code GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: @@ -245,6 +255,11 @@ Here is a brief overview of each tool: > [!NOTE] > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. + +> [!NOTE] +> If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. + + ## Example Scenarios The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -255,6 +270,29 @@ The following scenarios show what you can ask the AI to do once the MCP server i The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + +```scss +/* styles.scss */ +@use 'igniteui-angular/theming' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, + $gray: #9e9e9e, +); + +$my-typography: typography( + $font-family: 'Roboto, sans-serif', +); + +@include core(); +@include typography($my-typography); +@include theme($my-palette, $schema: $light-material-schema); +``` + + + ```scss /* styles.scss */ @use 'igniteui-theming' as *; @@ -274,6 +312,7 @@ $my-palette: palette( $type-scale: $material-type-scale ); ``` + ### Dark Mode Variant @@ -283,7 +322,7 @@ $my-palette: palette( > _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ -The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. ### Component-Level Customization @@ -301,7 +340,7 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-react`) as a dependency. You can also tell the AI explicitly: _"Use {ProductName}."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `{PackageCommon}`) as a dependency. You can also tell the AI explicitly: _"Use the {Platform} platform."_ **Luminance warning on colors** @@ -311,9 +350,36 @@ If the AI warns about color luminance, it means the chosen color is too light or For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning. + +**Generated Sass does not compile** + +Ensure `igniteui-angular` and `igniteui-theming` are installed: + +```bash +ng add igniteui-angular +``` + +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass]() for the correct file setup. + + ## Additional Resources - [{ProductName} Skills](./skills.md) + + + +
+ +Our community is active and always welcoming to new ideas. + - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink})