Skip to content
This repository was archived by the owner on Jun 8, 2026. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,8 @@
"batchediting",
"updateparameters",
"alldata",
"subtag"
"subtag",
"junie",
"xplat"
]
}
253 changes: 96 additions & 157 deletions en/components/ai/skills.md

Large diffs are not rendered by default.

31 changes: 19 additions & 12 deletions en/components/ai/theming-mcp.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
---
title: Ignite UI Theming MCP | Ignite UI for Angular
_description: Ignite UI for Angular ships with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements.
_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations
title: Angular Theming MCP | Infragistics
_description: Angular works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements.
_keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations
_license: MIT
mentionedTypes: []
---

# Ignite UI Theming MCP
Expand All @@ -12,9 +14,9 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI

## Overview

Instead of writing Sass theming code by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more.
Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more.

The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with **Ignite UI for Web Components**, **React**, and **Blazor**. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically.
The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically.

Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you.

Expand All @@ -33,13 +35,13 @@ Most tools can produce either **Sass** or **CSS** output. Sass output is the def
Before configuring the MCP server, make sure you have:

- **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server.
- A project with an **Ignite UI package** listed as a dependency in `package.json`. For Angular, this is `igniteui-angular` (v15.0 or later). The server also supports `igniteui-webcomponents`, `igniteui-react`, and `igniteui-blazor`.
- A project with an **Ignite UI package** listed as a dependency in `package.json`.
- An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin.

If you do not have `igniteui-angular` installed yet, run:
If you do not have Ignite UI Theming installed yet, run:

```bash
ng add igniteui-angular
npm install igniteui-theming
```

## Setup
Expand Down Expand Up @@ -151,8 +153,11 @@ Use the `/mcp` command inside Claude Code to verify the server is connected.
JetBrains AI Assistant supports MCP servers through the IDE settings:

1. Open **Settings** (or **Preferences** on macOS).

2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**.

3. Click **+ Add** and choose **As JSON** or use the form fields.

4. Enter the following configuration:

```json
Expand Down Expand Up @@ -292,7 +297,7 @@ $my-typography: typography(

> _"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. See [Palettes](../themes/palettes.md) for more detail on shade generation.
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

Expand All @@ -310,7 +315,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-angular`, `igniteui-webcomponents`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_
If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_

**Luminance warning on colors**

Expand All @@ -328,19 +333,21 @@ Ensure `igniteui-angular` and `igniteui-theming` are installed:
ng add igniteui-angular
```

Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](../themes/sass/index.md) for the correct file setup.
Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index">) for the correct file setup.

## Additional Resources

Related topics:
- [Ignite UI for Angular Skills](./skills.md)

<!-- Ideally these should be included once documentation is combined
- [Theming Overview](../themes/index.md)
- [Palettes](../themes/palettes.md)
- [Typography](../themes/typography.md)
- [Elevations](../themes/elevations.md)
- [Spacing](../themes/spacing.md)
- [Roundness](../themes/roundness.md)
- [Theming with Sass](../themes/sass/index.md)
-->

<div class="divider--half"></div>

Expand Down
4 changes: 0 additions & 4 deletions en/components/bullet-graph.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ The following sample demonstrates how setting multiple properties on the same [`
The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`transitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#transitionDuration) property.
The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more.

<!-- Angular, React, WebComponents -->

## Dependencies

When installing the gauge package, the core package must also be installed.
Expand All @@ -40,8 +38,6 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
```

<!-- end: Angular, React, WebComponents -->

## Component Modules

