diff --git a/en/components/ai/ai-assisted-development-overview.md b/en/components/ai/ai-assisted-development-overview.md index e1a9a04754..a70c0d9415 100644 --- a/en/components/ai/ai-assisted-development-overview.md +++ b/en/components/ai/ai-assisted-development-overview.md @@ -1,11 +1,11 @@ --- title: AI-Assisted Development with Ignite UI - Ignite UI for Angular -_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command — npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" -last_updated: "2026-04-21" +last_updated: "2026-05-03" namespace: Infragistics.Controls mentionedTypes: [] --- @@ -14,9 +14,85 @@ mentionedTypes: [] # AI-Assisted Development with Ignite UI -Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. +Ignite UI for Angular provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (`@igniteui/mcp-server`) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config` -The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skills layers - Blazor coverage is provided by the Theming MCP only. The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. +The MCP servers and Agent Skills serve different purposes and have different prerequisites: + +| Component | What it provides | Requires Ignite UI installed? | +| -------------------- | -------------------------------------------------------------- | ----------------------------- | +| Ignite UI MCP server | Documentation queries, API reference, scaffolding tools | No | +| Theming MCP server | Design tokens, palette tools, WCAG contrast validation | No | +| Agent Skills | Project-level instruction packages for correct component usage | Yes | + +You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. + +## Configure the AI Toolchain + +Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed. + +```bash +npx igniteui-cli ai-config +``` + +> [!IMPORTANT] +> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. + +After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent. + +### What to Expect + +If Ignite UI is **not** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date. +``` + +The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI. + +If Ignite UI **is** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +Agent Skills copied to .claude/skills/ +``` + +Both the MCP servers and Skills are configured. + +### Start the Servers + +**VS Code with GitHub Copilot:** + +Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**. + +**Cursor:** + +Open **Settings → MCP**, locate the `igniteui` and `igniteui-theming` entries, and toggle each one on. Cursor starts each server immediately and displays its tool count. + +**Claude Code:** + +Run `claude mcp list` to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required. + +**JetBrains AI Assistant:** + +Open **Settings → Tools → AI Assistant → Model Context Protocol (MCP)**. Click the play icon next to each server entry to start it. + +**Claude Desktop:** + +Quit and relaunch Claude Desktop. The servers start automatically on launch. + +### Install Ignite UI and Add Skills Later + +If you ran `ai-config` without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command: + +```bash +npm install igniteui-angular +npx igniteui-cli@latest ai-config +``` + +The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date) ## The AI Toolchain at a Glance @@ -25,7 +101,7 @@ Ignite UI's AI toolchain consists of three independently usable layers. Each lay | Layer | What it provides | Owner | Frameworks | | --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | | Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | -| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor | | Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. @@ -40,17 +116,17 @@ For full setup instructions and IDE wiring, see [Agent Skills](skills.md). ## CLI MCP Server -The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. +The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. -The CLI MCP server starts via `npx` without a global install: +The CLI MCP server is configured via `npx` without a global install: ```bash -npx -y igniteui-cli mcp +npx igniteui-cli ai-config ``` The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below. -The CLI MCP server does not support Blazor. It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. +It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. ## Theming MCP Server @@ -81,13 +157,9 @@ The CLI MCP server and Theming MCP server work with any editor or AI client that Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. -## Set Up the AI Toolchain - -Use `ig ai-config` to configure Agent Skills and both MCP servers in a single command. For individual control over each layer, or to configure only part of the toolchain in an existing project, follow the steps below. Running `ig ai-config` completes Steps 1, 2, and 3 in one operation. - ### Quick Setup -The `ai-config` command copies the Ignite UI Agent Skills into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. **Using Angular Schematics:** diff --git a/en/components/ai/cli-mcp.md b/en/components/ai/cli-mcp.md index 895d0c454f..9bd6003780 100644 --- a/en/components/ai/cli-mcp.md +++ b/en/components/ai/cli-mcp.md @@ -1,13 +1,13 @@ --- -title: Angular Ignite UI CLI MCP | Infragistics -_description: Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients. +title: Ignite UI CLI MCP | Infragistics +_description: Use the Ignite UI CLI MCP server to scaffold Ignite UI for Angular projects, add components, and answer API questions through your AI assistant. _keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" namespace: Infragistics.Controls mentionedTypes: [] -last_updated: "2026-04-21" +last_updated: "2026-04-24" --- @@ -20,7 +20,7 @@ last_updated: "2026-04-21" ## Overview -Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. +Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. @@ -127,13 +127,11 @@ ig new my-app --framework=angular --type=igx-ts --template=empty Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +npx ig new my-app --framework=angular --type=igx-ts --template=empty ``` In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself. -For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the Ignite UI CLI documentation for Angular. - ### VS Code GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config`) from your project root to generate this file automatically. To configure it manually, create or edit `.vscode/mcp.json` in your project root: @@ -326,8 +324,8 @@ Here is a brief overview of each tool: | `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | | `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | | `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | -| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | -| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | +| `search_api` | Searches API entries by keyword or component name across Angular, React, Blazor and Web Components. | +| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, Blazor and Web Components. | At a high level, the CLI MCP tools help with: diff --git a/en/components/ai/maker-framework.md b/en/components/ai/maker-framework.md index 2f8dbcb28a..efd28bc38d 100644 --- a/en/components/ai/maker-framework.md +++ b/en/components/ai/maker-framework.md @@ -17,7 +17,7 @@ mentionedTypes: [] The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. -The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. ## How MAKER Works diff --git a/en/components/ai/skills.md b/en/components/ai/skills.md index 3ddd10ab21..7c888e704a 100644 --- a/en/components/ai/skills.md +++ b/en/components/ai/skills.md @@ -4,8 +4,11 @@ _description: Learn how to use Agent Skills to supercharge AI-assisted developme _keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie _license: MIT mentionedTypes: [] +last_updated: "2026-04-24" --- + + # Ignite UI for Angular Agent Skills Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. @@ -56,7 +59,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski | Project | `.github/skills/`, `.claude/skills/` | | Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. ### Claude @@ -113,26 +116,46 @@ Use one of the options below to download and place the skill files into the appr ### **Option A - Use the Ignite UI CLI** -The `ai-config` command copies skill files from your installed Ignite UI for Angular package into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. + +```bash +ig ai-config --assistants generic --agents claude +``` + +Use `--agents` with multiple values to target several agents at once: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | **Using Angular Schematics:** ```bash -ng generate @igniteui/angular-schematics:ai-config +ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot ``` -This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers. +This also registers the `@angular/cli` MCP server alongside the Ignite UI servers. -**Using the Ignite UI CLI:** +### **Option B - Use the `GitHub CLI`** -### **Option A - Use the Ignite UI CLI** +The GitHub CLI can be used to download skill files directly from the Ignite UI for Angular repository. Run the following commands in your project root to start the installation process: -The `ai-config` command copies skill files from your installed Ignite UI for Angular package into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. +```bash +gh skill install IgniteUI/igniteui-angular +``` -**Using Angular Schematics:** +You will be asked to select which skills to install (components, grids, theming) and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. -````bash -ng generate @igniteui/angular-schematics:ai-config +To update skills later, run the following command: + +```bash +gh skill update IgniteUI/igniteui-angular +``` If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: @@ -140,7 +163,7 @@ If Ignite UI for Angular is already installed in your project, the skill files a ```bash cp -r node_modules/igniteui-angular/skills/. .agents/skills/ -```` +``` **Windows (Command Prompt)** @@ -195,7 +218,7 @@ Once installed, the skill files are available in the respective location and wil The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: -```shell +```bash npx skills add IgniteUI/igniteui-angular ``` @@ -221,8 +244,6 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
- - - Getting Started with Ignite UI for Angular - Angular Schematics & Ignite UI CLI - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) diff --git a/en/components/ai/theming-mcp.md b/en/components/ai/theming-mcp.md index 6bda6cc878..cb49642bff 100644 --- a/en/components/ai/theming-mcp.md +++ b/en/components/ai/theming-mcp.md @@ -1,24 +1,26 @@ --- -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. +title: Angular Theming MCP | Infragistics +_description: Use the Ignite UI Theming MCP server to generate Ignite UI for Angular palettes, themes, typography, and design token overrides through your AI assistant. _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 -

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.

+

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

