igniteui-theming 25.1.0 → 25.2.0

package/dist/mcp/generators/css.js

@@ -1,23 +1,35 @@
-import * as path from "node:path";
-import { fileURLToPath } from "node:url";
+import { themingImporter } from "../utils/theming-resolve.js";
 import * as sass from "sass-embedded";
-const __filename$1 = fileURLToPath(import.meta.url);
-const __dirname$1 = path.dirname(__filename$1);
-const PACKAGE_ROOT = path.resolve(__dirname$1, "..", "..", "..");
+//#region src/generators/css.ts
+/**
+* Generate CSS custom properties for a standard palette.
+*
+* This function compiles Sass code that uses the palette() function and
+* @include palette() mixin, then returns the compiled CSS output.
+*
+* @example
+* const result = await generatePaletteCss({
+*   primary: '#1976d2',
+*   secondary: '#ff9800',
+*   surface: '#fafafa',
+*   variant: 'light'
+* });
+* // result.css contains :root { --ig-primary-50: ...; --ig-primary-100: ...; ... }
+*/
 async function generatePaletteCss(options) {
-  const variant = options.variant ?? "light";
-  const paletteArgs = [
-    `$primary: ${options.primary}`,
-    `$secondary: ${options.secondary}`,
-    `$surface: ${options.surface}`
-  ];
-  if (options.gray) paletteArgs.push(`$gray: ${options.gray}`);
-  if (options.info) paletteArgs.push(`$info: ${options.info}`);
-  if (options.success) paletteArgs.push(`$success: ${options.success}`);
-  if (options.warn) paletteArgs.push(`$warn: ${options.warn}`);
-  if (options.error) paletteArgs.push(`$error: ${options.error}`);
-  const sassCode = `
-@use 'sass/color' as *;
+	const variant = options.variant ?? "light";
+	const paletteArgs = [
+		`$primary: ${options.primary}`,
+		`$secondary: ${options.secondary}`,
+		`$surface: ${options.surface}`
+	];
+	if (options.gray) paletteArgs.push(`$gray: ${options.gray}`);
+	if (options.info) paletteArgs.push(`$info: ${options.info}`);
+	if (options.success) paletteArgs.push(`$success: ${options.success}`);
+	if (options.warn) paletteArgs.push(`$warn: ${options.warn}`);
+	if (options.error) paletteArgs.push(`$error: ${options.error}`);
+	const sassCode = `
+@use 'igniteui-theming/sass/color' as *;
 
 $palette: palette(
   ${paletteArgs.join(",\n  ")}
@@ -25,83 +37,101 @@ $palette: palette(
 
 @include palette($palette);
 `;
-  try {
-    const loadPaths = options._loadPaths ?? [PACKAGE_ROOT];
-    const result = await sass.compileStringAsync(sassCode, {
-      loadPaths,
-      style: "expanded"
-    });
-    return {
-      css: result.css,
-      description: `Generated CSS custom properties for a ${variant} palette with primary color ${options.primary}`
-    };
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`Failed to compile palette CSS: ${message}`);
-  }
+	try {
+		const importers = options._importers ?? [themingImporter];
+		return {
+			css: (await sass.compileStringAsync(sassCode, {
+				importers,
+				style: "expanded"
+			})).css,
+			description: `Generated CSS custom properties for a ${variant} palette with primary color ${options.primary}`
+		};
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to compile palette CSS: ${message}`);
+	}
 }
+/**
+* Generate CSS custom properties for a custom palette.
+*
+* This function generates Sass code for the custom palette structure
+* (using either shades() function or explicit values), compiles it,
+* and returns the CSS output.
+*/
 async function generateCustomPaletteCss(options) {
-  const variant = options.variant ?? "light";
-  const { generateCustomPaletteCode } = await import("../utils/sass.js");
-  const paletteLines = generateCustomPaletteCode({
-    variant,
-    variableName: "custom",
-    surfaceColor: options.surfaceColor,
-    colors: options.colors
-  });
-  const sassCode = `
-@use 'sass/color' as *;
+	const variant = options.variant ?? "light";
+	const { generateCustomPaletteCode } = await import("../utils/sass.js");
+	const sassCode = `
+@use 'igniteui-theming/sass/color' as *;
 
-${paletteLines.join("\n")}
+${generateCustomPaletteCode({
+		variant,
+		variableName: "custom",
+		surfaceColor: options.surfaceColor,
+		colors: options.colors
+	}).join("\n")}
 
 @include palette($custom-palette);
 `;
-  try {
-    const loadPaths = options._loadPaths ?? [PACKAGE_ROOT];
-    const result = await sass.compileStringAsync(sassCode, {
-      loadPaths,
-      style: "expanded"
-    });
-    return {
-      css: result.css,
-      description: `Generated CSS custom properties for a custom ${variant} palette`
-    };
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`Failed to compile custom palette CSS: ${message}`);
-  }
+	try {
+		const importers = options._importers ?? [themingImporter];
+		return {
+			css: (await sass.compileStringAsync(sassCode, {
+				importers,
+				style: "expanded"
+			})).css,
+			description: `Generated CSS custom properties for a custom ${variant} palette`
+		};
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to compile custom palette CSS: ${message}`);
+	}
 }
