refactor: MCP server to address issues and updates to UI Frameworks by simeonoff · Pull Request #563 · IgniteUI/igniteui-theming

simeonoff · 2026-04-01T15:00:53Z

Closes #534
Closes #538
Closes #539
Closes #540
Closes #545

# BREAKING: These component metadata fields are no longer needed as Ignite UI for Angular now renders all floating elements in compound components under the host root using the Popover API. Themes can now be scoped under the parent selector alone.

Closes #534

…ypo recovery Replace naive substring matching in searchComponents with a ranked, token-based search engine that handles order-independent queries (e.g. "linear progress" → progress-linear), framework prefix normalization (igx-/igc-), explicit synonym aliases (toggle → switch), and single-character typo recovery via bounded Levenshtein distance. - Extract search logic into reusable component-search.ts module - Add optional aliases field to ComponentMetadata for true synonyms - Seed aliases for ~15 components (dialog, navdrawer, progress-*, etc.) - Add dedicated unit tests for the search engine in isolation Closes #538

@use

…ports LLM agents sometimes place @use rules mid-file when combining Sass outputs from multiple tool calls, breaking compilation. Add three layers of guidance to prevent this: - Inline comment above @use lines in all generated Sass output - Assembly note after each Sass code block in handler response text - SASS FILE PLACEMENT section in all Sass-generating tool descriptions Centralise guidance text in utils/sass.ts (constants) and descriptions.ts (FRAGMENTS.SASS_FILE_PLACEMENT) for single-source maintenance. Closes #539

…-compound-flag)

…ier hierarchy - Introduce primary tokens (actionable) vs. refinement tokens (reference) for composed components - Primary tokens shown prominently with 'use only these' instruction - Refinement tokens rendered as compact name list with 'reference only' guidance - Update get_component_design_tokens handler to support two-tier format for composed components - Add warning to create_component_theme when non-primary tokens used on composed components - Update tool descriptions with composed vs. standard compound guidance - Update test expectations for new unified output format - Archive completed OpenSpec change for improved composed theme guidance - Remove obsolete .opencode directory

simeonoff · 2026-04-04T04:36:47Z

@didimmova I hope you will have time to test this next week. I'll be able to release a version as soon as you're done. This PR is related to both the overlay changes in Angular as well as the grid theming simplification you're introducing.

didimmova · 2026-04-06T08:38:48Z

After following the issues description, I've created an external angular project that uses the igniteui-angular and the final result was:

Regarding #534: it has successfully created a list-theme when I asked it to create a custom theme for the list-items. The only problem was that it used the css-vars mixin, not the tokens one and this issue continued appearing in the following prompts when creating a custom theme.

Regarding #538: it successfully recognised what I'm asking for, when I promted to create a custom theme for the linear-progress.

Regarding #539: along all the requests, it didn't happen to me to place the @use rule nowhere else, except for the top of the file.

Regarding #540: There were several issues regarding the mixin it used to include the themes, at first it tried including the themes like so:

:host {
  display: flex;
  justify-content: center;
  padding: 48px 24px;

  igx-date-picker {
    @include input-group($earthy-input-theme);
    max-width: 320px;
    width: 100%;
  }
}

// Calendar overlay is rendered outside the host
igx-calendar-container {
  @include calendar($earthy-calendar-theme);
}

after which I asked why did it use the component theme mixins, after which it switched to the css-vars mixin, not to the tokens one.

I tried creating a date-range-picker theme as well and it returned this:

// Scoped to this component — ViewEncapsulation.None ensures styles reach
// child component views and the overlay calendar portal
app-date-range-picker {
  display: flex;
  justify-content: center;
  padding: 48px 24px;

  igx-date-range-picker {
    @include css-vars($sunset-input-theme);
    max-width: 560px;
    width: 100%;
  }
}

igx-date-range-picker ~ igx-calendar-container,
app-date-range-picker igx-calendar-container {
  @include css-vars($sunset-calendar-theme);
}

The calendar theme was not applying at all like so, after I told him that it's not, it switched to:

// Scoped to this component — ViewEncapsulation.None ensures styles reach
// child component views and the overlay calendar portal
app-date-range-picker {
  display: flex;
  justify-content: center;
  padding: 48px 24px;

  igx-date-range-picker {
    @include css-vars($sunset-input-theme);
    max-width: 560px;
    width: 100%;
  }
}

igx-calendar-container {
  @include css-vars($sunset-calendar-theme);
}

After which I asked him to move the theme in the styles.scss file and it went like:  

app-date-range-picker {
  igx-date-range-picker {
    @include css-vars($sunset-input-theme);
  }
}

igx-calendar-container {
  @include css-vars($sunset-calendar-theme);
}

after which I asked him why he’s not using the tokens mixin and it switched to tokens(.., $mode: 'scoped') and it didn’t need to set the mode as scoped.

Regarding #545: It has successfully created tokens for the grid-toolbar-theme

All of the tested prompts above were in an external angular project, using the agent to create the components as well as custom themes for them, which led to setting the custom themes in the component.scss files initially

I also tried creating a grid-theme in the angular dev demos in the branch with the grid theme builder changes and it did not create a grid-theme with just the $background, $foreground and $accent-color properties

simeonoff · 2026-04-14T06:10:31Z

