igniteui-theming 25.0.0 → 25.0.2

package/dist/mcp/knowledge/docs/setup/platform.md.js

@@ -0,0 +1,4 @@
+const PLATFORM_SETUP_MARKDOWN = "# Platform Setup Guide\n\nThis document is an instruction resource for AI agents using the Ignite UI Theming MCP. It describes how to detect, configure, and work with target platforms. Follow these rules when helping a user set up theming in their project.\n\n---\n\n## Step 1: Always Detect First\n\n**ALWAYS** call `detect_platform` before generating any theme code. Do not assume a platform; do not skip detection even if the user mentions a framework by name — detection confirms the actual project setup and returns Sass configuration guidance.\n\n```\ndetect_platform({ packageJsonPath: \"./package.json\" })\n```\n\nThe result determines every subsequent tool call's `platform` parameter.\n\n---\n\n## Step 2: Interpret the Detection Result\n\n### High-confidence product detection\n\nWhen `confidence` is `\"high\"` and `platform` is one of `angular`, `webcomponents`, `react`, or `blazor`:\n\n- Use the returned `platform` value in all subsequent tool calls.\n- Use the `platformInfo.themingModule` value for Sass import guidance.\n- If `licensed` is `true` (Angular only), also pass `licensed: true` to theme generation tools.\n\n### Generic (standalone) mode\n\nWhen `platform` is `\"generic\"`:\n\n- No Ignite UI product framework was found. The project can still use `igniteui-theming` directly.\n- Use `platform: \"generic\"` in all subsequent tool calls.\n- The Sass import is `@use 'igniteui-theming' as *;`.\n\n**Tool eligibility in generic mode:**\n\n| Tool                          | Available | Notes                                  |\n| ----------------------------- | --------- | -------------------------------------- |\n| `create_palette`              | YES       | Full functionality                     |\n| `create_custom_palette`       | YES       | Full functionality                     |\n| `create_typography`           | YES       | Full functionality                     |\n| `create_elevations`           | YES       | Full functionality                     |\n| `create_theme`                | YES       | Full functionality                     |\n| `set_size`                    | YES       | Use `scope`, not `component`           |\n| `set_spacing`                 | YES       | Use `scope`, not `component`           |\n| `set_roundness`               | YES       | Use `scope`, not `component`           |\n| `get_color`                   | YES       | Full functionality                     |\n| `read_resource`               | YES       | Full functionality                     |\n| `create_component_theme`      | **NO**    | Requires Ignite UI component selectors |\n| `get_component_design_tokens` | **NO**    | Requires Ignite UI components          |\n\n**IMPORTANT:** For layout tools (`set_size`, `set_spacing`, `set_roundness`) in generic mode, do NOT use the `component` parameter — it resolves Ignite UI component selectors that don't exist in the project. Use `scope` with a custom CSS selector, or omit both for `:root` targeting.\n\n### Ambiguous detection\n\nWhen `ambiguous` is `true` and `platform` is `null`:\n\n- Multiple Ignite UI products were detected (e.g., both Angular and React packages).\n- Do NOT guess. Ask the user which platform to target.\n- Present the `alternatives` array from the result so the user can choose.\n\n### Null / error state\n\nWhen `platform` is `null` and `ambiguous` is not `true`:\n\n- Something went wrong (package.json unreadable, invalid structure).\n- Report the `reason` to the user and ask them to specify a platform manually.\n- Suggest `\"generic\"` if they don't use an Ignite UI product.\n\n---\n\n## Step 3: Configure Sass Load Paths\n\nIf the user will consume **Sass output** (not CSS), they need `node_modules` in their Sass compiler's load paths so that `@use 'igniteui-theming' as *;` resolves correctly.\n\nThe `detect_platform` response includes config-file signals. Use them to give the right guidance:\n\n### Angular (`angular.json` detected)\n\n```json\n// In angular.json → architect → build → options:\n\"stylePreprocessorOptions\": {\n  \"includePaths\": [\"node_modules\"]\n}\n```\n\n### Vite (`vite.config.*` detected)\n\n```js\n// In vite.config.ts/js:\nexport default defineConfig({\n  css: {\n    preprocessorOptions: {\n      scss: {\n        loadPaths: ['node_modules'],\n      },\n    },\n  },\n});\n```\n\n### Next.js (`next.config.*` detected)\n\n```js\n// In next.config.js/mjs/ts:\nmodule.exports = {\n  sassOptions: {\n    loadPaths: ['node_modules'],\n  },\n};\n```\n\n### Other / unknown build tools\n\nIf no recognizable config file was detected, instruct the user to add `node_modules` to their Sass compiler's `loadPaths`. Angular CLI is the exception — it uses `includePaths` in `angular.json`. Investigate the project's build configuration to find the right setting.\n\n### When load paths are NOT needed\n\n- **CSS output**: CSS output is compiled server-side by the MCP. No local Sass toolchain or load path configuration is required. The user can paste the CSS output directly.\n- **Angular with Ignite UI for Angular**: The `igniteui-angular/theming` module is already resolved by Angular's build system when the package is installed.\n\n---\n\n## Step 4: Handle the igniteui-theming Dependency\n\nCheck whether `igniteui-theming` (or a product package like `igniteui-angular`) is in the project's dependencies.\n\n### Package IS installed\n\n- Sass output will work once load paths are configured.\n- CSS output works regardless.\n\n### Package is NOT installed\n\n- **CSS output** still works — the MCP compiles it server-side. Recommend this path for quick results.\n- **Sass output** requires the package to be resolvable. The user must either:\n  - Run `npm install igniteui-theming` (or the product-specific package), OR\n  - Ensure the package is available via `loadPaths` from a parent `node_modules`.\n\nWhen in doubt, suggest CSS output first — it has zero local dependencies.\n\n---\n\n## Step 5: Recommended Workflow\n\nAfter detection and setup, follow this order for a complete theme:\n\n1. **`detect_platform`** — Determine platform and configuration needs.\n2. **`create_palette`** or **`create_custom_palette`** — Define the color system.\n   - Read `theming://guidance/colors/rules` first if unsure about surface/gray color choices.\n3. **`create_typography`** — Set up the type scale (optional but recommended).\n4. **`create_elevations`** — Configure shadows (optional).\n5. **`create_theme`** — Generate the complete theme that brings everything together.\n6. **Layout tools** — Use `set_size`, `set_spacing`, `set_roundness` if the user wants to customize layout tokens.\n7. **`create_component_theme`** — Customize individual component appearances (only for product platforms, NOT generic).\n\n### Output format decision\n\n- Offer **CSS output** when the user wants quick, dependency-free results or is working in a non-Sass environment.\n- Offer **Sass output** when the user has a Sass toolchain set up and wants the flexibility of Sass variables and functions.\n- When both are viable, mention both options and let the user choose.\n\n---\n\n## Platform-Specific Notes\n\n### Angular\n\n- Uses `igniteui-angular/theming` (free) or `@infragistics/igniteui-angular/theming` (licensed) (not `igniteui-theming` directly).\n- Licensed packages use `@infragistics/igniteui-angular/theming` — pass `licensed: true`.\n- Requires `core()` mixin before `theme()` mixin.\n- Typography requires the `ig-typography` CSS class on the root element.\n- Read `theming://platforms/angular` for full platform configuration and usage examples.\n\n### Web Components\n\n- Uses `igniteui-theming` directly.\n- Provides runtime theming via `defineComponents()` and `register()` APIs.\n- Read `theming://platforms/webcomponents` for configuration and runtime config.\n\n### React\n\n- Uses `igniteui-theming` directly (same as Web Components).\n- Read `theming://platforms/react` for configuration and usage examples.\n\n### Blazor\n\n- Uses `igniteui-theming` directly (same as Web Components).\n- Detection relies on `.csproj` files with IgniteUI.Blazor references.\n- Read `theming://platforms/blazor` for configuration and usage examples.\n\n### Generic (Standalone)\n\n- Uses `igniteui-theming` directly.\n- No Ignite UI components — all theme output applies globally via CSS custom properties.\n- Component-specific tools are not available.\n- Layout tools work only with `:root` or custom `scope` selectors.\n- Read `theming://platforms/generic` for presets available in this mode.\n\n### Preset imports for non-Angular platforms\n\nFor all non-Angular platforms (Web Components, React, Blazor, Generic), using preset variables such as `$material-type-scale`, `$indigo-type-scale`, `$material-elevations`, or `$indigo-elevations` requires additional `@use` imports beyond the base `@use 'igniteui-theming' as *;`:\n\n```scss\n// Base module (always required)\n@use 'igniteui-theming' as *;\n\n// Typography presets (required for $<designSystem>-type-scale variables)\n@use 'igniteui-theming/sass/typography/presets' as *;\n\n// Elevation presets (required for $material-elevations / $indigo-elevations)\n@use 'igniteui-theming/sass/elevations/presets' as *;\n```\n\nThe MCP tools (`create_typography`, `create_elevations`, `create_theme`) automatically include these imports in their generated Sass output. Angular is not affected — its `igniteui-angular/theming` module re-exports all presets.\n\n---\n\n## Related Resources\n\n| Resource            | URI                                 | When to read                       |\n| ------------------- | ----------------------------------- | ---------------------------------- |\n| Supported Platforms | `theming://platforms`               | To list all platforms and metadata |\n| Color Guidance      | `theming://guidance/colors`         | Before creating palettes           |\n| Color Rules         | `theming://guidance/colors/rules`   | For surface/gray color decisions   |\n| Spacing & Sizing    | `theming://docs/spacing-and-sizing` | Before using layout tools          |\n";
+export {
+  PLATFORM_SETUP_MARKDOWN as default
+};

