igniteui-theming 25.2.0 → 26.0.0

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

@@ -1,28 +1,10 @@
-import { getComponentSelector, getCompoundComponentInfo, getTokenDerivationsForChild, getVariants, hasVariants, isCompoundComponent } from "../../knowledge/component-metadata.js";
+import { COMPONENT_METADATA, getComponentSelector, getCompoundComponentInfo, getTokenDerivationsForChild, getVariants, hasVariants, isCompoundComponent } from "../../knowledge/component-metadata.js";
 import { COMPONENT_NAMES, resolveComponentTheme, searchComponents } from "../../knowledge/component-themes.js";
 import "../../knowledge/index.js";
 //#region src/tools/handlers/component-tokens.ts
 async function handleGetComponentDesignTokens(params) {
 	const { component } = params;
 	const normalizedName = component.toLowerCase().trim();
-	const formatSelectorList = (selectors) => {
-		if (!selectors || selectors.length === 0) return "N/A";
-		return `\`${Array.isArray(selectors) ? selectors.join(" | ") : selectors}\``;
-	};
-	const getScopeSelectorForPlatform = (compoundInfo, componentName, scopeName, platform) => {
-		const selectorPlatform = platform === "angular" ? "angular" : "webcomponents";
-		if (scopeName === "inline") {
-			const selectors = getComponentSelector(componentName, platform);
-			return formatSelectorList(selectors.length > 0 ? selectors.length === 1 ? selectors[0] : selectors : null);
-		}
-		const scope = compoundInfo.additionalScopes?.[scopeName];
-		if (!scope) return "N/A";
-		return formatSelectorList(scope[selectorPlatform]);
-	};
-	const resolveChildScopeName = (compoundInfo, childThemeName, platform) => {
-		const scopePlatform = platform === "angular" ? "angular" : "webcomponents";
-		return (compoundInfo?.childScopes?.[childThemeName])?.[scopePlatform] ?? "inline";
-	};
 	const resolution = resolveComponentTheme(normalizedName);
 	const theme = resolution?.theme;
 	if (!theme) {
@@ -49,27 +31,15 @@ ${suggestions.length === 0 ? `\nTotal available: ${COMPONENT_NAMES.length} compo
 **Tip:** For button variants, use specific names like "flat-button", "contained-button", "outlined-button", or "fab-button".`
 		}] };
 	}
-	const PLATFORM_GROUPS = [
-		{
-			label: "Angular",
-			platform: "angular"
-		},
-		{
-			label: "Web Components",
-			platform: "webcomponents"
-		},
-		{
-			label: "Blazor",
-			platform: "blazor"
-		},
-		{
-			label: "React",
-			platform: "react"
-		}
-	];
 	const responseParts = [];
 	responseParts.push(`Implement a theme for the \`${normalizedName}\` component using the following guidance.`);
 	responseParts.push("");
