igniteui-theming 25.1.0 → 25.2.0

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

@@ -1,289 +1,278 @@
-import { quoteFontFamily, generatePaletteCode, generateTypographyCode, generateUseStatement, generateElevationsCode } from "../../utils/sass.js";
 import { PALETTE_PRESETS } from "../palettes.js";
-import { PALETTE_PRESETS_PATHS, ELEVATIONS, TYPOGRAPHY_PRESETS_PATHS } from "./common.js";
-const WEBCOMPONENTS_PLATFORM = {
-  id: "webcomponents",
-  name: "Ignite UI for Web Components",
-  packageName: "igniteui-webcomponents",
-  /**
-   * The Sass module to import for theming
-   */
-  themingModule: "igniteui-theming",
-  /**
-   * Detection patterns in package.json dependencies
-   */
-  detectionPatterns: [
-    "igniteui-webcomponents",
-    "@infragistics/igniteui-webcomponents"
-  ],
-  /**
-   * No required root class (themes apply via CSS variables on :root)
-   */
-  rootClass: null
+import { ELEVATIONS, PALETTE_PRESETS_PATHS, TYPOGRAPHY_PRESETS_PATHS } from "./common.js";
+import { generateElevationsCode, generatePaletteCode, generateTypographyCode, generateUseStatement, quoteFontFamily } from "../../utils/sass.js";
+//#region src/knowledge/platforms/webcomponents.ts
+/**
+* Ignite UI for Web Components Platform Knowledge
+*
+* This module contains platform-specific information for generating
+* valid Sass theme code for Ignite UI for Web Components applications.
+*
+* Key differences from Angular:
+* - Uses `igniteui-theming` directly (not forwarded through another module)
+* - No `core()` or `theme()` mixins - uses individual mixins: `palette()`, `typography()`, `elevations()`
+* - Ships precompiled CSS themes, but users can install igniteui-theming for custom Sass themes
+* - Components use ThemingController for runtime theme switching via CSS variables
+* - Generated CSS variables follow --ig-* naming convention
+*/
+var WEBCOMPONENTS_PLATFORM = {
+	id: "webcomponents",
+	name: "Ignite UI for Web Components",
+	packageName: "igniteui-webcomponents",
+	themingModule: "igniteui-theming",
+	detectionPatterns: ["igniteui-webcomponents", "@infragistics/igniteui-webcomponents"],
+	rootClass: null
 };
+/**
+* Generate the file header comment for Web Components themes.
+*/
 function generateWCHeader() {
-  return [
-    "// Generated by Ignite UI Theming MCP Server",
-    "// Platform: Ignite UI for Web Components",
-    ""
-  ];
+	return [
+		"// Generated by Ignite UI Theming MCP Server",
+		"// Platform: Ignite UI for Web Components",
+		""
+	];
 }
+/**
+* Get the elevation preset variable for a design system.
+*/
 function getWCElevationPreset(designSystem) {
-  return ELEVATIONS[designSystem];
+	return ELEVATIONS[designSystem];
 }
+/**
+* Generate import statements for a Web Components theme.
+*/
 function generateWCImports(options) {
-  const {
-    designSystem,
-    variant,
-    hasCustomColors,
-    includeTypography,
-    includeElevations
-  } = options;
-  const lines = [];
-  if (hasCustomColors) {
-    lines.push("// Import the theming module");
-    lines.push(generateUseStatement("webcomponents"));
-    if (includeTypography) {
-      const typographyModule = TYPOGRAPHY_PRESETS_PATHS[designSystem];
-      lines.push(`@use '${typographyModule}' as *;`);
-    }
-    if (includeElevations) {
-      lines.push("@use 'igniteui-theming/sass/elevations/presets' as *;");
-    }
-  } else {
-    const paletteModule = PALETTE_PRESETS_PATHS[variant][designSystem];
-    lines.push("// Import palette preset");
-    lines.push(`@use '${paletteModule}' as *;`);
-    lines.push("");
-    lines.push("// Import base theme configuration");
-    lines.push(generateUseStatement("webcomponents"));
-    if (includeTypography) {
-      const typographyModule = TYPOGRAPHY_PRESETS_PATHS[designSystem];
-      lines.push(`@use '${typographyModule}' as *;`);
-    }
-    if (includeElevations) {
-      lines.push("@use 'igniteui-theming/sass/elevations/presets' as *;");
-    }
-  }
-  return lines;
+	const { designSystem, variant, hasCustomColors, includeTypography, includeElevations } = options;
+	const lines = [];
+	if (hasCustomColors) {
+		lines.push("// Import the theming module");
+		lines.push(generateUseStatement("webcomponents"));
+		if (includeTypography) {
+			const typographyModule = TYPOGRAPHY_PRESETS_PATHS[designSystem];
+			lines.push(`@use '${typographyModule}' as *;`);
+		}
+		if (includeElevations) lines.push("@use 'igniteui-theming/sass/elevations/presets' as *;");
+	} else {
+		const paletteModule = PALETTE_PRESETS_PATHS[variant][designSystem];
+		lines.push("// Import palette preset");
+		lines.push(`@use '${paletteModule}' as *;`);
+		lines.push("");
+		lines.push("// Import base theme configuration");
+		lines.push(generateUseStatement("webcomponents"));
+		if (includeTypography) {
+			const typographyModule = TYPOGRAPHY_PRESETS_PATHS[designSystem];
+			lines.push(`@use '${typographyModule}' as *;`);
+		}
+		if (includeElevations) lines.push("@use 'igniteui-theming/sass/elevations/presets' as *;");
+	}
+	return lines;
 }
+/**
+* Generate CSS @property declarations for progress tracking.
+* These are required by some components.
+*/
 function generateWCProgressProperties(indent = "") {
-  return [
-    `${indent}@property --_progress-integer {`,
-    `${indent}  syntax: '<integer>';`,
-    `${indent}  initial-value: 0;`,
-    `${indent}  inherits: true;`,
-    `${indent}}`,
-    "",
-    `${indent}@property --_progress-fraction {`,
-    `${indent}  syntax: '<integer>';`,
-    `${indent}  initial-value: 0;`,
-    `${indent}  inherits: true;`,
-    `${indent}}`
-  ];
+	return [
+		`${indent}@property --_progress-integer {`,
+		`${indent}  syntax: '<integer>';`,
+		`${indent}  initial-value: 0;`,
+		`${indent}  inherits: true;`,
+		`${indent}}`,
+		"",
+		`${indent}@property --_progress-fraction {`,
+		`${indent}  syntax: '<integer>';`,
+		`${indent}  initial-value: 0;`,
+		`${indent}  inherits: true;`,
+		`${indent}}`
+	];
 }
+/**
+* Generate :root CSS variables for theme configuration.
+*/
 function generateWCRootVariables(options) {
-  const { designSystem, variant, usePaletteMap = false, indent = "" } = options;
-  const lines = [];
-  lines.push(`${indent}:root {`);
-  if (usePaletteMap) {
-    lines.push(
-      `${indent}  --ig-theme: #{map.get($palette, '_meta', 'variant')};`
-    );
-    lines.push(`${indent}  --ig-theme-variant: #{$variant};`);
-  } else {
-    lines.push(`${indent}  --ig-theme: ${designSystem};`);
-    lines.push(`${indent}  --ig-theme-variant: ${variant};`);
-  }
-  lines.push(`${indent}  --ig-size-small: 1;`);
-  lines.push(`${indent}  --ig-size-medium: 2;`);
-  lines.push(`${indent}  --ig-size-large: 3;`);
-  lines.push(`${indent}  --ig-scrollbar-size: #{rem(16px)};`);
-  lines.push(`${indent}}`);
-  return lines;
+	const { designSystem, variant, usePaletteMap = false, indent = "" } = options;
+	const lines = [];
+	lines.push(`${indent}:root {`);
+	if (usePaletteMap) {
+		lines.push(`${indent}  --ig-theme: #{map.get($palette, '_meta', 'variant')};`);
+		lines.push(`${indent}  --ig-theme-variant: #{$variant};`);
+	} else {
+		lines.push(`${indent}  --ig-theme: ${designSystem};`);
+		lines.push(`${indent}  --ig-theme-variant: ${variant};`);
+	}
+	lines.push(`${indent}  --ig-size-small: 1;`);
+	lines.push(`${indent}  --ig-size-medium: 2;`);
+	lines.push(`${indent}  --ig-size-large: 3;`);
+	lines.push(`${indent}  --ig-scrollbar-size: #{rem(16px)};`);
+	lines.push(`${indent}}`);
+	return lines;
 }
+/**
+* Generate RTL direction support.
+*/
 function generateWCRtlSupport(indent = "") {
-  return [
-    `${indent}body[dir='rtl'] {`,
-    `${indent}  --ig-dir: -1;`,
-    `${indent}}`
-  ];
+	return [
+		`${indent}body[dir='rtl'] {`,
+		`${indent}  --ig-dir: -1;`,
+		`${indent}}`
+	];
 }
+/**
+* Generate scrollbar customization using palette colors.
+*/
 function generateWCScrollbarCustomization() {
-  return [
-    "// Scrollbar customization",
-    ":root {",
-    "  --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};",
-    "  --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};",
-    "}"
-  ];
+	return [
+		"// Scrollbar customization",
+		":root {",
+		"  --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};",
+		"  --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};",
+		"}"
+	];
 }
+/**
+* Generate theming mixin calls (palette, elevations, typography, spacing).
+*/
 function generateWCThemingMixins(options) {
-  const {
-    paletteVar,
-    typefaceValue,
-    elevationsVar,
-    includeTypography,
-    includeElevations,
-    includeSpacing,
-    indent = "",
-    addComments = false
-  } = options;
-  const lines = [];
-  if (addComments) lines.push(`${indent}// Apply palette CSS variables`);
-  lines.push(`${indent}@include palette(${paletteVar});`);
-  if (addComments) lines.push("");
-  if (includeElevations) {
-    if (addComments) lines.push(`${indent}// Apply elevation CSS variables`);
-    lines.push(...generateElevationsCode({ elevationsVar, indent }));
-    if (addComments) lines.push("");
-  }
-  if (includeTypography) {
-    if (addComments) lines.push(`${indent}// Apply typography CSS variables`);
-    lines.push(
-      ...generateTypographyCode({
-        fontFamily: typefaceValue,
-        typeScaleVar: "$type-scale",
-        indent
-      })
-    );
-    if (addComments) lines.push("");
-  }
-  if (includeSpacing) {
-    if (addComments) lines.push(`${indent}// Apply spacing CSS variables`);
-    lines.push(`${indent}@include spacing();`);
-  }
-  return lines;
+	const { paletteVar, typefaceValue, elevationsVar, includeTypography, includeElevations, includeSpacing, indent = "", addComments = false } = options;
+	const lines = [];
+	if (addComments) lines.push(`${indent}// Apply palette CSS variables`);
+	lines.push(`${indent}@include palette(${paletteVar});`);
+	if (addComments) lines.push("");
+	if (includeElevations) {
+		if (addComments) lines.push(`${indent}// Apply elevation CSS variables`);
+		lines.push(...generateElevationsCode({
+			elevationsVar,
+			indent
+		}));
+		if (addComments) lines.push("");
+	}
+	if (includeTypography) {
+		if (addComments) lines.push(`${indent}// Apply typography CSS variables`);
+		lines.push(...generateTypographyCode({
+			fontFamily: typefaceValue,
+			typeScaleVar: "$type-scale",
+			indent
+		}));
+		if (addComments) lines.push("");
+	}
+	if (includeSpacing) {
+		if (addComments) lines.push(`${indent}// Apply spacing CSS variables`);
+		lines.push(`${indent}@include spacing();`);
+	}
+	return lines;
 }
+/**
+* Generate a custom palette theme with a theme() mixin wrapper.
+*/
 function generateCustomPaletteTheme(template, typefaceValue) {
-  const {
-    designSystem,
-    variant,
-    primaryColor,
-    secondaryColor,
-    surfaceColor,
-    grayColor,
-    customPaletteName = "$my-palette",
-    includeTypography = true,
-    includeElevations = true,
-    includeSpacing = true
-  } = template;
-  const lines = [];
-  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(/^\$/, ""),
-    useVariableReferences: true
-  });
-  lines.push("// Custom color palette");
-  lines.push(...paletteResult.colorVariables);
-  lines.push("");
-  lines.push(...paletteResult.paletteDefinition);
-  lines.push("");
-  lines.push("// Theme configuration");
-  lines.push("@mixin theme($palette, $variant) {");
-  lines.push("  // Root-level CSS custom properties");
-  lines.push(...generateWCProgressProperties("  "));
-  lines.push("");
-  lines.push(
-    ...generateWCRootVariables({
-      designSystem,
-      variant,
-      usePaletteMap: true,
-      indent: "  "
-    })
-  );
-  lines.push("");
-  lines.push(...generateWCRtlSupport("  "));
-  lines.push("");
-  lines.push(
-    ...generateWCThemingMixins({
-      paletteVar: "$palette",
-      typefaceValue,
-      elevationsVar: getWCElevationPreset(designSystem),
-      includeTypography,
-      includeElevations,
-      includeSpacing,
-      indent: "  "
-    })
-  );
-  lines.push("}");
-  lines.push("");
-  lines.push("// Apply the theme");
-  lines.push(`@include theme(${paletteResult.variableName}, '${variant}');`);
-  return lines;
+	const { designSystem, variant, primaryColor, secondaryColor, surfaceColor, grayColor, customPaletteName = "$my-palette", includeTypography = true, includeElevations = true, includeSpacing = true } = template;
+	const lines = [];
+	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("");
+	lines.push("// Theme configuration");
+	lines.push("@mixin theme($palette, $variant) {");
+	lines.push("  // Root-level CSS custom properties");
+	lines.push(...generateWCProgressProperties("  "));
+	lines.push("");
+	lines.push(...generateWCRootVariables({
+		designSystem,
+		variant,
+		usePaletteMap: true,
+		indent: "  "
+	}));
+	lines.push("");
+	lines.push(...generateWCRtlSupport("  "));
+	lines.push("");
+	lines.push(...generateWCThemingMixins({
+		paletteVar: "$palette",
+		typefaceValue,
+		elevationsVar: getWCElevationPreset(designSystem),
+		includeTypography,
+		includeElevations,
+		includeSpacing,
+		indent: "  "
+	}));
+	lines.push("}");
+	lines.push("");
+	lines.push("// Apply the theme");
+	lines.push(`@include theme(${paletteResult.variableName}, '${variant}');`);
+	return lines;
 }
