igniteui-theming 25.1.0 → 25.2.0

package/dist/mcp/knowledge/platforms/angular.js

@@ -1,118 +1,99 @@
-import { generatePaletteCode, quoteFontFamily, generateTypographyCode, generateUseStatement } from "../../utils/sass.js";
 import { PALETTE_PRESETS } from "../palettes.js";
-import { PALETTES, TYPEFACES, TYPE_SCALES, SCHEMAS } from "./common.js";
-const ANGULAR_PLATFORM = {
-  id: "angular",
-  name: "Ignite UI for Angular",
-  packageName: "igniteui-angular",
-  /**
-   * The Sass module to import for theming
-   */
-  themingModule: "igniteui-angular/theming",
-  /**
-   * Detection patterns in package.json dependencies
-   */
-  detectionPatterns: ["igniteui-angular", "@infragistics/igniteui-angular"],
-  /**
-   * Required CSS class on root element for typography
-   */
-  rootClass: "ig-typography"
+import { PALETTES, SCHEMAS, TYPEFACES, TYPE_SCALES } from "./common.js";
+import { generatePaletteCode, generateTypographyCode, generateUseStatement, quoteFontFamily } from "../../utils/sass.js";
+//#region src/knowledge/platforms/angular.ts
+/**
+* Ignite UI for Angular Platform Knowledge
+*
+* This module contains platform-specific information for generating
+* valid Sass theme code for Ignite UI for Angular applications.
+*
+* Key differences from igniteui-theming:
+* - Uses `igniteui-angular/theming` module (forwards igniteui-theming with overrides)
+* - Exposes `core()` and `theme()` mixins (Angular-specific, not in igniteui-theming)
+* - Typography is overridden with Angular-specific implementation
+* - Requires `ig-typography` CSS class on root element
+*/
+var ANGULAR_PLATFORM = {
+	id: "angular",
+	name: "Ignite UI for Angular",
+	packageName: "igniteui-angular",
+	themingModule: "igniteui-angular/theming",
+	detectionPatterns: ["igniteui-angular", "@infragistics/igniteui-angular"],
+	rootClass: "ig-typography"
 };
+/**
+* Generate Sass code for an Angular theme
+*
+* Uses shared code generation helpers from utils/sass.ts for:
+* - @use statement (generateUseStatement)
+* - Palette code (generatePaletteCode)
+* - Typography code (generateTypographyCode)
+*/
 function generateAngularThemeSass(template) {
-  const {
-    designSystem,
-    variant,
-    primaryColor,
-    secondaryColor,
-    surfaceColor,
-    grayColor,
-    customPaletteName = "$my-palette",
-    fontFamily,
-    includeTypography = true,
-    coreOptions = {},
-    themeOptions = {}
-  } = template;
-  const lines = [
-    "// Generated by Ignite UI Theming MCP Server",
-    "// Platform: Ignite UI for Angular",
-    "",
-    "// Import the theming module",
-    generateUseStatement("angular"),
-    ""
-  ];
-  const hasCustomColors = primaryColor || secondaryColor || surfaceColor;
-  let paletteVariable;
-  if (hasCustomColors) {
-    const presetName = `${variant}-${designSystem}-palette`;
-    const presetColors = PALETTE_PRESETS[presetName];
-    const effectivePrimary = primaryColor || presetColors.primary;
-    const effectiveSecondary = secondaryColor || presetColors.secondary;
-    const effectiveSurface = surfaceColor || presetColors.surface;
-    const paletteResult = generatePaletteCode({
-      primary: effectivePrimary,
-      secondary: effectiveSecondary,
-      surface: effectiveSurface,
-      gray: grayColor,
-      variableName: customPaletteName.replace(/^\$/, ""),
-      // Remove $ prefix
-      useVariableReferences: true
-    });
-    lines.push("// Custom color palette");
-    lines.push(...paletteResult.colorVariables);
-    lines.push("");
-    lines.push(...paletteResult.paletteDefinition);
-    lines.push("");
-    paletteVariable = paletteResult.variableName;
-  } else {
-    paletteVariable = PALETTES[variant][designSystem];
-  }
-  lines.push("// IMPORTANT: Always include core first!");
-  const coreArgs = [];
-  if (coreOptions.printLayout === false) {
-    coreArgs.push("$print-layout: false");
-  }
-  if (coreOptions.enhancedAccessibility) {
-    coreArgs.push("$enhanced-accessibility: true");
-  }
-  if (coreArgs.length > 0) {
-    lines.push(`@include core(${coreArgs.join(", ")});`);
-  } else {
-    lines.push("@include core();");
-  }
-  if (includeTypography) {
-    const typefaceValue = fontFamily ? quoteFontFamily(fontFamily) : TYPEFACES[designSystem];
-    const typeScale = TYPE_SCALES[designSystem];
-    const typographyLines = generateTypographyCode({
-      fontFamily: typefaceValue,
-      typeScaleVar: typeScale
-    });
-    lines.push(...typographyLines);
-  }
-  const schema = SCHEMAS[variant][designSystem];
-  const themeArgs = [];
-  themeArgs.push(`  $palette: ${paletteVariable}`);
-  themeArgs.push(`  $schema: ${schema}`);
-  if (themeOptions.roundness !== void 0) {
-    themeArgs.push(`  $roundness: ${themeOptions.roundness}`);
-  }
-  if (themeOptions.elevation === false) {
-    themeArgs.push("  $elevation: false");
-  }
-  if (themeOptions.elevations) {
-    themeArgs.push(`  $elevations: ${themeOptions.elevations}`);
-  }
-  if (themeOptions.exclude && themeOptions.exclude.length > 0) {
-    themeArgs.push(`  $exclude: (${themeOptions.exclude.join(", ")})`);
-  }
-  lines.push("");
-  lines.push("// Apply the theme");
-  lines.push("@include theme(");
-  lines.push(themeArgs.join(",\n"));
-  lines.push(");");
-  return lines.join("\n");
+	const { designSystem, variant, primaryColor, secondaryColor, surfaceColor, grayColor, customPaletteName = "$my-palette", fontFamily, includeTypography = true, coreOptions = {}, themeOptions = {} } = template;
+	const lines = [
+		"// Generated by Ignite UI Theming MCP Server",
+		"// Platform: Ignite UI for Angular",
+		"",
+		"// Import the theming module",
+		generateUseStatement("angular"),
+		""
+	];
+	const hasCustomColors = primaryColor || secondaryColor || surfaceColor;
+	let paletteVariable;
+	if (hasCustomColors) {
+		const presetColors = PALETTE_PRESETS[`${variant}-${designSystem}-palette`];
+		const paletteResult = generatePaletteCode({
+			primary: primaryColor || presetColors.primary,
+			secondary: secondaryColor || presetColors.secondary,
+			surface: surfaceColor || presetColors.surface,
+			gray: grayColor,
+			variableName: customPaletteName.replace(/^\$/, ""),
+			useVariableReferences: true
+		});
+		lines.push("// Custom color palette");
+		lines.push(...paletteResult.colorVariables);
+		lines.push("");
+		lines.push(...paletteResult.paletteDefinition);
+		lines.push("");
+		paletteVariable = paletteResult.variableName;
+	} else paletteVariable = PALETTES[variant][designSystem];
+	lines.push("// IMPORTANT: Always include core first!");
+	const coreArgs = [];
+	if (coreOptions.printLayout === false) coreArgs.push("$print-layout: false");
+	if (coreOptions.enhancedAccessibility) coreArgs.push("$enhanced-accessibility: true");
+	if (coreArgs.length > 0) lines.push(`@include core(${coreArgs.join(", ")});`);
+	else lines.push("@include core();");
+	if (includeTypography) {
+		const typefaceValue = fontFamily ? quoteFontFamily(fontFamily) : TYPEFACES[designSystem];
+		const typeScale = TYPE_SCALES[designSystem];
+		const typographyLines = generateTypographyCode({
+			fontFamily: typefaceValue,
+			typeScaleVar: typeScale
+		});
+		lines.push(...typographyLines);
+	}
+	const schema = SCHEMAS[variant][designSystem];
+	const themeArgs = [];
+	themeArgs.push(`  $palette: ${paletteVariable}`);
+	themeArgs.push(`  $schema: ${schema}`);
+	if (themeOptions.roundness !== void 0) themeArgs.push(`  $roundness: ${themeOptions.roundness}`);
+	if (themeOptions.elevation === false) themeArgs.push("  $elevation: false");
+	if (themeOptions.elevations) themeArgs.push(`  $elevations: ${themeOptions.elevations}`);
+	if (themeOptions.exclude && themeOptions.exclude.length > 0) themeArgs.push(`  $exclude: (${themeOptions.exclude.join(", ")})`);
+	lines.push("");
+	lines.push("// Apply the theme");
+	lines.push("@include theme(");
+	lines.push(themeArgs.join(",\n"));
+	lines.push(");");
+	return lines.join("\n");
 }
-const ANGULAR_USAGE_EXAMPLES = {
-  basic: `
+/**
+* Example usage documentation
+*/
+var ANGULAR_USAGE_EXAMPLES = {
+	basic: `
 // Basic Material Light Theme
 @use "igniteui-angular/theming" as *;
 
@@ -126,7 +107,7 @@ const ANGULAR_USAGE_EXAMPLES = {
   $schema: $light-material-schema
 );
 `,
-  customPalette: `
+	customPalette: `
 // Custom Palette Theme
 @use "igniteui-angular/theming" as *;
 
@@ -146,7 +127,7 @@ $my-palette: palette(
   $schema: $light-material-schema
 );
 `,
-  darkTheme: `
+	darkTheme: `
 // Dark Indigo Theme
 @use "igniteui-angular/theming" as *;
 
@@ -160,7 +141,7 @@ $my-palette: palette(
   $schema: $dark-indigo-schema
 );
 `,
-  excludeComponents: `
+	excludeComponents: `
 // Theme with excluded components
 @use "igniteui-angular/theming" as *;
 
@@ -177,7 +158,7 @@ $excluded-components: (igx-avatar, igx-badge);
   $exclude: $excluded-components
 );
 `,
-  enhancedAccessibility: `
+	enhancedAccessibility: `
 // Theme with enhanced accessibility
 @use "igniteui-angular/theming" as *;
 
@@ -192,8 +173,5 @@ $excluded-components: (igx-avatar, igx-badge);
 );
 `
 };
-export {
-  ANGULAR_PLATFORM,
-  ANGULAR_USAGE_EXAMPLES,
-  generateAngularThemeSass
-};
+//#endregion
+export { ANGULAR_PLATFORM, ANGULAR_USAGE_EXAMPLES, generateAngularThemeSass };

package/dist/mcp/knowledge/platforms/blazor.js

@@ -1,30 +1,32 @@
-const BLAZOR_PLATFORM = {
-  id: "blazor",
-  name: "Ignite UI for Blazor",
-  packageName: "IgniteUI.Blazor",
-  /**
-   * The Sass module to import for theming
-   * Note: Blazor projects need to install igniteui-theming via npm
-   * even though the main package is NuGet-based
-   */
-  themingModule: "igniteui-theming",
-  /**
-   * Detection patterns - Blazor uses NuGet packages, not npm
-   * Detection is done via .csproj file analysis
-   */
-  detectionPatterns: ["IgniteUI.Blazor"],
-  /**
-   * Config files that indicate a Blazor project
-   * .csproj files with IgniteUI.Blazor package reference
-   */
-  configFiles: [".csproj"],
-  /**
-   * No required root class (themes apply via CSS variables on :root)
-   */
-  rootClass: null
+//#region src/knowledge/platforms/blazor.ts
+/**
+* Ignite UI for Blazor Platform Knowledge
+*
+* This module contains platform-specific information for generating
+* valid Sass theme code for Ignite UI for Blazor applications.
+*
+* Key characteristics:
+* - .NET/C# project using Blazor framework (Server or WebAssembly)
+* - Uses NuGet package `IgniteUI.Blazor` (not npm)
+* - Uses `igniteui-theming` npm package for Sass compilation
+* - Sass files are compiled to CSS and referenced in Blazor components
+* - Components use CSS variables for theming (--ig-* naming convention)
+* - Theming approach is similar to Web Components/React
+*/
+var BLAZOR_PLATFORM = {
+	id: "blazor",
+	name: "Ignite UI for Blazor",
+	packageName: "IgniteUI.Blazor",
+	themingModule: "igniteui-theming",
+	detectionPatterns: ["IgniteUI.Blazor"],
+	configFiles: [".csproj"],
+	rootClass: null
 };
-const BLAZOR_USAGE_EXAMPLES = {
-  basic: `
+/**
+* Example usage documentation for Blazor
+*/
+var BLAZOR_USAGE_EXAMPLES = {
+	basic: `
 // Basic Material Light Theme for Blazor
 // In your wwwroot/css/theme.scss file:
 
@@ -50,7 +52,7 @@ const BLAZOR_USAGE_EXAMPLES = {
 );
 @include spacing();
 `,
-  projectSetup: `
+	projectSetup: `
 // Blazor project setup for custom theming:
 
 // 1. Install NuGet package in your .csproj:
@@ -72,7 +74,7 @@ npm install igniteui-theming sass
 // 5. Reference compiled CSS in _Host.cshtml or index.html:
 <link href="css/theme.css" rel="stylesheet" />
 `,
-  csprojExample: `
+	csprojExample: `
 <!-- Example .csproj with IgniteUI.Blazor -->
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
   <PropertyGroup>
@@ -83,7 +85,7 @@ npm install igniteui-theming sass
   </ItemGroup>
 </Project>
 `,
-  customPalette: `
+	customPalette: `
 // Custom Palette Theme
 @use 'igniteui-theming' as *;
 @use 'igniteui-theming/sass/typography/presets/material' as *;
@@ -111,7 +113,7 @@ $my-palette: palette(
 );
 @include spacing();
 `,
-  darkTheme: `
+	darkTheme: `
 // Dark Indigo Theme for Blazor
 @use 'igniteui-theming' as *;
 @use 'igniteui-theming/sass/color/presets/dark/indigo' as *;
@@ -135,7 +137,10 @@ $my-palette: palette(
 @include spacing();
 `
 };
-export {
-  BLAZOR_PLATFORM,
-  BLAZOR_USAGE_EXAMPLES
-};
+/**
+* Note: Blazor uses the same Sass code generation as Web Components/React.
+* The generateWebComponentsThemeSass function from webcomponents.ts can be reused for Blazor.
+* The main difference is in the build pipeline (npm + sass CLI vs Angular CLI).
+*/
+//#endregion
+export { BLAZOR_PLATFORM, BLAZOR_USAGE_EXAMPLES };

package/dist/mcp/knowledge/platforms/common.js

@@ -1,75 +1,90 @@
-const PALETTE_PRESETS_PATHS = {
-  light: {
-    material: "igniteui-theming/sass/color/presets/light/material",
-    fluent: "igniteui-theming/sass/color/presets/light/fluent",
-    bootstrap: "igniteui-theming/sass/color/presets/light/bootstrap",
-    indigo: "igniteui-theming/sass/color/presets/light/indigo"
-  },
-  dark: {
-    material: "igniteui-theming/sass/color/presets/dark/material",
-    fluent: "igniteui-theming/sass/color/presets/dark/fluent",
-    bootstrap: "igniteui-theming/sass/color/presets/dark/bootstrap",
-    indigo: "igniteui-theming/sass/color/presets/dark/indigo"
-  }
+//#region src/knowledge/platforms/common.ts
+/**
+* Available palettes preset paths
+*/
+var PALETTE_PRESETS_PATHS = {
+	light: {
+		material: "igniteui-theming/sass/color/presets/light/material",
+		fluent: "igniteui-theming/sass/color/presets/light/fluent",
+		bootstrap: "igniteui-theming/sass/color/presets/light/bootstrap",
+		indigo: "igniteui-theming/sass/color/presets/light/indigo"
+	},
+	dark: {
+		material: "igniteui-theming/sass/color/presets/dark/material",
+		fluent: "igniteui-theming/sass/color/presets/dark/fluent",
+		bootstrap: "igniteui-theming/sass/color/presets/dark/bootstrap",
+		indigo: "igniteui-theming/sass/color/presets/dark/indigo"
+	}
 };
-const TYPOGRAPHY_PRESETS_PATHS = {
-  material: "igniteui-theming/sass/typography/presets/material",
-  fluent: "igniteui-theming/sass/typography/presets/fluent",
-  bootstrap: "igniteui-theming/sass/typography/presets/bootstrap",
-  indigo: "igniteui-theming/sass/typography/presets/indigo"
+/**
+* Available typography preset paths
+*/
+var TYPOGRAPHY_PRESETS_PATHS = {
+	material: "igniteui-theming/sass/typography/presets/material",
+	fluent: "igniteui-theming/sass/typography/presets/fluent",
+	bootstrap: "igniteui-theming/sass/typography/presets/bootstrap",
+	indigo: "igniteui-theming/sass/typography/presets/indigo"
 };
-const SCHEMAS = {
-  light: {
-    material: "$light-material-schema",
-    fluent: "$light-fluent-schema",
-    bootstrap: "$light-bootstrap-schema",
-    indigo: "$light-indigo-schema"
-  },
-  dark: {
-    material: "$dark-material-schema",
-    fluent: "$dark-fluent-schema",
-    bootstrap: "$dark-bootstrap-schema",
-    indigo: "$dark-indigo-schema"
-  }
+/**
+* Available schema presets
+*/
+var SCHEMAS = {
+	light: {
+		material: "$light-material-schema",
+		fluent: "$light-fluent-schema",
+		bootstrap: "$light-bootstrap-schema",
+		indigo: "$light-indigo-schema"
+	},
+	dark: {
+		material: "$dark-material-schema",
+		fluent: "$dark-fluent-schema",
+		bootstrap: "$dark-bootstrap-schema",
+		indigo: "$dark-indigo-schema"
+	}
 };
-const PALETTES = {
-  light: {
-    material: "$light-material-palette",
-    fluent: "$light-fluent-palette",
-    bootstrap: "$light-bootstrap-palette",
-    indigo: "$light-indigo-palette"
-  },
-  dark: {
-    material: "$dark-material-palette",
-    fluent: "$dark-fluent-palette",
-    bootstrap: "$dark-bootstrap-palette",
-    indigo: "$dark-indigo-palette"
-  }
+/**
+* Available palettes presets
+*/
+var PALETTES = {
+	light: {
+		material: "$light-material-palette",
+		fluent: "$light-fluent-palette",
+		bootstrap: "$light-bootstrap-palette",
+		indigo: "$light-indigo-palette"
+	},
+	dark: {
+		material: "$dark-material-palette",
+		fluent: "$dark-fluent-palette",
+		bootstrap: "$dark-bootstrap-palette",
+		indigo: "$dark-indigo-palette"
+	}
 };
-const TYPEFACES = {
-  material: "$material-typeface",
-  fluent: "$fluent-typeface",
-  bootstrap: "$bootstrap-typeface",
-  indigo: "$indigo-typeface"
+/**
+* Available typefaces
+*/
+var TYPEFACES = {
+	material: "$material-typeface",
+	fluent: "$fluent-typeface",
+	bootstrap: "$bootstrap-typeface",
+	indigo: "$indigo-typeface"
 };
-const TYPE_SCALES = {
-  material: "$material-type-scale",
-  fluent: "$fluent-type-scale",
-  bootstrap: "$bootstrap-type-scale",
-  indigo: "$indigo-type-scale"
+/**
+* Available type scales
+*/
+var TYPE_SCALES = {
+	material: "$material-type-scale",
+	fluent: "$fluent-type-scale",
+	bootstrap: "$bootstrap-type-scale",
+	indigo: "$indigo-type-scale"
 };
-const ELEVATIONS = {
-  material: "$material-elevations",
-  bootstrap: "$material-elevations",
-  fluent: "$material-elevations",
-  indigo: "$indigo-elevations"
-};
-export {
-  ELEVATIONS,
-  PALETTES,
-  PALETTE_PRESETS_PATHS,
-  SCHEMAS,
-  TYPEFACES,
-  TYPE_SCALES,
-  TYPOGRAPHY_PRESETS_PATHS
+/**
+* Available elevation presets
+*/
+var ELEVATIONS = {
+	material: "$material-elevations",
+	bootstrap: "$material-elevations",
+	fluent: "$material-elevations",
+	indigo: "$indigo-elevations"
 };
+//#endregion
+export { ELEVATIONS, PALETTES, PALETTE_PRESETS_PATHS, SCHEMAS, TYPEFACES, TYPE_SCALES, TYPOGRAPHY_PRESETS_PATHS };