igniteui-theming 25.0.0 → 25.0.1

package/README.md

@@ -152,7 +152,7 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
 
 ```json
 {
-  "mcp.servers": {
+  "servers": {
     "igniteui-theming": {
       "command": "node",
       "args": ["/absolute/path/to/igniteui-theming/dist/mcp/index.js"]
@@ -165,7 +165,7 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
 
 ```json
 {
-  "mcp.servers": {
+  "servers": {
     "igniteui-theming": {
       "command": "npx",
       "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]

package/dist/mcp/generators/css.js

@@ -78,12 +78,7 @@ function formatCssOutput(css, description) {
   return header + css;
 }
 async function generateComponentThemeCss(options) {
-  const {
-    getComponentTheme,
-    getComponentSelector,
-    getVariablePrefix,
-    SCHEMA_PRESETS
-  } = await import("../knowledge/index.js");
+  const { getComponentTheme, getComponentSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
   const { toVariableName } = await import("../utils/sass.js");
   const theme = getComponentTheme(options.component);
   if (!theme) {
@@ -104,8 +99,6 @@ async function generateComponentThemeCss(options) {
     options.platform
   );
   const selector = options.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : options.component);
-  const prefix = getVariablePrefix(options.platform);
-  `${prefix}-${options.component}`;
   const sassCode = `
 @use 'sass/themes' as *;
 @use 'sass/themes/schemas' as *;

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

@@ -1,6 +1,6 @@
 import { CreateElevationsInput, CreatePaletteInput, CreateThemeInput, CreateTypographyInput, DesignSystem, GeneratedCode, Platform, ThemeVariant } from '../utils/types.js';
 export type { ElevationsCodeOptions, PaletteCodeOptions, PaletteCodeResult, TypographyCodeOptions, } from '../utils/sass.js';
-export { generateElevationsCode, generateHeader, generatePaletteCode, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
+export { generateElevationsCode, generateHeader, generatePaletteCode, generatePresetImports, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
 /**
  * Generate a palette definition.
  */

package/dist/mcp/generators/sass.js

@@ -4,7 +4,7 @@ import { generateAngularThemeSass } from "../knowledge/platforms/angular.js";
 import { SCHEMAS } from "../knowledge/platforms/common.js";
 import { generateWebComponentsThemeSass } from "../knowledge/platforms/webcomponents.js";
 import { TYPOGRAPHY_PRESETS } from "../knowledge/typography.js";
-import { toVariableName, generateHeader, generateUseStatement, quoteFontFamily } from "../utils/sass.js";
+import { generateUseStatement, toVariableName, generatePresetImports, generateHeader, quoteFontFamily } from "../utils/sass.js";
 import { generateElevationsCode, generatePaletteCode, generateTypographyCode } from "../utils/sass.js";
 function generatePalette(input) {
   const variant = input.variant ?? "light";
@@ -42,8 +42,16 @@ function generateTypography(input) {
   const typeScaleVar = `$${designSystem}-type-scale`;
   const preset = TYPOGRAPHY_PRESETS[designSystem];
   const typeface = input.fontFamily || preset.typeface;
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeTypography: true
+  });
+  const imports = [
+    generateUseStatement(input.platform, input.licensed),
+    ...presetImports
+  ].join("\n");
   const code = `${generateHeader(`Typography setup using ${designSystem} type scale`)}
-${generateUseStatement(input.platform, input.licensed)}
+${imports}
 
 // Typography setup with ${designSystem} type scale
 @include typography(
@@ -60,8 +68,16 @@ ${generateUseStatement(input.platform, input.licensed)}
 function generateElevations(input) {
   const preset = input.designSystem ?? "material";
   const elevationsVar = `$${preset}-elevations`;
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeElevations: true
+  });
+  const imports = [
+    generateUseStatement(input.platform, input.licensed),
+    ...presetImports
+  ].join("\n");
   const code = `${generateHeader(`Elevations setup using ${preset} preset`)}
-${generateUseStatement(input.platform, input.licensed)}
+${imports}
 
 // Elevations setup with ${preset} shadows
 @include elevations(${elevationsVar});
@@ -165,12 +181,18 @@ function generateGenericTheme(input, designSystem, variant) {
   } else {
     paletteArgs.push(`$surface: ${variant === "dark" ? "#222222" : "white"}`);
   }
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeTypography,
+    includeElevations
+  });
   const sections = [
     generateHeader(
       `Complete ${variant} theme based on ${designSystem} design system`
     ),
     '// NOTE: Specify platform ("angular" or "webcomponents") for optimized output',
     generateUseStatement(input.platform, input.licensed),
+    ...presetImports,
     "",
     `// ${themeName} palette`,
     `${paletteVar}: palette(`,
@@ -263,6 +285,7 @@ export {
   generateHeader,
   generatePalette,
   generatePaletteCode,
+  generatePresetImports,
   generateTheme,
   generateTypography,
   generateTypographyCode,

package/dist/mcp/index.js

@@ -21,7 +21,7 @@ import { SHADE_LEVELS, ACCENT_SHADE_LEVELS, PALETTE_COLOR_GROUPS } from "./utils
 function createServer() {
   const server = new McpServer({
     name: "igniteui-theming",
-    version: "v25.0.0",
+    version: "v25.0.1",
     description: "Generate Sass theming code for Ignite UI components - create palettes, typography, elevations, and complete themes"
   });
   registerTools(server);
@@ -276,7 +276,7 @@ function buildReadResourceDescription() {
   const groups = {
     Platforms: [],
     Presets: [],
-    "Color Guidance": [],
+    Guidance: [],
     "Layout Docs": []
   };
   for (const r of RESOURCE_DEFINITIONS) {
@@ -285,7 +285,7 @@ function buildReadResourceDescription() {
     } else if (r.uri.includes("://presets/")) {
       groups.Presets.push(r);
     } else if (r.uri.includes("://guidance/")) {
-      groups["Color Guidance"].push(r);
+      groups.Guidance.push(r);
     } else if (r.uri.includes("://docs/")) {
       groups["Layout Docs"].push(r);
     }

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,