+/**
+* Generate a preset palette theme (uses predefined palette from design system).
+*/
 function generatePresetPaletteTheme(template, typefaceValue) {
-  const {
-    designSystem,
-    variant,
-    includeTypography = true,
-    includeElevations = true,
-    includeSpacing = true
-  } = template;
-  const lines = [];
-  lines.push(...generateWCScrollbarCustomization());
-  lines.push("");
-  lines.push(...generateWCProgressProperties());
-  lines.push("");
-  lines.push(...generateWCRootVariables({ designSystem, variant }));
-  lines.push("");
-  lines.push(...generateWCRtlSupport());
-  lines.push("");
-  lines.push(
-    ...generateWCThemingMixins({
-      paletteVar: "$palette",
-      typefaceValue,
-      elevationsVar: getWCElevationPreset(designSystem),
-      includeTypography,
-      includeElevations,
-      includeSpacing,
-      addComments: true
-    })
-  );
-  return lines;
+	const { designSystem, variant, includeTypography = true, includeElevations = true, includeSpacing = true } = template;
+	const lines = [];
+	lines.push(...generateWCScrollbarCustomization());
+	lines.push("");
+	lines.push(...generateWCProgressProperties());
+	lines.push("");
+	lines.push(...generateWCRootVariables({
+		designSystem,
+		variant
+	}));
+	lines.push("");
+	lines.push(...generateWCRtlSupport());
+	lines.push("");
+	lines.push(...generateWCThemingMixins({
+		paletteVar: "$palette",
+		typefaceValue,
+		elevationsVar: getWCElevationPreset(designSystem),
+		includeTypography,
+		includeElevations,
+		includeSpacing,
+		addComments: true
+	}));
+	return lines;
 }
