igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
51 lines (50 loc) • 2.23 kB
TypeScript
import { CreateElevationsInput, CreatePaletteInput, CreateThemeInput, CreateTypographyInput, DesignSystem, GeneratedCode, Platform, ThemeVariant } from '../utils/types.js';
export type { ElevationsCodeOptions, PaletteCodeOptions, PaletteCodeResult, TypographyCodeOptions, } from '../utils/sass.js';
export { generateElevationsCode, generateHeader, generatePaletteCode, generatePresetImports, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
/**
* Generate a palette definition.
*/
export declare function generatePalette(input: CreatePaletteInput): GeneratedCode;
/**
* Generate typography setup.
*/
export declare function generateTypography(input: CreateTypographyInput): GeneratedCode;
/**
* Generate elevations setup.
*/
export declare function generateElevations(input: CreateElevationsInput): GeneratedCode;
/**
* Generate a complete theme (palette + typography + elevations).
*
* Supports two platforms:
* - `angular`: Uses `igniteui-angular/theming` with `core()` and `theme()` mixins
* - `webcomponents`: Uses `igniteui-theming` directly with individual mixins
*
* If no platform is specified, defaults to generating platform-agnostic code
* using igniteui-theming directly (similar to webcomponents but simpler).
*/
export declare function generateTheme(input: CreateThemeInput): GeneratedCode;
/**
* Input for generating a component theme.
*/
export interface CreateComponentThemeInput {
platform: Platform;
/** Whether to use licensed @infragistics package (Angular only, defaults to false) */
licensed?: boolean;
/** Design system (defaults to 'material') */
designSystem?: DesignSystem;
/** Theme variant - light or dark (defaults to 'light') */
variant?: ThemeVariant;
/** Component name (e.g., "flat-button", "avatar") */
component: string;
/** Token name-value pairs */
tokens: Record<string, string | number>;
/** Optional CSS selector to scope the theme */
selector?: string;
/** Optional custom variable name */
name?: string;
}
/**
* Generate Sass code for a component theme.
*/
export declare function generateComponentTheme(input: CreateComponentThemeInput): GeneratedCode;