igniteui-theming

import { DesignSystem, ElevationPreset, Platform, ThemeVariant } from '../utils/types.js'; /** * Import paths for the theming library by platform. */ export declare const IMPORT_PATHS: { /** Ignite UI for Angular theming module (forwards igniteui-theming with overrides) */ readonly angular: "igniteui-angular/theming"; /** Direct igniteui-theming module for Web Components */ readonly webcomponents: "igniteui-theming"; /** Direct igniteui-theming module for React */ readonly react: "igniteui-theming"; /** Direct igniteui-theming module for Blazor */ readonly blazor: "igniteui-theming"; /** Generic / platform-agnostic code */ readonly generic: "igniteui-theming"; }; /** * Get the appropriate import path for a platform. */ export declare function getImportPath(platform?: Platform): string; /** * Parameters for the palette() Sass function. */ export interface PaletteFunctionParams { /** Primary brand color (required) */ primary: string; /** Secondary/accent color (required) */ secondary: string; /** Surface/background color (required) */ surface: string; /** Gray base color (optional - auto-generated from surface if not provided) */ gray?: string; /** Info state color (optional) */ info?: string; /** Success state color (optional) */ success?: string; /** Warning state color (optional) */ warn?: string; /** Error state color (optional) */ error?: string; } /** * Metadata about the palette() function. */ export declare const PALETTE_FUNCTION: { readonly name: "palette"; /** Required parameters (must always be provided) */ readonly requiredParams: readonly ["primary", "secondary", "surface"]; /** Optional parameters */ readonly optionalParams: readonly ["gray", "info", "success", "warn", "error"]; /** Default variable name pattern */ readonly defaultVariablePattern: "$custom-{variant}-palette"; /** Description for documentation */ readonly description: "Creates a color palette map from base colors. Automatically generates shade variants (50-900, A100-A700) for each color using internal algorithms."; }; /** * Parameters for the shades() Sass function. * Used for generating shade variants from a single base color. */ export interface ShadesFunctionParams { /** Color group name (e.g., 'primary', 'secondary') */ colorName: string; /** Base color to generate shades from */ baseColor: string; /** List of shade levels to generate */ shadeLevels: readonly string[]; /** Surface color (required for gray shades to calculate proper contrast) */ surface?: string; } /** * Metadata about the shades() function. */ export declare const SHADES_FUNCTION: { readonly name: "shades"; /** Description for documentation */ readonly description: "Generates a shade map from a base color. Creates contrast-accessible shade variants automatically."; /** Chromatic shade levels (for primary, secondary, etc.) */ readonly chromaticShadeLevels: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"]; /** Gray shade levels (no accent shades) */ readonly grayShadeLevels: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]; }; /** * Parameters for the typography() mixin. */ export interface TypographyMixinParams { /** Font family string (e.g., "'Inter', sans-serif") */ fontFamily: string; /** Type scale variable reference (e.g., '$material-type-scale') */ typeScale: string; } /** * Metadata about the typography() mixin. */ export declare const TYPOGRAPHY_MIXIN: { readonly name: "typography"; /** Parameter names in order */ readonly params: readonly ["$font-family", "$type-scale"]; /** Description for documentation */ readonly description: "Applies typography CSS custom properties for font sizes, weights, line heights, and letter spacing."; /** CSS class required on root element (Angular only) */ readonly angularRootClass: "ig-typography"; }; /** * Parameters for the elevations() mixin. */ export interface ElevationsMixinParams { /** Elevations variable reference (e.g., '$material-elevations') */ elevations: string; } /** * Metadata about the elevations() mixin. */ export declare const ELEVATIONS_MIXIN: { readonly name: "elevations"; /** Parameter names */ readonly params: readonly ["$elevations"]; /** Number of elevation levels (0-24) */ readonly levelCount: 25; /** Description for documentation */ readonly description: "Applies elevation CSS custom properties for box-shadow values at 25 levels (0-24)."; }; /** * Parameters for the palette() mixin (applies palette to CSS variables). */ export interface PaletteMixinParams { /** Palette variable reference (e.g., '$my-palette') */ palette: string; } /** * Metadata about the palette() mixin. */ export declare const PALETTE_MIXIN: { readonly name: "palette"; /** Description for documentation */ readonly description: "Applies a palette map as CSS custom properties (--ig-* variables)."; }; /** * Metadata about the spacing() mixin. */ export declare const SPACING_MIXIN: { readonly name: "spacing"; /** Platforms that support this mixin */ readonly supportedPlatforms: readonly ["webcomponents", "react", "blazor"]; /** Description for documentation */ readonly description: "Applies spacing CSS custom properties for consistent margins and paddings."; }; /** * Parameters for the core() mixin (Angular only). */ export interface CoreMixinParams { /** Include/exclude styles for printing */ printLayout?: boolean; /** Enable enhanced accessibility colors */ enhancedAccessibility?: boolean; } /** * Metadata about the core() mixin. */ export declare const CORE_MIXIN: { readonly name: "core"; /** Platforms that support this mixin */ readonly supportedPlatforms: readonly ["angular"]; /** Description for documentation */ readonly description: "Provides base definitions for theming. Must be included before theme() mixin."; /** Optional parameters with defaults */ readonly optionalParams: { readonly "$print-layout": true; readonly "$enhanced-accessibility": false; }; }; /** * Parameters for the theme() mixin (Angular only). */ export interface ThemeMixinParams { /** Palette map to use */ palette: string; /** Schema to use for component styling */ schema: string; /** Global roundness factor (0 to 1) */ roundness?: number; /** Enable/disable elevations */ elevation?: boolean; /** Custom elevations map */ elevations?: string; /** Components to exclude from theming */ exclude?: string[]; } /** * Metadata about the theme() mixin. */ export declare const THEME_MIXIN: { readonly name: "theme"; /** Platforms that support this mixin */ readonly supportedPlatforms: readonly ["angular"]; /** Required parameters */ readonly requiredParams: readonly ["$palette", "$schema"]; /** Optional parameters */ readonly optionalParams: readonly ["$roundness", "$elevation", "$elevations", "$exclude"]; /** Description for documentation */ readonly description: "Generates styles for all components using the specified palette and schema."; }; /** * CSS custom property naming patterns used by the theming library. */ export declare const CSS_VARIABLE_PATTERNS: { /** Theme identifier */ readonly theme: "--ig-theme"; /** Theme variant (light/dark) */ readonly themeVariant: "--ig-theme-variant"; /** Component size levels */ readonly sizes: { readonly base: "--ig-size"; readonly small: "--ig-size-small"; readonly medium: "--ig-size-medium"; readonly large: "--ig-size-large"; }; /** Spacing controls */ readonly spacing: { readonly base: "--ig-spacing"; readonly inline: "--ig-spacing-inline"; readonly block: "--ig-spacing-block"; }; /** Roundness scaling */ readonly roundness: "--ig-radius-factor"; /** Scrollbar customization */ readonly scrollbar: { readonly size: "--ig-scrollbar-size"; readonly thumbBackground: "--ig-scrollbar-thumb-background"; readonly trackBackground: "--ig-scrollbar-track-background"; }; /** RTL direction multiplier */ readonly direction: "--ig-dir"; /** Color function pattern: --ig-{color}-{shade} */ readonly colorPattern: "--ig-{color}-{shade}"; /** Elevation pattern: --ig-elevation-{level} */ readonly elevationPattern: "--ig-elevation-{level}"; /** Typography patterns */ readonly typography: { readonly fontFamily: "--ig-font-family"; readonly fontSize: "--ig-font-size-{category}"; readonly fontWeight: "--ig-font-weight-{category}"; readonly lineHeight: "--ig-line-height-{category}"; readonly letterSpacing: "--ig-letter-spacing-{category}"; }; }; /** * Variable naming patterns for the theming library. */ export declare const VARIABLE_PATTERNS: { /** Palette variable: ${variant}-${designSystem}-palette */ readonly palettePreset: (variant: ThemeVariant, designSystem: DesignSystem) => string; /** Schema variable: ${variant}-${designSystem}-schema */ readonly schema: (variant: ThemeVariant, designSystem: DesignSystem) => string; /** Typeface variable: ${designSystem}-typeface */ readonly typeface: (designSystem: DesignSystem) => string; /** Type scale variable: ${designSystem}-type-scale */ readonly typeScale: (designSystem: DesignSystem) => string; /** Elevations variable: ${preset}-elevations */ readonly elevations: (preset: ElevationPreset) => string; /** Custom palette variable */ readonly customPalette: (name: string, variant: ThemeVariant) => string; }; /** * Get the appropriate elevations variable for a design system. */ export declare function getElevationsVariable(designSystem: DesignSystem): string; /** * Check if a mixin is supported on a given platform. */ export declare function isMixinSupported(mixin: "core" | "theme" | "spacing", platform?: Platform): boolean; /** * Get all color groups that should be in a palette. * Returns the canonical list from types.ts. */ export declare function getPaletteColorGroups(): readonly string[];