+/**
+* Generate Sass code for a Web Components theme
+*
+* Web Components themes use igniteui-theming directly and call individual
+* mixins (palette, typography, elevations) rather than a unified theme() mixin.
+*
+* This function orchestrates smaller helper functions for:
+* - Header generation (generateWCHeader)
+* - Import statements (generateWCImports)
+* - Custom or preset palette themes
+*/
 function generateWebComponentsThemeSass(template) {
-  const {
-    designSystem,
-    variant,
-    primaryColor,
-    secondaryColor,
-    surfaceColor,
-    fontFamily,
-    includeTypography = true,
-    includeElevations = true
-  } = template;
-  const typefaceValue = fontFamily ? quoteFontFamily(fontFamily) : "$typeface";
-  const hasCustomColors = !!(primaryColor || secondaryColor || surfaceColor);
-  const lines = [];
-  lines.push(...generateWCHeader());
-  lines.push(
-    ...generateWCImports({
-      designSystem,
-      variant,
-      hasCustomColors,
-      includeTypography,
-      includeElevations
-    })
-  );
-  lines.push("");
-  if (hasCustomColors) {
-    lines.push(...generateCustomPaletteTheme(template, typefaceValue));
-  } else {
-    lines.push(...generatePresetPaletteTheme(template, typefaceValue));
-  }
-  return lines.join("\n");
+	const { designSystem, variant, primaryColor, secondaryColor, surfaceColor, fontFamily, includeTypography = true, includeElevations = true } = template;
+	const typefaceValue = fontFamily ? quoteFontFamily(fontFamily) : "$typeface";
+	const hasCustomColors = !!(primaryColor || secondaryColor || surfaceColor);
+	const lines = [];
+	lines.push(...generateWCHeader());
+	lines.push(...generateWCImports({
+		designSystem,
+		variant,
+		hasCustomColors,
+		includeTypography,
+		includeElevations
+	}));
+	lines.push("");
+	if (hasCustomColors) lines.push(...generateCustomPaletteTheme(template, typefaceValue));
+	else lines.push(...generatePresetPaletteTheme(template, typefaceValue));
+	return lines.join("\n");
 }