package/dist/mcp/knowledge/index.d.ts

@@ -11,6 +11,6 @@ export { BORDER_RADIUS_FUNCTION_DOC, LAYOUT_OVERVIEW_DOC, PAD_FUNCTION_DOC, SIZA
 export { ACCENT_SHADE_LEVELS, type AccentShadeLevel, COLOR_MULTIPLIERS, GRAYSCALE_MULTIPLIERS, SHADE_LEVELS, type ShadeLevel, type ShadeMultipliers, } from './multipliers.js';
 export { DARK_PALETTE_PRESETS, LIGHT_PALETTE_PRESETS, PALETTE_PRESETS, type PaletteColors, type PalettePresetName, } from './palettes.js';
 export { ELEVATIONS as ELEVATIONS_PRESETS, PALETTE_PRESETS_PATHS, PALETTES as PALETTES_PRESETS, SCHEMAS as SCHEMA_PRESETS, TYPE_SCALES as TYPE_SCALE_PRESETS, TYPEFACES as TYPEFACE_PRESETS, TYPOGRAPHY_PRESETS_PATHS, } from './platforms/common.js';
-export { ANGULAR_PLATFORM, ANGULAR_USAGE_EXAMPLES, type AngularThemeTemplate, BLAZOR_PLATFORM, BLAZOR_USAGE_EXAMPLES, type ConfigFileDetectionSignal, type CoreMixinOptions, type DetectionSignal, detectConfigFiles, detectPlatformFromDependencies, type FrameworkDetectionSignal, generateAngularThemeSass, generateWebComponentsThemeSass, getVariablePrefix, isLicensedPackage, type PackageDetectionSignal, PLATFORM_METADATA, PLATFORM_VARIABLE_PREFIX, type Platform, type PlatformAlternative, type PlatformDetectionResult, REACT_PLATFORM, REACT_USAGE_EXAMPLES, type ThemeMixinOptions, WEBCOMPONENTS_PLATFORM, WEBCOMPONENTS_RUNTIME_CONFIG, WEBCOMPONENTS_USAGE_EXAMPLES, type WebComponentsThemeTemplate, } from './platforms/index.js';
+export { ANGULAR_PLATFORM, ANGULAR_USAGE_EXAMPLES, type AngularThemeTemplate, BLAZOR_PLATFORM, BLAZOR_USAGE_EXAMPLES, type ConfigFileDetectionSignal, type CoreMixinOptions, type DetectionSignal, detectConfigFiles, detectPlatformFromDependencies, type FrameworkDetectionSignal, generateAngularThemeSass, generateWebComponentsThemeSass, isLicensedPackage, type PackageDetectionSignal, PLATFORM_METADATA, type Platform, type PlatformAlternative, type PlatformDetectionResult, REACT_PLATFORM, REACT_USAGE_EXAMPLES, type ThemeMixinOptions, WEBCOMPONENTS_PLATFORM, WEBCOMPONENTS_RUNTIME_CONFIG, WEBCOMPONENTS_USAGE_EXAMPLES, type WebComponentsThemeTemplate, } from './platforms/index.js';
 export { CORE_MIXIN, type CoreMixinParams, CSS_VARIABLE_PATTERNS, ELEVATIONS_MIXIN, type ElevationsMixinParams, getElevationsVariable, getImportPath, getPaletteColorGroups, IMPORT_PATHS, isMixinSupported, PALETTE_FUNCTION, PALETTE_MIXIN, type PaletteFunctionParams, type PaletteMixinParams, SHADES_FUNCTION, type ShadesFunctionParams, SPACING_MIXIN, THEME_MIXIN, type ThemeMixinParams, TYPOGRAPHY_MIXIN, type TypographyMixinParams, VARIABLE_PATTERNS, } from './sass-api.js';
 export { type DesignSystem, TYPE_SCALE_CATEGORIES, TYPOGRAPHY_PRESETS, type TypeScale, type TypeScaleCategory, type TypeStyle, } from './typography.js';

package/dist/mcp/knowledge/index.js

@@ -17,8 +17,7 @@ import { ACCENT_SHADE_LEVELS, SHADE_LEVELS } from "../utils/types.js";
 import { DARK_PALETTE_PRESETS, LIGHT_PALETTE_PRESETS, PALETTE_PRESETS } from "./palettes.js";
 import { SCHEMAS } from "./platforms/common.js";
 import { ELEVATIONS, PALETTES, PALETTE_PRESETS_PATHS, TYPEFACES, TYPE_SCALES, TYPOGRAPHY_PRESETS_PATHS } from "./platforms/common.js";
-import { getVariablePrefix } from "./platforms/index.js";
-import { PLATFORM_METADATA, PLATFORM_VARIABLE_PREFIX, detectConfigFiles, detectPlatformFromDependencies, isLicensedPackage } from "./platforms/index.js";
+import { PLATFORM_METADATA, detectConfigFiles, detectPlatformFromDependencies, isLicensedPackage } from "./platforms/index.js";
 import { TYPOGRAPHY_PRESETS } from "./typography.js";
 import { ANGULAR_PLATFORM, ANGULAR_USAGE_EXAMPLES, generateAngularThemeSass } from "./platforms/angular.js";
 import { BLAZOR_PLATFORM, BLAZOR_USAGE_EXAMPLES } from "./platforms/blazor.js";
@@ -54,7 +53,6 @@ export {
   PALETTE_PRESETS,
   PALETTE_PRESETS_PATHS,
   PLATFORM_METADATA,
-  PLATFORM_VARIABLE_PREFIX,
   REACT_PLATFORM,
   REACT_USAGE_EXAMPLES,
   SCHEMAS as SCHEMA_PRESETS,
@@ -82,7 +80,6 @@ export {
   getCompoundComponentInfo,
   getTokenDerivationsForChild,
   getTokenNames,
-  getVariablePrefix,
   getVariants,
   hasVariants,
   isComponentAvailable,

package/dist/mcp/knowledge/platform-setup.d.ts

@@ -0,0 +1,2 @@
+import { default as PLATFORM_SETUP_MARKDOWN } from './docs/setup/platform.md?raw';
+export { PLATFORM_SETUP_MARKDOWN };

package/dist/mcp/knowledge/platforms/index.d.ts

@@ -92,17 +92,6 @@ export declare function detectConfigFiles(projectRoot?: string): ConfigFileSigna
  * @returns Platform detection result with signals and confidence
  */
 export declare function detectPlatformFromDependencies(dependencies?: Record<string, string>, devDependencies?: Record<string, string>, projectRoot?: string): PlatformDetectionResult;
-/**
- * CSS variable prefix for each platform.
- * Angular uses 'igx-' prefix, all other platforms use 'ig-' prefix.
- */
-export declare const PLATFORM_VARIABLE_PREFIX: Record<Platform, string>;
-/**
- * Get the CSS variable prefix for a given platform
- * @param platform - The platform to get the prefix for
- * @returns The CSS variable prefix (e.g., 'igx' for Angular, 'ig' for others)
- */
-export declare function getVariablePrefix(platform: Platform): string;
 /**
  * Determine if a detected package is a licensed @infragistics package.
  * Only applies to Angular - other platforms always use the free igniteui-theming package.
@@ -149,4 +138,12 @@ export declare const PLATFORM_METADATA: {
         readonly themingModule: "igniteui-theming";
         readonly description: "Uses igniteui-theming for Sass compilation in .NET Blazor projects. Theme styles are compiled to CSS and referenced in Blazor components. The igniteui-theming package is always free/OSS.";
     };
+    readonly generic: {
+        readonly id: "generic";
+        readonly name: "Ignite UI Theming (Standalone)";
+        readonly shortName: "Generic";
+        readonly packageName: "igniteui-theming";
+        readonly themingModule: "igniteui-theming";
+        readonly description: "Platform-agnostic output using igniteui-theming directly. For projects that do not use a specific Ignite UI product framework (Angular, Web Components, React, or Blazor). Supports palette, typography, elevations, and theme generation. Component theming is not available in generic mode.";
+    };
 };

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

@@ -12,8 +12,10 @@ const IGNITE_PACKAGE_PATTERNS = {
     "@infragistics/igniteui-webcomponents"
   ],
   react: ["igniteui-react", "@infragistics/igniteui-react"],
-  blazor: []
+  blazor: [],
   // Blazor uses NuGet, not npm - detected via .csproj
+  generic: []
+  // Generic is platform-agnostic; not detectable from packages
 };
 const FRAMEWORK_PACKAGE_PATTERNS = {
   "@angular/core": "angular",
@@ -118,12 +120,21 @@ function detectPlatformFromDependencies(dependencies = {}, devDependencies = {},
       }
     }
   }
+  const hasIgniteProduct = signals.some((s) => s.type === "ignite_package") || signals.some((s) => s.type === "config_file" && s.confidence === 100);
   if (platformScores.size === 0) {
     return {
-      platform: null,
+      platform: "generic",
       confidence: "none",
       signals: [],
-      reason: "No Ignite UI packages, framework packages, or config files detected"
+      reason: "No Ignite UI packages, framework packages, or config files detected. Using generic (standalone) mode."
+    };
+  }
+  if (!hasIgniteProduct) {
+    return {
+      platform: "generic",
+      confidence: "low",
+      signals,
+      reason: "No Ignite UI product package detected. Framework or config signals found but no Ignite UI product in use. Using generic (standalone) mode."
     };
   }
   const sorted = Array.from(platformScores.entries()).sort(
@@ -186,15 +197,6 @@ function detectPlatformFromDependencies(dependencies = {}, devDependencies = {},
     reason: `Detected ${topPlatform} with ${confidenceLevel} confidence (score: ${topScore})`
   };
 }
-const PLATFORM_VARIABLE_PREFIX = {
-  angular: "igx",
-  webcomponents: "ig",
-  react: "ig",
-  blazor: "ig"
-};
-function getVariablePrefix(platform) {
-  return PLATFORM_VARIABLE_PREFIX[platform];
-}
 function isLicensedPackage(detectedPackage) {
   return detectedPackage?.startsWith("@infragistics/") ?? false;
 }
@@ -232,13 +234,19 @@ const PLATFORM_METADATA = {
     packageName: "IgniteUI.Blazor",
     themingModule: "igniteui-theming",
     description: "Uses igniteui-theming for Sass compilation in .NET Blazor projects. Theme styles are compiled to CSS and referenced in Blazor components. The igniteui-theming package is always free/OSS."
+  },
+  generic: {
+    id: "generic",
+    name: "Ignite UI Theming (Standalone)",
+    shortName: "Generic",
+    packageName: "igniteui-theming",
+    themingModule: "igniteui-theming",
+    description: "Platform-agnostic output using igniteui-theming directly. For projects that do not use a specific Ignite UI product framework (Angular, Web Components, React, or Blazor). Supports palette, typography, elevations, and theme generation. Component theming is not available in generic mode."
   }
 };
 export {
   PLATFORM_METADATA,
-  PLATFORM_VARIABLE_PREFIX,
   detectConfigFiles,
   detectPlatformFromDependencies,
-  getVariablePrefix,
   isLicensedPackage
 };

package/dist/mcp/knowledge/platforms/react.d.ts

@@ -37,8 +37,8 @@ export declare const REACT_PLATFORM: {
  */
 export declare const REACT_USAGE_EXAMPLES: {
     readonly basic: "\n// Basic Material Light Theme for React (Vite)\n// In your styles.scss or theme.scss file:\n\n@use 'igniteui-theming/sass/color/presets/light/material' as *;\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/material' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n:root {\n  --ig-theme: material;\n  --ig-theme-variant: light;\n  --ig-size-small: 1;\n  --ig-size-medium: 2;\n  --ig-size-large: 3;\n  --ig-scrollbar-size: #{rem(16px)};\n}\n\n@include palette($palette);\n@include elevations($material-elevations);\n@include typography(\n  $font-family: $typeface,\n  $type-scale: $type-scale\n);\n@include spacing();\n";
-    readonly viteConfig: "\n// vite.config.ts - Sass configuration for Ignite UI theming\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n  css: {\n    preprocessorOptions: {\n      scss: {\n        // Add node_modules to include paths for @use statements\n        includePaths: ['node_modules'],\n      },\n    },\n  },\n});\n";
-    readonly nextjsConfig: "\n// next.config.js - Sass configuration for Next.js\nconst path = require('path');\n\nmodule.exports = {\n  sassOptions: {\n    includePaths: [path.join(__dirname, 'node_modules')],\n  },\n};\n";
+    readonly viteConfig: "\n// vite.config.ts - Sass configuration for Ignite UI theming\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n  css: {\n    preprocessorOptions: {\n      scss: {\n        // Add node_modules to load paths for @use statements\n        loadPaths: ['node_modules'],\n      },\n    },\n  },\n});\n";
+    readonly nextjsConfig: "\n// next.config.js - Sass configuration for Next.js\nconst path = require('path');\n\nmodule.exports = {\n  sassOptions: {\n    loadPaths: [path.join(__dirname, 'node_modules')],\n  },\n};\n";
     readonly customPalette: "\n// Custom Palette Theme for React\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/material' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n$my-palette: palette(\n  $primary: #2ab759,\n  $secondary: #f96a88,\n  $surface: #ffffff\n);\n\n:root {\n  --ig-theme: material;\n  --ig-theme-variant: light;\n  --ig-size-small: 1;\n  --ig-size-medium: 2;\n  --ig-size-large: 3;\n}\n\n@include palette($my-palette);\n@include elevations($material-elevations);\n@include typography(\n  $font-family: $typeface,\n  $type-scale: $type-scale\n);\n@include spacing();\n";
     readonly darkTheme: "\n// Dark Indigo Theme for React\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/indigo' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n:root {\n  --ig-theme: indigo;\n  --ig-theme-variant: dark;\n  --ig-size-small: 1;\n  --ig-size-medium: 2;\n  --ig-size-large: 3;\n}\n\n@include palette($palette);\n@include elevations($indigo-elevations);\n@include typography(\n  $font-family: $typeface,\n  $type-scale: $type-scale\n);\n@include spacing();\n";
 };

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

@@ -61,8 +61,8 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        // Add node_modules to include paths for @use statements
-        includePaths: ['node_modules'],
+        // Add node_modules to load paths for @use statements
+        loadPaths: ['node_modules'],
       },
     },
   },
