Repository navigation
fix(mcp): resolve component tag names and add light/dark guidance to component themes - #660
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Dark-scope generation corrupts valid selectors containing nested or quoted commas, and the tool description incorrectly directs agents to use two calls instead of the supported both option.
2 open issues
What changed in this PR
This PR addresses #642 by expanding component-name recognition in the MCP tools and adding support and guidance for generating light and dark component themes.
Changes:
- Adds navigation drawer aliases and resolves platform-specific component names across handlers.
- Adds
variant: "both"to generate light and scoped dark themes in CSS and Sass. - Updates tool guidance and tests for name resolution and dual-variant output.
| File | Description |
|---|---|
packages/mcp/src/utils/types.ts |
Defines the component theme variant type. |
packages/mcp/src/utils/sass.ts |
Adds dark-scope and selector-scoping helpers. |
packages/mcp/src/tools/schemas.ts |
Accepts the "both" variant. |
packages/mcp/src/tools/handlers/layout.ts |
Resolves component names for layout tools. |
packages/mcp/src/tools/handlers/component-tokens.ts |
Resolves names before token lookup. |
packages/mcp/src/tools/handlers/component-theme.ts |
Resolves names and adds light/dark guidance. |
packages/mcp/src/tools/descriptions.ts |
Documents variant options and dark scoping. |
packages/mcp/src/knowledge/index.ts |
Exports the component-name resolver. |
packages/mcp/src/knowledge/component-themes.ts |
Maps platform component names to canonical keys. |
packages/mcp/src/knowledge/component-metadata.ts |
Expands navigation drawer aliases. |
packages/mcp/src/generators/sass.ts |
Generates light and scoped dark Sass themes. |
packages/mcp/src/generators/css.ts |
Generates dual-variant CSS output. |
packages/mcp/src/__tests__/tools/handlers/handlers.test.ts |
Tests variant guidance and dual-theme output. |
packages/mcp/src/__tests__/tools/handlers/component-tokens.test.ts |
Tests navigation drawer name resolution. |
packages/mcp/src/__tests__/knowledge/component-themes.test.ts |
Tests resolver mappings and casing behavior. |
packages/mcp/src/__tests__/contract/tool-output.test.ts |
Adds dual variants to compilation cases. |
Review effort: Balanced
simeonoff
commented
Nov 5, 2026
Contributor
|
All React and Blazor names added in the |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The selector parser counts quoted brackets and parentheses as nesting, leaving some selectors unscoped and allowing dark tokens to apply outside the dark scope.
1 open issue
2 resolved since last review
Review effort: Balanced
simeonoff
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #642.
Igr*) and Blazor (Igb*) component names, which are now listed in the metadata for each component those products ship. Phrases that exactly match a key or selector (e.g.linear progress) now return the component instead of suggestions.create_component_themeexplains how to cover both light and dark: a second call with dark-surface token values, scoped under a dark-mode selector on a root element.