-const WEBCOMPONENTS_USAGE_EXAMPLES = {
-  basic: `
+/**
+* Example usage documentation
+*/
+var WEBCOMPONENTS_USAGE_EXAMPLES = {
+	basic: `
 // Basic Material Light Theme for Web Components
 @use 'igniteui-theming/sass/color/presets/light/material' as *;
 @use 'igniteui-theming' as *;
@@ -307,7 +296,7 @@ const WEBCOMPONENTS_USAGE_EXAMPLES = {
 );
 @include spacing();
 `,
-  customPalette: `
+	customPalette: `
 // Custom Palette Theme for Web Components
 @use 'igniteui-theming' as *;
 @use 'igniteui-theming/sass/typography/presets/material' as *;
@@ -335,7 +324,7 @@ $my-palette: palette(
 );
 @include spacing();
 `,
-  darkTheme: `
+	darkTheme: `
 // Dark Indigo Theme for Web Components
 @use 'igniteui-theming/sass/color/presets/dark/indigo' as *;
 @use 'igniteui-theming' as *;
@@ -358,7 +347,7 @@ $my-palette: palette(
 );
 @include spacing();
 `,
-  minimalConfig: `
+	minimalConfig: `
 // Minimal theme (palette only, no typography/elevations)
 @use 'igniteui-theming/sass/color/presets/light/bootstrap' as *;
 @use 'igniteui-theming' as *;
@@ -371,11 +360,14 @@ $my-palette: palette(
 @include palette($palette);
 `
 };