+	const metadata = COMPONENT_METADATA[normalizedName];
+	if (metadata?.childOf) {
+		const parentName = metadata.childOf;
+		responseParts.push(`**Note:** \`${normalizedName}\` is a child of the \`${parentName}\` component. Its styling is controlled through the \`${parentName}\` theme — all tokens below apply at the ${parentName} level.`);
+		responseParts.push("");
+	}
 	responseParts.push(`**Theme Function:** \`${theme.themeFunctionName}()\``);
 	responseParts.push("");
 	if (hasVariants(normalizedName)) {
@@ -80,41 +50,60 @@ ${suggestions.length === 0 ? `\nTotal available: ${COMPONENT_NAMES.length} compo
 		responseParts.push("Consider using the specific variant theme for more targeted styling.");
 		responseParts.push("");
 	}
+	const primaryNames = new Set((theme.primaryTokens ?? []).map((pt) => pt.name));
+	if (theme.primaryTokens && theme.primaryTokens.length > 0) {
+		responseParts.push("**✅ Primary Tokens — USE THESE:**");
+		responseParts.push("");
+		responseParts.push("Use ONLY these tokens when creating the initial theme. The framework auto-derives all other tokens from these.");
+		responseParts.push("");
+		responseParts.push("| Token Name | Type | Description |");
+		responseParts.push("|------------|------|-------------|");
+		for (const token of theme.tokens) if (primaryNames.has(token.name)) {
+			const cleanDesc = token.description.replace(/\s+/g, " ").trim();
+			responseParts.push(`| \`${token.name}\` | ${token.type} | ${cleanDesc} |`);
+		}
+		if (theme.primaryTokensSummary) {
+			responseParts.push("");
+			responseParts.push(theme.primaryTokensSummary);
+		}
+		responseParts.push("");
+	}
 	if (isCompoundComponent(normalizedName)) {
 		const compoundInfo = getCompoundComponentInfo(normalizedName);
-		if (compoundInfo) {
-			responseParts.push("**Compound Component:**");
+		if (compoundInfo) if (compoundInfo.composed) {
+			responseParts.push("**Composed Compound Component:**");
 			responseParts.push(compoundInfo.description);
 			responseParts.push("");
-			responseParts.push("**Steps:**");
-			responseParts.push("1. Choose your platform and use the matching scopes below.");
-			responseParts.push("2. For each related theme: call `get_component_design_tokens`, then `create_component_theme` using the selector for that platform scope.");
-			responseParts.push("3. Apply `@include tokens(child-theme(...))` inside the scope selector.");
+			responseParts.push("⚡ **This is a composed component.** The framework automatically generates internal derived themes for all child components from the PRIMARY tokens. **Do NOT create separate themes** for the related components listed below — unless instructed otherwise by the user.");
 			responseParts.push("");
-			const allScopeNames = ["inline", ...Object.keys(compoundInfo.additionalScopes ?? {})];
-			for (const group of PLATFORM_GROUPS) {
-				responseParts.push(`**${group.label}:**`);
-				const scopeRows = allScopeNames.map((scopeName) => {
-					return {
-						scopeName,
-						selectorText: getScopeSelectorForPlatform(compoundInfo, normalizedName, scopeName, group.platform)
-					};
-				}).filter((row) => row.selectorText !== "N/A");
-				if (scopeRows.length > 0) {
-					responseParts.push("| Scope | Selector |");
-					responseParts.push("| --- | --- |");
-					responseParts.push(scopeRows.map((row) => `| ${row.scopeName} | ${row.selectorText} |`).join("\n"));
-					responseParts.push("");
-				}
-				responseParts.push(`**Related themes (${group.label})**`);
-				responseParts.push("| Theme | Scope | Selector |");
-				responseParts.push("| --- | --- | --- |");
-				responseParts.push(compoundInfo.relatedThemes.map((relatedTheme) => {
-					const scopeName = resolveChildScopeName(compoundInfo, relatedTheme, group.platform);
-					return `| \`${relatedTheme}\` | ${scopeName} | ${getScopeSelectorForPlatform(compoundInfo, normalizedName, scopeName, group.platform)} |`;
-				}).join("\n"));
+			responseParts.push(`**Internally themed children (auto-derived):** ${compoundInfo.relatedThemes.map((t) => `\`${t}\``).join(", ")}`);
+			responseParts.push("");
+			if (compoundInfo.guidance) {
+				responseParts.push("**Guidance:**");
+				responseParts.push(compoundInfo.guidance);
 				responseParts.push("");
 			}
+		} else {
+			responseParts.push("**Compound Component:**");
+			responseParts.push(compoundInfo.description);
+			responseParts.push("");
+			responseParts.push(`**Related themes:** ${compoundInfo.relatedThemes.map((t) => `\`${t}\``).join(", ")}`);
+			const angularSelectors = getComponentSelector(normalizedName, "angular");
+			const wcSelectors = getComponentSelector(normalizedName, "webcomponents");
+			const platformLines = [];
+			if (angularSelectors.length > 0) {
+				const selectorText = angularSelectors.length === 1 ? angularSelectors[0] : angularSelectors.join(" | ");
+				platformLines.push(`- **Angular:** \`${selectorText}\``);
+			}
+			if (wcSelectors.length > 0) {
+				const selectorText = wcSelectors.length === 1 ? wcSelectors[0] : wcSelectors.join(" | ");
+				platformLines.push(`- **Web Components / React / Blazor:** \`${selectorText}\``);
+			}
+			if (platformLines.length > 0) {
+				responseParts.push("Scope all related themes under the parent component selector:");
+				responseParts.push(platformLines.join("\n"));
+			}
+			responseParts.push("");
 			const derivationRows = compoundInfo.relatedThemes.flatMap((relatedTheme) => {
 				const derivations = getTokenDerivationsForChild(normalizedName, relatedTheme);
 				return Object.entries(derivations).map(([token, derivation]) => {
@@ -135,31 +124,18 @@ ${suggestions.length === 0 ? `\nTotal available: ${COMPONENT_NAMES.length} compo
 			}
 		}
 	}
-	if (theme.primaryTokens && theme.primaryTokens.length > 0) {
-		responseParts.push("**Primary Tokens:**");
-		for (const pt of theme.primaryTokens) responseParts.push(`- \`$${pt.name}\` — ${pt.description}`);
-		if (theme.primaryTokensSummary) {
-			responseParts.push("");
-			responseParts.push(theme.primaryTokensSummary);
-		}
-		responseParts.push("");
-	}
-	if (theme.tokens.length > 0) {
-		responseParts.push(`**Available Tokens (${theme.tokens.length}):**`);
+	const availableTokens = theme.tokens.filter((t) => !primaryNames.has(t.name));
+	if (availableTokens.length > 0) {
+		responseParts.push(`**\ud83d\udcd6 Available Tokens (${availableTokens.length}) \u2014 DO NOT USE unless the user explicitly requests a specific customization:**`);
 		responseParts.push("");
-		responseParts.push("| Token Name | Type | Description |");
-		responseParts.push("|------------|------|-------------|");
-		for (const token of theme.tokens) {
-			const cleanDesc = token.description.replace(/\s+/g, " ").trim();
-			responseParts.push(`| \`${token.name}\` | ${token.type} | ${cleanDesc} |`);
-		}
+		responseParts.push(availableTokens.map((t) => `\`${t.name}\``).join(", "));
 		responseParts.push("");
-	} else {
+	} else if (theme.tokens.length === 0) {
 		responseParts.push("**No customizable tokens available for this component.**");
 		responseParts.push("");
 	}
 	responseParts.push("---");
-	responseParts.push("**Next step:** Use `create_component_theme` with the tokens above to generate Sass/CSS code.");
+	responseParts.push("**Next step:** Use `create_component_theme` with ONLY the **primary tokens** above. Do NOT add available tokens unless the user explicitly asks for a specific one.");
 	return { content: [{
 		type: "text",
 		text: responseParts.join("\n")

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

@@ -1,6 +1,6 @@
 import { PALETTE_PRESETS } from "../../knowledge/palettes.js";
 import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
-import { generateCustomPaletteCode, generateHeader, generateUseStatement, toVariableName } from "../../utils/sass.js";
+import { SASS_USE_ASSEMBLY_NOTE, generateCustomPaletteCode, generateHeader, generateUseStatement, toVariableName } from "../../utils/sass.js";
 import { formatCssOutput, generateCustomPaletteCss } from "../../generators/css.js";
 import { formatCustomPaletteValidation, validateCustomPalette } from "../../validators/custom-palette.js";
 import "../../validators/index.js";
@@ -144,6 +144,7 @@ ${paletteLines.join("\n")}
 	responseParts.push("```scss");
 	responseParts.push(code.trimEnd());
 	responseParts.push("```");
+	responseParts.push(SASS_USE_ASSEMBLY_NOTE);
 	return { content: [{
 		type: "text",
 		text: responseParts.join("\n")

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

@@ -1,4 +1,5 @@
 import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
+import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js";
 import { generateElevations } from "../../generators/sass.js";
 //#region src/tools/handlers/elevations.ts
 /**
@@ -21,6 +22,7 @@ function handleCreateElevations(params) {
 	responseParts.push("```scss");
 	responseParts.push(result.code.trimEnd());
 	responseParts.push("```");
+	responseParts.push(SASS_USE_ASSEMBLY_NOTE);
 	return { content: [{
 		type: "text",
 		text: responseParts.join("\n")

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

@@ -31,6 +31,7 @@ ${list.map((name) => `- ${name}`).join("\n")}` };
 		if (scope) notes.push("Scope ignored because component was provided.");
 		const selectorsEntry = COMPONENT_METADATA[normalized].selectors;
 		let selectors = [];
+		if (!selectorsEntry) return { error: `**Error:** Component "${component}" does not have platform selectors. It may be a child sub-component — use its parent component for layout overrides.` };
 		if (platform && platform !== "generic") {
 			selectors = getComponentSelector(normalized, platform);
 			if (selectors.length === 0) {

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

@@ -1,4 +1,5 @@
 import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
+import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js";
 import { generatePalette } from "../../generators/sass.js";
 import { formatCssOutput, generatePaletteCss } from "../../generators/css.js";
 import { formatValidationResult, generateWarningComments, validatePaletteColors } from "../../validators/palette.js";
@@ -103,6 +104,7 @@ function handleSassOutput(params, validation) {
 	responseParts.push("```scss");
 	responseParts.push(finalCode.trimEnd());
 	responseParts.push("```");
+	responseParts.push(SASS_USE_ASSEMBLY_NOTE);
 	return { content: [{
 		type: "text",
 		text: responseParts.join("\n")

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

@@ -1,3 +1,4 @@
+import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js";
 import { generateTheme } from "../../generators/sass.js";
 import { analyzeThemeColorsForPalette, formatPaletteSuitabilityWarnings, formatValidationResult, generatePaletteSuitabilityComments, generateWarningComments, validatePaletteColors } from "../../validators/palette.js";
 import "../../validators/index.js";
@@ -80,6 +81,7 @@ async function handleCreateTheme(params) {
 	responseParts.push("```scss");
 	responseParts.push(finalCode.trimEnd());
 	responseParts.push("```");
+	responseParts.push(SASS_USE_ASSEMBLY_NOTE);
 	return { content: [{
 		type: "text",
 		text: responseParts.join("\n")

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

@@ -1,4 +1,5 @@
 import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
+import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js";
 import { generateTypography } from "../../generators/sass.js";
 //#region src/tools/handlers/typography.ts
 /**
@@ -23,6 +24,7 @@ function handleCreateTypography(params) {
 	responseParts.push("```scss");
 	responseParts.push(result.code.trimEnd());
 	responseParts.push("```");
+	responseParts.push(SASS_USE_ASSEMBLY_NOTE);
 	return { content: [{
 		type: "text",
 		text: responseParts.join("\n")

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

@@ -711,8 +711,8 @@ export declare const createComponentThemeSchema: z.ZodObject<{
     output: z.ZodOptional<z.ZodEnum<["sass", "css"]>>;
 }, "strip", z.ZodTypeAny, {
     platform: "angular" | "webcomponents" | "react" | "blazor" | "generic";
-    component: string;
     tokens: Record<string, string | number>;
+    component: string;
     designSystem?: "material" | "bootstrap" | "fluent" | "indigo" | undefined;
     variant?: "light" | "dark" | undefined;
     name?: string | undefined;
@@ -721,8 +721,8 @@ export declare const createComponentThemeSchema: z.ZodObject<{
     selector?: string | undefined;
 }, {
     platform: "angular" | "webcomponents" | "react" | "blazor" | "generic";
-    component: string;
     tokens: Record<string, string | number>;
+    component: string;
     designSystem?: "material" | "bootstrap" | "fluent" | "indigo" | undefined;
     variant?: "light" | "dark" | undefined;
     name?: string | undefined;
@@ -793,18 +793,18 @@ export declare const setSpacingInputSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     spacing: number;
     platform?: "angular" | "webcomponents" | "react" | "blazor" | "generic" | undefined;
-    inline?: number | undefined;
     output?: "sass" | "css" | undefined;
     component?: string | undefined;
     scope?: string | undefined;
+    inline?: number | undefined;
     block?: number | undefined;
 }, {
     spacing: number;
     platform?: "angular" | "webcomponents" | "react" | "blazor" | "generic" | undefined;
-    inline?: number | undefined;
     output?: "sass" | "css" | undefined;
     component?: string | undefined;
     scope?: string | undefined;
+    inline?: number | undefined;
     block?: number | undefined;
 }>;
 export declare const setSpacingSchema: z.ZodObject<{
@@ -818,18 +818,18 @@ export declare const setSpacingSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     spacing: number;
     platform?: "angular" | "webcomponents" | "react" | "blazor" | "generic" | undefined;
-    inline?: number | undefined;
     output?: "sass" | "css" | undefined;
     component?: string | undefined;
     scope?: string | undefined;
+    inline?: number | undefined;
     block?: number | undefined;
 }, {
     spacing: number;
     platform?: "angular" | "webcomponents" | "react" | "blazor" | "generic" | undefined;
-    inline?: number | undefined;
     output?: "sass" | "css" | undefined;
     component?: string | undefined;
     scope?: string | undefined;
+    inline?: number | undefined;
     block?: number | undefined;
 }>;
 export declare const setRoundnessSchema: z.ZodObject<{

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

@@ -33,13 +33,17 @@ export declare function toVariableName(name: string): string;
  * @returns Formatted Sass comment header
  */
 export declare function generateHeader(description: string): string;
+/** Inline comment prepended above @use lines in generated Sass. */
+export declare const SASS_USE_INLINE_COMMENT = "// NOTE: @use rules must be at the top of the file. Deduplicate when combining multiple outputs.";
+/** Markdown assembly note appended after Sass code blocks in handler responses. */
+export declare const SASS_USE_ASSEMBLY_NOTE = "\n> **File placement:** `@use` rules must appear at the very top of the `.scss` file, before any other statements. When combining outputs from multiple tools, keep only one `@use` per module path.";
 /**
  * Generate the Sass @use statement for the theming library.
  * Uses platform-specific import paths when platform is specified.
  *
  * @param platform - Target platform (angular or webcomponents)
  * @param licensed - Whether to use the licensed @infragistics package (Angular only, defaults to false)
- * @returns The appropriate @use statement for the platform
+ * @returns The inline placement comment + @use statement for the platform
  */
 export declare function generateUseStatement(platform?: Platform, licensed?: boolean): string;
 /**

package/dist/mcp/utils/sass.js

@@ -58,17 +58,21 @@ function toVariableName(name) {
 function generateHeader(description) {
 	return `// Generated by Ignite UI Theming MCP Server\n// ${description}`;
 }
+/** Inline comment prepended above @use lines in generated Sass. */
+var SASS_USE_INLINE_COMMENT = "// NOTE: @use rules must be at the top of the file. Deduplicate when combining multiple outputs.";
+/** Markdown assembly note appended after Sass code blocks in handler responses. */
+var SASS_USE_ASSEMBLY_NOTE = "\n> **File placement:** `@use` rules must appear at the very top of the `.scss` file, before any other statements. When combining outputs from multiple tools, keep only one `@use` per module path.";
 /**
 * Generate the Sass @use statement for the theming library.
 * Uses platform-specific import paths when platform is specified.
 *
 * @param platform - Target platform (angular or webcomponents)
 * @param licensed - Whether to use the licensed @infragistics package (Angular only, defaults to false)
-* @returns The appropriate @use statement for the platform
+* @returns The inline placement comment + @use statement for the platform
 */
 function generateUseStatement(platform, licensed) {
-	if (platform === "angular") return `@use "${licensed ? "@infragistics/igniteui-angular" : "igniteui-angular"}/theming" as *;`;
-	return "@use 'igniteui-theming' as *;";
+	if (platform === "angular") return `${SASS_USE_INLINE_COMMENT}\n@use "${licensed ? "@infragistics/igniteui-angular" : "igniteui-angular"}/theming" as *;`;
+	return `${SASS_USE_INLINE_COMMENT}\n@use 'igniteui-theming' as *;`;
 }
 /**
 * Typography presets index path.
@@ -287,4 +291,4 @@ function generateCustomPaletteCode(options) {
 	return lines;
 }
 //#endregion
-export { generateCustomPaletteCode, generateElevationsCode, generateHeader, generatePaletteCode, generatePresetImports, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName };
+export { SASS_USE_ASSEMBLY_NOTE, generateCustomPaletteCode, generateElevationsCode, generateHeader, generatePaletteCode, generatePresetImports, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "25.2.0",
+  "version": "26.0.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/sass/themes/components/chat/_chat-theme.scss

@@ -16,18 +16,22 @@
 ///
 /// PRIMARY TOKENS:
 /// - `$header-background` — The background color of the chat header.
-/// - `$message-background` — The background color of message bubbles.
+/// - `$sent-message-background` — The background color for sent messages.
+/// - `$received-message-background` — The background color for received messages.
 ///
 /// Derived colors are auto-calculated for contrast.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Color} $background [null] - The background color of the chat component.
-/// @param {Color} $header-background [null] - The background color of the chat header. PRIMARY - derives header-color.
+/// @param {Color} $header-background [null] - The background color of the chat header.
 /// @param {Color} $header-color [null] - The text color of the chat header. Auto-derived from header-background.
 /// @param {Color} $header-border [null] - The color used for the chat header border.
-/// @param {Color} $message-background [null] - The background color of the sent message bubble. PRIMARY - derives message-color, message-actions-color.
-/// @param {Color} $message-color [null] - The text color of the chat messages. Auto-derived from message-background.
-/// @param {Color} $message-actions-color [null] - The icon color of the chat message actions. Auto-derived from message-color.
+/// @param {Color} $sent-message-background [null] - The background color for sent messages.
+/// @param {Color} $sent-message-color [null] - The text color of the chat messages. Auto-derived from sent-message-background.
+/// @param {Color} $received-message-background [null] - The background color for received messages.
+/// @param {Color} $received-message-color [null] - The text color for received messages. Auto-derived from received-message-background.
+/// @param {Color} $message-actions-color [null] - The icon color of the chat received message actions. Auto-derived from received-message-color.
+/// @param {Number} $message-border-radius [null] - The border radius of the chat messages.
 /// @param {Color} $file-background [null] - The background color of the image message container.
 /// @param {Color} $file-icon-color [null] - The color of the attached file icon.
 /// @param {Color} $file-icon-accent-color [null] - The accent color of the attached file icon.
@@ -53,9 +57,14 @@
     $header-color: null,
     $header-border: null,
 
-    $message-background: null,
-    $message-color: null,
+    $sent-message-background: null,
+    $sent-message-color: null,
+
+    $received-message-background: null,
+    $received-message-color: null,
+
     $message-actions-color: null,
+    $message-border-radius: null,
 
     $file-background: null,
     $file-icon-color: null,
@@ -87,12 +96,16 @@
         $header-color: adaptive-contrast(var(--header-background));
     }
 
-    @if not($message-color) and $message-background {
-        $message-color: adaptive-contrast(var(--message-background));
+    @if not($sent-message-color) and $sent-message-background {
+        $sent-message-color: adaptive-contrast(var(--sent-message-background));
+    }
+
+    @if not($received-message-color) and $received-message-background {
+        $received-message-color: adaptive-contrast(var(--received-message-background));
     }
 
-    @if not($message-actions-color) and $message-background {
-        $message-actions-color: adaptive-contrast(var(--message-color));
+    @if not($message-actions-color) and $received-message-background {
+        $message-actions-color: adaptive-contrast(var(--received-message-color));
     }
 
     @return extend(
@@ -105,9 +118,14 @@
             header-color: $header-color,
             header-border: $header-border,
 
-            message-background: $message-background,
-            message-color: $message-color,
+            sent-message-background: $sent-message-background,
+            sent-message-color: $sent-message-color,
+
+            received-message-background: $received-message-background,
+            received-message-color: $received-message-color,
+
             message-actions-color: $message-actions-color,
+            message-border-radius: $message-border-radius,
 
             file-background: $file-background,
             file-icon-color: $file-icon-color,

package/sass/themes/components/grid/_grid-theme.scss

@@ -17,19 +17,15 @@
 /// Grid Theme
 ///
 /// PRIMARY TOKENS:
-/// - `$header-background` — The table header background color.
-/// - `$content-background` — The table body background color.
-/// - `$ghost-header-background` — The dragged header background color.
-/// - `$group-row-background` — The grid group row background color.
-/// - `$grouparea-background` — The grid group area background color.
-///
-/// Derived colors are auto-calculated for contrast.
+/// - `$background` — Controls the overall background color of the grid, including header and content.
+/// - `$foreground` — Controls the overall foreground color of the grid, including text and icons.
+/// - `$accent-color` — Controls the accent color used for interactive elements in the grid.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $background [null] - The background color of the grid. PRIMARY
-/// @param {Color} $foreground [null] - The foreground color of the grid. PRIMARY
-/// @param {Color} $accent-color [null] - The accent color used for interactive elements in the grid. PRIMARY
-/// @param {Color} $header-background [null] - The table header background color. PRIMARY - derives header-text-color, header-border-color, and many more.
+/// @param {Color} $background [null] - The background color of the grid.
+/// @param {Color} $foreground [null] - The foreground color of the grid.
+/// @param {Color} $accent-color [null] - The accent color used for interactive elements in the grid.
+/// @param {Color} $header-background [null] - The table header background color - derives header-text-color, header-border-color, and many more.
 /// @param {Color} $header-text-color [null] - The table header text color. Auto-derived from header-background.
 /// @param {String} $header-border-width [null] - The border width used for header borders.
 /// @param {String} $header-border-style [null] - The border style used for header borders.
@@ -38,11 +34,11 @@
 /// @param {Color} $header-selected-text-color [null] - The table header text color when selected. Auto-derived from header-selected-background.
 /// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted. Auto-derived from header-background.
 /// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover when sortable. Auto-derived from sorted-header-icon-color.
-/// @param {Color} $content-background [null] - The table body background color. PRIMARY - derives content-text-color, row backgrounds, cell backgrounds, borders.
+/// @param {Color} $content-background [null] - The table body background color - derives content-text-color, row backgrounds, cell backgrounds, borders.
 /// @param {Color} $content-text-color [null] - The table body text color. Auto-derived from content-background.
 /// @param {Color} $ghost-header-text-color [null] - The dragged header text color. Auto-derived from ghost-header-background.
 /// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color. Auto-derived from ghost-header-background.
-/// @param {Color} $ghost-header-background [null] - The dragged header background color. PRIMARY - derives ghost-header-text-color, ghost-header-icon-color.
+/// @param {Color} $ghost-header-background [null] - The dragged header background color - derives ghost-header-text-color, ghost-header-icon-color.
 /// @param {Color} $row-odd-background [null] - The background color of odd rows. Auto-derived from content-background.
 /// @param {Color} $row-even-background [null] - The background color of even rows. Auto-derived from content-background.
 /// @param {Color} $row-odd-text-color [null] - The text color of odd rows. Auto-derived from row-odd-background.
@@ -72,9 +68,9 @@
 /// @param {Color} $edited-row-indicator [null] - The edited row indicator line color.
 /// @param {Color} $resize-line-color [null] - The table header resize line color.
 /// @param {Color} $drop-indicator-color [null] - The color of the column drag indicator line.
-/// @param {Color} $grouparea-background [null] - The grid group area background color. PRIMARY - derives grouparea-color, drop-area-background. Auto-derived from header-background.
+/// @param {Color} $grouparea-background [null] - The grid group area background color - derives grouparea-color, drop-area-background. Auto-derived from header-background.
 /// @param {Color} $grouparea-color [null] - The grid group area color. Auto-derived from grouparea-background.
-/// @param {Color} $group-row-background [null] - The grid group row background color. PRIMARY - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background.
+/// @param {Color} $group-row-background [null] - The grid group row background color - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background.
 /// @param {Color} $group-row-selected-background [null] - The group row selected background. Auto-derived from group-row-background.
 /// @param {Color} $group-label-column-name-text [null] - The grid group row column name text color.
 /// @param {Color} $group-label-icon [null] - The grid group row icon color.

package/sass/themes/components/progress/_circular-theme.scss

@@ -20,7 +20,7 @@
 /// The fill-color-default can accept a single color or a list of two colors for gradient effect.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $base-circle-color [null] - The base circle fill color.
+/// @param {Color} $track-color [null] - The base circle fill color.
 /// @param {Color | List<Color>} $fill-color-default [null] - The progress circle fill color. Can be a single color or list of two colors for gradient.
 /// @param {Color} $fill-color-danger [null] - The track danger fill color.
 /// @param {Color} $fill-color-warning [null] - The track warning fill color.
@@ -39,7 +39,7 @@
 ///   @include igx-progress-circular($my-progress-circle-theme);
 @function progress-circular-theme(
     $schema: $light-material-schema,
-    $base-circle-color: null,
+    $track-color: null,
     $fill-color-default: null,
     $fill-color-danger: null,
     $fill-color-warning: null,
@@ -78,7 +78,7 @@
         $theme,
         (
             selector: $selector,
-            base-circle-color: $base-circle-color,
+            track-color: $track-color,
             fill-color-default: $fill-color-default,
             fill-color-default-start: $fill-color-default-start,
             fill-color-default-end: $fill-color-default-end,

package/sass/themes/schemas/components/dark/_progress.scss

@@ -91,9 +91,9 @@ $dark-indigo-progress-linear: extend(
 
 /// Generates a base dark progress-circular schema.
 /// @type Map
-/// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
+/// @prop {Map} track-color [color: ('gray', 300)] - The base circle fill color.
 $dark-base-progress-circular: (
-    base-circle-color: (
+    track-color: (
         color: (
             'gray',
             300,
@@ -125,14 +125,14 @@ $dark-bootstrap-progress-circular: extend($bootstrap-progress-circular, $dark-ba
 
 /// Generates a dark indigo progress-circular schema.
 /// @type Map
-/// @prop {Map} base-circle-color [contrast-color: ('gray', 50, .2)] - The base circle fill color.
+/// @prop {Map} track-color [contrast-color: ('gray', 50, .2)] - The base circle fill color.
 /// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The value text color.
 /// @requires $indigo-progress-circular
 $dark-indigo-progress-circular: extend(
     $indigo-progress-circular,
     $dark-base-progress-circular,
     (
-        base-circle-color: (
+        track-color: (
             contrast-color: (
                 'gray',
                 50,