@@ -74,7 +74,7 @@ const path = require('path');
 
 module.exports = {
   sassOptions: {
-    includePaths: [path.join(__dirname, 'node_modules')],
+    loadPaths: [path.join(__dirname, 'node_modules')],
   },
 };
 `,

package/dist/mcp/knowledge/sass-api.d.ts

@@ -11,8 +11,8 @@ export declare const IMPORT_PATHS: {
     readonly react: "igniteui-theming";
     /** Direct igniteui-theming module for Blazor */
     readonly blazor: "igniteui-theming";
-    /** Default for platform-agnostic code */
-    readonly default: "igniteui-theming";
+    /** Generic / platform-agnostic code */
+    readonly generic: "igniteui-theming";
 };
 /**
  * Get the appropriate import path for a platform.

package/dist/mcp/resources/presets.d.ts

@@ -15,11 +15,13 @@ export declare const RESOURCE_URIS: {
     readonly PLATFORM_WEBCOMPONENTS: "theming://platforms/webcomponents";
     readonly PLATFORM_REACT: "theming://platforms/react";
     readonly PLATFORM_BLAZOR: "theming://platforms/blazor";
+    readonly PLATFORM_GENERIC: "theming://platforms/generic";
     readonly PALETTES: "theming://presets/palettes";
     readonly PALETTES_LIGHT: "theming://presets/palettes/light";
     readonly PALETTES_DARK: "theming://presets/palettes/dark";
     readonly TYPOGRAPHY: "theming://presets/typography";
     readonly ELEVATIONS: "theming://presets/elevations";
+    readonly GUIDANCE_PLATFORM_SETUP: "theming://guidance/platform-setup";
     readonly GUIDANCE_COLORS: "theming://guidance/colors";
     readonly GUIDANCE_COLORS_RULES: "theming://guidance/colors/rules";
     readonly GUIDANCE_COLORS_USAGE: "theming://guidance/colors/usage";
@@ -62,6 +64,11 @@ export declare const RESOURCE_DEFINITIONS: ({
     name: string;
     description: string;
     mimeType: string;
+} | {
+    uri: "theming://platforms/generic";
+    name: string;
+    description: string;
+    mimeType: string;
 } | {
     uri: "theming://presets/palettes";
     name: string;
@@ -87,6 +94,11 @@ export declare const RESOURCE_DEFINITIONS: ({
     name: string;
     description: string;
     mimeType: string;
+} | {
+    uri: "theming://guidance/platform-setup";
+    name: string;
+    description: string;
+    mimeType: string;
 } | {
     uri: "theming://guidance/colors";
     name: string;

package/dist/mcp/resources/presets.js

@@ -9,6 +9,7 @@ import SIZING_MIXIN_DOC from "../knowledge/docs/layout/mixins/sizing.md.js";
 import SPACING_MIXIN_DOC from "../knowledge/docs/layout/mixins/spacing.md.js";
 import LAYOUT_OVERVIEW_DOC from "../knowledge/docs/layout/overview.md.js";
 import { PALETTE_PRESETS, LIGHT_PALETTE_PRESETS, DARK_PALETTE_PRESETS } from "../knowledge/palettes.js";
+import PLATFORM_SETUP_MARKDOWN from "../knowledge/docs/setup/platform.md.js";
 import { ANGULAR_USAGE_EXAMPLES, ANGULAR_PLATFORM } from "../knowledge/platforms/angular.js";
 import { BLAZOR_USAGE_EXAMPLES, BLAZOR_PLATFORM } from "../knowledge/platforms/blazor.js";
 import { ELEVATIONS, TYPE_SCALES, TYPEFACES, SCHEMAS } from "../knowledge/platforms/common.js";
@@ -26,12 +27,15 @@ const RESOURCE_URIS = {
   PLATFORM_WEBCOMPONENTS: `${RESOURCE_SCHEME}://platforms/webcomponents`,
   PLATFORM_REACT: `${RESOURCE_SCHEME}://platforms/react`,
   PLATFORM_BLAZOR: `${RESOURCE_SCHEME}://platforms/blazor`,
