25.0.0

Features

Theming MCP

The Ignite UI Theming MCP server exposes tools for generating palettes, typography, elevations, and component themes – validated against the actual design system, targeting the right platform, producing code that complies on the first try.

Important

The Theming MCP requires Ignite UI Angular 21.1.0+ and Ignite UI for Web Components 7.0.0+ for per-component theming to work as expected.

The MCP server works with any MCP-compatible client. Here are setup instructions for popular clients:

VS Code (with MCP-compatible extensions)

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

WebStorm / JetBrains IDEs

1. Go to Settings → Tools → AI Assistant → MCP Servers
2. Click + Add MCP Server
3. Configure:
   • Name: igniteui-theming
   • Command: node (for local) or npx (for package)
   • Arguments:
     • Local: /absolute/path/to/igniteui-theming/dist/mcp/index.js
     • Package: igniteui-theming igniteui-theming-mcp
4. Click OK and restart AI Assistant

Claude Desktop

Add to your configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Cursor

Create or edit .cursor/mcp.json in your project:

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

Available Tools:

Tool	Description
detect_platform	Auto-detect Ignite UI platform from project dependencies
create_palette	Generate a color palette with auto-generated shades from base colors
create_custom_palette	Generate a palette with fine-grained control over individual shade values
create_typography	Set up typography with custom fonts and type scales
create_elevations	Configure elevation shadows (Material or Indigo presets)
create_theme	Generate a complete theme with palette, typography, and elevations
get_component_design_tokens	Discover available design tokens for a component
create_component_theme	Generate Sass/CSS to customize a component's appearance
set_size	Set global or component-specific sizing via --ig-size
set_spacing	Set global or component-specific spacing via --ig-spacing
set_roundness	Set global or component-specific border radius via --ig-radius-factor
get_color	Retrieve a palette color as a CSS variable reference
read_resource	Read theming resources (presets, guidance, platform docs)

Unified Tokens Mixin

Add unified tokens mixin that generates CSS variable tokens in global or scoped modes, with a universal --ig-* fallback chain and proper rewriting of local token references.

Global mode (default) — emits universal --ig-{component}-{property} tokens. Local var() references are rewritten to their global equivalents so derived values (e.g., adaptive-contrast) resolve correctly at any scope. Sizable expressions are skipped; pass concrete values instead.

// Input:
@include tokens(avatar-theme($background: red));

// Output:
:root {
  --ig-avatar-background: red;
  /* ... remaining avatar properties ... */
}

Scoped mode — emits component-scoped variables (--{property}) with a fallback chain: configured prefix (--igx-*) -> universal (--ig-*) -> schema default. When called from the stylesheet root, the theme's selector is used to create the rule. When called inside a selector, both the current selector and the component selector receive the variables.

// Input (from root):
@include tokens(avatar-theme($background: red), $mode: 'scoped');

// Output:
igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-avatar-background, red));
  /* ... remaining avatar properties ... */
}

// Input (from within a selector):
.my-theme {
  @include tokens(avatar-theme($background: red), $mode: 'scoped');
}

// Output:
.my-theme,
.my-theme igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-avatar-background, red));
  /* ... */
}

Note

In scoped mode, the selector property in the produced theme map is required to determine the component selector for proper variable scoping. If the mixin is called from the stylesheet root, the generated rule will use the theme's internal selector value. If called from within a selector, both that selector and the component selector will receive the variables.

// Global override:
:root {
  @include tokens(avatar-theme($background: orange));
}
// Result: --ig-avatar-background: orange;

// Scoped consumption (no explicit override):
@include tokens(avatar-theme($schema: $schema), $mode: 'scoped');
// Result: --background resolves through var(--igx-avatar-background, var(--ig-avatar-background, #000))
//         and picks up the global orange value from --ig-avatar-background.

Important

Global overrides flow into scoped mode. Because scoped variables fall back to --ig-* tokens, setting a global token at :root will propagate to all scoped instances:

Fixes

• Fix missing meta name by defaulting instead of throwing.
• Normalize and quote font-family names in typography presets/mixin.
• Align Tailwind theme CSS variables with configured prefix.
• Fix component schema metadata gaps (including button schemas).
• Small changes to derived colors when generating component themes

Breaking changes

• Component theme name is now unprefixed. The $name property (previously igx-avatar, igx-grid, etc.) has been removed from component theme functions and replaced by _meta.name in the schema, which stores the bare component name (e.g., avatar, grid). The CSS variable prefix is now resolved at emit-time via configure-variable-prefix instead of being baked into the name.

  Impact: Consuming frameworks that do not use the default igx prefix must call configure-variable-prefix with their desired prefix. For example, Ignite UI for Web Components should configure the prefix as ig:

  @use 'igniteui-theming/sass/themes/config' as config;
  @include config.configure-variable-prefix('ig');

  Without this, scoped token output will default to the igx prefix and variables will not match the framework's expectations.

• Component theme maps use selector instead of name for automatic scoping of the generated CSS variables when the tokens mixin is called outside of a style rule in scoped mode. This is separate from _meta.name which is the bare component identifier.

• Chart theme schemas refactored to include _meta. All chart schemas (category-chart, data-chart, financial-chart, funnel-chart, doughnut-chart, pie-chart, shape-chart, sparkline, gauge, geo-map, graph) now include _meta with name and variant properties. Dark chart schemas now properly extend() their light counterparts with a dark _meta.variant instead of being plain variable aliases. Chart schema map keys have been unquoted (e.g., 'brushes' is now brushes).

Deprecations

• Deprecate css-vars mixin in favor of tokens($theme, $mode: 'scoped').
  Replace:

  @include css-vars($my-grid-theme);

  With:

  @include tokens($my-grid-theme, $mode: 'scoped');

Full Changelog: v24.1.2...v25.0.0