igniteui-theming 25.0.0 → 25.0.2

package/README.md

@@ -152,7 +152,7 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
 
 ```json
 {
-  "mcp.servers": {
+  "servers": {
     "igniteui-theming": {
       "command": "node",
       "args": ["/absolute/path/to/igniteui-theming/dist/mcp/index.js"]
@@ -165,7 +165,7 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
 
 ```json
 {
-  "mcp.servers": {
+  "servers": {
     "igniteui-theming": {
       "command": "npx",
       "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]

package/dist/mcp/generators/css.js

@@ -78,12 +78,7 @@ function formatCssOutput(css, description) {
   return header + css;
 }
 async function generateComponentThemeCss(options) {
-  const {
-    getComponentTheme,
-    getComponentSelector,
-    getVariablePrefix,
-    SCHEMA_PRESETS
-  } = await import("../knowledge/index.js");
+  const { getComponentTheme, getComponentSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
   const { toVariableName } = await import("../utils/sass.js");
   const theme = getComponentTheme(options.component);
   if (!theme) {
@@ -104,8 +99,6 @@ async function generateComponentThemeCss(options) {
     options.platform
   );
   const selector = options.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : options.component);
-  const prefix = getVariablePrefix(options.platform);
-  `${prefix}-${options.component}`;
   const sassCode = `
 @use 'sass/themes' as *;
 @use 'sass/themes/schemas' as *;

package/dist/mcp/generators/sass.d.ts

@@ -1,6 +1,6 @@
 import { CreateElevationsInput, CreatePaletteInput, CreateThemeInput, CreateTypographyInput, DesignSystem, GeneratedCode, Platform, ThemeVariant } from '../utils/types.js';
 export type { ElevationsCodeOptions, PaletteCodeOptions, PaletteCodeResult, TypographyCodeOptions, } from '../utils/sass.js';
-export { generateElevationsCode, generateHeader, generatePaletteCode, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
+export { generateElevationsCode, generateHeader, generatePaletteCode, generatePresetImports, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
 /**
  * Generate a palette definition.
  */

package/dist/mcp/generators/sass.js

@@ -4,7 +4,7 @@ import { generateAngularThemeSass } from "../knowledge/platforms/angular.js";
 import { SCHEMAS } from "../knowledge/platforms/common.js";
 import { generateWebComponentsThemeSass } from "../knowledge/platforms/webcomponents.js";
 import { TYPOGRAPHY_PRESETS } from "../knowledge/typography.js";
-import { toVariableName, generateHeader, generateUseStatement, quoteFontFamily } from "../utils/sass.js";
+import { generateUseStatement, toVariableName, generatePresetImports, generateHeader, quoteFontFamily } from "../utils/sass.js";
 import { generateElevationsCode, generatePaletteCode, generateTypographyCode } from "../utils/sass.js";
 function generatePalette(input) {
   const variant = input.variant ?? "light";
@@ -42,8 +42,16 @@ function generateTypography(input) {
   const typeScaleVar = `$${designSystem}-type-scale`;
   const preset = TYPOGRAPHY_PRESETS[designSystem];
   const typeface = input.fontFamily || preset.typeface;
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeTypography: true
+  });
+  const imports = [
+    generateUseStatement(input.platform, input.licensed),
+    ...presetImports
+  ].join("\n");
   const code = `${generateHeader(`Typography setup using ${designSystem} type scale`)}
-${generateUseStatement(input.platform, input.licensed)}
+${imports}
 
 // Typography setup with ${designSystem} type scale
 @include typography(
@@ -60,8 +68,16 @@ ${generateUseStatement(input.platform, input.licensed)}
 function generateElevations(input) {
   const preset = input.designSystem ?? "material";
   const elevationsVar = `$${preset}-elevations`;
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeElevations: true
+  });
+  const imports = [
+    generateUseStatement(input.platform, input.licensed),
+    ...presetImports
+  ].join("\n");
   const code = `${generateHeader(`Elevations setup using ${preset} preset`)}
-${generateUseStatement(input.platform, input.licensed)}
+${imports}
 
 // Elevations setup with ${preset} shadows
 @include elevations(${elevationsVar});
@@ -165,12 +181,18 @@ function generateGenericTheme(input, designSystem, variant) {
   } else {
     paletteArgs.push(`$surface: ${variant === "dark" ? "#222222" : "white"}`);
   }
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeTypography,
+    includeElevations
+  });
   const sections = [
     generateHeader(
       `Complete ${variant} theme based on ${designSystem} design system`
     ),
     '// NOTE: Specify platform ("angular" or "webcomponents") for optimized output',
     generateUseStatement(input.platform, input.licensed),
+    ...presetImports,
     "",
     `// ${themeName} palette`,
     `${paletteVar}: palette(`,
@@ -263,6 +285,7 @@ export {
   generateHeader,
   generatePalette,
   generatePaletteCode,
+  generatePresetImports,
   generateTheme,
   generateTypography,
   generateTypographyCode,

package/dist/mcp/index.js

@@ -21,7 +21,7 @@ import { SHADE_LEVELS, ACCENT_SHADE_LEVELS, PALETTE_COLOR_GROUPS } from "./utils
 function createServer() {
   const server = new McpServer({
     name: "igniteui-theming",
-    version: "v25.0.0",
+    version: "v25.0.2",
     description: "Generate Sass theming code for Ignite UI components - create palettes, typography, elevations, and complete themes"
   });
   registerTools(server);
@@ -276,7 +276,7 @@ function buildReadResourceDescription() {
   const groups = {
     Platforms: [],
     Presets: [],
-    "Color Guidance": [],
+    Guidance: [],
     "Layout Docs": []
   };
   for (const r of RESOURCE_DEFINITIONS) {
@@ -285,7 +285,7 @@ function buildReadResourceDescription() {
     } else if (r.uri.includes("://presets/")) {
       groups.Presets.push(r);
     } else if (r.uri.includes("://guidance/")) {
-      groups["Color Guidance"].push(r);
+      groups.Guidance.push(r);
     } else if (r.uri.includes("://docs/")) {
       groups["Layout Docs"].push(r);
     }