+/**
+* Format CSS output for display.
+* Adds a header comment and ensures consistent formatting.
+*/
 function formatCssOutput(css, description) {
-  const header = `/* Generated by Ignite UI Theming MCP Server */
+	return `/* Generated by Ignite UI Theming MCP Server */
 /* ${description} */
-`;
-  return header + css;
+` + css;
 }
+/**
+* Generate CSS custom properties for a component theme.
+*
+* This function compiles Sass code that uses the component theme function
+* and @include tokens() mixin, then returns the compiled CSS output.
+*
+* @example
+* const result = await generateComponentThemeCss({
+*   platform: 'webcomponents',
+*   designSystem: 'bootstrap',
+*   variant: 'light',
+*   component: 'button',
+*   tokens: { background: '#1976d2', 'text-color': 'white' },
+*   selector: 'igc-button'
+* });
+* // result.css contains: igc-button { --ig-button-background: var(--ig-button-background, #1976d2); ... }
+*/
 async function generateComponentThemeCss(options) {
-  const { getComponentTheme, getComponentSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
-  const { toVariableName } = await import("../utils/sass.js");
-  const theme = getComponentTheme(options.component);
-  if (!theme) {
-    throw new Error(`Unknown component: ${options.component}`);
-  }
-  const designSystem = options.designSystem ?? "material";
-  const variant = options.variant ?? "light";
-  const themeFn = theme.themeFunctionName;
-  const themeName = options.name ? `$${toVariableName(options.name)}` : `$custom-${options.component}-theme`;
-  const schemaVar = SCHEMA_PRESETS[variant][designSystem];
-  const tokenArgs = [`$schema: ${schemaVar}`];
-  for (const [tokenName, value] of Object.entries(options.tokens)) {
-    const stringValue = typeof value === "number" ? String(value) : value;
-    tokenArgs.push(`$${tokenName}: ${stringValue}`);
-  }
-  const defaultSelectors = getComponentSelector(
-    options.component,
-    options.platform
-  );
-  const selector = options.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : options.component);
-  const sassCode = `
-@use 'sass/themes' as *;
-@use 'sass/themes/schemas' as *;
+	const { getComponentTheme, getComponentSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
+	const { toVariableName } = await import("../utils/sass.js");
+	const theme = getComponentTheme(options.component);
+	if (!theme) throw new Error(`Unknown component: ${options.component}`);
+	const designSystem = options.designSystem ?? "material";
+	const variant = options.variant ?? "light";
+	const themeFn = theme.themeFunctionName;
+	const themeName = options.name ? `$${toVariableName(options.name)}` : `$custom-${options.component}-theme`;
+	const tokenArgs = [`$schema: ${SCHEMA_PRESETS[variant][designSystem]}`];
+	for (const [tokenName, value] of Object.entries(options.tokens)) {
+		const stringValue = typeof value === "number" ? String(value) : value;
+		tokenArgs.push(`$${tokenName}: ${stringValue}`);
+	}
+	const defaultSelectors = getComponentSelector(options.component, options.platform);
+	const selector = options.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : options.component);
+	const sassCode = `
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
 
 // Custom ${options.component} theme
 ${themeName}: ${themeFn}(
@@ -113,24 +143,19 @@ ${selector} {
   @include tokens(${themeName});
 }
 `;
-  try {
-    const loadPaths = options._loadPaths ?? [PACKAGE_ROOT];
-    const result = await sass.compileStringAsync(sassCode, {
-      loadPaths,
-      style: "expanded"
-    });
-    return {
-      css: result.css,
-      description: `Generated CSS custom properties for ${options.component} component with ${Object.keys(options.tokens).length} token(s) using ${designSystem} design system (${variant} variant)`
-    };
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`Failed to compile component theme CSS: ${message}`);
-  }
+	try {
+		const importers = options._importers ?? [themingImporter];
+		return {
+			css: (await sass.compileStringAsync(sassCode, {
+				importers,
+				style: "expanded"
+			})).css,
+			description: `Generated CSS custom properties for ${options.component} component with ${Object.keys(options.tokens).length} token(s) using ${designSystem} design system (${variant} variant)`
+		};
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to compile component theme CSS: ${message}`);
+	}
 }
-export {
-  formatCssOutput,
-  generateComponentThemeCss,
-  generateCustomPaletteCss,
-  generatePaletteCss
-};
+//#endregion
+export { formatCssOutput, generateComponentThemeCss, generateCustomPaletteCss, generatePaletteCss };