igniteui-theming 27.3.0 → 27.4.0

package/dist/json/components/themes.json

@@ -5426,6 +5426,16 @@
         "name": "item-border-radius",
         "type": "List",
         "description": "The border radius used for the navdrawer item."
+      },
+      {
+        "name": "size",
+        "type": "Number",
+        "description": "The width of the navigation drawer in its expanded (full) state."
+      },
+      {
+        "name": "size--mini",
+        "type": "Number",
+        "description": "The width of the navigation drawer in its mini state."
       }
     ]
   },

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

@@ -116,3 +116,80 @@ export interface ComponentThemeCssOptions {
  * // result.css contains: igc-button { --ig-button-background: var(--ig-button-background, #1976d2); ... }
  */
 export declare function generateComponentThemeCss(options: ComponentThemeCssOptions): Promise<CssComponentThemeResult>;
+/**
+ * Options for generating typography CSS variables.
+ */
+export interface TypographyCssOptions {
+    /** Font family string with fallbacks */
+    fontFamily?: string;
+    /** Design system preset (defaults to 'material') */
+    designSystem?: string;
+    /** Internal testing parameter for Sass importers */
+    _importers?: FileImporter[];
+}
+/**
+ * Generate CSS custom properties for a typography setup.
+ *
+ * Compiles the typography() mixin and returns the resulting CSS custom
+ * properties (--ig-h1-font-size, --ig-body-1-font-weight, etc.).
+ */
+export declare function generateTypographyCss(options: TypographyCssOptions): Promise<CssPaletteResult>;
+/**
+ * Options for generating elevations CSS variables.
+ */
+export interface ElevationsCssOptions {
+    /** Design system preset: 'material' or 'indigo' (defaults to 'material') */
+    designSystem?: string;
+    /** Internal testing parameter for Sass importers */
+    _importers?: FileImporter[];
+}
+/**
+ * Generate CSS custom properties for elevations.
+ *
+ * Compiles the elevations() mixin and returns the resulting CSS custom
+ * properties (--ig-elevation-0 through --ig-elevation-24).
+ */
+export declare function generateElevationsCss(options: ElevationsCssOptions): Promise<CssPaletteResult>;
+/**
+ * Options for generating a complete theme's CSS variables.
+ */
+export interface ThemeCssOptions {
+    platform?: (typeof PLATFORMS)[number];
+    designSystem?: string;
+    variant?: ThemeVariant;
+    primaryColor: string;
+    secondaryColor: string;
+    surfaceColor: string;
+    fontFamily?: string;
+    includeTypography?: boolean;
+    includeElevations?: boolean;
+    includeSpacing?: boolean;
+    name?: string;
+    /** Internal testing parameter for Sass importers */
+    _importers?: FileImporter[];
+}
+/**
+ * Result from generating a complete theme's CSS variables.
+ */
+export interface CssThemeResult {
+    css: string;
+    description: string;
+    /**
+     * True when platform is 'angular'. Angular CSS output contains only
+     * CSS custom properties — it does not include the component-scoped class
+     * styles generated by Angular's core() and theme() mixins.
+     */
+    angularCaveat?: boolean;
+}
+/**
+ * Generate CSS custom properties for a complete theme.
+ *
+ * For Web Components, React, and Blazor this compiles the full
+ * palette + typography + elevations Sass and returns all resulting
+ * CSS custom properties in one block.
+ *
+ * For Angular the same approach is used, but the response carries
+ * `angularCaveat: true` to signal that component-scoped class styles
+ * (generated by core() + theme()) are absent from the CSS output.
+ */
+export declare function generateThemeCss(options: ThemeCssOptions): Promise<CssThemeResult>;

package/dist/mcp/generators/css.js

@@ -158,5 +158,135 @@ ${selector} {
 		throw new Error(`Failed to compile component theme CSS: ${message}`);
 	}
 }
