igniteui-theming/dist/mcp/validators/palette.d.ts

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

import { PaletteSuitabilityAnalysis, SurfaceGrayAnalysis } from '../utils/color.js';
import { ValidationResult, ValidationWarning } from '../utils/result.js';
import { ThemeVariant } from '../utils/types.js';
export type WarningSeverity = "warning" | "info";
/**
 * A palette validation warning.
 * Extends ValidationWarning with palette-specific fields.
 */
export interface PaletteWarning extends ValidationWarning {
    /** Which parameter the warning is about (mapped to field for compatibility) */
    field: "surface" | "gray" | "contrast";
}
/**
 * Metadata for palette validation results.
 */
export interface PaletteValidationMetadata {
    /** Raw analysis data from Sass */
    analysis: SurfaceGrayAnalysis;
}
/**
 * Result of palette color validation.
 * Uses ValidationResult with palette-specific metadata.
 */
export interface PaletteValidationResult extends ValidationResult<PaletteValidationMetadata> {
    /** Override warnings to use PaletteWarning type */
    warnings: PaletteWarning[];
    /** Raw analysis data (alias for metadata.analysis for backward compatibility) */
    analysis: SurfaceGrayAnalysis;
}
/**
 * Input parameters for palette validation.
 */
export interface ValidatePaletteColorsInput {
    /** Theme variant (light or dark) */
    variant: ThemeVariant;
    /** Surface/background color */
    surface?: string;
    /** Gray base color */
    gray?: string;
    /** Minimum contrast ratio (default: 3) */
    minimumContrastRatio?: number;
}
/**
 * Validate surface and gray colors against the theme variant.
 *
 * Rules:
 * - Light variant: surface should be light (luminance > 0.5), gray should be dark (luminance <= 0.5)
 * - Dark variant: surface should be dark (luminance <= 0.5), gray should be light (luminance > 0.5)
 *
 * The gray logic is inverted because the Sass palette() function generates gray shades
 * that contrast against the surface.
 *
 * @param input - Validation input parameters
 * @returns Validation result with warnings and tips
 */
export declare function validatePaletteColors(input: ValidatePaletteColorsInput): Promise<PaletteValidationResult>;
/**
 * Format validation result as markdown for display.
 *
 * @param result - Validation result to format
 * @returns Markdown string with warnings and tips
 */
export declare function formatValidationResult(result: PaletteValidationResult): string;
/**
 * Generate Sass comment warnings for code generation.
 *
 * @param result - Validation result
 * @returns Array of Sass comment lines
 */
export declare function generateWarningComments(result: PaletteValidationResult): string[];
/**
 * Result of analyzing theme colors for palette shade generation suitability.
 */
export interface ThemeColorsSuitabilityResult {
    /** Whether all colors are suitable for standard palette() generation */
    allSuitable: boolean;
    /** Analysis for each color */
    colors: Record<string, PaletteSuitabilityAnalysis>;
    /** Colors that have suitability issues */
    problematicColors: Array<{
        name: string;
        color: string;
        luminance: number;
        issue: "too-light" | "too-dark";
        description: string;
    }>;
}
/**
 * Analyze theme colors for palette shade generation suitability.
 * Checks if colors have extreme luminance that would produce poor
 * automatic shade generation results with the palette() function.
 *
 * @param params - Theme colors to analyze
 * @returns Analysis result with suitability status and any problematic colors
 */
export declare function analyzeThemeColorsForPalette(params: {
    primary: string;
    secondary?: string;
    surface?: string;
}): Promise<ThemeColorsSuitabilityResult>;
/**
 * Format palette suitability warnings as markdown table.
 *
 * @param result - Suitability analysis result
 * @returns Formatted markdown string with warnings table and recommendations
 */
export declare function formatPaletteSuitabilityWarnings(result: ThemeColorsSuitabilityResult): string;
/**
 * Generate Sass block comment for palette suitability warnings.
 * This comment is inserted into the generated Sass code to warn developers.
 *
 * @param result - Suitability analysis result
 * @returns Array of Sass comment lines
 */
export declare function generatePaletteSuitabilityComments(result: ThemeColorsSuitabilityResult): string[];