## Overview -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 Ignite UI Theming MCP server gives AI assistants the knowledge and tools 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 all Ignite UI component libraries from Infragistics. 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. +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. The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. @@ -28,7 +30,7 @@ The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, th > _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ -> _"My brand guidelines specify exact hex values for every primary shade — create a custom palette with those explicit values."_ +> _"My brand guidelines specify exact hex values for every primary shade - create a custom palette with those explicit values."_ > _"Make the calendar component use smaller spacing."_ @@ -36,9 +38,9 @@ The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, th 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. +- **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`. -- 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. +- 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 Ignite UI Theming installed yet, run: @@ -61,7 +63,7 @@ npx -y igniteui-theming igniteui-theming-mcp ### 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. +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. @@ -186,11 +188,11 @@ For any other MCP-compatible client, use the STDIO transport with this launch co npx -y igniteui-theming igniteui-theming-mcp ``` -## Customizing AI Behavior with Project Rules +## Customize AI Behavior with Project Rules This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. -Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_ — you do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_. You do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. ### VS Code (`.github/copilot-instructions.md`) @@ -198,12 +200,12 @@ Editors like VS Code and Cursor let you provide project-level instruction files ## Theming Conventions ### Sass Code Style -- Use `@use` / `@forward` — never `@import`. +- Use `@use` / `@forward` - never `@import`. - Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). - Prefer setting primary design tokens over overriding many dependent tokens. For example, setting `$foreground` on a flat button automatically derives `$hover-background`, `$focus-background`, and `$active-background`. -- Keep component overrides scoped — use the component's default selector +- Keep component overrides scoped - use the component's default selector (e.g., `.igx-button--flat`) unless a narrower scope is needed. ``` @@ -218,12 +220,12 @@ globs: ["**/*.scss", "**/styles/**"] ## Project Theming Rules ### Code conventions -- `@use` / `@forward` only — no `@import`. +- `@use` / `@forward` only - no `@import`. - Extract shared colors into variables; do not repeat hex literals. -- Prefer primary tokens — let dependent tokens derive automatically. +- Prefer primary tokens - let dependent tokens derive automatically. - One component override per file. Name the file after the component. - Comment every override with the design rationale. -- Never hard-code gray shades for text — use palette grays so dark mode works. +- Never hard-code gray shades for text - use palette grays so dark mode works. - For dark mode, only the palette changes. Component overrides stay the same. ``` @@ -232,7 +234,7 @@ globs: ["**/*.scss", "**/styles/**"] ## Available Tools -The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly — just describe what you want. +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly. Just describe what you want. To see the current full list of tools and their parameters at any time, ask your AI assistant: @@ -243,15 +245,15 @@ Here is a brief overview of each tool: | Tool | Description | |------|-------------| | `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | -| `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | -| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | +| `create_palette` | Generates a color palette with automatic shade variants (50-900, A100-A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation. Specify exact hex values for every shade when automatic generation is not suitable. | | `create_typography` | Sets up a font family and type scale for a given design system. | -| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | +| `create_elevations` | Configures box-shadow elevation levels (0-24) for Material or Indigo design systems. | | `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | | `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | | `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | | `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | -| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | +| `get_component_design_tokens` | Returns all available design tokens for a component. Always call this before `create_component_theme`. | | `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | @@ -262,7 +264,7 @@ Here is a brief overview of each tool: > [!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 +## Common Workflows The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -298,7 +300,7 @@ $my-typography: typography( ### Brand-Exact Color Shades -> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom 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. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. @@ -310,7 +312,7 @@ The AI will call `get_component_design_tokens` first to discover valid token nam ### Layout Adjustments -> _"The calendar feels bloated — reduce its spacing, and make all components slightly smaller."_ +> _"The calendar feels bloated - reduce its spacing, and make all components slightly smaller."_ The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. @@ -336,7 +338,7 @@ 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]() for the correct file setup. +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index) for the correct file setup. ## Additional Resources diff --git a/en/images/Bullet_Graph_1.png b/en/images/Bullet_Graph_1.png index ff4d8e9554..9b1e05caf0 100644 Binary files a/en/images/Bullet_Graph_1.png and b/en/images/Bullet_Graph_1.png differ diff --git a/en/images/Bullet_Graph_2.png b/en/images/Bullet_Graph_2.png index d68897ede4..811c8f58c4 100644 Binary files a/en/images/Bullet_Graph_2.png and b/en/images/Bullet_Graph_2.png differ diff --git a/en/images/Linear_Gauge_1.png b/en/images/Linear_Gauge_1.png index 9831285210..5b2a750414 100644 Binary files a/en/images/Linear_Gauge_1.png and b/en/images/Linear_Gauge_1.png differ diff --git a/en/images/Linear_Gauge_2.png b/en/images/Linear_Gauge_2.png index dc0b95ceea..f2c6e18292 100644 Binary files a/en/images/Linear_Gauge_2.png and b/en/images/Linear_Gauge_2.png differ diff --git a/en/images/Radial_Gauge_1.png b/en/images/Radial_Gauge_1.png index 7cb55b1539..72efac98b9 100644 Binary files a/en/images/Radial_Gauge_1.png and b/en/images/Radial_Gauge_1.png differ diff --git a/en/images/Radial_Gauge_2.png b/en/images/Radial_Gauge_2.png index 98778ec833..48801ff4cc 100644 Binary files a/en/images/Radial_Gauge_2.png and b/en/images/Radial_Gauge_2.png differ diff --git a/en/images/avatar-markup.png b/en/images/avatar-markup.png index 7fb67a0f63..638635fdd9 100644 Binary files a/en/images/avatar-markup.png and b/en/images/avatar-markup.png differ diff --git a/en/images/category_chart_area.png b/en/images/category_chart_area.png index 624da5d86f..c2801be1b8 100644 Binary files a/en/images/category_chart_area.png and b/en/images/category_chart_area.png differ diff --git a/en/images/category_chart_column.png b/en/images/category_chart_column.png index c605dcff2d..486c28132d 100644 Binary files a/en/images/category_chart_column.png and b/en/images/category_chart_column.png differ diff --git a/en/images/category_chart_line.png b/en/images/category_chart_line.png index 18ad40c920..33ac435648 100644 Binary files a/en/images/category_chart_line.png and b/en/images/category_chart_line.png differ diff --git a/en/images/category_chart_point.png b/en/images/category_chart_point.png index f8229e40a7..b5d521791f 100644 Binary files a/en/images/category_chart_point.png and b/en/images/category_chart_point.png differ diff --git a/en/images/category_chart_spline.png b/en/images/category_chart_spline.png index 1ce69194b6..1df808fcdb 100644 Binary files a/en/images/category_chart_spline.png and b/en/images/category_chart_spline.png differ diff --git a/en/images/category_chart_splinearea.png b/en/images/category_chart_splinearea.png index f3f1e6d72e..54b1faadc0 100644 Binary files a/en/images/category_chart_splinearea.png and b/en/images/category_chart_splinearea.png differ diff --git a/en/images/category_chart_steparea.png b/en/images/category_chart_steparea.png index 014c1b62a8..f482885aac 100644 Binary files a/en/images/category_chart_steparea.png and b/en/images/category_chart_steparea.png differ diff --git a/en/images/category_chart_stepline.png b/en/images/category_chart_stepline.png index 69be791c01..fb4526b0e5 100644 Binary files a/en/images/category_chart_stepline.png and b/en/images/category_chart_stepline.png differ diff --git a/en/images/category_chart_waterfall.png b/en/images/category_chart_waterfall.png index 4d08134e2b..1cc92a8d54 100644 Binary files a/en/images/category_chart_waterfall.png and b/en/images/category_chart_waterfall.png differ diff --git a/en/images/chartDefaults1.png b/en/images/chartDefaults1.png index 7557024881..e62003cb7d 100644 Binary files a/en/images/chartDefaults1.png and b/en/images/chartDefaults1.png differ diff --git a/en/images/chartDefaults2.png b/en/images/chartDefaults2.png index 106ca77a8d..92c0e4802b 100644 Binary files a/en/images/chartDefaults2.png and b/en/images/chartDefaults2.png differ diff --git a/en/images/chartDefaults3.png b/en/images/chartDefaults3.png index 3f6933734e..8e11a3bec0 100644 Binary files a/en/images/chartDefaults3.png and b/en/images/chartDefaults3.png differ diff --git a/en/images/chartDefaults4.png b/en/images/chartDefaults4.png index f266afc053..22fcceca32 100644 Binary files a/en/images/chartDefaults4.png and b/en/images/chartDefaults4.png differ diff --git a/en/images/charts/data-chart-type-category-area-series.png b/en/images/charts/data-chart-type-category-area-series.png index 4f51b5410f..e1c3530cf8 100644 Binary files a/en/images/charts/data-chart-type-category-area-series.png and b/en/images/charts/data-chart-type-category-area-series.png differ diff --git a/en/images/charts/data-chart-type-category-bar-series.png b/en/images/charts/data-chart-type-category-bar-series.png index d273d251b1..438c2cb327 100644 Binary files a/en/images/charts/data-chart-type-category-bar-series.png and b/en/images/charts/data-chart-type-category-bar-series.png differ diff --git a/en/images/charts/data-chart-type-category-column-series.png b/en/images/charts/data-chart-type-category-column-series.png index aa71990590..5a41af0009 100644 Binary files a/en/images/charts/data-chart-type-category-column-series.png and b/en/images/charts/data-chart-type-category-column-series.png differ diff --git a/en/images/charts/data-chart-type-category-line-series.png b/en/images/charts/data-chart-type-category-line-series.png index abb80c290f..a9ec3b71bc 100644 Binary files a/en/images/charts/data-chart-type-category-line-series.png and b/en/images/charts/data-chart-type-category-line-series.png differ diff --git a/en/images/charts/data-chart-type-category-point-series.png b/en/images/charts/data-chart-type-category-point-series.png index bc04eed9ca..4215b264bb 100644 Binary files a/en/images/charts/data-chart-type-category-point-series.png and b/en/images/charts/data-chart-type-category-point-series.png differ diff --git a/en/images/charts/data-chart-type-category-spline-area-series.png b/en/images/charts/data-chart-type-category-spline-area-series.png index 1a3cf301fc..8a04f0e27d 100644 Binary files a/en/images/charts/data-chart-type-category-spline-area-series.png and b/en/images/charts/data-chart-type-category-spline-area-series.png differ diff --git a/en/images/charts/data-chart-type-category-spline-series.png b/en/images/charts/data-chart-type-category-spline-series.png index bfb38fed95..cd052dee6d 100644 Binary files a/en/images/charts/data-chart-type-category-spline-series.png and b/en/images/charts/data-chart-type-category-spline-series.png differ diff --git a/en/images/charts/data-chart-type-category-step-area-series.png b/en/images/charts/data-chart-type-category-step-area-series.png index eb099a995b..38fe468752 100644 Binary files a/en/images/charts/data-chart-type-category-step-area-series.png and b/en/images/charts/data-chart-type-category-step-area-series.png differ diff --git a/en/images/charts/data-chart-type-category-step-line-series.png b/en/images/charts/data-chart-type-category-step-line-series.png index 2a5c9f3eff..aaa61a1320 100644 Binary files a/en/images/charts/data-chart-type-category-step-line-series.png and b/en/images/charts/data-chart-type-category-step-line-series.png differ diff --git a/en/images/charts/data-chart-type-category-waterfall-series.png b/en/images/charts/data-chart-type-category-waterfall-series.png index 3d152785cb..716e479cac 100644 Binary files a/en/images/charts/data-chart-type-category-waterfall-series.png and b/en/images/charts/data-chart-type-category-waterfall-series.png differ diff --git a/en/images/charts/data-chart-type-financial-area-indicators.png b/en/images/charts/data-chart-type-financial-area-indicators.png index 2807b2dcb7..3d78fff324 100644 Binary files a/en/images/charts/data-chart-type-financial-area-indicators.png and b/en/images/charts/data-chart-type-financial-area-indicators.png differ diff --git a/en/images/charts/data-chart-type-financial-candlestick-series.png b/en/images/charts/data-chart-type-financial-candlestick-series.png index f86b482995..f0b707bba2 100644 Binary files a/en/images/charts/data-chart-type-financial-candlestick-series.png and b/en/images/charts/data-chart-type-financial-candlestick-series.png differ diff --git a/en/images/charts/data-chart-type-financial-column-indicators.png b/en/images/charts/data-chart-type-financial-column-indicators.png index d01c020e43..69ceb0db8e 100644 Binary files a/en/images/charts/data-chart-type-financial-column-indicators.png and b/en/images/charts/data-chart-type-financial-column-indicators.png differ diff --git a/en/images/charts/data-chart-type-financial-line-indicators.png b/en/images/charts/data-chart-type-financial-line-indicators.png index 3098fa76d7..ef9c3e335e 100644 Binary files a/en/images/charts/data-chart-type-financial-line-indicators.png and b/en/images/charts/data-chart-type-financial-line-indicators.png differ diff --git a/en/images/charts/data-chart-type-financial-ohlc-series.png b/en/images/charts/data-chart-type-financial-ohlc-series.png index 58b3f7d26e..1b59494e69 100644 Binary files a/en/images/charts/data-chart-type-financial-ohlc-series.png and b/en/images/charts/data-chart-type-financial-ohlc-series.png differ diff --git a/en/images/charts/data-chart-type-financial-overlays.png b/en/images/charts/data-chart-type-financial-overlays.png index a01a5ee6cc..59bfd8a0cd 100644 Binary files a/en/images/charts/data-chart-type-financial-overlays.png and b/en/images/charts/data-chart-type-financial-overlays.png differ diff --git a/en/images/charts/data-chart-type-polar-area-series.png b/en/images/charts/data-chart-type-polar-area-series.png index 5834e217ec..746d873252 100644 Binary files a/en/images/charts/data-chart-type-polar-area-series.png and b/en/images/charts/data-chart-type-polar-area-series.png differ diff --git a/en/images/charts/data-chart-type-polar-line-series.png b/en/images/charts/data-chart-type-polar-line-series.png index 15bb03dee3..2ead6b7fc5 100644 Binary files a/en/images/charts/data-chart-type-polar-line-series.png and b/en/images/charts/data-chart-type-polar-line-series.png differ diff --git a/en/images/charts/data-chart-type-polar-scatter-series.png b/en/images/charts/data-chart-type-polar-scatter-series.png index 3554a2faa8..f0208d01ff 100644 Binary files a/en/images/charts/data-chart-type-polar-scatter-series.png and b/en/images/charts/data-chart-type-polar-scatter-series.png differ diff --git a/en/images/charts/data-chart-type-polar-spline-area-series.png b/en/images/charts/data-chart-type-polar-spline-area-series.png index 223095e73d..70fe786c51 100644 Binary files a/en/images/charts/data-chart-type-polar-spline-area-series.png and b/en/images/charts/data-chart-type-polar-spline-area-series.png differ diff --git a/en/images/charts/data-chart-type-polar-spline-series.png b/en/images/charts/data-chart-type-polar-spline-series.png index f5ca961d92..fb8ea8e10b 100644 Binary files a/en/images/charts/data-chart-type-polar-spline-series.png and b/en/images/charts/data-chart-type-polar-spline-series.png differ diff --git a/en/images/charts/data-chart-type-radial-area-series.PNG b/en/images/charts/data-chart-type-radial-area-series.PNG index 19e60290ec..5ca61bba9f 100644 Binary files a/en/images/charts/data-chart-type-radial-area-series.PNG and b/en/images/charts/data-chart-type-radial-area-series.PNG differ diff --git a/en/images/charts/data-chart-type-radial-column-series.png b/en/images/charts/data-chart-type-radial-column-series.png index c66b6e1a93..68a6f4951e 100644 Binary files a/en/images/charts/data-chart-type-radial-column-series.png and b/en/images/charts/data-chart-type-radial-column-series.png differ diff --git a/en/images/charts/data-chart-type-radial-line-series.png b/en/images/charts/data-chart-type-radial-line-series.png index 40f3b49be2..dde6365c11 100644 Binary files a/en/images/charts/data-chart-type-radial-line-series.png and b/en/images/charts/data-chart-type-radial-line-series.png differ diff --git a/en/images/charts/data-chart-type-radial-pie-series.png b/en/images/charts/data-chart-type-radial-pie-series.png index 5338950d2a..b9ade30814 100644 Binary files a/en/images/charts/data-chart-type-radial-pie-series.png and b/en/images/charts/data-chart-type-radial-pie-series.png differ diff --git a/en/images/charts/data-chart-type-range-area-series.png b/en/images/charts/data-chart-type-range-area-series.png index bc83e55a2c..81ce3a02b9 100644 Binary files a/en/images/charts/data-chart-type-range-area-series.png and b/en/images/charts/data-chart-type-range-area-series.png differ diff --git a/en/images/charts/data-chart-type-range-column-series.png b/en/images/charts/data-chart-type-range-column-series.png index c9275ab637..82ff71d8b5 100644 Binary files a/en/images/charts/data-chart-type-range-column-series.png and b/en/images/charts/data-chart-type-range-column-series.png differ diff --git a/en/images/charts/data-chart-type-scatter-area-series.png b/en/images/charts/data-chart-type-scatter-area-series.png index 5d17151e6b..23cf6d2b1e 100644 Binary files a/en/images/charts/data-chart-type-scatter-area-series.png and b/en/images/charts/data-chart-type-scatter-area-series.png differ diff --git a/en/images/charts/data-chart-type-scatter-bubble-series.PNG b/en/images/charts/data-chart-type-scatter-bubble-series.PNG index 41580c5cd6..cde54051a0 100644 Binary files a/en/images/charts/data-chart-type-scatter-bubble-series.PNG and b/en/images/charts/data-chart-type-scatter-bubble-series.PNG differ diff --git a/en/images/charts/data-chart-type-scatter-contour-series.png b/en/images/charts/data-chart-type-scatter-contour-series.png index 80bb6c519e..30d5b53e27 100644 Binary files a/en/images/charts/data-chart-type-scatter-contour-series.png and b/en/images/charts/data-chart-type-scatter-contour-series.png differ diff --git a/en/images/charts/data-chart-type-scatter-hd-series.png b/en/images/charts/data-chart-type-scatter-hd-series.png index b9e927dda5..687969e4df 100644 Binary files a/en/images/charts/data-chart-type-scatter-hd-series.png and b/en/images/charts/data-chart-type-scatter-hd-series.png differ diff --git a/en/images/charts/data-chart-type-scatter-line-series.PNG b/en/images/charts/data-chart-type-scatter-line-series.PNG index 6d3491651f..89a536b1a0 100644 Binary files a/en/images/charts/data-chart-type-scatter-line-series.PNG and b/en/images/charts/data-chart-type-scatter-line-series.PNG differ diff --git a/en/images/charts/data-chart-type-scatter-point-series.PNG b/en/images/charts/data-chart-type-scatter-point-series.PNG index ee7d832841..d53c18a46f 100644 Binary files a/en/images/charts/data-chart-type-scatter-point-series.PNG and b/en/images/charts/data-chart-type-scatter-point-series.PNG differ diff --git a/en/images/charts/data-chart-type-scatter-polygon-series.png b/en/images/charts/data-chart-type-scatter-polygon-series.png index 5ee9b13e4d..ad32c63863 100644 Binary files a/en/images/charts/data-chart-type-scatter-polygon-series.png and b/en/images/charts/data-chart-type-scatter-polygon-series.png differ diff --git a/en/images/charts/data-chart-type-scatter-polyline-series.png b/en/images/charts/data-chart-type-scatter-polyline-series.png index 8b1ce0dc5b..6ae0357dce 100644 Binary files a/en/images/charts/data-chart-type-scatter-polyline-series.png and b/en/images/charts/data-chart-type-scatter-polyline-series.png differ diff --git a/en/images/charts/data-chart-type-scatter-spline-series.png b/en/images/charts/data-chart-type-scatter-spline-series.png index bf0cb49394..2fe67024c0 100644 Binary files a/en/images/charts/data-chart-type-scatter-spline-series.png and b/en/images/charts/data-chart-type-scatter-spline-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-100-area-series.png b/en/images/charts/data-chart-type-stacked-100-area-series.png index 374e1090e6..a493b9ae74 100644 Binary files a/en/images/charts/data-chart-type-stacked-100-area-series.png and b/en/images/charts/data-chart-type-stacked-100-area-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-100-bar-series.png b/en/images/charts/data-chart-type-stacked-100-bar-series.png index 345bba1454..252c33397c 100644 Binary files a/en/images/charts/data-chart-type-stacked-100-bar-series.png and b/en/images/charts/data-chart-type-stacked-100-bar-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-100-column-series.png b/en/images/charts/data-chart-type-stacked-100-column-series.png index 4b3f1488ae..3b4f3f59fa 100644 Binary files a/en/images/charts/data-chart-type-stacked-100-column-series.png and b/en/images/charts/data-chart-type-stacked-100-column-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-100-line-series.png b/en/images/charts/data-chart-type-stacked-100-line-series.png index effb4347b7..0b1c00116a 100644 Binary files a/en/images/charts/data-chart-type-stacked-100-line-series.png and b/en/images/charts/data-chart-type-stacked-100-line-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-100-spline-series.png b/en/images/charts/data-chart-type-stacked-100-spline-series.png index 26fb0efa11..39f63607f1 100644 Binary files a/en/images/charts/data-chart-type-stacked-100-spline-series.png and b/en/images/charts/data-chart-type-stacked-100-spline-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-area-series.png b/en/images/charts/data-chart-type-stacked-area-series.png index 195ff0f949..fcea0a9789 100644 Binary files a/en/images/charts/data-chart-type-stacked-area-series.png and b/en/images/charts/data-chart-type-stacked-area-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-bar-series.png b/en/images/charts/data-chart-type-stacked-bar-series.png index cf35da8457..cd5de18836 100644 Binary files a/en/images/charts/data-chart-type-stacked-bar-series.png and b/en/images/charts/data-chart-type-stacked-bar-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-column-series.png b/en/images/charts/data-chart-type-stacked-column-series.png index dfc95615c3..5409e89506 100644 Binary files a/en/images/charts/data-chart-type-stacked-column-series.png and b/en/images/charts/data-chart-type-stacked-column-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-line-series.png b/en/images/charts/data-chart-type-stacked-line-series.png index 9ae1dde20c..20f1c17e22 100644 Binary files a/en/images/charts/data-chart-type-stacked-line-series.png and b/en/images/charts/data-chart-type-stacked-line-series.png differ diff --git a/en/images/charts/data-chart-type-stacked-spline-series.png b/en/images/charts/data-chart-type-stacked-spline-series.png index 947a5a20a2..14463adda2 100644 Binary files a/en/images/charts/data-chart-type-stacked-spline-series.png and b/en/images/charts/data-chart-type-stacked-spline-series.png differ diff --git a/en/images/charts/data-chart-user-annotation-create.gif b/en/images/charts/data-chart-user-annotation-create.gif index ec98b23c27..4de5d3aa91 100644 Binary files a/en/images/charts/data-chart-user-annotation-create.gif and b/en/images/charts/data-chart-user-annotation-create.gif differ diff --git a/en/images/charts/data-chart-user-annotation-delete.gif b/en/images/charts/data-chart-user-annotation-delete.gif index 855e88b508..e4df089033 100644 Binary files a/en/images/charts/data-chart-user-annotation-delete.gif and b/en/images/charts/data-chart-user-annotation-delete.gif differ diff --git a/en/images/charts/doughnut-chart-explosion.png b/en/images/charts/doughnut-chart-explosion.png index 6137ed7860..6ee3918bfd 100644 Binary files a/en/images/charts/doughnut-chart-explosion.png and b/en/images/charts/doughnut-chart-explosion.png differ diff --git a/en/images/charts/doughnut-chart-legend.png b/en/images/charts/doughnut-chart-legend.png index a2a5a00a3d..8531cc73f4 100644 Binary files a/en/images/charts/doughnut-chart-legend.png and b/en/images/charts/doughnut-chart-legend.png differ diff --git a/en/images/charts/doughnut-chart-rings.png b/en/images/charts/doughnut-chart-rings.png index d6320761e9..c67f0e3c3d 100644 Binary files a/en/images/charts/doughnut-chart-rings.png and b/en/images/charts/doughnut-chart-rings.png differ diff --git a/en/images/charts/doughnut-chart-selection.png b/en/images/charts/doughnut-chart-selection.png index b71d2ab97c..2bff4d9d35 100644 Binary files a/en/images/charts/doughnut-chart-selection.png and b/en/images/charts/doughnut-chart-selection.png differ diff --git a/en/images/charts/ignite-ui-angular-category-chart-high-volume-data-1100.gif b/en/images/charts/ignite-ui-angular-category-chart-high-volume-data-1100.gif index 1edbf46160..2f0e24e35d 100644 Binary files a/en/images/charts/ignite-ui-angular-category-chart-high-volume-data-1100.gif and b/en/images/charts/ignite-ui-angular-category-chart-high-volume-data-1100.gif differ diff --git a/en/images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg b/en/images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg index cfbde5365d..d28d5d0d86 100644 Binary files a/en/images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg and b/en/images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg differ diff --git a/en/images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg b/en/images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg index 568af5a7b6..6b2afb6a27 100644 Binary files a/en/images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg and b/en/images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg differ diff --git a/en/images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg b/en/images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg index 79fd76f1ab..44d6d9310f 100644 Binary files a/en/images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg and b/en/images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg differ diff --git a/en/images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg b/en/images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg index 9dc1e76427..ab649a784b 100644 Binary files a/en/images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg and b/en/images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg differ diff --git a/en/images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif b/en/images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif index f06a6b6e69..60e6390583 100644 Binary files a/en/images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif and b/en/images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif differ diff --git a/en/images/charts/pie-chart-explosion.png b/en/images/charts/pie-chart-explosion.png index 17fef48cd0..43246d501b 100644 Binary files a/en/images/charts/pie-chart-explosion.png and b/en/images/charts/pie-chart-explosion.png differ diff --git a/en/images/charts/pie-chart-legend.png b/en/images/charts/pie-chart-legend.png index 6fcbd6dd83..d6cd8eb7c6 100644 Binary files a/en/images/charts/pie-chart-legend.png and b/en/images/charts/pie-chart-legend.png differ diff --git a/en/images/charts/pie-chart-others.png b/en/images/charts/pie-chart-others.png index e8880f405e..421871c6b9 100644 Binary files a/en/images/charts/pie-chart-others.png and b/en/images/charts/pie-chart-others.png differ diff --git a/en/images/charts/pie-chart-selection.png b/en/images/charts/pie-chart-selection.png index a0621b70ac..8527e19ae0 100644 Binary files a/en/images/charts/pie-chart-selection.png and b/en/images/charts/pie-chart-selection.png differ diff --git a/en/images/charts/polar-pie.png b/en/images/charts/polar-pie.png index 8f1299d824..50018875ad 100644 Binary files a/en/images/charts/polar-pie.png and b/en/images/charts/polar-pie.png differ diff --git a/en/images/color-editor.png b/en/images/color-editor.png index 7fafaf9270..ec54b02e3e 100644 Binary files a/en/images/color-editor.png and b/en/images/color-editor.png differ diff --git a/en/images/dashboard-tile-toolbar.png b/en/images/dashboard-tile-toolbar.png index 87a6dce4f1..d7ecdcbd5a 100644 Binary files a/en/images/dashboard-tile-toolbar.png and b/en/images/dashboard-tile-toolbar.png differ diff --git a/en/images/dockmanager-document-host-docking.jpg b/en/images/dockmanager-document-host-docking.jpg index 97bf816d50..08ce47123d 100644 Binary files a/en/images/dockmanager-document-host-docking.jpg and b/en/images/dockmanager-document-host-docking.jpg differ diff --git a/en/images/dockmanager-edge-docking.jpg b/en/images/dockmanager-edge-docking.jpg index 86210db8e2..0bde0d4113 100644 Binary files a/en/images/dockmanager-edge-docking.jpg and b/en/images/dockmanager-edge-docking.jpg differ diff --git a/en/images/dockmanager-electron-app.gif b/en/images/dockmanager-electron-app.gif index d318e2e1db..e04ff2faff 100644 Binary files a/en/images/dockmanager-electron-app.gif and b/en/images/dockmanager-electron-app.gif differ diff --git a/en/images/dockmanager-pane-docking.jpg b/en/images/dockmanager-pane-docking.jpg index 21aa00a387..9d2f5bb389 100644 Binary files a/en/images/dockmanager-pane-docking.jpg and b/en/images/dockmanager-pane-docking.jpg differ diff --git a/en/images/dockmanager-root-docking.jpg b/en/images/dockmanager-root-docking.jpg index 72d87f170f..f5de6edec4 100644 Binary files a/en/images/dockmanager-root-docking.jpg and b/en/images/dockmanager-root-docking.jpg differ diff --git a/en/images/dockmanager-splitter-docking.jpg b/en/images/dockmanager-splitter-docking.jpg index 69b8550c97..5a002dd17e 100644 Binary files a/en/images/dockmanager-splitter-docking.jpg and b/en/images/dockmanager-splitter-docking.jpg differ diff --git a/en/images/financial_chart_bar.png b/en/images/financial_chart_bar.png index 8af0eb2867..55f52af5a4 100644 Binary files a/en/images/financial_chart_bar.png and b/en/images/financial_chart_bar.png differ diff --git a/en/images/financial_chart_candle.png b/en/images/financial_chart_candle.png index 2180497a0e..3a5837fe9b 100644 Binary files a/en/images/financial_chart_candle.png and b/en/images/financial_chart_candle.png differ diff --git a/en/images/financial_chart_column.png b/en/images/financial_chart_column.png index c7c5448af1..1c757582e5 100644 Binary files a/en/images/financial_chart_column.png and b/en/images/financial_chart_column.png differ diff --git a/en/images/financial_chart_line.png b/en/images/financial_chart_line.png index 39eeebc96e..dc8554a321 100644 Binary files a/en/images/financial_chart_line.png and b/en/images/financial_chart_line.png differ diff --git a/en/images/general/AzureMapsImagery.png b/en/images/general/AzureMapsImagery.png index 2c64f08178..00eba3a3a1 100644 Binary files a/en/images/general/AzureMapsImagery.png and b/en/images/general/AzureMapsImagery.png differ diff --git a/en/images/general/Azure_Traffic_Tile_Series_With_Background.png b/en/images/general/Azure_Traffic_Tile_Series_With_Background.png index 2a8a6c8bcc..022f8a603d 100644 Binary files a/en/images/general/Azure_Traffic_Tile_Series_With_Background.png and b/en/images/general/Azure_Traffic_Tile_Series_With_Background.png differ diff --git a/en/images/general/BingMapsImagery.png b/en/images/general/BingMapsImagery.png index 717832e5dc..cabdc04551 100644 Binary files a/en/images/general/BingMapsImagery.png and b/en/images/general/BingMapsImagery.png differ diff --git a/en/images/general/BingMapsImagery2.png b/en/images/general/BingMapsImagery2.png index 85fe3036f8..47cef1434b 100644 Binary files a/en/images/general/BingMapsImagery2.png and b/en/images/general/BingMapsImagery2.png differ diff --git a/en/images/general/azure-ci-add-token-variable-1.jpg b/en/images/general/azure-ci-add-token-variable-1.jpg index 0901ea2106..91969f26d4 100644 Binary files a/en/images/general/azure-ci-add-token-variable-1.jpg and b/en/images/general/azure-ci-add-token-variable-1.jpg differ diff --git a/en/images/general/azure-ci-new-variable-2.jpg b/en/images/general/azure-ci-new-variable-2.jpg index cef99f7898..aea7b3b93e 100644 Binary files a/en/images/general/azure-ci-new-variable-2.jpg and b/en/images/general/azure-ci-new-variable-2.jpg differ diff --git a/en/images/general/blazor-excel.png b/en/images/general/blazor-excel.png index f174998d4d..ac7c017213 100644 Binary files a/en/images/general/blazor-excel.png and b/en/images/general/blazor-excel.png differ diff --git a/en/images/general/blazor-wasm-app-2.png b/en/images/general/blazor-wasm-app-2.png index e6ec406fc7..d2a83c0b97 100644 Binary files a/en/images/general/blazor-wasm-app-2.png and b/en/images/general/blazor-wasm-app-2.png differ diff --git a/en/images/general/blazor-wasm-app.png b/en/images/general/blazor-wasm-app.png index b3ab90b288..4d9021c14e 100644 Binary files a/en/images/general/blazor-wasm-app.png and b/en/images/general/blazor-wasm-app.png differ diff --git a/en/images/general/collapsed_indicator.png b/en/images/general/collapsed_indicator.png index 61d670fe08..41fa2630a3 100644 Binary files a/en/images/general/collapsed_indicator.png and b/en/images/general/collapsed_indicator.png differ diff --git a/en/images/general/expand_indicator.png b/en/images/general/expand_indicator.png index 28c207758e..71ad897e4c 100644 Binary files a/en/images/general/expand_indicator.png and b/en/images/general/expand_indicator.png differ diff --git a/en/images/general/generate-token.jpg b/en/images/general/generate-token.jpg index 9f59d3ca14..056ab89bd5 100644 Binary files a/en/images/general/generate-token.jpg and b/en/images/general/generate-token.jpg differ diff --git a/en/images/general/geo-map.png b/en/images/general/geo-map.png index 714705e37b..e3f0837761 100644 Binary files a/en/images/general/geo-map.png and b/en/images/general/geo-map.png differ diff --git a/en/images/general/getting-started-blazor-card-windows.jpg b/en/images/general/getting-started-blazor-card-windows.jpg index c4fa26d72f..c8b2ace6aa 100644 Binary files a/en/images/general/getting-started-blazor-card-windows.jpg and b/en/images/general/getting-started-blazor-card-windows.jpg differ diff --git a/en/images/general/getting-started-blazor-card.jpg b/en/images/general/getting-started-blazor-card.jpg index b35a3dfe0a..2122c9b778 100644 Binary files a/en/images/general/getting-started-blazor-card.jpg and b/en/images/general/getting-started-blazor-card.jpg differ diff --git a/en/images/general/greenCheck.png b/en/images/general/greenCheck.png index 6d09366869..4388795ca6 100644 Binary files a/en/images/general/greenCheck.png and b/en/images/general/greenCheck.png differ diff --git a/en/images/general/grid-geo-map.png b/en/images/general/grid-geo-map.png index 84abc29db8..62f4169b64 100644 Binary files a/en/images/general/grid-geo-map.png and b/en/images/general/grid-geo-map.png differ diff --git a/en/images/general/ig-cli-grid.png b/en/images/general/ig-cli-grid.png index 5ab04dea11..b7030bfd47 100644 Binary files a/en/images/general/ig-cli-grid.png and b/en/images/general/ig-cli-grid.png differ diff --git a/en/images/general/ig-vite-grid.png b/en/images/general/ig-vite-grid.png index 2535f6f8a7..e502925707 100644 Binary files a/en/images/general/ig-vite-grid.png and b/en/images/general/ig-vite-grid.png differ diff --git a/en/images/general/landing-grid-page.png b/en/images/general/landing-grid-page.png index 1ef4a4a47c..acc74f69f2 100644 Binary files a/en/images/general/landing-grid-page.png and b/en/images/general/landing-grid-page.png differ diff --git a/en/images/general/layout_mode.png b/en/images/general/layout_mode.png index 2eb17bb972..669a3b82e4 100644 Binary files a/en/images/general/layout_mode.png and b/en/images/general/layout_mode.png differ diff --git a/en/images/general/lazy-loaded-assembly.png b/en/images/general/lazy-loaded-assembly.png index 1295c343e3..bcf4042261 100644 Binary files a/en/images/general/lazy-loaded-assembly.png and b/en/images/general/lazy-loaded-assembly.png differ diff --git a/en/images/general/lazy-loading-of-assembly.png b/en/images/general/lazy-loading-of-assembly.png index 3af94acce7..e09721e933 100644 Binary files a/en/images/general/lazy-loading-of-assembly.png and b/en/images/general/lazy-loading-of-assembly.png differ diff --git a/en/images/general/new-blazor-project-client.jpg b/en/images/general/new-blazor-project-client.jpg index 7eb5901666..0825401359 100644 Binary files a/en/images/general/new-blazor-project-client.jpg and b/en/images/general/new-blazor-project-client.jpg differ diff --git a/en/images/general/new-blazor-project-configure-client.jpg b/en/images/general/new-blazor-project-configure-client.jpg index cd89362e5e..eb4f77dd33 100644 Binary files a/en/images/general/new-blazor-project-configure-client.jpg and b/en/images/general/new-blazor-project-configure-client.jpg differ diff --git a/en/images/general/new-blazor-project-configure-maui.jpg b/en/images/general/new-blazor-project-configure-maui.jpg index b8e6f985b4..427612812a 100644 Binary files a/en/images/general/new-blazor-project-configure-maui.jpg and b/en/images/general/new-blazor-project-configure-maui.jpg differ diff --git a/en/images/general/new-blazor-project-configure-server.jpg b/en/images/general/new-blazor-project-configure-server.jpg index 4a73a7789f..980c859574 100644 Binary files a/en/images/general/new-blazor-project-configure-server.jpg and b/en/images/general/new-blazor-project-configure-server.jpg differ diff --git a/en/images/general/new-blazor-project-configuring-web-app.jpg b/en/images/general/new-blazor-project-configuring-web-app.jpg index d41ba68017..54ae1175f9 100644 Binary files a/en/images/general/new-blazor-project-configuring-web-app.jpg and b/en/images/general/new-blazor-project-configuring-web-app.jpg differ diff --git a/en/images/general/new-blazor-project-info-client.jpg b/en/images/general/new-blazor-project-info-client.jpg index de6d7c584a..0e006b6e2c 100644 Binary files a/en/images/general/new-blazor-project-info-client.jpg and b/en/images/general/new-blazor-project-info-client.jpg differ diff --git a/en/images/general/new-blazor-project-info-server.jpg b/en/images/general/new-blazor-project-info-server.jpg index 9252e53a5d..60893d4695 100644 Binary files a/en/images/general/new-blazor-project-info-server.jpg and b/en/images/general/new-blazor-project-info-server.jpg differ diff --git a/en/images/general/new-blazor-project-maui.jpg b/en/images/general/new-blazor-project-maui.jpg index cd5c2503fd..7474fc1f01 100644 Binary files a/en/images/general/new-blazor-project-maui.jpg and b/en/images/general/new-blazor-project-maui.jpg differ diff --git a/en/images/general/new-blazor-project-server.jpg b/en/images/general/new-blazor-project-server.jpg index 05a80c0621..78f52578a7 100644 Binary files a/en/images/general/new-blazor-project-server.jpg and b/en/images/general/new-blazor-project-server.jpg differ diff --git a/en/images/general/new-blazor-project-web-app-info.jpg b/en/images/general/new-blazor-project-web-app-info.jpg index 84fe377c18..dd5fcf2dc5 100644 Binary files a/en/images/general/new-blazor-project-web-app-info.jpg and b/en/images/general/new-blazor-project-web-app-info.jpg differ diff --git a/en/images/general/new-blazor-project-web-app.jpg b/en/images/general/new-blazor-project-web-app.jpg index 3fdbb285ff..3c6cbf5fcd 100644 Binary files a/en/images/general/new-blazor-project-web-app.jpg and b/en/images/general/new-blazor-project-web-app.jpg differ diff --git a/en/images/general/nuget-manage-packages.jpg b/en/images/general/nuget-manage-packages.jpg index d7f2aeb47c..e2fa08bc6b 100644 Binary files a/en/images/general/nuget-manage-packages.jpg and b/en/images/general/nuget-manage-packages.jpg differ diff --git a/en/images/general/nuget-package-manager-browse.jpg b/en/images/general/nuget-package-manager-browse.jpg index 7263bb8223..cf4751cf81 100644 Binary files a/en/images/general/nuget-package-manager-browse.jpg and b/en/images/general/nuget-package-manager-browse.jpg differ diff --git a/en/images/general/nuget-package-manager-package-sources-ig-server.jpg b/en/images/general/nuget-package-manager-package-sources-ig-server.jpg index 44630b0ba0..20591b96b5 100644 Binary files a/en/images/general/nuget-package-manager-package-sources-ig-server.jpg and b/en/images/general/nuget-package-manager-package-sources-ig-server.jpg differ diff --git a/en/images/general/nuget-package-manager-setting-menu-item.jpg b/en/images/general/nuget-package-manager-setting-menu-item.jpg index ed67792a2e..9b764a21f6 100644 Binary files a/en/images/general/nuget-package-manager-setting-menu-item.jpg and b/en/images/general/nuget-package-manager-setting-menu-item.jpg differ diff --git a/en/images/general/query-builder-drag-and-drop.gif b/en/images/general/query-builder-drag-and-drop.gif index 77cec96fef..f1c1a85051 100644 Binary files a/en/images/general/query-builder-drag-and-drop.gif and b/en/images/general/query-builder-drag-and-drop.gif differ diff --git a/en/images/general/query-builder-keyboard-drag-and-drop.gif b/en/images/general/query-builder-keyboard-drag-and-drop.gif index 8bab49b1d7..7c20c21c5a 100644 Binary files a/en/images/general/query-builder-keyboard-drag-and-drop.gif and b/en/images/general/query-builder-keyboard-drag-and-drop.gif differ diff --git a/en/images/general/redX.png b/en/images/general/redX.png index ae748161d2..5be40a9263 100644 Binary files a/en/images/general/redX.png and b/en/images/general/redX.png differ diff --git a/en/images/grid_sizing/columns-150px-empty-area-v2.jpg b/en/images/grid_sizing/columns-150px-empty-area-v2.jpg index 4e37b23bde..cf9d82e3db 100644 Binary files a/en/images/grid_sizing/columns-150px-empty-area-v2.jpg and b/en/images/grid_sizing/columns-150px-empty-area-v2.jpg differ diff --git a/en/images/grid_sizing/columns-150px-extra-area-v2.jpg b/en/images/grid_sizing/columns-150px-extra-area-v2.jpg index 6d3542908c..82a970a38c 100644 Binary files a/en/images/grid_sizing/columns-150px-extra-area-v2.jpg and b/en/images/grid_sizing/columns-150px-extra-area-v2.jpg differ diff --git a/en/images/grid_sizing/columns-default-all-first-100px-v2.jpg b/en/images/grid_sizing/columns-default-all-first-100px-v2.jpg index a0a6b826a5..394ee209ba 100644 Binary files a/en/images/grid_sizing/columns-default-all-first-100px-v2.jpg and b/en/images/grid_sizing/columns-default-all-first-100px-v2.jpg differ diff --git a/en/images/grid_sizing/columns-default-all-min-136px-v2.jpg b/en/images/grid_sizing/columns-default-all-min-136px-v2.jpg index 0b49d86b95..42c4a4fc1b 100644 Binary files a/en/images/grid_sizing/columns-default-all-min-136px-v2.jpg and b/en/images/grid_sizing/columns-default-all-min-136px-v2.jpg differ diff --git a/en/images/grid_sizing/columns-default-all-row-selectors-v2.jpg b/en/images/grid_sizing/columns-default-all-row-selectors-v2.jpg index 3fa3a28438..444bb3e5db 100644 Binary files a/en/images/grid_sizing/columns-default-all-row-selectors-v2.jpg and b/en/images/grid_sizing/columns-default-all-row-selectors-v2.jpg differ diff --git a/en/images/grid_sizing/columns-default-first-rest-100px-v2.jpg b/en/images/grid_sizing/columns-default-first-rest-100px-v2.jpg index 7c2803dc37..23877507aa 100644 Binary files a/en/images/grid_sizing/columns-default-first-rest-100px-v2.jpg and b/en/images/grid_sizing/columns-default-first-rest-100px-v2.jpg differ diff --git a/en/images/grid_sizing/columns-default-first-rest-300px-v2.jpg b/en/images/grid_sizing/columns-default-first-rest-300px-v2.jpg index 91d492f287..29efc48382 100644 Binary files a/en/images/grid_sizing/columns-default-first-rest-300px-v2.jpg and b/en/images/grid_sizing/columns-default-first-rest-300px-v2.jpg differ diff --git a/en/images/grid_sizing/columns-default-gridWidth-null-v2.jpg b/en/images/grid_sizing/columns-default-gridWidth-null-v2.jpg index 1d00ba58bc..f08079ebbf 100644 Binary files a/en/images/grid_sizing/columns-default-gridWidth-null-v2.jpg and b/en/images/grid_sizing/columns-default-gridWidth-null-v2.jpg differ diff --git a/en/images/grid_sizing/columns-percent-100p-v2.jpg b/en/images/grid_sizing/columns-percent-100p-v2.jpg index ded053ed93..521dfc24a4 100644 Binary files a/en/images/grid_sizing/columns-percent-100p-v2.jpg and b/en/images/grid_sizing/columns-percent-100p-v2.jpg differ diff --git a/en/images/grid_sizing/columns-percent-bigger-100p-v2.jpg b/en/images/grid_sizing/columns-percent-bigger-100p-v2.jpg index d2b032a4a9..aff736b6ea 100644 Binary files a/en/images/grid_sizing/columns-percent-bigger-100p-v2.jpg and b/en/images/grid_sizing/columns-percent-bigger-100p-v2.jpg differ diff --git a/en/images/grid_sizing/columns-percent-gridWidth-null-v2.jpg b/en/images/grid_sizing/columns-percent-gridWidth-null-v2.jpg index d9f262db27..98dd70afc9 100644 Binary files a/en/images/grid_sizing/columns-percent-gridWidth-null-v2.jpg and b/en/images/grid_sizing/columns-percent-gridWidth-null-v2.jpg differ diff --git a/en/images/grid_sizing/columns-percent-less-100p-v2.jpg b/en/images/grid_sizing/columns-percent-less-100p-v2.jpg index cdfe6da52f..a9a0d22c27 100644 Binary files a/en/images/grid_sizing/columns-percent-less-100p-v2.jpg and b/en/images/grid_sizing/columns-percent-less-100p-v2.jpg differ diff --git a/en/images/grid_sizing/height-500px-14rows-v2.jpg b/en/images/grid_sizing/height-500px-14rows-v2.jpg index 92c8ae4912..f18c02379b 100644 Binary files a/en/images/grid_sizing/height-500px-14rows-v2.jpg and b/en/images/grid_sizing/height-500px-14rows-v2.jpg differ diff --git a/en/images/grid_sizing/height-500px-4rows-v2.jpg b/en/images/grid_sizing/height-500px-4rows-v2.jpg index 9809ad0d87..78daf65f1e 100644 Binary files a/en/images/grid_sizing/height-500px-4rows-v2.jpg and b/en/images/grid_sizing/height-500px-4rows-v2.jpg differ diff --git a/en/images/grid_sizing/height-700px-14rows-parent-noscroll-v2.jpg b/en/images/grid_sizing/height-700px-14rows-parent-noscroll-v2.jpg index cfd248d6fa..03a1d45247 100644 Binary files a/en/images/grid_sizing/height-700px-14rows-parent-noscroll-v2.jpg and b/en/images/grid_sizing/height-700px-14rows-parent-noscroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-700px-14rows-parent-scroll-v2.jpg b/en/images/grid_sizing/height-700px-14rows-parent-scroll-v2.jpg index b0b2ad10eb..dab9bda1c8 100644 Binary files a/en/images/grid_sizing/height-700px-14rows-parent-scroll-v2.jpg and b/en/images/grid_sizing/height-700px-14rows-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-null-14rows-v2.jpg b/en/images/grid_sizing/height-null-14rows-v2.jpg index 96c01bebb1..7724e7dea6 100644 Binary files a/en/images/grid_sizing/height-null-14rows-v2.jpg and b/en/images/grid_sizing/height-null-14rows-v2.jpg differ diff --git a/en/images/grid_sizing/height-null-24row-parent-scroll-v2.jpg b/en/images/grid_sizing/height-null-24row-parent-scroll-v2.jpg index 6e20dfc25b..1a80d47832 100644 Binary files a/en/images/grid_sizing/height-null-24row-parent-scroll-v2.jpg and b/en/images/grid_sizing/height-null-24row-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-null-24rows-parent-noscroll-v2.jpg b/en/images/grid_sizing/height-null-24rows-parent-noscroll-v2.jpg index 4cfa8113e6..7229c3f146 100644 Binary files a/en/images/grid_sizing/height-null-24rows-parent-noscroll-v2.jpg and b/en/images/grid_sizing/height-null-24rows-parent-noscroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-null-24rows-parent-noscroll.jpg b/en/images/grid_sizing/height-null-24rows-parent-noscroll.jpg index 4b600659ad..40e9a27bdf 100644 Binary files a/en/images/grid_sizing/height-null-24rows-parent-noscroll.jpg and b/en/images/grid_sizing/height-null-24rows-parent-noscroll.jpg differ diff --git a/en/images/grid_sizing/height-null-24rows-parent-scroll-v2.jpg b/en/images/grid_sizing/height-null-24rows-parent-scroll-v2.jpg index 5eddbd77f2..936fb85dbe 100644 Binary files a/en/images/grid_sizing/height-null-24rows-parent-scroll-v2.jpg and b/en/images/grid_sizing/height-null-24rows-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-null-24rows-v2.jpg b/en/images/grid_sizing/height-null-24rows-v2.jpg index cee66e7c00..ed235db0df 100644 Binary files a/en/images/grid_sizing/height-null-24rows-v2.jpg and b/en/images/grid_sizing/height-null-24rows-v2.jpg differ diff --git a/en/images/grid_sizing/height-percent-100-parent-100-v2.jpg b/en/images/grid_sizing/height-percent-100-parent-100-v2.jpg index beb41395d3..aa2bf64ac9 100644 Binary files a/en/images/grid_sizing/height-percent-100-parent-100-v2.jpg and b/en/images/grid_sizing/height-percent-100-parent-100-v2.jpg differ diff --git a/en/images/grid_sizing/height-percent-100-parent-800px-v2.jpg b/en/images/grid_sizing/height-percent-100-parent-800px-v2.jpg index 184a7c1162..c57bec8329 100644 Binary files a/en/images/grid_sizing/height-percent-100-parent-800px-v2.jpg and b/en/images/grid_sizing/height-percent-100-parent-800px-v2.jpg differ diff --git a/en/images/grid_sizing/height-percent-130p-parent-noscroll-v2.jpg b/en/images/grid_sizing/height-percent-130p-parent-noscroll-v2.jpg index d74527479e..44b78b0efe 100644 Binary files a/en/images/grid_sizing/height-percent-130p-parent-noscroll-v2.jpg and b/en/images/grid_sizing/height-percent-130p-parent-noscroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-percent-130p-parent-scroll-v2.jpg b/en/images/grid_sizing/height-percent-130p-parent-scroll-v2.jpg index da6833b89d..0707dcbe08 100644 Binary files a/en/images/grid_sizing/height-percent-130p-parent-scroll-v2.jpg and b/en/images/grid_sizing/height-percent-130p-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/height-undefined-14rows-v2.jpg b/en/images/grid_sizing/height-undefined-14rows-v2.jpg index 83b97f59df..5f835859a7 100644 Binary files a/en/images/grid_sizing/height-undefined-14rows-v2.jpg and b/en/images/grid_sizing/height-undefined-14rows-v2.jpg differ diff --git a/en/images/grid_sizing/height-undefined-7rows-v2.jpg b/en/images/grid_sizing/height-undefined-7rows-v2.jpg index 2a7e92367b..c5178369c1 100644 Binary files a/en/images/grid_sizing/height-undefined-7rows-v2.jpg and b/en/images/grid_sizing/height-undefined-7rows-v2.jpg differ diff --git a/en/images/grid_sizing/hgrid-height-percentages-v2.jpg b/en/images/grid_sizing/hgrid-height-percentages-v2.jpg index ea8be998a8..1548e762ef 100644 Binary files a/en/images/grid_sizing/hgrid-height-percentages-v2.jpg and b/en/images/grid_sizing/hgrid-height-percentages-v2.jpg differ diff --git a/en/images/grid_sizing/hgrid-width-percentages-v2.jpg b/en/images/grid_sizing/hgrid-width-percentages-v2.jpg index a574fed35a..8abffe2aa6 100644 Binary files a/en/images/grid_sizing/hgrid-width-percentages-v2.jpg and b/en/images/grid_sizing/hgrid-width-percentages-v2.jpg differ diff --git a/en/images/grid_sizing/width-cols-scroll-parent-noscroll-v2.jpg b/en/images/grid_sizing/width-cols-scroll-parent-noscroll-v2.jpg index bed736a8f2..01125b5177 100644 Binary files a/en/images/grid_sizing/width-cols-scroll-parent-noscroll-v2.jpg and b/en/images/grid_sizing/width-cols-scroll-parent-noscroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-cols-scroll-parent-scroll-v2.jpg b/en/images/grid_sizing/width-cols-scroll-parent-scroll-v2.jpg index e86ce5d26a..9ddd36ccaa 100644 Binary files a/en/images/grid_sizing/width-cols-scroll-parent-scroll-v2.jpg and b/en/images/grid_sizing/width-cols-scroll-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-cols-scrollbar-v2.jpg b/en/images/grid_sizing/width-cols-scrollbar-v2.jpg index 34a4a85c3e..b99b0eab0a 100644 Binary files a/en/images/grid_sizing/width-cols-scrollbar-v2.jpg and b/en/images/grid_sizing/width-cols-scrollbar-v2.jpg differ diff --git a/en/images/grid_sizing/width-null-no-scroll-v2.jpg b/en/images/grid_sizing/width-null-no-scroll-v2.jpg index 320ff604cd..64e0fabf9a 100644 Binary files a/en/images/grid_sizing/width-null-no-scroll-v2.jpg and b/en/images/grid_sizing/width-null-no-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-null-parent-scroll-v2.jpg b/en/images/grid_sizing/width-null-parent-scroll-v2.jpg index f0f182a76c..291b7b4f40 100644 Binary files a/en/images/grid_sizing/width-null-parent-scroll-v2.jpg and b/en/images/grid_sizing/width-null-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-null-scroll-v2.jpg b/en/images/grid_sizing/width-null-scroll-v2.jpg index c9d669f2a3..d61bcf5f02 100644 Binary files a/en/images/grid_sizing/width-null-scroll-v2.jpg and b/en/images/grid_sizing/width-null-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-percent-100p-v2.jpg b/en/images/grid_sizing/width-percent-100p-v2.jpg index 0a09612fa8..e97bca3d6b 100644 Binary files a/en/images/grid_sizing/width-percent-100p-v2.jpg and b/en/images/grid_sizing/width-percent-100p-v2.jpg differ diff --git a/en/images/grid_sizing/width-percent-150p-parent-noscroll-v2.jpg b/en/images/grid_sizing/width-percent-150p-parent-noscroll-v2.jpg index 4ed0bcc2c5..45655eb723 100644 Binary files a/en/images/grid_sizing/width-percent-150p-parent-noscroll-v2.jpg and b/en/images/grid_sizing/width-percent-150p-parent-noscroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-percent-150p-parent-scroll-v2.jpg b/en/images/grid_sizing/width-percent-150p-parent-scroll-v2.jpg index 4721fb633e..5b18d86cc1 100644 Binary files a/en/images/grid_sizing/width-percent-150p-parent-scroll-v2.jpg and b/en/images/grid_sizing/width-percent-150p-parent-scroll-v2.jpg differ diff --git a/en/images/grid_sizing/width-percent-parent-100p-v2.jpg b/en/images/grid_sizing/width-percent-parent-100p-v2.jpg index 1a21acb942..4621017954 100644 Binary files a/en/images/grid_sizing/width-percent-parent-100p-v2.jpg and b/en/images/grid_sizing/width-percent-parent-100p-v2.jpg differ diff --git a/en/images/hgrid-database.jpg b/en/images/hgrid-database.jpg index bf1a3bb3d1..6c33bf2816 100644 Binary files a/en/images/hgrid-database.jpg and b/en/images/hgrid-database.jpg differ diff --git a/en/images/marketing/grid-cell-row-selection.gif b/en/images/marketing/grid-cell-row-selection.gif index a7d5b0514a..7b2c1eee95 100644 Binary files a/en/images/marketing/grid-cell-row-selection.gif and b/en/images/marketing/grid-cell-row-selection.gif differ diff --git a/en/images/marketing/grid-column-animations.gif b/en/images/marketing/grid-column-animations.gif index 08bba608a5..81b5eddda0 100644 Binary files a/en/images/marketing/grid-column-animations.gif and b/en/images/marketing/grid-column-animations.gif differ diff --git a/en/images/marketing/grid-column-moving.gif b/en/images/marketing/grid-column-moving.gif index 09a0c4657f..335c739b03 100644 Binary files a/en/images/marketing/grid-column-moving.gif and b/en/images/marketing/grid-column-moving.gif differ diff --git a/en/images/marketing/grid-column-options-dialog.jpg b/en/images/marketing/grid-column-options-dialog.jpg index 1407876588..6b2b65d8a0 100644 Binary files a/en/images/marketing/grid-column-options-dialog.jpg and b/en/images/marketing/grid-column-options-dialog.jpg differ diff --git a/en/images/marketing/grid-column-pinning.jpg b/en/images/marketing/grid-column-pinning.jpg index 5001cd332d..1cefc6e98c 100644 Binary files a/en/images/marketing/grid-column-pinning.jpg and b/en/images/marketing/grid-column-pinning.jpg differ diff --git a/en/images/marketing/grid-column-resizing.gif b/en/images/marketing/grid-column-resizing.gif index 8c60e71f8e..d5eb65670b 100644 Binary files a/en/images/marketing/grid-column-resizing.gif and b/en/images/marketing/grid-column-resizing.gif differ diff --git a/en/images/marketing/grid-column-sorting.gif b/en/images/marketing/grid-column-sorting.gif index 4182599512..22716b88ac 100644 Binary files a/en/images/marketing/grid-column-sorting.gif and b/en/images/marketing/grid-column-sorting.gif differ diff --git a/en/images/marketing/grid-column-summaries.jpg b/en/images/marketing/grid-column-summaries.jpg index 19ac8be46c..ce5c7a35ae 100644 Binary files a/en/images/marketing/grid-column-summaries.jpg and b/en/images/marketing/grid-column-summaries.jpg differ diff --git a/en/images/marketing/grid-column-types.jpg b/en/images/marketing/grid-column-types.jpg index 36be4e865b..2015367e42 100644 Binary files a/en/images/marketing/grid-column-types.jpg and b/en/images/marketing/grid-column-types.jpg differ diff --git a/en/images/marketing/grid-filtering.jpg b/en/images/marketing/grid-filtering.jpg index 733c8a0710..53ccea54a2 100644 Binary files a/en/images/marketing/grid-filtering.jpg and b/en/images/marketing/grid-filtering.jpg differ diff --git a/en/images/marketing/grid-keyboard-navigation.gif b/en/images/marketing/grid-keyboard-navigation.gif index cba2034398..7e19c98fb6 100644 Binary files a/en/images/marketing/grid-keyboard-navigation.gif and b/en/images/marketing/grid-keyboard-navigation.gif differ diff --git a/en/images/marketing/grid-paging.jpg b/en/images/marketing/grid-paging.jpg index 7aed579574..64e5eb4f82 100644 Binary files a/en/images/marketing/grid-paging.jpg and b/en/images/marketing/grid-paging.jpg differ diff --git a/en/images/marketing/grid-row-column-grouping.gif b/en/images/marketing/grid-row-column-grouping.gif index d2623c2b82..2695c503f8 100644 Binary files a/en/images/marketing/grid-row-column-grouping.gif and b/en/images/marketing/grid-row-column-grouping.gif differ diff --git a/en/images/marketing/grid-row-pinning.gif b/en/images/marketing/grid-row-pinning.gif index 8e4b9bafdf..ba6189bcd8 100644 Binary files a/en/images/marketing/grid-row-pinning.gif and b/en/images/marketing/grid-row-pinning.gif differ diff --git a/en/images/marketing/ignite-ui-blazor-cta-banner-2.png b/en/images/marketing/ignite-ui-blazor-cta-banner-2.png index d5861b8f72..95ecce4121 100644 Binary files a/en/images/marketing/ignite-ui-blazor-cta-banner-2.png and b/en/images/marketing/ignite-ui-blazor-cta-banner-2.png differ diff --git a/en/images/marketing/ignite-ui-for-blazor.gif b/en/images/marketing/ignite-ui-for-blazor.gif index 726c26030e..0848f43491 100644 Binary files a/en/images/marketing/ignite-ui-for-blazor.gif and b/en/images/marketing/ignite-ui-for-blazor.gif differ diff --git a/en/images/marketing/ignite-ui-for-react.gif b/en/images/marketing/ignite-ui-for-react.gif index dce93ccba6..5e5847bf1d 100644 Binary files a/en/images/marketing/ignite-ui-for-react.gif and b/en/images/marketing/ignite-ui-for-react.gif differ diff --git a/en/images/marketing/ignite-ui-react-cta-banner-2.png b/en/images/marketing/ignite-ui-react-cta-banner-2.png index a7901652a4..e1b7790a3e 100644 Binary files a/en/images/marketing/ignite-ui-react-cta-banner-2.png and b/en/images/marketing/ignite-ui-react-cta-banner-2.png differ diff --git a/en/images/marketing/ignite-ui-web-components-cta-banner-2.png b/en/images/marketing/ignite-ui-web-components-cta-banner-2.png index ea538fbf53..c6c26e8eff 100644 Binary files a/en/images/marketing/ignite-ui-web-components-cta-banner-2.png and b/en/images/marketing/ignite-ui-web-components-cta-banner-2.png differ diff --git a/en/images/multi-row-layout-1.png b/en/images/multi-row-layout-1.png index f854e844b7..54c884bf24 100644 Binary files a/en/images/multi-row-layout-1.png and b/en/images/multi-row-layout-1.png differ diff --git a/en/images/open-source-text.png b/en/images/open-source-text.png index b64ea93b6d..aaf6e205dc 100644 Binary files a/en/images/open-source-text.png and b/en/images/open-source-text.png differ diff --git a/en/images/premium-text.png b/en/images/premium-text.png index 51b73d0438..36bac8c726 100644 Binary files a/en/images/premium-text.png and b/en/images/premium-text.png differ diff --git a/en/images/readme/ig-banner.png b/en/images/readme/ig-banner.png index d1535bb811..2325a9a9c7 100644 Binary files a/en/images/readme/ig-banner.png and b/en/images/readme/ig-banner.png differ diff --git a/en/images/stepper/stepper-contentTop.png b/en/images/stepper/stepper-contentTop.png index a17b6e5109..f18a8945aa 100644 Binary files a/en/images/stepper/stepper-contentTop.png and b/en/images/stepper/stepper-contentTop.png differ diff --git a/en/images/stepper/stepper-step.png b/en/images/stepper/stepper-step.png index 4b19780dcc..37495bdd83 100644 Binary files a/en/images/stepper/stepper-step.png and b/en/images/stepper/stepper-step.png differ diff --git a/en/images/tile-manager-actions.png b/en/images/tile-manager-actions.png index 090e10c5ad..fbe46b91c6 100644 Binary files a/en/images/tile-manager-actions.png and b/en/images/tile-manager-actions.png differ diff --git a/en/images/toolbar_icons.png b/en/images/toolbar_icons.png index 84076ee367..e35c52b607 100644 Binary files a/en/images/toolbar_icons.png and b/en/images/toolbar_icons.png differ diff --git a/en/images/unfold_less_icon_screenshot.jpg b/en/images/unfold_less_icon_screenshot.jpg index e3aaf75189..8de5c50592 100644 Binary files a/en/images/unfold_less_icon_screenshot.jpg and b/en/images/unfold_less_icon_screenshot.jpg differ diff --git a/en/images/wc-live-server.jpg b/en/images/wc-live-server.jpg index a009183afa..92875c05a7 100644 Binary files a/en/images/wc-live-server.jpg and b/en/images/wc-live-server.jpg differ diff --git a/en/images/wc-project.jpg b/en/images/wc-project.jpg index 0f1f87422e..feb0ee592f 100644 Binary files a/en/images/wc-project.jpg and b/en/images/wc-project.jpg differ