igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
69 lines (68 loc) • 2.15 kB
JavaScript
//#region src/tools/handlers/color.ts
/**
* Build a CSS variable reference for a palette color.
*/
function buildColorReference(color, variant, contrast) {
return `var(--ig-${color}-${variant}${contrast ? "-contrast" : ""})`;
}
/**
* Wrap a color reference with opacity using CSS relative color syntax.
*/
function applyOpacity(colorRef, opacity) {
return `hsl(from ${colorRef} h s l / ${opacity})`;
}
async function handleGetColor(params) {
const { color, variant = "500", contrast = false, opacity } = params;
let result = buildColorReference(color, variant, contrast);
if (opacity !== void 0) result = applyOpacity(result, opacity);
return { content: [{
type: "text",
text: [
buildDescription(color, variant, contrast, opacity),
"",
"```css",
result,
"```",
"",
buildUsageExample(color, variant, contrast, opacity, result)
].join("\n")
}] };
}
/**
* Build a human-readable description of what was returned.
*/
function buildDescription(color, variant, contrast, opacity) {
let desc = contrast ? `Contrast color for ${color} ${variant}` : `${color.charAt(0).toUpperCase() + color.slice(1)} color, shade ${variant}`;
if (opacity !== void 0) desc += ` at ${Math.round(opacity * 100)}% opacity`;
return desc;
}
/**
* Build a usage example showing how to use the returned value.
*/
function buildUsageExample(color, variant, contrast, opacity, result) {
const examples = ["**Usage example:**"];
if (contrast) {
examples.push("```scss");
examples.push(".my-element {");
examples.push(` background: var(--ig-${color}-${variant});`);
examples.push(` color: ${result};`);
examples.push("}");
examples.push("```");
} else if (opacity !== void 0) {
examples.push("```scss");
examples.push(".my-element {");
examples.push(` background: ${result};`);
examples.push("}");
examples.push("```");
} else {
examples.push("```scss");
examples.push(".my-element {");
examples.push(` background: ${result};`);
examples.push(` color: var(--ig-${color}-${variant}-contrast);`);
examples.push("}");
examples.push("```");
}
return examples.join("\n");
}
//#endregion
export { handleGetColor };