igniteui-theming/dist/mcp/knowledge/platforms/webcomponents.d.ts

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

import { DesignSystem, ThemeVariant } from '../../utils/types.js';
export declare const WEBCOMPONENTS_PLATFORM: {
    readonly id: "webcomponents";
    readonly name: "Ignite UI for Web Components";
    readonly packageName: "igniteui-webcomponents";
    /**
     * The Sass module to import for theming
     */
    readonly themingModule: "igniteui-theming";
    /**
     * Detection patterns in package.json dependencies
     */
    readonly detectionPatterns: readonly ["igniteui-webcomponents", "@infragistics/igniteui-webcomponents"];
    /**
     * No required root class (themes apply via CSS variables on :root)
     */
    readonly rootClass: null;
};
/**
 * Template for generating a complete Web Components theme
 */
export interface WebComponentsThemeTemplate {
    designSystem: DesignSystem;
    variant: ThemeVariant;
    primaryColor?: string;
    secondaryColor?: string;
    surfaceColor?: string;
    grayColor?: string;
    customPaletteName?: string;
    /** Custom font family (e.g., "'Inter', sans-serif") */
    fontFamily?: string;
    includeTypography?: boolean;
    includeElevations?: boolean;
    includeSpacing?: boolean;
}
/**
 * Generate the file header comment for Web Components themes.
 */
export declare function generateWCHeader(): string[];
/**
 * Get the elevation preset variable for a design system.
 */
export declare function getWCElevationPreset(designSystem: DesignSystem): string;
/**
 * Generate import statements for a Web Components theme.
 */
export declare function generateWCImports(options: {
    designSystem: DesignSystem;
    variant: ThemeVariant;
    hasCustomColors: boolean;
    includeTypography: boolean;
    includeElevations: boolean;
}): string[];
/**
 * Generate CSS @property declarations for progress tracking.
 * These are required by some components.
 */
export declare function generateWCProgressProperties(indent?: string): string[];
/**
 * Generate :root CSS variables for theme configuration.
 */
export declare function generateWCRootVariables(options: {
    designSystem: DesignSystem;
    variant: ThemeVariant;
    usePaletteMap?: boolean;
    indent?: string;
}): string[];
/**
 * Generate RTL direction support.
 */
export declare function generateWCRtlSupport(indent?: string): string[];
/**
 * Generate scrollbar customization using palette colors.
 */
export declare function generateWCScrollbarCustomization(): string[];
/**
 * Generate theming mixin calls (palette, elevations, typography, spacing).
 */
export declare function generateWCThemingMixins(options: {
    paletteVar: string;
    typefaceValue: string;
    elevationsVar: string;
    includeTypography: boolean;
    includeElevations: boolean;
    includeSpacing: boolean;
    indent?: string;
    addComments?: boolean;
}): string[];
/**
 * Generate Sass code for a Web Components theme
 *
 * Web Components themes use igniteui-theming directly and call individual
 * mixins (palette, typography, elevations) rather than a unified theme() mixin.
 *
 * This function orchestrates smaller helper functions for:
 * - Header generation (generateWCHeader)
 * - Import statements (generateWCImports)
 * - Custom or preset palette themes
 */
export declare function generateWebComponentsThemeSass(template: WebComponentsThemeTemplate): string;
/**
 * Example usage documentation
 */
export declare const WEBCOMPONENTS_USAGE_EXAMPLES: {
    readonly basic: "\n// Basic Material Light Theme for Web Components\n@use 'igniteui-theming/sass/color/presets/light/material' as *;\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/material' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n:root {\n  --ig-theme: material;\n  --ig-theme-variant: light;\n  --ig-size-small: 1;\n  --ig-size-medium: 2;\n  --ig-size-large: 3;\n  --ig-scrollbar-size: #{rem(16px)};\n}\n\n@include palette($palette);\n@include elevations($material-elevations);\n@include typography(\n  $font-family: $typeface,\n  $type-scale: $type-scale\n);\n@include spacing();\n";
    readonly customPalette: "\n// Custom Palette Theme for Web Components\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/material' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n$my-palette: palette(\n  $primary: #2ab759,\n  $secondary: #f96a88,\n  $surface: #ffffff\n);\n\n:root {\n  --ig-theme: material;\n  --ig-theme-variant: light;\n  --ig-size-small: 1;\n  --ig-size-medium: 2;\n  --ig-size-large: 3;\n}\n\n@include palette($my-palette);\n@include elevations($material-elevations);\n@include typography(\n  $font-family: $typeface,\n  $type-scale: $type-scale\n);\n@include spacing();\n";
    readonly darkTheme: "\n// Dark Indigo Theme for Web Components\n@use 'igniteui-theming/sass/color/presets/dark/indigo' as *;\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/indigo' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n:root {\n  --ig-theme: indigo;\n  --ig-theme-variant: dark;\n  --ig-size-small: 1;\n  --ig-size-medium: 2;\n  --ig-size-large: 3;\n}\n\n@include palette($palette);\n@include elevations($indigo-elevations);\n@include typography(\n  $font-family: $typeface,\n  $type-scale: $type-scale\n);\n@include spacing();\n";
    readonly minimalConfig: "\n// Minimal theme (palette only, no typography/elevations)\n@use 'igniteui-theming/sass/color/presets/light/bootstrap' as *;\n@use 'igniteui-theming' as *;\n\n:root {\n  --ig-theme: bootstrap;\n  --ig-theme-variant: light;\n}\n\n@include palette($palette);\n";
};
/**
 * Runtime theme configuration for Web Components
 *
 * Web Components support runtime theme switching via the configureTheme() function
 * and CSS variables. This is different from Angular which requires Sass recompilation.
 */
export declare const WEBCOMPONENTS_RUNTIME_CONFIG: {
    /**
     * JavaScript API for runtime theme switching
     */
    readonly configureThemeAPI: "\nimport { configureTheme } from 'igniteui-webcomponents';\n\n// Switch to dark material theme at runtime\nconfigureTheme('material', 'dark');\n\n// Switch to light indigo theme\nconfigureTheme('indigo', 'light');\n";
    /**
     * CSS variables that control the theme at runtime
     */
    readonly runtimeVariables: readonly ["--ig-theme", "--ig-theme-variant"];
    /**
     * Events dispatched during theme changes
     */
    readonly themeChangeEvents: readonly ["igc-change-theme", "igc-changed-theme"];
};