The [`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) requires the following modules:
Expand Down
4 changes: 1 addition & 3 deletions en/components/charts/chart-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -339,13 +339,11 @@ If you are considering any other Angular Charts on the market, here are a few th
- We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are!
- We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications!

<!-- Angular -->
<!---->

- Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular.
- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls.

<!-- end: Angular -->

## API References

All types of chart types mentioned in this topic are implemented in these API components:
Expand Down
2 changes: 1 addition & 1 deletion en/components/charts/features/chart-axis-gridlines.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ namespace: Infragistics.Controls.Charts

All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis.

> \[!Note]
> [!Note]
> the following examples can be applied to [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) as well as [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls.

Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines.
Expand Down
2 changes: 1 addition & 1 deletion en/components/charts/features/chart-axis-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "Xam

All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below.

> \[!Note]
> [!Note]
> the following examples can be applied to [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) as well as [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls.

## Axis Locations Example
Expand Down
2 changes: 1 addition & 1 deletion en/components/charts/features/chart-data-aggregations.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,5 @@ The following is a list of API members mentioned in the above sections:
- [`groupSorts`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSorts)
- [`groupSortDescriptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSortDescriptions)

> \[!Note]
> [!Note]
> Chart Aggregation will not work when using [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
2 changes: 1 addition & 1 deletion en/components/charts/features/chart-data-annotations.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ namespace: Infragistics.Controls.Charts

In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.

> \[!Note]
> [!Note]
> These features are designed to support cartesian axes and does not currently support radius or angle axes.

For example, you can annotates stock prices with stock events and patterns.
Expand Down
2 changes: 1 addition & 1 deletion en/components/charts/features/chart-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ The following example demonstrates enabling scrollbars.

## Chart Navigation through Code

> \[!Note]
> [!Note]
> Code navigation of the chart can only be used for the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control.

The Angular data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties:
Expand Down
4 changes: 2 additions & 2 deletions en/components/charts/features/chart-performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performa

Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does.

> \[!Note]
> [!Note]
> The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) already uses ordinal/category axis so there is no need to change its properties.

This code snippet shows how to ordinal/category x-axis in the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) controls.
Expand All @@ -197,7 +197,7 @@ This code snippet shows how to ordinal/category x-axis in the [`IgxFinancialChar

By default, Angular charts will automatically calculate [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.

> \[!Note]
> [!Note]
> We do not recommend setting axis minor interval as it will decrease chart performance.

This code snippet shows how to set axis major interval in the Angular charts.
Expand Down
2 changes: 1 addition & 1 deletion en/components/charts/features/chart-user-annotations.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ This is directly integrated with the available tools of the [`IgxToolbarComponen
</code-view>


> \[!Note]
> [!Note]
> This feature is designed to support X and Y axes and does not currently support radial or angular axes.

## Using the User Annotations with the Toolbar
Expand Down
2 changes: 1 addition & 1 deletion en/components/charts/types/data-pie-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ You can style the aggregated Others slice separately from other slices by using

These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior.

> \[!NOTE]
> [!NOTE]
> The Others slice is only rendered when the chart is configured to create it (for example, with [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) greater than `0` and an appropriate [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect.

If you want to ensure that the Others category does not show up in the [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html), you can set the [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) to 0.
Expand Down
4 changes: 0 additions & 4 deletions en/components/dashboard-tile.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ Interacting with the chart type menu in the toolbar will allow for selecting a d

## Dependencies

<!-- Angular, WebComponents, React -->

Install the following packages in the Ignite UI for Angular toolset:

```cmd
Expand Down Expand Up @@ -60,8 +58,6 @@ import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGauge
export class AppModule {}
```

<!-- end:Angular, WebComponents, React -->

## Usage

Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:
Expand Down
4 changes: 0 additions & 4 deletions en/components/excel-library-using-cells.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ The [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/

<div class="divider--half"></div>

<!-- Angular, React, WebComponents -->

## References

The following code shows the imports needed to use the code-snippets below:
Expand All @@ -37,8 +35,6 @@ import { WorksheetCellComment } from "igniteui-angular-excel";
import { FormattedString } from "igniteui-angular-excel";
```

<!-- end: Angular, React, WebComponents -->

## Referencing Cells and Regions

You can access a [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object or a [`WorksheetRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) object by calling the [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html#worksheet) object’s [`getCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getCell) or [`getRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getRegion) methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents.
Expand Down
Loading
Loading