+  PLATFORM_GENERIC: `${RESOURCE_SCHEME}://platforms/generic`,
   // Preset resources
   PALETTES: `${RESOURCE_SCHEME}://presets/palettes`,
   PALETTES_LIGHT: `${RESOURCE_SCHEME}://presets/palettes/light`,
   PALETTES_DARK: `${RESOURCE_SCHEME}://presets/palettes/dark`,
   TYPOGRAPHY: `${RESOURCE_SCHEME}://presets/typography`,
   ELEVATIONS: `${RESOURCE_SCHEME}://presets/elevations`,
+  // Platform setup guidance
+  GUIDANCE_PLATFORM_SETUP: `${RESOURCE_SCHEME}://guidance/platform-setup`,
   // Color guidance resources (organized under colors/ parent)
   GUIDANCE_COLORS: `${RESOURCE_SCHEME}://guidance/colors`,
   GUIDANCE_COLORS_RULES: `${RESOURCE_SCHEME}://guidance/colors/rules`,
@@ -80,6 +84,12 @@ const RESOURCE_DEFINITIONS = [
     description: "Ignite UI for Blazor platform configuration, schemas, palettes, and usage examples",
     mimeType: "application/json"
   },
+  {
+    uri: RESOURCE_URIS.PLATFORM_GENERIC,
+    name: "Generic Platform Config",
+    description: "Platform-agnostic theming configuration using igniteui-theming standalone, with presets for schemas, palettes, typography, and elevations",
+    mimeType: "application/json"
+  },
   // Preset resources
   {
     uri: RESOURCE_URIS.PALETTES,
@@ -111,6 +121,13 @@ const RESOURCE_DEFINITIONS = [
     description: "Elevation/shadow presets (Material and Indigo)",
     mimeType: "application/json"
   },
+  // Platform setup guidance
+  {
+    uri: RESOURCE_URIS.GUIDANCE_PLATFORM_SETUP,
+    name: "Platform Setup Guide",
+    description: "Instruction guide for platform detection, Sass configuration, dependency handling, and the recommended theming workflow. Read this before generating theme code.",
+    mimeType: "text/markdown"
+  },
   // Color guidance resources (organized under colors/ parent)
   {
     uri: RESOURCE_URIS.GUIDANCE_COLORS,
@@ -199,7 +216,7 @@ const RESOURCE_HANDLERS = /* @__PURE__ */ new Map([
     () => ({
       content: JSON.stringify(
         {
-          platforms: ["angular", "webcomponents", "react", "blazor"],
+          platforms: ["angular", "webcomponents", "react", "blazor", "generic"],
           metadata: PLATFORM_METADATA
         },
         null,
@@ -285,6 +302,24 @@ const RESOURCE_HANDLERS = /* @__PURE__ */ new Map([
       mimeType: "application/json"
     })
   ],
+  [
+    RESOURCE_URIS.PLATFORM_GENERIC,
+    () => ({
+      content: JSON.stringify(
+        {
+          platform: PLATFORM_METADATA.generic,
+          schemas: SCHEMAS,
+          palettes: PALETTE_PRESETS,
+          typefaces: TYPEFACES,
+          typography: TYPOGRAPHY_PRESETS,
+          elevations: ELEVATION_PRESETS
+        },
+        null,
+        2
+      ),
+      mimeType: "application/json"
+    })
+  ],
   // Preset resources
   [
     RESOURCE_URIS.PALETTES,
@@ -321,6 +356,14 @@ const RESOURCE_HANDLERS = /* @__PURE__ */ new Map([
       mimeType: "application/json"
     })
   ],
+  // Platform setup guidance
+  [
+    RESOURCE_URIS.GUIDANCE_PLATFORM_SETUP,
+    () => ({
+      content: PLATFORM_SETUP_MARKDOWN,
+      mimeType: "text/markdown"
+    })
+  ],
   // Color guidance resources
   [
     RESOURCE_URIS.GUIDANCE_COLORS,

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

@@ -15,7 +15,7 @@
  */
 export declare const FRAGMENTS: {
     /** Platform parameter description */
-    readonly PLATFORM: "Target platform: \"angular\" for Ignite UI for Angular, \"webcomponents\" for Ignite UI for Web Components, \"react\" for Ignite UI for React, or \"blazor\" for Ignite UI for Blazor. If omitted, generates generic code. Use detect_platform tool first to auto-detect from project files.";
+    readonly PLATFORM: "Target platform: \"angular\" for Ignite UI for Angular, \"webcomponents\" for Ignite UI for Web Components, \"react\" for Ignite UI for React, \"blazor\" for Ignite UI for Blazor, or \"generic\" for platform-agnostic output (standalone igniteui-theming usage). If omitted, generates generic code. Use detect_platform tool first to auto-detect from project files.";
     /** Color format examples - CSS Color Level 4 */
     readonly COLOR_FORMAT: "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\").";
     /** Variant parameter description */
@@ -38,16 +38,16 @@ 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 Ignite UI platform by analyzing package.json 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</detection_signals>\n\n<output>\n  Returns:\n  - platform: \"angular\" | \"webcomponents\" | \"react\" | \"blazor\" | null\n  - confidence: \"high\" | \"medium\" | \"low\" | \"none\"\n  - ambiguous: true if multiple 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</output>\n\n<ambiguous_handling>\n  When multiple 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>";
+    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 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</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</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</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</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</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</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</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</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>";
-    readonly get_component_design_tokens: "Discover available design tokens (themeable properties) for an Ignite UI component.\n\n<use_case>\n  ALWAYS call this tool FIRST before using create_component_theme. It returns the\n  exact token names that can be customized for a component, preventing hallucination\n  of invalid property names.\n</use_case>\n\n<workflow>\n  1. Provide the component name (e.g., \"button\", \"avatar\", \"grid\")\n  2. Receive list of all available tokens with their types and descriptions\n  3. Use the token names in create_component_theme\n</workflow>\n\n<important_notes>\n  COMPONENT NAMING:\n  - Basic components: Use simple names like \"avatar\", \"badge\", \"card\"\n  - Button variants: Use specific variant names like \"flat-button\", \"contained-button\",\n    \"outlined-button\", \"fab-button\" (NOT just \"button\")\n  - Icon button variants: \"flat-icon-button\", \"contained-icon-button\", \"outlined-icon-button\"\n\n  COMPOUND COMPONENTS:\n  - Some components like \"combo\", \"grid\", \"select\" are compound - they use multiple\n    internal components that each need their own theme\n  - The response includes \"Related themes and token derivations\" listing each related\n    theme and, where available, derivation hints showing how child token values relate\n    to parent/sibling tokens (e.g., \"foreground → adaptive-contrast of calendar.content-background\")\n  - Follow derivation hints when setting child token values. If the user specifies an\n    explicit value, use that instead of the derived value.\n  - For each related theme: call get_component_design_tokens, then create_component_theme\n    using the selector assigned to that child under \"Scopes by Platform\" and \"Related themes\"\n  - Use `@include tokens(child-theme(...))` for each related theme inside the appropriate\n    scope selector\n\n  VARIANTS INFO:\n  - If you query a base component that has variants (e.g., \"button\"), the response\n    lists available variants to help you choose the right one\n</important_notes>\n\n<output>\n  Returns:\n  - component: The component name\n  - themeFunctionName: The Sass function to use (e.g., \"button-theme\")\n  - description: Information about the component theme\n  - tokens: Array of { name, type, description } for each available token\n  - variants: (if applicable) List of variant-specific theme names\n  - compoundInfo: (if applicable) Related themes with token derivation hints and guidance\n</output>\n\n<error_handling>\n  - Unknown component: Returns list of similar component names as suggestions\n  - Partial match: If query partially matches multiple components, returns all matches\n</error_handling>\n\n<example>\n  Get tokens for flat button:\n  {\n    \"component\": \"flat-button\"\n  }\n\n  Returns tokens like: background, foreground, hover-background, border-radius, etc.\n</example>\n\n<related_tools>\n  - create_component_theme: Use the discovered tokens to create a custom theme\n</related_tools>";
+    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>";
+    readonly get_component_design_tokens: "Discover available design tokens (themeable properties) for an Ignite UI component.\n\n<use_case>\n  ALWAYS call this tool FIRST before using create_component_theme. It returns the\n  exact token names that can be customized for a component, preventing hallucination\n  of invalid property names.\n\n  NOTE: This tool returns tokens for Ignite UI framework components. It is NOT useful\n  when the detected platform is \"generic\" — component theming requires a specific\n  Ignite UI product (angular, webcomponents, react, or blazor).\n</use_case>\n\n<workflow>\n  1. Provide the component name (e.g., \"button\", \"avatar\", \"grid\")\n  2. Receive list of all available tokens with their types and descriptions\n  3. Use the token names in create_component_theme\n</workflow>\n\n<important_notes>\n  COMPONENT NAMING:\n  - Basic components: Use simple names like \"avatar\", \"badge\", \"card\"\n  - Button variants: Use specific variant names like \"flat-button\", \"contained-button\",\n    \"outlined-button\", \"fab-button\" (NOT just \"button\")\n  - Icon button variants: \"flat-icon-button\", \"contained-icon-button\", \"outlined-icon-button\"\n\n  COMPOUND COMPONENTS:\n  - Some components like \"combo\", \"grid\", \"select\" are compound - they use multiple\n    internal components that each need their own theme\n  - The response includes \"Related themes and token derivations\" listing each related\n    theme and, where available, derivation hints showing how child token values relate\n    to parent/sibling tokens (e.g., \"foreground → adaptive-contrast of calendar.content-background\")\n  - Follow derivation hints when setting child token values. If the user specifies an\n    explicit value, use that instead of the derived value.\n  - For each related theme: call get_component_design_tokens, then create_component_theme\n    using the selector assigned to that child under \"Scopes by Platform\" and \"Related themes\"\n  - Use `@include tokens(child-theme(...))` for each related theme inside the appropriate\n    scope selector\n\n  VARIANTS INFO:\n  - If you query a base component that has variants (e.g., \"button\"), the response\n    lists available variants to help you choose the right one\n</important_notes>\n\n<output>\n  Returns:\n  - component: The component name\n  - themeFunctionName: The Sass function to use (e.g., \"button-theme\")\n  - description: Information about the component theme\n  - tokens: Array of { name, type, description } for each available token\n  - variants: (if applicable) List of variant-specific theme names\n  - compoundInfo: (if applicable) Related themes with token derivation hints and guidance\n</output>\n\n<error_handling>\n  - Unknown component: Returns list of similar component names as suggestions\n  - Partial match: If query partially matches multiple components, returns all matches\n</error_handling>\n\n<example>\n  Get tokens for flat button:\n  {\n    \"component\": \"flat-button\"\n  }\n\n  Returns tokens like: background, foreground, hover-background, border-radius, etc.\n</example>\n\n<related_tools>\n  - create_component_theme: Use the discovered tokens to create a custom theme\n</related_tools>";
     readonly create_component_theme: "Generate Sass or CSS code to customize an Ignite UI component's appearance using design tokens.\n\n<use_case>\n  Use this tool AFTER calling get_component_design_tokens to customize specific\n  component styles. The generated code can be included in your theme file to\n  override default component appearances.\n</use_case>\n\n<workflow>\n  1. First call get_component_design_tokens to discover available tokens\n  2. Choose which tokens to customize based on your design requirements\n  3. Specify designSystem and variant to match the global theme or the one explicitly requested (defaults to Material light)\n  4. Call this tool with component name, token values, and output format (\"sass\" or \"css\")\n  5. Receive ready-to-use Sass or CSS code with the component theme\n</workflow>\n\n<important_notes>\n  DESIGN SYSTEM & VARIANT:\n  - designSystem: Choose \"material\" (default), \"bootstrap\", \"fluent\", or \"indigo\"\n  - variant: Choose \"light\" (default) or \"dark\"\n  - The correct schema (e.g., $light-bootstrap-schema, $dark-material-schema) is\n    automatically selected and passed to the component theme function\n  - The correct output: Choose output format based on the target file type (Sass vs CSS)\n  - This ensures component tokens inherit proper defaults from the design system\n\n  TOKEN VALIDATION:\n  - All provided token names are validated against the component's schema\n  - Invalid tokens return an error with the list of valid token names\n  - You don't need to specify all tokens - only those you want to customize (prefer PRIMARY tokens to minimize the number of overrides)\n\n  TOKEN VALUE FORMATS:\n  - Colors: Any valid CSS color format (hex, rgb, hsl, named colors)\n  - Dimensions: Include units (e.g., \"8px\", \"0.5rem\", \"2em\")\n  - Border radius: Can be single value or shorthand (\"8px\" or \"8px 8px 0 0\")\n  - Shadows: Full box-shadow syntax (\"0 2px 4px rgba(0,0,0,0.1)\")\n\n  SELECTORS:\n  - Default selector is auto-detected based on platform and component\n  - Angular: Uses \"igx-*\" element selectors or attribute selectors\n  - Web Components: Uses \"igc-*\" element selectors\n  - Custom selectors supported for targeted styling (e.g., \".my-button\")\n\n  SASS OUTPUT:\n  - Generated code uses `@include tokens($theme)` to apply the theme\n  - The tokens mixin emits --ig-{component}-{token} CSS custom properties in global mode\n\n  COMPOUND COMPLETENESS:\n  - If the user asks for a compound component, the response is incomplete unless\n    related theme calls are also generated\n  - Use the related themes list from get_component_design_tokens to drive the sequence\n  - All related themes should use the compound component's selector as the wrapper\n  - Follow token derivation hints to set child token values consistently\n</important_notes>\n\n<output>\n  Returns:\n  - Generated Sass or CSS code with:\n    - Platform-specific @use import (Sass only)\n    - Theme function call with $schema parameter and provided token values (Sass only)\n    - tokens mixin to apply the theme to the selector (Sass only)\n  - Description of what was generated\n  - Design system and variant used\n  - List of tokens used\n</output>\n\n<error_handling>\n  - Unknown component: Returns error with list of available components\n  - Invalid tokens: Returns error listing invalid tokens and valid alternatives\n  - Invalid color format: Returns error with format guidance\n</error_handling>\n\n<example>\n  Custom blue flat button with rounded corners (Angular, Material Design):\n  {\n    \"platform\": \"angular\",\n    \"designSystem\": \"material\",\n    \"variant\": \"light\",\n    \"component\": \"flat-button\",\n    \"tokens\": {\n      \"foreground\": \"#1976d2\",\n    }\n  }\n\n  Generates:\n  ```scss\n  @use 'igniteui-angular/theming' as *;\n\n  $custom-flat-button-theme: flat-button-theme(\n    $schema: $light-material-schema,\n    $foreground: #1976d2,\n  );\n\n  .igx-button--flat {\n    @include tokens($custom-flat-button-theme);\n  }\n  ```\n\n  Bootstrap dark theme example:\n  {\n    \"platform\": \"webcomponents\",\n    \"designSystem\": \"bootstrap\",\n    \"variant\": \"dark\",\n    \"component\": \"avatar\",\n    \"tokens\": {\n      \"background\": \"#ff5722\"\n    }\n  }\n\n  Generates:\n  ```scss\n  @use 'igniteui-theming' as *;\n\n  $custom-avatar-theme: avatar-theme(\n    $schema: $dark-bootstrap-schema,\n    $background: #ff5722\n  );\n\n  igc-avatar {\n    @include tokens($custom-avatar-theme);\n  }\n  ```\n</example>\n\n<compound_example>\n  Date Picker (compound) — child themes may use different scoped selectors per platform.\n  Follow token derivation hints and scope assignments from get_component_design_tokens:\n  1) get_component_design_tokens { \"component\": \"date-picker\" }\n  2) create_component_theme { \"component\": \"date-picker\", ... }\n  3) create_component_theme { \"component\": \"calendar\", \"selector\": \".igx-date-picker\", ... }\n  4) create_component_theme { \"component\": \"flat-button\", \"selector\": \".igx-date-picker\", ... }\n  5) create_component_theme { \"component\": \"input-group\", \"selector\": \"igx-date-picker\", ... }\n\n  Each call generates `@include tokens($theme)` inside the assigned scope selector.\n  - If you are targeting Angular, use the Angular selectors from the scopes table.\n  - If you are targeting Web Components, use the Web Components selectors from the scopes table.\n  - If you are targeting React, use the React selectors from the scopes table.\n  - If you are targeting Blazor, use the Blazor selectors from the scopes table.\n  The tokens mixin emits --ig-{component}-{token} variables that child components\n  consume via var() fallback — no per-child selectors needed.\n</compound_example>\n\n<related_tools>\n  - detect_platform: Run to auto-detect platform for correct imports\n  - get_component_design_tokens: MUST call first to discover valid tokens\n  - create_theme: Use for full theme (palette + typography + elevations)\n</related_tools>";
     readonly get_color: "Retrieve a palette color from Ignite UI Theming as a CSS variable reference.\n\n<use_case>\n  Use this tool when you need to reference a specific palette color in CSS or Sass code.\n  Returns CSS variable references that work in both Sass and CSS contexts.\n\n  Common scenarios:\n  - Setting component backgrounds/foregrounds using theme colors\n  - Creating hover/focus states with opacity variations\n  - Ensuring text contrast against colored backgrounds\n</use_case>\n\n<workflow>\n  1. Specify the color family (primary, secondary, gray, etc.)\n  2. Optionally specify a shade variant (50-900, A100-A700)\n  3. Optionally request the contrast color for text readability\n  4. Optionally apply opacity for transparency effects\n</workflow>\n\n<output_examples>\n  Basic color:\n    { color: \"primary\" }\n    → var(--ig-primary-500)\n\n  Specific shade:\n    { color: \"primary\", variant: \"600\" }\n    → var(--ig-primary-600)\n\n  Contrast color:\n    { color: \"primary\", variant: \"600\", contrast: true }\n    → var(--ig-primary-600-contrast)\n\n  With opacity:\n    { color: \"primary\", opacity: 0.5 }\n    → hsl(from var(--ig-primary-500) h s l / 0.5)\n\n  Contrast with opacity:\n    { color: \"primary\", contrast: true, opacity: 0.7 }\n    → hsl(from var(--ig-primary-500-contrast) h s l / 0.7)\n</output_examples>\n\n<important_notes>\n  CSS VARIABLE NAMING:\n  - Base colors: --ig-{color}-{variant} (e.g., --ig-primary-500)\n  - Contrast: --ig-{color}-{variant}-contrast (e.g., --ig-primary-500-contrast)\n\n  GRAY RESTRICTIONS:\n  - Gray only supports standard shades (50-900), not accent shades (A100-A700)\n\n  OPACITY HANDLING:\n  - Uses CSS relative color syntax: hsl(from <color> h s l / <opacity>)\n  - Works in modern browsers (CSS Color Level 4)\n  - For Sass projects, this syntax is passed through unchanged\n</important_notes>\n\n<related_tools>\n  - create_palette: Generate a complete palette with these colors\n  - create_component_theme: Use retrieved colors in component theming\n</related_tools>";
     readonly read_resource: "Read a theming resource by URI. Returns reference data such as platform configurations, color palette presets, typography presets, color guidance, and layout documentation.\n\n<use_case>\n  Use this tool to load reference data before or during theme generation. Other tools\n  reference these resources in their related_resources sections — call this tool with\n  the listed URI to retrieve the data.\n\n  Common scenarios:\n  - Load palette presets to see available colors before creating a palette\n  - Read color guidance to understand shade usage and semantic roles\n  - Check platform configuration for usage examples and supported features\n  - Read layout documentation for spacing, sizing, and roundness details\n</use_case>\n\n<workflow>\n  1. Identify the resource URI from the available_resources list or from a related_resources hint in another tool\n  2. Call this tool with the URI\n  3. Use the returned data to inform your next action\n</workflow>\n\n<output>\n  Returns the resource content as text. Format depends on the resource:\n  - application/json resources return JSON data\n  - text/markdown resources return Markdown documentation\n</output>\n\n<error_handling>\n  If the URI is not found, returns the list of all available resource URIs.\n</error_handling>";
@@ -57,7 +57,7 @@ export declare const TOOL_DESCRIPTIONS: {
  * Include valid values, defaults, formats, and constraints.
  */
 export declare const PARAM_DESCRIPTIONS: {
-    readonly platform: "Target platform: \"angular\" for Ignite UI for Angular, \"webcomponents\" for Ignite UI for Web Components, \"react\" for Ignite UI for React, or \"blazor\" for Ignite UI for Blazor. If omitted, generates generic code. Use detect_platform tool first to auto-detect from project files.";
+    readonly platform: "Target platform: \"angular\" for Ignite UI for Angular, \"webcomponents\" for Ignite UI for Web Components, \"react\" for Ignite UI for React, \"blazor\" for Ignite UI for Blazor, or \"generic\" for platform-agnostic output (standalone igniteui-theming usage). If omitted, generates generic code. Use detect_platform tool first to auto-detect from project files.";
     readonly licensed: "Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). Note: igniteui-theming is always free/OSS for all other platforms.";
     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\".";
@@ -92,7 +92,7 @@ export declare const PARAM_DESCRIPTIONS: {
     readonly tokens: "Object mapping token names to values. Token names must be valid for the component (use get_component_design_tokens to discover them). Values can be CSS colors, dimensions with units, or other Sass-compatible values. Example: { \"background\": \"#1976D2\", \"border-radius\": \"8px\" }";
     readonly selector: "Optional CSS selector to scope the theme. If omitted, uses the platform's default selector for the component. For Angular: \"igx-*\" selectors, for Web Components: \"igc-*\" selectors. You can specify custom selectors like \".my-custom-button\" for targeted styling.";
     readonly themeName: "Optional name for the generated theme variable (without $ prefix). If omitted, auto-generates based on component name (e.g., \"$custom-button-theme\").";
-    readonly layoutComponent: "Optional component name to scope the layout change (e.g., \"flat-button\", \"calendar\", \"avatar\"). If omitted, the change applies globally via :root.";
+    readonly layoutComponent: "Optional component name to scope the layout change (e.g., \"flat-button\", \"calendar\", \"avatar\"). If omitted, the change applies globally via :root. Note: component targets Ignite UI framework selectors — do not use with platform \"generic\". Use \"scope\" instead for custom CSS selectors.";
     readonly scope: "Optional CSS selector scope for the change (e.g., \".my-theme\", \":root\", \"#app\"). Ignored when component is provided.";
     readonly sizeValue: "Size value to set for --ig-size. Accepts \"small\" (1), \"medium\" (2), \"large\" (3), or numeric 1, 2, 3 only.";
     readonly spacing: "Spacing scale multiplier for --ig-spacing. 0 = none, 1 = default, 2 = double. Fractions allowed.";