igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
155 lines (152 loc) • 6.19 kB
JavaScript
import { PALETTE_PRESETS } from "../../knowledge/palettes.js";
import { PLATFORM_METADATA } from "../../knowledge/platforms/index.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";
//#region src/tools/handlers/custom-palette.ts
/**
* Handler for create_custom_palette tool.
*/
async function handleCreateCustomPalette(params) {
const variant = params.variant ?? "light";
const designSystem = params.designSystem ?? "material";
const output = params.output ?? (params.platform === "angular" ? "sass" : "css");
const preset = PALETTE_PRESETS[`${variant}-${designSystem}-palette`];
let surfaceColorForGray;
if (params.surface.mode === "shades") surfaceColorForGray = params.surface.baseColor;
else surfaceColorForGray = params.surface.shades["500"];
const colors = {
primary: params.primary,
secondary: params.secondary,
surface: params.surface,
gray: params.gray ?? {
mode: "shades",
baseColor: preset.gray
},
info: params.info ?? {
mode: "shades",
baseColor: preset.info
},
success: params.success ?? {
mode: "shades",
baseColor: preset.success
},
warn: params.warn ?? {
mode: "shades",
baseColor: preset.warn
},
error: params.error ?? {
mode: "shades",
baseColor: preset.error
}
};
const validation = await validateCustomPalette({
platform: params.platform,
variant,
designSystem,
name: params.name,
primary: colors.primary,
secondary: colors.secondary,
surface: colors.surface,
gray: colors.gray,
info: colors.info,
success: colors.success,
warn: colors.warn,
error: colors.error
}, variant);
if (!validation.isValid) return { content: [{
type: "text",
text: `**Validation Failed**\n\n${formatCustomPaletteValidation(validation)}\n\nPlease fix the errors and try again.`
}] };
if (output === "css") return handleCssOutput(params, variant, designSystem, surfaceColorForGray, colors, validation);
return handleSassOutput(params, variant, designSystem, surfaceColorForGray, colors, validation);
}
/**
* Handle CSS output format - generates CSS custom properties directly.
*/
async function handleCssOutput(params, variant, designSystem, surfaceColorForGray, colors, validation) {
try {
const result = await generateCustomPaletteCss({
variant: params.variant,
surfaceColor: surfaceColorForGray,
colors
});
const formattedCss = formatCssOutput(result.css, result.description);
const responseParts = ["**Custom Palette Generated (CSS)**"];
responseParts.push("");
responseParts.push(`Created CSS custom properties for a custom ${variant} color palette based on ${designSystem} defaults.`);
responseParts.push("");
responseParts.push("Output format: CSS custom properties");
const shadesMode = Object.entries(colors).filter(([_, def]) => def.mode === "shades").map(([name]) => name);
const explicitMode = Object.entries(colors).filter(([_, def]) => def.mode === "explicit").map(([name]) => name);
responseParts.push("");
if (shadesMode.length > 0) responseParts.push(`**Using shades() function:** ${shadesMode.join(", ")}`);
if (explicitMode.length > 0) responseParts.push(`**Using explicit shades:** ${explicitMode.join(", ")}`);
if (validation.warnings.length > 0) {
responseParts.push("");
responseParts.push(formatCustomPaletteValidation(validation));
}
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 with palette map structure.
*/
function handleSassOutput(params, variant, designSystem, surfaceColorForGray, colors, validation) {
const paletteName = params.name ? toVariableName(params.name) : `custom-${variant}`;
const paletteLines = generateCustomPaletteCode({
platform: params.platform,
variant: params.variant,
variableName: paletteName,
surfaceColor: surfaceColorForGray,
colors
});
const varName = `$${paletteName}-palette`;
const code = `${generateHeader(`Custom ${variant} palette with explicit shade control`)}
${generateUseStatement(params.platform, params.licensed)}
${paletteLines.join("\n")}
// Apply the palette (generates CSS custom properties)
@include palette(${varName});
`;
const responseParts = ["**Custom Palette Generated**"];
responseParts.push("");
responseParts.push(`Created a custom ${variant} color palette based on ${designSystem} defaults.`);
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 shadesMode = Object.entries(colors).filter(([_, def]) => def.mode === "shades").map(([name]) => name);
const explicitMode = Object.entries(colors).filter(([_, def]) => def.mode === "explicit").map(([name]) => name);
responseParts.push("");
if (shadesMode.length > 0) responseParts.push(`**Using shades() function:** ${shadesMode.join(", ")}`);
if (explicitMode.length > 0) responseParts.push(`**Using explicit shades:** ${explicitMode.join(", ")}`);
responseParts.push("");
responseParts.push(`**Variable:** \`${varName}\``);
if (validation.warnings.length > 0) {
responseParts.push("");
responseParts.push(formatCustomPaletteValidation(validation));
}
responseParts.push("");
responseParts.push("```scss");
responseParts.push(code.trimEnd());
responseParts.push("```");
responseParts.push(SASS_USE_ASSEMBLY_NOTE);
return { content: [{
type: "text",
text: responseParts.join("\n")
}] };
}
//#endregion
export { handleCreateCustomPalette };