+/**
+* Generate CSS custom properties for a typography setup.
+*
+* Compiles the typography() mixin and returns the resulting CSS custom
+* properties (--ig-h1-font-size, --ig-body-1-font-weight, etc.).
+*/
+async function generateTypographyCss(options) {
+	const { TYPOGRAPHY_PRESETS } = await import("../knowledge/typography.js");
+	const { quoteFontFamily } = await import("../utils/sass.js");
+	const designSystem = options.designSystem ?? "material";
+	const preset = TYPOGRAPHY_PRESETS[designSystem];
+	const typeface = options.fontFamily || preset?.typeface || "Roboto, sans-serif";
+	const typeScaleVar = `$${designSystem}-type-scale`;
+	const sassCode = `
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/typography/presets' as *;
+
+@include typography(
+  $font-family: ${quoteFontFamily(typeface)},
+  $type-scale: ${typeScaleVar}
+);
+`;
+	try {
+		const importers = options._importers ?? [themingImporter];
+		return {
+			css: (await sass.compileStringAsync(sassCode, {
+				importers,
+				style: "expanded"
+			})).css,
+			description: `Generated CSS custom properties for typography using ${designSystem} type scale with font family ${typeface}`
+		};
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to compile typography CSS: ${message}`);
+	}
+}
+/**
+* Generate CSS custom properties for elevations.
+*
+* Compiles the elevations() mixin and returns the resulting CSS custom
+* properties (--ig-elevation-0 through --ig-elevation-24).
+*/
+async function generateElevationsCss(options) {
+	const preset = options.designSystem ?? "material";
+	const sassCode = `
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'igniteui-theming/sass/elevations/presets' as *;
+
+@include elevations(${`$${preset}-elevations`});
+`;
+	try {
+		const importers = options._importers ?? [themingImporter];
+		return {
+			css: (await sass.compileStringAsync(sassCode, {
+				importers,
+				style: "expanded"
+			})).css,
+			description: `Generated CSS custom properties for elevations using ${preset} preset (25 elevation levels)`
+		};
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to compile elevations CSS: ${message}`);
+	}
+}
+/**
+* Generate CSS custom properties for a complete theme.
+*
+* For Web Components, React, and Blazor this compiles the full
+* palette + typography + elevations Sass and returns all resulting
+* CSS custom properties in one block.
+*
+* For Angular the same approach is used, but the response carries
+* `angularCaveat: true` to signal that component-scoped class styles
+* (generated by core() + theme()) are absent from the CSS output.
+*/
+async function generateThemeCss(options) {
+	const { TYPOGRAPHY_PRESETS } = await import("../knowledge/typography.js");
+	const { quoteFontFamily, toVariableName } = await import("../utils/sass.js");
+	const designSystem = options.designSystem ?? "material";
+	const variant = options.variant ?? "light";
+	const isAngular = options.platform === "angular";
+	const paletteName = options.name ? `$${toVariableName(options.name)}-palette` : "$palette";
+	const includeTypography = options.includeTypography !== false;
+	const includeElevations = options.includeElevations !== false;
+	const includeSpacing = options.includeSpacing !== false;
+	const preset = TYPOGRAPHY_PRESETS[designSystem];
+	const typeface = options.fontFamily || preset?.typeface || "Roboto, sans-serif";
+	const typeScaleVar = `$${designSystem}-type-scale`;
+	const elevationsVar = designSystem === "indigo" ? "$indigo-elevations" : "$material-elevations";
+	const importLines = ["@use 'igniteui-theming/sass/color' as *;"];
+	if (includeTypography) {
+		importLines.push("@use 'igniteui-theming/sass/typography' as *;");
+		importLines.push("@use 'igniteui-theming/sass/typography/presets' as *;");
+	}
+	if (includeElevations) {
+		importLines.push("@use 'igniteui-theming/sass/elevations' as *;");
+		importLines.push("@use 'igniteui-theming/sass/elevations/presets' as *;");
+	}
+	if (includeSpacing) importLines.push("@use 'igniteui-theming/sass/themes' as *;");
+	const mixinLines = [];
+	mixinLines.push(`@include palette(${paletteName});`);
+	if (includeElevations) mixinLines.push(`@include elevations(${elevationsVar});`);
+	if (includeTypography) mixinLines.push(`@include typography(\n  $font-family: ${quoteFontFamily(typeface)},\n  $type-scale: ${typeScaleVar}\n);`);
+	if (includeSpacing) mixinLines.push("@include spacing();");
+	const sassCode = `
+${importLines.join("\n")}
+
+${paletteName}: palette(
+  $primary: ${options.primaryColor},
+  $secondary: ${options.secondaryColor},
+  $surface: ${options.surfaceColor}
+);
+
+${mixinLines.join("\n")}
+`;
+	try {
+		const importers = options._importers ?? [themingImporter];
+		return {
+			css: (await sass.compileStringAsync(sassCode, {
+				importers,
+				style: "expanded"
+			})).css,
+			description: `Generated CSS custom properties for a complete ${variant} ${designSystem} theme`,
+			angularCaveat: isAngular
+		};
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to compile theme CSS: ${message}`);
+	}
+}
 //#endregion
-export { formatCssOutput, generateComponentThemeCss, generateCustomPaletteCss, generatePaletteCss };
+export { formatCssOutput, generateComponentThemeCss, generateCustomPaletteCss, generateElevationsCss, generatePaletteCss, generateThemeCss, generateTypographyCss };

package/dist/mcp/index.js

@@ -33,7 +33,7 @@ import { z } from "zod";
 function createServer() {
 	const server = new McpServer({
 		name: "igniteui-theming",
-		version: "v27.3.0",
+		version: "v27.4.0",
 		description: "Generate Sass theming code for Ignite UI components - create palettes, typography, elevations, and complete themes"
 	});
 	registerTools(server);
@@ -101,7 +101,8 @@ function registerTools(server) {
 			fontFamily: createTypographySchema.shape.fontFamily,
 			designSystem: createTypographySchema.shape.designSystem,
 			customScale: createTypographySchema.shape.customScale,
-			name: createTypographySchema.shape.name
+			name: createTypographySchema.shape.name,
+			output: createTypographySchema.shape.output
 		}
 	}, withPreprocessing(createTypographySchema, handleCreateTypography));
 	server.registerTool("create_elevations", {
@@ -111,7 +112,8 @@ function registerTools(server) {
 			platform: createElevationsSchema.shape.platform,
 			licensed: createElevationsSchema.shape.licensed,
 			designSystem: createElevationsSchema.shape.designSystem,
-			name: createElevationsSchema.shape.name
+			name: createElevationsSchema.shape.name,
+			output: createElevationsSchema.shape.output
 		}
 	}, async (params) => {
 		return handleCreateElevations(createElevationsSchema.parse(params));
@@ -131,7 +133,8 @@ function registerTools(server) {
 			fontFamily: createThemeSchema.shape.fontFamily,
 			includeTypography: createThemeSchema.shape.includeTypography,
 			includeElevations: createThemeSchema.shape.includeElevations,
-			includeSpacing: createThemeSchema.shape.includeSpacing
+			includeSpacing: createThemeSchema.shape.includeSpacing,
+			output: createThemeSchema.shape.output
 		}
 	}, async (params) => {
 		return await handleCreateTheme(createThemeSchema.parse(params));

package/dist/mcp/theming/dist/json/components/themes.js

@@ -1484,6 +1484,16 @@ var navdrawer = {
 			"name": "item-border-radius",
 			"type": "List",
 			"description": "The border radius used for the navdrawer item."
+		},
+		{
+			"name": "size",
+			"type": "Number",
+			"description": "The width of the navigation drawer in its expanded (full) state."
+		},
+		{
+			"name": "size--mini",
+			"type": "Number",
+			"description": "The width of the navigation drawer in its mini state."
 		}
 	]
 };

package/dist/mcp/tools/descriptions.d.ts

@@ -40,12 +40,12 @@ export declare const FRAGMENTS: {
  * These are shown to AI models when listing available tools.
  */
 export declare const TOOL_DESCRIPTIONS: {
-    readonly detect_platform: "Detect the target platform by analyzing dependencies and project config files.\n\n<use_case>\n  Use this tool FIRST before generating any theme code to ensure platform-optimized output.\n  The detected platform determines the correct Sass module paths and syntax.\n</use_case>\n\n<detection_signals>\n  Uses multi-signal detection with confidence scoring:\n  1. Ignite UI packages (HIGH - 100): igniteui-angular, igniteui-webcomponents, igniteui-react, IgniteUI.Blazor\n  2. Config files (MEDIUM-HIGH - 80): angular.json, vite.config.*, next.config.*, .csproj\n  3. Framework packages (LOW - 40): @angular/core, react, lit (fallback only)\n  4. Generic fallback: When no Ignite UI product is found, returns \"generic\" for standalone theming\n</detection_signals>\n\n<output>\n  Returns:\n  - platform: \"angular\" | \"webcomponents\" | \"react\" | \"blazor\" | \"generic\" | null\n  - confidence: \"high\" | \"medium\" | \"low\" | \"none\"\n  - ambiguous: true if multiple Ignite UI platforms detected (requires user to specify explicitly)\n  - alternatives: Array of detected platforms when ambiguous\n  - signals: Array of detection signals found\n  - detectedPackage: The primary package that triggered detection\n  - platformInfo: Name, theming module path, and description\n\n  \"generic\" means no Ignite UI product framework was found. Most tools work in generic mode\n  (palette, typography, elevations, theme generation, color references, layout tokens with scope).\n  Component-specific tools (create_component_theme, get_component_design_tokens) are NOT available\n  in generic mode. The response includes Sass load path guidance based on detected build tooling.\n  null is reserved for error states (package.json read failure) or ambiguous multi-product detection.\n</output>\n\n<ambiguous_handling>\n  When multiple Ignite UI platforms are detected with significant confidence (≥60), returns:\n  - platform: null\n  - ambiguous: true\n  - alternatives: List of possible platforms with their signals\n  - Action: User must specify platform explicitly in subsequent tool calls\n</ambiguous_handling>\n\n<related_tools>\n  After detection, use the platform value with:\n  - create_palette: Generate color palette\n  - create_theme: Generate complete theme\n  - create_typography: Set up typography\n  - create_elevations: Configure shadows\n</related_tools>\n\n<related_resources>\n  - \"theming://guidance/platform-setup\": Comprehensive setup guide covering detection workflow, Sass load path configuration, dependency handling, and the recommended theming sequence. Read this for detailed platform-specific setup instructions.\n</related_resources>";
+    readonly detect_platform: "Detect the target platform by analyzing dependencies and project config files.\n\n<use_case>\n  Use this tool FIRST before generating any theme code to ensure platform-optimized output.\n  The detected platform determines the correct Sass module paths and syntax.\n  Output format (\"sass\" vs \"css\") is a separate concern — see the output parameter on each\n  generation tool. For non-Angular platforms, prefer \"css\" unless the project has a confirmed\n  Sass pipeline; use your own file-reading tools or ask the user to confirm before choosing\n  output: \"sass\".\n</use_case>\n\n<detection_signals>\n  Uses multi-signal detection with confidence scoring:\n  1. Ignite UI packages (HIGH - 100): igniteui-angular, igniteui-webcomponents, igniteui-react, IgniteUI.Blazor\n  2. Config files (MEDIUM-HIGH - 80): angular.json, vite.config.*, next.config.*, .csproj\n  3. Framework packages (LOW - 40): @angular/core, react, lit (fallback only)\n  4. Generic fallback: When no Ignite UI product is found, returns \"generic\" for standalone theming\n</detection_signals>\n\n<output>\n  Returns:\n  - platform: \"angular\" | \"webcomponents\" | \"react\" | \"blazor\" | \"generic\" | null\n  - confidence: \"high\" | \"medium\" | \"low\" | \"none\"\n  - ambiguous: true if multiple Ignite UI platforms detected (requires user to specify explicitly)\n  - alternatives: Array of detected platforms when ambiguous\n  - signals: Array of detection signals found\n  - detectedPackage: The primary package that triggered detection\n  - platformInfo: Name, theming module path, and description\n\n  \"generic\" means no Ignite UI product framework was found. Most tools work in generic mode\n  (palette, typography, elevations, theme generation, color references, layout tokens with scope).\n  Component-specific tools (create_component_theme, get_component_design_tokens) are NOT available\n  in generic mode. The response includes Sass load path guidance based on detected build tooling.\n  null is reserved for error states (package.json read failure) or ambiguous multi-product detection.\n</output>\n\n<ambiguous_handling>\n  When multiple Ignite UI platforms are detected with significant confidence (≥60), returns:\n  - platform: null\n  - ambiguous: true\n  - alternatives: List of possible platforms with their signals\n  - Action: User must specify platform explicitly in subsequent tool calls\n</ambiguous_handling>\n\n<related_tools>\n  After detection, use the platform value with:\n  - create_palette: Generate color palette\n  - create_theme: Generate complete theme\n  - create_typography: Set up typography\n  - create_elevations: Configure shadows\n</related_tools>\n\n<related_resources>\n  - \"theming://guidance/platform-setup\": Comprehensive setup guide covering detection workflow, Sass load path configuration, dependency handling, and the recommended theming sequence. Read this for detailed platform-specific setup instructions.\n</related_resources>";
     readonly create_palette: "Generate a color palette for Ignite UI themes using the palette() Sass function.\n\n<use_case>\n  Use this tool when you have base colors and want to auto-generate a complete palette\n  with all shade variations (50-900, A100-A700). Best for colors with mid-range luminance\n  that will produce good automatic shade distribution.\n</use_case>\n\n<output_formats>\n  - \"sass\" (default): Generates Sass code using the palette() function. Requires Sass compilation.\n  - \"css\": Generates CSS custom properties (variables) directly. Ready to use in any CSS file.\n\n  Use \"css\" output when:\n  - Working with vanilla CSS projects without Sass\n  - You want immediately usable CSS variables\n  - Using CSS-in-JS or other non-Sass styling approaches\n</output_formats>\n\n<workflow>\n  1. Validates input colors against the theme variant\n  2. Analyzes color luminance for shade generation suitability\n  3. Generates Sass code OR compiles to CSS based on output parameter\n  4. Adds warning comments to code if issues detected\n  5. Returns validation warnings and tips in response\n</workflow>\n\n<important_notes>\n  - Requires primary, secondary, and surface colors (matches Sass palette() API)\n  - Gray, info, success, warn, error are optional (use design system defaults)\n  - Surface color should match variant: light colors for \"light\", dark for \"dark\"\n  - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation.\n\n  SHADE PROGRESSION (important):\n  - Primary, secondary, and all chromatic colors: shades are NEVER inverted.\n    The palette() function always generates 50=lightest to 900=darkest.\n  - Only gray shades behave differently based on variant (for text contrast).\n  - DO NOT manually invert primary/secondary colors for dark themes.\n\n  SASS FILE PLACEMENT:\n  - When combining Sass output from multiple tools into one file, all @use rules\n    must appear at the top before any other statements. Deduplicate @use lines\n    that share the same module path.\n</important_notes>\n\n<output>\n  Returns:\n  - Generated Sass code with palette() function call, OR\n  - Generated CSS with custom properties (:root { --ig-primary-50: ...; })\n  - Platform-specific module imports (Sass only)\n  - Validation warnings (if any colors have issues)\n  - Variable name created (e.g., $my-palette) (Sass only)\n</output>\n\n<error_handling>\n  - Invalid color format: Returns error with format examples\n  - Variant mismatch: Warns if surface color doesn't match theme variant\n  - Luminance issues: Warns with recommendation to use create_custom_palette\n</error_handling>\n\n<example>\n  Blue brand with orange accent on light theme (Sass output):\n  {\n    \"primary\": \"#1976D2\",\n    \"secondary\": \"#FF9800\",\n    \"surface\": \"#FAFAFA\",\n    \"variant\": \"light\"\n  }\n\n  Same palette as CSS variables:\n  {\n    \"primary\": \"#1976D2\",\n    \"secondary\": \"#FF9800\",\n    \"surface\": \"#FAFAFA\",\n    \"variant\": \"light\",\n    \"output\": \"css\"\n  }\n</example>\n\n<related_tools>\n  - detect_platform: Run first to get correct platform value\n  - create_custom_palette: Use if this tool warns about luminance issues\n  - create_theme: Use instead if you want palette + typography + elevations together\n</related_tools>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://presets/palettes\" — preset palette colors\n  - \"theming://guidance/colors\" — color guidance overview\n  - \"theming://guidance/colors/rules\" — light/dark theme color rules\n</related_resources>";
     readonly create_custom_palette: "Generate a custom color palette with fine-grained control over individual shade values.\n\n⚠️ CRITICAL RULES - READ BEFORE GENERATING SHADES:\n1. MONOCHROMATIC: Each color (primary, secondary, etc.) must use ONE HUE only.\n   All 14 shades are lighter/darker versions of the SAME color.\n   Example: primary blue → all shades must be blue (#E3F2FD light → #0D47A1 dark).\n   WRONG: mixing blue, green, purple in one color's shades.\n2. NEVER INVERT: Chromatic colors always go 50=lightest → 900=darkest.\n   This applies to BOTH light and dark themes. Only gray inverts for dark themes.\n\n<use_case>\n  Use this tool when:\n  - The standard palette() function produces suboptimal shade distribution\n  - You have brand guidelines specifying exact color values for each shade\n  - Base colors are too light (luminance > 0.45) or too dark (< 0.05)\n  - You have specific accessibility audit requirements with exact contrast color values (rare - auto-generated contrast is usually sufficient)\n  - You want to mix auto-generated and manually specified color groups\n</use_case>\n\n<output_formats>\n  - \"sass\" (default): Generates Sass code with palette map structure. Requires Sass compilation.\n  - \"css\": Generates CSS custom properties (variables) directly. Ready to use in any CSS file.\n\n  Use \"css\" output when:\n  - Working with vanilla CSS projects without Sass\n  - You want immediately usable CSS variables\n  - Building prototypes or quick demos\n  - Using CSS-in-JS or other non-Sass styling approaches\n</output_formats>\n\n<workflow>\n  1. For each color group, choose a mode:\n     - mode:\"shades\" → Auto-generate all shades from baseColor using shades() function\n     - mode:\"explicit\" → Manually specify every shade value\n  2. Validates all explicit shades for:\n     - Completeness: All required shades present\n     - Color format: Valid CSS color values\n     - Luminance progression: 50 lightest → 900 darkest (chromatic colors)\n     - Hue consistency: All shades within ±30° hue tolerance (monochromatic)\n  3. Generates Sass code with color() map structure\n  4. Returns any validation warnings\n</workflow>\n\n<important_notes>\n  CRITICAL - SHADE PROGRESSION RULES:\n  - CHROMATIC colors (primary, secondary, surface, info, success, warn, error):\n    Shade 50 = ALWAYS lightest, shade 900 = ALWAYS darkest.\n    This is TRUE FOR BOTH light AND dark themes. NEVER invert chromatic colors.\n  - GRAY color ONLY: Inverts for dark themes (50=darkest, 900=lightest).\n  - DO NOT confuse these rules. Only gray inverts, never primary/secondary/etc.\n\n  ⚠️ CRITICAL - MONOCHROMATIC REQUIREMENT:\n  Each color group (primary, secondary, etc.) must contain shades of ONE COLOR ONLY.\n  Shades are lighter/darker variations of the SAME hue - NOT different colors!\n\n  CORRECT example for primary blue:\n    50: \"#E3F2FD\"  (very light blue)\n    500: \"#2196F3\" (medium blue)\n    900: \"#0D47A1\" (dark blue)\n    → All shades are BLUE, just different lightness levels\n\n  WRONG example (DO NOT DO THIS):\n    50: \"#E3F2FD\"  (light blue)\n    500: \"#4CAF50\" (green) ← WRONG! Different hue\n    900: \"#9C27B0\" (purple) ← WRONG! Different hue\n    → This creates a rainbow, not a shade palette\n\n  Rule: Keep hue constant (±30° tolerance), vary only lightness and saturation.\n\n  CHROMATIC COLORS (primary, secondary, surface, info, success, warn, error):\n  - Explicit mode requires 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\n  - Shade 50 = lightest, shade 900 = darkest (SAME for light AND dark themes)\n  - ALL shades must be the SAME HUE (monochromatic) - see requirement above\n  - A100-A700 are accent shades (same hue, typically more saturated)\n\n  GRAY COLOR (the ONLY color that inverts):\n  - Explicit mode requires 10 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900\n  - LIGHT themes: 50 = lightest (near white), 900 = darkest (near black)\n  - DARK themes: 50 = darkest, 900 = lightest (INVERTED progression)\n  - Gray inverts because text/UI elements need to contrast against the surface\n\n  CONTRAST COLORS (AUTO-GENERATED - DO NOT PROVIDE):\n  - DO NOT include contrastOverrides in your input - OMIT THIS FIELD ENTIRELY\n  - The system AUTOMATICALLY generates contrast colors using adaptive-contrast()\n  - For each shade, the generated Sass output will include:\n      '500': #4CAF50,\n      '500-contrast': adaptive-contrast(#4CAF50),  ← AUTO-GENERATED\n      '500-raw': #4CAF50,\n  - The adaptive-contrast() function auto-selects black or white for readability\n  - Only provide contrastOverrides if you have a specific accessibility audit\n    requiring exact contrast color values (this is extremely rare)\n\n  MIXING MODES:\n  - You can use \"shades\" mode for some colors and \"explicit\" for others\n  - Example: explicit primary, shades-based secondary and surface\n\n  SASS FILE PLACEMENT:\n  - When combining Sass output from multiple tools into one file, all @use rules\n    must appear at the top before any other statements. Deduplicate @use lines\n    that share the same module path.\n</important_notes>\n\n<output>\n  Returns:\n  - Generated Sass code with color() map definitions, OR\n  - Generated CSS with custom properties (:root { --ig-primary-50: ...; })\n  - Summary of which colors use shades() vs explicit values\n  - Variable name created (e.g., $custom-light-palette) (Sass only)\n  - Validation warnings (if any)\n</output>\n\n<error_handling>\n  Validation FAILS (returns error, no code generated) if:\n  - Missing required shades in explicit mode\n  - Invalid CSS color format in any shade\n\n  Validation WARNS (generates code with warnings) if:\n  - Luminance progression incorrect (50 darker than 900)\n  - Hue inconsistency detected (shades not monochromatic)\n  - Gray progression doesn't match variant (light vs dark)\n</error_handling>\n\n<example>\n  Brand green with exact shades (NOTE: ALL shades are GREEN - same hue, different lightness):\n\n  INPUT (what you provide - NO contrastOverrides needed):\n  {\n    \"variant\": \"light\",\n    \"primary\": {\n      \"mode\": \"explicit\",\n      \"shades\": {\n        \"50\": \"#E8F5E9\",\n        \"100\": \"#C8E6C9\",\n        \"200\": \"#A5D6A7\",\n        \"300\": \"#81C784\",\n        \"400\": \"#66BB6A\",\n        \"500\": \"#4CAF50\",\n        \"600\": \"#43A047\",\n        \"700\": \"#388E3C\",\n        \"800\": \"#2E7D32\",\n        \"900\": \"#1B5E20\",\n        \"A100\": \"#B9F6CA\",\n        \"A200\": \"#69F0AE\",\n        \"A400\": \"#00E676\",\n        \"A700\": \"#00C853\"\n      }\n      // ↑ Only provide shades - contrast colors are AUTO-GENERATED\n    },\n    \"secondary\": { \"mode\": \"shades\", \"baseColor\": \"#FF9800\" },\n    \"surface\": { \"mode\": \"shades\", \"baseColor\": \"#FAFAFA\" }\n  }\n\n  GENERATED OUTPUT (contrast colors added automatically):\n  'primary': (\n    '500': #4CAF50,\n    '500-contrast': adaptive-contrast(#4CAF50),  // ← AUTO-GENERATED\n    '500-raw': #4CAF50,  // ← AUTO-GENERATED\n    // ... same pattern for all 14 shades\n  )\n</example>\n\n<related_tools>\n  - detect_platform: Run first to get correct platform value\n  - create_palette: Use for simpler cases with mid-range luminance colors\n  - create_theme: Does not support custom palettes; use this tool + manual theme assembly\n</related_tools>\n\n<anti_example>\n  ❌ WRONG - DO NOT create shades like this (different hues = broken palette):\n  {\n    \"primary\": {\n      \"mode\": \"explicit\",\n      \"shades\": {\n        \"50\": \"#E3F2FD\",   // blue\n        \"100\": \"#DCEDC8\",  // green ← WRONG HUE\n        \"200\": \"#FFF9C4\",  // yellow ← WRONG HUE\n        \"500\": \"#9C27B0\",  // purple ← WRONG HUE\n        \"900\": \"#BF360C\"   // red-brown ← WRONG HUE\n      }\n    }\n  }\n  This creates a rainbow, not a shade palette. Components will look broken.\n</anti_example>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://presets/palettes\" — preset palette colors for reference\n  - \"theming://guidance/colors/usage\" — which shades to use for different purposes\n  - \"theming://guidance/colors/roles\" — semantic meaning of each color family\n</related_resources>";
     readonly create_typography: "Set up typography for Ignite UI themes with custom font families and type scales.\n\n<use_case>\n  Use this tool to configure fonts that match your brand identity while maintaining\n  consistent sizing, line heights, and letter spacing based on design system conventions.\n</use_case>\n\n<workflow>\n  1. Takes font family string and optional design system preset\n  2. Generates Sass code using the typography() mixin\n  3. Applies the type scale from the selected design system\n  4. Optionally applies custom scale overrides\n</workflow>\n\n<important_notes>\n  - Font family string should include fallbacks for cross-platform compatibility\n  - Quote font names that contain spaces: '\"Segoe UI\"' not 'Segoe UI'\n  - Design system affects: font sizes, line heights, letter spacing, font weights\n  - Type styles include: h1-h6, subtitle-1/2, body-1/2, button, caption, overline\n\n  SASS FILE PLACEMENT:\n  - When combining Sass output from multiple tools into one file, all @use rules\n    must appear at the top before any other statements. Deduplicate @use lines\n    that share the same module path.\n</important_notes>\n\n<output>\n  Returns:\n  - Generated Sass code with typography() mixin call\n  - Platform-specific module imports\n  - Variable name used (e.g., $my-typography)\n</output>\n\n<error_handling>\n  - Empty font family: Returns error requesting valid font family string\n</error_handling>\n\n<example>\n  Modern sans-serif typography for Material Design:\n  {\n    \"fontFamily\": \"'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif\",\n    \"designSystem\": \"material\"\n  }\n</example>\n\n<related_tools>\n  - detect_platform: Run first to get correct platform value\n  - create_theme: Use instead if you want typography + palette + elevations together\n</related_tools>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://presets/typography\" — typography presets for all design systems\n</related_resources>";
     readonly create_elevations: "Set up elevation shadows for Ignite UI themes.\n\n<use_case>\n  Use this tool to configure box-shadow values that provide visual depth and hierarchy.\n  Elevations follow Material Design or Indigo design specifications.\n</use_case>\n\n<workflow>\n  1. Selects elevation preset based on design system parameter\n  2. Generates Sass code using the elevations() mixin\n  3. Creates 24 elevation levels (0-24) with corresponding shadow values\n</workflow>\n\n<important_notes>\n  - \"material\" preset: Material Design 3 shadow specifications\n  - \"indigo\" preset: Infragistics Indigo shadow specifications\n  - Elevation 0 = no shadow, elevation 24 = maximum shadow depth\n  - Components use elevation() function to apply specific levels\n\n  SASS FILE PLACEMENT:\n  - When combining Sass output from multiple tools into one file, all @use rules\n    must appear at the top before any other statements. Deduplicate @use lines\n    that share the same module path.\n</important_notes>\n\n<output>\n  Returns:\n  - Generated Sass code with elevations() mixin call\n  - Platform-specific module imports\n  - Variable name used (e.g., $my-elevations)\n</output>\n\n<related_tools>\n  - detect_platform: Run first to get correct platform value\n  - create_theme: Use instead if you want elevations + palette + typography together\n</related_tools>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://presets/elevations\" — elevation presets for Material and Indigo\n</related_resources>";
-    readonly create_theme: "Generate a complete, production-ready Ignite UI theme with palette, typography, and elevations.\n\n<use_case>\n  Use this tool as the starting point for new projects. It generates everything needed\n  for a working theme in a single operation: color palette, typography setup, elevation\n  shadows, and the theme application mixin.\n</use_case>\n\n<workflow>\n  1. Analyzes input colors for palette shade generation suitability\n  2. Creates color palette using palette() function\n  3. Sets up typography with specified font family (if includeTypography: true)\n  4. Configures elevations based on design system (if includeElevations: true)\n  5. Configures spacing utilities for Web Components (if includeSpacing: true)\n  6. Applies the theme using the theme() mixin\n  7. Returns luminance warnings if any colors may produce poor shades\n</workflow>\n\n<important_notes>\n  REQUIRED COLORS:\n  - primaryColor: Main brand color\n  - secondaryColor: Accent/highlight color\n  - surfaceColor: Background color (should match variant)\n\n  SHADE PROGRESSION (important):\n  - Primary and secondary colors are NEVER inverted between light/dark themes.\n  - The palette() function generates shades 50=lightest to 900=darkest for ALL\n    chromatic colors regardless of theme variant.\n  - Only gray shades behave differently (for text contrast against surface).\n  - DO NOT provide inverted primary/secondary colors for dark themes.\n\n  LUMINANCE ANALYSIS:\n  - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation.\n  - If warnings appear, consider using create_custom_palette for those colors\n\n  PLATFORM DIFFERENCES:\n  - Angular: Uses igniteui-angular/theming with core() and theme() mixins\n  - Web Components: Uses igniteui-theming directly with palette(), typography(), elevations() mixins\n  - React: Uses igniteui-theming directly (same as Web Components), common with Vite/Next.js\n  - Blazor: Uses igniteui-theming for Sass compilation, theme CSS referenced in Blazor components\n\n  SASS FILE PLACEMENT:\n  - When combining Sass output from multiple tools into one file, all @use rules\n    must appear at the top before any other statements. Deduplicate @use lines\n    that share the same module path.\n</important_notes>\n\n<output>\n  Returns:\n  - Complete Sass code with all theme components\n  - Luminance analysis warnings (if applicable)\n  - List of variables created/used\n  - Platform-specific guidance\n</output>\n\n<error_handling>\n  - Invalid color format: Returns error with format examples\n  - Luminance issues: Warns but still generates code (may produce suboptimal shades)\n  - Variant mismatch: Warns if surface color doesn't match theme variant\n</error_handling>\n\n<example>\n  Complete Material Design blue theme:\n  {\n    \"platform\": \"angular\",\n    \"designSystem\": \"material\",\n    \"primaryColor\": \"#1976D2\",\n    \"secondaryColor\": \"#FF9800\",\n    \"surfaceColor\": \"#FAFAFA\",\n    \"variant\": \"light\",\n    \"fontFamily\": \"'Roboto', sans-serif\",\n    \"includeTypography\": true,\n    \"includeElevations\": true\n  }\n</example>\n\n<next_steps>\n  After generating a theme:\n  1. Review any luminance warnings in the output\n  2. If warnings suggest shade generation issues:\n     - Use create_custom_palette for problematic colors\n     - Manually assemble theme with custom palette\n  3. Import the generated Sass file in your application's main styles\n  4. Customize individual component themes as needed using component schema overrides\n</next_steps>\n\n<related_tools>\n  - detect_platform: Run first to auto-detect platform from package.json\n  - create_custom_palette: Use for colors that produce luminance warnings\n  - create_palette: Use if you only need a palette without full theme\n  - create_typography: Use if you only need typography setup\n  - create_elevations: Use if you only need elevation shadows\n</related_tools>\n\n  <related_resources>\n  Call read_resource to load reference data:\n  - \"theming://presets/palettes\" — preset palette colors\n  - \"theming://guidance/colors\" — color guidance overview\n  - \"theming://guidance/colors/rules\" — light/dark theme color rules\n  - \"theming://platforms/angular\" — Angular platform configuration\n  - \"theming://platforms/webcomponents\" — Web Components platform configuration\n  - \"theming://platforms/react\" — React platform configuration\n  - \"theming://platforms/blazor\" — Blazor platform configuration\n  </related_resources>";
+    readonly create_theme: "Generate a complete, production-ready Ignite UI theme with palette, typography, and elevations.\n\n<use_case>\n  Use this tool as the starting point for new projects. It generates everything needed\n  for a working theme in a single operation: color palette, typography setup, elevation\n  shadows, and the theme application mixin.\n</use_case>\n\n<workflow>\n  1. Analyzes input colors for palette shade generation suitability\n  2. Creates color palette using palette() function\n  3. Sets up typography with specified font family (if includeTypography: true)\n  4. Configures elevations based on design system (if includeElevations: true)\n  5. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true)\n  6. Applies the theme using the theme() mixin\n  7. Returns luminance warnings if any colors may produce poor shades\n</workflow>\n\n<important_notes>\n  REQUIRED COLORS:\n  - primaryColor: Main brand color\n  - secondaryColor: Accent/highlight color\n  - surfaceColor: Background color (should match variant)\n\n  SHADE PROGRESSION (important):\n  - Primary and secondary colors are NEVER inverted between light/dark themes.\n  - The palette() function generates shades 50=lightest to 900=darkest for ALL\n    chromatic colors regardless of theme variant.\n  - Only gray shades behave differently (for text contrast against surface).\n  - DO NOT provide inverted primary/secondary colors for dark themes.\n\n  LUMINANCE ANALYSIS:\n  - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation.\n  - If warnings appear, consider using create_custom_palette for those colors\n\n  PLATFORM DIFFERENCES:\n  - Angular: Uses igniteui-angular/theming with core() and theme() mixins\n  - Web Components: Uses igniteui-theming directly with palette(), typography(), elevations() mixins\n  - React: Uses igniteui-theming directly (same as Web Components), common with Vite/Next.js\n  - Blazor: Uses igniteui-theming for Sass compilation, theme CSS referenced in Blazor components\n\n  SASS FILE PLACEMENT:\n  - When combining Sass output from multiple tools into one file, all @use rules\n    must appear at the top before any other statements. Deduplicate @use lines\n    that share the same module path.\n</important_notes>\n\n<output>\n  Returns:\n  - Complete Sass code with all theme components\n  - Luminance analysis warnings (if applicable)\n  - List of variables created/used\n  - Platform-specific guidance\n</output>\n\n<error_handling>\n  - Invalid color format: Returns error with format examples\n  - Luminance issues: Warns but still generates code (may produce suboptimal shades)\n  - Variant mismatch: Warns if surface color doesn't match theme variant\n</error_handling>\n\n<example>\n  Complete Material Design blue theme:\n  {\n    \"platform\": \"angular\",\n    \"designSystem\": \"material\",\n    \"primaryColor\": \"#1976D2\",\n    \"secondaryColor\": \"#FF9800\",\n    \"surfaceColor\": \"#FAFAFA\",\n    \"variant\": \"light\",\n    \"fontFamily\": \"'Roboto', sans-serif\",\n    \"includeTypography\": true,\n    \"includeElevations\": true\n  }\n</example>\n\n<next_steps>\n  After generating a theme:\n  1. Review any luminance warnings in the output\n  2. If warnings suggest shade generation issues:\n     - Use create_custom_palette for problematic colors\n     - Manually assemble theme with custom palette\n  3. Import the generated Sass file in your application's main styles\n  4. Customize individual component themes as needed using component schema overrides\n</next_steps>\n\n<related_tools>\n  - detect_platform: Run first to auto-detect platform from package.json\n  - create_custom_palette: Use for colors that produce luminance warnings\n  - create_palette: Use if you only need a palette without full theme\n  - create_typography: Use if you only need typography setup\n  - create_elevations: Use if you only need elevation shadows\n</related_tools>\n\n  <related_resources>\n  Call read_resource to load reference data:\n  - \"theming://presets/palettes\" — preset palette colors\n  - \"theming://guidance/colors\" — color guidance overview\n  - \"theming://guidance/colors/rules\" — light/dark theme color rules\n  - \"theming://platforms/angular\" — Angular platform configuration\n  - \"theming://platforms/webcomponents\" — Web Components platform configuration\n  - \"theming://platforms/react\" — React platform configuration\n  - \"theming://platforms/blazor\" — Blazor platform configuration\n  </related_resources>";
     readonly set_size: "Set global or component-specific sizing by updating --ig-size.\n\n<use_case>\n  Use this tool for requests like:\n  - \"Make the calendar smaller\"\n  - \"The buttons feel too big\"\n  - \"Use the small size everywhere\"\n</use_case>\n\n<behavior>\n  - Sets --ig-size in the chosen scope (defaults to :root)\n  - Accepts \"small\", \"medium\", \"large\" (mapped to 1, 2, 3) or numeric values\n  - When platform is \"generic\", do NOT use the \"component\" parameter (it resolves Ignite UI component selectors). Use \"scope\" with a custom CSS selector instead, or omit both for :root.\n</behavior>\n\n<sass_notes>\n  - Components map --ig-size to --component-size internally\n  - Styles using sizable() require @include sizable() in component styles\n</sass_notes>\n\n<example>\n  Make flat buttons medium:\n  {\n    \"component\": \"flat-button\",\n    \"size\": \"medium\"\n  }\n\n  Make everything small globally:\n  {\n    \"size\": \"small\"\n  }\n</example>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://docs/spacing-and-sizing\" — spacing and sizing overview\n  - \"theming://docs/functions/sizable\" — sizable value function\n  - \"theming://docs/mixins/sizable\" — sizable mixin\n</related_resources>";
     readonly set_spacing: "Set global or component-specific spacing by updating --ig-spacing.\n\n<use_case>\n  Use this tool for requests like:\n  - \"The button feels bloated\"\n  - \"Tighten the spacing on the form\"\n  - \"Double the padding on cards\"\n</use_case>\n\n<behavior>\n  - Sets --ig-spacing in the chosen scope (defaults to :root)\n  - Optional overrides for --ig-spacing-inline and --ig-spacing-block\n  - 0 = no spacing, 1 = default, 2 = double (fractions allowed)\n  - spacing is required; inline/block are optional overrides\n  - When platform is \"generic\", do NOT use the \"component\" parameter (it resolves Ignite UI component selectors). Use \"scope\" with a custom CSS selector instead, or omit both for :root.\n</behavior>\n\n<sass_notes>\n  - pad(), pad-inline(), pad-block() require @include spacing() once\n</sass_notes>\n\n<example>\n  Reduce calendar spacing:\n  {\n    \"component\": \"calendar\",\n    \"spacing\": 0.75\n  }\n\n  Override inline spacing:\n  {\n    \"scope\": \".compact\",\n    \"inline\": 0.5,\n    \"block\": 0.75\n  }\n</example>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://docs/spacing-and-sizing\" — spacing and sizing overview\n  - \"theming://docs/functions/pad\" — pad spacing function\n  - \"theming://docs/mixins/spacing\" — spacing mixin\n</related_resources>";
     readonly set_roundness: "Set global or component-specific roundness by updating --ig-radius-factor.\n\n<use_case>\n  Use this tool for requests like:\n  - \"Make the flat buttons more round\"\n  - \"Square off the cards\"\n</use_case>\n\n<behavior>\n  - Sets --ig-radius-factor in the chosen scope (defaults to :root)\n  - 0 = minimum radius, 1 = maximum radius, values between interpolate\n  - When platform is \"generic\", do NOT use the \"component\" parameter (it resolves Ignite UI component selectors). Use \"scope\" with a custom CSS selector instead, or omit both for :root.\n</behavior>\n\n<sass_notes>\n  - border-radius() responds to --ig-radius-factor without extra mixins\n</sass_notes>\n\n<example>\n  Round avatars more:\n  {\n    \"component\": \"avatar\",\n    \"radiusFactor\": 0.9\n  }\n\n  Globally reduce roundness:\n  {\n    \"radiusFactor\": 0.8\n  }\n</example>\n\n<related_resources>\n  Call read_resource to load reference data:\n  - \"theming://docs/spacing-and-sizing\" — spacing and sizing overview\n  - \"theming://docs/functions/border-radius\" — border radius function\n</related_resources>";
@@ -64,7 +64,7 @@ export declare const PARAM_DESCRIPTIONS: {
     readonly variant: "Theme variant: \"light\" (light backgrounds, dark text) or \"dark\" (dark backgrounds, light text). Defaults to \"light\".";
     readonly designSystem: "Design system preset: \"material\" (Material Design), \"bootstrap\" (Bootstrap), \"fluent\" (Microsoft Fluent), or \"indigo\" (Infragistics Indigo). Defaults to \"material\".";
     readonly name: "Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., \"custom-light\", \"my-theme\").";
-    readonly output: "Output format: \"sass\" generates Sass code using igniteui-theming library functions. \"css\" generates CSS custom properties (variables) directly - useful for vanilla CSS projects or when you don't want Sass compilation. Defaults to tool-specific output (\"sass\" for theme generators, \"css\" for layout setters).";
+    readonly output: "Output format for the generated code.\n\n\"sass\" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI handles Sass compilation automatically).\n\n\"css\" — The MCP server compiles the Sass internally and returns ready-to-use CSS custom properties. No local Sass toolchain needed. Prefer for Web Components, React, and Blazor unless the project has a confirmed Sass setup (e.g. .scss files and a sass build step are present). When in doubt, use \"css\" or ask the user.\n\nLayout tools (set_size, set_spacing, set_roundness) default to \"css\". Generation tools (create_palette, create_theme, etc.) default to \"sass\" for Angular and \"css\" for all other platforms.";
     readonly packageJsonPath: "Path to package.json file, relative to current working directory. Defaults to \"./package.json\".";
     readonly primary: "Primary brand color - used for main actions, active states, and emphasis. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").";
     readonly secondary: "Secondary/accent color - used for FABs, selection controls, highlights. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").";
@@ -82,7 +82,7 @@ export declare const PARAM_DESCRIPTIONS: {
     readonly surfaceColor: "Surface/background color for the theme. Use light colors (#FAFAFA) for \"light\" variant, dark colors (#121212) for \"dark\" variant. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").";
     readonly includeTypography: "Include typography setup in the generated theme. Set to false if you want to configure typography separately. Defaults to true.";
     readonly includeElevations: "Include elevation shadows in the generated theme. Set to false if you want to configure elevations separately. Defaults to true.";
-    readonly includeSpacing: "Include spacing CSS custom properties (Web Components platform only). Defaults to true. Has no effect on Angular platform.";
+    readonly includeSpacing: "Include spacing CSS custom properties. Applies to Web Components, React, and Blazor. Has no effect on Angular. Defaults to true.";
     readonly colorDefinition: "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors.";
     readonly grayDefinition: "Gray color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 10 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900\nImportant: Gray progression is INVERTED for dark themes (50=darkest, 900=lightest).";
     readonly baseColor: "Base color for automatic shade generation using shades() function. Choose a mid-luminance color (0.1-0.4) for best results. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").";

package/dist/mcp/tools/descriptions.js

@@ -39,6 +39,10 @@ var TOOL_DESCRIPTIONS = {
 <use_case>
   Use this tool FIRST before generating any theme code to ensure platform-optimized output.
   The detected platform determines the correct Sass module paths and syntax.
+  Output format ("sass" vs "css") is a separate concern — see the output parameter on each
+  generation tool. For non-Angular platforms, prefer "css" unless the project has a confirmed
+  Sass pipeline; use your own file-reading tools or ask the user to confirm before choosing
+  output: "sass".
 </use_case>
 
 <detection_signals>
@@ -461,7 +465,7 @@ var TOOL_DESCRIPTIONS = {
   2. Creates color palette using palette() function
   3. Sets up typography with specified font family (if includeTypography: true)
   4. Configures elevations based on design system (if includeElevations: true)
-  5. Configures spacing utilities for Web Components (if includeSpacing: true)
+  5. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true)
   6. Applies the theme using the theme() mixin
   7. Returns luminance warnings if any colors may produce poor shades
 </workflow>
@@ -1032,7 +1036,13 @@ var PARAM_DESCRIPTIONS = {
 	variant: FRAGMENTS.VARIANT,
 	designSystem: FRAGMENTS.DESIGN_SYSTEM,
 	name: `Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., "custom-light", "my-theme").`,
-	output: `Output format: "sass" generates Sass code using igniteui-theming library functions. "css" generates CSS custom properties (variables) directly - useful for vanilla CSS projects or when you don't want Sass compilation. Defaults to tool-specific output ("sass" for theme generators, "css" for layout setters).`,
+	output: `Output format for the generated code.
+
+"sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI handles Sass compilation automatically).
+
+"css" — The MCP server compiles the Sass internally and returns ready-to-use CSS custom properties. No local Sass toolchain needed. Prefer for Web Components, React, and Blazor unless the project has a confirmed Sass setup (e.g. .scss files and a sass build step are present). When in doubt, use "css" or ask the user.
+
+Layout tools (set_size, set_spacing, set_roundness) default to "css". Generation tools (create_palette, create_theme, etc.) default to "sass" for Angular and "css" for all other platforms.`,
 	packageJsonPath: `Path to package.json file, relative to current working directory. Defaults to "./package.json".`,
 	primary: `Primary brand color - used for main actions, active states, and emphasis. ${FRAGMENTS.COLOR_FORMAT}`,
 	secondary: `Secondary/accent color - used for FABs, selection controls, highlights. ${FRAGMENTS.COLOR_FORMAT}`,
@@ -1050,7 +1060,7 @@ var PARAM_DESCRIPTIONS = {
 	surfaceColor: `Surface/background color for the theme. Use light colors (#FAFAFA) for "light" variant, dark colors (#121212) for "dark" variant. ${FRAGMENTS.COLOR_FORMAT}`,
 	includeTypography: "Include typography setup in the generated theme. Set to false if you want to configure typography separately. Defaults to true.",
 	includeElevations: "Include elevation shadows in the generated theme. Set to false if you want to configure elevations separately. Defaults to true.",
-	includeSpacing: "Include spacing CSS custom properties (Web Components platform only). Defaults to true. Has no effect on Angular platform.",
+	includeSpacing: "Include spacing CSS custom properties. Applies to Web Components, React, and Blazor. Has no effect on Angular. Defaults to true.",
 	colorDefinition: `Color definition object with mode selection:
 • mode: "shades" + baseColor: Auto-generates all shades from one color
 • mode: "explicit" + shades: Manually specify all ${FRAGMENTS.CHROMATIC_SHADES}

package/dist/mcp/tools/handlers/component-theme.js

@@ -24,7 +24,7 @@ function getComposedTokenWarning(componentName, tokenNames) {
 ⚠️ **Composed component notice:** \`${componentName}\` only needs the primary tokens (${[...primaryNames].map((t) => `\`${t}\``).join(", ")}). The other ${nonPrimaryTokens.length} token(s) override auto-derived values, which may cause visual inconsistencies. If the user did not explicitly request these tokens, consider re-generating with only the primary tokens.`;
 }
 async function handleCreateComponentTheme(params) {
-	const { platform, component, tokens, selector, name, output = "sass", designSystem = "material", variant = "light" } = params;
+	const { platform, component, tokens, selector, name, output = params.platform === "angular" ? "sass" : "css", designSystem = "material", variant = "light" } = params;
 	const normalizedComponent = component.toLowerCase().trim();
 	if (!platform) return {
 		content: [{

package/dist/mcp/tools/handlers/custom-palette.js

@@ -11,7 +11,7 @@ import "../../validators/index.js";
 async function handleCreateCustomPalette(params) {
 	const variant = params.variant ?? "light";
 	const designSystem = params.designSystem ?? "material";
-	const output = params.output ?? "sass";
+	const output = params.output ?? (params.platform === "angular" ? "sass" : "css");
 	const preset = PALETTE_PRESETS[`${variant}-${designSystem}-palette`];
 	let surfaceColorForGray;
 	if (params.surface.mode === "shades") surfaceColorForGray = params.surface.baseColor;

package/dist/mcp/tools/handlers/elevations.d.ts

@@ -1,7 +1,7 @@
 import { CreateElevationsParams } from '../schemas.js';
-export declare function handleCreateElevations(params: CreateElevationsParams): {
+export declare function handleCreateElevations(params: CreateElevationsParams): Promise<{
     content: {
         type: "text";
         text: string;
     }[];
-};
+}>;

package/dist/mcp/tools/handlers/elevations.js

@@ -1,11 +1,41 @@
 import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
 import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js";
 import { generateElevations } from "../../generators/sass.js";
+import { formatCssOutput, generateElevationsCss } from "../../generators/css.js";
 //#region src/tools/handlers/elevations.ts
 /**
 * Handler for create_elevations tool.
 */
-function handleCreateElevations(params) {
+async function handleCreateElevations(params) {
+	if ((params.output ?? (params.platform === "angular" ? "sass" : "css")) === "css") return handleCssOutput(params);
+	return handleSassOutput(params);
+}
+async function handleCssOutput(params) {
+	try {
+		const result = await generateElevationsCss({ designSystem: params.designSystem });
+		const formattedCss = formatCssOutput(result.css, result.description);
+		const responseParts = [result.description];
+		responseParts.push("");
+		responseParts.push("Output format: CSS custom properties");
+		responseParts.push("");
+		responseParts.push("```css");
+		responseParts.push(formattedCss.trimEnd());
+		responseParts.push("```");
+		return { content: [{
+			type: "text",
+			text: responseParts.join("\n")
+		}] };
+	} catch (error) {
+		return {
+			content: [{
+				type: "text",
+				text: `**Error generating CSS elevations**\n\n${error instanceof Error ? error.message : String(error)}`
+			}],
+			isError: true
+		};
+	}
+}
+function handleSassOutput(params) {
 	const result = generateElevations({
 		platform: params.platform,
 		licensed: params.licensed,

package/dist/mcp/tools/handlers/palette.js

@@ -10,7 +10,7 @@ import "../../validators/index.js";
 */
 async function handleCreatePalette(params) {
 	const variant = params.variant ?? "light";
-	const output = params.output ?? "sass";
+	const output = params.output ?? (params.platform === "angular" ? "sass" : "css");
 	const validation = await validatePaletteColors({
 		variant,
 		surface: params.surface,

package/dist/mcp/tools/handlers/theme.js

@@ -1,5 +1,6 @@
 import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js";
 import { generateTheme } from "../../generators/sass.js";
+import { formatCssOutput, generateThemeCss } from "../../generators/css.js";
 import { analyzeThemeColorsForPalette, formatPaletteSuitabilityWarnings, formatValidationResult, generatePaletteSuitabilityComments, generateWarningComments, validatePaletteColors } from "../../validators/palette.js";
 import "../../validators/index.js";
 //#region src/tools/handlers/theme.ts
@@ -7,8 +8,10 @@ import "../../validators/index.js";
 * Handler for create_theme tool.
 */
 async function handleCreateTheme(params) {
+	const variant = params.variant ?? "light";
+	const output = params.output ?? (params.platform === "angular" ? "sass" : "css");
 	const validation = await validatePaletteColors({
-		variant: params.variant ?? "light",
+		variant,
 		surface: params.surfaceColor
 	});
 	const suitabilityAnalysis = await analyzeThemeColorsForPalette({
@@ -16,6 +19,65 @@ async function handleCreateTheme(params) {
 		secondary: params.secondaryColor,
 		surface: params.surfaceColor
 	});
+	if (output === "css") return handleCssOutput(params, validation, suitabilityAnalysis);
+	return handleSassOutput(params, validation, suitabilityAnalysis);
+}
+async function handleCssOutput(params, validation, suitabilityAnalysis) {
+	try {
+		const result = await generateThemeCss({
+			platform: params.platform,
+			designSystem: params.designSystem,
+			variant: params.variant,
+			primaryColor: params.primaryColor,
+			secondaryColor: params.secondaryColor,
+			surfaceColor: params.surfaceColor,
+			fontFamily: params.fontFamily,
+			includeTypography: params.includeTypography,
+			includeElevations: params.includeElevations,
+			includeSpacing: params.includeSpacing,
+			name: params.name
+		});
+		const formattedCss = formatCssOutput(result.css, result.description);
+		const responseParts = [result.description];
+		responseParts.push("");
+		responseParts.push("Output format: CSS custom properties");
+		if (params.platform) {
+			const { PLATFORM_METADATA } = await import("../../knowledge/platforms/index.js");
+			responseParts.push("");
+			responseParts.push(`Platform: ${PLATFORM_METADATA[params.platform]?.name ?? params.platform}`);
+		}
+		if (result.angularCaveat) {
+			responseParts.push("");
+			responseParts.push("⚠️ Angular note: This CSS output contains only CSS custom properties (--ig-* variables). It does not include the component-scoped class styles generated by Angular's core() and theme() mixins. For full Angular theme output use output: \"sass\".");
+		}
+		const validationText = formatValidationResult(validation);
+		if (validationText) {
+			responseParts.push("");
+			responseParts.push(validationText);
+		}
+		if (!suitabilityAnalysis.allSuitable) {
+			responseParts.push("");
+			responseParts.push(formatPaletteSuitabilityWarnings(suitabilityAnalysis));
+		}
+		responseParts.push("");
+		responseParts.push("```css");
+		responseParts.push(formattedCss.trimEnd());
+		responseParts.push("```");
+		return { content: [{
+			type: "text",
+			text: responseParts.join("\n")
+		}] };
+	} catch (error) {
+		return {
+			content: [{
+				type: "text",
+				text: `**Error generating CSS theme**\n\n${error instanceof Error ? error.message : String(error)}`
+			}],
+			isError: true
+		};
+	}
+}
+async function handleSassOutput(params, validation, suitabilityAnalysis) {
 	const result = generateTheme({
 		platform: params.platform,
 		licensed: params.licensed,

package/dist/mcp/tools/handlers/typography.d.ts

@@ -1,7 +1,7 @@
 import { CreateTypographyParams } from '../schemas.js';
-export declare function handleCreateTypography(params: CreateTypographyParams): {
+export declare function handleCreateTypography(params: CreateTypographyParams): Promise<{
     content: {
         type: "text";
         text: string;
     }[];
-};
+}>;