-const WEBCOMPONENTS_RUNTIME_CONFIG = {
-  /**
-   * JavaScript API for runtime theme switching
-   */
-  configureThemeAPI: `
+/**
+* Runtime theme configuration for Web Components
+*
+* Web Components support runtime theme switching via the configureTheme() function
+* and CSS variables. This is different from Angular which requires Sass recompilation.
+*/
+var WEBCOMPONENTS_RUNTIME_CONFIG = {
+	configureThemeAPI: `
 import { configureTheme } from 'igniteui-webcomponents';
 
 // Switch to dark material theme at runtime
@@ -384,26 +376,8 @@ configureTheme('material', 'dark');
 // Switch to light indigo theme
 configureTheme('indigo', 'light');
 `,
-  /**
-   * CSS variables that control the theme at runtime
-   */
-  runtimeVariables: ["--ig-theme", "--ig-theme-variant"],
-  /**
-   * Events dispatched during theme changes
-   */
-  themeChangeEvents: ["igc-change-theme", "igc-changed-theme"]
-};
-export {
-  WEBCOMPONENTS_PLATFORM,
-  WEBCOMPONENTS_RUNTIME_CONFIG,
-  WEBCOMPONENTS_USAGE_EXAMPLES,
-  generateWCHeader,
-  generateWCImports,
-  generateWCProgressProperties,
-  generateWCRootVariables,
-  generateWCRtlSupport,
-  generateWCScrollbarCustomization,
-  generateWCThemingMixins,
-  generateWebComponentsThemeSass,
-  getWCElevationPreset
+	runtimeVariables: ["--ig-theme", "--ig-theme-variant"],
+	themeChangeEvents: ["igc-change-theme", "igc-changed-theme"]
 };
+//#endregion
+export { WEBCOMPONENTS_PLATFORM, WEBCOMPONENTS_RUNTIME_CONFIG, WEBCOMPONENTS_USAGE_EXAMPLES, generateWCHeader, generateWCImports, generateWCProgressProperties, generateWCRootVariables, generateWCRtlSupport, generateWCScrollbarCustomization, generateWCThemingMixins, generateWebComponentsThemeSass, getWCElevationPreset };

package/dist/mcp/knowledge/sass-api.js

@@ -0,0 +1 @@
+import "../utils/types.js";

package/dist/mcp/knowledge/typography.js

@@ -1,5 +1,13 @@
-import typescalesData from "../json/typography/presets/typescales.json.js";
-const TYPOGRAPHY_PRESETS = typescalesData;
-export {
-  TYPOGRAPHY_PRESETS
-};
+import typescales_default from "../theming/dist/json/typography/presets/typescales.js";
+//#region src/knowledge/typography.ts
+/**
+* Typography presets for each design system.
+* These are loaded from the JSON files generated by buildJSON.mjs
+* which is the single source of truth from the Sass code.
+*/
+/**
+* Typography presets loaded from JSON.
+*/
+var TYPOGRAPHY_PRESETS = typescales_default;
+//#endregion
+export { TYPOGRAPHY_PRESETS };

package/dist/mcp/resources/index.js

@@ -0,0 +1 @@
+import "./presets.js";