igniteui-theming/dist/mcp/generators/css.d.ts

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

import { FileImporter } from 'sass-embedded';
import { ColorDefinition, GrayDefinition, PLATFORMS, ThemeVariant } from '../utils/types.js';
/**
 * Result from generating CSS palette variables.
 */
export interface CssPaletteResult {
    css: string;
    description: string;
}
/**
 * Result from generating component theme CSS.
 */
export interface CssComponentThemeResult {
    css: string;
    description: string;
}
/**
 * Options for generating standard palette CSS variables.
 */
export interface PaletteCssOptions {
    primary: string;
    secondary: string;
    surface: string;
    gray?: string;
    info?: string;
    success?: string;
    warn?: string;
    error?: string;
    variant?: ThemeVariant;
    /** Internal testing parameter for Sass importers */
    _importers?: FileImporter[];
}
/**
 * Generate CSS custom properties for a standard palette.
 *
 * This function compiles Sass code that uses the palette() function and
 * @include palette() mixin, then returns the compiled CSS output.
 *
 * @example
 * const result = await generatePaletteCss({
 *   primary: '#1976d2',
 *   secondary: '#ff9800',
 *   surface: '#fafafa',
 *   variant: 'light'
 * });
 * // result.css contains :root { --ig-primary-50: ...; --ig-primary-100: ...; ... }
 */
export declare function generatePaletteCss(options: PaletteCssOptions): Promise<CssPaletteResult>;
/**
 * Options for generating custom palette CSS variables.
 */
export interface CustomPaletteCssOptions {
    variant?: ThemeVariant;
    surfaceColor?: string;
    colors: {
        primary: ColorDefinition;
        secondary: ColorDefinition;
        surface: ColorDefinition;
        gray: GrayDefinition;
        info: ColorDefinition;
        success: ColorDefinition;
        warn: ColorDefinition;
        error: ColorDefinition;
    };
    /** Internal testing parameter for Sass importers */
    _importers?: FileImporter[];
}
/**
 * Generate CSS custom properties for a custom palette.
 *
 * This function generates Sass code for the custom palette structure
 * (using either shades() function or explicit values), compiles it,
 * and returns the CSS output.
 */
export declare function generateCustomPaletteCss(options: CustomPaletteCssOptions): Promise<CssPaletteResult>;
/**
 * Format CSS output for display.
 * Adds a header comment and ensures consistent formatting.
 */
export declare function formatCssOutput(css: string, description: string): string;
/**
 * Options for generating component theme CSS variables.
 */
export interface ComponentThemeCssOptions {
    platform: (typeof PLATFORMS)[number];
    /** Design system (defaults to 'material') */
    designSystem?: string;
    /** Theme variant - light or dark (defaults to 'light') */
    variant?: string;
    /** Component name (e.g., "button", "avatar") */
    component: string;
    /** Token name-value pairs */
    tokens: Record<string, string | number>;
    /** CSS selector to scope the theme (optional) */
    selector?: string;
    /** Custom variable name (optional) */
    name?: string;
    /** Internal testing parameter for Sass importers */
    _importers?: FileImporter[];
}
/**
 * Generate CSS custom properties for a component theme.
 *
 * This function compiles Sass code that uses the component theme function
 * and @include tokens() mixin, then returns the compiled CSS output.
 *
 * @example
 * const result = await generateComponentThemeCss({
 *   platform: 'webcomponents',
 *   designSystem: 'bootstrap',
 *   variant: 'light',
 *   component: 'button',
 *   tokens: { background: '#1976d2', 'text-color': 'white' },
 *   selector: 'igc-button'
 * });
 * // result.css contains: igc-button { --ig-button-background: var(--ig-button-background, #1976d2); ... }
 */
export declare function generateComponentThemeCss(options: ComponentThemeCssOptions): Promise<CssComponentThemeResult>;
/**
 * Options for generating typography CSS variables.
 */
export interface TypographyCssOptions {
    /** Font family string with fallbacks */
    fontFamily?: string;
    /** Design system preset (defaults to 'material') */
    designSystem?: string;
    /** Internal testing parameter for Sass importers */
    _importers?: FileImporter[];
}
/**
 * Generate CSS custom properties for a typography setup.
 *
 * Compiles the typography() mixin and returns the resulting CSS custom
 * properties (--ig-h1-font-size, --ig-body-1-font-weight, etc.).
 */
export declare function generateTypographyCss(options: TypographyCssOptions): Promise<CssPaletteResult>;
/**
 * Options for generating elevations CSS variables.
 */
export interface ElevationsCssOptions {
    /** Design system preset: 'material' or 'indigo' (defaults to 'material') */
    designSystem?: string;
    /** Internal testing parameter for Sass importers */
    _importers?: FileImporter[];
}
/**
 * Generate CSS custom properties for elevations.
 *
 * Compiles the elevations() mixin and returns the resulting CSS custom
 * properties (--ig-elevation-0 through --ig-elevation-24).
 */
export declare function generateElevationsCss(options: ElevationsCssOptions): Promise<CssPaletteResult>;
/**
 * Options for generating a complete theme's CSS variables.
 */
export interface ThemeCssOptions {
    platform?: (typeof PLATFORMS)[number];
    designSystem?: string;
    variant?: ThemeVariant;
    primaryColor: string;
    secondaryColor: string;
    surfaceColor: string;
    fontFamily?: string;
    includeTypography?: boolean;
    includeElevations?: boolean;
    includeSpacing?: boolean;
    name?: string;
    /** Internal testing parameter for Sass importers */
    _importers?: FileImporter[];
}
/**
 * Result from generating a complete theme's CSS variables.
 */
export interface CssThemeResult {
    css: string;
    description: string;
    /**
     * True when platform is 'angular'. Angular CSS output contains only
     * CSS custom properties — it does not include the component-scoped class
     * styles generated by Angular's core() and theme() mixins.
     */
    angularCaveat?: boolean;
}
/**
 * Generate CSS custom properties for a complete theme.
 *
 * For Web Components, React, and Blazor this compiles the full
 * palette + typography + elevations Sass and returns all resulting
 * CSS custom properties in one block.
 *
 * For Angular the same approach is used, but the response carries
 * `angularCaveat: true` to signal that component-scoped class styles
 * (generated by core() + theme()) are absent from the CSS output.
 */
export declare function generateThemeCss(options: ThemeCssOptions): Promise<CssThemeResult>;