igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
115 lines (114 loc) • 3.84 kB
JavaScript
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";
import "../../validators/index.js";
//#region src/tools/handlers/palette.ts
/**
* Handler for create_palette tool.
*/
async function handleCreatePalette(params) {
const variant = params.variant ?? "light";
const output = params.output ?? (params.platform === "angular" ? "sass" : "css");
const validation = await validatePaletteColors({
variant,
surface: params.surface,
gray: params.gray
});
if (output === "css") return handleCssOutput(params, validation);
return handleSassOutput(params, validation);
}
/**
* Handle CSS output format - generates CSS custom properties directly.
*/
async function handleCssOutput(params, validation) {
try {
const result = await generatePaletteCss({
primary: params.primary,
secondary: params.secondary,
surface: params.surface,
gray: params.gray,
info: params.info,
success: params.success,
warn: params.warn,
error: params.error,
variant: params.variant
});
const formattedCss = formatCssOutput(result.css, result.description);
const responseParts = [result.description];
responseParts.push("");
responseParts.push("Output format: CSS custom properties");
const validationText = formatValidationResult(validation);
if (validationText) {
responseParts.push("");
responseParts.push(validationText);
}
responseParts.push("");
responseParts.push("```css");
responseParts.push(formattedCss.trimEnd());
responseParts.push("```");
return { content: [{
type: "text",
text: responseParts.join("\n")
}] };
} catch (error) {
return { content: [{
type: "text",
text: `**Error generating CSS palette**\n\n${error instanceof Error ? error.message : String(error)}`
}] };
}
}
/**
* Handle Sass output format - generates Sass code using the palette() function.
*/
function handleSassOutput(params, validation) {
const result = generatePalette({
platform: params.platform,
licensed: params.licensed,
primary: params.primary,
secondary: params.secondary,
surface: params.surface,
gray: params.gray,
info: params.info,
success: params.success,
warn: params.warn,
error: params.error,
variant: params.variant,
name: params.name
});
let finalCode = result.code;
if (!validation.isValid) {
const warningComments = generateWarningComments(validation);
if (warningComments.length > 0) {
const lines = finalCode.split("\n");
const useIndex = lines.findIndex((line) => line.startsWith("@use '") || line.startsWith("@use \""));
if (useIndex > 0) {
lines.splice(useIndex, 0, ...warningComments, "");
finalCode = lines.join("\n");
}
}
}
const responseParts = [result.description];
const platformNote = params.platform ? `Platform: ${PLATFORM_METADATA[params.platform]?.name ?? params.platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
responseParts.push("");
responseParts.push(platformNote);
const validationText = formatValidationResult(validation);
if (validationText) {
responseParts.push("");
responseParts.push(validationText);
}
responseParts.push("");
responseParts.push(`Variables created: ${result.variables.join(", ")}`);
responseParts.push("");
responseParts.push("```scss");
responseParts.push(finalCode.trimEnd());
responseParts.push("```");
responseParts.push(SASS_USE_ASSEMBLY_NOTE);
return { content: [{
type: "text",
text: responseParts.join("\n")
}] };
}
//#endregion
export { handleCreatePalette };