{"id":3545,"date":"2026-02-25T14:43:40","date_gmt":"2026-02-25T14:43:40","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=3545"},"modified":"2026-03-21T00:23:13","modified_gmt":"2026-03-21T00:23:13","slug":"ignite-ui-theming-engine-v25","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-theming-engine-v25","title":{"rendered":"What&#8217;s New: Ignite\u00a0UI Theming Engine v25"},"content":{"rendered":"\n<p><em>A Deterministic Design Token Architecture for AI-Generated Applications<\/em><br><em>Built for Model Context Protocol (MCP) Agent Workflows<\/em><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Better prompts do not fix broken theming architectures. A deterministic token system does.<\/p>\n<\/blockquote>\n\n\n\n<p><p style=\"font-weight:700;font-size:15px\">\ud83d\udce6 Package name<\/p><\/p>\n\n\n\n<p style=\"font-size:14px\">The MCP server ships inside the existing <code>igniteui-theming<\/code> npm package. There is no separate <code>@igniteui\/theming-mcp<\/code> package \u2014 it does not exist on npm. Any AI assistant that suggests it is hallucinating.<\/p>\n\n\n\n<p style=\"font-size:14px\"><strong>No local install required.<\/strong> VS Code spawns the server automatically using:<br><code>npx -y igniteui-theming igniteui-theming-mcp<\/code><br>You do not run this command manually in a terminal.<\/p>\n\n\n<p><!-- \/wp:post-content --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"your-ai-is-only-as-good-as-the-tools-it-has\">Your AI Is Only as Good as the Tools It Has<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>MCP-enabled IDEs such as Cursor, VS Code, and Claude Desktop give AI agents a structured context. But context alone does not produce correct theming code. The moment an agent touches your design system, it enters a layer MCP does not control. That is where things break.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Left to their own devices, agents routinely:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Invent CSS variable names that do not exist in the design system<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>Hardcode hex values directly into components, bypassing token inheritance<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>Generate framework selectors wrong across Angular, Web Components, React, and Blazor<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>Change one colour and silently break 50+ components that depend on it<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>These are not prompting failures. They are knowledge failures, and better prompts will not fix them. What fixes them is giving the agent the right tools to call.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The <a href=\"https:\/\/github.com\/IgniteUI\/igniteui-theming\/blob\/master\/src\/mcp\/README.md\" data-type=\"link\" data-id=\"https:\/\/github.com\/IgniteUI\/igniteui-theming\/blob\/master\/src\/mcp\/README.md\" rel=\"noopener\">Ignite UI Theming MCP server<\/a> exposes exactly that: tools for generating palettes, typography, elevations, and component themes all validated against the actual design system, targeting the right platform, producing code that compiles on the first try.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"the-mcp-aligned-pipeline\">The MCP-Aligned Pipeline<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Ignite UI Theming v25 is designed as the execution endpoint of an MCP-driven pipeline.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>When you ask your AI assistant to theme an Ignite UI application, the agent does not generate CSS or Sass from scratch. It calls the Ignite UI Theming MCP server, which knows your design system \u2014 the tokens, the platform, the design system presets \u2014 and returns code that is correct by construction.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">You describe what you want\n  \u2192 IDE (Cursor \/ VS Code \/ Claude Desktop) passes that to the MCP server\n  \u2192 The MCP server generates validated Sass or CSS\n  \u2192 You get production-ready output, not a best guess<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Included in the <a href=\"https:\/\/github.com\/IgniteUI\/igniteui-theming\/blob\/master\/README.md\" rel=\"noopener\">igniteui-theming<\/a> package, the MCP server provides callable tools that agents use instead of producing raw CSS. This approach ensures all AI-generated output stays within a validated, schema-enforced framework.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Supported platforms: Angular, React, Web Components, and Blazor. Supported design systems: Material, Bootstrap, Fluent, and Indigo.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"seeing-it-in-action-an-agent-theming-an-application\">Seeing It in Action: An Agent Theming an Application<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Theming an Ignite UI application follows a structured two-phase workflow: establish the application theme first, then adjust individual components. An agent that skips phase one and targets components directly produces inconsistent results &#8211; component tokens reference palette CSS variables that do not exist yet.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The following demonstrates the complete workflow end to end, using GitHub Copilot, Claude Sonnet 4.5, and the Ignite UI Theming MCP server against a real Angular application.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Phase 1 \u2014 Create the Application Theme<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p><em>&#8220;Create a new light, neon theme for my app.&#8221;<\/em><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The agent calls <code>detect_platform<\/code> first to read <code>package.json<\/code> and determine which Ignite UI package and theming module the project uses. This is a required precondition &#8211; the generated Sass imports differ between the OSS package (<code>igniteui-angular<\/code>) and the licensed package (<code>@infragistics\/igniteui-angular<\/code>).<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"generic\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">detect_platform()<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP RESPONSE<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">Detected Platform: Ignite UI for Angular\nConfidence: high\nDetected Package: @infragistics\/igniteui-angular\nPackage Type: Licensed (@infragistics)\nWhen generating theme code, use platform: 'angular' and licensed: true\nto ensure the correct Sass syntax is generated for this platform.<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>With the platform confirmed, the agent calls <code>create_theme<\/code>. The neon colors chosen \u2014 <code>#00e5ff<\/code> cyan primary, <code>#ff00c8<\/code> magenta secondary \u2014 have high luminance values. The MCP server detects this and returns a structured warning: automatic shade generation will produce washed-out results for shades 600\u2013900. The agent responds by switching to <code>create_custom_palette<\/code> with explicit shade values for the primary and secondary colors.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"json\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\n  platform: \"angular\",\n  licensed: true,\n  designSystem: \"material\",\n  primaryColor: \"#00e5ff\",\n  secondaryColor: \"#ff00c8\",\n  surfaceColor: \"#f8f8ff\",\n  variant: \"light\",\n  fontFamily: \"'Inter', 'Segoe UI', sans-serif\",\n  name: \"neon-light\"\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP RESPONSE<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">\u26a0 PALETTE SUITABILITY WARNINGS\n  primary (#00e5ff): luminance 0.63 \u2014 too light.\n  Darker shades (600\u2013900) will appear washed out.\n  surface (#f8f8ff): luminance 0.94 \u2014 too light.\n  Darker shades (600\u2013900) will appear washed out.\nRecommendation: use create_custom_palette with explicit shade values\nfor these colors to maintain full shade range fidelity.<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p>The MCP server validates input colors against luminance thresholds before generating code. When automatic shade generation would produce suboptimal results, the server returns a structured warning and recommends <code>create_custom_palette<\/code>. The agent acts on this signal rather than proceeding with a suboptimal palette.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The agent calls <code>create_custom_palette<\/code> with 14 explicit shades for both primary and secondary colors. Surface, gray, and semantic colors (info, success, warn, error) use automatic shade generation \u2014 their luminance values are within acceptable range.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"json\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\n  platform: \"angular\", licensed: true,\n  designSystem: \"material\", variant: \"light\",\n  name: \"neon-light\",\n  primary: {\n    mode: \"explicit\",\n    shades: {\n      \"50\":   \"#e0fbff\",  \"100\": \"#b3f5ff\",  \"200\": \"#80eeff\",\n      \"300\":  \"#4de7ff\",  \"400\": \"#26e0ff\",  \"500\": \"#00e5ff\",\n      \"600\":  \"#00c4db\",  \"700\": \"#00a3b8\",  \"800\": \"#008294\",\n      \"900\":  \"#006170\",  \"A100\": \"#b3f5ff\",  \"A200\": \"#80eeff\",\n      \"A400\": \"#26e0ff\",  \"A700\": \"#00d4ef\"\n    }\n  },\n  secondary: {\n    mode: \"explicit\",\n    shades: { \/* 14 magenta shades, #ff00c8 \u2192 #700058 *\/ }\n  },\n  surface: { mode: \"shades\", baseColor: \"#f8f8ff\" }\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP OUTPUT \u2014 written to styles.scss<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ Generated by Ignite UI Theming MCP Server\n@use \"@infragistics\/igniteui-angular\/theming\" as *;\n$neon-light-palette: (\n  'primary': (\n    '500': #00e5ff,  '500-contrast': adaptive-contrast(#00e5ff),\n    '400': #26e0ff,  '600': #00c4db,\n    \/\/ ... all 14 shades with adaptive-contrast values\n  ),\n  'secondary': ( \/* 14 magenta shades *\/ ),\n  'surface':  shades('surface', #f8f8ff, (...)),\n  'gray':     shades('gray', rgb(158, 158, 158), (...), #c8caff),\n  'info':     shades('info',    #1377d5, (...)),\n  'success':  shades('success', #4eb862, (...)),\n  'warn':     shades('warn',    #faa419, (...)),\n  'error':    shades('error',   #ff134a, (...)),\n  '_meta': ('variant': light)\n);\n@include core();\n@include palette($neon-light-palette);\n@include typography(\n  $font-family: \"'Inter', 'Segoe UI', sans-serif\",\n  $type-scale: $material-type-scale\n);\n@include theme(\n  $palette: $neon-light-palette,\n  $schema: $light-material-schema\n);<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p>The <code>palette()<\/code> call generates CSS custom properties (<code>--ig-primary-400<\/code>, <code>--ig-secondary-500<\/code>, etc.) into <code>:root<\/code>. All 50+ Ignite UI components now reference these variables. The agent provided three base colors. The design system derived every shade, contrast value, hover state, focus state, active state, and disabled state for every component automatically.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"id\":3550,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} --><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" class=\"wp-image-3550\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-1024x588.png\" alt=\"Initial state vs the final state, when user is prompting the agent to change the app theme using the Ignite UI MCP\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-1024x588.png 1024w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-300x172.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-768x441.png 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-1536x882.png 1536w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-2048x1176.png 2048w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_create_new_theme-480x276.png 480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<p><!-- \/wp:image --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Phase 2 \u2014 Adjust an Individual Component<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p><em>&#8220;Apply our brand light azure to the contained buttons.&#8221;<\/em><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Light azure maps to the primary-400 shade (<code>#26e0ff<\/code>) established in the palette. The agent queries <code>get_component_design_tokens<\/code> before writing any code to confirm the token structure for the <code>contained-button<\/code> component.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"generic\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">get_component_design_tokens(component: \"contained-button\")<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP RESPONSE<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">Theme Function: contained-button-theme()\nPrimary Token: $background\n  Setting $background derives automatically:\n    $foreground, $hover-background, $hover-foreground,\n    $focus-background, $focus-visible-background,\n    $active-background, $icon-color,\n    $disabled-background, $disabled-foreground,\n    ... and 19 more tokens.\nAvailable tokens: 29 total.<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The agent sets only <code>$background<\/code>. All 28 remaining tokens \u2014 every interactive state \u2014 derive from that single input. The agent references <code>var(--ig-primary-400)<\/code> rather than a hardcoded hex value, so the component stays coupled to the palette. If the palette changes, the button changes with it.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"json\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\n  platform: \"angular\", licensed: true,\n  designSystem: \"material\", variant: \"light\",\n  component: \"contained-button\",\n  tokens: {\n    background: \"var(--ig-primary-400)\"\n  }\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP OUTPUT \u2014 appended to styles.scss<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ Generated by Ignite UI Theming MCP Server\n@use \"@infragistics\/igniteui-angular\/theming\" as *;\n$custom-contained-button-theme: contained-button-theme(\n  $schema: $light-material-schema,\n  $background: var(--ig-primary-400)\n);\n.igx-button--contained {\n  @include tokens($custom-contained-button-theme);\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p>The agent did not set <code>$hover-background<\/code>, <code>$focus-background<\/code>, <code>$active-background<\/code>, <code>$foreground<\/code>, or any of the 28 remaining tokens. The Ignite UI token system derives all of them from <code>$background<\/code> using built-in contrast and opacity rules. This is not a shortcut \u2014 it is the correct way to use the design system.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"compound-components-where-other-systems-break\">Compound Components: Where Other Systems Break<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Some Ignite UI components \u2014 including <code>igx-date-picker<\/code>, <code>igx-combo<\/code>, <code>igx-select<\/code>, and <code>igx-grid<\/code> \u2014 are composed of multiple sub-components, each with its own token surface and DOM boundary. Styling only the root selector produces incomplete results. Sub-components such as the calendar overlay, input group, and action buttons each require independent theme calls with correct scoped selectors.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The following continues the session above. The contained buttons in the application now use brand light azure. The user wants the same colour applied to the flat buttons inside the date picker component.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p><em>&#8220;Apply our brand light azure to the buttons in the date picker component.&#8221;<\/em><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Step 1 \u2014 Query the compound component checklist<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The agent calls <code>get_component_design_tokens<\/code> with <code>component: \"date-picker\"<\/code>. The MCP server returns a component-not-found response and lists available component names. The correct name is <code>date-range-picker<\/code> \u2014 the Ignite UI component that provides the date picker overlay behaviour in Angular.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP (first attempt)<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"generic\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">get_component_design_tokens(component: \"date-picker\")<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP RESPONSE<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">Component \"date-picker\" not found.\nAvailable components (partial list):\n  calendar, card, carousel, checkbox, chip, combo,\n  contained-button, date-range-picker, fab-button,\n  flat-button, grid, input-group, outlined-button ...\nTotal available: 64 components.<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The agent corrects the component name and queries <code>date-range-picker<\/code>. The MCP server returns a compound checklist: the full set of sub-components and scoped selectors required for visual consistency across the date picker overlay.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP (corrected)<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"generic\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">get_component_design_tokens(component: \"date-range-picker\")<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP RESPONSE (compound checklist)<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">date-range-picker is a compound component.\nThe calendar popup renders inside .igx-date-picker (overlay selector).\nRelated themes \u2014 Angular:\n  Theme          Scope     Selector\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  flat-button    overlay   .igx-date-picker\n  input-group    inline    igx-date-range-picker\n  calendar       overlay   .igx-date-picker\nToken derivation note:\n  flat-button $foreground should contrast with\n  calendar $content-background.<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p>The compound checklist makes the DOM architecture explicit without requiring the agent to inspect the browser. The date picker&#8217;s calendar and action buttons render in a CDK overlay scoped to <code>.igx-date-picker<\/code> \u2014 a CSS class on the overlay panel, not the <code>igx-date-range-picker<\/code> element. An agent targeting the wrong selector produces no visible result.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"id\":3552,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} --><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" class=\"wp-image-3552\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-1024x588.png\" alt=\"Initial state vs the final state, when user is prompting the agent to change a component color using the Ignite UI MCP\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-1024x588.png 1024w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-300x172.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-768x441.png 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-1536x882.png 1536w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-2048x1176.png 2048w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_button-1-480x276.png 480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<p><!-- \/wp:image --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Step 2 \u2014 Query flat-button tokens<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The compound checklist identifies <code>flat-button<\/code> as the sub-component for the action buttons (Today, Cancel). The agent queries flat-button tokens to confirm which token is primary. The token structure differs from <code>contained-button<\/code>: for flat buttons, <code>$foreground<\/code> is the primary token \u2014 flat buttons have no opaque background by default.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"generic\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">get_component_design_tokens(component: \"flat-button\")<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP RESPONSE<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"nohighlight\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"nohighlight\">Theme Function: flat-button-theme()\nPrimary Token: $foreground\n  Setting $foreground derives automatically:\n    $hover-background, $hover-foreground,\n    $focus-background, $focus-hover-background,\n    $focus-visible-background, $active-background,\n    $icon-color, $disabled-foreground,\n    ... and 16 more tokens.\nAvailable tokens: 25 total.<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Step 3 \u2014 Generate the scoped flat-button theme<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The agent calls <code>create_component_theme<\/code> with the scoped selector <code>.igx-date-picker<\/code> returned by the compound checklist. The <code>$foreground<\/code> token is set to <code>var(--ig-primary-400)<\/code> \u2014 the same palette reference used for the contained button. The agent does not hardcode a hex value.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>AGENT \u2192 MCP<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"json\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\n  platform: \"angular\", licensed: true,\n  designSystem: \"material\", variant: \"light\",\n  component: \"flat-button\",\n  selector: \".igx-date-picker\",\n  tokens: {\n    foreground: \"var(--ig-primary-400)\"\n  }\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP OUTPUT \u2014 appended to styles.scss<\/strong><\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ Generated by Ignite UI Theming MCP Server\n\/\/ Custom flat-button theme \u2014 scoped to date picker overlay\n@use \"@infragistics\/igniteui-angular\/theming\" as *;\n$custom-flat-button-theme: flat-button-theme(\n  $schema: $light-material-schema,\n  $foreground: var(--ig-primary-400)\n);\n.igx-date-picker {\n  @include tokens($custom-flat-button-theme);\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p>The selector <code>.igx-date-picker<\/code> targets the CDK overlay panel, not the <code>igx-date-range-picker<\/code> component element. This is why compound component lookup is required. The agent did not inspect the DOM, did not guess the selector, and did not risk applying the flat-button style globally. All hover, focus, and active states for the action buttons are derived automatically from <code>var(--ig-primary-400)<\/code>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"id\":3553,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} --><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" class=\"wp-image-3553\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-1024x588.png\" alt=\"Initial state vs the final state, when user is prompting the agent to change a compound component color using the Ignite UI MCP\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-1024x588.png 1024w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-300x172.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-768x441.png 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-1536x882.png 1536w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-2048x1176.png 2048w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/02\/dx_change_color_compound_component-480x276.png 480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<p><!-- \/wp:image --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Three tool calls. One palette variable. Zero hardcoded hex values in component themes. The brand light azure colour is consistent across the contained buttons in the application and the action buttons inside the date picker overlay \u2014 both resolved from <code>--ig-primary-400<\/code>, defined once in the palette.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"whats-new-in-ignite-ui-theming-v25-the-token-architecture-that-makes-this-possible\">What&#8217;s New in Ignite UI Theming v25: The Token Architecture That Makes This Possible<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">1. Unified Tokens Mixin \u2014 Zero-Search DX<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Previously, agents and developers had to hunt for component-specific variable names. In v25, the <code>tokens()<\/code> mixin introduces a universal fallback chain. Set global tokens for a component once at the root of your stylesheet and they cascade automatically:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ SCSS\n@include tokens(avatar-theme($background: red));<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"css\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/\/ CSS OUTPUT\n:root {\n  --ig-avatar-background: red;\n  ...\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>For agents, token resolution is deterministic and discoverable \u2014 no variable scavenger hunts, no hallucinated names.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">2. Scoped Tokens with Intelligent Fallbacks<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The scoped mode of the <code>tokens()<\/code> mixin emits component-level variables with a guaranteed resolution chain:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ SCSS\n@include tokens(avatar-theme($background: red), $mode: 'scoped');<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"css\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/\/ CSS OUTPUT\nigx-avatar {\n  --background: var(--igx-avatar-background,\n    var(--ig-avatar-background, red));\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The fallback chain serves two goals: it preserves backward compatibility for existing tokens and supports consistent styling across all four platforms using the <code>--ig<\/code> global design token prefix. Agents can style components in Ignite UI for Angular, Ignite UI for React, Ignite UI for Web Components, and Ignite UI for Blazor using the same token names.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">3. Global Overrides Flow into Scoped Mode<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Global token overrides propagate automatically into scoped components:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ SCSS\n:root {\n  @include tokens(avatar-theme($background: orange));\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Scoped instances inherit the value without redeclaration. Agents can make context-driven overrides at scale without desynchronizing the broader design system. CSS specificity alone controls which value wins:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"scss\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ SCSS\n.my-red-avatar {\n  @include tokens(avatar-theme($background: red));\n}<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">4. Tailwind Alignment<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>v25 aligns Ignite UI token output with Tailwind&#8217;s variable conventions. Teams using Tailwind as their utility layer can integrate Ignite UI components without bridging token naming conflicts. Agents targeting both systems do not need to maintain separate token mappings.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"mcp-server-available-tools\">MCP Server: Available Tools<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The igniteui-theming MCP server exposes the following callable tools to AI agents:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:table {\"hasFixedLayout\":false} --><\/p>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Tool<\/th>\n<th>What It Does<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>detect_platform<\/code><\/td>\n<td>Auto-detects Angular \/ Web Components \/ React \/ Blazor by reading package.json or other platform-related files.<\/td>\n<\/tr>\n<tr>\n<td><code>create_palette<\/code><\/td>\n<td>Generates a full color palette with automatic shade calculation (50\u2013900).<\/td>\n<\/tr>\n<tr>\n<td><code>create_custom_palette<\/code><\/td>\n<td>Explicit shade control for strict brand guidelines or high-luminance colors.<\/td>\n<\/tr>\n<tr>\n<td><code>create_typography<\/code><\/td>\n<td>Configures font family and type scale per design system.<\/td>\n<\/tr>\n<tr>\n<td><code>create_elevations<\/code><\/td>\n<td>Sets up shadow and elevation definitions.<\/td>\n<\/tr>\n<tr>\n<td><code>create_theme<\/code><\/td>\n<td>Generates a complete, production-ready theme in one call.<\/td>\n<\/tr>\n<tr>\n<td><code>get_component_design_tokens<\/code><\/td>\n<td>Discovers available tokens for any component.<\/td>\n<\/tr>\n<tr>\n<td><code>create_component_theme<\/code><\/td>\n<td>Generates Sass for a specific component using validated tokens.<\/td>\n<\/tr>\n<tr>\n<td><code>set_size<\/code><\/td>\n<td>Sets size scale globally or per component (small \/ medium \/ large).<\/td>\n<\/tr>\n<tr>\n<td><code>set_spacing<\/code><\/td>\n<td>Sets spacing scale with optional inline\/block overrides.<\/td>\n<\/tr>\n<tr>\n<td><code>set_roundness<\/code><\/td>\n<td>Sets border-radius factor globally or per component.<\/td>\n<\/tr>\n<tr>\n<td><code>read_resource<\/code><\/td>\n<td>Returns reference documentation on theming concepts, color relationships, and design system schemas.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p><!-- \/wp:table --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"open-source-built-for-mcp-extensibility\">Open Source \u2014 Built for MCP Extensibility<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>The Ignite UI theming engine is fully open source. This matters for agent workflows because it means:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Token behaviour is auditable \u2014 agents and teams can inspect exactly what any call will produce<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>Custom MCP integrations are possible \u2014 extend or fork the server for your own design system<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>No black-box theming \u2014 what you see in the source is what gets emitted<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><strong>MCP server documentation:<\/strong> github.com\/IgniteUI\/igniteui-theming<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"when-to-choose-ignite-ui-theming-v25\">When to Choose Ignite UI Theming v25<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Ignite UI Theming v25 is the correct choice when:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>You are generating UI through MCP-enabled IDEs (Cursor, VS Code, Claude Desktop)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>You manage large, multi-framework applications across Angular, React, Web Components, or Blazor<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>You require atomic, agent-safe overrides without visual regressions<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>You enforce strict enterprise design systems with auditable behaviour<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- wp:list-item --><\/p>\n<ul class=\"wp-block-list\">\n<li style=\"list-style-type: none;\">\n<ul class=\"wp-block-list\">\n<li>You need cross-framework theming consistency without duplicated token logic<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\">\n<p><!-- wp:paragraph --><\/p>\n<p>Ignite UI Theming Engine v25 is not just a styling upgrade. It is the theming foundation for the MCP generation era, where AI agents build production applications and correctness is non-negotiable.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/blockquote>\n<p><!-- \/wp:quote --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"design-system-control-at-enterprise-scale\">Design System Control at Enterprise Scale<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Build your enterprise portal on Infragistics Ignite UI Theming when consistency matters at scale. Manage 50+ components under a single design system and use Sass-driven theming to keep your entire UI aligned with your global brand. When AI agents generate your UI, the Ignite UI Theming MCP server ensures every component they produce is validated, framework-correct, and design-system-consistent from the first run.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":2} --><\/p>\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"next-steps\">Next Steps<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:table {\"hasFixedLayout\":true} --><\/p>\n<figure class=\"wp-block-table\">\n<table class=\"has-fixed-layout\">\n<thead>\n<tr>\n<th>Resource<\/th>\n<th>Purpose<\/th>\n<th>URL<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Ignite UI Theming MCP \u2014 Setup Guide<\/td>\n<td>Configure the Ignite UI Theming MCP server in VS Code, Cursor, JetBrains, or Claude Desktop<\/td>\n<td><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-theming\/blob\/master\/src\/mcp\/README.md\" target=\"_blank\" rel=\"noreferrer noopener\">github.com\/IgniteUI\/igniteui-theming\/\u2026\/mcp\/README.md<\/a><\/td>\n<\/tr>\n<tr>\n<td>igniteui-theming Repository<\/td>\n<td>Source code, releases, and full tool and resource reference for the Ignite UI Theming MCP<\/td>\n<td><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-theming\" target=\"_blank\" rel=\"noreferrer noopener\">github.com\/IgniteUI\/igniteui-theming<\/a><\/td>\n<\/tr>\n<tr>\n<td>Ignite UI MCP<\/td>\n<td>Component knowledge and usage guidance layer for Ignite UI component libraries<\/td>\n<td>[EDITORIAL: insert Ignite UI MCP public repo URL before publishing]<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p><!-- \/wp:table --><\/p>\n<p><!-- wp:enlighter\/codeblock {\"language\":\"shell\"} --><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\"># Start using Ignite UI Theming MCP immediately (no local install required)\nnpx -y igniteui-theming igniteui-theming-mcp<\/pre>\n<p><!-- \/wp:enlighter\/codeblock --><\/p>","protected":false},"excerpt":{"rendered":"<p>A Deterministic Design Token Architecture for AI-Generated Applications.<br \/>\nBuilt for Model Context Protocol (MCP) Agent Workflows<\/p>\n","protected":false},"author":20,"featured_media":3576,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,12],"tags":[20,38,42],"class_list":["post-3545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-product-updates","tag-ignite-ui","tag-ignite-ui-angular","tag-whats-new"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=3545"}],"version-history":[{"count":9,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3545\/revisions"}],"predecessor-version":[{"id":3642,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3545\/revisions\/3642"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/3576"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}