After following the issues description, I've created an external angular project that uses the igniteui-angular and the final result was:

Regarding #534: it has successfully created a list-theme when I asked it to create a custom theme for the list-items. The only problem was that it used the css-vars mixin, not the tokens one and this issue continued appearing in the following prompts when creating a custom theme.

Regarding #538: it successfully recognised what I'm asking for, when I promted to create a custom theme for the linear-progress.

Regarding #539: along all the requests, it didn't happen to me to place the @use rule nowhere else, except for the top of the file.

Regarding #540: There were several issues regarding the mixin it used to include the themes, at first it tried including the themes like so:
:host {
  display: flex;
  justify-content: center;
  padding: 48px 24px;

  igx-date-picker {
    @include input-group($earthy-input-theme);
    max-width: 320px;
    width: 100%;
  }
}

// Calendar overlay is rendered outside the host
igx-calendar-container {
  @include calendar($earthy-calendar-theme);
}
after which I asked why did it use the component theme mixins, after which it switched to the css-vars mixin, not to the tokens one.

I tried creating a date-range-picker theme as well and it returned this:
// Scoped to this component — ViewEncapsulation.None ensures styles reach
// child component views and the overlay calendar portal
app-date-range-picker {
  display: flex;
  justify-content: center;
  padding: 48px 24px;

  igx-date-range-picker {
    @include css-vars($sunset-input-theme);
    max-width: 560px;
    width: 100%;
  }
}

igx-date-range-picker ~ igx-calendar-container,
app-date-range-picker igx-calendar-container {
  @include css-vars($sunset-calendar-theme);
}
The calendar theme was not applying at all like so, after I told him that it's not, it switched to:
// Scoped to this component — ViewEncapsulation.None ensures styles reach
// child component views and the overlay calendar portal
app-date-range-picker {
  display: flex;
  justify-content: center;
  padding: 48px 24px;

  igx-date-range-picker {
    @include css-vars($sunset-input-theme);
    max-width: 560px;
    width: 100%;
  }
}

igx-calendar-container {
  @include css-vars($sunset-calendar-theme);
}
After which I asked him to move the theme in the styles.scss file and it went like:  
app-date-range-picker {
  igx-date-range-picker {
    @include css-vars($sunset-input-theme);
  }
}

igx-calendar-container {
  @include css-vars($sunset-calendar-theme);
}
after which I asked him why he’s not using the tokens mixin and it switched to tokens(.., $mode: 'scoped') and it didn’t need to set the mode as scoped.

Regarding #545: It has successfully created tokens for the grid-toolbar-theme

All of the tested prompts above were in an external angular project, using the agent to create the components as well as custom themes for them, which led to setting the custom themes in the component.scss files initially

I also tried creating a grid-theme in the angular dev demos in the branch with the grid theme builder changes and it did not create a grid-theme with just the $background, $foreground and $accent-color properties

I think these tests should also include the model, the thinking level, the provider and if any quantization is used.

didimmova · 2026-04-14T06:21:18Z

@simeonoff, I used Claude Sonnet 1.6 via Copilot in VS Code with default settings

simeonoff added 3 commits April 1, 2026 12:49

fix(mcp): models sometimes can't resolve children of main components

599c8b4

Closes #534

spec: update and archive completed items

84a301c

simeonoff changed the title ~~Simeonoff/mcp updates~~ refactor: MCP server to address issues and updates to UI Frameworks Apr 1, 2026

simeonoff mentioned this pull request Apr 1, 2026

Detect child components and guide to parent themes #535

Closed

simeonoff added 5 commits April 2, 2026 08:32

chore: initialize taskplane tasks

14b4793

chore: stage task files for orchestrator wave 1 (IGT-002-mcp-composed…

d543fde

…-compound-flag)

simeonoff added ❌ status: awaiting-test PRs awaiting manual verification breaking-change mcp-server labels Apr 3, 2026

simeonoff requested a review from didimmova April 3, 2026 19:58

simeonoff added the version: 26.0.0 label Apr 3, 2026

chore: remove taskplane-tasks test files

cef05d0

simeonoff marked this pull request as ready for review April 4, 2026 04:35

Merge branch 'master' into simeonoff/mcp-updates

d75b72b

didimmova approved these changes Apr 16, 2026

View reviewed changes

simeonoff added this pull request to the merge queue Apr 16, 2026

Merged via the queue into master with commit 2366747 Apr 16, 2026
4 checks passed

simeonoff deleted the simeonoff/mcp-updates branch April 16, 2026 08:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: MCP server to address issues and updates to UI Frameworks#563

refactor: MCP server to address issues and updates to UI Frameworks#563
simeonoff merged 10 commits intomasterfrom
simeonoff/mcp-updates

simeonoff commented Apr 1, 2026 •

edited

Loading

Uh oh!

simeonoff commented Apr 4, 2026

Uh oh!

didimmova commented Apr 6, 2026 •

edited

Loading

Uh oh!

simeonoff commented Apr 14, 2026

Uh oh!

didimmova commented Apr 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

simeonoff commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simeonoff commented Apr 4, 2026

Uh oh!

didimmova commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simeonoff commented Apr 14, 2026

Uh oh!

didimmova commented Apr 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

simeonoff commented Apr 1, 2026 •

edited

Loading

didimmova commented Apr 6, 2026 •

edited

Loading