igniteui-theming/dist/mcp/knowledge/platforms/angular.js

A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.

import { PALETTE_PRESETS } from "../palettes.js";
import { PALETTES, SCHEMAS, TYPEFACES, TYPE_SCALES } from "./common.js";
import { generatePaletteCode, generateTypographyCode, generateUseStatement, quoteFontFamily } from "../../utils/sass.js";
//#region src/knowledge/platforms/angular.ts
/**
* Ignite UI for Angular Platform Knowledge
*
* This module contains platform-specific information for generating
* valid Sass theme code for Ignite UI for Angular applications.
*
* Key differences from igniteui-theming:
* - Uses `igniteui-angular/theming` module (forwards igniteui-theming with overrides)
* - Exposes `core()` and `theme()` mixins (Angular-specific, not in igniteui-theming)
* - Typography is overridden with Angular-specific implementation
* - Requires `ig-typography` CSS class on root element
*/
var ANGULAR_PLATFORM = {
	id: "angular",
	name: "Ignite UI for Angular",
	packageName: "igniteui-angular",
	themingModule: "igniteui-angular/theming",
	detectionPatterns: ["igniteui-angular", "@infragistics/igniteui-angular"],
	rootClass: "ig-typography"
};
/**
* Generate Sass code for an Angular theme
*
* Uses shared code generation helpers from utils/sass.ts for:
* - @use statement (generateUseStatement)
* - Palette code (generatePaletteCode)
* - Typography code (generateTypographyCode)
*/
function generateAngularThemeSass(template) {
	const { designSystem, variant, primaryColor, secondaryColor, surfaceColor, grayColor, customPaletteName = "$my-palette", fontFamily, includeTypography = true, coreOptions = {}, themeOptions = {} } = template;
	const lines = [
		"// Generated by Ignite UI Theming MCP Server",
		"// Platform: Ignite UI for Angular",
		"",
		"// Import the theming module",
		generateUseStatement("angular"),
		""
	];
	const hasCustomColors = primaryColor || secondaryColor || surfaceColor;
	let paletteVariable;
	if (hasCustomColors) {
		const presetColors = PALETTE_PRESETS[`${variant}-${designSystem}-palette`];
		const paletteResult = generatePaletteCode({
			primary: primaryColor || presetColors.primary,
			secondary: secondaryColor || presetColors.secondary,
			surface: surfaceColor || presetColors.surface,
			gray: grayColor,
			variableName: customPaletteName.replace(/^\$/, ""),
			useVariableReferences: true
		});
		lines.push("// Custom color palette");
		lines.push(...paletteResult.colorVariables);
		lines.push("");
		lines.push(...paletteResult.paletteDefinition);
		lines.push("");
		paletteVariable = paletteResult.variableName;
	} else paletteVariable = PALETTES[variant][designSystem];
	lines.push("// IMPORTANT: Always include core first!");
	const coreArgs = [];
	if (coreOptions.printLayout === false) coreArgs.push("$print-layout: false");
	if (coreOptions.enhancedAccessibility) coreArgs.push("$enhanced-accessibility: true");
	if (coreArgs.length > 0) lines.push(`@include core(${coreArgs.join(", ")});`);
	else lines.push("@include core();");
	if (includeTypography) {
		const typefaceValue = fontFamily ? quoteFontFamily(fontFamily) : TYPEFACES[designSystem];
		const typeScale = TYPE_SCALES[designSystem];
		const typographyLines = generateTypographyCode({
			fontFamily: typefaceValue,
			typeScaleVar: typeScale
		});
		lines.push(...typographyLines);
	}
	const schema = SCHEMAS[variant][designSystem];
	const themeArgs = [];
	themeArgs.push(`  $palette: ${paletteVariable}`);
	themeArgs.push(`  $schema: ${schema}`);
	if (themeOptions.roundness !== void 0) themeArgs.push(`  $roundness: ${themeOptions.roundness}`);
	if (themeOptions.elevation === false) themeArgs.push("  $elevation: false");
	if (themeOptions.elevations) themeArgs.push(`  $elevations: ${themeOptions.elevations}`);
	if (themeOptions.exclude && themeOptions.exclude.length > 0) themeArgs.push(`  $exclude: (${themeOptions.exclude.join(", ")})`);
	lines.push("");
	lines.push("// Apply the theme");
	lines.push("@include theme(");
	lines.push(themeArgs.join(",\n"));
	lines.push(");");
	return lines.join("\n");
}
/**
* Example usage documentation
*/
var ANGULAR_USAGE_EXAMPLES = {
	basic: `
// Basic Material Light Theme
@use "igniteui-angular/theming" as *;

@include core();
@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);
@include theme(
  $palette: $light-material-palette,
  $schema: $light-material-schema
);
`,
	customPalette: `
// Custom Palette Theme
@use "igniteui-angular/theming" as *;

$my-palette: palette(
  $primary: #2ab759,
  $secondary: #f96a88,
  $surface: #ffffff
);

@include core();
@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);
@include theme(
  $palette: $my-palette,
  $schema: $light-material-schema
);
`,
	darkTheme: `
// Dark Indigo Theme
@use "igniteui-angular/theming" as *;

@include core();
@include typography(
  $font-family: $indigo-typeface,
  $type-scale: $indigo-type-scale
);
@include theme(
  $palette: $dark-indigo-palette,
  $schema: $dark-indigo-schema
);
`,
	excludeComponents: `
// Theme with excluded components
@use "igniteui-angular/theming" as *;

$excluded-components: (igx-avatar, igx-badge);

@include core();
@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);
@include theme(
  $palette: $light-material-palette,
  $schema: $light-material-schema,
  $exclude: $excluded-components
);
`,
	enhancedAccessibility: `
// Theme with enhanced accessibility
@use "igniteui-angular/theming" as *;

@include core($enhanced-accessibility: true);
@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);
@include theme(
  $palette: $light-material-palette,
  $schema: $light-material-schema
);
`
};
//#endregion
export { ANGULAR_PLATFORM, ANGULAR_USAGE_EXAMPLES, generateAngularThemeSass };